@data-fair/frame 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Alban Mouton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+# d-frame
+An iframe wrapper for powerful web app integrations.
+
+Lightweight, vanilla JS, no dependency.
+
+Supports:
+  - navigation syncing
+  - aspect ratio management
+  - dynamic resize
+
+See [the documentation](https://data-fair.github.io/frame/latest/).

package/dist/d-frame-content.min.js

@@ -0,0 +1,2 @@
+var DFrameContent=function(){"use strict";var u=Object.defineProperty;var g=(n,i,a)=>i in n?u(n,i,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[i]=a;var c=(n,i,a)=>g(n,typeof i!="symbol"?i+"":i,a);function n(s){return s[0]==="df-parent"&&s[1]==="init"}function i(s){return s[0]==="df-parent"&&s[1]==="updateSrc"}const a=["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 d{constructor(e){c(this,"options");c(this,"pendingCheckHeight",!1);c(this,"debug",!1);c(this,"throttledCheckHeight");c(this,"lastHeight",0);this.options=e??{};const t=()=>{this.checkHeight(),this.pendingCheckHeight=!1};this.throttledCheckHeight=()=>{this.pendingCheckHeight||(this.pendingCheckHeight=!0,requestAnimationFrame(t))},!(typeof window>"u")&&(window.addEventListener("message",o=>this.onMessage(o)),this.postMessageToParent(["df-child","init"]))}log(e,...t){e==="debug"&&!this.debug||(e==="debug"&&console.debug("d-frame-content",...t),e==="info"&&console.info("d-frame-content",...t))}onMessage(e){if(e.source===window.parent&&Array.isArray(e.data)){const t=e.data;n(t)&&(this.debug=!!t[2].debug,t[2].resize!=="no"&&this.initResize(),(t[2].syncParams||t[2].syncPath)&&this.initSyncParams()),i(t)&&(this.options.updateSrc?this.options.updateSrc(t[2].startsWith("/")?window.location.origin+t[2]:t[2]):window.location.href=t[2])}}postMessageToParent(e){window.parent.postMessage(e)}initResize(){this.log("debug","initResize"),this.checkHeight(),this.createMutationObserver(),this.createWindowEventListeners()}initSyncParams(){this.log("debug","initSyncParams");const e=window.history.replaceState,t=(...r)=>{const h=e.apply(window.history,r);return this.postMessageToParent(["df-child","stateChange","push",window.location.href]),h};window.history.pushState=t;const o=(...r)=>{const h=e.apply(window.history,r);return this.postMessageToParent(["df-child","stateChange","replace",window.location.href]),h};window.history.replaceState=o}createMutationObserver(){const e=document.querySelector("body");if(!e)throw new Error("DFrameContentManager was initialized before the HTML body");new window.MutationObserver(this.throttledCheckHeight).observe(e,{attributes:!1,attributeOldValue:!1,characterData:!1,characterDataOldValue:!1,childList:!0,subtree:!0})}createWindowEventListeners(){for(const e of a)window.addEventListener(e,this.throttledCheckHeight,{passive:!0})}checkHeight(){const e=document.querySelectorAll("[data-iframe-height]");let t=0;for(const o of e){const r=o.getAttribute("data-iframe-height"),h=o.getBoundingClientRect().bottom+parseFloat(getComputedStyle(o).getPropertyValue("margin-bottom"))+(r?parseFloat(r):0);h>t&&(t=h)}t!==this.lastHeight&&(this.postMessageToParent(["df-child","height",t]),this.lastHeight=t)}}return new d}();
+//# sourceMappingURL=d-frame-content.min.js.map

package/dist/d-frame.min.js

@@ -0,0 +1,12 @@
+var E=Object.defineProperty;var R=(u,c,p)=>c in u?E(u,c,{enumerable:!0,configurable:!0,writable:!0,value:p}):u[c]=p;var o=(u,c,p)=>R(u,typeof c!="symbol"?c+"":c,p);(function(){"use strict";function u(e){return e[0]==="df-child"&&e[1]==="init"}function c(e){return e[0]==="df-child"&&e[1]==="height"}function p(e){return e[0]==="df-child"&&e[1]==="stateChange"}function m(e){return e.endsWith("/")?e:e===""?"/":e.slice(0,e.lastIndexOf("/")+1)}function b(e,r){if(r.origin!==e.origin)return r.href;if(r.pathname===e.pathname)return"";const t=m(e.pathname);return r.pathname.startsWith(t)?r.pathname.replace(t,"./"):r.pathname}const y=e=>e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&");function w(e){const r=[];for(const t of e.split(",")){const[i="*",s]=t.split(":"),a="^"+y(i).replace(/\\\*/g,"(.*)")+"$";r.push({regexp:new RegExp(a),append:s})}return r}function A(e,r,t,i){if(!t&&!i)return e.href;const s=new URL(r);if(t&&s.searchParams.forEach((a,d)=>{for(const n of t){if(n.append&&!d.startsWith(n.append)||d===i)continue;const h=n.append?d.replace(n.append,""):d;if(h.match(n.regexp)){e.searchParams.set(h,a);break}}}),i!==null){const a=s.searchParams.get(i);a&&(e.pathname=new URL(a,e).pathname)}return e.href}function S(e,r,t,i,s){const a=new URL(t),d=new URL(r);if(i&&(a.searchParams.forEach((n,h)=>{for(const l of i){if(l.append&&!h.startsWith(l.append))continue;const f=l.append?h.replace(l.append,""):h;if(f.match(l.regexp)){d.searchParams.get(f)===null&&a.searchParams.delete(h);break}}}),d.searchParams.forEach((n,h)=>{for(const l of i){if(!h.match(l.regexp)||(e==null?void 0:e.searchParams.get(h))===n)continue;const f=l.append?l.append+h:h;a.searchParams.set(f,n);break}})),s!==null&&e){const n=b(e,d);n?a.searchParams.set(s,n):a.searchParams.delete(s)}return a}class P{stateChange(r,t){r==="replace"&&window.history.replaceState(null,"",t),r==="push"&&window.history.pushState(null,"",t)}}const g=document.createElement("template");g.innerHTML=`<style>
+  :host {
+    display: block;
+  }
+  iframe.d-frame-iframe {
+    display: block;
+    width: 100%;
+    border: none;
+    max-height: 100%;
+  }
+</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;class z extends HTMLElement{constructor(){super();o(this,"adapter");o(this,"connected",!1);o(this,"initialSrc");o(this,"srcUrl");o(this,"parsedSyncParams");o(this,"iframeElement");o(this,"slotElement");o(this,"width");o(this,"aspectRatioHeight");o(this,"resizedHeight");const t=g.content.cloneNode(!0);this.slotElement=t.childNodes[1],this.resize!=="yes"&&(this.slotElement.style.display="none"),this.iframeElement=t.childNodes[2],this.iframeElement.setAttribute("scrolling",this.resize==="yes"?"no":"auto"),this.iframeElement.setAttribute("loading",this.lazy?"lazy":"eager"),this.attachShadow({mode:"open"}).appendChild(t),new ResizeObserver(a=>{this.width!==a[0].contentRect.width&&(this.width=a[0].contentRect.width,this.updateAspectRatioHeight())}).observe(this),this.adapter=new P,window.addEventListener("message",a=>this.onMessage(a))}get debug(){return this.hasAttribute("debug")}set debug(t){t?this.setAttribute("debug",""):this.removeAttribute("debug")}get lazy(){return this.hasAttribute("lazy")}set lazy(t){t?this.setAttribute("lazy",""):this.removeAttribute("lazy")}get src(){return this.getAttribute("src")}set src(t){this.setAttribute("src",t)}get aspectRatio(){return this.getAttribute("aspect-ratio")??"auto"}set aspectRatio(t){this.setAttribute("aspect-ratio",t)}get height(){return this.getAttribute("height")}set height(t){t?this.setAttribute("height",t):this.removeAttribute("height")}set resize(t){this.setAttribute("resize",t)}get resize(){const t=this.getAttribute("resize");return t===null?"auto":t===""?"yes":t}get syncParams(){return this.getAttribute("sync-params")}set syncParams(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get syncPath(){const t=this.getAttribute("sync-path");return t===null?null:t||"p"}set syncPath(t){t!==null?this.setAttribute("sync-params",t):this.removeAttribute("sync-params")}get actualAspectRatio(){return this.aspectRatio!=="auto"?Number(this.aspectRatio):!this.width||this.width<500?1:this.width<800?4/3:this.width<1200?16/9:21/9}onMessage(t){var i;if(t.source===((i=this.iframeElement)==null?void 0:i.contentWindow)&&Array.isArray(t.data)){const s=t.data;if(this.log("debug","received message from child",s),u(s)&&(this.postMessageToChild(["df-parent","init",{debug:this.debug,resize:this.resize,syncParams:this.syncParams!==null,syncPath:this.syncPath!==null}]),this.init()),c(s)&&(this.resizedHeight=s[2],this.updateStyle()),p(s)&&(this.parsedSyncParams||this.syncPath)){const a=S(this.srcUrl,s[3],window.location.href,this.parsedSyncParams,this.syncPath);a.href!==window.location.href&&this.adapter.stateChange(s[2],a)}}}init(){this.initialSrc=this.src}postMessageToChild(t){var i,s;this.log("debug","send message to child",t),(s=(i=this.iframeElement)==null?void 0:i.contentWindow)==null||s.postMessage(t)}updateSrc(){if(!this.connected)return;this.srcUrl=new URL(this.src.startsWith("/")?window.location.origin+this.src:this.src);const t=A(this.srcUrl,window.location.href,this.parsedSyncParams,this.syncPath);this.initialSrc?this.postMessageToChild(["df-parent","updateSrc",t]):this.iframeElement.setAttribute("src",t)}updateStyle(){let t="";(this.resize==="yes"||this.resize==="auto"&&this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","no"),this.resizedHeight?(this.slotElement.style.display="none",t+=`height:${this.resizedHeight}px;`):this.height?(this.slotElement.style.display="none",t+=`height:${this.height};`):this.aspectRatio!=="auto"?(this.slotElement.style.display="none",t+=`height:${this.aspectRatioHeight}px;`):(this.slotElement.style.display="block",t+="height:0;")),(this.resize==="no"||this.resize==="auto"&&!this.resizedHeight)&&(this.iframeElement.setAttribute("scrolling","auto"),this.height?t+=`height:${this.height};`:t+=`height:${this.aspectRatioHeight}px;`),this.iframeElement.setAttribute("style",t)}updateAspectRatioHeight(){this.width&&(this.resizedHeight||this.height||(this.aspectRatioHeight=this.width/this.actualAspectRatio,this.updateStyle()))}log(t,...i){t==="debug"&&!this.debug||(t==="debug"&&console.debug("d-frame",...i),t==="info"&&console.info("d-frame",...i))}connectedCallback(){if(!this.hasAttribute("src"))throw new Error("src is a required attribute");this.log("debug","connected"),this.connected=!0,this.adapter.onStateChange&&this.adapter.onStateChange(()=>{this.updateSrc()}),this.syncParams!==null&&(this.parsedSyncParams=w(this.syncParams||"*")),this.updateStyle(),this.updateSrc()}static get observedAttributes(){return["src","aspect-ratio","height","sync-params","sync-path"]}attributeChangedCallback(t,i,s){this.log("debug","attribute change",t,i,s),t==="aspect-ratio"&&this.updateAspectRatioHeight(),t==="src"&&this.updateSrc(),t==="height"&&this.updateStyle(),t==="sync-params"&&this.updateSrc(),t==="sync-path"&&this.updateSrc()}}customElements.define("d-frame",z)})();
+//# sourceMappingURL=d-frame.min.js.map

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@data-fair/frame",
+  "version": "0.1.0",
+  "description": "An iframe wrapper for powerful web app integrations.",
+  "main": "dist/frame.min.js",
+  "directories": {
+    "doc": "doc"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@koumoul/gh-pages-multi": "^0.7.2",
+    "commitlint": "^19.6.0",
+    "eslint": "^9.16.0",
+    "husky": "^9.1.7",
+    "neostandard": "^0.11.9",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vue-router": "^4.5.0"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "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",
+    "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"
+  },
+  "keywords": [
+    "data-fair",
+    "iframe",
+    "integration"
+  ],
+  "author": "Alban Mouton <alban.mouton@gmail.com>",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "src/*.js",
+    "src/*.d.ts",
+    "dist/*.js"
+  ]
+}

package/src/DFrameContent.d.ts

@@ -0,0 +1,20 @@
+import { ChildMessage } from './messages.js';
+export type DFrameContentOptions = {
+    updateSrc?: (src: string) => void;
+};
+export default class DFrameContent {
+    private options;
+    private pendingCheckHeight;
+    private debug;
+    private throttledCheckHeight;
+    private lastHeight;
+    constructor(options?: DFrameContentOptions);
+    log(level: 'debug' | 'info', ...args: any[]): void;
+    onMessage(e: MessageEvent): void;
+    postMessageToParent(message: ChildMessage): void;
+    initResize(): void;
+    initSyncParams(): void;
+    createMutationObserver(): void;
+    createWindowEventListeners(): void;
+    checkHeight(): void;
+}

package/src/DFrameContent.js

@@ -0,0 +1,148 @@
+import { isInitParentMessage, isUpdateSrcMessage } from './messages.js';
+const windowEventTypes = [
+    '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'
+];
+export default class DFrameContent {
+    options;
+    pendingCheckHeight = false;
+    debug = false;
+    throttledCheckHeight;
+    lastHeight = 0;
+    constructor(options) {
+        this.options = options ?? {};
+        const afCallback = () => {
+            this.checkHeight();
+            this.pendingCheckHeight = false;
+        };
+        this.throttledCheckHeight = () => {
+            if (this.pendingCheckHeight)
+                return;
+            this.pendingCheckHeight = true;
+            requestAnimationFrame(afCallback);
+        };
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('message', (e) => this.onMessage(e));
+        // simple handshake for initialization
+        this.postMessageToParent(['df-child', 'init']);
+    }
+    log(level, ...args) {
+        if (level === 'debug' && !this.debug)
+            return;
+        if (level === 'debug')
+            console.debug('d-frame-content', ...args);
+        if (level === 'info')
+            console.info('d-frame-content', ...args);
+    }
+    onMessage(e) {
+        if (e.source === window.parent && Array.isArray(e.data)) {
+            const message = e.data;
+            if (isInitParentMessage(message)) {
+                this.debug = !!message[2].debug;
+                if (message[2].resize !== 'no')
+                    this.initResize();
+                if (message[2].syncParams || message[2].syncPath)
+                    this.initSyncParams();
+            }
+            if (isUpdateSrcMessage(message)) {
+                if (this.options.updateSrc) {
+                    this.options.updateSrc(message[2].startsWith('/') ? window.location.origin + message[2] : message[2]);
+                }
+                else {
+                    window.location.href = message[2];
+                }
+            }
+        }
+    }
+    postMessageToParent(message) {
+        window.parent.postMessage(message);
+    }
+    initResize() {
+        this.log('debug', 'initResize');
+        this.checkHeight();
+        this.createMutationObserver();
+        this.createWindowEventListeners();
+    }
+    initSyncParams() {
+        this.log('debug', 'initSyncParams');
+        // monkey patch pushState and replaceState to send all state change info to the parent window
+        // this is to compensate the lack of event emission by window.history
+        const oldReplaceState = window.history.replaceState;
+        const newPushState = (...args) => {
+            // do a replace instead of a push, the push will be done in the parent window if sync-state is activated
+            const ret = oldReplaceState.apply(window.history, args);
+            this.postMessageToParent(['df-child', 'stateChange', 'push', window.location.href]);
+            return ret;
+        };
+        window.history.pushState = newPushState;
+        const newReplaceState = (...args) => {
+            const ret = oldReplaceState.apply(window.history, args);
+            this.postMessageToParent(['df-child', 'stateChange', 'replace', window.location.href]);
+            return ret;
+        };
+        window.history.replaceState = newReplaceState;
+    }
+    createMutationObserver() {
+        const body = document.querySelector('body');
+        if (!body)
+            throw new Error('DFrameContentManager was initialized before the HTML body');
+        const observer = new window.MutationObserver(this.throttledCheckHeight);
+        observer.observe(body, {
+            attributes: false,
+            attributeOldValue: false,
+            characterData: false,
+            characterDataOldValue: false,
+            childList: true,
+            subtree: true,
+        });
+    }
+    createWindowEventListeners() {
+        for (const eventType of windowEventTypes) {
+            window.addEventListener(eventType, this.throttledCheckHeight, { passive: true });
+        }
+    }
+    checkHeight() {
+        const elements = document.querySelectorAll('[data-iframe-height]');
+        let max = 0;
+        for (const element of elements) {
+            const dataAttribute = element.getAttribute('data-iframe-height');
+            const bottom = element.getBoundingClientRect().bottom +
+                parseFloat(getComputedStyle(element).getPropertyValue('margin-bottom')) +
+                (dataAttribute ? parseFloat(dataAttribute) : 0);
+            if (bottom > max)
+                max = bottom;
+        }
+        if (max !== this.lastHeight) {
+            this.postMessageToParent(['df-child', 'height', max]);
+            this.lastHeight = max;
+        }
+    }
+}

package/src/DFrameElement.d.ts

@@ -0,0 +1,45 @@
+import { type ParentMessage } from './messages.js';
+export interface StateChangeAdapter {
+    stateChange(action: 'push' | 'replace', newUrl: URL): void;
+    onStateChange?(callback: () => void): void;
+}
+export default class DFrameElement extends HTMLElement {
+    get debug(): boolean;
+    set debug(value: boolean);
+    get lazy(): boolean;
+    set lazy(value: boolean);
+    get src(): string;
+    set src(value: string);
+    get aspectRatio(): string;
+    set aspectRatio(value: string);
+    get height(): string | null;
+    set height(value: string | null);
+    set resize(value: "auto" | "yes" | "no");
+    get resize(): 'auto' | 'yes' | 'no';
+    get syncParams(): string | null;
+    set syncParams(value: string | null);
+    get syncPath(): string | null;
+    set syncPath(value: string | null);
+    adapter: StateChangeAdapter;
+    private connected;
+    private initialSrc;
+    private srcUrl;
+    private parsedSyncParams;
+    private iframeElement;
+    private slotElement;
+    private width;
+    private aspectRatioHeight;
+    private resizedHeight;
+    get actualAspectRatio(): number;
+    constructor();
+    onMessage(e: MessageEvent): void;
+    init(): void;
+    postMessageToChild(message: ParentMessage): void;
+    updateSrc(): void;
+    updateStyle(): void;
+    updateAspectRatioHeight(): void;
+    log(level: 'debug' | 'info', ...args: any[]): void;
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
+}

package/src/DFrameElement.js

@@ -0,0 +1,249 @@
+// this is a good doc about writing web components https://web.dev/articles/custom-elements-best-practices
+import { isHeightMessage, isInitChildMessage, isStateChangeMessage } from './messages.js';
+import { parseSyncParams, getChildSrc, getParentUrl } from './utils/sync-params.js';
+class WindowStateChangeAdapter {
+    stateChange(action, newUrl) {
+        if (action === 'replace')
+            window.history.replaceState(null, '', newUrl);
+        if (action === 'push')
+            window.history.pushState(null, '', newUrl);
+    }
+}
+const template = document.createElement('template');
+template.innerHTML = `<style>
+  :host {
+    display: block;
+  }
+  iframe.d-frame-iframe {
+    display: block;
+    width: 100%;
+    border: none;
+    max-height: 100%;
+  }
+</style><slot name="loader"></slot><iframe class="d-frame-iframe" frameborder="0">`;
+export default class DFrameElement extends HTMLElement {
+    get debug() { return this.hasAttribute('debug'); }
+    set debug(value) {
+        if (value)
+            this.setAttribute('debug', '');
+        else
+            this.removeAttribute('debug');
+    }
+    get lazy() { return this.hasAttribute('lazy'); }
+    set lazy(value) {
+        if (value)
+            this.setAttribute('lazy', '');
+        else
+            this.removeAttribute('lazy');
+    }
+    get src() { return this.getAttribute('src'); }
+    set src(value) { this.setAttribute('src', value); }
+    get aspectRatio() { return this.getAttribute('aspect-ratio') ?? 'auto'; }
+    set aspectRatio(value) { this.setAttribute('aspect-ratio', value); }
+    get height() { return this.getAttribute('height'); }
+    set height(value) {
+        if (value)
+            this.setAttribute('height', value);
+        else
+            this.removeAttribute('height');
+    }
+    set resize(value) { this.setAttribute('resize', value); }
+    get resize() {
+        const value = this.getAttribute('resize');
+        if (value === null)
+            return 'auto';
+        if (value === '')
+            return 'yes';
+        return value;
+    }
+    get syncParams() { return this.getAttribute('sync-params'); }
+    set syncParams(value) {
+        if (value !== null)
+            this.setAttribute('sync-params', value);
+        else
+            this.removeAttribute('sync-params');
+    }
+    get syncPath() {
+        const value = this.getAttribute('sync-path');
+        if (value === null)
+            return null;
+        return value || 'p';
+    }
+    set syncPath(value) {
+        if (value !== null)
+            this.setAttribute('sync-params', value);
+        else
+            this.removeAttribute('sync-params');
+    }
+    adapter;
+    /* internal state */
+    connected = false;
+    initialSrc;
+    srcUrl;
+    parsedSyncParams;
+    iframeElement;
+    slotElement;
+    width;
+    aspectRatioHeight;
+    resizedHeight;
+    get actualAspectRatio() {
+        if (this.aspectRatio !== 'auto')
+            return Number(this.aspectRatio);
+        if (!this.width || this.width < 500)
+            return 1;
+        if (this.width < 800)
+            return 4 / 3;
+        if (this.width < 1200)
+            return 16 / 9;
+        return 21 / 9;
+    }
+    constructor() {
+        super();
+        const root = template.content.cloneNode(true);
+        this.slotElement = root.childNodes[1];
+        if (this.resize !== 'yes')
+            this.slotElement.style.display = 'none';
+        this.iframeElement = root.childNodes[2];
+        this.iframeElement.setAttribute('scrolling', this.resize === 'yes' ? 'no' : 'auto');
+        this.iframeElement.setAttribute('loading', this.lazy ? 'lazy' : 'eager');
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.appendChild(root);
+        const resizeObserver = new ResizeObserver((entries) => {
+            if (this.width !== entries[0].contentRect.width) {
+                this.width = entries[0].contentRect.width;
+                this.updateAspectRatioHeight();
+            }
+        });
+        // TODO: should we use unobserve or disconnect on cleanup ?
+        resizeObserver.observe(this);
+        this.adapter = new WindowStateChangeAdapter();
+        window.addEventListener('message', (e) => this.onMessage(e));
+    }
+    onMessage(e) {
+        if (e.source === this.iframeElement?.contentWindow && Array.isArray(e.data)) {
+            const message = e.data;
+            this.log('debug', 'received message from child', message);
+            if (isInitChildMessage(message)) {
+                // simple handshake for initialization
+                this.postMessageToChild(['df-parent', 'init', {
+                        debug: this.debug,
+                        resize: this.resize,
+                        syncParams: this.syncParams !== null,
+                        syncPath: this.syncPath !== null
+                    }]);
+                this.init();
+            }
+            if (isHeightMessage(message)) {
+                this.resizedHeight = message[2];
+                this.updateStyle();
+            }
+            if (isStateChangeMessage(message) && (this.parsedSyncParams || this.syncPath)) {
+                const newParentHUrl = getParentUrl(this.srcUrl, message[3], window.location.href, this.parsedSyncParams, this.syncPath);
+                if (newParentHUrl.href !== window.location.href) {
+                    this.adapter.stateChange(message[2], newParentHUrl);
+                }
+            }
+        }
+    }
+    init() {
+        // called after initial handshake with child
+        this.initialSrc = this.src;
+    }
+    postMessageToChild(message) {
+        this.log('debug', 'send message to child', message);
+        this.iframeElement?.contentWindow?.postMessage(message);
+    }
+    updateSrc() {
+        if (!this.connected)
+            return;
+        this.srcUrl = new URL(this.src.startsWith('/') ? (window.location.origin + this.src) : this.src);
+        const fullSrc = getChildSrc(this.srcUrl, window.location.href, this.parsedSyncParams, this.syncPath);
+        if (this.initialSrc) {
+            this.postMessageToChild(['df-parent', 'updateSrc', fullSrc]);
+        }
+        else {
+            this.iframeElement.setAttribute('src', fullSrc);
+        }
+    }
+    updateStyle() {
+        let style = '';
+        if (this.resize === 'yes' || (this.resize === 'auto' && this.resizedHeight)) {
+            this.iframeElement.setAttribute('scrolling', 'no');
+            if (this.resizedHeight) {
+                this.slotElement.style.display = 'none';
+                style += `height:${this.resizedHeight}px;`;
+            }
+            else {
+                if (this.height) {
+                    this.slotElement.style.display = 'none';
+                    style += `height:${this.height};`;
+                }
+                else if (this.aspectRatio !== 'auto') {
+                    this.slotElement.style.display = 'none';
+                    style += `height:${this.aspectRatioHeight}px;`;
+                }
+                else {
+                    this.slotElement.style.display = 'block';
+                    style += 'height:0;';
+                }
+            }
+        }
+        if (this.resize === 'no' || (this.resize === 'auto' && !this.resizedHeight)) {
+            this.iframeElement.setAttribute('scrolling', 'auto');
+            if (this.height) {
+                style += `height:${this.height};`;
+            }
+            else {
+                style += `height:${this.aspectRatioHeight}px;`;
+            }
+        }
+        this.iframeElement.setAttribute('style', style);
+    }
+    updateAspectRatioHeight() {
+        if (!this.width)
+            return;
+        if (this.resizedHeight)
+            return;
+        if (this.height)
+            return;
+        this.aspectRatioHeight = this.width / this.actualAspectRatio;
+        this.updateStyle();
+    }
+    log(level, ...args) {
+        if (level === 'debug' && !this.debug)
+            return;
+        if (level === 'debug')
+            console.debug('d-frame', ...args);
+        if (level === 'info')
+            console.info('d-frame', ...args);
+    }
+    /* standard custom element callbacks */
+    connectedCallback() {
+        if (!this.hasAttribute('src'))
+            throw new Error('src is a required attribute');
+        this.log('debug', 'connected');
+        this.connected = true;
+        if (this.adapter.onStateChange) {
+            this.adapter.onStateChange(() => { this.updateSrc(); });
+        }
+        if (this.syncParams !== null)
+            this.parsedSyncParams = parseSyncParams(this.syncParams || '*');
+        this.updateStyle();
+        this.updateSrc();
+    }
+    /* reflected attributes */
+    static get observedAttributes() { return ['src', 'aspect-ratio', 'height', 'sync-params', 'sync-path']; }
+    attributeChangedCallback(name, oldValue, newValue) {
+        this.log('debug', 'attribute change', name, oldValue, newValue);
+        if (name === 'aspect-ratio')
+            this.updateAspectRatioHeight();
+        if (name === 'src')
+            this.updateSrc();
+        if (name === 'height')
+            this.updateStyle();
+        if (name === 'sync-params')
+            this.updateSrc();
+        if (name === 'sync-path')
+            this.updateSrc();
+    }
+}

package/src/d-frame-content.d.ts

@@ -0,0 +1,3 @@
+import DFrameContent from './DFrameContent.js';
+declare const _default: DFrameContent;
+export default _default;

package/src/d-frame-content.js

@@ -0,0 +1,2 @@
+import DFrameContent from './DFrameContent.js';
+export default new DFrameContent();

package/src/d-frame.d.ts

@@ -0,0 +1 @@
+export {};

package/src/d-frame.js

@@ -0,0 +1,2 @@
+import DFrameElement from './DFrameElement.js';
+customElements.define('d-frame', DFrameElement);

package/src/messages.d.ts

@@ -0,0 +1,17 @@
+export type InitChildMessage = ['df-child', 'init'];
+export type HeightMessage = ['df-child', 'height', number];
+export type StateChangeMessage = ['df-child', 'stateChange', 'replace' | 'push', string];
+export type ChildMessage = InitChildMessage | HeightMessage | StateChangeMessage;
+export declare function isInitChildMessage(message: any[]): message is InitChildMessage;
+export declare function isHeightMessage(message: any[]): message is HeightMessage;
+export declare function isStateChangeMessage(message: any[]): message is StateChangeMessage;
+export type InitParentMessage = ['df-parent', 'init', {
+    debug?: boolean;
+    resize: 'yes' | 'no' | 'auto';
+    syncParams: boolean;
+    syncPath: boolean;
+}];
+export type UpdateSrcMessage = ['df-parent', 'updateSrc', string];
+export type ParentMessage = InitParentMessage | UpdateSrcMessage;
+export declare function isInitParentMessage(message: any[]): message is InitParentMessage;
+export declare function isUpdateSrcMessage(message: any[]): message is UpdateSrcMessage;

package/src/messages.js

@@ -0,0 +1,15 @@
+export function isInitChildMessage(message) {
+    return message[0] === 'df-child' && message[1] === 'init';
+}
+export function isHeightMessage(message) {
+    return message[0] === 'df-child' && message[1] === 'height';
+}
+export function isStateChangeMessage(message) {
+    return message[0] === 'df-child' && message[1] === 'stateChange';
+}
+export function isInitParentMessage(message) {
+    return message[0] === 'df-parent' && message[1] === 'init';
+}
+export function isUpdateSrcMessage(message) {
+    return message[0] === 'df-parent' && message[1] === 'updateSrc';
+}