@wordpress/interactivity-router 2.25.0 → 2.26.1-next.719a03cbe.0

package/build-module/assets/scs.js

@@ -0,0 +1,56 @@
+/**
+ * Calculates the Shortest Common Supersequence (SCS) of two sequences.
+ *
+ * A supersequence is a sequence that contains both input sequences as subsequences.
+ * The shortest common supersequence is the shortest possible such sequence.
+ *
+ * This implementation uses dynamic programming with a time complexity of O(mn)
+ * and space complexity of O(mn), where m and n are the lengths of sequences X and Y.
+ *
+ * @example
+ * ```ts
+ * const seq1 = [1, 3, 5];
+ * const seq2 = [2, 3, 4];
+ * const scs = shortestCommonSupersequence(seq1, seq2); // [1, 2, 3, 4, 5]
+ * ```
+ *
+ * @param X       The first sequence.
+ * @param Y       The second sequence.
+ * @param isEqual Optional equality function to compare elements.
+ *                Defaults to strict equality (===).
+ * @return The shortest common supersequence of X and Y.
+ */
+export function shortestCommonSupersequence(X, Y, isEqual = (a, b) => a === b) {
+  const m = X.length;
+  const n = Y.length;
+
+  // Create a 2D dp table where dp[i][j] is the SCS for X[0..i-1] and Y[0..j-1].
+  const dp = Array.from({
+    length: m + 1
+  }, () => Array(n + 1).fill(null));
+
+  // Base cases: one of the sequences is empty.
+  for (let i = 0; i <= m; i++) {
+    dp[i][0] = X.slice(0, i);
+  }
+  for (let j = 0; j <= n; j++) {
+    dp[0][j] = Y.slice(0, j);
+  }
+
+  // Fill in the dp table.
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (isEqual(X[i - 1], Y[j - 1])) {
+        // When X[i-1] equals Y[j-1], use the reference from X.
+        dp[i][j] = dp[i - 1][j - 1].concat(X[i - 1]);
+      } else {
+        // Choose the shorter option between appending X[i-1] or Y[j-1].
+        const option1 = dp[i - 1][j].concat(X[i - 1]);
+        const option2 = dp[i][j - 1].concat(Y[j - 1]);
+        dp[i][j] = option1.length <= option2.length ? option1 : option2;
+      }
+    }
+  }
+  return dp[m][n];
+}
+//# sourceMappingURL=scs.js.map

