chore(compiler): remove dynamicImportShim (#4420)

* remove dynamicImportShim * remove `dynamicImportShim` references from some tests * add field removal to breaking changes
ionic-team · May 30, 2023 · 3ee20b7 · 3ee20b7
1 parent 3fa1c49
commit 3ee20b7
Show file tree

Hide file tree

Showing 16 changed files with 22 additions and 107 deletions.
diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
@@ -4,10 +4,27 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 ## Versions
 
+- [Stencil 4.x](#stencil-v400)
 - [Stencil 3.x](#stencil-v300)
 - [Stencil 2.x](#stencil-two)
 - [Stencil 1.x](#stencil-one)
 
+## Stencil v4.0.0
+
+- [General](#general)
+  - [Legacy Browser Support Fields Removed](#legacy-browser-support-fields-removed)
+
+### General
+
+#### Legacy Browser Support Fields Removed
+
+##### `__deprecated__dynamicImportShim`
+
+The `extras.__deprecated__dynamicImportShim` option causes Stencil to include a polyfill for
+the [dynamic `import()`
+function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)
+for use at runtime. For Stencil v4.0.0 this field and corresponding behavior has been removed.
+
 ## Stencil v3.0.0
 
 * [General](#general)

diff --git a/src/app-data/index.ts b/src/app-data/index.ts
@@ -79,8 +79,6 @@ export const BUILD: BuildConditionals = {
   constructableCSS: true,
   cmpShouldUpdate: true,
   devTools: false,
-  // TODO(STENCIL-661): Remove code related to the dynamic import shim
-  dynamicImportShim: false,
   shadowDelegatesFocus: true,
   initializeNextTick: false,
   asyncLoading: false,

diff --git a/src/client/client-patch-browser.ts b/src/client/client-patch-browser.ts
@@ -1,6 +1,5 @@
 import { BUILD, NAMESPACE } from '@app-data';
 import { consoleDevInfo, doc, H, plt, promiseResolve, win } from '@platform';
-import { getDynamicImportFunction, queryNonceMetaTagContent } from '@utils';
 
 import type * as d from '../declarations';
 
@@ -36,9 +35,8 @@ export const patchBrowser = (): Promise<d.CustomElementsDefineOptions> => {
 
   // @ts-ignore
   const scriptElm =
-    // TODO(STENCIL-661): Remove code related to the dynamic import shim
     // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
-    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim
+    BUILD.scriptDataOpts || BUILD.safari10
       ? Array.from(doc.querySelectorAll('script')).find(
           (s) =>
             new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
@@ -67,75 +65,16 @@ export const patchBrowser = (): Promise<d.CustomElementsDefineOptions> => {
   // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   if (!BUILD.safari10 && importMeta !== '') {
     opts.resourcesUrl = new URL('.', importMeta).href;
-    // TODO(STENCIL-661): Remove code related to the dynamic import shim
     // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
-  } else if (BUILD.dynamicImportShim || BUILD.safari10) {
+  } else if (BUILD.safari10) {
     opts.resourcesUrl = new URL(
       '.',
       new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)
     ).href;
-    // TODO(STENCIL-661): Remove code related to the dynamic import shim
-    if (BUILD.dynamicImportShim) {
-      patchDynamicImport(opts.resourcesUrl, scriptElm);
-    }
-
-    // TODO(STENCIL-661): Remove code related to the dynamic import shim
-    if (BUILD.dynamicImportShim && !win.customElements) {
-      // module support, but no custom elements support (Old Edge)
-      // @ts-ignore
-      return import(/* webpackChunkName: "polyfills-dom" */ './polyfills/dom.js').then(() => opts);
-    }
   }
   return promiseResolve(opts);
 };
 
-// TODO(STENCIL-661): Remove code related to the dynamic import shim
-const patchDynamicImport = (base: string, orgScriptElm: HTMLScriptElement) => {
-  const importFunctionName = getDynamicImportFunction(NAMESPACE);
-  try {
-    // test if this browser supports dynamic imports
-    // There is a caching issue in V8, that breaks using import() in Function
-    // By generating a random string, we can workaround it
-    // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
-    (win as any)[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
-  } catch (e) {
-    // this shim is specifically for browsers that do support "esm" imports
-    // however, they do NOT support "dynamic" imports
-    // basically this code is for old Edge, v18 and below
-    const moduleMap = new Map<string, any>();
-    (win as any)[importFunctionName] = (src: string) => {
-      const url = new URL(src, base).href;
-      let mod = moduleMap.get(url);
-      if (!mod) {
-        const script = doc.createElement('script');
-        script.type = 'module';
-        script.crossOrigin = orgScriptElm.crossOrigin;
-        script.src = URL.createObjectURL(
-          new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {
-            type: 'application/javascript',
-          })
-        );
-
-        // Apply CSP nonce to the script tag if it exists
-        const nonce = plt.$nonce$ ?? queryNonceMetaTagContent(doc);
-        if (nonce != null) {
-          script.setAttribute('nonce', nonce);
-        }
-
-        mod = new Promise((resolve) => {
-          script.onload = () => {
-            resolve((win as any)[importFunctionName].m);
-            script.remove();
-          };
-        });
-        moduleMap.set(url, mod);
-        doc.head.appendChild(script);
-      }
-      return mod;
-    };
-  }
-};
-
 const patchCloneNodeFix = (HTMLElementPrototype: any) => {
   const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
 

diff --git a/src/compiler/app-core/app-data.ts b/src/compiler/app-core/app-data.ts
@@ -149,8 +149,6 @@ export const updateBuildConditionals = (config: Config, b: BuildConditionals) =>
   b.appendChildSlotFix = config.extras.appendChildSlotFix;
   b.slotChildNodesFix = config.extras.slotChildNodesFix;
   b.cloneNodeFix = config.extras.cloneNodeFix;
-  // TODO(STENCIL-661): Remove code related to the dynamic import shim
-  b.dynamicImportShim = config.extras.__deprecated__dynamicImportShim;
   b.lifecycleDOMEvents = !!(b.isDebug || config._isTesting || config.extras.lifecycleDOMEvents);
   // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   b.safari10 = config.extras.__deprecated__safari10;

diff --git a/src/compiler/bundle/core-resolve-plugin.ts b/src/compiler/bundle/core-resolve-plugin.ts
@@ -130,14 +130,6 @@ export const Build = {
       }
       return null;
     },
-
-    resolveImportMeta(prop, { format }) {
-      // TODO(STENCIL-661): Remove code related to the dynamic import shim
-      if (config.extras.__deprecated__dynamicImportShim && prop === 'url' && format === 'es') {
-        return '""';
-      }
-      return null;
-    },
   };
 };
 

diff --git a/src/compiler/config/test/validate-config.spec.ts b/src/compiler/config/test/validate-config.spec.ts
@@ -389,8 +389,6 @@ describe('validation', () => {
     expect(config.extras.cloneNodeFix).toBe(false);
     // TODO(STENCIL-659): Remove code implementing the CSS variable shim
     expect(config.extras.__deprecated__cssVarsShim).toBe(false);
-    // TODO(STENCIL-661): Remove code related to the dynamic import shim
-    expect(config.extras.__deprecated__dynamicImportShim).toBe(false);
     expect(config.extras.lifecycleDOMEvents).toBe(false);
     // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     expect(config.extras.__deprecated__safari10).toBe(false);

diff --git a/src/compiler/config/validate-config.ts b/src/compiler/config/validate-config.ts
@@ -106,8 +106,6 @@ export const validateConfig = (
   validatedConfig.extras.cloneNodeFix = !!validatedConfig.extras.cloneNodeFix;
   // TODO(STENCIL-659): Remove code implementing the CSS variable shim
   validatedConfig.extras.__deprecated__cssVarsShim = !!validatedConfig.extras.__deprecated__cssVarsShim;
-  // TODO(STENCIL-661): Remove code related to the dynamic import shim
-  validatedConfig.extras.__deprecated__dynamicImportShim = !!validatedConfig.extras.__deprecated__dynamicImportShim;
   validatedConfig.extras.lifecycleDOMEvents = !!validatedConfig.extras.lifecycleDOMEvents;
   // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   validatedConfig.extras.__deprecated__safari10 = !!validatedConfig.extras.__deprecated__safari10;

diff --git a/src/compiler/output-targets/dist-hydrate-script/hydrate-build-conditionals.ts b/src/compiler/output-targets/dist-hydrate-script/hydrate-build-conditionals.ts
@@ -32,8 +32,6 @@ export const getHydrateBuildConditionals = (cmps: d.ComponentCompilerMeta[]) =>
   build.hydratedAttribute = false;
   build.hydratedClass = true;
   build.scriptDataOpts = false;
-  // TODO(STENCIL-661): Remove code related to the dynamic import shim
-  build.dynamicImportShim = false;
   build.attachStyles = true;
 
   return build;

diff --git a/src/compiler/output-targets/dist-lazy/generate-esm-browser.ts b/src/compiler/output-targets/dist-lazy/generate-esm-browser.ts
@@ -1,4 +1,4 @@
-import { generatePreamble, getDynamicImportFunction } from '@utils';
+import { generatePreamble } from '@utils';
 import type { OutputOptions, RollupBuild } from 'rollup';
 
 import type * as d from '../../../declarations';
@@ -24,11 +24,7 @@ export const generateEsmBrowser = async (
       preferConst: true,
       sourcemap: config.sourceMap,
     };
-    // TODO(STENCIL-661): Remove code related to the dynamic import shim
-    if (config.extras.__deprecated__dynamicImportShim) {
-      // for Edge 16-18
-      esmOpts.dynamicImportFunction = getDynamicImportFunction(config.fsNamespace);
-    }
+
     const output = await generateRollupOutput(rollupBuild, esmOpts, config, buildCtx.entryModules);
 
     if (output != null) {

diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts
@@ -177,8 +177,6 @@ export interface BuildConditionals extends Partial<BuildFeatures> {
   slotChildNodesFix?: boolean;
   scopedSlotTextContentFix?: boolean;
   cloneNodeFix?: boolean;
-  // TODO(STENCIL-661): Remove code related to the dynamic import shim
-  dynamicImportShim?: boolean;
   hydratedAttribute?: boolean;
   hydratedClass?: boolean;
   initializeNextTick?: boolean;

diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts
@@ -288,15 +288,6 @@ export interface ConfigExtras {
    */
   __deprecated__cssVarsShim?: boolean;
 
-  // TODO(STENCIL-661): Remove code related to the dynamic import shim
-  /**
-   * Dynamic `import()` shim. This is only needed for Edge 18 and below, and
-   * Firefox 67 and below. Defaults to `false`.
-   * @deprecated Since Stencil v3.0.0. IE 11, Edge <= 18, and old Safari
-   * versions are no longer supported.
-   */
-  __deprecated__dynamicImportShim?: boolean;
-
   /**
    * Experimental flag. Projects that use a Stencil library built using the `dist` output target may have trouble lazily
    * loading components when using a bundler such as Vite or Parcel. Setting this flag to `true` will change how Stencil

diff --git a/src/testing/reset-build-conditionals.ts b/src/testing/reset-build-conditionals.ts
@@ -48,8 +48,6 @@ export function resetBuildConditionals(b: d.BuildConditionals) {
   b.invisiblePrehydration = true;
   b.appendChildSlotFix = false;
   b.cloneNodeFix = false;
-  // TODO(STENCIL-661): Remove code related to the dynamic import shim
-  b.dynamicImportShim = false;
   b.hotModuleReplacement = false;
   // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   b.safari10 = false;

diff --git a/src/utils/util.ts b/src/utils/util.ts
@@ -155,9 +155,6 @@ export const hasDependency = (buildCtx: d.BuildCtx, depName: string): boolean =>
   return getDependencies(buildCtx).includes(depName);
 };
 
-// TODO(STENCIL-661): Remove code related to the dynamic import shim
-export const getDynamicImportFunction = (namespace: string) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
-
 export const readPackageJson = async (config: d.ValidatedConfig, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx) => {
   try {
     const pkgJson = await compilerCtx.fs.readFile(config.packageJsonFilePath);

diff --git a/test/jest-spec-runner/stencil.config.ts b/test/jest-spec-runner/stencil.config.ts
@@ -10,7 +10,6 @@ export const config: Config = {
   hydratedFlag: null,
   extras: {
     cssVarsShim: false,
-    dynamicImportShim: false,
     safari10: false,
     scriptDataOpts: false,
     shadowDomShim: false,

diff --git a/test/karma/stencil.config.ts b/test/karma/stencil.config.ts
@@ -1,5 +1,5 @@
-import nodePolyfills from 'rollup-plugin-node-polyfills';
 import { sass } from '@stencil/sass';
+import nodePolyfills from 'rollup-plugin-node-polyfills';
 
 const { CUSTOM_ELEMENTS_OUT_DIR, DIST_OUT_DIR, TEST_OUTPUT_DIR, WWW_OUT_DIR } = require('./constants');
 import { Config } from '../../internal';
@@ -32,7 +32,6 @@ export const config: Config = {
     appendChildSlotFix: true,
     cloneNodeFix: true,
     cssVarsShim: true,
-    dynamicImportShim: true,
     lifecycleDOMEvents: true,
     safari10: true,
     scopedSlotTextContentFix: true,

diff --git a/test/todo-app/stencil.config.ts b/test/todo-app/stencil.config.ts
@@ -12,7 +12,6 @@ export const config: Config = {
   hydratedFlag: null,
   extras: {
     cssVarsShim: false,
-    dynamicImportShim: false,
     safari10: false,
     scriptDataOpts: false,
     shadowDomShim: false,