@rmc-toolkit/vue 0.2.0

package/dist/create-vue-adapter.d.ts

@@ -0,0 +1,11 @@
+import type * as VueNamespace from "vue";
+import { type RuntimeHostObservableOptions, type RuntimeHostStatus } from "@rmc-toolkit/core";
+export type UseRuntimeHostOptions = Omit<RuntimeHostObservableOptions, "target">;
+export type UseRuntimeHostResult = {
+    target: VueNamespace.Ref<Element | null>;
+    status: VueNamespace.Ref<RuntimeHostStatus>;
+};
+export declare const createVueAdapter: (Vue: typeof VueNamespace) => {
+    useRuntimeHost(path: () => string, options: UseRuntimeHostOptions): UseRuntimeHostResult;
+};
+//# sourceMappingURL=create-vue-adapter.d.ts.map

package/dist/create-vue-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-vue-adapter.d.ts","sourceRoot":"","sources":["../src/create-vue-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,YAAY,MAAM,KAAK,CAAC;AACzC,OAAO,EAGL,KAAK,4BAA4B,EACjC,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,4BAA4B,EAAE,QAAQ,CAAC,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,KAAK,OAAO,YAAY,KACvB;IACD,cAAc,CAAC,IAAI,EAAE,MAAM,MAAM,EAAE,OAAO,EAAE,qBAAqB,GAAG,oBAAoB,CAAC;CA4D1F,CAAC"}

package/dist/create-vue-adapter.js

@@ -0,0 +1,53 @@
+import { createRuntimeHostObservable, } from "@rmc-toolkit/core";
+export const createVueAdapter = (Vue) => {
+    const useRuntimeHost = (path, options) => {
+        const target = Vue.ref(null);
+        const status = Vue.ref({ type: "idle" });
+        let observable = null;
+        let unsubscribe = null;
+        Vue.onMounted(() => {
+            if (!target.value) {
+                return;
+            }
+            observable = createRuntimeHostObservable({ ...options, target: target.value });
+            // Assigning .value here from an externally-triggered callback (not
+            // during a component render or a computed/effect run) is safe by
+            // design: a ref's setter just updates its value and notifies its
+            // subscribers, and doesn't require an active reactive tracking
+            // context. No nextTick() or other synchronization is needed, the same
+            // way it wouldn't be for a WebSocket message handler updating a ref.
+            unsubscribe = observable.subscribe((next) => {
+                status.value = next;
+            });
+            // Forward the initial path now that the observable exists. Reading the
+            // observable's own getSnapshot() first would also work, but calling
+            // next() unconditionally here mirrors the watcher below and guarantees
+            // the first navigation happens exactly once, right after creation.
+            observable.next(path());
+        });
+        // Deliberately a separate watcher rather than folded into onMounted: the
+        // watch callback registered here has no `{ immediate: true }`, so it
+        // never fires synchronously during setup — it only fires on a later
+        // reactive change, which cannot happen before mount completes and
+        // onMounted's callback has already run and assigned `observable`. Do not
+        // add `{ immediate: true }` to this watch call — that would let it fire
+        // during setup, before observable is assigned, and (once mount does
+        // complete) would also race a duplicate next(path()) against the one in
+        // onMounted above.
+        Vue.watch(path, (newPath) => {
+            observable?.next(newPath);
+        });
+        Vue.onUnmounted(() => {
+            unsubscribe?.();
+            unsubscribe = null;
+            // Fire-and-forget: destroy() returns a Promise, but onUnmounted has no
+            // way to keep the component alive until it settles, and callers of
+            // useRuntimeHost have no handle to await it either. This matches
+            // createReactAdapter's cleanup effect, which discards the same Promise.
+            void observable?.destroy();
+            observable = null;
+        });
+        return { target, status };
+    };
+    return { useRuntimeHost };
+};

package/dist/create-vue-adapter.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=create-vue-adapter.test.d.ts.map

package/dist/create-vue-adapter.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-vue-adapter.test.d.ts","sourceRoot":"","sources":["../src/create-vue-adapter.test.ts"],"names":[],"mappings":""}