package/build-module/assets/scs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["shortestCommonSupersequence","X","Y","isEqual","a","b","m","length","n","dp","Array","from","fill","i","slice","j","concat","option1","option2"],"sources":["@wordpress/interactivity-router/src/assets/scs.ts"],"sourcesContent":["/**\n * Calculates the Shortest Common Supersequence (SCS) of two sequences.\n *\n * A supersequence is a sequence that contains both input sequences as subsequences.\n * The shortest common supersequence is the shortest possible such sequence.\n *\n * This implementation uses dynamic programming with a time complexity of O(mn)\n * and space complexity of O(mn), where m and n are the lengths of sequences X and Y.\n *\n * @example\n * ```ts\n * const seq1 = [1, 3, 5];\n * const seq2 = [2, 3, 4];\n * const scs = shortestCommonSupersequence(seq1, seq2); // [1, 2, 3, 4, 5]\n * ```\n *\n * @param X       The first sequence.\n * @param Y       The second sequence.\n * @param isEqual Optional equality function to compare elements.\n *                Defaults to strict equality (===).\n * @return The shortest common supersequence of X and Y.\n */\nexport function shortestCommonSupersequence< E = unknown >(\n\tX: E[],\n\tY: E[],\n\tisEqual = ( a: E, b: E ) => a === b\n) {\n\tconst m = X.length;\n\tconst n = Y.length;\n\n\t// Create a 2D dp table where dp[i][j] is the SCS for X[0..i-1] and Y[0..j-1].\n\tconst dp: E[][][] = Array.from( { length: m + 1 }, () =>\n\t\tArray( n + 1 ).fill( null )\n\t);\n\n\t// Base cases: one of the sequences is empty.\n\tfor ( let i = 0; i <= m; i++ ) {\n\t\tdp[ i ][ 0 ] = X.slice( 0, i );\n\t}\n\tfor ( let j = 0; j <= n; j++ ) {\n\t\tdp[ 0 ][ j ] = Y.slice( 0, j );\n\t}\n\n\t// Fill in the dp table.\n\tfor ( let i = 1; i <= m; i++ ) {\n\t\tfor ( let j = 1; j <= n; j++ ) {\n\t\t\tif ( isEqual( X[ i - 1 ], Y[ j - 1 ] ) ) {\n\t\t\t\t// When X[i-1] equals Y[j-1], use the reference from X.\n\t\t\t\tdp[ i ][ j ] = dp[ i - 1 ][ j - 1 ].concat( X[ i - 1 ] );\n\t\t\t} else {\n\t\t\t\t// Choose the shorter option between appending X[i-1] or Y[j-1].\n\t\t\t\tconst option1 = dp[ i - 1 ][ j ].concat( X[ i - 1 ] );\n\t\t\t\tconst option2 = dp[ i ][ j - 1 ].concat( Y[ j - 1 ] );\n\t\t\t\tdp[ i ][ j ] =\n\t\t\t\t\toption1.length <= option2.length ? option1 : option2;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn dp[ m ][ n ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,2BAA2BA,CAC1CC,CAAM,EACNC,CAAM,EACNC,OAAO,GAAGA,CAAEC,CAAI,EAAEC,CAAI,KAAMD,CAAC,KAAKC,CAAC,EAClC;EACD,MAAMC,CAAC,GAAGL,CAAC,CAACM,MAAM;EAClB,MAAMC,CAAC,GAAGN,CAAC,CAACK,MAAM;;EAElB;EACA,MAAME,EAAW,GAAGC,KAAK,CAACC,IAAI,CAAE;IAAEJ,MAAM,EAAED,CAAC,GAAG;EAAE,CAAC,EAAE,MAClDI,KAAK,CAAEF,CAAC,GAAG,CAAE,CAAC,CAACI,IAAI,CAAE,IAAK,CAC3B,CAAC;;EAED;EACA,KAAM,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,IAAIP,CAAC,EAAEO,CAAC,EAAE,EAAG;IAC9BJ,EAAE,CAAEI,CAAC,CAAE,CAAE,CAAC,CAAE,GAAGZ,CAAC,CAACa,KAAK,CAAE,CAAC,EAAED,CAAE,CAAC;EAC/B;EACA,KAAM,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,IAAIP,CAAC,EAAEO,CAAC,EAAE,EAAG;IAC9BN,EAAE,CAAE,CAAC,CAAE,CAAEM,CAAC,CAAE,GAAGb,CAAC,CAACY,KAAK,CAAE,CAAC,EAAEC,CAAE,CAAC;EAC/B;;EAEA;EACA,KAAM,IAAIF,CAAC,GAAG,CAAC,EAAEA,CAAC,IAAIP,CAAC,EAAEO,CAAC,EAAE,EAAG;IAC9B,KAAM,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,IAAIP,CAAC,EAAEO,CAAC,EAAE,EAAG;MAC9B,IAAKZ,OAAO,CAAEF,CAAC,CAAEY,CAAC,GAAG,CAAC,CAAE,EAAEX,CAAC,CAAEa,CAAC,GAAG,CAAC,CAAG,CAAC,EAAG;QACxC;QACAN,EAAE,CAAEI,CAAC,CAAE,CAAEE,CAAC,CAAE,GAAGN,EAAE,CAAEI,CAAC,GAAG,CAAC,CAAE,CAAEE,CAAC,GAAG,CAAC,CAAE,CAACC,MAAM,CAAEf,CAAC,CAAEY,CAAC,GAAG,CAAC,CAAG,CAAC;MACzD,CAAC,MAAM;QACN;QACA,MAAMI,OAAO,GAAGR,EAAE,CAAEI,CAAC,GAAG,CAAC,CAAE,CAAEE,CAAC,CAAE,CAACC,MAAM,CAAEf,CAAC,CAAEY,CAAC,GAAG,CAAC,CAAG,CAAC;QACrD,MAAMK,OAAO,GAAGT,EAAE,CAAEI,CAAC,CAAE,CAAEE,CAAC,GAAG,CAAC,CAAE,CAACC,MAAM,CAAEd,CAAC,CAAEa,CAAC,GAAG,CAAC,CAAG,CAAC;QACrDN,EAAE,CAAEI,CAAC,CAAE,CAAEE,CAAC,CAAE,GACXE,OAAO,CAACV,MAAM,IAAIW,OAAO,CAACX,MAAM,GAAGU,OAAO,GAAGC,OAAO;MACtD;IACD;EACD;EAEA,OAAOT,EAAE,CAAEH,CAAC,CAAE,CAAEE,CAAC,CAAE;AACpB","ignoreList":[]}

package/build-module/assets/styles.js

