@mondaydotcomorg/vibe-route-sync 0.0.1-pr2119.509b42b

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+interface VibeRouteSyncOptions {
+    getIframe: () => HTMLIFrameElement | null;
+    iframeSrc: string;
+    setIframeSrc: (src: string) => void;
+    syncUrlState: boolean;
+}
+declare function attachVibeRouteSync({ getIframe, iframeSrc, setIframeSrc, syncUrlState, }: VibeRouteSyncOptions): () => void;
+
+export { type VibeRouteSyncOptions, attachVibeRouteSync };

package/dist/index.js

@@ -0,0 +1,63 @@
+'use strict';
+
+// src/vibe-route-sync.ts
+var VIBE_ROUTE_PARAM = "vibe-route";
+var VIBE_PREFIX = "/v";
+var MSG_ROUTE_CHANGE = "vibe:route-change";
+var MSG_ROUTE_UPDATE = "vibe:route-update";
+function attachVibeRouteSync({
+  getIframe,
+  iframeSrc,
+  setIframeSrc,
+  syncUrlState
+}) {
+  const { vibePath: initialVibePath, basePath } = splitVibeRoute();
+  setIframeSrc(appendVibeRoute(iframeSrc, initialVibePath));
+  if (!syncUrlState) {
+    return () => void 0;
+  }
+  const iframeOrigin = getOrigin(iframeSrc);
+  const onMessage = (event) => {
+    var _a, _b;
+    if (event.origin !== iframeOrigin || ((_a = event.data) == null ? void 0 : _a.type) !== MSG_ROUTE_CHANGE || typeof event.data.path !== "string" || !event.data.path.startsWith("/") || event.source !== ((_b = getIframe()) == null ? void 0 : _b.contentWindow)) {
+      return;
+    }
+    const newUrl = basePath + VIBE_PREFIX + event.data.path + window.location.search;
+    window.history.pushState({}, "", newUrl);
+  };
+  const onPopState = () => {
+    var _a;
+    const { vibePath } = splitVibeRoute();
+    const iframe = getIframe();
+    (_a = iframe == null ? void 0 : iframe.contentWindow) == null ? void 0 : _a.postMessage({ type: MSG_ROUTE_UPDATE, path: vibePath }, iframeOrigin);
+  };
+  window.addEventListener("message", onMessage);
+  window.addEventListener("popstate", onPopState);
+  return () => {
+    window.removeEventListener("message", onMessage);
+    window.removeEventListener("popstate", onPopState);
+  };
+}
+function splitVibeRoute() {
+  const pathname = window.location.pathname;
+  const idx = pathname.lastIndexOf(VIBE_PREFIX + "/");
+  if (idx === -1) {
+    return { vibePath: "/", basePath: pathname };
+  }
+  return {
+    vibePath: pathname.slice(idx + VIBE_PREFIX.length),
+    basePath: pathname.slice(0, idx)
+  };
+}
+function appendVibeRoute(src, path) {
+  const url = new URL(src);
+  url.searchParams.set(VIBE_ROUTE_PARAM, path);
+  return url.toString();
+}
+function getOrigin(src) {
+  return new URL(src).origin;
+}
+
+exports.attachVibeRouteSync = attachVibeRouteSync;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vibe-route-sync.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["const VIBE_ROUTE_PARAM = 'vibe-route';\nconst VIBE_PREFIX = '/v';\nconst MSG_ROUTE_CHANGE = 'vibe:route-change';\nconst MSG_ROUTE_UPDATE = 'vibe:route-update';\n\nexport interface VibeRouteSyncOptions {\n  getIframe: () => HTMLIFrameElement | null;\n  iframeSrc: string;\n  setIframeSrc: (src: string) => void;\n  syncUrlState: boolean;\n}\n\nexport function attachVibeRouteSync({\n  getIframe,\n  iframeSrc,\n  setIframeSrc,\n  syncUrlState,\n}: VibeRouteSyncOptions): () => void {\n  const { vibePath: initialVibePath, basePath } = splitVibeRoute();\n\n  setIframeSrc(appendVibeRoute(iframeSrc, initialVibePath));\n\n  if (!syncUrlState) {\n    return () => undefined;\n  }\n\n  const iframeOrigin = getOrigin(iframeSrc);\n\n  const onMessage = (event: MessageEvent) => {\n    if (\n      event.origin !== iframeOrigin ||\n      event.data?.type !== MSG_ROUTE_CHANGE ||\n      typeof event.data.path !== 'string' ||\n      !event.data.path.startsWith('/') ||\n      event.source !== getIframe()?.contentWindow\n    ) {\n      return;\n    }\n    const newUrl = basePath + VIBE_PREFIX + event.data.path + window.location.search;\n    window.history.pushState({}, '', newUrl);\n  };\n\n  const onPopState = () => {\n    const { vibePath } = splitVibeRoute();\n    const iframe = getIframe();\n    iframe?.contentWindow?.postMessage({ type: MSG_ROUTE_UPDATE, path: vibePath }, iframeOrigin);\n  };\n\n  window.addEventListener('message', onMessage);\n  window.addEventListener('popstate', onPopState);\n\n  return () => {\n    window.removeEventListener('message', onMessage);\n    window.removeEventListener('popstate', onPopState);\n  };\n}\n\nfunction splitVibeRoute(): { vibePath: string; basePath: string } {\n  const pathname = window.location.pathname;\n  const idx = pathname.lastIndexOf(VIBE_PREFIX + '/');\n  if (idx === -1) {\n    return { vibePath: '/', basePath: pathname };\n  }\n  return {\n    vibePath: pathname.slice(idx + VIBE_PREFIX.length),\n    basePath: pathname.slice(0, idx),\n  };\n}\n\nfunction appendVibeRoute(src: string, path: string): string {\n  const url = new URL(src);\n  url.searchParams.set(VIBE_ROUTE_PARAM, path);\n  return url.toString();\n}\n\nfunction getOrigin(src: string): string {\n  return new URL(src).origin;\n}\n"]}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@mondaydotcomorg/vibe-route-sync",
+  "version": "0.0.1-pr2119.509b42b",
+  "description": "Parent-iframe URL sync for vibe apps with file-based routing",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "yarn clean && yarn build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "license": "BSD-3-Clause",
+  "devDependencies": {
+    "@types/node": "^25.7.0",
+    "jsdom": "^26.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "~5.8.3",
+    "vitest": "^3.0.0"
+  }
+}