feat(virtual): improve virtual storage handling; drastically improve …

…nuxt support

package.json

@@ -122,6 +122,9 @@
     "vitest": "^0.23.1",
     "webpack": "^5.74.0"
   },
+  "resolutions": {
+    "jiti": "1.14.0"
+  },
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [

playground/__VLS_types.ts

@@ -0,0 +1,105 @@
+
+import * as vue from 'vue';
+import type {
+	FunctionalComponent,
+	EmitsOptions,
+	DefineComponent,
+	SetupContext,
+	ObjectDirective,
+	FunctionDirective,
+} from 'vue';
+
+type IsAny<T> = boolean extends (T extends never ? true : false) ? true : false;
+export type PickNotAny<A, B> = IsAny<A> extends true ? B : A;
+type AnyArray<T = any> = T[] | readonly T[];
+type ForableSource<T> = [
+	T extends { [Symbol.iterator](): IterableIterator<infer T1> } ? T1 : T[keyof T], // item
+	typeof Symbol.iterator extends keyof T ? number : T extends T ? keyof T : never, // key
+	typeof Symbol.iterator extends keyof T ? undefined : number, // index
+][];
+
+export type GlobalComponents =
+	// @ts-ignore
+	PickNotAny<import('vue').GlobalComponents, {}>
+	// @ts-ignore
+	& PickNotAny<import('@vue/runtime-core').GlobalComponents, {}>
+	// @ts-ignore
+	& PickNotAny<import('@vue/runtime-dom').GlobalComponents, {}>
+	& Pick<typeof vue,
+		// @ts-ignore
+		'Transition'
+		| 'TransitionGroup'
+		| 'KeepAlive'
+		| 'Suspense'
+		| 'Teleport'
+	>;
+
+export declare function getVforSourceType<T>(source: T): ForableSource<NonNullable<T extends number ? number[] : T extends string ? string[] : T>>;
+export declare function getNameOption<T>(t?: T): T extends { name: infer N } ? N : undefined;
+export declare function directiveFunction<T>(dir: T):
+	T extends ObjectDirective<infer E, infer V> ? undefined extends V ? (value?: V) => void : (value: V) => void
+	: T extends FunctionDirective<infer E, infer V> ? undefined extends V ? (value?: V) => void : (value: V) => void
+	: T;
+export declare function withScope<T, K>(ctx: T, scope: K): ctx is T & K;
+export declare function makeOptional<T>(t: T): { [K in keyof T]?: T[K] };
+
+export type ExtractComponentSlots<T> =
+	IsAny<T> extends true ? Record<string, any>
+	: T extends { $slots?: infer S } ? { [K in keyof S]-?: S[K] extends ((obj: infer O) => any) | undefined ? O : any }
+	: Record<string, any>;
+
+export type FillingEventArg_ParametersLength<E extends (...args: any) => any> = IsAny<Parameters<E>> extends true ? -1 : Parameters<E>['length'];
+export type FillingEventArg<E> = E extends (...args: any) => any ? FillingEventArg_ParametersLength<E> extends 0 ? ($event?: undefined) => ReturnType<E> : E : E;
+
+export type ExtractEmit2<T> =
+	T extends FunctionalComponent<infer _, infer E> ? SetupContext<E>['emit']
+	: T extends new (...args: any) => { $emit: infer Emit } ? Emit
+	: unknown;
+export type ReturnVoid<T> = T extends (...payload: infer P) => any ? (...payload: P) => void : (...args: any) => void;
+export type EmitEvent2<F, E> =
+	F extends {
+		(event: E, ...payload: infer P): infer R
+	} ? (...payload: P) => void
+	: F extends {
+		(event: E, ...payload: infer P): infer R
+		(...args: any): any
+	} ? (...payload: P) => void
+	: F extends {
+		(event: E, ...payload: infer P): infer R
+		(...args: any): any
+		(...args: any): any
+	} ? (...payload: P) => void
+	: F extends {
+		(event: E, ...payload: infer P): infer R
+		(...args: any): any
+		(...args: any): any
+		(...args: any): any
+	} ? (...payload: P) => void
+	: unknown | '[Type Warning] Volar could not infer $emit event more than 4 overloads without DefineComponent. see https://github.com/johnsoncodehk/volar/issues/60';
+export type EmitEvent<T, E> =
+	T extends DefineComponent<infer _, any, any, any, any, any, any, infer E2> ? EmitEvent_3<E2, E>
+	: T extends FunctionalComponent<infer _, infer E2> ? EmitEvent_3<E2, E>
+	: T extends FunctionalComponent<infer _, infer E> ? EmitEvent2<SetupContext<E>['emit'], E>
+	: unknown;
+export type EmitEvent_3<E2, E> =
+	EmitsOptions extends E2 ? unknown
+	: E2 extends AnyArray<infer K> ? (E extends K ? (...args: any) => void : unknown) // emits: ['event-1', 'event-2']
+	: E extends keyof E2 ? ReturnVoid<E2[E]> // emits: { 'event-1': () => true, 'event-2': () => true }
+	: unknown
+export type FirstFunction<F0 = void, F1 = void, F2 = void, F3 = void, F4 = void> =
+	NonNullable<F0> extends (Function | AnyArray<Function>) ? F0 :
+	NonNullable<F1> extends (Function | AnyArray<Function>) ? F1 :
+	NonNullable<F2> extends (Function | AnyArray<Function>) ? F2 :
+	NonNullable<F3> extends (Function | AnyArray<Function>) ? F3 :
+	NonNullable<F4> extends (Function | AnyArray<Function>) ? F4 :
+	unknown;
+export type GlobalAttrs = JSX.IntrinsicElements['div'];
+export type SelfComponent<N, C> = string extends N ? {} : N extends string ? { [P in N]: C } : {};
+export type PickComponents<T> = ComponentKeys<T> extends keyof T ? Pick<T, ComponentKeys<T>> : T;
+export type ConvertInvalidJsxElement<T> = IsComponent<T> extends true ? T : any;
+
+type IsComponent<T> =
+	T extends (...args: any) => JSX.Element ? true
+	: T extends new (...args: any) => JSX.ElementClass ? true
+	: IsAny<T>
+type ComponentKeys<T> = keyof { [K in keyof T as IsComponent<T[K]> extends true ? K : never]: any };

playground/app.vue.tsx

@@ -0,0 +1,123 @@
+
+const __VLS_options = {
+};
+
+const __VLS_name = undefined;
+function __VLS_template() {
+import * as __VLS_types from './__VLS_types.js'; import('./__VLS_types.js');
+let __VLS_ctx!: __VLS_types.PickNotAny<__VLS_Ctx, {}> & InstanceType<__VLS_types.PickNotAny<typeof __VLS_component, new () => {}>> & {
+};
+let __VLS_vmUnwrap!: typeof __VLS_options & { components: { } };
+/* Components */
+let __VLS_otherComponents!: NonNullable<typeof __VLS_component extends { components: infer C } ? C : {}> & __VLS_types.GlobalComponents & typeof __VLS_vmUnwrap.components & __VLS_types.PickComponents<typeof __VLS_ctx>;
+let __VLS_selfComponent!: __VLS_types.SelfComponent<typeof __VLS_name, typeof __VLS_component & (new () => { $slots: typeof __VLS_slots })>;
+let __VLS_components!: typeof __VLS_otherComponents & Omit<typeof __VLS_selfComponent, keyof typeof __VLS_otherComponents>;
+__VLS_components['/* __VLS_.SearchTexts.Components */'];
+({} as __VLS_types.GlobalAttrs)['/* __VLS_.SearchTexts.GlobalAttrs */'];
+/* Style Scoped */
+type __VLS_StyleScopedClasses = {};
+let __VLS_styleScopedClasses!: __VLS_StyleScopedClasses | keyof __VLS_StyleScopedClasses | (keyof __VLS_StyleScopedClasses)[];
+/* CSS variable injection */
+/* CSS variable injection end */
+declare const NuxtLayout: __VLS_types.ConvertInvalidJsxElement<
+'NuxtLayout' extends keyof typeof __VLS_components ? typeof __VLS_components['NuxtLayout'] : 
+'NuxtLayout' extends keyof typeof __VLS_ctx ? typeof __VLS_ctx['NuxtLayout'] : unknown>;
+__VLS_components.NuxtLayout;
+__VLS_components.NuxtLayout;
+__VLS_ctx.NuxtLayout;
+__VLS_ctx.NuxtLayout;
+declare const __VLS_0: __VLS_types.ExtractEmit2<typeof NuxtLayout>;
+/* Completion: Emits */
+// @ts-ignore
+__VLS_0('/* __VLS_.SearchTexts.Completion.Emit.NuxtLayout */');
+/* Completion: Props */
+// @ts-ignore
+(<NuxtLayout /* __VLS_.SearchTexts.Completion.Props.NuxtLayout *//>);
+declare const Block: __VLS_types.ConvertInvalidJsxElement<
+'Block' extends keyof typeof __VLS_components ? typeof __VLS_components['Block'] : 
+'Block' extends keyof typeof __VLS_ctx ? typeof __VLS_ctx['Block'] : unknown>;
+__VLS_components.Block;
+__VLS_components.Block;
+__VLS_components.Block;
+__VLS_components.Block;
+__VLS_components.Block;
+__VLS_components.Block;
+__VLS_ctx.Block;
+__VLS_ctx.Block;
+__VLS_ctx.Block;
+__VLS_ctx.Block;
+__VLS_ctx.Block;
+__VLS_ctx.Block;
+declare const __VLS_1: __VLS_types.ExtractEmit2<typeof Block>;
+/* Completion: Emits */
+// @ts-ignore
+__VLS_1('/* __VLS_.SearchTexts.Completion.Emit.Block */');
+/* Completion: Props */
+// @ts-ignore
+(<Block /* __VLS_.SearchTexts.Completion.Props.Block *//>);
+{
+<NuxtLayout ></NuxtLayout>;
+
+{
+<section ></section>;
+
+{
+<Block primary={true} />
+}
+{
+<Block black={true} />
+}
+{
+<Block lila={true} />
+}
+{
+<Block lavender={true} />
+}
+{
+<Block velvet={true} />
+}
+{
+<Block grape={true} />
+}
+}
+}
+if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {
+}
+declare var __VLS_slots:
+{
+};
+return __VLS_slots;
+}
+const __VLS_component = (await import('vue')).defineComponent({});
+export default {} as anyimport type { TokensFunction, CSS, PinceauTheme, PinceauTheme, PinceauThemePaths, TokensFunctionOptions } from 'pinceau'
+const css = (declaration: CSS<ComponentTemplateTags__VLS, PinceauTheme>) => declaration
+const $dt = (path?: PinceauThemePaths, options?: TokensFunctionOptions) => ({ path, options })
+type ComponentTemplateTags__VLS = {
+  /**
+  * The `<NuxtLayout>` tag from the Vue template.
+  */
+  NuxtLayout: true,
+  /**
+  * The `<section>` tag from the Vue template.
+  */
+  section: true,
+  /**
+  * The `<Block>` tag from the Vue template.
+  */
+  Block: true,
+}
+
+declare const $variantsProps: (key: keyof ComponentTemplateTags__VLS) => {}
+
+const __VLS_css = css({
+  section: {
+    flex: '1',
+    width: '100%',
+    overflowY: 'auto',
+    padding: '1rem 2rem',
+    zIndex: '50',
+    '& > * + *': {
+      marginTop: '1rem'
+    }
+  }
+})

playground/components/Block.vue

@@ -23,7 +23,7 @@ css({
     borderRadius: '16px',
     width: '320px',
     height: '320px',
-    border: '16px solid {colors.grape}',
+    border: '16px solid {colors.grey}',
     padding: '',
     position: 'relative',
     '&:hover': {

playground/components/Block.vue.tsx

@@ -0,0 +1,132 @@
+
+export default await (async () => {
+const __VLS_setup = async () => {
+const props = defineProps({
+  ...$variantsProps('button'),
+})
+const __VLS_Component = (await import('vue')).defineComponent({
+props: ({
+  ...$variantsProps('button'),
+}),
+setup() {
+return {
+};
+},
+});
+
+const __VLS_options = {
+};
+
+let __VLS_name!: 'Block';
+function __VLS_template() {
+import * as __VLS_types from './__VLS_types.js'; import('./__VLS_types.js');
+let __VLS_ctx!: __VLS_types.PickNotAny<__VLS_Ctx, {}> & InstanceType<__VLS_types.PickNotAny<typeof __VLS_Component, new () => {}>> & InstanceType<__VLS_types.PickNotAny<typeof __VLS_component, new () => {}>> & {
+};
+let __VLS_vmUnwrap!: typeof __VLS_options & { components: { } };
+/* Components */
+let __VLS_otherComponents!: NonNullable<typeof __VLS_component extends { components: infer C } ? C : {}> & __VLS_types.GlobalComponents & typeof __VLS_vmUnwrap.components & __VLS_types.PickComponents<typeof __VLS_ctx>;
+let __VLS_selfComponent!: __VLS_types.SelfComponent<typeof __VLS_name, typeof __VLS_component & (new () => { $slots: typeof __VLS_slots })>;
+let __VLS_components!: typeof __VLS_otherComponents & Omit<typeof __VLS_selfComponent, keyof typeof __VLS_otherComponents>;
+__VLS_components['/* __VLS_.SearchTexts.Components */'];
+({} as __VLS_types.GlobalAttrs)['/* __VLS_.SearchTexts.GlobalAttrs */'];
+/* Style Scoped */
+type __VLS_StyleScopedClasses = {}
+ & { 'primary'?: boolean };
+let __VLS_styleScopedClasses!: __VLS_StyleScopedClasses | keyof __VLS_StyleScopedClasses | (keyof __VLS_StyleScopedClasses)[];
+/* CSS variable injection */
+/* CSS variable injection end */
+{
+<button class={({ ...__VLS_ctx.$props })} ></button>;
+
+__VLS_styleScopedClasses = ({ ...$props });
+[$props,];
+for (const [[key, value]] of __VLS_types.getVforSourceType(Object.entries(__VLS_ctx.$props))) {
+[$props,];
+if (value) {
+{
+<p key={(key)} ></p>;
+
+( value ? key : '' );
+}
+}
+}
+}
+if (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {
+}
+declare var __VLS_slots:
+{
+};
+return __VLS_slots;
+}
+const __VLS_component = (await import('vue')).defineComponent({
+setup() {
+return {
+};
+},
+});
+return {} as typeof __VLS_Component;
+};
+return await __VLS_setup();
+})();
+import type { TokensFunction, CSS, PinceauTheme, PinceauTheme, PinceauThemePaths, TokensFunctionOptions } from 'pinceau'
+const css = (declaration: CSS<ComponentTemplateTags__VLS, PinceauTheme>) => declaration
+const $dt = (path?: PinceauThemePaths, options?: TokensFunctionOptions) => ({ path, options })
+type ComponentTemplateTags__VLS = {
+  /**
+  * The `<button>` tag from the Vue template.
+  */
+  button: true,
+  /**
+  * The `<p>` tag from the Vue template.
+  */
+  p: true,
+}
+
+declare const $variantsProps: (key: keyof ComponentTemplateTags__VLS) => {}
+
+const __VLS_css = css({
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '16px',
+    width: '320px',
+    height: '320px',
+    border: '16px solid {colors.grey}',
+    padding: '',
+    position: 'relative',
+    '&:hover': {
+      border: '8px solid blue',
+    },
+    '& > p': {
+      fontSize: '16px',
+      textDecoration: 'underline',
+    },
+    variants: {
+      primary: {
+        backgroundColor: '{colors.primary.500}',
+      },
+      black: {
+        backgroundColor: '{colors.black}',
+      },
+      lavender: {
+        backgroundColor: '{colors.lavender}'
+      },
+      lila: {
+        backgroundColor: '{colors.lila}'
+      },
+      velvet: {
+        backgroundColor: '{colors.velvet}'
+      },
+      grape: {
+        backgroundColor: '{colors.grape}'
+      },
+      rounded: {
+        borderRadius: '50%'
+      },
+      padded: {
+        padding: '4rem'
+      },
+    }
+  }
+})