@@ -0,0 +1,235 @@
+/**
+ * Internal dependencies
+ */
+import { shortestCommonSupersequence } from './scs';
+/**
+ * Compares the passed style or link elements to check if they can be
+ * considered equal.
+ *
+ * @param a `<style>` or `<link>` element.
+ * @param b `<style>` or `<link>` element.
+ * @return Whether they are considered equal.
+ */
+const areNodesEqual = (a, b) => a.isEqualNode(b);
+
+/**
+ * Normalizes the passed style or link element, reverting the changes
+ * made by {@link prepareStylePromise|`prepareStylePromise`} to the
+ * `data-original-media` and `media`.
+ *
+ * @example
+ * The following elements should be normalized to the same element:
+ * ```html
+ * <link rel="stylesheet" src="./assets/styles.css">
+ * <link rel="stylesheet" src="./assets/styles.css" media="all">
+ * <link rel="stylesheet" src="./assets/styles.css" media="preload">
+ * <link rel="stylesheet" src="./assets/styles.css" media="preload" data-original-media="all">
+ * ```
+ *
+ * @param element `<style>` or `<link>` element.
+ * @return Normalized node.
+ */
+export const normalizeMedia = element => {
+  element = element.cloneNode(true);
+  const media = element.media;
+  const {
+    originalMedia
+  } = element.dataset;
+  if (media === 'preload') {
+    element.media = originalMedia || 'all';
+    element.removeAttribute('data-original-media');
+  } else if (!element.media) {
+    element.media = 'all';
+  }
+  return element;
+};
+
+/**
+ * Adds the minimum style elements from Y around those in X using a
+ * shortest common supersequence algorithm, returning a list of
+ * promises for all the elements in Y.
+ *
+ * If X is empty, it appends all elements in Y to the passed parent
+ * element or to `document.head` instead.
+ *
+ * The returned promises resolve once the corresponding style element
+ * is loaded and ready. Those elements that are also in X return a
+ * cached promise.
+ *
+ * The algorithm ensures that the final style elements present in the
+ * document (or the passed `parent` element) are in the correct order
+ * and they are included in either X or Y.
+ *
+ * @param X      Base list of style elements.
+ * @param Y      List of style elements.
+ * @param parent Optional parent element to append to the new style elements.
+ * @return List of promises that resolve once the elements in Y are ready.
+ */
+export function updateStylesWithSCS(X, Y, parent = window.document.head) {
+  if (X.length === 0) {
+    return Y.map(element => {
+      const promise = prepareStylePromise(element);
+      parent.appendChild(element);
+      return promise;
+    });
+  }
+
+  // Create normalized arrays for comparison.
+  const xNormalized = X.map(normalizeMedia);
+  const yNormalized = Y.map(normalizeMedia);
+
+  // The `scs` array contains normalized elements.
+  const scs = shortestCommonSupersequence(xNormalized, yNormalized, areNodesEqual);
+  const xLength = X.length;
+  const yLength = Y.length;
+  const promises = [];
+  let last = X[xLength - 1];
+  let xIndex = 0;
+  let yIndex = 0;
+  for (const scsElement of scs) {
+    // Actual elements that will end up in the DOM.
+    const xElement = X[xIndex];
+    const yElement = Y[yIndex];
+    // Normalized elements for comparison.
+    const xNormEl = xNormalized[xIndex];
+    const yNormEl = yNormalized[yIndex];
+    if (xIndex < xLength && areNodesEqual(xNormEl, scsElement)) {
+      if (yIndex < yLength && areNodesEqual(yNormEl, scsElement)) {
+        promises.push(prepareStylePromise(xElement));
+        yIndex++;
+      }
+      xIndex++;
+    } else {
+      promises.push(prepareStylePromise(yElement));
+      if (xIndex < xLength) {
+        xElement.before(yElement);
+      } else {
+        last.after(yElement);
+        last = yElement;
+      }
+      yIndex++;
+    }
+  }
+  return promises;
+}
+
+/**
+ * Cache of promises per style elements.
+ *
+ * Each style element has their own associated `Promise` that resolves
+ * once the element has been loaded and is ready.
+ */
+const stylePromiseCache = new WeakMap();
+
+/**
+ * Prepares and returns the corresponding `Promise` for the passed style
+ * element.
+ *
+ * It returns the cached promise if it exists. Otherwise, constructs
+ * a `Promise` that resolves once the element has finished loading.
+ *
+ * For those elements that are not in the DOM yet, this function
+ * injects a `media="preload"` attribute to the passed element so the
+ * style is loaded without applying any styles to the document.
+ *
+ * @param element Style element.
+ * @return The associated `Promise` to the passed element.
+ */
+const prepareStylePromise = element => {
+  if (stylePromiseCache.has(element)) {
+    return stylePromiseCache.get(element);
+  }
+
+  // When the element exists in the main document and its media attribute
+  // is not "preload", that means the element comes from the initial page.
+  // The `media` attribute doesn't need to be handled in this case.
+  if (window.document.contains(element) && element.media !== 'preload') {
+    const promise = Promise.resolve(element);
+    stylePromiseCache.set(element, promise);
+    return promise;
+  }
+  if (element.hasAttribute('media') && element.media !== 'all') {
+    element.dataset.originalMedia = element.media;
+  }
+  element.media = 'preload';
+  if (element instanceof HTMLStyleElement) {
+    const promise = Promise.resolve(element);
+    stylePromiseCache.set(element, promise);
+    return promise;
+  }
+  const promise = new Promise((resolve, reject) => {
+    element.addEventListener('load', () => resolve(element));
+    element.addEventListener('error', event => {
+      const {
+        href
+      } = event.target;
+      reject(Error(`The style sheet with the following URL failed to load: ${href}`));
+    });
+  });
+  stylePromiseCache.set(element, promise);
+  return promise;
+};
+
+/**
+ * Cache of style promise lists per URL.
+ *
+ * It contains the list of style elements associated to the page with the
+ * passed URL. The original order is preserved to respect the CSS cascade.
+ *
+ * Each included promise resolves when the associated style element is ready.
+ */
+const styleSheetCache = new Map();
+
+/**
+ * Prepares all style elements contained in the passed document.
+ *
+ * This function calls {@link updateStylesWithSCS|`updateStylesWithSCS`}
+ * to insert only the minimum amount of style elements into the DOM, so
+ * those present in the passed document end up in the DOM while the order
+ * is respected.
+ *
+ * New appended style elements contain a `media=preload` attribute to
+ * make them effectively disabled until they are applied with the
+ * {@link applyStyles|`applyStyles`} function.
+ *
+ * @param doc Document instance.
+ * @param url URL for the passed document.
+ * @return A list of promises for each style element in the passed document.
+ */
+export const preloadStyles = (doc, url) => {
+  if (!styleSheetCache.has(url)) {
+    const currentStyleElements = Array.from(window.document.querySelectorAll('style,link[rel=stylesheet]'));
+    const newStyleElements = Array.from(doc.querySelectorAll('style,link[rel=stylesheet]'));
+
+    // Set styles in order.
+    const stylePromises = updateStylesWithSCS(currentStyleElements, newStyleElements);
+    styleSheetCache.set(url, stylePromises);
+  }
+  return styleSheetCache.get(url);
+};
+
+/**
+ * Traverses all style elements in the DOM, enabling only those included
+ * in the passed list and disabling the others.
+ *
+ * If the style element has the `data-original-media` attribute, the
+ * original `media` value is restored.
+ *
+ * @param styles List of style elements to apply.
+ */
+export const applyStyles = styles => {
+  window.document.querySelectorAll('style,link[rel=stylesheet]').forEach(el => {
+    if (el.sheet) {
+      if (styles.includes(el)) {
+        const {
+          originalMedia = 'all'
+        } = el.dataset;
+        el.sheet.media.mediaText = originalMedia;
+        el.sheet.disabled = false;
+      } else {
+        el.sheet.disabled = true;
+      }
+    }
+  });
+};
+//# sourceMappingURL=styles.js.map

