@lifeart/async-dom 2.0.0-alpha.3

package/dist/vue.d.ts

@@ -0,0 +1,126 @@
+import { v as SerializedError } from "./base.js";
+import { n as DebugOptions } from "./debug.js";
+import { g as SchedulerConfig, r as AsyncDomInstance } from "./index.js";
+import * as vue0 from "vue";
+import { PropType, Ref, ShallowRef, SlotsType } from "vue";
+
+//#region src/vue/AsyncDom.d.ts
+/** Props for the {@link AsyncDom} Vue component. */
+interface AsyncDomProps {
+  /** Worker script path or factory function */
+  worker: string | (() => Worker);
+  /** Scheduler configuration */
+  scheduler?: SchedulerConfig;
+  /** Enable debug mode (true for defaults, or pass DebugOptions) */
+  debug?: DebugOptions | boolean;
+}
+/**
+ * Vue component that renders an async-dom worker application.
+ *
+ * Wraps the {@link useAsyncDom} composable in a self-contained component.
+ * Supports a `fallback` slot for loading state.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <AsyncDom worker="./app.worker.ts" @ready="onReady">
+ *     <template #fallback>
+ *       <p>Loading...</p>
+ *     </template>
+ *   </AsyncDom>
+ * </template>
+ * ```
+ */
+declare const AsyncDom: vue0.DefineComponent<vue0.ExtractPropTypes<{
+  worker: {
+    type: PropType<string | (() => Worker)>;
+    required: true;
+  };
+  scheduler: {
+    type: PropType<SchedulerConfig>;
+    default: undefined;
+  };
+  debug: {
+    type: PropType<boolean | DebugOptions>;
+    default: undefined;
+  };
+}>, () => vue0.VNode<vue0.RendererNode, vue0.RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {
+  ready: (_instance: AsyncDomInstance) => true;
+  error: (_error: SerializedError) => true;
+}, string, vue0.PublicProps, Readonly<vue0.ExtractPropTypes<{
+  worker: {
+    type: PropType<string | (() => Worker)>;
+    required: true;
+  };
+  scheduler: {
+    type: PropType<SchedulerConfig>;
+    default: undefined;
+  };
+  debug: {
+    type: PropType<boolean | DebugOptions>;
+    default: undefined;
+  };
+}>> & Readonly<{
+  onReady?: ((_instance: AsyncDomInstance) => any) | undefined;
+  onError?: ((_error: SerializedError) => any) | undefined;
+}>, {
+  scheduler: SchedulerConfig;
+  debug: boolean | DebugOptions;
+}, SlotsType<{
+  fallback?: Record<string, never>;
+}>, {}, {}, string, vue0.ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=AsyncDom.d.ts.map
+//#endregion
+//#region src/vue/use-async-dom.d.ts
+interface UseAsyncDomOptions {
+  /** Worker script path or factory function */
+  worker: string | (() => Worker);
+  /** Scheduler configuration */
+  scheduler?: SchedulerConfig;
+  /** Debug options (pass `true` for sensible defaults, or a `DebugOptions` object) */
+  debug?: DebugOptions | boolean;
+  /** Called when the async-dom instance is ready */
+  onReady?: (instance: AsyncDomInstance) => void;
+  /** Called when a worker error occurs */
+  onError?: (error: SerializedError) => void;
+}
+interface UseAsyncDomResult {
+  /** Template ref to bind to the container element */
+  containerRef: Ref<HTMLDivElement | null>;
+  /** The async-dom instance (null until ready) */
+  instance: ShallowRef<AsyncDomInstance | null>;
+}
+/**
+ * Vue composable that creates and manages an async-dom instance.
+ *
+ * Attaches an async-dom worker to the container element referenced by
+ * `containerRef`. The instance is created on `onMounted` and destroyed on
+ * `onBeforeUnmount`. Must be called during component setup.
+ *
+ * @param options - Configuration for the async-dom instance.
+ * @returns An object containing the container template ref and a shallow ref to the instance.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useAsyncDom } from "@lifeart/async-dom/vue";
+ *
+ * const { containerRef, instance } = useAsyncDom({
+ *   worker: "./my-worker.ts",
+ *   onReady: (inst) => console.log("Ready!", inst),
+ * });
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef" />
+ * </template>
+ * ```
+ */
+declare function useAsyncDom(options: UseAsyncDomOptions): UseAsyncDomResult;
+//# sourceMappingURL=use-async-dom.d.ts.map
+
+//#endregion
+export { AsyncDom, type AsyncDomInstance, type AsyncDomProps, type DebugOptions, type SchedulerConfig, type SerializedError, type UseAsyncDomOptions, type UseAsyncDomResult, useAsyncDom };
+//# sourceMappingURL=vue.d.ts.map

