@qiankunjs/shared 0.0.1-rc.3 → 0.0.1-rc.5

package/src/assets-transpilers/link.ts

@@ -1,130 +0,0 @@
-/**
- * @author Kuitos
- * @since 2023-04-26
- */
-import type { MatchResult } from '../module-resolver';
-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.REUSED_DEP_IN_SANDBOX; result: { src: string } & MatchResult }
-  | { mode: Mode.NONE; result?: never };
-const preTranspileStyleSheetLink = (
-  link: Partial<Pick<HTMLLinkElement, 'href' | 'rel'>>,
-  baseURI: string,
-  opts: BaseTranspilerOpts,
-): PreTranspileResult => {
-  const { sandbox, moduleResolver } = opts;
-  const { href, rel } = link;
-
-  if (sandbox) {
-    // filter preload links
-    if (href && rel === 'stylesheet') {
-      const linkHref = getEntireUrl(href, baseURI);
-
-      const matchedAssets = moduleResolver?.(linkHref);
-      if (matchedAssets) {
-        return {
-          mode: Mode.REUSED_DEP_IN_SANDBOX,
-          result: { src: linkHref, ...matchedAssets },
-        };
-      }
-    }
-  }
-
-  return {
-    mode: Mode.NONE,
-  };
-};
-
-const postProcessPreloadLink = (link: HTMLLinkElement, baseURI: string, opts: AssetsTranspilerOpts): void => {
-  const { as, href } = link;
-  switch (as) {
-    case 'script': {
-      const { mode, result } = preTranspileScript({ src: href }, baseURI, opts);
-
-      switch (mode) {
-        /**
-         * 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.REUSED_DEP_IN_SANDBOX: {
-          const { url } = result;
-          link.href = createReusingObjectUrl(href, url, 'text/javascript');
-
-          break;
-        }
-      }
-
-      break;
-    }
-
-    case 'style': {
-      const { mode, result } = preTranspileStyleSheetLink({ href, rel: 'stylesheet' }, baseURI, opts);
-
-      switch (mode) {
-        case Mode.REUSED_DEP_IN_SANDBOX: {
-          const { url } = result;
-          link.href = createReusingObjectUrl(href, url, 'text/css');
-          break;
-        }
-      }
-
-      break;
-    }
-
-    default:
-      break;
-  }
-};
-
-export default function transpileLink(
-  link: HTMLLinkElement,
-  baseURI: string,
-  opts: AssetsTranspilerOpts,
-): HTMLLinkElement {
-  const hrefAttribute = link.getAttribute('href');
-  const { mode, result } = preTranspileStyleSheetLink(
-    {
-      href: hrefAttribute || undefined,
-      rel: link.rel,
-    },
-    baseURI,
-    opts,
-  );
-
-  switch (mode) {
-    case Mode.REUSED_DEP_IN_SANDBOX: {
-      const { src, version, url } = result;
-      link.dataset.href = src;
-      link.dataset.version = version;
-      link.href = createReusingObjectUrl(src, url, 'text/css');
-
-      return link;
-    }
-
-    case Mode.NONE:
-    default: {
-      if (hrefAttribute) {
-        link.href = getEntireUrl(hrefAttribute, baseURI);
-
-        if (link.rel === 'preload') {
-          postProcessPreloadLink(link, baseURI, opts);
-        }
-
-        return link;
-      }
-
-      return link;
-    }
-  }
-}

package/src/assets-transpilers/script.ts

@@ -1,175 +0,0 @@
-/**
- * @author Kuitos
- * @since 2023-03-16
- */
-
-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 = [
-    'text/javascript',
-    'module',
-    'application/javascript',
-    'text/ecmascript',
-    'application/ecmascript',
-  ];
-  return !type || handleTypes.indexOf(type) !== -1;
-};
-
-const getCredentials = (crossOrigin: string | null): RequestInit['credentials'] | undefined => {
-  switch (crossOrigin) {
-    case 'anonymous':
-      return 'same-origin';
-    case 'use-credentials':
-      return 'include';
-    default:
-      return undefined;
-  }
-};
-
-type PreTranspileResult =
-  | { 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 = (
-  script: Partial<Pick<HTMLScriptElement, 'src' | 'type' | 'textContent'>>,
-  baseURI: string,
-  opts: AssetsTranspilerOpts,
-): PreTranspileResult => {
-  const { sandbox, moduleResolver } = opts;
-
-  const { src, type } = script;
-
-  if (sandbox) {
-    if (src) {
-      const entireUrl = getEntireUrl(src, baseURI);
-      const matchedScript = moduleResolver?.(entireUrl);
-      if (matchedScript) {
-        return {
-          mode: Mode.REUSED_DEP_IN_SANDBOX,
-          result: { src: entireUrl, ...matchedScript },
-        };
-      }
-
-      return {
-        mode: Mode.REMOTE_ASSETS_IN_SANDBOX,
-        result: { src: entireUrl },
-      };
-    }
-
-    if (isValidJavaScriptType(type)) {
-      const rawNode = opts.rawNode as HTMLScriptElement;
-      const scriptNode = script.textContent ? script : rawNode.childNodes[0];
-
-      const code = scriptNode.textContent;
-      if (code) {
-        return {
-          mode: Mode.INLINE_CODE_IN_SANDBOX,
-          result: {
-            code,
-          },
-        };
-      }
-    }
-  }
-
-  return { mode: Mode.NONE };
-};
-
-export default function transpileScript(
-  script: HTMLScriptElement,
-  baseURI: string,
-  opts: AssetsTranspilerOpts,
-): HTMLScriptElement {
-  // Can't use script.src directly, because it will be resolved to absolute path by browser with Node.baseURI
-  // Such as <script src="./foo.js"></script> will be resolved to http://localhost:8000/foo.js while read script.src
-  const srcAttribute = script.getAttribute('src');
-  const { sandbox, fetch } = opts;
-
-  const { mode, result } = preTranspile(
-    {
-      src: srcAttribute || undefined,
-      type: script.type,
-      textContent: script.textContent,
-    },
-    baseURI,
-    opts,
-  );
-
-  switch (mode) {
-    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
-      script.removeAttribute('src');
-      script.dataset.src = src;
-
-      const syncMode = !script.hasAttribute('async');
-      const priority: Priority = syncMode ? 'high' : 'low';
-      const credentials = getCredentials(script.crossOrigin);
-
-      void fetch(src, { credentials, priority })
-        .then((res) => res.text())
-        .then((code) => {
-          const codeFactory = sandbox!.makeEvaluateFactory(code, src);
-
-          // HTMLScriptElement default fetchPriority is 'auto', we should set it to 'high' to make it execute earlier while it's not async script
-          if (syncMode) {
-            script.fetchPriority = 'high';
-          }
-
-          script.src = URL.createObjectURL(new Blob([codeFactory], { type: 'text/javascript' }));
-        });
-
-      return script;
-    }
-
-    case Mode.INLINE_CODE_IN_SANDBOX: {
-      const rawNode = opts.rawNode as HTMLScriptElement;
-      const scriptNode = script.textContent ? script : rawNode.childNodes[0];
-      const { code } = result;
-
-      scriptNode.textContent = sandbox!.makeEvaluateFactory(code, baseURI);
-      // mark the script have consumed
-      script.dataset.consumed = 'true';
-
-      return script;
-    }
-
-    case Mode.REUSED_DEP_IN_SANDBOX: {
-      const { url, version, src } = result;
-
-      script.dataset.src = src;
-      script.dataset.version = version;
-
-      const syncMode = !script.getAttribute('async');
-      // HTMLScriptElement default fetchPriority is 'auto', we should set it to 'high' to make it execute earlier while it's not async script
-      if (syncMode) {
-        script.fetchPriority = 'high';
-      }
-
-      // When the script hits the dependency reuse logic, the current script is not executed, and an empty script is returned directly
-      script.src = createReusingObjectUrl(src, url, 'text/javascript');
-
-      return script;
-    }
-
-    case Mode.NONE:
-    default: {
-      if (srcAttribute) {
-        script.src = getEntireUrl(srcAttribute, baseURI);
-        return script;
-      }
-
-      return script;
-    }
-  }
-
-  // TODO find entry exports
-}

package/src/assets-transpilers/types.ts

@@ -1,22 +0,0 @@
-/**
- * @author Kuitos
- * @since 2023-08-26
- */
-import type { Sandbox } from '@qiankunjs/sandbox';
-import type { BaseLoaderOpts } from '../common';
-
-import type { MatchResult } from '../module-resolver';
-
-export type BaseTranspilerOpts = BaseLoaderOpts & {
-  moduleResolver?: (url: string) => MatchResult | undefined;
-  sandbox?: Sandbox;
-};
-
-export type AssetsTranspilerOpts = BaseTranspilerOpts & { rawNode: Node };
-
-export enum Mode {
-  REMOTE_ASSETS_IN_SANDBOX = 'RAIS',
-  REUSED_DEP_IN_SANDBOX = 'RDIS',
-  INLINE_CODE_IN_SANDBOX = 'ICIS',
-  NONE = 'NONE',
-}

package/src/assets-transpilers/utils.ts

@@ -1,16 +0,0 @@
-/**
- * @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/common.ts

@@ -1,3 +0,0 @@
-export type BaseLoaderOpts = {
-  fetch: typeof window.fetch;
-};

package/src/error/QiankunError.ts

@@ -1,5 +0,0 @@
-export class QiankunError extends Error {
-  constructor(message: string) {
-    super(`[qiankun]: ${message}`);
-  }
-}

package/src/error/index.ts

@@ -1 +0,0 @@
-export { QiankunError } from './QiankunError';

package/src/index.ts

@@ -1,9 +0,0 @@
-/**
- * @author Kuitos
- * @since 2023-05-06
- */
-export * from './assets-transpilers';
-export * from './utils';
-export * from './module-resolver';
-export * from './common';
-export * from './error';

package/src/module-resolver/__tests__/index.ts

@@ -1,75 +0,0 @@
-import { describe, it } from 'vitest';
-
-import { moduleResolver } from '../index';
-
-describe('default module resolver', () => {
-  const mainAppContainer = document.createElement('div');
-  mainAppContainer.innerHTML = `
-    <script type="dependencymap">
-      {
-        "dependencies": {
-          "moment": {
-            "url": "https://unpkg.com/2.1.1/moment.js",
-            "version": "2.1.1",
-            "range": "^2.0.1"
-          },
-          "lodash": {
-            "url": "https://unpkg.com/4.0.2/lodash.js",
-            "version": "4.0.2",
-            "range": "~4.0.1"
-          },
-          "antd": {
-            "url": "https://unpkg.com/4.0.2/antd",
-            "version": "4.0.2",
-            "range": "~4.0.1"
-          }
-        }
-      }
-    </script>
-  `;
-
-  it('should works well', ({ expect }) => {
-    const microAppContainer = document.createElement('div');
-    microAppContainer.innerHTML = `
-      <script type="dependencymap">
-        {
-          "dependencies": {
-            "moment": {
-              "url": "https://unpkg.com/2.0.1/moment.js",
-              "version": "2.0.1",
-              "range": "^2.0.1"
-            },
-            "lodash": {
-              "url": "https://unpkg.com/4.0.1/lodash.js",
-              "version": "4.0.1",
-              "range": "~4.0.1"
-            },
-            "antd": {
-              "url": "https://unpkg.com/4.0.1/antd",
-              "version": "4.0.1",
-              "range": "4.0.1"
-            }
-          }
-        }
-      </script>
-    `;
-
-    const result1 = moduleResolver('https://unpkg.com/4.0.1/antd', microAppContainer, mainAppContainer);
-    expect(result1).toBeUndefined();
-
-    const result2 = moduleResolver('https://unpkg.com/4.0.1/lodash.js', microAppContainer, mainAppContainer);
-    expect(result2).toStrictEqual({
-      version: '4.0.2',
-      url: 'https://unpkg.com/4.0.2/lodash.js',
-    });
-
-    const result3 = moduleResolver('https://unpkg.com/2.0.1/moment.js', microAppContainer, mainAppContainer);
-    expect(result3).toStrictEqual({
-      version: '2.1.1',
-      url: 'https://unpkg.com/2.1.1/moment.js',
-    });
-
-    const result4 = moduleResolver('https://unpkg.com/4.0.2/antd', microAppContainer, mainAppContainer);
-    expect(result4).toBeUndefined();
-  });
-});

package/src/module-resolver/index.ts

@@ -1,92 +0,0 @@
-import satisfies from 'semver/functions/satisfies';
-import type { MatchResult } from './types';
-
-declare global {
-  interface HTMLElement {
-    __matched_deps__?: string[];
-  }
-}
-
-type Dependency = {
-  url: string;
-  version: string;
-  range: string;
-  peerDeps?: string[];
-};
-
-type NormalizedDependency = {
-  name: string;
-} & Dependency;
-
-type DependencyMap = {
-  dependencies: Record<string, Dependency>;
-};
-
-export type { MatchResult } from './types';
-
-export function moduleResolver(
-  url: string,
-  microAppContainer: HTMLElement,
-  mainAppContainer: HTMLElement,
-): MatchResult | undefined {
-  const dependencyMapSelector = 'script[type=dependencymap]';
-
-  const microAppDependenciesString = microAppContainer.querySelector(dependencyMapSelector)?.innerHTML;
-  if (microAppDependenciesString) {
-    const { dependencies } = JSON.parse(microAppDependenciesString) as DependencyMap;
-    const normalizedDependencies = normalizeDependencies(dependencies);
-    const microAppDependency = normalizedDependencies.find((v) => v.url === url);
-
-    if (microAppDependency) {
-      const mainAppDependencyMapString = mainAppContainer.querySelector(dependencyMapSelector)?.innerHTML;
-
-      if (mainAppDependencyMapString) {
-        const mainAppDependencyMap = JSON.parse(mainAppDependencyMapString) as DependencyMap;
-        const matchedDeps = (microAppContainer.__matched_deps__ ??= []);
-        const matchedDep = findDependency(
-          microAppDependency,
-          normalizeDependencies(mainAppDependencyMap.dependencies),
-          matchedDeps,
-        );
-
-        if (matchedDep) {
-          matchedDeps.push(matchedDep.name);
-          return matchedDep;
-        }
-      }
-    }
-  }
-
-  return undefined;
-}
-
-function findDependency(
-  dependency: NormalizedDependency,
-  mainAppDependencies: NormalizedDependency[],
-  matchedDependencies: string[],
-): MatchResult | undefined {
-  const matched = mainAppDependencies.find(
-    (mainAppDependency) =>
-      mainAppDependency.name === dependency.name &&
-      satisfies(mainAppDependency.version, dependency.range) &&
-      // peer dependencies must be cached before
-      (dependency.peerDeps || []).every((peerDep) => matchedDependencies.indexOf(peerDep) !== -1),
-  );
-
-  if (matched) {
-    return {
-      name: matched.name,
-      version: matched.version,
-      url: matched.url,
-    };
-  }
-
-  return undefined;
-}
-
-function normalizeDependencies(dependencies: DependencyMap['dependencies']): NormalizedDependency[] {
-  return Object.keys(dependencies).map((name) => ({
-    name,
-    ...dependencies[name],
-  }));
-}

package/src/module-resolver/types.ts

@@ -1,9 +0,0 @@
-/**
- * @author Kuitos
- * @since 2023-08-26
- */
-export type MatchResult = {
-  name: string;
-  version: string;
-  url: string;
-};

package/src/typings.d.ts

@@ -1,13 +0,0 @@
-declare module 'semver/functions/satisfies' {
-  export default function satisfies(version: string, range: string): boolean;
-}
-
-type Priority = 'high' | 'low' | 'auto';
-
-interface HTMLScriptElement {
-  fetchPriority?: Priority;
-}
-
-interface RequestInit {
-  priority?: Priority;
-}

package/src/utils.ts

@@ -1,29 +0,0 @@
-/**
- * @author Kuitos
- * @since 2023-04-26
- */
-
-// eslint-disable-next-line @typescript-eslint/unbound-method
-export const { create, defineProperty, getOwnPropertyDescriptor, getOwnPropertyNames, freeze, keys } = Object;
-export const hasOwnProperty = (caller: unknown, p: PropertyKey) => Object.prototype.hasOwnProperty.call(caller, p);
-
-export class Deferred<T> {
-  promise: Promise<T>;
-
-  resolve!: (value: T | PromiseLike<T>) => void;
-
-  reject!: (reason?: unknown) => void;
-
-  constructor() {
-    this.promise = new Promise((resolve, reject) => {
-      this.resolve = resolve;
-      this.reject = reject;
-    });
-  }
-}
-
-export function getEntireUrl(uri: string, baseURI: string): string {
-  const publicPath = new URL(baseURI, window.location.href);
-  const entireUrl = new URL(uri, publicPath.toString());
-  return entireUrl.toString();
-}