@studiometa/ui 1.0.0-rc.0 → 1.0.0-rc.1

package/Frame/Frame.js

@@ -1,41 +1,46 @@
-import { Base, isDirectChild, getDirectChildren } from "@studiometa/js-toolkit";
-import { nextFrame, historyPush } from "@studiometa/js-toolkit/utils";
+import { Base, getClosestParent } from "@studiometa/js-toolkit";
+import { domScheduler, historyPush } from "@studiometa/js-toolkit/utils";
 import { FrameAnchor } from "./FrameAnchor.js";
 import { FrameForm } from "./FrameForm.js";
 import { FrameTarget } from "./FrameTarget.js";
-function getScrollPosition() {
-  return {
-    left: window.pageXOffset,
-    top: window.pageYOffset
-  };
-}
-const cache = /* @__PURE__ */ new Map();
+import { FrameLoader } from "./FrameLoader.js";
+import { EVENTS } from "./utils.js";
 class Frame extends Base {
   /**
    * Config.
    */
   static config = {
     name: "Frame",
-    emits: [
-      "before-fetch",
-      "after-fetch",
-      "before-leave",
-      "after-leave",
-      "before-content",
-      "after-content",
-      "before-enter",
-      "after-enter"
-    ],
+    emits: Object.values(EVENTS),
     components: {
       FrameAnchor,
       FrameForm,
       FrameTarget,
-      Frame
+      FrameLoader
     },
     options: {
-      history: Boolean
+      history: Boolean,
+      requestInit: Object,
+      headers: Object
     }
   };
+  /**
+   * DOM Parser to parse the new content to be injected.
+   */
+  domParser = new DOMParser();
+  /**
+   * Abort controller to prevent multiple simultaneous fetches.
+   */
+  abortController = new AbortController();
+  /**
+   * Header names.
+   */
+  headerNames = {
+    ACCEPT: "accept",
+    X_REQUESTED_BY: "x-requested-by",
+    X_TRIGGERED_BY: "x-triggered-by",
+    USER_AGENT: "user-agent"
+  };
   /**
    * Get uniq id.
    */
@@ -43,151 +48,140 @@ class Frame extends Base {
     return this.$el.id;
   }
   /**
-   * Get direct `FrameTarget` children.
+   * The client used for the fetch request.
    */
-  get directChildrenFrameTarget() {
-    return getDirectChildren(this, "Frame", "FrameTarget");
+  get client() {
+    return window.fetch.bind(window);
   }
   /**
-   * Prevent scroll top on unload.
+   * Default request init.
    */
-  onWindowUnload() {
-    const { history } = window;
-    if (!history.state) {
-      return;
-    }
-    history.replaceState(
-      {
-        ...history.state,
-        scroll: getScrollPosition()
-      },
-      ""
-    );
+  get requestInit() {
+    const { headerNames } = this;
+    const { requestInit, headers } = this.$options;
+    const requestedBy = "@studiometa/ui/Frame";
+    return {
+      ...requestInit,
+      headers: {
+        [headerNames.ACCEPT]: "text/*",
+        [headerNames.X_REQUESTED_BY]: requestedBy,
+        [headerNames.USER_AGENT]: `${navigator.userAgent} ${requestedBy}`,
+        ...requestInit.headers,
+        ...headers
+      }
+    };
   }
   /**
-   * Go to the previous URL on `popstate` event.
+   * Get chidlren limited to the current instance.
    */
-  onWindowPopstate({ event }) {
-    this.goTo(window.location.href, null, event.state);
+  getDirectChildren(name) {
+    const children = [];
+    for (const child of this.$children[name]) {
+      if (getClosestParent(child, this.constructor) === this) {
+        children.push(child);
+      }
+    }
+    return children;
   }
   /**
-   * Prevent click on `FrameAnchor`.
+   * Fetch new content on frame-trigger.
    */
-  onFrameAnchorClick({ target, event }) {
-    if (!isDirectChild(this, "Frame", "FrameAnchor", target)) {
-      return;
-    }
-    this.$log("onAFrameClick", target, event);
-    event.preventDefault();
-    if (target.href === window.location.href) {
-      return;
-    }
-    this.goTo(target.href);
+  onFrameAnchorFrameTrigger({ args: [url, requestInit] }) {
+    this.fetch(url, requestInit);
   }
   /**
-   * Prevent submit on forms.
+   * Fetch new content on frame-trigger.
    */
-  onFrameFormSubmit({ event, target }) {
-    if (!isDirectChild(this, "Frame", "FrameForm", target)) {
-      return;
-    }
-    this.$log("onFrameFormFrameSubmit", target, event);
-    event.preventDefault();
-    const url = new URL(target.action);
-    if (target.$el.method === "get") {
-      url.search = new URLSearchParams(new FormData(target.$el)).toString();
-      this.goTo(url.toString());
-    }
-    if (target.$el.method === "post") {
-      this.goTo(url.toString(), new FormData(target.$el));
-    }
+  onFrameFormFrameTrigger({ args: [url, requestInit] }) {
+    this.fetch(url, requestInit);
   }
   /**
-   * Parge an HTML string into a DOM object.
+   * Update content on history back/forward navigation.
    */
-  parseHTML(string = "") {
-    return new DOMParser().parseFromString(string, "text/html");
+  onWindowPopstate() {
+    this.fetch(new URL(window.location.href), {
+      headers: {
+        [this.headerNames.X_TRIGGERED_BY]: "popstate"
+      }
+    });
   }
   /**
-   * Go to the given url.
+   * Trigger FrameLoaders enter.
    */
-  async goTo(url, formData = null, scroll = null) {
-    this.$log("goTo", url);
-    const parsedUrl = new URL(url);
-    if (parsedUrl.origin !== window.location.origin) {
-      throw new Error("Cross origin request are not allowed.");
-    }
-    this.$emit("before-fetch", url);
-    const content = await this.fetch(url, formData);
-    const doc = this.parseHTML(content);
-    const el = doc.querySelector(`#${this.id}`);
-    const newFrame = new Frame(el);
-    newFrame.__children.registerAll();
-    this.$emit("after-fetch", url, content);
-    this.$emit("before-leave");
-    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));
-    this.$emit("after-leave");
-    this.$emit("before-content");
-    this.directChildrenFrameTarget.map(
-      (target, index) => target.updateContent(newFrame.directChildrenFrameTarget[index])
-    );
-    if (this.$options.history && formData === null) {
-      document.title = doc.title;
-      historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });
+  onFrameFetchBefore() {
+    for (const loader of this.getDirectChildren("FrameLoader")) {
+      loader.enter();
     }
-    if (scroll) {
-      document.scrollingElement.scrollTop = scroll.top;
-      document.scrollingElement.scrollLeft = scroll.left;
+  }
+  /**
+   * Trigger FrameLoaders leave.
+   */
+  onFrameFetchAfter() {
+    for (const loader of this.getDirectChildren("FrameLoader")) {
+      loader.leave();
     }
-    await nextFrame();
-    this.$root.$update();
-    await nextFrame();
-    this.$emit("after-content");
-    this.$emit("before-enter");
-    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));
-    this.$emit("after-enter");
+  }
+  emitSync(event, trigger = null, ...args) {
+    this.$emit(event, ...args);
+    trigger?.$emit(event, ...args);
   }
   /**
-   * Fetch the given url.
+   * Fetch given url.
    */
-  async fetch(url, formData = null) {
-    if (formData) {
-      const promise2 = fetch(url, {
-        method: "post",
-        body: formData
-      }).then((response) => response.text());
-      const content = await promise2;
-      return content;
+  async fetch(url, requestInit = {}) {
+    this.emitSync(EVENTS.FETCH_BEFORE, requestInit.trigger, url, requestInit);
+    this.abortController.abort();
+    this.abortController = new AbortController();
+    const init = {
+      ...this.requestInit,
+      ...requestInit,
+      headers: {
+        ...this.requestInit.headers,
+        ...requestInit.headers
+      },
+      signal: this.abortController.signal
+    };
+    this.$log("fetch", url, init);
+    this.emitSync(EVENTS.FETCH, init.trigger, url, init);
+    try {
+      const content = await this.client(url, init).then((response) => response.text());
+      this.emitSync(EVENTS.FETCH_AFTER, init.trigger, url, requestInit, content);
+      this.content(url, init, content);
+    } catch (error) {
+      this.emitSync(EVENTS.FETCH_AFTER, init.trigger, url, requestInit, error);
+      this.error(url, init, error);
     }
-    const cached = cache.get(url);
-    if (cached) {
-      if (cached.status === "pending") {
-        return cached.promise;
+  }
+  /**
+   * Dispatch the contents to update to their matching FrameTarget.
+   */
+  async content(url, requestInit, content) {
+    this.$log("content", url, content);
+    this.emitSync(EVENTS.CONTENT, requestInit.trigger, url, requestInit, content);
+    const doc = this.domParser.parseFromString(content, "text/html");
+    const el = doc.querySelector(`#${this.id}`) ?? doc;
+    const promises = [];
+    if (this.$options.history) {
+      if (requestInit?.headers?.[this.headerNames.X_TRIGGERED_BY] !== "popstate") {
+        historyPush({ path: url.pathname, search: url.searchParams });
       }
-      return cached.content;
-    }
-    const promise = fetch(url).then((response) => response.text());
-    try {
-      cache.set(url, {
-        promise,
-        status: "pending",
-        content: void 0
-      });
-      const content = await promise;
-      cache.set(url, {
-        promise,
-        status: "resolved",
-        content
-      });
-      return content;
-    } catch (err) {
-      cache.set(url, {
-        promise,
-        status: "error",
-        content: err
+      domScheduler.write(() => {
+        if (doc.title) document.title = doc.title;
       });
-      return err;
     }
+    for (const frameTarget of this.getDirectChildren("FrameTarget")) {
+      promises.push(frameTarget.updateContent(el.querySelector(`#${frameTarget.id}`)));
+    }
+    await Promise.all(promises);
+    this.emitSync(EVENTS.CONTENT_AFTER, requestInit.trigger, url, requestInit, content);
+    await this.$root.$update();
+  }
+  /**
+   * Handle errors.
+   */
+  async error(url, requestInit, error) {
+    this.$log("error", url, requestInit, error);
+    this.emitSync(EVENTS.ERROR, requestInit.trigger, url, requestInit, error);
   }
 }
 export {

package/Frame/Frame.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Frame/Frame.ts"],
-  "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { nextFrame, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\n\n/**\n * Get the scroll position.\n */\nfunction getScrollPosition() {\n  return {\n    left: window.pageXOffset,\n    top: window.pageYOffset,\n  };\n}\n\n/**\n * The fetch cache.\n */\nconst cache: Map<\n  string,\n  { promise: Promise<string>; status: 'pending' | 'resolved' | 'error'; content: string }\n> = new Map();\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    // eslint-disable-next-line no-use-before-define\n    Frame: Frame[];\n  };\n  $options: {\n    history: boolean;\n  };\n}\n\n/**\n * Class.\n */\nexport class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Frame',\n    emits: [\n      'before-fetch',\n      'after-fetch',\n      'before-leave',\n      'after-leave',\n      'before-content',\n      'after-content',\n      'before-enter',\n      'after-enter',\n    ],\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      Frame,\n    },\n    options: {\n      history: Boolean,\n    },\n  };\n\n  /**\n   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\n\n  /**\n   * Get direct `FrameTarget` children.\n   */\n  get directChildrenFrameTarget(): FrameTarget[] {\n    return getDirectChildren(this, 'Frame', 'FrameTarget');\n  }\n\n  /**\n   * Prevent scroll top on unload.\n   */\n  onWindowUnload() {\n    const { history } = window;\n\n    if (!history.state) {\n      return;\n    }\n\n    history.replaceState(\n      {\n        ...history.state,\n        scroll: getScrollPosition(),\n      },\n      '',\n    );\n  }\n\n  /**\n   * Go to the previous URL on `popstate` event.\n   */\n  onWindowPopstate({ event }: { event: PopStateEvent }) {\n    this.goTo(window.location.href, null, event.state);\n  }\n\n  /**\n   * Prevent click on `FrameAnchor`.\n   */\n  onFrameAnchorClick({ target, event }: { event: MouseEvent, target: FrameAnchor }) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameAnchor', target)) {\n      return;\n    }\n\n    this.$log('onAFrameClick', target, event);\n    event.preventDefault();\n\n    // Do nothing when clicking links on the same page\n    // @todo handle hash change\n    if (target.href === window.location.href) {\n      return;\n    }\n\n    this.goTo(target.href);\n  }\n\n  /**\n   * Prevent submit on forms.\n   */\n  onFrameFormSubmit({ event, target }: { event: SubmitEvent, target: FrameForm }) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameForm', target)) {\n      return;\n    }\n\n    this.$log('onFrameFormFrameSubmit', target, event);\n    event.preventDefault();\n    const url = new URL(target.action);\n\n    if (target.$el.method === 'get') {\n      // @ts-ignore\n      url.search = new URLSearchParams(new FormData(target.$el)).toString();\n      this.goTo(url.toString());\n    }\n\n    if (target.$el.method === 'post') {\n      this.goTo(url.toString(), new FormData(target.$el));\n    }\n  }\n\n  /**\n   * Parge an HTML string into a DOM object.\n   */\n  parseHTML(string = '') {\n    return new DOMParser().parseFromString(string, 'text/html');\n  }\n\n  /**\n   * Go to the given url.\n   */\n  async goTo(url: string, formData: FormData = null, scroll: { top: number; left: number } = null) {\n    this.$log('goTo', url);\n    const parsedUrl = new URL(url);\n\n    if (parsedUrl.origin !== window.location.origin) {\n      throw new Error('Cross origin request are not allowed.');\n    }\n\n    this.$emit('before-fetch', url);\n\n    // @todo add option to use content as is or to parse it and extract the new frame\n    const content = await this.fetch(url, formData);\n    const doc = this.parseHTML(content);\n    const el = doc.querySelector(`#${this.id}`);\n    // @todo manage el === null\n    const newFrame = new Frame(el as HTMLElement);\n    newFrame.__children.registerAll();\n\n    this.$emit('after-fetch', url, content);\n\n    this.$emit('before-leave');\n    // Leave all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));\n\n    this.$emit('after-leave');\n    this.$emit('before-content');\n\n    // Update content\n    // @todo insert non existing FrameTarget as well\n    this.directChildrenFrameTarget.map((target, index) =>\n      target.updateContent(newFrame.directChildrenFrameTarget[index]),\n    );\n\n    // Push history\n    if (this.$options.history && formData === null) {\n      document.title = doc.title;\n      historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });\n    }\n\n    if (scroll) {\n      document.scrollingElement.scrollTop = scroll.top;\n      document.scrollingElement.scrollLeft = scroll.left;\n    }\n\n    // Update components\n    await nextFrame();\n    this.$root.$update();\n    await nextFrame();\n\n    this.$emit('after-content');\n    this.$emit('before-enter');\n\n    // Enter all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));\n\n    this.$emit('after-enter');\n  }\n\n  /**\n   * Fetch the given url.\n   */\n  async fetch(url: string, formData: FormData = null): Promise<string> {\n    // @note skip cache for POST requests.\n    if (formData) {\n      const promise = fetch(url, {\n        method: 'post',\n        body: formData,\n      }).then((response) => response.text());\n\n      const content = await promise;\n      return content;\n    }\n\n    const cached = cache.get(url);\n\n    if (cached) {\n      if (cached.status === 'pending') {\n        return cached.promise;\n      }\n\n      return cached.content;\n    }\n\n    const promise = fetch(url).then((response) => response.text());\n\n    try {\n      cache.set(url, {\n        promise,\n        status: 'pending',\n        content: undefined,\n      });\n\n      const content = await promise;\n\n      cache.set(url, {\n        promise,\n        status: 'resolved',\n        content,\n      });\n\n      return content;\n    } catch (err) {\n      cache.set(url, {\n        promise,\n        status: 'error',\n        content: err,\n      });\n\n      return err;\n    }\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["promise"]
+  "sourcesContent": ["import { Base, getClosestParent } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { domScheduler, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\nimport { FrameLoader } from './FrameLoader.js';\nimport type { FrameRequestInit, FrameTriggerEvent } from './types.js';\nimport { EVENTS } from './utils.js';\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    FrameLoader: FrameLoader[];\n  };\n  $options: {\n    history: boolean;\n    requestInit: RequestInit;\n    headers: Record<string, string>;\n  };\n}\n\n/**\n * Frame class.\n * @see https://ui.studiometa.dev/-/components/Frame/\n */\nexport class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Frame',\n    emits: Object.values(EVENTS),\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      FrameLoader,\n    },\n    options: {\n      history: Boolean,\n      requestInit: Object,\n      headers: Object,\n    },\n  };\n\n  /**\n   * DOM Parser to parse the new content to be injected.\n   */\n  domParser = new DOMParser();\n\n  /**\n   * Abort controller to prevent multiple simultaneous fetches.\n   */\n  abortController = new AbortController();\n\n  /**\n   * Header names.\n   */\n  headerNames = {\n    ACCEPT: 'accept',\n    X_REQUESTED_BY: 'x-requested-by',\n    X_TRIGGERED_BY: 'x-triggered-by',\n    USER_AGENT: 'user-agent',\n  } as const;\n\n  /**\n   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\n\n  /**\n   * The client used for the fetch request.\n   */\n  get client(): typeof fetch {\n    return window.fetch.bind(window);\n  }\n\n  /**\n   * Default request init.\n   */\n  get requestInit(): RequestInit {\n    const { headerNames } = this;\n    const { requestInit, headers } = this.$options;\n    const requestedBy = '@studiometa/ui/Frame';\n\n    return {\n      ...requestInit,\n      headers: {\n        [headerNames.ACCEPT]: 'text/*',\n        [headerNames.X_REQUESTED_BY]: requestedBy,\n        [headerNames.USER_AGENT]: `${navigator.userAgent} ${requestedBy}`,\n        ...requestInit.headers,\n        ...headers,\n      },\n    };\n  }\n\n  /**\n   * Get chidlren limited to the current instance.\n   */\n  getDirectChildren(name: keyof FrameProps['$children']) {\n    const children = [];\n    for (const child of this.$children[name]) {\n      if (getClosestParent(child, this.constructor) === this) {\n        children.push(child);\n      }\n    }\n    return children;\n  }\n\n  /**\n   * Fetch new content on frame-trigger.\n   */\n  onFrameAnchorFrameTrigger({ args: [url, requestInit] }: { args: FrameTriggerEvent['detail'] }) {\n    this.fetch(url, requestInit);\n  }\n\n  /**\n   * Fetch new content on frame-trigger.\n   */\n  onFrameFormFrameTrigger({ args: [url, requestInit] }: { args: [URL, FrameRequestInit] }) {\n    this.fetch(url, requestInit);\n  }\n\n  /**\n   * Update content on history back/forward navigation.\n   */\n  onWindowPopstate() {\n    this.fetch(new URL(window.location.href), {\n      headers: {\n        [this.headerNames.X_TRIGGERED_BY]: 'popstate',\n      },\n    });\n  }\n\n  /**\n   * Trigger FrameLoaders enter.\n   */\n  onFrameFetchBefore() {\n    for (const loader of this.getDirectChildren('FrameLoader')) {\n      loader.enter();\n    }\n  }\n\n  /**\n   * Trigger FrameLoaders leave.\n   */\n  onFrameFetchAfter() {\n    for (const loader of this.getDirectChildren('FrameLoader')) {\n      loader.leave();\n    }\n  }\n\n  emitSync(event: string, trigger: FrameForm | FrameAnchor = null, ...args: any[]) {\n    this.$emit(event, ...args);\n    trigger?.$emit(event, ...args);\n  }\n\n  /**\n   * Fetch given url.\n   */\n  async fetch(url: URL, requestInit: FrameRequestInit = {}) {\n    this.emitSync(EVENTS.FETCH_BEFORE, requestInit.trigger, url, requestInit);\n\n    this.abortController.abort();\n    this.abortController = new AbortController();\n    const init = {\n      ...this.requestInit,\n      ...requestInit,\n      headers: {\n        ...this.requestInit.headers,\n        ...requestInit.headers,\n      },\n      signal: this.abortController.signal,\n    };\n\n    this.$log('fetch', url, init);\n    this.emitSync(EVENTS.FETCH, init.trigger, url, init);\n\n    try {\n      const content = await this.client(url, init).then((response) => response.text());\n      this.emitSync(EVENTS.FETCH_AFTER, init.trigger, url, requestInit, content);\n      this.content(url, init, content);\n    } catch (error) {\n      this.emitSync(EVENTS.FETCH_AFTER, init.trigger, url, requestInit, error);\n      this.error(url, init, error);\n    }\n  }\n\n  /**\n   * Dispatch the contents to update to their matching FrameTarget.\n   */\n  async content(url: URL, requestInit: FrameRequestInit, content: string) {\n    this.$log('content', url, content);\n    this.emitSync(EVENTS.CONTENT, requestInit.trigger, url, requestInit, content);\n\n    const doc = this.domParser.parseFromString(content, 'text/html');\n    const el = doc.querySelector(`#${this.id}`) ?? doc;\n    const promises = [];\n\n    // @todo inject styles and scripts from new <head>\n    if (this.$options.history) {\n      if (requestInit?.headers?.[this.headerNames.X_TRIGGERED_BY] !== 'popstate') {\n        historyPush({ path: url.pathname, search: url.searchParams });\n      }\n      domScheduler.write(() => {\n        if (doc.title) document.title = doc.title;\n      });\n    }\n\n    for (const frameTarget of this.getDirectChildren('FrameTarget')) {\n      promises.push(frameTarget.updateContent(el.querySelector(`#${frameTarget.id}`)));\n    }\n\n    await Promise.all(promises);\n\n    this.emitSync(EVENTS.CONTENT_AFTER, requestInit.trigger, url, requestInit, content);\n\n    // We need to update the root instance to make sure newly inserted\n    // components are correctly detected and mounted. This avoid having\n    // to declare all potentials component as children of the Frame component.\n    await this.$root.$update();\n  }\n\n  /**\n   * Handle errors.\n   */\n  async error(url: URL, requestInit: FrameRequestInit, error: Error) {\n    this.$log('error', url, requestInit, error);\n    this.emitSync(EVENTS.ERROR, requestInit.trigger, url, requestInit, error);\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
 }

package/Frame/FrameAnchor.d.ts

@@ -1,18 +1,21 @@
-import { Base } from '@studiometa/js-toolkit';
 import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { AbstractFrameTrigger } from './AbstractFrameTrigger.js';
 export interface FrameAnchorProps extends BaseProps {
     $el: HTMLAnchorElement;
 }
 /**
  * FrameAnchor class.
  */
-export declare class FrameAnchor<T extends BaseProps = BaseProps> extends Base<T & FrameAnchorProps> {
+export declare class FrameAnchor<T extends BaseProps = BaseProps> extends AbstractFrameTrigger<T & FrameAnchorProps> {
     /**
      * Config.
      */
     static config: BaseConfig;
     /**
-     * Get the URL.
+     * Prevent click.
      */
-    get href(): string;
+    onClick({ event }: {
+        event: MouseEvent;
+        target: FrameAnchor;
+    }): void;
 }

package/Frame/FrameAnchor.js

@@ -1,5 +1,5 @@
-import { Base } from "@studiometa/js-toolkit";
-class FrameAnchor extends Base {
+import { AbstractFrameTrigger } from "./AbstractFrameTrigger.js";
+class FrameAnchor extends AbstractFrameTrigger {
   /**
    * Config.
    */
@@ -7,10 +7,13 @@ class FrameAnchor extends Base {
     name: "FrameAnchor"
   };
   /**
-   * Get the URL.
+   * Prevent click.
    */
-  get href() {
-    return this.$el.href;
+  onClick({ event }) {
+    if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey && event.button === 0 && this.$el.target !== "_blank") {
+      event.preventDefault();
+      this.trigger();
+    }
   }
 }
 export {

package/Frame/FrameAnchor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Frame/FrameAnchor.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\nexport interface FrameAnchorProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * FrameAnchor class.\n */\nexport class FrameAnchor<T extends BaseProps = BaseProps> extends Base<T & FrameAnchorProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameAnchor',\n  };\n\n  /**\n   * Get the URL.\n   */\n  get href(): string {\n    return this.$el.href;\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAUd,MAAM,oBAAqD,KAA2B;AAAA;AAAA;AAAA;AAAA,EAI3F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,OAAe;AACjB,WAAO,KAAK,IAAI;AAAA,EAClB;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractFrameTrigger } from './AbstractFrameTrigger.js';\n\nexport interface FrameAnchorProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * FrameAnchor class.\n */\nexport class FrameAnchor<T extends BaseProps = BaseProps> extends AbstractFrameTrigger<\n  T & FrameAnchorProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameAnchor',\n  };\n\n  /**\n   * Prevent click.\n   */\n  onClick({ event }: { event: MouseEvent; target: FrameAnchor }) {\n    if (\n      !event.ctrlKey &&\n      !event.shiftKey &&\n      !event.altKey &&\n      !event.metaKey &&\n      event.button === 0 &&\n      this.$el.target !== '_blank'\n    ) {\n      event.preventDefault();\n      this.trigger();\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,4BAA4B;AAS9B,MAAM,oBAAqD,qBAEhE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,EAAE,MAAM,GAA+C;AAC7D,QACE,CAAC,MAAM,WACP,CAAC,MAAM,YACP,CAAC,MAAM,UACP,CAAC,MAAM,WACP,MAAM,WAAW,KACjB,KAAK,IAAI,WAAW,UACpB;AACA,YAAM,eAAe;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AACF;",
   "names": []
 }

package/Frame/FrameForm.d.ts

@@ -1,18 +1,36 @@
-import { Base } from '@studiometa/js-toolkit';
 import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { AbstractFrameTrigger } from './AbstractFrameTrigger.js';
 export interface FrameFormProps extends BaseProps {
     $el: HTMLFormElement;
+    $refs: {
+        headers: HTMLInputElement[];
+    };
 }
 /**
  * FrameForm class.
  */
-export declare class FrameForm<T extends BaseProps = BaseProps> extends Base<T & FrameFormProps> {
+export declare class FrameForm<T extends BaseProps = BaseProps> extends AbstractFrameTrigger<T & FrameFormProps> {
     /**
      * Config.
      */
     static config: BaseConfig;
     /**
-     * Get the form action.
+     * Form submission method.
      */
-    get action(): string;
+    get method(): "post" | "get";
+    /**
+     * Add params to the requested URL for GET submissions.
+     */
+    get url(): URL;
+    /**
+     * Add body to the request for POST submissions.
+     */
+    get requestInit(): RequestInit;
+    /**
+     * Prevent submit on forms.
+     */
+    onSubmit({ event }: {
+        event: SubmitEvent;
+        target: FrameForm;
+    }): void;
 }

package/Frame/FrameForm.js

@@ -1,16 +1,53 @@
-import { Base } from "@studiometa/js-toolkit";
-class FrameForm extends Base {
+import { AbstractFrameTrigger } from "./AbstractFrameTrigger.js";
+class FrameForm extends AbstractFrameTrigger {
   /**
    * Config.
    */
   static config = {
-    name: "FrameForm"
+    name: "FrameForm",
+    refs: ["headers[]"]
   };
   /**
-   * Get the form action.
+   * Form submission method.
    */
-  get action() {
-    return this.$el.action;
+  get method() {
+    return this.$el.method.toLowerCase();
+  }
+  /**
+   * Add params to the requested URL for GET submissions.
+   */
+  get url() {
+    const url = new URL(this.$el.action);
+    if (this.method === "get") {
+      url.search = new URLSearchParams(new FormData(this.$el)).toString();
+    }
+    return url;
+  }
+  /**
+   * Add body to the request for POST submissions.
+   */
+  get requestInit() {
+    const requestInit = { ...super.requestInit };
+    requestInit.headers ??= {};
+    for (const header of this.$refs.headers) {
+      if (header.dataset.name && header.value) {
+        requestInit.headers[header.dataset.name] = header.value;
+      }
+    }
+    if (this.method === "post") {
+      requestInit.method = this.method;
+      requestInit.body = new FormData(this.$el);
+    }
+    return requestInit;
+  }
+  /**
+   * Prevent submit on forms.
+   */
+  onSubmit({ event }) {
+    if (this.$el.target !== "_blank") {
+      event.preventDefault();
+      this.trigger();
+    }
   }
 }
 export {

package/Frame/FrameForm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Frame/FrameForm.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface FrameFormProps extends BaseProps {\n  $el: HTMLFormElement;\n}\n\n/**\n * FrameForm class.\n */\nexport class FrameForm<T extends BaseProps = BaseProps> extends Base<T & FrameFormProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameForm',\n  };\n\n  /**\n   * Get the form action.\n   */\n  get action(): string {\n    return this.$el.action;\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAUd,MAAM,kBAAmD,KAAyB;AAAA;AAAA;AAAA;AAAA,EAIvF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAiB;AACnB,WAAO,KAAK,IAAI;AAAA,EAClB;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractFrameTrigger } from './AbstractFrameTrigger.js';\n\nexport interface FrameFormProps extends BaseProps {\n  $el: HTMLFormElement;\n  $refs: {\n    headers: HTMLInputElement[];\n  };\n}\n\n/**\n * FrameForm class.\n */\nexport class FrameForm<T extends BaseProps = BaseProps> extends AbstractFrameTrigger<\n  T & FrameFormProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameForm',\n    refs: ['headers[]'],\n  };\n\n  /**\n   * Form submission method.\n   */\n  get method() {\n    return this.$el.method.toLowerCase() as 'post' | 'get';\n  }\n\n  /**\n   * Add params to the requested URL for GET submissions.\n   */\n  get url(): URL {\n    const url = new URL(this.$el.action);\n\n    if (this.method === 'get') {\n      // @ts-expect-error URLSearchParams accepts FormData as parameter in the browser.\n      url.search = new URLSearchParams(new FormData(this.$el)).toString();\n    }\n\n    return url;\n  }\n\n  /**\n   * Add body to the request for POST submissions.\n   */\n  get requestInit(): RequestInit {\n    const requestInit = { ...super.requestInit };\n    requestInit.headers ??= {};\n\n    for (const header of this.$refs.headers) {\n      if (header.dataset.name && header.value) {\n        requestInit.headers[header.dataset.name] = header.value;\n      }\n    }\n\n    if (this.method === 'post') {\n      requestInit.method = this.method;\n      requestInit.body = new FormData(this.$el);\n    }\n\n    return requestInit;\n  }\n\n  /**\n   * Prevent submit on forms.\n   */\n  onSubmit({ event }: { event: SubmitEvent; target: FrameForm }) {\n    if (this.$el.target !== '_blank') {\n      event.preventDefault();\n      this.trigger();\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,4BAA4B;AAY9B,MAAM,kBAAmD,qBAE9D;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,WAAW;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,IAAI,OAAO,YAAY;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAW;AACb,UAAM,MAAM,IAAI,IAAI,KAAK,IAAI,MAAM;AAEnC,QAAI,KAAK,WAAW,OAAO;AAEzB,UAAI,SAAS,IAAI,gBAAgB,IAAI,SAAS,KAAK,GAAG,CAAC,EAAE,SAAS;AAAA,IACpE;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,cAA2B;AAC7B,UAAM,cAAc,EAAE,GAAG,MAAM,YAAY;AAC3C,gBAAY,YAAY,CAAC;AAEzB,eAAW,UAAU,KAAK,MAAM,SAAS;AACvC,UAAI,OAAO,QAAQ,QAAQ,OAAO,OAAO;AACvC,oBAAY,QAAQ,OAAO,QAAQ,IAAI,IAAI,OAAO;AAAA,MACpD;AAAA,IACF;AAEA,QAAI,KAAK,WAAW,QAAQ;AAC1B,kBAAY,SAAS,KAAK;AAC1B,kBAAY,OAAO,IAAI,SAAS,KAAK,GAAG;AAAA,IAC1C;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS,EAAE,MAAM,GAA8C;AAC7D,QAAI,KAAK,IAAI,WAAW,UAAU;AAChC,YAAM,eAAe;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AACF;",
   "names": []
 }

package/Frame/FrameLoader.d.ts

@@ -0,0 +1,22 @@
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { Transition } from '../Transition/index.js';
+import type { TransitionProps } from '../decorators/withTransition.js';
+export interface FrameLoaderProps extends BaseProps {
+    $options: TransitionProps['$options'] & {
+        enterKeep: true;
+        leaveKeep: true;
+    };
+}
+/**
+ * Class.
+ */
+export declare class FrameLoader<T extends BaseProps = BaseProps> extends Transition<T & FrameLoaderProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    get $options(): import("@studiometa/js-toolkit").BaseOptions & (T & FrameLoaderProps & TransitionProps)["$options"] & {
+        enterKeep: boolean;
+        leaveKeep: boolean;
+    };
+}

package/Frame/FrameLoader.js

@@ -0,0 +1,22 @@
+import { Transition } from "../Transition/index.js";
+class FrameLoader extends Transition {
+  /**
+   * Config.
+   */
+  static config = {
+    name: "FrameLoader"
+  };
+  // @ts-expect-error this is fine.
+  get $options() {
+    const options = super.$options;
+    return {
+      ...options,
+      enterKeep: true,
+      leaveKeep: true
+    };
+  }
+}
+export {
+  FrameLoader
+};
+//# sourceMappingURL=FrameLoader.js.map