From df75842673c6e5f5ed181d1af8c2763472e93557 Mon Sep 17 00:00:00 2001 From: Tanner Reits <47483144+tanner-reits@users.noreply.github.com> Date: Tue, 30 May 2023 12:20:29 -0400 Subject: [PATCH] chore(compiler): remove dynamicImportShim (#4420) * remove dynamicImportShim * remove `dynamicImportShim` references from some tests * add field removal to breaking changes --- BREAKING_CHANGES.md | 17 +++++ src/app-data/index.ts | 2 - src/client/client-patch-browser.ts | 65 +------------------ src/compiler/app-core/app-data.ts | 2 - src/compiler/bundle/core-resolve-plugin.ts | 8 --- .../config/test/validate-config.spec.ts | 2 - src/compiler/config/validate-config.ts | 2 - .../hydrate-build-conditionals.ts | 2 - .../dist-lazy/generate-esm-browser.ts | 8 +-- src/declarations/stencil-private.ts | 2 - src/declarations/stencil-public-compiler.ts | 9 --- src/testing/reset-build-conditionals.ts | 2 - src/utils/util.ts | 3 - test/jest-spec-runner/stencil.config.ts | 1 - test/karma/stencil.config.ts | 3 +- test/todo-app/stencil.config.ts | 1 - 16 files changed, 22 insertions(+), 107 deletions(-) diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index dff273fe39c..859f7813c40 100644 --- 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 index 2ceae30adea..66f5e48bab0 100644 --- 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 index 1dcabf08aa4..38c3a82b191 100644 --- 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 => { // @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 => { // 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(); - (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 index 102cab5f40e..01d72d0be5e 100644 --- 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 index 2a51cb7b23c..15052608a64 100644 --- 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 index 38dea271ccd..62ebe5d8947 100644 --- 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 index e18f60d3af2..34f8217cdd7 100644 --- 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 index d5485c3c440..8cdd49d457a 100644 --- 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 index 697b2f7aa5c..16c0f7371eb 100644 --- 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 index 56fe5dce13c..32c84db48ca 100644 --- a/src/declarations/stencil-private.ts +++ b/src/declarations/stencil-private.ts @@ -177,8 +177,6 @@ export interface BuildConditionals extends Partial { 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 index a8c74a8c529..e659cf808c9 100644 --- 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 index 1b66137efc9..1f905d15768 100644 --- 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 index 26287336e1e..80b5cb04d5c 100644 --- 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 index 074c27749bb..d3c2970362f 100755 --- 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 index 77b1ab2e012..136b6b4b05c 100644 --- 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 index 884cdbb47e3..763251aacbe 100755 --- 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,