@proto-labs-inc/rig-vue 0.2.4 → 0.3.0

package/README.md

@@ -1,5 +1,15 @@
 # @proto-labs-inc/rig-vue
 
-The rig for Vue prototypes: `app.use(protoRig(manifest))` at the root, and
-`usePreviewState` / `useVariant` in components. All logic lives in
-`@proto-labs-inc/rig-core`; this package is the Vue idiom.
+Await the hosted runtime before mounting Vue:
+
+```ts
+async function start() {
+  const rig = await protoRig(manifest);
+  createApp(App).use(rig).mount("#app");
+}
+void start().catch(showRetry);
+```
+
+Components keep using `usePreviewState` and `useVariant`. The adapter subscribes
+to the framework-independent hosted runtime and disposes it on app unmount.
+The initial startup requires a working connection to the configured runtime.

package/dist/index.d.ts

@@ -1,16 +1,16 @@
 /**
- * @proto-labs-inc/rig-vue — the Vue 3 adapter over @proto-labs-inc/rig-core. All rig logic
- * lives in the core; this file is only the Vue idiom: an app plugin +
- * composables mirroring the React hooks' [value, set] shape.
+ * @proto-labs-inc/rig-vue — the Vue 3 adapter over @proto-labs-inc/rig-core. Hosted rig logic
+ * loads before mounting. This file supplies the Vue plugin and composables
+ * mirroring the React hooks' [value, set] shape.
  *
  * Usage:
- *   app.use(protoRig(manifest))
+ *   app.use(await protoRig(manifest))
  *   const [state, setState] = usePreviewState("populated", ["populated", "empty"])
  */
 import { type Plugin, type Ref } from "vue";
 import type { Manifest } from "@proto-labs-inc/wire";
 /** Install on the app root; wires the bridge once, client-side. */
-export declare function protoRig(manifest: Manifest): Plugin;
+export declare function protoRig(manifest: Manifest): Promise<Plugin>;
 /** The prototype's preview state, addressable as ?state=<id>. */
 export declare function usePreviewState(defaultId: string, validIds?: readonly string[]): readonly [Readonly<Ref<string, string>>, (v: string) => void];
 /** A component's design variant, addressable as ?v.<component>=<id>. */

package/dist/index.js

@@ -1,23 +1,24 @@
 /**
- * @proto-labs-inc/rig-vue — the Vue 3 adapter over @proto-labs-inc/rig-core. All rig logic
- * lives in the core; this file is only the Vue idiom: an app plugin +
- * composables mirroring the React hooks' [value, set] shape.
+ * @proto-labs-inc/rig-vue — the Vue 3 adapter over @proto-labs-inc/rig-core. Hosted rig logic
+ * loads before mounting. This file supplies the Vue plugin and composables
+ * mirroring the React hooks' [value, set] shape.
  *
  * Usage:
- *   app.use(protoRig(manifest))
+ *   app.use(await protoRig(manifest))
  *   const [state, setState] = usePreviewState("populated", ["populated", "empty"])
  */
 import { inject, onScopeDispose, shallowRef, } from "vue";
-import { RigStore, wireRig, STATE_PARAM, variantParam } from "@proto-labs-inc/rig-core";
+import { loadRuntime, STATE_PARAM, variantParam } from "@proto-labs-inc/rig-core";
 const RIG_KEY = Symbol("proto-rig");
 /** Install on the app root; wires the bridge once, client-side. */
-export function protoRig(manifest) {
+export async function protoRig(manifest) {
+    const runtime = await loadRuntime(manifest, new AbortController().signal);
     return {
         install(app) {
-            const store = new RigStore(manifest);
+            const store = runtime.store;
             app.provide(RIG_KEY, store);
             if (typeof window !== "undefined") {
-                const dispose = wireRig(store, manifest);
+                const dispose = () => runtime.dispose();
                 const unmount = app.unmount.bind(app);
                 app.unmount = () => {
                     dispose();
@@ -30,7 +31,7 @@ export function protoRig(manifest) {
 function useRigValue(key, fallback, valid) {
     const store = inject(RIG_KEY, null);
     if (!store)
-        throw new Error("useRig* composables require app.use(protoRig(manifest))");
+        throw new Error("useRig* composables require app.use(await protoRig(manifest))");
     const normalize = (raw) => valid && !valid.includes(raw) ? fallback : raw;
     const value = shallowRef(normalize(store.get(key) ?? fallback));
     const unsubscribe = store.subscribe(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proto-labs-inc/rig-vue",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Proto's rig for Vue prototypes: an app plugin and composables over @proto-labs-inc/rig-core.",
   "license": "MIT",
   "repository": {
@@ -23,8 +23,8 @@
     "vue": ">=3.3"
   },
   "dependencies": {
-    "@proto-labs-inc/rig-core": "^0.2.4",
-    "@proto-labs-inc/wire": "^0.2.3"
+    "@proto-labs-inc/rig-core": "^0.3.0",
+    "@proto-labs-inc/wire": "^0.3.0"
   },
   "devDependencies": {
     "typescript": "~6.0.2",