@data-fair/frame 0.2.0 → 0.2.1

package/lib/utils/sync-params.d.ts

@@ -0,0 +1,7 @@
+export type ParsedSyncParams = {
+    regexp: RegExp;
+    append?: string;
+}[];
+export declare function parseSyncParams(syncParamsStr: string): ParsedSyncParams;
+export declare function getChildSrc(srcUrl: URL, parentHref: string, syncParams: ParsedSyncParams | undefined, syncPath: null | string): string;
+export declare function getParentUrl(srcUrl: URL | undefined, childHref: string, currentParentHref: string, syncParams: ParsedSyncParams | undefined, syncPath: null | string): URL;

package/lib/utils/sync-params.js

@@ -0,0 +1,80 @@
+import { getUrlRelativePath } from './url.js';
+const escapeRegExp = (str) => str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
+export function parseSyncParams(syncParamsStr) {
+    const syncParams = [];
+    for (const syncParam of syncParamsStr.split(',')) {
+        const [pattern = '*', append] = syncParam.split(':');
+        const regexpStr = '^' + escapeRegExp(pattern).replace(/\\\*/g, '(.*)') + '$';
+        syncParams.push({
+            regexp: new RegExp(regexpStr),
+            append
+        });
+    }
+    return syncParams;
+}
+export function getChildSrc(srcUrl, parentHref, syncParams, syncPath) {
+    if (!syncParams && !syncPath)
+        return srcUrl.href;
+    const parentUrl = new URL(parentHref);
+    if (syncParams) {
+        parentUrl.searchParams.forEach((value, key) => {
+            for (const syncParam of syncParams) {
+                if (syncParam.append && !key.startsWith(syncParam.append))
+                    continue;
+                if (key === syncPath)
+                    continue;
+                const childKey = syncParam.append ? key.replace(syncParam.append, '') : key;
+                if (!childKey.match(syncParam.regexp))
+                    continue;
+                srcUrl.searchParams.set(childKey, value);
+                break;
+            }
+        });
+    }
+    if (syncPath !== null) {
+        const path = parentUrl.searchParams.get(syncPath);
+        if (path) {
+            srcUrl.pathname = new URL(path, srcUrl).pathname;
+        }
+    }
+    return srcUrl.href;
+}
+export function getParentUrl(srcUrl, childHref, currentParentHref, syncParams, syncPath) {
+    const parentUrl = new URL(currentParentHref);
+    const childUrl = new URL(childHref);
+    if (syncParams) {
+        // remove existing keys that were deleted from the child
+        parentUrl.searchParams.forEach((value, key) => {
+            for (const syncParam of syncParams) {
+                if (syncParam.append && !key.startsWith(syncParam.append))
+                    continue;
+                const childKey = syncParam.append ? key.replace(syncParam.append, '') : key;
+                if (!childKey.match(syncParam.regexp))
+                    continue;
+                if (childUrl.searchParams.get(childKey) === null)
+                    parentUrl.searchParams.delete(key);
+                break;
+            }
+        });
+        // apply params from child to parent
+        childUrl.searchParams.forEach((value, key) => {
+            for (const syncParam of syncParams) {
+                if (!key.match(syncParam.regexp))
+                    continue;
+                if (srcUrl?.searchParams.get(key) === value)
+                    continue;
+                const parentKey = syncParam.append ? (syncParam.append + key) : key;
+                parentUrl.searchParams.set(parentKey, value);
+                break;
+            }
+        });
+    }
+    if (syncPath !== null && srcUrl) {
+        const path = getUrlRelativePath(srcUrl, childUrl);
+        if (path)
+            parentUrl.searchParams.set(syncPath, path);
+        else
+            parentUrl.searchParams.delete(syncPath);
+    }
+    return parentUrl;
+}

package/lib/utils/url.d.ts

@@ -0,0 +1,2 @@
+export declare function getPathDirectory(path: string): string;
+export declare function getUrlRelativePath(srcUrl: URL, currentUrl: URL): string;

package/lib/utils/url.js