package/build-module/assets/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["shortestCommonSupersequence","areNodesEqual","a","b","isEqualNode","normalizeMedia","element","cloneNode","media","originalMedia","dataset","removeAttribute","updateStylesWithSCS","X","Y","parent","window","document","head","length","map","promise","prepareStylePromise","appendChild","xNormalized","yNormalized","scs","xLength","yLength","promises","last","xIndex","yIndex","scsElement","xElement","yElement","xNormEl","yNormEl","push","before","after","stylePromiseCache","WeakMap","has","get","contains","Promise","resolve","set","hasAttribute","HTMLStyleElement","reject","addEventListener","event","href","target","Error","styleSheetCache","Map","preloadStyles","doc","url","currentStyleElements","Array","from","querySelectorAll","newStyleElements","stylePromises","applyStyles","styles","forEach","el","sheet","includes","mediaText","disabled"],"sources":["@wordpress/interactivity-router/src/assets/styles.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { shortestCommonSupersequence } from './scs';\n\nexport type StyleElement = HTMLLinkElement | HTMLStyleElement;\n\n/**\n * Compares the passed style or link elements to check if they can be\n * considered equal.\n *\n * @param a `<style>` or `<link>` element.\n * @param b `<style>` or `<link>` element.\n * @return Whether they are considered equal.\n */\nconst areNodesEqual = ( a: StyleElement, b: StyleElement ): boolean =>\n\ta.isEqualNode( b );\n\n/**\n * Normalizes the passed style or link element, reverting the changes\n * made by {@link prepareStylePromise|`prepareStylePromise`} to the\n * `data-original-media` and `media`.\n *\n * @example\n * The following elements should be normalized to the same element:\n * ```html\n * <link rel=\"stylesheet\" src=\"./assets/styles.css\">\n * <link rel=\"stylesheet\" src=\"./assets/styles.css\" media=\"all\">\n * <link rel=\"stylesheet\" src=\"./assets/styles.css\" media=\"preload\">\n * <link rel=\"stylesheet\" src=\"./assets/styles.css\" media=\"preload\" data-original-media=\"all\">\n * ```\n *\n * @param element `<style>` or `<link>` element.\n * @return Normalized node.\n */\nexport const normalizeMedia = ( element: StyleElement ): StyleElement => {\n\telement = element.cloneNode( true ) as StyleElement;\n\tconst media = element.media;\n\tconst { originalMedia } = element.dataset;\n\n\tif ( media === 'preload' ) {\n\t\telement.media = originalMedia || 'all';\n\t\telement.removeAttribute( 'data-original-media' );\n\t} else if ( ! element.media ) {\n\t\telement.media = 'all';\n\t}\n\treturn element;\n};\n\n/**\n * Adds the minimum style elements from Y around those in X using a\n * shortest common supersequence algorithm, returning a list of\n * promises for all the elements in Y.\n *\n * If X is empty, it appends all elements in Y to the passed parent\n * element or to `document.head` instead.\n *\n * The returned promises resolve once the corresponding style element\n * is loaded and ready. Those elements that are also in X return a\n * cached promise.\n *\n * The algorithm ensures that the final style elements present in the\n * document (or the passed `parent` element) are in the correct order\n * and they are included in either X or Y.\n *\n * @param X      Base list of style elements.\n * @param Y      List of style elements.\n * @param parent Optional parent element to append to the new style elements.\n * @return List of promises that resolve once the elements in Y are ready.\n */\nexport function updateStylesWithSCS(\n\tX: StyleElement[],\n\tY: StyleElement[],\n\tparent: Element = window.document.head\n) {\n\tif ( X.length === 0 ) {\n\t\treturn Y.map( ( element ) => {\n\t\t\tconst promise = prepareStylePromise( element );\n\t\t\tparent.appendChild( element );\n\t\t\treturn promise;\n\t\t} );\n\t}\n\n\t// Create normalized arrays for comparison.\n\tconst xNormalized = X.map( normalizeMedia );\n\tconst yNormalized = Y.map( normalizeMedia );\n\n\t// The `scs` array contains normalized elements.\n\tconst scs = shortestCommonSupersequence(\n\t\txNormalized,\n\t\tyNormalized,\n\t\tareNodesEqual\n\t);\n\tconst xLength = X.length;\n\tconst yLength = Y.length;\n\tconst promises = [];\n\tlet last = X[ xLength - 1 ];\n\tlet xIndex = 0;\n\tlet yIndex = 0;\n\n\tfor ( const scsElement of scs ) {\n\t\t// Actual elements that will end up in the DOM.\n\t\tconst xElement = X[ xIndex ];\n\t\tconst yElement = Y[ yIndex ];\n\t\t// Normalized elements for comparison.\n\t\tconst xNormEl = xNormalized[ xIndex ];\n\t\tconst yNormEl = yNormalized[ yIndex ];\n\t\tif ( xIndex < xLength && areNodesEqual( xNormEl, scsElement ) ) {\n\t\t\tif ( yIndex < yLength && areNodesEqual( yNormEl, scsElement ) ) {\n\t\t\t\tpromises.push( prepareStylePromise( xElement ) );\n\t\t\t\tyIndex++;\n\t\t\t}\n\t\t\txIndex++;\n\t\t} else {\n\t\t\tpromises.push( prepareStylePromise( yElement ) );\n\t\t\tif ( xIndex < xLength ) {\n\t\t\t\txElement.before( yElement );\n\t\t\t} else {\n\t\t\t\tlast.after( yElement );\n\t\t\t\tlast = yElement;\n\t\t\t}\n\t\t\tyIndex++;\n\t\t}\n\t}\n\n\treturn promises;\n}\n\n/**\n * Cache of promises per style elements.\n *\n * Each style element has their own associated `Promise` that resolves\n * once the element has been loaded and is ready.\n */\nconst stylePromiseCache = new WeakMap<\n\tStyleElement,\n\tPromise< StyleElement >\n>();\n\n/**\n * Prepares and returns the corresponding `Promise` for the passed style\n * element.\n *\n * It returns the cached promise if it exists. Otherwise, constructs\n * a `Promise` that resolves once the element has finished loading.\n *\n * For those elements that are not in the DOM yet, this function\n * injects a `media=\"preload\"` attribute to the passed element so the\n * style is loaded without applying any styles to the document.\n *\n * @param element Style element.\n * @return The associated `Promise` to the passed element.\n */\nconst prepareStylePromise = (\n\telement: StyleElement\n): Promise< StyleElement > => {\n\tif ( stylePromiseCache.has( element ) ) {\n\t\treturn stylePromiseCache.get( element );\n\t}\n\n\t// When the element exists in the main document and its media attribute\n\t// is not \"preload\", that means the element comes from the initial page.\n\t// The `media` attribute doesn't need to be handled in this case.\n\tif ( window.document.contains( element ) && element.media !== 'preload' ) {\n\t\tconst promise = Promise.resolve( element );\n\t\tstylePromiseCache.set( element, promise );\n\t\treturn promise;\n\t}\n\n\tif ( element.hasAttribute( 'media' ) && element.media !== 'all' ) {\n\t\telement.dataset.originalMedia = element.media;\n\t}\n\n\telement.media = 'preload';\n\n\tif ( element instanceof HTMLStyleElement ) {\n\t\tconst promise = Promise.resolve( element );\n\t\tstylePromiseCache.set( element, promise );\n\t\treturn promise;\n\t}\n\n\tconst promise = new Promise< HTMLLinkElement >( ( resolve, reject ) => {\n\t\telement.addEventListener( 'load', () => resolve( element ) );\n\t\telement.addEventListener( 'error', ( event ) => {\n\t\t\tconst { href } = event.target as HTMLLinkElement;\n\t\t\treject(\n\t\t\t\tError(\n\t\t\t\t\t`The style sheet with the following URL failed to load: ${ href }`\n\t\t\t\t)\n\t\t\t);\n\t\t} );\n\t} );\n\n\tstylePromiseCache.set( element, promise );\n\treturn promise;\n};\n\n/**\n * Cache of style promise lists per URL.\n *\n * It contains the list of style elements associated to the page with the\n * passed URL. The original order is preserved to respect the CSS cascade.\n *\n * Each included promise resolves when the associated style element is ready.\n */\nconst styleSheetCache = new Map< string, Promise< StyleElement >[] >();\n\n/**\n * Prepares all style elements contained in the passed document.\n *\n * This function calls {@link updateStylesWithSCS|`updateStylesWithSCS`}\n * to insert only the minimum amount of style elements into the DOM, so\n * those present in the passed document end up in the DOM while the order\n * is respected.\n *\n * New appended style elements contain a `media=preload` attribute to\n * make them effectively disabled until they are applied with the\n * {@link applyStyles|`applyStyles`} function.\n *\n * @param doc Document instance.\n * @param url URL for the passed document.\n * @return A list of promises for each style element in the passed document.\n */\nexport const preloadStyles = (\n\tdoc: Document,\n\turl: string\n): Promise< StyleElement >[] => {\n\tif ( ! styleSheetCache.has( url ) ) {\n\t\tconst currentStyleElements = Array.from(\n\t\t\twindow.document.querySelectorAll< StyleElement >(\n\t\t\t\t'style,link[rel=stylesheet]'\n\t\t\t)\n\t\t);\n\t\tconst newStyleElements = Array.from(\n\t\t\tdoc.querySelectorAll< StyleElement >( 'style,link[rel=stylesheet]' )\n\t\t);\n\n\t\t// Set styles in order.\n\t\tconst stylePromises = updateStylesWithSCS(\n\t\t\tcurrentStyleElements,\n\t\t\tnewStyleElements\n\t\t);\n\n\t\tstyleSheetCache.set( url, stylePromises );\n\t}\n\treturn styleSheetCache.get( url );\n};\n\n/**\n * Traverses all style elements in the DOM, enabling only those included\n * in the passed list and disabling the others.\n *\n * If the style element has the `data-original-media` attribute, the\n * original `media` value is restored.\n *\n * @param styles List of style elements to apply.\n */\nexport const applyStyles = ( styles: StyleElement[] ) => {\n\twindow.document\n\t\t.querySelectorAll( 'style,link[rel=stylesheet]' )\n\t\t.forEach( ( el: HTMLLinkElement | HTMLStyleElement ) => {\n\t\t\tif ( el.sheet ) {\n\t\t\t\tif ( styles.includes( el ) ) {\n\t\t\t\t\tconst { originalMedia = 'all' } = el.dataset;\n\t\t\t\t\tel.sheet.media.mediaText = originalMedia;\n\t\t\t\t\tel.sheet.disabled = false;\n\t\t\t\t} else {\n\t\t\t\t\tel.sheet.disabled = true;\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n};\n"],"mappings":"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","ignoreList":[]}

