@data-fair/frame 0.5.1 → 0.6.0

package/dist/v-iframe-compat/d-frame-content.min.js

@@ -1,2 +1,2 @@
-var VIframeCompatDFrameContent=function(){"use strict";var g=Object.defineProperty;var f=(h,s,d)=>s in h?g(h,s,{enumerable:!0,configurable:!0,writable:!0,value:d}):h[s]=d;var r=(h,s,d)=>f(h,typeof s!="symbol"?s+"":s,d);function h(n){return n[0]==="df-parent"&&n[1]==="init"}function s(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}const d=["animationstart","webkitAnimationStart","animationiteration","webkitAnimationIteration","animationend","webkitAnimationEnd","input","mouseup","mousedown","orientationchange","afterprint","beforeprint","readystatechange","touchstart","touchend","touchcancel","transitionstart","webkitTransitionStart","MSTransitionStart","oTransitionStart","otransitionstart","transitioniteration","webkitTransitionIteration","MSTransitionIteration","oTransitionIteration","otransitioniteration","transitionend","webkitTransitionEnd","MSTransitionEnd","oTransitionEnd","otransitionend","resize"];class u{constructor(t){r(this,"initialized",!1);r(this,"options");r(this,"pendingCheckHeight",!1);r(this,"debug",!1);r(this,"id");r(this,"throttledCheckHeight");r(this,"lastHeight",0);this.options=t??{};const e=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(e))},!(typeof window>"u")&&(window.addEventListener("message",i=>this.onMessage(i)),this.postMessageToParent(["df-child","init"]))}log(t,...e){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`${this.id}:d-frame-content`,...e),t==="info"&&console.info(`${this.id}:d-frame-content`,...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;h(e)&&(this.id=e[2].id,this.debug=!!e[2].debug,this.debug&&console.time(`${this.id}:d-frame-content`),e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),s(e)&&(this.options.updateSrc?this.options.updateSrc(e[2].startsWith("/")?window.location.origin+e[2]:e[2]):window.location.href=e[2])}}postMessageToParent(t){window.parent.postMessage(t)}sendNotif(t){this.postMessageToParent(["df-child","notif",t])}sendMessage(t){this.postMessageToParent(["df-child","custom",t])}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const t=window.history.replaceState,e=(...o)=>{const a=t.apply(window.history,o);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),a};window.history.pushState=e;const i=(...o)=>{const a=t.apply(window.history,o);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),a};window.history.replaceState=i}createMutationObserver(){const t=document.querySelector("body");if(!t)throw new Error("DFrameContentManager was initialized before the HTML body");new window.MutationObserver(this.throttledCheckHeight).observe(t,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){for(const t of d)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0;for(const i of t){const o=i.getAttribute("data-iframe-height"),a=i.getBoundingClientRect().bottom+parseFloat(getComputedStyle(i).getPropertyValue("margin-bottom"))+(o?parseFloat(o):0);a>e&&(e=a)}e=Math.ceil(e),e!==this.lastHeight&&(this.postMessageToParent(["df-child","height",e]),this.lastHeight=e)}}const c=new u({updateSrc:n=>{const t=window.vIframeOptions,e=t==null?void 0:t.reactiveParams;if(e){const i=new URL(n);if(i.origin===window.location.origin&&i.pathname===window.location.pathname){const o=Object.keys(e);i.searchParams.forEach((a,l)=>{e[l]=a,o.splice(o.indexOf(l),1)}),o.forEach(a=>{delete e[a]});return}}if(t!=null&&t.router){const i=window.location.origin+t.router.options.history.base;if(n.startsWith(i)){t.router.replace(n.replace(i,""));return}}window.location.href=n}});return window.dFrameContent=c,c}();
+var VIframeCompatDFrameContent=function(){"use strict";var g=Object.defineProperty;var f=(r,o,h)=>o in r?g(r,o,{enumerable:!0,configurable:!0,writable:!0,value:h}):r[o]=h;var s=(r,o,h)=>f(r,typeof o!="symbol"?o+"":o,h);function r(n){return n[0]==="df-parent"&&n[1]==="init"}function o(n){return n[0]==="df-parent"&&n[1]==="updateSrc"}const h=["animationstart","webkitAnimationStart","animationiteration","webkitAnimationIteration","animationend","webkitAnimationEnd","input","mouseup","mousedown","orientationchange","afterprint","beforeprint","readystatechange","touchstart","touchend","touchcancel","transitionstart","webkitTransitionStart","MSTransitionStart","oTransitionStart","otransitionstart","transitioniteration","webkitTransitionIteration","MSTransitionIteration","oTransitionIteration","otransitioniteration","transitionend","webkitTransitionEnd","MSTransitionEnd","oTransitionEnd","otransitionend","resize"];class l{constructor(t){s(this,"initialized",!1);s(this,"options");s(this,"pendingCheckHeight",!1);s(this,"debug",!1);s(this,"id");s(this,"throttledCheckHeight");s(this,"lastHeight",0);this.options=t??{};const e=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(e))},!(typeof window>"u")&&(window.addEventListener("message",i=>this.onMessage(i)),this.postMessageToParent(["df-child","init"]))}log(t,...e){t==="debug"&&!this.debug||(t==="debug"&&console.timeLog(`${this.id}:d-frame-content`,...e),t==="info"&&console.info(`${this.id}:d-frame-content`,...e))}onMessage(t){if(t.source===window.parent&&Array.isArray(t.data)){const e=t.data;r(e)&&(this.id=e[2].id,this.debug=!!e[2].debug,this.debug&&console.time(`${this.id}:d-frame-content`),e[2].resize!=="no"&&this.initResize(),(e[2].syncParams||e[2].syncPath||e[2].stateChangeEvents)&&this.initStateChangeWatcher(),this.initialized=!0),o(e)&&(this.options.updateSrc?this.options.updateSrc(e[2].startsWith("/")?window.location.origin+e[2]:e[2]):window.location.href=e[2])}}postMessageToParent(t){window.parent.postMessage(t)}sendNotif(t){this.postMessageToParent(["df-child","notif",t])}sendMessage(t){this.postMessageToParent(["df-child","custom",t])}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initStateChangeWatcher(){this.log("debug","initStateChangeWatcher");const t=window.history.replaceState,e=(...a)=>{const d=t.apply(window.history,a);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),d};window.history.pushState=e;const i=(...a)=>{const d=t.apply(window.history,a);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),d};window.history.replaceState=i}createMutationObserver(){const t=document.querySelector("body");if(!t)throw new Error("DFrameContentManager was initialized before the HTML body");new window.MutationObserver(this.throttledCheckHeight).observe(t,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){for(const t of h)window.addEventListener(t,this.throttledCheckHeight,{passive:!0})}checkHeight(){const t=document.querySelectorAll("[data-iframe-height]");let e=0;for(const i of t){const a=i.getAttribute("data-iframe-height"),d=i.getBoundingClientRect().bottom+parseFloat(getComputedStyle(i).getPropertyValue("margin-bottom"))+(a?parseFloat(a):0);d>e&&(e=d)}e=Math.ceil(e),e!==this.lastHeight&&(this.postMessageToParent(["df-child","height",e]),this.lastHeight=e)}}const u=(n,t)=>{const e=Object.keys(n);t.forEach((i,a)=>{n[a]=i,e.splice(e.indexOf(a),1)}),e.forEach(i=>{delete n[i]})},c=new l({updateSrc:n=>{const t=window.vIframeOptions,e=t==null?void 0:t.reactiveParams;if(e){const i=new URL(n);if(i.origin===window.location.origin&&i.pathname===window.location.pathname){u(e,i.searchParams);return}}if(t!=null&&t.router){const i=window.location.origin+t.router.options.history.base;if(n.startsWith(i)){t.router.replace(n.replace(i,""));return}}window.location.href=n}});return window.dFrameContent=c,c}();
 //# sourceMappingURL=d-frame-content.min.js.map

