@studiometa/ui 1.7.0 → 1.9.0-beta.0

package/Data/DataBind.d.ts

@@ -19,7 +19,7 @@ export declare class DataBind<T extends BaseProps = BaseProps> extends DataBind_
     get relatedInstances(): Set<this>;
     get multiple(): boolean;
     get target(): HTMLElement & {
-        __base__?: Map<string, "terminated" | Base<BaseProps>>;
+        __base__?: Map<string, Base | 'terminated'>;
     } & (DataBindProps & T & import("@studiometa/js-toolkit").WithGroupProps)["$el"];
     get prop(): string;
     get value(): any;

package/Fetch/Fetch.d.ts

@@ -32,24 +32,24 @@ export declare class Fetch<T extends BaseProps = BaseProps> extends Base<T & Fet
      * Fetch events enum.
      */
     static FETCH_EVENTS: {
-        readonly BEFORE_FETCH: "fetch-before";
-        readonly FETCH: "fetch-fetch";
-        readonly RESPONSE: "fetch-response";
-        readonly AFTER_FETCH: "fetch-after";
-        readonly BEFORE_UPDATE: "fetch-update-before";
-        readonly UPDATE: "fetch-update";
-        readonly AFTER_UPDATE: "fetch-update-after";
-        readonly ERROR: "fetch-error";
-        readonly ABORT: "fetch-abort";
+        readonly BEFORE_FETCH: 'fetch-before';
+        readonly FETCH: 'fetch-fetch';
+        readonly RESPONSE: 'fetch-response';
+        readonly AFTER_FETCH: 'fetch-after';
+        readonly BEFORE_UPDATE: 'fetch-update-before';
+        readonly UPDATE: 'fetch-update';
+        readonly AFTER_UPDATE: 'fetch-update-after';
+        readonly ERROR: 'fetch-error';
+        readonly ABORT: 'fetch-abort';
     };
     /**
      * Fetch modes enum.
      */
     static FETCH_MODES: {
-        readonly REPLACE: "replace";
-        readonly PREPEND: "prepend";
-        readonly APPEND: "append";
-        readonly MORPH: "morph";
+        readonly REPLACE: 'replace';
+        readonly PREPEND: 'prepend';
+        readonly APPEND: 'append';
+        readonly MORPH: 'morph';
     };
     /**
      * Config.
@@ -60,10 +60,10 @@ export declare class Fetch<T extends BaseProps = BaseProps> extends Base<T & Fet
      * @internal
      */
     __headerNames: {
-        readonly ACCEPT: "accept";
-        readonly X_REQUESTED_BY: "x-requested-by";
-        readonly X_TRIGGERED_BY: "x-triggered-by";
-        readonly USER_AGENT: "user-agent";
+        readonly ACCEPT: 'accept';
+        readonly X_REQUESTED_BY: 'x-requested-by';
+        readonly X_TRIGGERED_BY: 'x-triggered-by';
+        readonly USER_AGENT: 'user-agent';
     };
     /**
      * DOM Parser to parse the new content to be injected.

package/Fetch/Fetch.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Fetch/Fetch.ts"],
-  "sourcesContent": ["import { Base, type BaseConfig, type BaseProps, BaseInterface } from '@studiometa/js-toolkit';\nimport { domScheduler, historyPush, isFunction } from '@studiometa/js-toolkit/utils';\nimport morphdom from 'morphdom';\nimport { adoptNewScripts, getScripts } from './utils.js';\n\nexport interface FetchProps extends BaseProps {\n  $el: HTMLAnchorElement | HTMLFormElement;\n  $refs: {\n    headers: HTMLInputElement[];\n  };\n  $options: {\n    history: boolean;\n    requestInit: RequestInit;\n    headers: Record<string, string>;\n    mode: 'replace' | 'prepend' | 'append' | 'morph';\n    selector: string;\n    response: string;\n    viewTransition: boolean;\n  };\n}\n\nexport type FetchConstructor<T extends Fetch = Fetch> = {\n  new (...args: any[]): T;\n  prototype: Fetch;\n} & Pick<typeof Fetch, keyof typeof Fetch>;\n\n/**\n * Fetch class.\n * @link https://ui.studiometa.dev/components/Fetch/\n */\nexport class Fetch<T extends BaseProps = BaseProps>\n  extends Base<T & FetchProps>\n  implements BaseInterface\n{\n  /**\n   * Declare the `this.constructor` type\n   * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n   */\n  declare ['constructor']: FetchConstructor;\n\n  /**\n   * Fetch events enum.\n   */\n  static FETCH_EVENTS = {\n    BEFORE_FETCH: 'fetch-before',\n    FETCH: 'fetch-fetch',\n    RESPONSE: 'fetch-response',\n    AFTER_FETCH: 'fetch-after',\n    BEFORE_UPDATE: 'fetch-update-before',\n    UPDATE: 'fetch-update',\n    AFTER_UPDATE: 'fetch-update-after',\n    ERROR: 'fetch-error',\n    ABORT: 'fetch-abort',\n  } as const;\n\n  /**\n   * Fetch modes enum.\n   */\n  static FETCH_MODES = {\n    REPLACE: 'replace',\n    PREPEND: 'prepend',\n    APPEND: 'append',\n    MORPH: 'morph',\n  } as const;\n\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Fetch',\n    emits: Object.values(this.FETCH_EVENTS),\n    refs: ['headers[]'],\n    options: {\n      history: Boolean,\n      mode: {\n        type: String,\n        default: this.FETCH_MODES.REPLACE,\n      },\n      requestInit: Object,\n      headers: Object,\n      selector: {\n        type: String,\n        default: '[id]',\n      },\n      response: {\n        type: String,\n        default: 'response.text()',\n      },\n      viewTransition: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Header names used by the requestInit property.\n   * @internal\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   * DOM Parser to parse the new content to be injected.\n   * @internal\n   */\n  __domParser = new DOMParser();\n\n  /**\n   * Abort controller to prevent multiple simultaneous fetches.\n   * @internal\n   */\n  __abortController = new AbortController();\n\n  /**\n   * Client.\n   * @internal\n   */\n  __client: typeof fetch;\n\n  /**\n   * The client used for the fetch request.\n   */\n  get client(): typeof fetch {\n    return (this.__client ??= window.fetch.bind(window));\n  }\n\n  /**\n   * The URL to use for the request.\n   */\n  get url(): URL {\n    const { $el, isForm } = this;\n\n    if (isForm) {\n      const { action, method } = this.$el as HTMLFormElement;\n      const url = new URL(action);\n\n      if (method.toLowerCase() === 'get') {\n        // @ts-expect-error URLSearchParams accepts FormData as parameter in the browser.\n        url.search = new URLSearchParams(new FormData($el)).toString();\n      }\n\n      return url;\n    }\n\n    return new URL($el.href);\n  }\n\n  /**\n   * Option for the fetch request.\n   */\n  get requestInit(): RequestInit {\n    const { __headerNames: headerNames, isForm, $el, $options, $refs } = this;\n    const { requestInit, headers } = $options;\n    const { headers: headerRefs } = $refs;\n    const requestedBy = '@studiometa/ui/Fetch';\n\n    const normalizedRequestInit = {\n      ...requestInit,\n      headers: {\n        [headerNames.USER_AGENT]: `${navigator.userAgent} ${requestedBy}`,\n        ...requestInit.headers,\n        ...headers,\n      },\n    };\n\n    for (const header of headerRefs) {\n      if (header.dataset.name && header.value) {\n        normalizedRequestInit.headers[header.dataset.name] = header.value;\n      }\n    }\n\n    if (isForm) {\n      const form = $el as HTMLFormElement;\n      const method = form.method.toLowerCase();\n      normalizedRequestInit.method = method;\n      if (method === 'post') {\n        normalizedRequestInit.body = new FormData(form);\n      }\n    }\n\n    return normalizedRequestInit;\n  }\n\n  /**\n   * Is the root element a link?\n   */\n  get isLink() {\n    return this.$el instanceof HTMLAnchorElement;\n  }\n\n  /**\n   * Is the root element a form?\n   */\n  get isForm() {\n    return this.$el instanceof HTMLFormElement;\n  }\n\n  /**\n   * Emit bubbling events.\n   * @inheritdoc\n   */\n  $emit(event: string, ...args: unknown[]) {\n    const e = new CustomEvent(event, { detail: args, bubbles: true });\n    return super.$emit(e, ...args);\n  }\n\n  /**\n   * If root element is a link, prevent its default behavior and fetch its URL.\n   */\n  onClick({ event }: { event: MouseEvent }) {\n    if (!this.isLink) return;\n\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.fetch(this.url, this.requestInit);\n    }\n  }\n\n  /**\n   * If root element is a form, prevent its default behavior on submit and fetch its action\n   * following the `method` attribute and with the form's data.\n   */\n  onSubmit({ event }: { event: SubmitEvent }) {\n    if (!this.isForm) return;\n\n    if (this.$el.target !== '_blank') {\n      event.preventDefault();\n      this.fetch(this.url, this.requestInit);\n    }\n  }\n\n  /**\n   * Update content on history back/forward navigation.\n   */\n  onWindowPopstate() {\n    if (!this.$options.history) return;\n\n    this.fetch(new URL(window.location.href), {\n      headers: {\n        [this.__headerNames.X_TRIGGERED_BY]: 'popstate',\n      },\n    });\n  }\n\n  /**\n   * Fetch given url.\n   */\n  async fetch(url: URL, requestInit: RequestInit = {}) {\n    const { FETCH_EVENTS } = this.constructor;\n    this.$emit(FETCH_EVENTS.BEFORE_FETCH, { instance: this, url, requestInit });\n\n    this.__abortController.abort();\n    const newController = new AbortController();\n    newController.signal.addEventListener('abort', () => {\n      this.$emit(FETCH_EVENTS.ABORT, {\n        instance: this,\n        url,\n        requestInit,\n        reason: newController.signal.reason,\n      });\n    });\n    this.__abortController = newController;\n    const init = {\n      ...this.requestInit,\n      ...requestInit,\n      headers: {\n        ...this.requestInit.headers,\n        ...requestInit.headers,\n      },\n      signal: newController.signal,\n    };\n\n    this.$log('fetch', url, init);\n    this.$emit(FETCH_EVENTS.FETCH, { instance: this, url, requestInit: init });\n\n    try {\n      const response = await this.client(url, init);\n      this.$emit(FETCH_EVENTS.RESPONSE, { instance: this, url, requestInit: init, response });\n\n      if (!response.ok) {\n        throw new Error(`Fetch failed with status ${response.status}`);\n      }\n\n      const fn = new Function(\n        'response',\n        'url',\n        'requestInit',\n        'self',\n        `return ${this.$options.response}`,\n      );\n      const content = await fn.call(this, response, url, requestInit, self);\n      this.$emit(FETCH_EVENTS.AFTER_FETCH, { instance: this, url, requestInit: init, content });\n      this.update(url, init, content);\n    } catch (error) {\n      this.$emit(FETCH_EVENTS.AFTER_FETCH, { instance: this, url, requestInit: init, error });\n      this.error(url, init, error);\n    }\n  }\n\n  /**\n   * Update the DOM with new content from the fetched HTML.\n   * @internal\n   */\n  __updateDOM(fragment: Document) {\n    const { FETCH_MODES } = this.constructor;\n    const { mode, selector } = this.$options;\n\n    // @ts-expect-error querySelectorAll is iterable in the browser\n    for (const newElement of fragment.querySelectorAll<HTMLElement>(selector)) {\n      const oldElement = newElement.id && document.getElementById(newElement.id);\n\n      if (!oldElement || oldElement === newElement) {\n        continue;\n      }\n\n      const oldScripts = getScripts(oldElement);\n\n      switch (mode) {\n        case FETCH_MODES.APPEND:\n          oldElement.append(...newElement.childNodes);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.PREPEND:\n          oldElement.prepend(...newElement.childNodes);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.MORPH:\n          morphdom(oldElement, newElement);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.REPLACE:\n        default:\n          oldElement.replaceWith(newElement);\n          adoptNewScripts(getScripts(newElement), oldScripts);\n          break;\n      }\n    }\n  }\n\n  /**\n   * Dispatch the contents to update to their matching FrameTarget.\n   */\n  async update(url: URL, requestInit: RequestInit, content: string) {\n    const { FETCH_EVENTS } = this.constructor;\n    const { history, viewTransition } = this.$options;\n\n    this.$log('content', url, content);\n    this.$emit(FETCH_EVENTS.BEFORE_UPDATE, { instance: this, url, requestInit, content });\n\n    const fragment = this.__domParser.parseFromString(content, 'text/html');\n\n    if (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 (fragment.title) {\n          document.title = fragment.title;\n        }\n      });\n    }\n\n    this.$emit(FETCH_EVENTS.UPDATE, { instance: this, url, requestInit, fragment });\n\n    if (viewTransition && isFunction(document.startViewTransition)) {\n      await document.startViewTransition(() => {\n        this.__updateDOM(fragment);\n      }).ready;\n    } else {\n      this.__updateDOM(fragment);\n    }\n\n    this.$emit(FETCH_EVENTS.AFTER_UPDATE, { instance: this, url, requestInit, fragment });\n  }\n\n  /**\n   * Handle errors.\n   */\n  error(url: URL, requestInit: RequestInit, error: Error) {\n    if (error.name === 'AbortError') return;\n\n    this.$log('error', url, requestInit, error);\n    this.$emit(this.constructor.FETCH_EVENTS.ERROR, { instance: this, url, requestInit, error });\n  }\n\n  /**\n   * Abort the current request.\n   */\n  abort(reason?: any) {\n    this.__abortController.abort(reason);\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAA4D;AACrE,SAAS,cAAc,aAAa,kBAAkB;AACtD,OAAO,cAAc;AACrB,SAAS,iBAAiB,kBAAkB;AA2BrC,MAAM,cACH,KAEV;AAAA;AAAA;AAAA;AAAA,EAUE,OAAO,eAAe;AAAA,IACpB,cAAc;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,cAAc;AAAA,IACnB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,OAAO,OAAO,KAAK,YAAY;AAAA,IACtC,MAAM,CAAC,WAAW;AAAA,IAClB,SAAS;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS,KAAK,YAAY;AAAA,MAC5B;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,gBAAgB;AAAA,QACd,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,cAAc,IAAI,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAM5B,oBAAoB,IAAI,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMxC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAuB;AACzB,WAAQ,KAAK,aAAa,OAAO,MAAM,KAAK,MAAM;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAW;AACb,UAAM,EAAE,KAAK,OAAO,IAAI;AAExB,QAAI,QAAQ;AACV,YAAM,EAAE,QAAQ,OAAO,IAAI,KAAK;AAChC,YAAM,MAAM,IAAI,IAAI,MAAM;AAE1B,UAAI,OAAO,YAAY,MAAM,OAAO;AAElC,YAAI,SAAS,IAAI,gBAAgB,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS;AAAA,MAC/D;AAEA,aAAO;AAAA,IACT;AAEA,WAAO,IAAI,IAAI,IAAI,IAAI;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,cAA2B;AAC7B,UAAM,EAAE,eAAe,aAAa,QAAQ,KAAK,UAAU,MAAM,IAAI;AACrE,UAAM,EAAE,aAAa,QAAQ,IAAI;AACjC,UAAM,EAAE,SAAS,WAAW,IAAI;AAChC,UAAM,cAAc;AAEpB,UAAM,wBAAwB;AAAA,MAC5B,GAAG;AAAA,MACH,SAAS;AAAA,QACP,CAAC,YAAY,UAAU,GAAG,GAAG,UAAU,SAAS,IAAI,WAAW;AAAA,QAC/D,GAAG,YAAY;AAAA,QACf,GAAG;AAAA,MACL;AAAA,IACF;AAEA,eAAW,UAAU,YAAY;AAC/B,UAAI,OAAO,QAAQ,QAAQ,OAAO,OAAO;AACvC,8BAAsB,QAAQ,OAAO,QAAQ,IAAI,IAAI,OAAO;AAAA,MAC9D;AAAA,IACF;AAEA,QAAI,QAAQ;AACV,YAAM,OAAO;AACb,YAAM,SAAS,KAAK,OAAO,YAAY;AACvC,4BAAsB,SAAS;AAC/B,UAAI,WAAW,QAAQ;AACrB,8BAAsB,OAAO,IAAI,SAAS,IAAI;AAAA,MAChD;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,eAAe;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,eAAe;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,UAAkB,MAAiB;AACvC,UAAM,IAAI,IAAI,YAAY,OAAO,EAAE,QAAQ,MAAM,SAAS,KAAK,CAAC;AAChE,WAAO,MAAM,MAAM,GAAG,GAAG,IAAI;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,EAAE,MAAM,GAA0B;AACxC,QAAI,CAAC,KAAK,OAAQ;AAElB,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,MAAM,KAAK,KAAK,KAAK,WAAW;AAAA,IACvC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,EAAE,MAAM,GAA2B;AAC1C,QAAI,CAAC,KAAK,OAAQ;AAElB,QAAI,KAAK,IAAI,WAAW,UAAU;AAChC,YAAM,eAAe;AACrB,WAAK,MAAM,KAAK,KAAK,KAAK,WAAW;AAAA,IACvC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB;AACjB,QAAI,CAAC,KAAK,SAAS,QAAS;AAE5B,SAAK,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI,GAAG;AAAA,MACxC,SAAS;AAAA,QACP,CAAC,KAAK,cAAc,cAAc,GAAG;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,MAAM,KAAU,cAA2B,CAAC,GAAG;AACnD,UAAM,EAAE,aAAa,IAAI,KAAK;AAC9B,SAAK,MAAM,aAAa,cAAc,EAAE,UAAU,MAAM,KAAK,YAAY,CAAC;AAE1E,SAAK,kBAAkB,MAAM;AAC7B,UAAM,gBAAgB,IAAI,gBAAgB;AAC1C,kBAAc,OAAO,iBAAiB,SAAS,MAAM;AACnD,WAAK,MAAM,aAAa,OAAO;AAAA,QAC7B,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,QAAQ,cAAc,OAAO;AAAA,MAC/B,CAAC;AAAA,IACH,CAAC;AACD,SAAK,oBAAoB;AACzB,UAAM,OAAO;AAAA,MACX,GAAG,KAAK;AAAA,MACR,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,KAAK,YAAY;AAAA,QACpB,GAAG,YAAY;AAAA,MACjB;AAAA,MACA,QAAQ,cAAc;AAAA,IACxB;AAEA,SAAK,KAAK,SAAS,KAAK,IAAI;AAC5B,SAAK,MAAM,aAAa,OAAO,EAAE,UAAU,MAAM,KAAK,aAAa,KAAK,CAAC;AAEzE,QAAI;AACF,YAAM,WAAW,MAAM,KAAK,OAAO,KAAK,IAAI;AAC5C,WAAK,MAAM,aAAa,UAAU,EAAE,UAAU,MAAM,KAAK,aAAa,MAAM,SAAS,CAAC;AAEtF,UAAI,CAAC,SAAS,IAAI;AAChB,cAAM,IAAI,MAAM,4BAA4B,SAAS,MAAM,EAAE;AAAA,MAC/D;AAEA,YAAM,KAAK,IAAI;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,KAAK,SAAS,QAAQ;AAAA,MAClC;AACA,YAAM,UAAU,MAAM,GAAG,KAAK,MAAM,UAAU,KAAK,aAAa,IAAI;AACpE,WAAK,MAAM,aAAa,aAAa,EAAE,UAAU,MAAM,KAAK,aAAa,MAAM,QAAQ,CAAC;AACxF,WAAK,OAAO,KAAK,MAAM,OAAO;AAAA,IAChC,SAAS,OAAO;AACd,WAAK,MAAM,aAAa,aAAa,EAAE,UAAU,MAAM,KAAK,aAAa,MAAM,MAAM,CAAC;AACtF,WAAK,MAAM,KAAK,MAAM,KAAK;AAAA,IAC7B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,UAAoB;AAC9B,UAAM,EAAE,YAAY,IAAI,KAAK;AAC7B,UAAM,EAAE,MAAM,SAAS,IAAI,KAAK;AAGhC,eAAW,cAAc,SAAS,iBAA8B,QAAQ,GAAG;AACzE,YAAM,aAAa,WAAW,MAAM,SAAS,eAAe,WAAW,EAAE;AAEzE,UAAI,CAAC,cAAc,eAAe,YAAY;AAC5C;AAAA,MACF;AAEA,YAAM,aAAa,WAAW,UAAU;AAExC,cAAQ,MAAM;AAAA,QACZ,KAAK,YAAY;AACf,qBAAW,OAAO,GAAG,WAAW,UAAU;AAC1C,0BAAgB,WAAW,UAAU,GAAG,UAAU;AAClD;AAAA,QACF,KAAK,YAAY;AACf,qBAAW,QAAQ,GAAG,WAAW,UAAU;AAC3C,0BAAgB,WAAW,UAAU,GAAG,UAAU;AAClD;AAAA,QACF,KAAK,YAAY;AACf,mBAAS,YAAY,UAAU;AAC/B,0BAAgB,WAAW,UAAU,GAAG,UAAU;AAClD;AAAA,QACF,KAAK,YAAY;AAAA,QACjB;AACE,qBAAW,YAAY,UAAU;AACjC,0BAAgB,WAAW,UAAU,GAAG,UAAU;AAClD;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,OAAO,KAAU,aAA0B,SAAiB;AAChE,UAAM,EAAE,aAAa,IAAI,KAAK;AAC9B,UAAM,EAAE,SAAS,eAAe,IAAI,KAAK;AAEzC,SAAK,KAAK,WAAW,KAAK,OAAO;AACjC,SAAK,MAAM,aAAa,eAAe,EAAE,UAAU,MAAM,KAAK,aAAa,QAAQ,CAAC;AAEpF,UAAM,WAAW,KAAK,YAAY,gBAAgB,SAAS,WAAW;AAEtE,QAAI,SAAS;AACX,UAAI,aAAa,UAAU,KAAK,cAAc,cAAc,MAAM,YAAY;AAC5E,oBAAY,EAAE,MAAM,IAAI,UAAU,QAAQ,IAAI,aAAa,CAAC;AAAA,MAC9D;AACA,mBAAa,MAAM,MAAM;AACvB,YAAI,SAAS,OAAO;AAClB,mBAAS,QAAQ,SAAS;AAAA,QAC5B;AAAA,MACF,CAAC;AAAA,IACH;AAEA,SAAK,MAAM,aAAa,QAAQ,EAAE,UAAU,MAAM,KAAK,aAAa,SAAS,CAAC;AAE9E,QAAI,kBAAkB,WAAW,SAAS,mBAAmB,GAAG;AAC9D,YAAM,SAAS,oBAAoB,MAAM;AACvC,aAAK,YAAY,QAAQ;AAAA,MAC3B,CAAC,EAAE;AAAA,IACL,OAAO;AACL,WAAK,YAAY,QAAQ;AAAA,IAC3B;AAEA,SAAK,MAAM,aAAa,cAAc,EAAE,UAAU,MAAM,KAAK,aAAa,SAAS,CAAC;AAAA,EACtF;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,KAAU,aAA0B,OAAc;AACtD,QAAI,MAAM,SAAS,aAAc;AAEjC,SAAK,KAAK,SAAS,KAAK,aAAa,KAAK;AAC1C,SAAK,MAAM,KAAK,YAAY,aAAa,OAAO,EAAE,UAAU,MAAM,KAAK,aAAa,MAAM,CAAC;AAAA,EAC7F;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,QAAc;AAClB,SAAK,kBAAkB,MAAM,MAAM;AAAA,EACrC;AACF;",
+  "sourcesContent": ["import { Base, type BaseConfig, type BaseProps, BaseInterface } from '@studiometa/js-toolkit';\nimport { domScheduler, historyPush, isFunction } from '@studiometa/js-toolkit/utils';\nimport morphdom from 'morphdom';\nimport { adoptNewScripts, getScripts } from './utils.js';\n\nexport interface FetchProps extends BaseProps {\n  $el: HTMLAnchorElement | HTMLFormElement;\n  $refs: {\n    headers: HTMLInputElement[];\n  };\n  $options: {\n    history: boolean;\n    requestInit: RequestInit;\n    headers: Record<string, string>;\n    mode: 'replace' | 'prepend' | 'append' | 'morph';\n    selector: string;\n    response: string;\n    viewTransition: boolean;\n  };\n}\n\nexport type FetchConstructor<T extends Fetch = Fetch> = {\n  new (...args: any[]): T;\n  prototype: Fetch;\n} & Pick<typeof Fetch, keyof typeof Fetch>;\n\n/**\n * Fetch class.\n * @link https://ui.studiometa.dev/components/Fetch/\n */\nexport class Fetch<T extends BaseProps = BaseProps>\n  extends Base<T & FetchProps>\n  implements BaseInterface\n{\n  /**\n   * Declare the `this.constructor` type\n   * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n   */\n  declare ['constructor']: FetchConstructor;\n\n  /**\n   * Fetch events enum.\n   */\n  static FETCH_EVENTS = {\n    BEFORE_FETCH: 'fetch-before',\n    FETCH: 'fetch-fetch',\n    RESPONSE: 'fetch-response',\n    AFTER_FETCH: 'fetch-after',\n    BEFORE_UPDATE: 'fetch-update-before',\n    UPDATE: 'fetch-update',\n    AFTER_UPDATE: 'fetch-update-after',\n    ERROR: 'fetch-error',\n    ABORT: 'fetch-abort',\n  } as const;\n\n  /**\n   * Fetch modes enum.\n   */\n  static FETCH_MODES = {\n    REPLACE: 'replace',\n    PREPEND: 'prepend',\n    APPEND: 'append',\n    MORPH: 'morph',\n  } as const;\n\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Fetch',\n    emits: Object.values(this.FETCH_EVENTS),\n    refs: ['headers[]'],\n    options: {\n      history: Boolean,\n      mode: {\n        type: String,\n        default: this.FETCH_MODES.REPLACE,\n      },\n      requestInit: Object,\n      headers: Object,\n      selector: {\n        type: String,\n        default: '[id]',\n      },\n      response: {\n        type: String,\n        default: 'response.text()',\n      },\n      viewTransition: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Header names used by the requestInit property.\n   * @internal\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   * DOM Parser to parse the new content to be injected.\n   * @internal\n   */\n  __domParser = new DOMParser();\n\n  /**\n   * Abort controller to prevent multiple simultaneous fetches.\n   * @internal\n   */\n  __abortController = new AbortController();\n\n  /**\n   * Client.\n   * @internal\n   */\n  __client: typeof fetch;\n\n  /**\n   * The client used for the fetch request.\n   */\n  get client(): typeof fetch {\n    return (this.__client ??= window.fetch.bind(window));\n  }\n\n  /**\n   * The URL to use for the request.\n   */\n  get url(): URL {\n    const { $el, isForm } = this;\n\n    if (isForm) {\n      const { action, method } = this.$el as HTMLFormElement;\n      const url = new URL(action);\n\n      if (method.toLowerCase() === 'get') {\n        // @ts-expect-error URLSearchParams accepts FormData as parameter in the browser.\n        url.search = new URLSearchParams(new FormData($el)).toString();\n      }\n\n      return url;\n    }\n\n    return new URL($el.href);\n  }\n\n  /**\n   * Option for the fetch request.\n   */\n  get requestInit(): RequestInit {\n    const { __headerNames: headerNames, isForm, $el, $options, $refs } = this;\n    const { requestInit, headers } = $options;\n    const { headers: headerRefs } = $refs;\n    const requestedBy = '@studiometa/ui/Fetch';\n\n    const normalizedRequestInit = {\n      ...requestInit,\n      headers: {\n        [headerNames.USER_AGENT]: `${navigator.userAgent} ${requestedBy}`,\n        ...requestInit.headers,\n        ...headers,\n      },\n    };\n\n    for (const header of headerRefs) {\n      if (header.dataset.name && header.value) {\n        normalizedRequestInit.headers[header.dataset.name] = header.value;\n      }\n    }\n\n    if (isForm) {\n      const form = $el as HTMLFormElement;\n      const method = form.method.toLowerCase();\n      normalizedRequestInit.method = method;\n      if (method === 'post') {\n        normalizedRequestInit.body = new FormData(form);\n      }\n    }\n\n    return normalizedRequestInit;\n  }\n\n  /**\n   * Is the root element a link?\n   */\n  get isLink() {\n    return this.$el instanceof HTMLAnchorElement;\n  }\n\n  /**\n   * Is the root element a form?\n   */\n  get isForm() {\n    return this.$el instanceof HTMLFormElement;\n  }\n\n  /**\n   * Emit bubbling events.\n   * @inheritdoc\n   */\n  $emit(event: string, ...args: unknown[]) {\n    const e = new CustomEvent(event, { detail: args, bubbles: true });\n    return super.$emit(e, ...args);\n  }\n\n  /**\n   * If root element is a link, prevent its default behavior and fetch its URL.\n   */\n  onClick({ event }: { event: MouseEvent }) {\n    if (!this.isLink) return;\n\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.fetch(this.url, this.requestInit);\n    }\n  }\n\n  /**\n   * If root element is a form, prevent its default behavior on submit and fetch its action\n   * following the `method` attribute and with the form's data.\n   */\n  onSubmit({ event }: { event: SubmitEvent }) {\n    if (!this.isForm) return;\n\n    if (this.$el.target !== '_blank') {\n      event.preventDefault();\n      this.fetch(this.url, this.requestInit);\n    }\n  }\n\n  /**\n   * Update content on history back/forward navigation.\n   */\n  onWindowPopstate() {\n    if (!this.$options.history) return;\n\n    this.fetch(new URL(window.location.href), {\n      headers: {\n        [this.__headerNames.X_TRIGGERED_BY]: 'popstate',\n      },\n    });\n  }\n\n  /**\n   * Fetch given url.\n   */\n  async fetch(url: URL, requestInit: RequestInit = {}) {\n    const { FETCH_EVENTS } = this.constructor;\n    this.$emit(FETCH_EVENTS.BEFORE_FETCH, { instance: this, url, requestInit });\n\n    this.__abortController.abort();\n    const newController = new AbortController();\n    newController.signal.addEventListener('abort', () => {\n      this.$emit(FETCH_EVENTS.ABORT, {\n        instance: this,\n        url,\n        requestInit,\n        reason: newController.signal.reason,\n      });\n    });\n    this.__abortController = newController;\n    const init = {\n      ...this.requestInit,\n      ...requestInit,\n      headers: {\n        ...this.requestInit.headers,\n        ...requestInit.headers,\n      },\n      signal: newController.signal,\n    };\n\n    this.$log('fetch', url, init);\n    this.$emit(FETCH_EVENTS.FETCH, { instance: this, url, requestInit: init });\n\n    try {\n      const response = await this.client(url, init);\n      this.$emit(FETCH_EVENTS.RESPONSE, { instance: this, url, requestInit: init, response });\n\n      if (!response.ok) {\n        throw new Error(`Fetch failed with status ${response.status}`);\n      }\n\n      const fn = new Function(\n        'response',\n        'url',\n        'requestInit',\n        'self',\n        `return ${this.$options.response}`,\n      );\n      const content = await fn.call(this, response, url, requestInit, self);\n      this.$emit(FETCH_EVENTS.AFTER_FETCH, { instance: this, url, requestInit: init, content });\n      this.update(url, init, content);\n    } catch (error) {\n      this.$emit(FETCH_EVENTS.AFTER_FETCH, { instance: this, url, requestInit: init, error });\n      this.error(url, init, error);\n    }\n  }\n\n  /**\n   * Update the DOM with new content from the fetched HTML.\n   * @internal\n   */\n  __updateDOM(fragment: Document) {\n    const { FETCH_MODES } = this.constructor;\n    const { mode, selector } = this.$options;\n\n    for (const newElement of fragment.querySelectorAll<HTMLElement>(selector)) {\n      const oldElement = newElement.id && document.getElementById(newElement.id);\n\n      if (!oldElement || oldElement === newElement) {\n        continue;\n      }\n\n      const oldScripts = getScripts(oldElement);\n\n      switch (mode) {\n        case FETCH_MODES.APPEND:\n          oldElement.append(...newElement.childNodes);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.PREPEND:\n          oldElement.prepend(...newElement.childNodes);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.MORPH:\n          morphdom(oldElement, newElement);\n          adoptNewScripts(getScripts(oldElement), oldScripts);\n          break;\n        case FETCH_MODES.REPLACE:\n        default:\n          oldElement.replaceWith(newElement);\n          adoptNewScripts(getScripts(newElement), oldScripts);\n          break;\n      }\n    }\n  }\n\n  /**\n   * Dispatch the contents to update to their matching FrameTarget.\n   */\n  async update(url: URL, requestInit: RequestInit, content: string) {\n    const { FETCH_EVENTS } = this.constructor;\n    const { history, viewTransition } = this.$options;\n\n    this.$log('content', url, content);\n    this.$emit(FETCH_EVENTS.BEFORE_UPDATE, { instance: this, url, requestInit, content });\n\n    const fragment = this.__domParser.parseFromString(content, 'text/html');\n\n    if (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 (fragment.title) {\n          document.title = fragment.title;\n        }\n      });\n    }\n\n    this.$emit(FETCH_EVENTS.UPDATE, { instance: this, url, requestInit, fragment });\n\n    if (viewTransition && isFunction(document.startViewTransition)) {\n      await document.startViewTransition(() => {\n        this.__updateDOM(fragment);\n      }).ready;\n    } else {\n      this.__updateDOM(fragment);\n    }\n\n    this.$emit(FETCH_EVENTS.AFTER_UPDATE, { instance: this, url, requestInit, fragment });\n  }\n\n  /**\n   * Handle errors.\n   */\n  error(url: URL, requestInit: RequestInit, error: Error) {\n    if (error.name === 'AbortError') return;\n\n    this.$log('error', url, requestInit, error);\n    this.$emit(this.constructor.FETCH_EVENTS.ERROR, { instance: this, url, requestInit, error });\n  }\n\n  /**\n   * Abort the current request.\n   */\n  abort(reason?: any) {\n    this.__abortController.abort(reason);\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/Fetch/utils.js

@@ -15,10 +15,7 @@ function adoptNewScript(script) {
   script.replaceWith(newScript);
 }
 function getScripts(el) {
-  return el.tagName === "SCRIPT" ? /* @__PURE__ */ new Set([el]) : (
-    // @ts-expect-error querySelectoAll is iterable.
-    new Set(el.querySelectorAll("script"))
-  );
+  return el.tagName === "SCRIPT" ? /* @__PURE__ */ new Set([el]) : new Set(el.querySelectorAll("script"));
 }
 export {
   adoptNewScript,

package/Fetch/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Fetch/utils.ts"],
-  "sourcesContent": ["export function adoptNewScripts(\n  newScripts: Set<HTMLScriptElement>,\n  oldScripts: Set<HTMLScriptElement>,\n) {\n  for (const script of newScripts) {\n    if (oldScripts.has(script)) continue;\n    adoptNewScript(script);\n  }\n}\n\nexport function adoptNewScript(script: HTMLScriptElement) {\n  const newScript = document.createElement('script');\n\n  for (const attribute of script.getAttributeNames()) {\n    newScript.setAttribute(attribute, script.getAttribute(attribute));\n  }\n\n  if (script.textContent) {\n    newScript.textContent = script.textContent;\n  }\n\n  script.replaceWith(newScript);\n}\n\nexport function getScripts(el: HTMLElement): Set<HTMLScriptElement> {\n  return el.tagName === 'SCRIPT'\n    ? new Set([el as HTMLScriptElement])\n    : // @ts-expect-error querySelectoAll is iterable.\n      new Set(el.querySelectorAll('script'));\n}\n"],
-  "mappings": "AAAO,SAAS,gBACd,YACA,YACA;AACA,aAAW,UAAU,YAAY;AAC/B,QAAI,WAAW,IAAI,MAAM,EAAG;AAC5B,mBAAe,MAAM;AAAA,EACvB;AACF;AAEO,SAAS,eAAe,QAA2B;AACxD,QAAM,YAAY,SAAS,cAAc,QAAQ;AAEjD,aAAW,aAAa,OAAO,kBAAkB,GAAG;AAClD,cAAU,aAAa,WAAW,OAAO,aAAa,SAAS,CAAC;AAAA,EAClE;AAEA,MAAI,OAAO,aAAa;AACtB,cAAU,cAAc,OAAO;AAAA,EACjC;AAEA,SAAO,YAAY,SAAS;AAC9B;AAEO,SAAS,WAAW,IAAyC;AAClE,SAAO,GAAG,YAAY,WAClB,oBAAI,IAAI,CAAC,EAAuB,CAAC;AAAA;AAAA,IAEjC,IAAI,IAAI,GAAG,iBAAiB,QAAQ,CAAC;AAAA;AAC3C;",
+  "sourcesContent": ["export function adoptNewScripts(\n  newScripts: Set<HTMLScriptElement>,\n  oldScripts: Set<HTMLScriptElement>,\n) {\n  for (const script of newScripts) {\n    if (oldScripts.has(script)) continue;\n    adoptNewScript(script);\n  }\n}\n\nexport function adoptNewScript(script: HTMLScriptElement) {\n  const newScript = document.createElement('script');\n\n  for (const attribute of script.getAttributeNames()) {\n    newScript.setAttribute(attribute, script.getAttribute(attribute));\n  }\n\n  if (script.textContent) {\n    newScript.textContent = script.textContent;\n  }\n\n  script.replaceWith(newScript);\n}\n\nexport function getScripts(el: HTMLElement): Set<HTMLScriptElement> {\n  return el.tagName === 'SCRIPT'\n    ? new Set([el as HTMLScriptElement])\n    : new Set(el.querySelectorAll('script'));\n}\n"],
+  "mappings": "AAAO,SAAS,gBACd,YACA,YACA;AACA,aAAW,UAAU,YAAY;AAC/B,QAAI,WAAW,IAAI,MAAM,EAAG;AAC5B,mBAAe,MAAM;AAAA,EACvB;AACF;AAEO,SAAS,eAAe,QAA2B;AACxD,QAAM,YAAY,SAAS,cAAc,QAAQ;AAEjD,aAAW,aAAa,OAAO,kBAAkB,GAAG;AAClD,cAAU,aAAa,WAAW,OAAO,aAAa,SAAS,CAAC;AAAA,EAClE;AAEA,MAAI,OAAO,aAAa;AACtB,cAAU,cAAc,OAAO;AAAA,EACjC;AAEA,SAAO,YAAY,SAAS;AAC9B;AAEO,SAAS,WAAW,IAAyC;AAClE,SAAO,GAAG,YAAY,WAClB,oBAAI,IAAI,CAAC,EAAuB,CAAC,IACjC,IAAI,IAAI,GAAG,iBAAiB,QAAQ,CAAC;AAC3C;",
   "names": []
 }

package/Frame/Frame.d.ts

@@ -39,10 +39,10 @@ export declare class Frame<T extends BaseProps = BaseProps> extends Base<T & Fra
      * Header names.
      */
     headerNames: {
-        readonly ACCEPT: "accept";
-        readonly X_REQUESTED_BY: "x-requested-by";
-        readonly X_TRIGGERED_BY: "x-triggered-by";
-        readonly USER_AGENT: "user-agent";
+        readonly ACCEPT: 'accept';
+        readonly X_REQUESTED_BY: 'x-requested-by';
+        readonly X_TRIGGERED_BY: 'x-triggered-by';
+        readonly USER_AGENT: 'user-agent';
     };
     /**
      * Get uniq id.

package/Frame/FrameForm.d.ts

@@ -17,7 +17,7 @@ export declare class FrameForm<T extends BaseProps = BaseProps> extends Abstract
     /**
      * Form submission method.
      */
-    get method(): "get" | "post";
+    get method(): 'post' | 'get';
     /**
      * Add params to the requested URL for GET submissions.
      */

package/Frame/FrameTarget.d.ts

@@ -17,10 +17,10 @@ export declare class FrameTarget<T extends BaseProps = BaseProps> extends Transi
      * Different mode of content insertion.
      */
     modes: {
-        readonly APPEND: "append";
-        readonly PREPEND: "prepend";
-        readonly REPLACE: "replace";
-        readonly MORPH: "morph";
+        readonly APPEND: 'append';
+        readonly PREPEND: 'prepend';
+        readonly REPLACE: 'replace';
+        readonly MORPH: 'morph';
     };
     /**
      * Get uniq ID.

package/Frame/FrameTarget.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Frame/FrameTarget.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\nimport morphdom from 'morphdom';\nimport { adoptNewScripts } from '../Fetch/utils.js';\n\nexport interface FrameTargetProps extends BaseProps {\n  $options: {\n    mode: 'replace' | 'prepend' | 'append' | 'morph';\n  };\n}\n\n/**\n * FrameTarget class.\n */\nexport class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameTarget',\n    options: {\n      mode: {\n        type: String,\n        default: 'replace', // or 'prepend' or 'append'\n      },\n    },\n  };\n\n  /**\n   * Different mode of content insertion.\n   */\n  modes = {\n    APPEND: 'append',\n    PREPEND: 'prepend',\n    REPLACE: 'replace',\n    MORPH: 'morph',\n  } as const;\n\n  /**\n   * Get uniq ID.\n   */\n  get id(): string {\n    return this.$el.id;\n  }\n\n  /**\n   * Update the content from the new target.\n   */\n  async updateContent(content: Element = null) {\n    if (!content) {\n      return;\n    }\n\n    const { mode } = this.$options;\n    const { $el, modes } = this;\n    // @ts-expect-error querySelectoAll is iterable.\n    const previousScripts: Set<HTMLScriptElement> = new Set(this.$el.querySelectorAll('script'));\n\n    // In append or prepend mode, the leave transition can be used to\n    // move the exisiting children of the root element, with the leave\n    // transition being applied in parallel of the enter transition.\n    if (mode === modes.APPEND || mode === modes.PREPEND) {\n      const leaveTargets = Array.from($el.children) as HTMLElement[];\n      const enterTargets = Array.from(content.children) as HTMLElement[];\n\n      $el[mode](...Array.from(content.childNodes));\n      // @ts-expect-error querySelectoAll is iterable.\n      const newScripts: Set<HTMLScriptElement> = new Set(this.$el.querySelectorAll('script'));\n      adoptNewScripts(newScripts, previousScripts);\n      await Promise.all([this.leave(leaveTargets), this.enter(enterTargets)]);\n    } else {\n      await this.leave();\n      if (mode === modes.MORPH) {\n        morphdom($el, content);\n      } else {\n        $el.replaceChildren(...Array.from(content.childNodes));\n      }\n      // @ts-expect-error querySelectoAll is iterable.\n      const newScripts: Set<HTMLScriptElement> = new Set(this.$el.querySelectorAll('script'));\n      adoptNewScripts(newScripts, previousScripts);\n      await this.enter();\n    }\n  }\n}\n"],
-  "mappings": "AACA,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AACrB,SAAS,uBAAuB;AAWzB,MAAM,oBAAqD,WAAiC;AAAA;AAAA;AAAA;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAa;AACf,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,cAAc,UAAmB,MAAM;AAC3C,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,UAAM,EAAE,KAAK,IAAI,KAAK;AACtB,UAAM,EAAE,KAAK,MAAM,IAAI;AAEvB,UAAM,kBAA0C,IAAI,IAAI,KAAK,IAAI,iBAAiB,QAAQ,CAAC;AAK3F,QAAI,SAAS,MAAM,UAAU,SAAS,MAAM,SAAS;AACnD,YAAM,eAAe,MAAM,KAAK,IAAI,QAAQ;AAC5C,YAAM,eAAe,MAAM,KAAK,QAAQ,QAAQ;AAEhD,UAAI,IAAI,EAAE,GAAG,MAAM,KAAK,QAAQ,UAAU,CAAC;AAE3C,YAAM,aAAqC,IAAI,IAAI,KAAK,IAAI,iBAAiB,QAAQ,CAAC;AACtF,sBAAgB,YAAY,eAAe;AAC3C,YAAM,QAAQ,IAAI,CAAC,KAAK,MAAM,YAAY,GAAG,KAAK,MAAM,YAAY,CAAC,CAAC;AAAA,IACxE,OAAO;AACL,YAAM,KAAK,MAAM;AACjB,UAAI,SAAS,MAAM,OAAO;AACxB,iBAAS,KAAK,OAAO;AAAA,MACvB,OAAO;AACL,YAAI,gBAAgB,GAAG,MAAM,KAAK,QAAQ,UAAU,CAAC;AAAA,MACvD;AAEA,YAAM,aAAqC,IAAI,IAAI,KAAK,IAAI,iBAAiB,QAAQ,CAAC;AACtF,sBAAgB,YAAY,eAAe;AAC3C,YAAM,KAAK,MAAM;AAAA,IACnB;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\nimport morphdom from 'morphdom';\nimport { adoptNewScripts } from '../Fetch/utils.js';\n\nexport interface FrameTargetProps extends BaseProps {\n  $options: {\n    mode: 'replace' | 'prepend' | 'append' | 'morph';\n  };\n}\n\n/**\n * FrameTarget class.\n */\nexport class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameTarget',\n    options: {\n      mode: {\n        type: String,\n        default: 'replace', // or 'prepend' or 'append'\n      },\n    },\n  };\n\n  /**\n   * Different mode of content insertion.\n   */\n  modes = {\n    APPEND: 'append',\n    PREPEND: 'prepend',\n    REPLACE: 'replace',\n    MORPH: 'morph',\n  } as const;\n\n  /**\n   * Get uniq ID.\n   */\n  get id(): string {\n    return this.$el.id;\n  }\n\n  /**\n   * Update the content from the new target.\n   */\n  async updateContent(content: Element = null) {\n    if (!content) {\n      return;\n    }\n\n    const { mode } = this.$options;\n    const { $el, modes } = this;\n    const previousScripts: Set<HTMLScriptElement> = new Set(this.$el.querySelectorAll('script'));\n\n    // In append or prepend mode, the leave transition can be used to\n    // move the exisiting children of the root element, with the leave\n    // transition being applied in parallel of the enter transition.\n    if (mode === modes.APPEND || mode === modes.PREPEND) {\n      const leaveTargets = Array.from($el.children) as HTMLElement[];\n      const enterTargets = Array.from(content.children) as HTMLElement[];\n\n      $el[mode](...Array.from(content.childNodes));\n      const newScripts: Set<HTMLScriptElement> = new Set(this.$el.querySelectorAll('script'));\n      adoptNewScripts(newScripts, previousScripts);\n      await Promise.all([this.leave(leaveTargets), this.enter(enterTargets)]);\n    } else {\n      await this.leave();\n      if (mode === modes.MORPH) {\n        morphdom($el, content);\n      } else {\n        $el.replaceChildren(...Array.from(content.childNodes));\n      }\n      const newScripts: Set<HTMLScriptElement> = new Set(this.$el.querySelectorAll('script'));\n      adoptNewScripts(newScripts, previousScripts);\n      await this.enter();\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AACrB,SAAS,uBAAuB;AAWzB,MAAM,oBAAqD,WAAiC;AAAA;AAAA;AAAA;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAa;AACf,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,cAAc,UAAmB,MAAM;AAC3C,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,UAAM,EAAE,KAAK,IAAI,KAAK;AACtB,UAAM,EAAE,KAAK,MAAM,IAAI;AACvB,UAAM,kBAA0C,IAAI,IAAI,KAAK,IAAI,iBAAiB,QAAQ,CAAC;AAK3F,QAAI,SAAS,MAAM,UAAU,SAAS,MAAM,SAAS;AACnD,YAAM,eAAe,MAAM,KAAK,IAAI,QAAQ;AAC5C,YAAM,eAAe,MAAM,KAAK,QAAQ,QAAQ;AAEhD,UAAI,IAAI,EAAE,GAAG,MAAM,KAAK,QAAQ,UAAU,CAAC;AAC3C,YAAM,aAAqC,IAAI,IAAI,KAAK,IAAI,iBAAiB,QAAQ,CAAC;AACtF,sBAAgB,YAAY,eAAe;AAC3C,YAAM,QAAQ,IAAI,CAAC,KAAK,MAAM,YAAY,GAAG,KAAK,MAAM,YAAY,CAAC,CAAC;AAAA,IACxE,OAAO;AACL,YAAM,KAAK,MAAM;AACjB,UAAI,SAAS,MAAM,OAAO;AACxB,iBAAS,KAAK,OAAO;AAAA,MACvB,OAAO;AACL,YAAI,gBAAgB,GAAG,MAAM,KAAK,QAAQ,UAAU,CAAC;AAAA,MACvD;AACA,YAAM,aAAqC,IAAI,IAAI,KAAK,IAAI,iBAAiB,QAAQ,CAAC;AACtF,sBAAgB,YAAY,eAAe;AAC3C,YAAM,KAAK,MAAM;AAAA,IACnB;AAAA,EACF;AACF;",
   "names": []
 }

package/ScrollAnimation/AbstractScrollAnimation.d.ts

@@ -20,6 +20,14 @@ export declare class AbstractScrollAnimation<T extends BaseProps = BaseProps> ex
      * Config.
      */
     static config: BaseConfig;
+    /**
+     * Current animation progress (0 to 1).
+     */
+    progress: number;
+    /**
+     * Constructor.
+     */
+    constructor(element: HTMLElement);
     /**
      * Get the target element for the animation.
      */

package/ScrollAnimation/AbstractScrollAnimation.js

@@ -1,5 +1,5 @@
 import { Base, withFreezedOptions } from "@studiometa/js-toolkit";
-import { map, clamp01, animate } from "@studiometa/js-toolkit/utils";
+import { map, clamp01, animate, nextTick } from "@studiometa/js-toolkit/utils";
 class AbstractScrollAnimation extends withFreezedOptions(Base) {
   /**
    * Config.
@@ -28,6 +28,24 @@ class AbstractScrollAnimation extends withFreezedOptions(Base) {
       }
     }
   };
+  /**
+   * Current animation progress (0 to 1).
+   */
+  progress = 0;
+  /**
+   * Constructor.
+   */
+  constructor(element) {
+    super(element);
+    this.$on("mounted", () => {
+      this.render(this.progress);
+    });
+    this.$on("destroyed", () => {
+      nextTick(() => {
+        this.render(Math.round(this.progress));
+      });
+    });
+  }
   /**
    * Get the target element for the animation.
    */
@@ -73,6 +91,7 @@ class AbstractScrollAnimation extends withFreezedOptions(Base) {
    * Render the animation for the given progress.
    */
   render(progress) {
+    this.progress = progress;
     this.animation.progress(progress);
   }
 }

package/ScrollAnimation/AbstractScrollAnimation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/AbstractScrollAnimation.ts"],
-  "sourcesContent": ["import { Base, withFreezedOptions } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, ScrollInViewProps } from '@studiometa/js-toolkit';\nimport { map, clamp01, animate } from '@studiometa/js-toolkit/utils';\nimport type { Keyframe } from '@studiometa/js-toolkit/utils';\n\nexport interface AbstractScrollAnimationProps extends BaseProps {\n  $options: {\n    playRange: [number, number] | [number, number, number];\n    from: Keyframe;\n    to: Keyframe;\n    keyframes: Keyframe[];\n    easing: [number, number, number, number];\n  };\n}\n\n/**\n * AbstractScrollAnimation class.\n */\nexport class AbstractScrollAnimation<\n  T extends BaseProps = BaseProps,\n> extends withFreezedOptions<Base>(Base)<T & AbstractScrollAnimationProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AbstractScrollAnimation',\n    options: {\n      playRange: {\n        type: Array,\n        default: () => [0, 1],\n      },\n      from: {\n        type: Object,\n        default: () => ({}),\n      },\n      to: {\n        type: Object,\n        default: () => ({}),\n      },\n      keyframes: {\n        type: Array,\n      },\n      easing: {\n        type: Array,\n        default: () => [0, 0, 1, 1],\n      },\n    },\n  };\n\n  /**\n   * Get the target element for the animation.\n   */\n  get target() {\n    return this.$el as HTMLElement;\n  }\n\n  /**\n   * Lazily get animation.\n   */\n  get animation(): ReturnType<typeof animate> {\n    let { keyframes } = this.$options;\n    const { from, to } = this.$options;\n\n    if (keyframes.length <= 0 && from && to) {\n      keyframes = [from, to];\n    }\n\n    const animation = animate(this.target, keyframes, { easing: this.$options.easing });\n\n    Object.defineProperty(this, 'animation', {\n      value: animation,\n      configurable: true,\n    });\n\n    return animation;\n  }\n\n  get playRange(): [number, number] {\n    const { playRange } = this.$options;\n\n    let start = 0;\n    let end = 1;\n\n    if (playRange.length === 3) {\n      const [index, length, step] = playRange;\n      const clampedStep = clamp01(step);\n      const duration = Math.max(0, 1 - clampedStep * (length - 1));\n      start = clampedStep * index;\n      end = Math.min(1, start + duration);\n    } else if (playRange.length === 2) {\n      [start, end] = playRange;\n    }\n\n    return [start, end];\n  }\n\n  scrolledInView({ dampedProgress }: ScrollInViewProps) {\n    const [start, end] = this.playRange;\n    this.render(clamp01(map(dampedProgress.y, start, end, 0, 1)));\n  }\n\n  /**\n   * Render the animation for the given progress.\n   */\n  render(progress: number) {\n    this.animation.progress(progress);\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,MAAM,0BAA0B;AAEzC,SAAS,KAAK,SAAS,eAAe;AAgB/B,MAAM,gCAEH,mBAAyB,IAAI,EAAoC;AAAA;AAAA;AAAA;AAAA,EAIzE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,WAAW;AAAA,QACT,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,CAAC;AAAA,MACtB;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,WAAW;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAwC;AAC1C,QAAI,EAAE,UAAU,IAAI,KAAK;AACzB,UAAM,EAAE,MAAM,GAAG,IAAI,KAAK;AAE1B,QAAI,UAAU,UAAU,KAAK,QAAQ,IAAI;AACvC,kBAAY,CAAC,MAAM,EAAE;AAAA,IACvB;AAEA,UAAM,YAAY,QAAQ,KAAK,QAAQ,WAAW,EAAE,QAAQ,KAAK,SAAS,OAAO,CAAC;AAElF,WAAO,eAAe,MAAM,aAAa;AAAA,MACvC,OAAO;AAAA,MACP,cAAc;AAAA,IAChB,CAAC;AAED,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,YAA8B;AAChC,UAAM,EAAE,UAAU,IAAI,KAAK;AAE3B,QAAI,QAAQ;AACZ,QAAI,MAAM;AAEV,QAAI,UAAU,WAAW,GAAG;AAC1B,YAAM,CAAC,OAAO,QAAQ,IAAI,IAAI;AAC9B,YAAM,cAAc,QAAQ,IAAI;AAChC,YAAM,WAAW,KAAK,IAAI,GAAG,IAAI,eAAe,SAAS,EAAE;AAC3D,cAAQ,cAAc;AACtB,YAAM,KAAK,IAAI,GAAG,QAAQ,QAAQ;AAAA,IACpC,WAAW,UAAU,WAAW,GAAG;AACjC,OAAC,OAAO,GAAG,IAAI;AAAA,IACjB;AAEA,WAAO,CAAC,OAAO,GAAG;AAAA,EACpB;AAAA,EAEA,eAAe,EAAE,eAAe,GAAsB;AACpD,UAAM,CAAC,OAAO,GAAG,IAAI,KAAK;AAC1B,SAAK,OAAO,QAAQ,IAAI,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,UAAkB;AACvB,SAAK,UAAU,SAAS,QAAQ;AAAA,EAClC;AACF;",
+  "sourcesContent": ["import { Base, withFreezedOptions } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, ScrollInViewProps } from '@studiometa/js-toolkit';\nimport { map, clamp01, animate, nextTick } from '@studiometa/js-toolkit/utils';\nimport type { Keyframe } from '@studiometa/js-toolkit/utils';\n\nexport interface AbstractScrollAnimationProps extends BaseProps {\n  $options: {\n    playRange: [number, number] | [number, number, number];\n    from: Keyframe;\n    to: Keyframe;\n    keyframes: Keyframe[];\n    easing: [number, number, number, number];\n  };\n}\n\n/**\n * AbstractScrollAnimation class.\n */\nexport class AbstractScrollAnimation<\n  T extends BaseProps = BaseProps,\n> extends withFreezedOptions<Base>(Base)<T & AbstractScrollAnimationProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AbstractScrollAnimation',\n    options: {\n      playRange: {\n        type: Array,\n        default: () => [0, 1],\n      },\n      from: {\n        type: Object,\n        default: () => ({}),\n      },\n      to: {\n        type: Object,\n        default: () => ({}),\n      },\n      keyframes: {\n        type: Array,\n      },\n      easing: {\n        type: Array,\n        default: () => [0, 0, 1, 1],\n      },\n    },\n  };\n\n  /**\n   * Current animation progress (0 to 1).\n   */\n  progress = 0;\n\n  /**\n   * Constructor.\n   */\n  constructor(element: HTMLElement) {\n    super(element);\n\n    // Restore animation state on mount\n    this.$on('mounted', () => {\n      this.render(this.progress);\n    });\n\n    // Complete animation to nearest boundary on destroy\n    this.$on('destroyed', () => {\n      nextTick(() => {\n        this.render(Math.round(this.progress));\n      });\n    });\n  }\n\n  /**\n   * Get the target element for the animation.\n   */\n  get target() {\n    return this.$el as HTMLElement;\n  }\n\n  /**\n   * Lazily get animation.\n   */\n  get animation(): ReturnType<typeof animate> {\n    let { keyframes } = this.$options;\n    const { from, to } = this.$options;\n\n    if (keyframes.length <= 0 && from && to) {\n      keyframes = [from, to];\n    }\n\n    const animation = animate(this.target, keyframes, { easing: this.$options.easing });\n\n    Object.defineProperty(this, 'animation', {\n      value: animation,\n      configurable: true,\n    });\n\n    return animation;\n  }\n\n  get playRange(): [number, number] {\n    const { playRange } = this.$options;\n\n    let start = 0;\n    let end = 1;\n\n    if (playRange.length === 3) {\n      const [index, length, step] = playRange;\n      const clampedStep = clamp01(step);\n      const duration = Math.max(0, 1 - clampedStep * (length - 1));\n      start = clampedStep * index;\n      end = Math.min(1, start + duration);\n    } else if (playRange.length === 2) {\n      [start, end] = playRange;\n    }\n\n    return [start, end];\n  }\n\n  scrolledInView({ dampedProgress }: ScrollInViewProps) {\n    const [start, end] = this.playRange;\n    this.render(clamp01(map(dampedProgress.y, start, end, 0, 1)));\n  }\n\n  /**\n   * Render the animation for the given progress.\n   */\n  render(progress: number) {\n    this.progress = progress;\n    this.animation.progress(progress);\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,MAAM,0BAA0B;AAEzC,SAAS,KAAK,SAAS,SAAS,gBAAgB;AAgBzC,MAAM,gCAEH,mBAAyB,IAAI,EAAoC;AAAA;AAAA;AAAA;AAAA,EAIzE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,WAAW;AAAA,QACT,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,CAAC;AAAA,MACtB;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,WAAW;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,YAAY,SAAsB;AAChC,UAAM,OAAO;AAGb,SAAK,IAAI,WAAW,MAAM;AACxB,WAAK,OAAO,KAAK,QAAQ;AAAA,IAC3B,CAAC;AAGD,SAAK,IAAI,aAAa,MAAM;AAC1B,eAAS,MAAM;AACb,aAAK,OAAO,KAAK,MAAM,KAAK,QAAQ,CAAC;AAAA,MACvC,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAwC;AAC1C,QAAI,EAAE,UAAU,IAAI,KAAK;AACzB,UAAM,EAAE,MAAM,GAAG,IAAI,KAAK;AAE1B,QAAI,UAAU,UAAU,KAAK,QAAQ,IAAI;AACvC,kBAAY,CAAC,MAAM,EAAE;AAAA,IACvB;AAEA,UAAM,YAAY,QAAQ,KAAK,QAAQ,WAAW,EAAE,QAAQ,KAAK,SAAS,OAAO,CAAC;AAElF,WAAO,eAAe,MAAM,aAAa;AAAA,MACvC,OAAO;AAAA,MACP,cAAc;AAAA,IAChB,CAAC;AAED,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,YAA8B;AAChC,UAAM,EAAE,UAAU,IAAI,KAAK;AAE3B,QAAI,QAAQ;AACZ,QAAI,MAAM;AAEV,QAAI,UAAU,WAAW,GAAG;AAC1B,YAAM,CAAC,OAAO,QAAQ,IAAI,IAAI;AAC9B,YAAM,cAAc,QAAQ,IAAI;AAChC,YAAM,WAAW,KAAK,IAAI,GAAG,IAAI,eAAe,SAAS,EAAE;AAC3D,cAAQ,cAAc;AACtB,YAAM,KAAK,IAAI,GAAG,QAAQ,QAAQ;AAAA,IACpC,WAAW,UAAU,WAAW,GAAG;AACjC,OAAC,OAAO,GAAG,IAAI;AAAA,IACjB;AAEA,WAAO,CAAC,OAAO,GAAG;AAAA,EACpB;AAAA,EAEA,eAAe,EAAE,eAAe,GAAsB;AACpD,UAAM,CAAC,OAAO,GAAG,IAAI,KAAK;AAC1B,SAAK,OAAO,QAAQ,IAAI,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,UAAkB;AACvB,SAAK,WAAW;AAChB,SAAK,UAAU,SAAS,QAAQ;AAAA,EAClC;AACF;",
   "names": []
 }

package/ScrollAnimation/ScrollAnimation.d.ts

@@ -8,6 +8,8 @@ export interface ScrollAnimationProps extends BaseProps {
 declare const ScrollAnimation_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithScrolledInViewInterface, AbstractScrollAnimation<BaseProps>, import("@studiometa/js-toolkit").WithScrolledInViewProps>;
 /**
  * ScrollAnimation class.
+ *
+ * @deprecated Use `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.
  * @link https://ui.studiometa.dev/components/ScrollAnimation/
  */
 export declare class ScrollAnimation<T extends BaseProps = BaseProps> extends ScrollAnimation_base<T & ScrollAnimationProps> {
@@ -19,5 +21,9 @@ export declare class ScrollAnimation<T extends BaseProps = BaseProps> extends Sc
      * Use the `target` ref as animation target.
      */
     get target(): HTMLElement;
+    /**
+     * Display deprecation warning.
+     */
+    mounted(): void;
 }
 export {};

package/ScrollAnimation/ScrollAnimation.js

@@ -1,4 +1,5 @@
 import { withScrolledInView } from "@studiometa/js-toolkit";
+import { isDev } from "@studiometa/js-toolkit/utils";
 import { AbstractScrollAnimation } from "./AbstractScrollAnimation.js";
 class ScrollAnimation extends withScrolledInView(AbstractScrollAnimation, {}) {
   /**
@@ -15,6 +16,17 @@ class ScrollAnimation extends withScrolledInView(AbstractScrollAnimation, {}) {
   get target() {
     return this.$refs.target;
   }
+  /**
+   * Display deprecation warning.
+   */
+  mounted() {
+    if (isDev) {
+      console.warn(
+        `The ${this.$options.name} component is deprecated.`,
+        "\nUse `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead."
+      );
+    }
+  }
 }
 export {
   ScrollAnimation

package/ScrollAnimation/ScrollAnimation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimation.ts"],
-  "sourcesContent": ["import { withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n}\n\n/**\n * ScrollAnimation class.\n * @link https://ui.studiometa.dev/components/ScrollAnimation/\n */\nexport class ScrollAnimation<\n  T extends BaseProps = BaseProps,\n> extends withScrolledInView<AbstractScrollAnimation>(AbstractScrollAnimation, {})<\n  T & ScrollAnimationProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractScrollAnimation.config,\n    name: 'ScrollAnimation',\n    refs: ['target'],\n  };\n\n  /**\n   * Use the `target` ref as animation target.\n   */\n  get target(): HTMLElement {\n    return this.$refs.target;\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,+BAA+B;AAYjC,MAAM,wBAEH,mBAA4C,yBAAyB,CAAC,CAAC,EAE/E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,wBAAwB;AAAA,IAC3B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;",
+  "sourcesContent": ["import { withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDev } from '@studiometa/js-toolkit/utils';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n}\n\n/**\n * ScrollAnimation class.\n *\n * @deprecated Use `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.\n * @link https://ui.studiometa.dev/components/ScrollAnimation/\n */\nexport class ScrollAnimation<\n  T extends BaseProps = BaseProps,\n> extends withScrolledInView<AbstractScrollAnimation>(AbstractScrollAnimation, {})<\n  T & ScrollAnimationProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractScrollAnimation.config,\n    name: 'ScrollAnimation',\n    refs: ['target'],\n  };\n\n  /**\n   * Use the `target` ref as animation target.\n   */\n  get target(): HTMLElement {\n    return this.$refs.target;\n  }\n\n  /**\n   * Display deprecation warning.\n   */\n  mounted() {\n    if (isDev) {\n      console.warn(\n        `The ${this.$options.name} component is deprecated.`,\n        '\\nUse `ScrollAnimationTimeline` with `ScrollAnimationTarget` children instead.',\n      );\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,aAAa;AACtB,SAAS,+BAA+B;AAcjC,MAAM,wBAEH,mBAA4C,yBAAyB,CAAC,CAAC,EAE/E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,wBAAwB;AAAA,IAC3B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,OAAO;AACT,cAAQ;AAAA,QACN,OAAO,KAAK,SAAS,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/ScrollAnimation/ScrollAnimationChild.d.ts

@@ -5,6 +5,8 @@ export interface ScrollAnimationChildProps extends BaseProps {
 }
 /**
  * ScrollAnimationChild class.
+ *
+ * @deprecated Use `ScrollAnimationTarget` instead.
  */
 export declare class ScrollAnimationChild<T extends BaseProps = BaseProps> extends AbstractScrollAnimation<T & ScrollAnimationChildProps> {
     /**
@@ -19,6 +21,10 @@ export declare class ScrollAnimationChild<T extends BaseProps = BaseProps> exten
      * Local damped progress.
      */
     dampedProgress: ScrollInViewProps['dampedCurrent'];
+    /**
+     * Display deprecation warning.
+     */
+    mounted(): void;
     /**
      * Compute local damped progress.
      */

package/ScrollAnimation/ScrollAnimationChild.js

@@ -1,4 +1,4 @@
-import { damp, clamp01, domScheduler } from "@studiometa/js-toolkit/utils";
+import { damp, clamp01, domScheduler, isDev } from "@studiometa/js-toolkit/utils";
 import { AbstractScrollAnimation } from "./AbstractScrollAnimation.js";
 function updateProps(that, props, dampFactor, dampPrecision, axis = "x") {
   that.dampedCurrent[axis] = damp(
@@ -44,6 +44,17 @@ class ScrollAnimationChild extends AbstractScrollAnimation {
     x: 0,
     y: 0
   };
+  /**
+   * Display deprecation warning.
+   */
+  mounted() {
+    if (isDev) {
+      console.warn(
+        `The ${this.$options.name} component is deprecated.`,
+        "\nUse `ScrollAnimationTarget` instead."
+      );
+    }
+  }
   /**
    * Compute local damped progress.
    */
@@ -52,11 +63,13 @@ class ScrollAnimationChild extends AbstractScrollAnimation {
       const { dampFactor, dampPrecision } = this.$options;
       updateProps(this, props, dampFactor, dampPrecision, "x");
       updateProps(this, props, dampFactor, dampPrecision, "y");
-      props.dampedCurrent = this.dampedCurrent;
-      props.dampedProgress = this.dampedProgress;
     });
     domScheduler.write(() => {
-      super.scrolledInView(props);
+      super.scrolledInView({
+        ...props,
+        dampedCurrent: this.dampedCurrent,
+        dampedProgress: this.dampedProgress
+      });
     });
   }
 }

package/ScrollAnimation/ScrollAnimationChild.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationChild.ts"],
-  "sourcesContent": ["import type {\n  BaseConfig,\n  BaseProps,\n  ScrollInViewProps,\n  WithScrolledInViewProps,\n} from '@studiometa/js-toolkit';\nimport { damp, clamp01, domScheduler } from '@studiometa/js-toolkit/utils';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationChildProps extends BaseProps {\n  $options: WithScrolledInViewProps['$options'];\n}\n\nfunction updateProps(\n  // eslint-disable-next-line no-use-before-define\n  that: ScrollAnimationChild,\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n) {\n  that.dampedCurrent[axis] = damp(\n    props.current[axis],\n    that.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  that.dampedProgress[axis] = clamp01(\n    (that.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\n/**\n * ScrollAnimationChild class.\n */\nexport class ScrollAnimationChild<T extends BaseProps = BaseProps> extends AbstractScrollAnimation<\n  T & ScrollAnimationChildProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'ScrollAnimationChild',\n    ...AbstractScrollAnimation.config,\n    options: {\n      ...AbstractScrollAnimation.config.options,\n      dampFactor: {\n        type: Number,\n        default: 0.1,\n      },\n      dampPrecision: {\n        type: Number,\n        default: 0.001,\n      },\n    },\n  };\n\n  /**\n   * Local damped current values.\n   */\n  dampedCurrent: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Local damped progress.\n   */\n  dampedProgress: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Compute local damped progress.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    domScheduler.read(() => {\n      const { dampFactor, dampPrecision } = this.$options;\n      updateProps(this, props, dampFactor, dampPrecision, 'x');\n      updateProps(this, props, dampFactor, dampPrecision, 'y');\n      props.dampedCurrent = this.dampedCurrent;\n      props.dampedProgress = this.dampedProgress;\n    });\n\n    domScheduler.write(() => {\n      super.scrolledInView(props);\n    });\n  }\n}\n"],
-  "mappings": "AAMA,SAAS,MAAM,SAAS,oBAAoB;AAC5C,SAAS,+BAA+B;AAMxC,SAAS,YAEP,MACA,OACA,YACA,eACA,OAAkB,KAClB;AACA,OAAK,cAAc,IAAI,IAAI;AAAA,IACzB,MAAM,QAAQ,IAAI;AAAA,IAClB,KAAK,cAAc,IAAI;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,OAAK,eAAe,IAAI,IAAI;AAAA,KACzB,KAAK,cAAc,IAAI,IAAI,MAAM,MAAM,IAAI,MAAM,MAAM,IAAI,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACtF;AACF;AAKO,MAAM,6BAA8D,wBAEzE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,GAAG,wBAAwB;AAAA,IAC3B,SAAS;AAAA,MACP,GAAG,wBAAwB,OAAO;AAAA,MAClC,YAAY;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,eAAe;AAAA,QACb,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAoD;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAqD;AAAA,IACnD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,iBAAa,KAAK,MAAM;AACtB,YAAM,EAAE,YAAY,cAAc,IAAI,KAAK;AAC3C,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AACvD,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AACvD,YAAM,gBAAgB,KAAK;AAC3B,YAAM,iBAAiB,KAAK;AAAA,IAC9B,CAAC;AAED,iBAAa,MAAM,MAAM;AACvB,YAAM,eAAe,KAAK;AAAA,IAC5B,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import type {\n  BaseConfig,\n  BaseProps,\n  ScrollInViewProps,\n  WithScrolledInViewProps,\n} from '@studiometa/js-toolkit';\nimport { damp, clamp01, domScheduler, isDev } from '@studiometa/js-toolkit/utils';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationChildProps extends BaseProps {\n  $options: WithScrolledInViewProps['$options'];\n}\n\nfunction updateProps(\n  // eslint-disable-next-line no-use-before-define\n  that: ScrollAnimationChild,\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n) {\n  that.dampedCurrent[axis] = damp(\n    props.current[axis],\n    that.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  that.dampedProgress[axis] = clamp01(\n    (that.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\n/**\n * ScrollAnimationChild class.\n *\n * @deprecated Use `ScrollAnimationTarget` instead.\n */\nexport class ScrollAnimationChild<T extends BaseProps = BaseProps> extends AbstractScrollAnimation<\n  T & ScrollAnimationChildProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'ScrollAnimationChild',\n    ...AbstractScrollAnimation.config,\n    options: {\n      ...AbstractScrollAnimation.config.options,\n      dampFactor: {\n        type: Number,\n        default: 0.1,\n      },\n      dampPrecision: {\n        type: Number,\n        default: 0.001,\n      },\n    },\n  };\n\n  /**\n   * Local damped current values.\n   */\n  dampedCurrent: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Local damped progress.\n   */\n  dampedProgress: ScrollInViewProps['dampedCurrent'] = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * Display deprecation warning.\n   */\n  mounted() {\n    if (isDev) {\n      console.warn(\n        `The ${this.$options.name} component is deprecated.`,\n        '\\nUse `ScrollAnimationTarget` instead.',\n      );\n    }\n  }\n\n  /**\n   * Compute local damped progress.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    domScheduler.read(() => {\n      const { dampFactor, dampPrecision } = this.$options;\n      updateProps(this, props, dampFactor, dampPrecision, 'x');\n      updateProps(this, props, dampFactor, dampPrecision, 'y');\n    });\n\n    domScheduler.write(() => {\n      super.scrolledInView({\n        ...props,\n        dampedCurrent: this.dampedCurrent,\n        dampedProgress: this.dampedProgress,\n      });\n    });\n  }\n}\n"],
+  "mappings": "AAMA,SAAS,MAAM,SAAS,cAAc,aAAa;AACnD,SAAS,+BAA+B;AAMxC,SAAS,YAEP,MACA,OACA,YACA,eACA,OAAkB,KAClB;AACA,OAAK,cAAc,IAAI,IAAI;AAAA,IACzB,MAAM,QAAQ,IAAI;AAAA,IAClB,KAAK,cAAc,IAAI;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,OAAK,eAAe,IAAI,IAAI;AAAA,KACzB,KAAK,cAAc,IAAI,IAAI,MAAM,MAAM,IAAI,MAAM,MAAM,IAAI,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACtF;AACF;AAOO,MAAM,6BAA8D,wBAEzE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,GAAG,wBAAwB;AAAA,IAC3B,SAAS;AAAA,MACP,GAAG,wBAAwB,OAAO;AAAA,MAClC,YAAY;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,eAAe;AAAA,QACb,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAoD;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAqD;AAAA,IACnD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,OAAO;AACT,cAAQ;AAAA,QACN,OAAO,KAAK,SAAS,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,iBAAa,KAAK,MAAM;AACtB,YAAM,EAAE,YAAY,cAAc,IAAI,KAAK;AAC3C,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AACvD,kBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AAAA,IACzD,CAAC;AAED,iBAAa,MAAM,MAAM;AACvB,YAAM,eAAe;AAAA,QACnB,GAAG;AAAA,QACH,eAAe,KAAK;AAAA,QACpB,gBAAgB,KAAK;AAAA,MACvB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/ScrollAnimation/ScrollAnimationChildWithEase.d.ts

@@ -1,12 +1,18 @@
 import type { BaseConfig } from '@studiometa/js-toolkit';
 declare const ScrollAnimationChildWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/index.js").AnimationScrollWithEaseInterface, import("#private/index.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("#private/index.js").AnimationScrollWithEaseProps>;
 /**
- * ScrollAnimationChild class.
+ * ScrollAnimationChildWithEase class.
+ *
+ * @deprecated Use `ScrollAnimationTarget` instead.
  */
 export declare class ScrollAnimationChildWithEase extends ScrollAnimationChildWithEase_base {
     /**
      * Config.
      */
     static config: BaseConfig;
+    /**
+     * Display deprecation warning.
+     */
+    mounted(): void;
 }
 export {};

package/ScrollAnimation/ScrollAnimationChildWithEase.js

@@ -1,3 +1,4 @@
+import { isDev } from "@studiometa/js-toolkit/utils";
 import { ScrollAnimationChild } from "./ScrollAnimationChild.js";
 import { animationScrollWithEase } from "./animationScrollWithEase.js";
 class ScrollAnimationChildWithEase extends animationScrollWithEase(ScrollAnimationChild) {
@@ -8,6 +9,17 @@ class ScrollAnimationChildWithEase extends animationScrollWithEase(ScrollAnimati
     ...ScrollAnimationChild.config,
     name: "ScrollAnimationChildWithEase"
   };
+  /**
+   * Display deprecation warning.
+   */
+  mounted() {
+    if (isDev) {
+      console.warn(
+        `The ${this.$options.name} component is deprecated.`,
+        "\nUse `ScrollAnimationTarget` instead."
+      );
+    }
+  }
 }
 export {
   ScrollAnimationChildWithEase

package/ScrollAnimation/ScrollAnimationChildWithEase.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationChildWithEase.ts"],
-  "sourcesContent": ["import type { BaseConfig } from '@studiometa/js-toolkit';\nimport { ScrollAnimationChild } from './ScrollAnimationChild.js';\nimport { animationScrollWithEase } from './animationScrollWithEase.js';\n\n/**\n * ScrollAnimationChild class.\n */\nexport class ScrollAnimationChildWithEase extends animationScrollWithEase(ScrollAnimationChild) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...ScrollAnimationChild.config,\n    name: 'ScrollAnimationChildWithEase',\n  };\n}\n"],
-  "mappings": "AACA,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAKjC,MAAM,qCAAqC,wBAAwB,oBAAoB,EAAE;AAAA;AAAA;AAAA;AAAA,EAI9F,OAAO,SAAqB;AAAA,IAC1B,GAAG,qBAAqB;AAAA,IACxB,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import type { BaseConfig } from '@studiometa/js-toolkit';\nimport { isDev } from '@studiometa/js-toolkit/utils';\nimport { ScrollAnimationChild } from './ScrollAnimationChild.js';\nimport { animationScrollWithEase } from './animationScrollWithEase.js';\n\n/**\n * ScrollAnimationChildWithEase class.\n *\n * @deprecated Use `ScrollAnimationTarget` instead.\n */\nexport class ScrollAnimationChildWithEase extends animationScrollWithEase(ScrollAnimationChild) {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...ScrollAnimationChild.config,\n    name: 'ScrollAnimationChildWithEase',\n  };\n\n  /**\n   * Display deprecation warning.\n   */\n  mounted() {\n    if (isDev) {\n      console.warn(\n        `The ${this.$options.name} component is deprecated.`,\n        '\\nUse `ScrollAnimationTarget` instead.',\n      );\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,aAAa;AACtB,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAOjC,MAAM,qCAAqC,wBAAwB,oBAAoB,EAAE;AAAA;AAAA;AAAA;AAAA,EAI9F,OAAO,SAAqB;AAAA,IAC1B,GAAG,qBAAqB;AAAA,IACxB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,OAAO;AACT,cAAQ;AAAA,QACN,OAAO,KAAK,SAAS,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/ScrollAnimation/ScrollAnimationParent.d.ts

@@ -9,12 +9,18 @@ export interface ScrollAnimationParentProps extends BaseProps {
 declare const ScrollAnimationParent_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithScrolledInViewInterface, Base<BaseProps>, import("@studiometa/js-toolkit").WithScrolledInViewProps>;
 /**
  * ScrollAnimationParent class.
+ *
+ * @deprecated Use `ScrollAnimationTimeline` instead.
  */
 export declare class ScrollAnimationParent<T extends BaseProps = BaseProps> extends ScrollAnimationParent_base<T & ScrollAnimationParentProps> {
     /**
      * Config.
      */
     static config: BaseConfig;
+    /**
+     * Display deprecation warning.
+     */
+    mounted(): void;
     /**
      * Scrolled in view hook.
      */

package/ScrollAnimation/ScrollAnimationParent.js

@@ -1,4 +1,5 @@
 import { Base, withScrolledInView } from "@studiometa/js-toolkit";
+import { isDev } from "@studiometa/js-toolkit/utils";
 import { ScrollAnimationChild } from "./ScrollAnimationChild.js";
 class ScrollAnimationParent extends withScrolledInView(
   Base,
@@ -13,6 +14,17 @@ class ScrollAnimationParent extends withScrolledInView(
       ScrollAnimationChild
     }
   };
+  /**
+   * Display deprecation warning.
+   */
+  mounted() {
+    if (isDev) {
+      console.warn(
+        `The ${this.$options.name} component is deprecated.`,
+        "\nUse `ScrollAnimationTimeline` instead."
+      );
+    }
+  }
   /**
    * Scrolled in view hook.
    */

package/ScrollAnimation/ScrollAnimationParent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationParent.ts"],
-  "sourcesContent": ["import { Base, ScrollInViewProps, withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { ScrollAnimationChild } from './ScrollAnimationChild.js';\n\nexport interface ScrollAnimationParentProps extends BaseProps {\n  $children: {\n    ScrollAnimationChild: ScrollAnimationChild[];\n  };\n}\n\n/**\n * ScrollAnimationParent class.\n */\nexport class ScrollAnimationParent<T extends BaseProps = BaseProps> extends withScrolledInView(\n  Base,\n  {},\n)<T & ScrollAnimationParentProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'ScrollAnimationParent',\n    components: {\n      ScrollAnimationChild,\n    },\n  };\n\n  /**\n   * Scrolled in view hook.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    for (const child of this.$children.ScrollAnimationChild) {\n      child.scrolledInView(props);\n    }\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,MAAyB,0BAA0B;AAE5D,SAAS,4BAA4B;AAW9B,MAAM,8BAA+D;AAAA,EAC1E;AAAA,EACA,CAAC;AACH,EAAkC;AAAA;AAAA;AAAA;AAAA,EAIhC,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,eAAW,SAAS,KAAK,UAAU,sBAAsB;AACvD,YAAM,eAAe,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Base, ScrollInViewProps, withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDev } from '@studiometa/js-toolkit/utils';\nimport { ScrollAnimationChild } from './ScrollAnimationChild.js';\n\nexport interface ScrollAnimationParentProps extends BaseProps {\n  $children: {\n    ScrollAnimationChild: ScrollAnimationChild[];\n  };\n}\n\n/**\n * ScrollAnimationParent class.\n *\n * @deprecated Use `ScrollAnimationTimeline` instead.\n */\nexport class ScrollAnimationParent<T extends BaseProps = BaseProps> extends withScrolledInView(\n  Base,\n  {},\n)<T & ScrollAnimationParentProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'ScrollAnimationParent',\n    components: {\n      ScrollAnimationChild,\n    },\n  };\n\n  /**\n   * Display deprecation warning.\n   */\n  mounted() {\n    if (isDev) {\n      console.warn(\n        `The ${this.$options.name} component is deprecated.`,\n        '\\nUse `ScrollAnimationTimeline` instead.',\n      );\n    }\n  }\n\n  /**\n   * Scrolled in view hook.\n   */\n  scrolledInView(props: ScrollInViewProps) {\n    for (const child of this.$children.ScrollAnimationChild) {\n      child.scrolledInView(props);\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,MAAyB,0BAA0B;AAE5D,SAAS,aAAa;AACtB,SAAS,4BAA4B;AAa9B,MAAM,8BAA+D;AAAA,EAC1E;AAAA,EACA,CAAC;AACH,EAAkC;AAAA;AAAA;AAAA;AAAA,EAIhC,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,OAAO;AACT,cAAQ;AAAA,QACN,OAAO,KAAK,SAAS,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,eAAW,SAAS,KAAK,UAAU,sBAAsB;AACvD,YAAM,eAAe,KAAK;AAAA,IAC5B;AAAA,EACF;AACF;",
   "names": []
 }