@qiankunjs/shared 0.0.1-rc.0 → 0.0.1-rc.2

package/src/assets-transpilers/link.ts

@@ -7,26 +7,28 @@ import { getEntireUrl } from '../utils';
 import { preTranspile as preTranspileScript } from './script';
 import type { AssetsTranspilerOpts, BaseTranspilerOpts } from './types';
 import { Mode } from './types';
+import { createReusingObjectUrl } from './utils';
 
 type PreTranspileResult =
-  | { mode: Mode.CACHE_FROM_SANDBOX; result: { src: string } & MatchResult }
+  | { mode: Mode.REUSED_DEP_IN_SANDBOX; result: { src: string } & MatchResult }
   | { mode: Mode.NONE; result?: never };
-const preTranspile = (
-  link: Partial<Pick<HTMLLinkElement, 'href'>>,
+const preTranspileStyleSheetLink = (
+  link: Partial<Pick<HTMLLinkElement, 'href' | 'rel'>>,
   baseURI: string,
   opts: BaseTranspilerOpts,
 ): PreTranspileResult => {
   const { sandbox, moduleResolver } = opts;
-  const { href } = link;
+  const { href, rel } = link;
 
   if (sandbox) {
-    if (href) {
+    // filter preload links
+    if (href && rel === 'stylesheet') {
       const linkHref = getEntireUrl(href, baseURI);
 
       const matchedAssets = moduleResolver?.(linkHref);
       if (matchedAssets) {
         return {
-          mode: Mode.CACHE_FROM_SANDBOX,
+          mode: Mode.REUSED_DEP_IN_SANDBOX,
           result: { src: linkHref, ...matchedAssets },
         };
       }
@@ -38,39 +40,26 @@ const preTranspile = (
   };
 };
 
-/**
- * While the assets are transpiling in sandbox, it means they will be evaluated with manual fetching,
- * thus we need to set the attribute `as` to fetch instead of script or style to avoid preload cache missing.
- * see https://stackoverflow.com/questions/52635660/can-link-rel-preload-be-made-to-work-with-fetch/63814972#63814972
- */
 const postProcessPreloadLink = (link: HTMLLinkElement, baseURI: string, opts: AssetsTranspilerOpts): void => {
   const { as, href } = link;
-
-  const revokeAfterLoaded = (objectURL: string, link: HTMLLinkElement) => {
-    const revoke = () => URL.revokeObjectURL(objectURL);
-    link.addEventListener('load', revoke, { once: true });
-    link.addEventListener('error', revoke, { once: true });
-  };
-
   switch (as) {
     case 'script': {
       const { mode, result } = preTranspileScript({ src: href }, baseURI, opts);
 
       switch (mode) {
-        case Mode.REMOTE_FROM_SANDBOX: {
+        /**
+         * While the assets are transpiling in sandbox, it means they will be evaluated with manual fetching,
+         * thus we need to set the attribute `as` to fetch instead of script or style to avoid preload cache missing.
+         * see https://stackoverflow.com/questions/52635660/can-link-rel-preload-be-made-to-work-with-fetch/63814972#63814972
+         */
+        case Mode.REMOTE_ASSETS_IN_SANDBOX: {
           link.as = 'fetch';
           break;
         }
 
-        case Mode.CACHE_FROM_SANDBOX: {
+        case Mode.REUSED_DEP_IN_SANDBOX: {
           const { url } = result;
-          const objectURL = URL.createObjectURL(
-            new Blob([`// ${href} is reusing the execution result of ${url}`], {
-              type: 'text/javascript',
-            }),
-          );
-          link.href = objectURL;
-          revokeAfterLoaded(objectURL, link);
+          link.href = createReusingObjectUrl(href, url, 'text/javascript');
 
           break;
         }
@@ -80,18 +69,12 @@ const postProcessPreloadLink = (link: HTMLLinkElement, baseURI: string, opts: As
     }
 
     case 'style': {
-      const { mode, result } = preTranspile({ href }, baseURI, opts);
+      const { mode, result } = preTranspileStyleSheetLink({ href, rel: 'stylesheet' }, baseURI, opts);
 
       switch (mode) {
-        case Mode.CACHE_FROM_SANDBOX: {
+        case Mode.REUSED_DEP_IN_SANDBOX: {
           const { url } = result;
-          const objectURL = URL.createObjectURL(
-            new Blob([`// ${href} is reusing the execution result of ${url}`], {
-              type: 'text/css',
-            }),
-          );
-          link.href = objectURL;
-          revokeAfterLoaded(objectURL, link);
+          link.href = createReusingObjectUrl(href, url, 'text/css');
           break;
         }
       }
@@ -110,24 +93,21 @@ export default function transpileLink(
   opts: AssetsTranspilerOpts,
 ): HTMLLinkElement {
   const hrefAttribute = link.getAttribute('href');
-  const { mode, result } = preTranspile(
+  const { mode, result } = preTranspileStyleSheetLink(
     {
       href: hrefAttribute || undefined,
+      rel: link.rel,
     },
     baseURI,
     opts,
   );
 
   switch (mode) {
-    case Mode.CACHE_FROM_SANDBOX: {
+    case Mode.REUSED_DEP_IN_SANDBOX: {
       const { src, version, url } = result;
       link.dataset.href = src;
       link.dataset.version = version;
-      link.href = URL.createObjectURL(
-        new Blob([`// ${src} is reusing the execution result of ${url}`], {
-          type: 'text/css',
-        }),
-      );
+      link.href = createReusingObjectUrl(src, url, 'text/css');
 
       return link;
     }

package/src/assets-transpilers/script.ts

@@ -7,6 +7,7 @@ import type { MatchResult } from '../module-resolver';
 import { getEntireUrl } from '../utils';
 import type { AssetsTranspilerOpts } from './types';
 import { Mode } from './types';
+import { createReusingObjectUrl } from './utils';
 
 const isValidJavaScriptType = (type?: string): boolean => {
   const handleTypes = [
@@ -31,9 +32,9 @@ const getCredentials = (crossOrigin: string | null): RequestInit['credentials']
 };
 
 type PreTranspileResult =
-  | { mode: Mode.REMOTE_FROM_SANDBOX; result: { src: string } }
-  | { mode: Mode.CACHE_FROM_SANDBOX; result: { src: string } & MatchResult }
-  | { mode: Mode.INLINE_FROM_SANDBOX; result: { code: string } }
+  | { mode: Mode.REMOTE_ASSETS_IN_SANDBOX; result: { src: string } }
+  | { mode: Mode.REUSED_DEP_IN_SANDBOX; result: { src: string } & MatchResult }
+  | { mode: Mode.INLINE_CODE_IN_SANDBOX; result: { code: string } }
   | { mode: Mode.NONE; result?: never };
 
 export const preTranspile = (
@@ -51,13 +52,13 @@ export const preTranspile = (
       const matchedScript = moduleResolver?.(entireUrl);
       if (matchedScript) {
         return {
-          mode: Mode.CACHE_FROM_SANDBOX,
+          mode: Mode.REUSED_DEP_IN_SANDBOX,
           result: { src: entireUrl, ...matchedScript },
         };
       }
 
       return {
-        mode: Mode.REMOTE_FROM_SANDBOX,
+        mode: Mode.REMOTE_ASSETS_IN_SANDBOX,
         result: { src: entireUrl },
       };
     }
@@ -69,7 +70,7 @@ export const preTranspile = (
       const code = scriptNode.textContent;
       if (code) {
         return {
-          mode: Mode.INLINE_FROM_SANDBOX,
+          mode: Mode.INLINE_CODE_IN_SANDBOX,
           result: {
             code,
           },
@@ -102,7 +103,7 @@ export default function transpileScript(
   );
 
   switch (mode) {
-    case Mode.REMOTE_FROM_SANDBOX: {
+    case Mode.REMOTE_ASSETS_IN_SANDBOX: {
       const { src } = result;
 
       // We must remove script src to avoid self execution as we need to fetch the script content and transpile it
@@ -129,7 +130,7 @@ export default function transpileScript(
       return script;
     }
 
-    case Mode.INLINE_FROM_SANDBOX: {
+    case Mode.INLINE_CODE_IN_SANDBOX: {
       const rawNode = opts.rawNode as HTMLScriptElement;
       const scriptNode = script.textContent ? script : rawNode.childNodes[0];
       const { code } = result;
@@ -141,7 +142,7 @@ export default function transpileScript(
       return script;
     }
 
-    case Mode.CACHE_FROM_SANDBOX: {
+    case Mode.REUSED_DEP_IN_SANDBOX: {
       const { url, version, src } = result;
 
       script.dataset.src = src;
@@ -154,11 +155,7 @@ export default function transpileScript(
       }
 
       // When the script hits the dependency reuse logic, the current script is not executed, and an empty script is returned directly
-      script.src = URL.createObjectURL(
-        new Blob([`// ${src} is reusing the execution result of ${url}`], {
-          type: 'text/javascript',
-        }),
-      );
+      script.src = createReusingObjectUrl(src, url, 'text/javascript');
 
       return script;
     }

package/src/assets-transpilers/types.ts

@@ -15,8 +15,8 @@ export type BaseTranspilerOpts = BaseLoaderOpts & {
 export type AssetsTranspilerOpts = BaseTranspilerOpts & { rawNode: Node };
 
 export enum Mode {
-  REMOTE_FROM_SANDBOX = 'REMOTE_FROM_SANDBOX',
-  CACHE_FROM_SANDBOX = 'CACHE_IN_SANDBOX',
-  INLINE_FROM_SANDBOX = 'INLINE_FROM_SANDBOX',
+  REMOTE_ASSETS_IN_SANDBOX = 'RAIS',
+  REUSED_DEP_IN_SANDBOX = 'RDIS',
+  INLINE_CODE_IN_SANDBOX = 'ICIS',
   NONE = 'NONE',
 }

package/src/assets-transpilers/utils.ts

@@ -0,0 +1,16 @@
+/**
+ * @author Kuitos
+ * @since 2023-10-09
+ */
+import { memoize } from 'lodash';
+
+export const createReusingObjectUrl = memoize(
+  (src: string, url: string, type: 'text/javascript' | 'text/css'): string => {
+    return URL.createObjectURL(
+      new Blob([`/* ${src} is reusing the execution result of ${url} */`], {
+        type,
+      }),
+    );
+  },
+  (src, url, type) => `${src}#${url}#${type}`,
+);

package/src/module-resolver/index.ts

@@ -3,7 +3,7 @@ import type { MatchResult } from './types';
 
 declare global {
   interface HTMLElement {
-    __cached_deps__?: string[];
+    __matched_deps__?: string[];
   }
 }
 
@@ -42,15 +42,15 @@ export function moduleResolver(
 
       if (mainAppDependencyMapString) {
         const mainAppDependencyMap = JSON.parse(mainAppDependencyMapString) as DependencyMap;
-        const cachedDeps = (microAppContainer.__cached_deps__ ??= []);
+        const matchedDeps = (microAppContainer.__matched_deps__ ??= []);
         const matchedDep = findDependency(
           microAppDependency,
           normalizeDependencies(mainAppDependencyMap.dependencies),
-          cachedDeps,
+          matchedDeps,
         );
 
         if (matchedDep) {
-          cachedDeps.push(matchedDep.name);
+          matchedDeps.push(matchedDep.name);
           return matchedDep;
         }
       }
@@ -63,14 +63,14 @@ export function moduleResolver(
 function findDependency(
   dependency: NormalizedDependency,
   mainAppDependencies: NormalizedDependency[],
-  cachedDependencies: string[],
+  matchedDependencies: string[],
 ): MatchResult | undefined {
   const matched = mainAppDependencies.find(
-    (cachedDependency) =>
-      cachedDependency.name === dependency.name &&
-      satisfies(cachedDependency.version, dependency.range) &&
+    (mainAppDependency) =>
+      mainAppDependency.name === dependency.name &&
+      satisfies(mainAppDependency.version, dependency.range) &&
       // peer dependencies must be cached before
-      dependency.peerDeps?.every((peerDep) => cachedDependencies.indexOf(peerDep) !== -1),
+      (dependency.peerDeps || []).every((peerDep) => matchedDependencies.indexOf(peerDep) !== -1),
   );
 
   if (matched) {