@proto-labs-inc/rig-core 0.2.0 → 0.2.2

package/dist/index.d.ts

@@ -7,6 +7,10 @@
 import { type Manifest, type ResolvedPreviewTheme, type RigToFrame } from "@proto-labs-inc/wire";
 export { STATE_PARAM, variantParam } from "@proto-labs-inc/wire";
 export declare const INTERNAL_PREVIEW_THEME_PARAM = "__protoTheme";
+/** Mark the page light or dark (data-proto-theme and the "dark" class) for
+ *  a prototype that styles both. The page's own CSS decides color-scheme:
+ *  forcing it here gave pages that only style light mode dark form fields
+ *  on a light page whenever the viewer's system was dark. */
 export declare function applyPreviewTheme(theme: ResolvedPreviewTheme): void;
 /** All addressable state, mirrored to the URL. Keys: "state" | "v.<component>". */
 export declare class RigStore {
@@ -14,11 +18,15 @@ export declare class RigStore {
     private values;
     private listeners;
     constructor(manifest: Manifest);
+    updateManifest(manifest: Manifest): void;
     get(key: string): string | undefined;
     set(key: string, value: string): void;
     setMany(entries: Array<[string, string]>): void;
     setState(id: string, variants: Record<string, string>): void;
     subscribe: (l: () => void) => () => void;
+    /** Restore the exact URL, including removed selections, without writing a
+     * new history entry while Back or Forward is traversing an existing one. */
+    restoreUrl(): void;
     private syncUrl;
 }
 export declare function postToFrame(msg: RigToFrame): void;

package/dist/index.js

@@ -6,16 +6,20 @@
  */
 import { PROTOCOL_VERSION, STATE_PARAM, variantParam, applyVariantSelection, isFrameToRig, } from "@proto-labs-inc/wire";
 import { loadFrameTools } from "./frame-tools-loader.js";
+import { observePageHistory } from "./page-history.js";
 export { STATE_PARAM, variantParam } from "@proto-labs-inc/wire";
-const RIG_VERSION = "0.2.0";
+const RIG_VERSION = "0.2.2";
 export const INTERNAL_PREVIEW_THEME_PARAM = "__protoTheme";
+/** Mark the page light or dark (data-proto-theme and the "dark" class) for
+ *  a prototype that styles both. The page's own CSS decides color-scheme:
+ *  forcing it here gave pages that only style light mode dark form fields
+ *  on a light page whenever the viewer's system was dark. */
 export function applyPreviewTheme(theme) {
     if (typeof document === "undefined")
         return;
     const root = document.documentElement;
     root.dataset.protoTheme = theme;
     root.classList.toggle("dark", theme === "dark");
-    root.style.colorScheme = theme;
 }
 function resolvedSystemTheme() {
     return window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -57,9 +61,12 @@ export class RigStore {
             hydrated = true;
         }
         if (hydrated) {
-            window.history.replaceState(null, "", `?${params.toString()}`);
+            window.history.replaceState(null, "", `?${params.toString()}${window.location.hash || ""}`);
         }
     }
+    updateManifest(manifest) {
+        this.manifest = manifest;
+    }
     get(key) {
         return this.values.get(key);
     }
@@ -112,6 +119,21 @@ export class RigStore {
             this.listeners.delete(l);
         };
     };
+    /** Restore the exact URL, including removed selections, without writing a
+     * new history entry while Back or Forward is traversing an existing one. */
+    restoreUrl() {
+        const next = new Map();
+        for (const [key, value] of new URLSearchParams(window.location.search)) {
+            if (key === STATE_PARAM || key.startsWith("v."))
+                next.set(key, value);
+        }
+        const changed = next.size !== this.values.size ||
+            [...next].some(([key, value]) => this.values.get(key) !== value);
+        if (!changed)
+            return;
+        this.values = next;
+        this.listeners.forEach((listener) => listener());
+    }
     syncUrl() {
         const params = new URLSearchParams(window.location.search);
         for (const key of [...params.keys()]) {
@@ -120,9 +142,8 @@ export class RigStore {
         }
         for (const [k, v] of this.values)
             params.set(k, v);
-        const search = `?${params.toString()}`;
+        const search = `?${params.toString()}${window.location.hash || ""}`;
         window.history.replaceState(null, "", search);
-        postToFrame({ type: "state-changed", search: searchForFrame() });
     }
 }
 export function postToFrame(msg) {
@@ -200,6 +221,11 @@ async function captureThumbnail() {
  * Call client-side only.
  */
 export function wireRig(store, manifest) {
+    store.updateManifest(manifest);
+    const disposeHistory = observePageHistory(() => {
+        store.restoreUrl();
+        postToFrame({ type: "state-changed", search: searchForFrame() });
+    });
     const disposeTools = loadFrameTools(manifest.frameOrigin);
     let controlledTheme = false;
     const media = window.matchMedia("(prefers-color-scheme: dark)");
@@ -243,6 +269,7 @@ export function wireRig(store, manifest) {
         });
     }
     return () => {
+        disposeHistory();
         media.removeEventListener("change", onSystemTheme);
         window.removeEventListener("message", onMessage);
         disposeTools();

package/dist/page-history.d.ts

@@ -0,0 +1,4 @@
+/** Every URL change in a prototype is a step the browser bar can revisit.
+ * Keep state-only history writes intact: routers use those for bookkeeping.
+ * Install after boot-time URL hydration, which is not a navigation. */
+export declare function observePageHistory(onNavigate: () => void): () => void;

package/dist/page-history.js

@@ -0,0 +1,38 @@
+/** Every URL change in a prototype is a step the browser bar can revisit.
+ * Keep state-only history writes intact: routers use those for bookkeeping.
+ * Install after boot-time URL hydration, which is not a navigation. */
+export function observePageHistory(onNavigate) {
+    const history = window.history;
+    const push = history.pushState;
+    const replace = history.replaceState;
+    let currentUrl = window.location.href;
+    const changed = () => {
+        const url = window.location.href;
+        if (url === currentUrl)
+            return;
+        currentUrl = url;
+        onNavigate();
+    };
+    const pushState = function (data, unused, url) {
+        push.call(this, data, unused, url);
+        changed();
+    };
+    const replaceState = function (data, unused, url) {
+        const next = url == null ? window.location.href : new URL(url, window.location.href).href;
+        const write = next === window.location.href ? replace : push;
+        write.call(this, data, unused, url);
+        changed();
+    };
+    history.pushState = pushState;
+    history.replaceState = replaceState;
+    window.addEventListener("popstate", changed);
+    window.addEventListener("hashchange", changed);
+    return () => {
+        if (history.pushState === pushState)
+            history.pushState = push;
+        if (history.replaceState === replaceState)
+            history.replaceState = replace;
+        window.removeEventListener("popstate", changed);
+        window.removeEventListener("hashchange", changed);
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proto-labs-inc/rig-core",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Proto's rig, framework-free: URL-state sync, the postMessage bridge to the Frame, and comment mode.",
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
     }
   },
   "dependencies": {
-    "@proto-labs-inc/wire": "^0.2.0"
+    "@proto-labs-inc/wire": "^0.2.1"
   },
   "devDependencies": {
     "typescript": "~6.0.2",