@@ -0,0 +1,17 @@
+export function getPathDirectory(path) {
+    if (path.endsWith('/'))
+        return path;
+    if (path === '')
+        return '/';
+    return path.slice(0, path.lastIndexOf('/') + 1);
+}
+export function getUrlRelativePath(srcUrl, currentUrl) {
+    if (currentUrl.origin !== srcUrl.origin)
+        return currentUrl.href;
+    if (currentUrl.pathname === srcUrl.pathname)
+        return '';
+    const srcDirectory = getPathDirectory(srcUrl.pathname);
+    if (!currentUrl.pathname.startsWith(srcDirectory))
+        return currentUrl.pathname;
+    return currentUrl.pathname.replace(srcDirectory, './');
+}

package/lib/vue-router/d-frame-content.d.ts

@@ -0,0 +1,5 @@
+import DFrameContent, { type DFrameContentOptions } from '../DFrameContent.js';
+import type { Router } from 'vue-router';
+type VueRouterDFrameContentOptions = Omit<DFrameContentOptions, 'updateSrc'>;
+export declare function vueRouterDFrameContent(router: Router, options?: VueRouterDFrameContentOptions): DFrameContent;
+export default vueRouterDFrameContent;

package/lib/vue-router/d-frame-content.js

@@ -0,0 +1,15 @@
+import DFrameContent from '../DFrameContent.js';
+export function vueRouterDFrameContent(router, options) {
+    return new DFrameContent({
+        updateSrc: (src) => {
+            const urlPrefix = window.location.origin + router.options.history.base;
+            if (src.startsWith(urlPrefix)) {
+                router.replace(src.replace(urlPrefix, ''));
+            }
+            else {
+                window.location.href = src;
+            }
+        }
+    });
+}
+export default vueRouterDFrameContent;

package/lib/vue-router/state-change-adapter.d.ts

@@ -0,0 +1,10 @@
+import { type StateChangeAdapter } from '../DFrameElement.js';
+import type { Router } from 'vue-router';
+declare class VueRouterDFrameStateChangeAdapter implements StateChangeAdapter {
+    router: Router;
+    constructor(router: Router);
+    stateChange(action: 'push' | 'replace', newUrl: URL): void;
+    onStateChange(callback: () => void): void;
+}
+declare const _default: (router: Router) => VueRouterDFrameStateChangeAdapter;
+export default _default;

package/lib/vue-router/state-change-adapter.js

@@ -0,0 +1,16 @@
+class VueRouterDFrameStateChangeAdapter {
+    router;
+    constructor(router) {
+        this.router = router;
+    }
+    stateChange(action, newUrl) {
+        if (action === 'push')
+            this.router.push({ query: Object.fromEntries(newUrl.searchParams) });
+        if (action === 'replace')
+            this.router.replace({ query: Object.fromEntries(newUrl.searchParams) });
+    }
+    onStateChange(callback) {
+        this.router.afterEach(callback);
+    }
+}
+export default (router) => new VueRouterDFrameStateChangeAdapter(router);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/frame",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "An iframe wrapper for powerful web app integrations.",
   "main": "dist/frame.min.js",
   "directories": {
@@ -23,7 +23,7 @@
     "dev-zellij": "zellij --layout .zellij.kdl",
     "prepare": "husky",
     "test": "node --test tests/*.js",
-    "build": "rm -f src/*.d.ts && rm -f src/*.js && tsc -p tsconfig.json && rm -rf dist && vite -c vite.config.d-frame.js build && vite -c vite.config.d-frame-content.js build",
+    "build": "rm -f lib/*.d.ts && rm -f lib/*.js && tsc -p tsconfig.json && rm -rf dist && vite -c vite.config.d-frame.js build && vite -c vite.config.d-frame-content.js build",
     "prepublishOnly": "npm run lint && npm run test && npm run build",
     "publish:main": "cd doc && npm run build:main && cd .. && gh-pages-multi deploy -v -s doc/.output/public -t main",
     "publish:latest": "cd doc && npm run build:latest && cd .. && gh-pages-multi deploy -v -s doc/.output/public -t latest"
@@ -37,8 +37,8 @@
   "license": "MIT",
   "type": "module",
   "files": [
-    "src/*.js",
-    "src/*.d.ts",
+    "lib/**/*.js",
+    "lib/**/*.d.ts",
     "dist/*.js"
   ]
 }