@vitejs/plugin-legacy 1.8.0 → 2.0.0-alpha.0

package/README.md

@@ -1,8 +1,6 @@
 # @vitejs/plugin-legacy [![npm](https://img.shields.io/npm/v/@vitejs/plugin-legacy.svg)](https://npmjs.com/package/@vitejs/plugin-legacy)
 
-**Note: this plugin requires `vite@^2.0.0`**.
-
-Vite's default browser support baseline is [Native ESM](https://caniuse.com/es6-module). This plugin provides support for legacy browsers that do not support native ESM.
+Vite's default browser support baseline is [Native ESM](https://caniuse.com/es6-module). This plugin provides support for legacy browsers that do not support native ESM when building for production.
 
 By default, this plugin will:
 
@@ -29,22 +27,6 @@ export default {
 }
 ```
 
-When targeting IE11, you also need `regenerator-runtime`:
-
-```js
-// vite.config.js
-import legacy from '@vitejs/plugin-legacy'
-
-export default {
-  plugins: [
-    legacy({
-      targets: ['ie >= 11'],
-      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
-    })
-  ]
-}
-```
-
 ## Options
 
 ### `targets`
@@ -165,7 +147,6 @@ The legacy plugin requires inline scripts for [Safari 10.1 `nomodule` fix](https
 
 - `sha256-MS6/3FCg4WjP9gwgaBGwLpRCY6fZBgwmhVCdrPrNf3E=`
 - `sha256-tQjf8gvb2ROOMapIxFvFAYBeUJ0v1HCbOcSmDNXGtDo=`
-- `sha256-xYj09txJ9OsgySe5ommpqul6FiaJZRrwe3KTD7wbV6w=`
 - `sha256-4m6wOIrq/wFDmi9Xh3mFM2mwI4ik9n3TMgHk6xDtLxk=`
 - `sha256-uS7/g9fhQwNZS1f/MqYqqKv8y9hCu36IfX9XZB5L7YY=`
 

package/dist/index.cjs

@@ -0,0 +1,483 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const path = require('path');
+const crypto = require('crypto');
+const vite = require('vite');
+const MagicString = require('magic-string');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+const path__default = /*#__PURE__*/_interopDefaultLegacy(path);
+const MagicString__default = /*#__PURE__*/_interopDefaultLegacy(MagicString);
+
+let babel;
+async function loadBabel() {
+  if (!babel) {
+    babel = await import('@babel/standalone');
+  }
+  return babel;
+}
+const safari10NoModuleFix = `!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();`;
+const legacyPolyfillId = "vite-legacy-polyfill";
+const legacyEntryId = "vite-legacy-entry";
+const systemJSInlineCode = `System.import(document.getElementById('${legacyEntryId}').getAttribute('data-src'))`;
+const detectDynamicImportVarName = "__vite_is_dynamic_import_support";
+const detectDynamicImportCode = `try{import("_").catch(()=>1);}catch(e){}window.${detectDynamicImportVarName}=true;`;
+const dynamicFallbackInlineCode = `!function(){if(window.${detectDynamicImportVarName})return;console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("${legacyPolyfillId}"),n=document.createElement("script");n.src=e.src,n.onload=function(){${systemJSInlineCode}},document.body.appendChild(n)}();`;
+const forceDynamicImportUsage = `export function __vite_legacy_guard(){import('data:text/javascript,')};`;
+const legacyEnvVarMarker = `__VITE_IS_LEGACY__`;
+function viteLegacyPlugin(options = {}) {
+  let config;
+  const targets = options.targets || "defaults";
+  const genLegacy = options.renderLegacyChunks !== false;
+  const genDynamicFallback = genLegacy;
+  const debugFlags = (process.env.DEBUG || "").split(",");
+  const isDebug = debugFlags.includes("vite:*") || debugFlags.includes("vite:legacy");
+  const facadeToLegacyChunkMap = /* @__PURE__ */ new Map();
+  const facadeToLegacyPolyfillMap = /* @__PURE__ */ new Map();
+  const facadeToModernPolyfillMap = /* @__PURE__ */ new Map();
+  const modernPolyfills = /* @__PURE__ */ new Set();
+  const DEFAULT_LEGACY_POLYFILL = [
+    "core-js/modules/es.promise",
+    "core-js/modules/es.array.iterator"
+  ];
+  const legacyPolyfills = new Set(DEFAULT_LEGACY_POLYFILL);
+  if (Array.isArray(options.modernPolyfills)) {
+    options.modernPolyfills.forEach((i) => {
+      modernPolyfills.add(i.includes("/") ? `core-js/${i}` : `core-js/modules/${i}.js`);
+    });
+  }
+  if (Array.isArray(options.polyfills)) {
+    options.polyfills.forEach((i) => {
+      if (i.startsWith(`regenerator`)) {
+        legacyPolyfills.add(`regenerator-runtime/runtime.js`);
+      } else {
+        legacyPolyfills.add(i.includes("/") ? `core-js/${i}` : `core-js/modules/${i}.js`);
+      }
+    });
+  }
+  if (Array.isArray(options.additionalLegacyPolyfills)) {
+    options.additionalLegacyPolyfills.forEach((i) => {
+      legacyPolyfills.add(i);
+    });
+  }
+  const legacyConfigPlugin = {
+    name: "vite:legacy-config",
+    apply: "build",
+    config(config2) {
+      if (!config2.build) {
+        config2.build = {};
+      }
+      if (!config2.build.cssTarget) {
+        config2.build.cssTarget = "chrome61";
+      }
+    }
+  };
+  const legacyGenerateBundlePlugin = {
+    name: "vite:legacy-generate-polyfill-chunk",
+    apply: "build",
+    async generateBundle(opts, bundle) {
+      if (config.build.ssr) {
+        return;
+      }
+      if (!isLegacyBundle(bundle, opts)) {
+        if (!modernPolyfills.size) {
+          return;
+        }
+        isDebug && console.log(`[@vitejs/plugin-legacy] modern polyfills:`, modernPolyfills);
+        await buildPolyfillChunk("polyfills-modern", modernPolyfills, bundle, facadeToModernPolyfillMap, config.build, options.externalSystemJS);
+        return;
+      }
+      if (!genLegacy) {
+        return;
+      }
+      if (legacyPolyfills.size || genDynamicFallback) {
+        if (!legacyPolyfills.has("es.promise")) {
+          await detectPolyfills(`Promise.resolve()`, targets, legacyPolyfills);
+        }
+        isDebug && console.log(`[@vitejs/plugin-legacy] legacy polyfills:`, legacyPolyfills);
+        await buildPolyfillChunk("polyfills-legacy", legacyPolyfills, bundle, facadeToLegacyPolyfillMap, config.build, options.externalSystemJS);
+      }
+    }
+  };
+  const legacyPostPlugin = {
+    name: "vite:legacy-post-process",
+    enforce: "post",
+    apply: "build",
+    configResolved(_config) {
+      if (_config.build.lib) {
+        throw new Error("@vitejs/plugin-legacy does not support library mode.");
+      }
+      config = _config;
+      if (!genLegacy || config.build.ssr) {
+        return;
+      }
+      const getLegacyOutputFileName = (fileNames, defaultFileName = "[name]-legacy.[hash].js") => {
+        if (!fileNames) {
+          return path__default.posix.join(config.build.assetsDir, defaultFileName);
+        }
+        return (chunkInfo) => {
+          let fileName = typeof fileNames === "function" ? fileNames(chunkInfo) : fileNames;
+          if (fileName.includes("[name]")) {
+            fileName = fileName.replace("[name]", "[name]-legacy");
+          } else {
+            fileName = fileName.replace(/(.+)\.(.+)/, "$1-legacy.$2");
+          }
+          return fileName;
+        };
+      };
+      const createLegacyOutput = (options2 = {}) => {
+        return {
+          ...options2,
+          format: "system",
+          entryFileNames: getLegacyOutputFileName(options2.entryFileNames),
+          chunkFileNames: getLegacyOutputFileName(options2.chunkFileNames)
+        };
+      };
+      const { rollupOptions } = config.build;
+      const { output } = rollupOptions;
+      if (Array.isArray(output)) {
+        rollupOptions.output = [...output.map(createLegacyOutput), ...output];
+      } else {
+        rollupOptions.output = [createLegacyOutput(output), output || {}];
+      }
+    },
+    async renderChunk(raw, chunk, opts) {
+      if (config.build.ssr) {
+        return null;
+      }
+      if (!isLegacyChunk(chunk, opts)) {
+        if (options.modernPolyfills && !Array.isArray(options.modernPolyfills)) {
+          await detectPolyfills(raw, { esmodules: true }, modernPolyfills);
+        }
+        const ms = new MagicString__default(raw);
+        if (genDynamicFallback && chunk.isEntry) {
+          ms.prepend(forceDynamicImportUsage);
+        }
+        if (raw.includes(legacyEnvVarMarker)) {
+          const re = new RegExp(legacyEnvVarMarker, "g");
+          let match;
+          while (match = re.exec(raw)) {
+            ms.overwrite(match.index, match.index + legacyEnvVarMarker.length, `false`);
+          }
+        }
+        if (config.build.sourcemap) {
+          return {
+            code: ms.toString(),
+            map: ms.generateMap({ hires: true })
+          };
+        }
+        return {
+          code: ms.toString()
+        };
+      }
+      if (!genLegacy) {
+        return null;
+      }
+      opts.__vite_skip_esbuild__ = true;
+      opts.__vite_force_terser__ = true;
+      opts.__vite_skip_asset_emit__ = true;
+      const needPolyfills = options.polyfills !== false && !Array.isArray(options.polyfills);
+      const sourceMaps = !!config.build.sourcemap;
+      const babel2 = await loadBabel();
+      const { code, map } = babel2.transform(raw, {
+        babelrc: false,
+        configFile: false,
+        compact: true,
+        sourceMaps,
+        inputSourceMap: sourceMaps ? chunk.map : void 0,
+        presets: [
+          [
+            () => ({
+              plugins: [
+                recordAndRemovePolyfillBabelPlugin(legacyPolyfills),
+                replaceLegacyEnvBabelPlugin(),
+                wrapIIFEBabelPlugin()
+              ]
+            })
+          ],
+          [
+            "env",
+            {
+              targets,
+              modules: false,
+              bugfixes: true,
+              loose: false,
+              useBuiltIns: needPolyfills ? "usage" : false,
+              corejs: needPolyfills ? {
+                version: require("core-js/package.json").version,
+                proposals: false
+              } : void 0,
+              shippedProposals: true,
+              ignoreBrowserslistConfig: options.ignoreBrowserslistConfig
+            }
+          ]
+        ]
+      });
+      if (code)
+        return { code, map };
+      return null;
+    },
+    transformIndexHtml(html, { chunk }) {
+      if (config.build.ssr)
+        return;
+      if (!chunk)
+        return;
+      if (chunk.fileName.includes("-legacy")) {
+        facadeToLegacyChunkMap.set(chunk.facadeModuleId, chunk.fileName);
+        return;
+      }
+      const tags = [];
+      const htmlFilename = chunk.facadeModuleId?.replace(/\?.*$/, "");
+      const modernPolyfillFilename = facadeToModernPolyfillMap.get(chunk.facadeModuleId);
+      if (modernPolyfillFilename) {
+        tags.push({
+          tag: "script",
+          attrs: {
+            type: "module",
+            src: `${config.base}${modernPolyfillFilename}`
+          }
+        });
+      } else if (modernPolyfills.size) {
+        throw new Error(`No corresponding modern polyfill chunk found for ${htmlFilename}`);
+      }
+      if (!genLegacy) {
+        return { html, tags };
+      }
+      tags.push({
+        tag: "script",
+        attrs: { nomodule: true },
+        children: safari10NoModuleFix,
+        injectTo: "body"
+      });
+      const legacyPolyfillFilename = facadeToLegacyPolyfillMap.get(chunk.facadeModuleId);
+      if (legacyPolyfillFilename) {
+        tags.push({
+          tag: "script",
+          attrs: {
+            nomodule: true,
+            id: legacyPolyfillId,
+            src: `${config.base}${legacyPolyfillFilename}`
+          },
+          injectTo: "body"
+        });
+      } else if (legacyPolyfills.size) {
+        throw new Error(`No corresponding legacy polyfill chunk found for ${htmlFilename}`);
+      }
+      const legacyEntryFilename = facadeToLegacyChunkMap.get(chunk.facadeModuleId);
+      if (legacyEntryFilename) {
+        tags.push({
+          tag: "script",
+          attrs: {
+            nomodule: true,
+            id: legacyEntryId,
+            "data-src": config.base + legacyEntryFilename
+          },
+          children: systemJSInlineCode,
+          injectTo: "body"
+        });
+      } else {
+        throw new Error(`No corresponding legacy entry chunk found for ${htmlFilename}`);
+      }
+      if (genDynamicFallback && legacyPolyfillFilename && legacyEntryFilename) {
+        tags.push({
+          tag: "script",
+          attrs: { type: "module" },
+          children: detectDynamicImportCode,
+          injectTo: "head"
+        });
+        tags.push({
+          tag: "script",
+          attrs: { type: "module" },
+          children: dynamicFallbackInlineCode,
+          injectTo: "head"
+        });
+      }
+      return {
+        html,
+        tags
+      };
+    },
+    generateBundle(opts, bundle) {
+      if (config.build.ssr) {
+        return;
+      }
+      if (isLegacyBundle(bundle, opts)) {
+        for (const name in bundle) {
+          if (bundle[name].type === "asset") {
+            delete bundle[name];
+          }
+        }
+      }
+    }
+  };
+  let envInjectionFailed = false;
+  const legacyEnvPlugin = {
+    name: "vite:legacy-env",
+    config(config2, env) {
+      if (env) {
+        return {
+          define: {
+            "import.meta.env.LEGACY": env.command === "serve" || config2.build?.ssr ? false : legacyEnvVarMarker
+          }
+        };
+      } else {
+        envInjectionFailed = true;
+      }
+    },
+    configResolved(config2) {
+      if (envInjectionFailed) {
+        config2.logger.warn(`[@vitejs/plugin-legacy] import.meta.env.LEGACY was not injected due to incompatible vite version (requires vite@^2.0.0-beta.69).`);
+      }
+    }
+  };
+  return [
+    legacyConfigPlugin,
+    legacyGenerateBundlePlugin,
+    legacyPostPlugin,
+    legacyEnvPlugin
+  ];
+}
+async function detectPolyfills(code, targets, list) {
+  const babel2 = await loadBabel();
+  const { ast } = babel2.transform(code, {
+    ast: true,
+    babelrc: false,
+    configFile: false,
+    presets: [
+      [
+        "env",
+        {
+          targets,
+          modules: false,
+          useBuiltIns: "usage",
+          corejs: { version: 3, proposals: false },
+          shippedProposals: true,
+          ignoreBrowserslistConfig: true
+        }
+      ]
+    ]
+  });
+  for (const node of ast.program.body) {
+    if (node.type === "ImportDeclaration") {
+      const source = node.source.value;
+      if (source.startsWith("core-js/") || source.startsWith("regenerator-runtime/")) {
+        list.add(source);
+      }
+    }
+  }
+}
+async function buildPolyfillChunk(name, imports, bundle, facadeToChunkMap, buildOptions, externalSystemJS) {
+  let { minify, assetsDir } = buildOptions;
+  minify = minify ? "terser" : false;
+  const res = await vite.build({
+    root: __dirname,
+    configFile: false,
+    logLevel: "error",
+    plugins: [polyfillsPlugin(imports, externalSystemJS)],
+    build: {
+      write: false,
+      target: false,
+      minify,
+      assetsDir,
+      rollupOptions: {
+        input: {
+          [name]: polyfillId
+        },
+        output: {
+          format: name.includes("legacy") ? "iife" : "es",
+          manualChunks: void 0
+        }
+      }
+    }
+  });
+  const _polyfillChunk = Array.isArray(res) ? res[0] : res;
+  if (!("output" in _polyfillChunk))
+    return;
+  const polyfillChunk = _polyfillChunk.output[0];
+  for (const key in bundle) {
+    const chunk = bundle[key];
+    if (chunk.type === "chunk" && chunk.facadeModuleId) {
+      facadeToChunkMap.set(chunk.facadeModuleId, polyfillChunk.fileName);
+    }
+  }
+  bundle[polyfillChunk.name] = polyfillChunk;
+}
+const polyfillId = "\0vite/legacy-polyfills";
+function polyfillsPlugin(imports, externalSystemJS) {
+  return {
+    name: "vite:legacy-polyfills",
+    resolveId(id) {
+      if (id === polyfillId) {
+        return id;
+      }
+    },
+    load(id) {
+      if (id === polyfillId) {
+        return [...imports].map((i) => `import "${i}";`).join("") + (externalSystemJS ? "" : `import "systemjs/dist/s.min.js";`);
+      }
+    }
+  };
+}
+function isLegacyChunk(chunk, options) {
+  return options.format === "system" && chunk.fileName.includes("-legacy");
+}
+function isLegacyBundle(bundle, options) {
+  if (options.format === "system") {
+    const entryChunk = Object.values(bundle).find((output) => output.type === "chunk" && output.isEntry);
+    return !!entryChunk && entryChunk.fileName.includes("-legacy");
+  }
+  return false;
+}
+function recordAndRemovePolyfillBabelPlugin(polyfills) {
+  return ({ types: t }) => ({
+    name: "vite-remove-polyfill-import",
+    post({ path: path2 }) {
+      path2.get("body").forEach((p) => {
+        if (t.isImportDeclaration(p)) {
+          polyfills.add(p.node.source.value);
+          p.remove();
+        }
+      });
+    }
+  });
+}
+function replaceLegacyEnvBabelPlugin() {
+  return ({ types: t }) => ({
+    name: "vite-replace-env-legacy",
+    visitor: {
+      Identifier(path2) {
+        if (path2.node.name === legacyEnvVarMarker) {
+          path2.replaceWith(t.booleanLiteral(true));
+        }
+      }
+    }
+  });
+}
+function wrapIIFEBabelPlugin() {
+  return ({ types: t, template }) => {
+    const buildIIFE = template(";(function(){%%body%%})();");
+    return {
+      name: "vite-wrap-iife",
+      post({ path: path2 }) {
+        if (!this.isWrapped) {
+          this.isWrapped = true;
+          path2.replaceWith(t.program(buildIIFE({ body: path2.node.body })));
+        }
+      }
+    };
+  };
+}
+const cspHashes = [
+  crypto.createHash("sha256").update(safari10NoModuleFix).digest("base64"),
+  crypto.createHash("sha256").update(systemJSInlineCode).digest("base64"),
+  crypto.createHash("sha256").update(detectDynamicImportCode).digest("base64"),
+  crypto.createHash("sha256").update(dynamicFallbackInlineCode).digest("base64")
+];
+
+module.exports = viteLegacyPlugin;
+module.exports.cspHashes = cspHashes;
+module.exports["default"] = viteLegacyPlugin;
+module.exports.detectPolyfills = detectPolyfills;

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import { Plugin } from 'vite';
+
+interface Options {
+    /**
+     * default: 'defaults'
+     */
+    targets?: string | string[] | {
+        [key: string]: string;
+    };
+    /**
+     * default: false
+     */
+    ignoreBrowserslistConfig?: boolean;
+    /**
+     * default: true
+     */
+    polyfills?: boolean | string[];
+    additionalLegacyPolyfills?: string[];
+    /**
+     * default: false
+     */
+    modernPolyfills?: boolean | string[];
+    /**
+     * default: true
+     */
+    renderLegacyChunks?: boolean;
+    /**
+     * default: false
+     */
+    externalSystemJS?: boolean;
+}
+
+declare function viteLegacyPlugin(options?: Options): Plugin[];
+declare function detectPolyfills(code: string, targets: any, list: Set<string>): Promise<void>;
+declare const cspHashes: string[];
+
+export { cspHashes, viteLegacyPlugin as default, detectPolyfills };