From 59aa512e916006138209ab2b303dfa7c51e6aaf3 Mon Sep 17 00:00:00 2001 From: Tanner Reits <47483144+tanner-reits@users.noreply.github.com> Date: Thu, 1 Jun 2023 19:59:19 -0400 Subject: [PATCH] chore(compiler/runtime): remove shadow dom shim (#4440) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(ci): enable ci for v4 dev (#4433) this commit enables browserstack for the v4 development branch * chore(compiler): remove dynamicImportShim (#4420) * remove dynamicImportShim * remove `dynamicImportShim` references from some tests * add field removal to breaking changes * chore(compiler): remove safari10 extras flag (#4421) * remove safari10 extras flag * remove `safari10` references in some tests * add field removal to breaking changes * chore(compiler/runtime): remove CSS var shim & patchEsm() (#4419) * remove CSS var shim & patchEsm * remove `cssVarShim` references from some tests * remove some errant code * add field removal to breaking changes * fix build error * 🎬 v4.0.0-beta.0 * remove public-facing shadowDomShim option * missed one * update todo comments --------- Co-authored-by: Ryan Waskiewicz --- BREAKING_CHANGES.md | 8 ++++++++ src/app-data/index.ts | 2 +- src/client/client-window.ts | 2 +- src/compiler/app-core/app-data.ts | 4 +--- src/compiler/config/test/validate-config.spec.ts | 2 -- src/compiler/config/validate-config.ts | 2 -- .../dist-hydrate-script/generate-hydrate-app.ts | 2 +- .../hydrate-build-conditionals.ts | 2 +- .../component-hydrate/hydrate-runtime-cmp-meta.ts | 2 +- src/declarations/stencil-private.ts | 2 +- src/declarations/stencil-public-compiler.ts | 12 ------------ src/runtime/bootstrap-custom-element.ts | 2 +- src/runtime/bootstrap-lazy.ts | 2 +- src/runtime/connected-callback.ts | 2 +- src/runtime/dom-extras.ts | 2 +- src/runtime/initialize-component.ts | 2 +- src/runtime/styles.ts | 1 - src/testing/spec-page.ts | 2 +- src/utils/constants.ts | 4 ++-- test/jest-spec-runner/stencil.config.ts | 1 - test/karma/stencil.config.ts | 1 - test/todo-app/stencil.config.ts | 1 - 22 files changed, 23 insertions(+), 37 deletions(-) diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index dd030c64c6e..b199cb295da 100644 --- a/BREAKING_CHANGES.md +++ b/BREAKING_CHANGES.md @@ -36,6 +36,14 @@ for use at runtime. For Stencil v4.0.0 this field and corresponding behavior has If `extras.__deprecated__safari10` is set to `true` the Stencil runtime will patch ES module support for Safari 10. In Stencil v4.0.0 this field and corresponding behavior has been removed. +##### `__deprecated__shadowDomShim` + +If `extras.__deprecated__shadowDomShim` is set to `true` the Stencil runtime will check +whether a shim for [shadow +DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) +is needed in the current browser, and include one if so. For Stencil v4.0.0 +this field and its 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 dfe3d677fe6..120a8100006 100644 --- a/src/app-data/index.ts +++ b/src/app-data/index.ts @@ -65,7 +65,7 @@ export const BUILD: BuildConditionals = { hydratedClass: true, scriptDataOpts: false, scopedSlotTextContentFix: false, - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field shadowDomShim: false, slotChildNodesFix: false, invisiblePrehydration: true, diff --git a/src/client/client-window.ts b/src/client/client-window.ts index baf0309000d..642cb3f9bac 100644 --- a/src/client/client-window.ts +++ b/src/client/client-window.ts @@ -29,7 +29,7 @@ export const setPlatformHelpers = (helpers: { }; export const supportsShadow = - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field BUILD.shadowDomShim && BUILD.shadowDom ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)() : true; diff --git a/src/compiler/app-core/app-data.ts b/src/compiler/app-core/app-data.ts index e0498e30698..17e65aa97b3 100644 --- a/src/compiler/app-core/app-data.ts +++ b/src/compiler/app-core/app-data.ts @@ -152,11 +152,9 @@ export const updateBuildConditionals = (config: Config, b: BuildConditionals) => b.lifecycleDOMEvents = !!(b.isDebug || config._isTesting || config.extras.lifecycleDOMEvents); b.scopedSlotTextContentFix = !!config.extras.scopedSlotTextContentFix; b.scriptDataOpts = config.extras.scriptDataOpts; - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field - b.shadowDomShim = config.extras.__deprecated__shadowDomShim; b.attachStyles = true; b.invisiblePrehydration = typeof config.invisiblePrehydration === 'undefined' ? true : config.invisiblePrehydration; - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field if (b.shadowDomShim) { b.slotRelocation = b.slot; } diff --git a/src/compiler/config/test/validate-config.spec.ts b/src/compiler/config/test/validate-config.spec.ts index 8fb4fd9b35c..59b7eeb5222 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); expect(config.extras.lifecycleDOMEvents).toBe(false); expect(config.extras.scriptDataOpts).toBe(false); - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field - expect(config.extras.__deprecated__shadowDomShim).toBe(false); expect(config.extras.slotChildNodesFix).toBe(false); expect(config.extras.initializeNextTick).toBe(false); expect(config.extras.tagNameTransform).toBe(false); diff --git a/src/compiler/config/validate-config.ts b/src/compiler/config/validate-config.ts index be7aff36f37..2f93f15a89c 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; validatedConfig.extras.lifecycleDOMEvents = !!validatedConfig.extras.lifecycleDOMEvents; validatedConfig.extras.scriptDataOpts = !!validatedConfig.extras.scriptDataOpts; - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field - validatedConfig.extras.__deprecated__shadowDomShim = !!validatedConfig.extras.__deprecated__shadowDomShim; validatedConfig.extras.slotChildNodesFix = !!validatedConfig.extras.slotChildNodesFix; validatedConfig.extras.initializeNextTick = !!validatedConfig.extras.initializeNextTick; validatedConfig.extras.tagNameTransform = !!validatedConfig.extras.tagNameTransform; diff --git a/src/compiler/output-targets/dist-hydrate-script/generate-hydrate-app.ts b/src/compiler/output-targets/dist-hydrate-script/generate-hydrate-app.ts index c7a5292584a..4361b0209a6 100644 --- a/src/compiler/output-targets/dist-hydrate-script/generate-hydrate-app.ts +++ b/src/compiler/output-targets/dist-hydrate-script/generate-hydrate-app.ts @@ -137,7 +137,7 @@ const getHydrateBuildConditionals = (config: d.ValidatedConfig, cmps: d.Componen build.cloneNodeFix = false; build.appendChildSlotFix = false; build.slotChildNodesFix = false; - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field build.shadowDomShim = false; return build; 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 f047f5d6fa3..e324e1500cc 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 @@ -23,7 +23,7 @@ export const getHydrateBuildConditionals = (cmps: d.ComponentCompilerMeta[]) => build.slotChildNodesFix = false; build.cloneNodeFix = false; build.cssAnnotations = true; - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field build.shadowDomShim = true; build.hydratedAttribute = false; build.hydratedClass = true; diff --git a/src/compiler/transformers/component-hydrate/hydrate-runtime-cmp-meta.ts b/src/compiler/transformers/component-hydrate/hydrate-runtime-cmp-meta.ts index 06c542ec99e..9c10684a8d7 100644 --- a/src/compiler/transformers/component-hydrate/hydrate-runtime-cmp-meta.ts +++ b/src/compiler/transformers/component-hydrate/hydrate-runtime-cmp-meta.ts @@ -17,7 +17,7 @@ export const addHydrateRuntimeCmpMeta = (classMembers: ts.ClassElement[], cmp: d }; // We always need shadow-dom shim in hydrate runtime if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) { - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field cmpMeta.$flags$ |= CMP_FLAGS.needsShadowDomShim; } const staticMember = createStaticGetter('cmpMeta', convertValueToLiteral(cmpMeta)); diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts index b7b5dbff12d..354e68982c7 100644 --- a/src/declarations/stencil-private.ts +++ b/src/declarations/stencil-private.ts @@ -179,7 +179,7 @@ export interface BuildConditionals extends Partial { hydratedClass?: boolean; initializeNextTick?: boolean; scriptDataOpts?: boolean; - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field shadowDomShim?: boolean; asyncQueue?: boolean; transformTagName?: boolean; diff --git a/src/declarations/stencil-public-compiler.ts b/src/declarations/stencil-public-compiler.ts index 390d00038cd..e6ce5267849 100644 --- a/src/declarations/stencil-public-compiler.ts +++ b/src/declarations/stencil-public-compiler.ts @@ -314,18 +314,6 @@ export interface ConfigExtras { */ scopedSlotTextContentFix?: boolean; - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field - /** - * If enabled `true`, the runtime will check if the shadow dom shim is required. However, - * if it's determined that shadow dom is already natively supported by the browser then - * it does not request the shim. When set to `false` it will avoid all shadow dom tests. - * Defaults to `false`. - * - * @deprecated Since Stencil v3.0.0. IE 11, Edge <= 18, and old Safari versions - * are no longer supported. - */ - __deprecated__shadowDomShim?: boolean; - /** * When a component is first attached to the DOM, this setting will wait a single tick before * rendering. This works around an Angular issue, where Angular attaches the elements before diff --git a/src/runtime/bootstrap-custom-element.ts b/src/runtime/bootstrap-custom-element.ts index d9a95a9dffb..322b8c71886 100644 --- a/src/runtime/bootstrap-custom-element.ts +++ b/src/runtime/bootstrap-custom-element.ts @@ -32,7 +32,7 @@ export const proxyCustomElement = (Cstr: any, compactMeta: d.ComponentRuntimeMet cmpMeta.$attrsToReflect$ = []; } if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) { - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field cmpMeta.$flags$ |= CMP_FLAGS.needsShadowDomShim; } diff --git a/src/runtime/bootstrap-lazy.ts b/src/runtime/bootstrap-lazy.ts index 4c9a7bb5164..0aa4f820ce6 100644 --- a/src/runtime/bootstrap-lazy.ts +++ b/src/runtime/bootstrap-lazy.ts @@ -72,7 +72,7 @@ export const bootstrapLazy = (lazyBundles: d.LazyBundlesRuntimeData, options: d. cmpMeta.$watchers$ = {}; } if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) { - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field cmpMeta.$flags$ |= CMP_FLAGS.needsShadowDomShim; } const tagName = diff --git a/src/runtime/connected-callback.ts b/src/runtime/connected-callback.ts index 8de7d9d9105..8fa484d90f6 100644 --- a/src/runtime/connected-callback.ts +++ b/src/runtime/connected-callback.ts @@ -47,7 +47,7 @@ export const connectedCallback = (elm: d.HostElement) => { if ( BUILD.hydrateServerSide || ((BUILD.slot || BUILD.shadowDom) && - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field cmpMeta.$flags$ & (CMP_FLAGS.hasSlotRelocation | CMP_FLAGS.needsShadowDomShim)) ) { setContentReference(elm); diff --git a/src/runtime/dom-extras.ts b/src/runtime/dom-extras.ts index 03462efd762..61b82ff27da 100644 --- a/src/runtime/dom-extras.ts +++ b/src/runtime/dom-extras.ts @@ -125,7 +125,7 @@ export const patchChildSlotNodes = (elm: any, cmpMeta: d.ComponentRuntimeMeta) = return this[n]; } } - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field if (cmpMeta.$flags$ & CMP_FLAGS.needsShadowDomShim) { const childNodesFn = elm.__lookupGetter__('childNodes'); diff --git a/src/runtime/initialize-component.ts b/src/runtime/initialize-component.ts index 40181862c47..5a9a0e47603 100644 --- a/src/runtime/initialize-component.ts +++ b/src/runtime/initialize-component.ts @@ -102,7 +102,7 @@ export const initializeComponent = async ( if ( !BUILD.hydrateServerSide && BUILD.shadowDom && - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field BUILD.shadowDomShim && cmpMeta.$flags$ & CMP_FLAGS.needsShadowDomShim ) { diff --git a/src/runtime/styles.ts b/src/runtime/styles.ts index defb7288866..d0471230d0d 100644 --- a/src/runtime/styles.ts +++ b/src/runtime/styles.ts @@ -89,7 +89,6 @@ export const attachStyles = (hostRef: d.HostRef) => { hostRef.$modeName$ ); - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & CMP_FLAGS.needsScopedEncapsulation) { // only required when we're NOT using native shadow dom (slot) // or this browser doesn't support native shadow dom diff --git a/src/testing/spec-page.ts b/src/testing/spec-page.ts index 24d5b6b5ed0..a24aaa59330 100644 --- a/src/testing/spec-page.ts +++ b/src/testing/spec-page.ts @@ -133,7 +133,7 @@ export async function newSpecPage(opts: NewSpecPageOptions): Promise { BUILD.hydrateClientSide = false; } BUILD.cloneNodeFix = false; - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field BUILD.shadowDomShim = false; BUILD.attachStyles = !!opts.attachStyles; diff --git a/src/utils/constants.ts b/src/utils/constants.ts index ae9b4a9da6b..aec9acd8641 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -59,7 +59,7 @@ export const enum CMP_FLAGS { shadowDomEncapsulation = 1 << 0, scopedCssEncapsulation = 1 << 1, hasSlotRelocation = 1 << 2, - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field // Note that when we remove this field we should consider whether we need to // retain a placeholder here, since if we want to have compatability between // different versions of the runtime then we'll need to not shift the values @@ -67,7 +67,7 @@ export const enum CMP_FLAGS { needsShadowDomShim = 1 << 3, shadowDelegatesFocus = 1 << 4, hasMode = 1 << 5, - // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field + // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field needsScopedEncapsulation = scopedCssEncapsulation | needsShadowDomShim, } diff --git a/test/jest-spec-runner/stencil.config.ts b/test/jest-spec-runner/stencil.config.ts index bf387c14643..ba18ee93148 100755 --- a/test/jest-spec-runner/stencil.config.ts +++ b/test/jest-spec-runner/stencil.config.ts @@ -10,6 +10,5 @@ export const config: Config = { hydratedFlag: null, extras: { scriptDataOpts: false, - shadowDomShim: false, }, }; diff --git a/test/karma/stencil.config.ts b/test/karma/stencil.config.ts index b4b4ceb61fe..9bbb4bc478d 100644 --- a/test/karma/stencil.config.ts +++ b/test/karma/stencil.config.ts @@ -34,7 +34,6 @@ export const config: Config = { lifecycleDOMEvents: true, scopedSlotTextContentFix: true, scriptDataOpts: true, - shadowDomShim: true, slotChildNodesFix: true, }, devServer: { diff --git a/test/todo-app/stencil.config.ts b/test/todo-app/stencil.config.ts index 7886f255e5d..7529c0395cf 100755 --- a/test/todo-app/stencil.config.ts +++ b/test/todo-app/stencil.config.ts @@ -12,6 +12,5 @@ export const config: Config = { hydratedFlag: null, extras: { scriptDataOpts: false, - shadowDomShim: false, }, };