package/build-module/full-page.js

@@ -0,0 +1,39 @@
+/* wp:polyfill */
+// Check if the link is valid for client-side navigation.
+const isValidLink = ref => ref && ref instanceof window.HTMLAnchorElement && ref.href && (!ref.target || ref.target === '_self') && ref.origin === window.location.origin && !ref.pathname.startsWith('/wp-admin') && !ref.pathname.startsWith('/wp-login.php') && !ref.getAttribute('href').startsWith('#') && !new URL(ref.href).searchParams.has('_wpnonce');
+
+// Check if the event is valid for client-side navigation.
+const isValidEvent = event => event && event.button === 0 &&
+// Left clicks only.
+!event.metaKey &&
+// Open in new tab (Mac).
+!event.ctrlKey &&
+// Open in new tab (Windows).
+!event.altKey &&
+// Download.
+!event.shiftKey && !event.defaultPrevented;
+
+// Navigate on click.
+document.addEventListener('click', async event => {
+  const ref = event.target.closest('a');
+  if (isValidLink(ref) && isValidEvent(event)) {
+    event.preventDefault();
+    const {
+      actions
+    } = await import('@wordpress/interactivity-router');
+    actions.navigate(ref.href);
+  }
+});
+// Prefetch on hover.
+document.addEventListener('mouseenter', async event => {
+  if (event.target?.nodeName === 'A') {
+    const ref = event.target.closest('a');
+    if (isValidLink(ref) && isValidEvent(event)) {
+      const {
+        actions
+      } = await import('@wordpress/interactivity-router');
+      actions.prefetch(ref.href);
+    }
+  }
+}, true);
+//# sourceMappingURL=full-page.js.map