package/dist/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","names":[],"sources":["../src/vue/AsyncDom.ts","../src/vue/use-async-dom.ts"],"sourcesContent":[],"mappings":";;;;;;;;UAMiB,aAAA;;0BAEQ;EAFR;EAAa,SAAA,CAAA,EAIjB,eAJiB;;OAIjB,CAAA,EAEJ,YAFI,GAAA,OAAA;;;AAsBb;;;;;;;;;;;;;;;;AAoBiC,cApBpB,QAoBoB,OApBZ,eAoBY,CAPK,IAAA,CAbjB,gBAoBY,CAAA;QAfuB,EAAA;IAAzB,IAAA,EAAA,QAAA,CAAA,MAAA,GAAA,CAAA,GAAA,GAAyB,MAAzB,CAAA,CAAA;IAIH,QAAA,EAAA,IAAA;;WAIqB,EAAA;IAAnB,IAAA,EAJX,QAIW,CAJF,eAIE,CAAA;IAAQ,OAAA,EAAA,SAAA;;;UAAR,mBAAmB;;;qBAb5B,IAAA,CAAA,YAAA;MAwBR,EAAA,MAAA,CAAA,EAAA,GAAA;;qBALQ;UAnBA,MAAA,EAoBH,eApBG,EAAA,GAAA,IAAA;CAAA,EAAA,MAAA,EAoBY,IAAA,CAAA,WAAA,UApBZ,CAaiB,IAAA,CAAA,gBAbjB,CAAA;;UAKU,yBAAyB;;EChCvC,CAAA;EAAkB,SAAA,EAAA;IAEV,IAAA,EDkCN,QClCM,CDkCG,eClCH,CAAA;IAEZ,OAAA,EAAA,SAAA;;OAIS,EAAA;IAEH,IAAA,ED8BW,QC9BX,CAAA,OAAA,GD8B8B,YC9B9B,CAAA;IAAe,OAAA,EAAA,SAAA;EAGjB,CAAA;CAAiB,CAAA,CAAA,WAAA,CAAA;SAEf,CAAA,EAAA,CAAA,CAAA,SAAA,kBAAA,EAAA,GAAA,GAAA,CAAA,GAAA,SAAA;SAAJ,CAAA,EAAA,CAAA,CAAA,MAAA,iBAAA,EAAA,GAAA,GAAA,CAAA,GAAA,SAAA;;WAEJ,iBAAA;EAAU,KAAA,EAAA,OAAA,eAAA;AA6BrB,CAAA,WAAgB,CAAA;EAAW,QAAA,CAAA,EDKd,MCLc,CAAA,MAAA,EAAA,KAAA,CAAA;QAAU,CAAA,CAAA,EAAA,MAAA,gCAAA,IAAA,EAAA,CAAA,CAAA,EAAA,GAAA,CAAA;;;;UA9CpB,kBAAA;;0BAEQ;;EDDR,SAAA,CAAA,ECGJ,eDHiB;EAAA;OAEL,CAAA,ECGhB,YDHgB,GAAA,OAAA;;SAIhB,CAAA,EAAA,CAAA,QAAA,ECCa,gBDDb,EAAA,GAAA,IAAA;EAAY;EAoBR,OAAA,CAAA,EAAA,CA8CX,KAAA,EC/DiB,eD+DjB,EAAA,GAAA,IAAA;;AAzCsD,UCnBvC,iBAAA,CDmBuC;;cAI5B,ECrBb,GDqBa,CCrBT,cDqBS,GAAA,IAAA,CAAA;;UAIqB,ECvBtC,UDuBsC,CCvB3B,gBDuB2B,GAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAb5B,iBCmBL,WAAA,CDnBK,OAAA,ECmBgB,kBDnBhB,CAAA,ECmBqC,iBDnBrC"}

package/dist/vue.js