package/lib/v-iframe-compat/d-frame-content.js

@@ -1,4 +1,5 @@
 import DFrameContent from '../DFrameContent.js';
+import { applySearchParams } from '../vue-reactive/util.js';
 const dFrameContent = new DFrameContent({
     updateSrc: (src) => {
         const vIframeOptions = window.vIframeOptions;
@@ -6,14 +7,7 @@ const dFrameContent = new DFrameContent({
         if (reactiveParams) {
             const srcUrl = new URL(src);
             if (srcUrl.origin === window.location.origin && srcUrl.pathname === window.location.pathname) {
-                const existingKeys = Object.keys(reactiveParams);
-                srcUrl.searchParams.forEach((value, key) => {
-                    reactiveParams[key] = value;
-                    existingKeys.splice(existingKeys.indexOf(key), 1);
-                });
-                existingKeys.forEach(key => {
-                    delete reactiveParams[key];
-                });
+                applySearchParams(reactiveParams, srcUrl.searchParams);
                 return;
             }
         }

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

@@ -0,0 +1,5 @@
+import DFrameContent, { type DFrameContentOptions } from '../DFrameContent.js';
+import type { Reactive } from 'vue';
+type VueReactiveDFrameContentOptions = Omit<DFrameContentOptions, 'updateSrc'>;
+export declare function VueReactiveDFrameContent(reactiveParams: Reactive<Record<string, string>>, options?: VueReactiveDFrameContentOptions): DFrameContent;
+export default VueReactiveDFrameContent;

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

@@ -0,0 +1,17 @@
+import DFrameContent from '../DFrameContent.js';
+import { applySearchParams } from './util.js';
+export function VueReactiveDFrameContent(reactiveParams, options) {
+    return new DFrameContent({
+        ...options,
+        updateSrc: (src) => {
+            const srcUrl = new URL(src);
+            if (srcUrl.origin === window.location.origin && srcUrl.pathname === window.location.pathname) {
+                applySearchParams(reactiveParams, srcUrl.searchParams);
+            }
+            else {
+                window.location.href = src;
+            }
+        }
+    });
+}
+export default VueReactiveDFrameContent;

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

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

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

@@ -0,0 +1,15 @@
+import { watch } from 'vue';
+import { applySearchParams } from './util.js';
+class VueReactiveDFrameStateChangeAdapter {
+    reactiveParams;
+    constructor(reactiveParams) {
+        this.reactiveParams = reactiveParams;
+    }
+    stateChange(action, newUrl) {
+        applySearchParams(this.reactiveParams, newUrl.searchParams);
+    }
+    onStateChange(callback) {
+        watch(this.reactiveParams, callback);
+    }
+}
+export default (reactiveParams) => new VueReactiveDFrameStateChangeAdapter(reactiveParams);

package/lib/vue-reactive/util.d.ts

@@ -0,0 +1 @@
+export declare const applySearchParams: (reactiveParams: Record<string, string>, searchParams: URLSearchParams) => void;

package/lib/vue-reactive/util.js

@@ -0,0 +1,10 @@
+export const applySearchParams = (reactiveParams, searchParams) => {
+    const existingKeys = Object.keys(reactiveParams);
+    searchParams.forEach((value, key) => {
+        reactiveParams[key] = value;
+        existingKeys.splice(existingKeys.indexOf(key), 1);
+    });
+    existingKeys.forEach(key => {
+        delete reactiveParams[key];
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/frame",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "An iframe wrapper for powerful web app integrations.",
   "main": "dist/frame.min.js",
   "directories": {
@@ -15,6 +15,7 @@
     "neostandard": "^0.11.9",
     "typescript": "^5.7.2",
     "vite": "^6.0.3",
+    "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
   "scripts": {