package/build-module/full-page.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isValidLink","ref","window","HTMLAnchorElement","href","target","origin","location","pathname","startsWith","getAttribute","URL","searchParams","has","isValidEvent","event","button","metaKey","ctrlKey","altKey","shiftKey","defaultPrevented","document","addEventListener","closest","preventDefault","actions","navigate","nodeName","prefetch"],"sources":["@wordpress/interactivity-router/src/full-page.ts"],"sourcesContent":["// Check if the link is valid for client-side navigation.\nconst isValidLink = ( ref: HTMLAnchorElement ) =>\n\tref &&\n\tref instanceof window.HTMLAnchorElement &&\n\tref.href &&\n\t( ! ref.target || ref.target === '_self' ) &&\n\tref.origin === window.location.origin &&\n\t! ref.pathname.startsWith( '/wp-admin' ) &&\n\t! ref.pathname.startsWith( '/wp-login.php' ) &&\n\t! ref.getAttribute( 'href' ).startsWith( '#' ) &&\n\t! new URL( ref.href ).searchParams.has( '_wpnonce' );\n\n// Check if the event is valid for client-side navigation.\nconst isValidEvent = ( event: MouseEvent ) =>\n\tevent &&\n\tevent.button === 0 && // Left clicks only.\n\t! event.metaKey && // Open in new tab (Mac).\n\t! event.ctrlKey && // Open in new tab (Windows).\n\t! event.altKey && // Download.\n\t! event.shiftKey &&\n\t! event.defaultPrevented;\n\n// Navigate on click.\ndocument.addEventListener( 'click', async ( event ) => {\n\tconst ref = ( event.target as Element ).closest( 'a' );\n\tif ( isValidLink( ref ) && isValidEvent( event ) ) {\n\t\tevent.preventDefault();\n\t\tconst { actions } = await import( '@wordpress/interactivity-router' );\n\t\tactions.navigate( ref.href );\n\t}\n} );\n// Prefetch on hover.\ndocument.addEventListener(\n\t'mouseenter',\n\tasync ( event ) => {\n\t\tif ( ( event.target as Element )?.nodeName === 'A' ) {\n\t\t\tconst ref = ( event.target as Element ).closest( 'a' );\n\t\t\tif ( isValidLink( ref ) && isValidEvent( event ) ) {\n\t\t\t\tconst { actions } = await import(\n\t\t\t\t\t'@wordpress/interactivity-router'\n\t\t\t\t);\n\t\t\t\tactions.prefetch( ref.href );\n\t\t\t}\n\t\t}\n\t},\n\ttrue\n);\n"],"mappings":";AAAA;AACA,MAAMA,WAAW,GAAKC,GAAsB,IAC3CA,GAAG,IACHA,GAAG,YAAYC,MAAM,CAACC,iBAAiB,IACvCF,GAAG,CAACG,IAAI,KACN,CAAEH,GAAG,CAACI,MAAM,IAAIJ,GAAG,CAACI,MAAM,KAAK,OAAO,CAAE,IAC1CJ,GAAG,CAACK,MAAM,KAAKJ,MAAM,CAACK,QAAQ,CAACD,MAAM,IACrC,CAAEL,GAAG,CAACO,QAAQ,CAACC,UAAU,CAAE,WAAY,CAAC,IACxC,CAAER,GAAG,CAACO,QAAQ,CAACC,UAAU,CAAE,eAAgB,CAAC,IAC5C,CAAER,GAAG,CAACS,YAAY,CAAE,MAAO,CAAC,CAACD,UAAU,CAAE,GAAI,CAAC,IAC9C,CAAE,IAAIE,GAAG,CAAEV,GAAG,CAACG,IAAK,CAAC,CAACQ,YAAY,CAACC,GAAG,CAAE,UAAW,CAAC;;AAErD;AACA,MAAMC,YAAY,GAAKC,KAAiB,IACvCA,KAAK,IACLA,KAAK,CAACC,MAAM,KAAK,CAAC;AAAI;AACtB,CAAED,KAAK,CAACE,OAAO;AAAI;AACnB,CAAEF,KAAK,CAACG,OAAO;AAAI;AACnB,CAAEH,KAAK,CAACI,MAAM;AAAI;AAClB,CAAEJ,KAAK,CAACK,QAAQ,IAChB,CAAEL,KAAK,CAACM,gBAAgB;;AAEzB;AACAC,QAAQ,CAACC,gBAAgB,CAAE,OAAO,EAAE,MAAQR,KAAK,IAAM;EACtD,MAAMd,GAAG,GAAKc,KAAK,CAACV,MAAM,CAAcmB,OAAO,CAAE,GAAI,CAAC;EACtD,IAAKxB,WAAW,CAAEC,GAAI,CAAC,IAAIa,YAAY,CAAEC,KAAM,CAAC,EAAG;IAClDA,KAAK,CAACU,cAAc,CAAC,CAAC;IACtB,MAAM;MAAEC;IAAQ,CAAC,GAAG,MAAM,MAAM,CAAE,iCAAkC,CAAC;IACrEA,OAAO,CAACC,QAAQ,CAAE1B,GAAG,CAACG,IAAK,CAAC;EAC7B;AACD,CAAE,CAAC;AACH;AACAkB,QAAQ,CAACC,gBAAgB,CACxB,YAAY,EACZ,MAAQR,KAAK,IAAM;EAClB,IAAOA,KAAK,CAACV,MAAM,EAAeuB,QAAQ,KAAK,GAAG,EAAG;IACpD,MAAM3B,GAAG,GAAKc,KAAK,CAACV,MAAM,CAAcmB,OAAO,CAAE,GAAI,CAAC;IACtD,IAAKxB,WAAW,CAAEC,GAAI,CAAC,IAAIa,YAAY,CAAEC,KAAM,CAAC,EAAG;MAClD,MAAM;QAAEW;MAAQ,CAAC,GAAG,MAAM,MAAM,CAC/B,iCACD,CAAC;MACDA,OAAO,CAACG,QAAQ,CAAE5B,GAAG,CAACG,IAAK,CAAC;IAC7B;EACD;AACD,CAAC,EACD,IACD,CAAC","ignoreList":[]}