@@ -0,0 +1,120 @@
+import { t as resolveDebugOption } from "./resolve-debug.js";
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+//#region src/vue/use-async-dom.ts
+/**
+* Vue composable that creates and manages an async-dom instance.
+*
+* Attaches an async-dom worker to the container element referenced by
+* `containerRef`. The instance is created on `onMounted` and destroyed on
+* `onBeforeUnmount`. Must be called during component setup.
+*
+* @param options - Configuration for the async-dom instance.
+* @returns An object containing the container template ref and a shallow ref to the instance.
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+* import { useAsyncDom } from "@lifeart/async-dom/vue";
+*
+* const { containerRef, instance } = useAsyncDom({
+*   worker: "./my-worker.ts",
+*   onReady: (inst) => console.log("Ready!", inst),
+* });
+* <\/script>
+*
+* <template>
+*   <div ref="containerRef" />
+* </template>
+* ```
+*/
+function useAsyncDom(options) {
+	const containerRef = ref(null);
+	const instance = shallowRef(null);
+	let destroyed = false;
+	onMounted(async () => {
+		const el = containerRef.value;
+		if (!el) return;
+		const workerProp = options.worker;
+		const worker = typeof workerProp === "string" ? new Worker(new URL(workerProp, import.meta.url), { type: "module" }) : workerProp();
+		const { createAsyncDom } = await import("./main-thread.js").then((n) => n.n);
+		if (destroyed) {
+			worker.terminate();
+			return;
+		}
+		const inst = createAsyncDom({
+			target: el,
+			worker,
+			scheduler: options.scheduler,
+			debug: resolveDebugOption(options.debug)
+		});
+		inst.start();
+		instance.value = inst;
+		options.onReady?.(inst);
+	});
+	onBeforeUnmount(() => {
+		destroyed = true;
+		instance.value?.destroy();
+		instance.value = null;
+	});
+	return {
+		containerRef,
+		instance
+	};
+}
+//#endregion
+//#region src/vue/AsyncDom.ts
+/**
+* Vue component that renders an async-dom worker application.
+*
+* Wraps the {@link useAsyncDom} composable in a self-contained component.
+* Supports a `fallback` slot for loading state.
+*
+* @example
+* ```vue
+* <template>
+*   <AsyncDom worker="./app.worker.ts" @ready="onReady">
+*     <template #fallback>
+*       <p>Loading...</p>
+*     </template>
+*   </AsyncDom>
+* </template>
+* ```
+*/
+const AsyncDom = defineComponent({
+	name: "AsyncDom",
+	props: {
+		worker: {
+			type: [String, Function],
+			required: true
+		},
+		scheduler: {
+			type: Object,
+			default: void 0
+		},
+		debug: {
+			type: [Boolean, Object],
+			default: void 0
+		}
+	},
+	emits: {
+		ready: (_instance) => true,
+		error: (_error) => true
+	},
+	slots: Object,
+	setup(props, { emit, slots }) {
+		const { containerRef, instance } = useAsyncDom({
+			worker: props.worker,
+			scheduler: props.scheduler,
+			debug: props.debug,
+			onReady: (inst) => emit("ready", inst),
+			onError: (err) => emit("error", err)
+		});
+		return () => {
+			return h("div", null, [!instance.value && slots.fallback ? slots.fallback() : null, h("div", { ref: containerRef })]);
+		};
+	}
+});
+//#endregion
+export { AsyncDom, useAsyncDom };
+
+//# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.js","names":[],"sources":["../src/vue/use-async-dom.ts","../src/vue/AsyncDom.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, type Ref, ref, type ShallowRef, shallowRef } from \"vue\";\nimport type { DebugOptions, SchedulerConfig, SerializedError } from \"../index.ts\";\nimport type { AsyncDomInstance } from \"../main-thread/index.ts\";\nimport { resolveDebugOption } from \"../shared/resolve-debug.ts\";\n\nexport interface UseAsyncDomOptions {\n\t/** Worker script path or factory function */\n\tworker: string | (() => Worker);\n\t/** Scheduler configuration */\n\tscheduler?: SchedulerConfig;\n\t/** Debug options (pass `true` for sensible defaults, or a `DebugOptions` object) */\n\tdebug?: DebugOptions | boolean;\n\t/** Called when the async-dom instance is ready */\n\tonReady?: (instance: AsyncDomInstance) => void;\n\t/** Called when a worker error occurs */\n\tonError?: (error: SerializedError) => void;\n}\n\nexport interface UseAsyncDomResult {\n\t/** Template ref to bind to the container element */\n\tcontainerRef: Ref<HTMLDivElement | null>;\n\t/** The async-dom instance (null until ready) */\n\tinstance: ShallowRef<AsyncDomInstance | null>;\n}\n\n/**\n * Vue composable that creates and manages an async-dom instance.\n *\n * Attaches an async-dom worker to the container element referenced by\n * `containerRef`. The instance is created on `onMounted` and destroyed on\n * `onBeforeUnmount`. Must be called during component setup.\n *\n * @param options - Configuration for the async-dom instance.\n * @returns An object containing the container template ref and a shallow ref to the instance.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { useAsyncDom } from \"@lifeart/async-dom/vue\";\n *\n * const { containerRef, instance } = useAsyncDom({\n *   worker: \"./my-worker.ts\",\n *   onReady: (inst) => console.log(\"Ready!\", inst),\n * });\n * </script>\n *\n * <template>\n *   <div ref=\"containerRef\" />\n * </template>\n * ```\n */\nexport function useAsyncDom(options: UseAsyncDomOptions): UseAsyncDomResult {\n\tconst containerRef = ref<HTMLDivElement | null>(null);\n\tconst instance = shallowRef<AsyncDomInstance | null>(null);\n\tlet destroyed = false;\n\n\tonMounted(async () => {\n\t\tconst el = containerRef.value;\n\t\tif (!el) return;\n\n\t\tconst workerProp = options.worker;\n\t\tconst worker =\n\t\t\ttypeof workerProp === \"string\"\n\t\t\t\t? new Worker(new URL(workerProp, import.meta.url), { type: \"module\" })\n\t\t\t\t: workerProp();\n\n\t\tconst { createAsyncDom } = await import(\"../main-thread/index.ts\");\n\n\t\tif (destroyed) {\n\t\t\tworker.terminate();\n\t\t\treturn;\n\t\t}\n\n\t\tconst inst = createAsyncDom({\n\t\t\ttarget: el,\n\t\t\tworker,\n\t\t\tscheduler: options.scheduler,\n\t\t\tdebug: resolveDebugOption(options.debug),\n\t\t});\n\t\tinst.start();\n\t\tinstance.value = inst;\n\t\toptions.onReady?.(inst);\n\t});\n\n\tonBeforeUnmount(() => {\n\t\tdestroyed = true;\n\t\tinstance.value?.destroy();\n\t\tinstance.value = null;\n\t});\n\n\treturn { containerRef, instance };\n}\n","import { defineComponent, h, type PropType, type SlotsType } from \"vue\";\nimport type { DebugOptions, SchedulerConfig, SerializedError } from \"../index.ts\";\nimport type { AsyncDomInstance } from \"../main-thread/index.ts\";\nimport { useAsyncDom } from \"./use-async-dom.ts\";\n\n/** Props for the {@link AsyncDom} Vue component. */\nexport interface AsyncDomProps {\n\t/** Worker script path or factory function */\n\tworker: string | (() => Worker);\n\t/** Scheduler configuration */\n\tscheduler?: SchedulerConfig;\n\t/** Enable debug mode (true for defaults, or pass DebugOptions) */\n\tdebug?: DebugOptions | boolean;\n}\n\n/**\n * Vue component that renders an async-dom worker application.\n *\n * Wraps the {@link useAsyncDom} composable in a self-contained component.\n * Supports a `fallback` slot for loading state.\n *\n * @example\n * ```vue\n * <template>\n *   <AsyncDom worker=\"./app.worker.ts\" @ready=\"onReady\">\n *     <template #fallback>\n *       <p>Loading...</p>\n *     </template>\n *   </AsyncDom>\n * </template>\n * ```\n */\nexport const AsyncDom = defineComponent({\n\tname: \"AsyncDom\",\n\n\tprops: {\n\t\tworker: {\n\t\t\ttype: [String, Function] as PropType<string | (() => Worker)>,\n\t\t\trequired: true,\n\t\t},\n\t\tscheduler: {\n\t\t\ttype: Object as PropType<SchedulerConfig>,\n\t\t\tdefault: undefined,\n\t\t},\n\t\tdebug: {\n\t\t\ttype: [Boolean, Object] as PropType<boolean | DebugOptions>,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\temits: {\n\t\tready: (_instance: AsyncDomInstance) => true,\n\t\terror: (_error: SerializedError) => true,\n\t},\n\n\tslots: Object as SlotsType<{\n\t\tfallback?: Record<string, never>;\n\t}>,\n\n\tsetup(props, { emit, slots }) {\n\t\t// biome-ignore lint/correctness/useHookAtTopLevel: Vue composable, not a React hook\n\t\tconst { containerRef, instance } = useAsyncDom({\n\t\t\tworker: props.worker,\n\t\t\tscheduler: props.scheduler,\n\t\t\tdebug: props.debug,\n\t\t\tonReady: (inst) => emit(\"ready\", inst),\n\t\t\tonError: (err) => emit(\"error\", err),\n\t\t});\n\n\t\treturn () => {\n\t\t\t// Fallback is rendered as a sibling before the container div to avoid\n\t\t\t// Vue's VDOM diffing from clearing the worker-rendered content inside it.\n\t\t\treturn h(\"div\", null, [\n\t\t\t\t!instance.value && slots.fallback ? slots.fallback() : null,\n\t\t\t\th(\"div\", { ref: containerRef }),\n\t\t\t]);\n\t\t};\n\t},\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,SAAgB,YAAY,SAAgD;CAC3E,MAAM,eAAe,IAA2B,KAAK;CACrD,MAAM,WAAW,WAAoC,KAAK;CAC1D,IAAI,YAAY;AAEhB,WAAU,YAAY;EACrB,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EAET,MAAM,aAAa,QAAQ;EAC3B,MAAM,SACL,OAAO,eAAe,WACnB,IAAI,OAAO,IAAI,IAAI,YAAY,OAAO,KAAK,IAAI,EAAE,EAAE,MAAM,UAAU,CAAC,GACpE,YAAY;EAEhB,MAAM,EAAE,mBAAmB,MAAM,OAAO,oBAAA,MAAA,MAAA,EAAA,EAAA;AAExC,MAAI,WAAW;AACd,UAAO,WAAW;AAClB;;EAGD,MAAM,OAAO,eAAe;GAC3B,QAAQ;GACR;GACA,WAAW,QAAQ;GACnB,OAAO,mBAAmB,QAAQ,MAAM;GACxC,CAAC;AACF,OAAK,OAAO;AACZ,WAAS,QAAQ;AACjB,UAAQ,UAAU,KAAK;GACtB;AAEF,uBAAsB;AACrB,cAAY;AACZ,WAAS,OAAO,SAAS;AACzB,WAAS,QAAQ;GAChB;AAEF,QAAO;EAAE;EAAc;EAAU;;;;;;;;;;;;;;;;;;;;;AC1DlC,MAAa,WAAW,gBAAgB;CACvC,MAAM;CAEN,OAAO;EACN,QAAQ;GACP,MAAM,CAAC,QAAQ,SAAS;GACxB,UAAU;GACV;EACD,WAAW;GACV,MAAM;GACN,SAAS,KAAA;GACT;EACD,OAAO;GACN,MAAM,CAAC,SAAS,OAAO;GACvB,SAAS,KAAA;GACT;EACD;CAED,OAAO;EACN,QAAQ,cAAgC;EACxC,QAAQ,WAA4B;EACpC;CAED,OAAO;CAIP,MAAM,OAAO,EAAE,MAAM,SAAS;EAE7B,MAAM,EAAE,cAAc,aAAa,YAAY;GAC9C,QAAQ,MAAM;GACd,WAAW,MAAM;GACjB,OAAO,MAAM;GACb,UAAU,SAAS,KAAK,SAAS,KAAK;GACtC,UAAU,QAAQ,KAAK,SAAS,IAAI;GACpC,CAAC;AAEF,eAAa;AAGZ,UAAO,EAAE,OAAO,MAAM,CACrB,CAAC,SAAS,SAAS,MAAM,WAAW,MAAM,UAAU,GAAG,MACvD,EAAE,OAAO,EAAE,KAAK,cAAc,CAAC,CAC/B,CAAC;;;CAGJ,CAAC"}