package/dist/create-vue-adapter.test.js

@@ -0,0 +1,81 @@
+// @vitest-environment happy-dom
+import { describe, expect, test, vi } from "vitest";
+import * as Vue from "vue";
+import { createApp, h } from "vue";
+const observers = new Set();
+let currentStatus = { type: "idle" };
+const mockNext = vi.fn((path) => {
+    currentStatus = { type: "loading", path };
+    observers.forEach((observer) => observer(currentStatus));
+    currentStatus = { type: "ready", path };
+    observers.forEach((observer) => observer(currentStatus));
+});
+const mockDestroy = vi.fn(async () => { });
+const mockCreateRuntimeHostObservable = vi.fn((_options) => ({
+    next: mockNext,
+    destroy: mockDestroy,
+    subscribe: (observer) => {
+        observers.add(observer);
+        return () => observers.delete(observer);
+    },
+    getSnapshot: () => currentStatus,
+}));
+vi.mock("@rmc-toolkit/core", () => ({
+    createRuntimeHostObservable: (options) => mockCreateRuntimeHostObservable(options),
+}));
+const { createVueAdapter } = await import("./create-vue-adapter.js");
+const manifest = { namespace: "@acme", assetsOrigin: "https://assets.example.com" };
+describe("createVueAdapter", () => {
+    test("creates one observable on mount, forwards the initial path to next(), and surfaces status", async () => {
+        mockCreateRuntimeHostObservable.mockClear();
+        mockNext.mockClear();
+        mockDestroy.mockClear();
+        currentStatus = { type: "idle" };
+        const { useRuntimeHost } = createVueAdapter(Vue);
+        const currentPath = Vue.ref("/search");
+        const TestComponent = {
+            setup() {
+                return useRuntimeHost(() => currentPath.value, { manifest });
+            },
+            render() {
+                return h("div", { ref: "target" }, this.status.type);
+            },
+        };
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const app = createApp(TestComponent);
+        app.mount(container);
+        await Vue.nextTick();
+        expect(mockCreateRuntimeHostObservable).toHaveBeenCalledTimes(1);
+        expect(mockNext).toHaveBeenCalledWith("/search");
+        expect(container.textContent).toBe("ready");
+        app.unmount();
+        expect(mockDestroy).toHaveBeenCalledTimes(1);
+    });
+    test("forwards a new path to next() when the reactive path source changes", async () => {
+        mockCreateRuntimeHostObservable.mockClear();
+        mockNext.mockClear();
+        currentStatus = { type: "idle" };
+        const { useRuntimeHost } = createVueAdapter(Vue);
+        const currentPath = Vue.ref("/search");
+        const TestComponent = {
+            setup() {
+                return useRuntimeHost(() => currentPath.value, { manifest });
+            },
+            render() {
+                return h("div", { ref: "target" });
+            },
+        };
+        const container = document.createElement("div");
+        document.body.appendChild(container);
+        const app = createApp(TestComponent);
+        app.mount(container);
+        await Vue.nextTick();
+        currentPath.value = "/cart";
+        await Vue.nextTick();
+        expect(mockCreateRuntimeHostObservable).toHaveBeenCalledTimes(1);
+        expect(mockNext).toHaveBeenNthCalledWith(1, "/search");
+        expect(mockNext).toHaveBeenNthCalledWith(2, "/cart");
+        app.unmount();
+    });
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { createVueAdapter } from "./create-vue-adapter.js";
+export type { UseRuntimeHostOptions, UseRuntimeHostResult, } from "./create-vue-adapter.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,YAAY,EACV,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { createVueAdapter } from "./create-vue-adapter.js";

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@rmc-toolkit/vue",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@rmc-toolkit/core": "0.2.0",
+    "vue": ">=3"
+  },
+  "dependencies": {
+    "@rmc-toolkit/core": "0.2.0"
+  },
+  "scripts": {
+    "build": "tsc -b"
+  }
+}