package/build-module/index.js

@@ -3,6 +3,12 @@
  * WordPress dependencies
  */
 import { store, privateApis, getConfig } from '@wordpress/interactivity';
+
+/**
+ * Internal dependencies
+ */
+import { preloadStyles, applyStyles } from './assets/styles';
+import { preloadScriptModules, importScriptModules, markScriptModuleAsResolved } from './assets/script-modules';
 const {
   directivePrefix,
   getRegionRootFragment,
@@ -13,10 +19,9 @@ const {
   populateServerData,
   batch
 } = privateApis('I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.');
-// Check if the navigation mode is full page or region based. The only supported
-// mode for now is 'regionBased'.
-const navigationMode = 'regionBased';
-
+const regionAttr = `data-${directivePrefix}-router-region`;
+const interactiveAttr = `data-${directivePrefix}-interactive`;
+const regionsSelector = `[${interactiveAttr}][${regionAttr}]:not([${interactiveAttr}] [${interactiveAttr}])`;
 // The cache of visited and prefetched pages, stylesheets and scripts.
 const pages = new Map();
 
@@ -27,7 +32,40 @@ const getPagePath = url => {
   return u.pathname + u.search;
 };
 
-// Fetch a new page and convert it to a static virtual DOM.
+/**
+ * Parses the given region's directive.
+ *
+ * @param region Region element.
+ * @return Data contained in the region directive value.
+ */
+const parseRegionAttribute = region => {
+  const value = region.getAttribute(regionAttr);
+  try {
+    const {
+      id,
+      attachTo
+    } = JSON.parse(value);
+    return {
+      id,
+      attachTo
+    };
+  } catch (e) {
+    return {
+      id: value
+    };
+  }
+};
+
+/**
+ * Fetches and prepares a page from a given URL.
+ *
+ * @param url          The URL of the page to fetch.
+ * @param options      Options for the fetch operation.
+ * @param options.html Optional HTML content. If provided, the function will use
+ *                     this instead of fetching from the URL.
+ * @return             A Promise that resolves to the prepared page, or false if
+ *                     there was an error during fetching or preparation.
+ */
 const fetchPage = async (url, {
   html
 }) => {
@@ -40,56 +78,115 @@ const fetchPage = async (url, {
       html = await res.text();
     }
     const dom = new window.DOMParser().parseFromString(html, 'text/html');
-    return regionsToVdom(dom);
+    return await preparePage(url, dom);
   } catch (e) {
     return false;
   }
 };
 
-// Return an object with VDOM trees of those HTML regions marked with a
-// `router-region` directive.
-const regionsToVdom = async (dom, {
+/**
+ * Processes a DOM document to extract router regions and related resources.
+ *
+ * This function analyzes the provided DOM document and creates a virtual DOM
+ * representation of all HTML regions marked with a `router-region` directive.
+ * It also extracts and preloads associated styles and scripts to prepare for
+ * rendering the page.
+ *
+ * @param url             The URL associated with the page, used for asset
+ *                        loading and caching.
+ * @param dom             The DOM document to process.
+ * @param vdomParams      Optional parameters for virtual DOM processing.
+ * @param vdomParams.vdom An optional existing virtual DOM cache to check for
+ *                        regions. If a region exists in this cache, it will be
+ *                        reused instead of creating a new vDOM representation.
+ * @return                A Promise that resolves to a {@link Page} object
+ *                        containing the virtual DOM for all router regions,
+ *                        preloaded styles and scripts, page title, and initial
+ *                        server-rendered data.
+ */
+const preparePage = async (url, dom, {
   vdom
 } = {}) => {
-  const regions = {
-    body: undefined
-  };
-  if (navigationMode === 'regionBased') {
-    const attrName = `data-${directivePrefix}-router-region`;
-    dom.querySelectorAll(`[${attrName}]`).forEach(region => {
-      const id = region.getAttribute(attrName);
-      regions[id] = vdom?.has(region) ? vdom.get(region) : toVdom(region);
-    });
-  }
+  const regions = {};
+  const regionsToAttach = {};
+  dom.querySelectorAll(regionsSelector).forEach(region => {
+    const {
+      id,
+      attachTo
+    } = parseRegionAttribute(region);
+    regions[id] = vdom?.has(region) ? vdom.get(region) : toVdom(region);
+    if (attachTo) {
+      regionsToAttach[id] = attachTo;
+    }
+  });
   const title = dom.querySelector('title')?.innerText;
   const initialData = parseServerData(dom);
+
+  // Wait for styles and modules to be ready.
+  const [styles, scriptModules] = await Promise.all([Promise.all(preloadStyles(dom, url)), Promise.all(preloadScriptModules(dom))]);
   return {
     regions,
+    regionsToAttach,
+    styles,
+    scriptModules,
     title,
-    initialData
+    initialData,
+    url
   };
 };
 
-// Render all interactive regions contained in the given page.
-const renderRegions = async page => {
-  if (navigationMode === 'regionBased') {
-    const attrName = `data-${directivePrefix}-router-region`;
-    batch(() => {
-      populateServerData(page.initialData);
-      document.querySelectorAll(`[${attrName}]`).forEach(region => {
-        const id = region.getAttribute(attrName);
-        const fragment = getRegionRootFragment(region);
-        render(page.regions[id], fragment);
-      });
+/**
+ * Renders a page by applying styles, populating server data, rendering regions,
+ * and updating the document title.
+ *
+ * @param page The {@link Page} object to render.
+ */
+const renderPage = page => {
+  applyStyles(page.styles);
+
+  // Clone regionsToAttach.
+  const regionsToAttach = {
+    ...page.regionsToAttach
+  };
+  batch(() => {
+    populateServerData(page.initialData);
+    document.querySelectorAll(regionsSelector).forEach(region => {
+      const {
+        id
+      } = parseRegionAttribute(region);
+      const fragment = getRegionRootFragment(region);
+      render(page.regions[id], fragment);
+      // If this is an attached region, remove it from the list.
+      delete regionsToAttach[id];
     });
-  }
+
+    // Render unattached regions.
+    for (const id in regionsToAttach) {
+      const parent = document.querySelector(regionsToAttach[id]);
+
+      // Get the type from the vnode. If wrapped with Directives, get the
+      // original type from `props.type`.
+      const {
+        props,
+        type
+      } = page.regions[id];
+      const elementType = typeof type === 'function' ? props.type : type;
+
+      // Create an element with the obtained type where the region will be
+      // rendered. The type should match the one of the root vnode.
+      const region = document.createElement(elementType);
+      parent.appendChild(region);
+      const fragment = getRegionRootFragment(region);
+      render(page.regions[id], fragment);
+    }
+  });
   if (page.title) {
     document.title = page.title;
   }
 };
 
 /**
- * Load the given page forcing a full page reload.
+ * Loads the given page forcing a full page reload.
  *
  * The function returns a promise that won't resolve, useful to prevent any
  * potential feedback indicating that the navigation has finished while the new
@@ -109,7 +206,7 @@ window.addEventListener('popstate', async () => {
   const pagePath = getPagePath(window.location.href); // Remove hash.
   const page = pages.has(pagePath) && (await pages.get(pagePath));
   if (page) {
-    await renderRegions(page);
+    renderPage(page);
     // Update the URL in the state.
     state.url = window.location.href;
   } else {
@@ -118,7 +215,10 @@ window.addEventListener('popstate', async () => {
 });
 
 // Initialize the router and cache the initial page using the initial vDOM.
-pages.set(getPagePath(window.location.href), Promise.resolve(regionsToVdom(document, {
+window.document.querySelectorAll('script[type=module][src]').forEach(({
+  src
+}) => markScriptModuleAsResolved(src));
+pages.set(getPagePath(window.location.href), Promise.resolve(preparePage(getPagePath(window.location.href), document, {
   vdom: initialVdom
 })));
 
@@ -207,7 +307,8 @@ export const {
         return;
       }
       if (page && !page.initialData?.config?.['core/router']?.clientNavigationDisabled) {
-        yield renderRegions(page);
+        yield importScriptModules(page.scriptModules);
+        renderPage(page);
         window.history[options.replace ? 'replaceState' : 'pushState']({}, '', href);
 
         // Update the URL in the state.
@@ -244,8 +345,10 @@ export const {
      * @param [options]       Options object.
      * @param [options.force] Force fetching the URL again.
      * @param [options.html]  HTML string to be used instead of fetching the requested URL.
+     *
+     * @return  Promise that resolves once the page has been fetched.
      */
-    prefetch(url, options = {}) {
+    *prefetch(url, options = {}) {
       const {
         clientNavigationDisabled
       } = getConfig();
@@ -258,6 +361,7 @@ export const {
           html: options.html
         }));
       }
+      yield pages.get(pagePath);
     }
   }
 });
@@ -266,7 +370,7 @@ export const {
  * Announces a message to screen readers.
  *
  * This is a wrapper around the `@wordpress/a11y` package's `speak` function. It handles importing
- * the package on demand and should be used instead of calling `ally.speak` direacly.
+ * the package on demand and should be used instead of calling `a11y.speak` directly.
  *
  * @param messageKey The message to be announced by assistive technologies.
  */