chore(config): mark extras.safari10 field as deprecated (#3899)

Stencil v3 will deprecate support for Safari 10, so we no longer need to
support this option. This commit marks it as deprecated, as a
preparation for
removing it later.

BREAKING CHANGES: the `safari10` field is now deprecated. Support for
Safari 10 has been dropped.

BREAKING_CHANGES.md

@@ -16,8 +16,9 @@ This is a comprehensive list of the breaking changes introduced in the major ver
     * [`dist-custom-elements` Type Declarations](#dist-custom-elements-type-declarations)
   * [Legacy Browser Support Fields Deprecated](#legacy-browser-support-fields-deprecated)
     * [`dynamicImportShim`](#dynamicimportshim)
-    * [`cssVarShim`](#cssvarshim)
+    * [`cssVarsShim`](#cssvarsshim)
     * [`shadowDomShim`](#shadowdomshim)
+    * [`safari10`](#safari10)
   * [Deprecated `assetsDir` Removed from `@Component()` decorator](#deprecated-assetsdir-removed-from-component-decorator)
   * [Drop Node 12 Support](#drop-node-12-support)
   * [Strongly Typed Inputs](#strongly-typed-inputs)
@@ -100,9 +101,9 @@ export const config: Config = {
 };
 ```
 
-##### `cssVarShim`
+##### `cssVarsShim`
 
-`extras.cssVarShim` causes Stencil to include a polyfill for [CSS
+`extras.cssVarsShim` causes Stencil to include a polyfill for [CSS
 variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). For Stencil
 v3.0.0 this field is renamed to `__deprecated__cssVarsShim`. To retain the
 previous behavior the new option can be set in your project's
@@ -139,6 +140,23 @@ export const config: Config = {
 };
 ```
 
+##### `safari10`
+
+If `extras.safari10` is set to `true` the Stencil runtime will patch ES module
+support for Safari 10. In Stencil v3.0.0 the field is renamed to
+`__deprecated__safari10` to indicate deprecation. To retain the prior behavior
+the new option can be set in your project's `stencil.config.ts`:
+
+```ts
+// stencil.config.ts
+import { Config } from '@stencil/core';
+export const config: Config = {
+  extras: {
+    __deprecated__safari10: true
+  }
+};
+```
+
 #### Deprecated `assetsDir` Removed from `@Component()` decorator
 The `assetsDir` field was [deprecated in Stencil v2.0.0](#componentassetsdir), but some backwards compatibility was retained with a warning message.
 It has been fully removed in Stencil v3.0.0 in favor of `assetsDirs`.

src/app-data/index.ts

@@ -63,6 +63,7 @@ export const BUILD: BuildConditionals = {
   cloneNodeFix: false,
   hydratedAttribute: false,
   hydratedClass: true,
+  // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   safari10: false,
   scriptDataOpts: false,
   scopedSlotTextContentFix: false,

src/client/client-patch-browser.ts

@@ -37,6 +37,7 @@ 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
       ? Array.from(doc.querySelectorAll('script')).find(
           (s) =>
@@ -47,6 +48,7 @@ export const patchBrowser = (): Promise<d.CustomElementsDefineOptions> => {
   const importMeta = import.meta.url;
   const opts = BUILD.scriptDataOpts ? (scriptElm as any)['data-opts'] || {} : {};
 
+  // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
     // Safari < v11 support: This IF is true if it's Safari below v11.
     // This fn cannot use async/await since Safari didn't support it until v11,
@@ -62,9 +64,11 @@ export const patchBrowser = (): Promise<d.CustomElementsDefineOptions> => {
     } as any;
   }
 
+  // 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) {
     opts.resourcesUrl = new URL(
       '.',

src/compiler/app-core/app-data.ts

@@ -152,7 +152,8 @@ export const updateBuildConditionals = (config: Config, b: BuildConditionals) =>
   // 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);
-  b.safari10 = config.extras.safari10;
+  // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
+  b.safari10 = config.extras.__deprecated__safari10;
   b.scopedSlotTextContentFix = !!config.extras.scopedSlotTextContentFix;
   b.scriptDataOpts = config.extras.scriptDataOpts;
   // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field

src/compiler/config/test/validate-config.spec.ts

@@ -359,7 +359,8 @@ describe('validation', () => {
     // TODO(STENCIL-661): Remove code related to the dynamic import shim
     expect(config.extras.__deprecated__dynamicImportShim).toBe(false);
     expect(config.extras.lifecycleDOMEvents).toBe(false);
-    expect(config.extras.safari10).toBe(false);
+    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
+    expect(config.extras.__deprecated__safari10).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);

src/compiler/config/validate-config.ts

@@ -76,7 +76,8 @@ export const validateConfig = (
   // 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;
-  validatedConfig.extras.safari10 = !!validatedConfig.extras.safari10;
+  // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
+  validatedConfig.extras.__deprecated__safari10 = !!validatedConfig.extras.__deprecated__safari10;
   validatedConfig.extras.scriptDataOpts = !!validatedConfig.extras.scriptDataOpts;
   // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
   validatedConfig.extras.__deprecated__shadowDomShim = !!validatedConfig.extras.__deprecated__shadowDomShim;

src/compiler/optimize/optimize-js.ts

@@ -15,7 +15,8 @@ export const optimizeJs = async (inputOpts: OptimizeJsInput) => {
     const prettyOutput = !!inputOpts.pretty;
     const config: Config = {
       extras: {
-        safari10: true,
+        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
+        __deprecated__safari10: true,
       },
     };
     const sourceTarget = inputOpts.target === 'es5' ? 'es5' : 'latest';

src/compiler/optimize/optimize-module.ts

@@ -128,7 +128,8 @@ export const optimizeModule = async (
 export const getTerserOptions = (config: Config, sourceTarget: SourceTarget, prettyOutput: boolean): MinifyOptions => {
   const opts: MinifyOptions = {
     ie8: false,
-    safari10: !!config.extras.safari10,
+    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
+    safari10: !!config.extras.__deprecated__safari10,
     format: {},
     sourceMap: config.sourceMap,
   };

src/compiler/output-targets/dist-hydrate-script/generate-hydrate-app.ts

@@ -136,6 +136,7 @@ const getHydrateBuildConditionals = (config: d.ValidatedConfig, cmps: d.Componen
   build.cloneNodeFix = false;
   build.appendChildSlotFix = false;
   build.slotChildNodesFix = false;
+  // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   build.safari10 = false;
   // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
   build.shadowDomShim = false;

src/compiler/output-targets/dist-hydrate-script/hydrate-build-conditionals.ts

@@ -27,6 +27,7 @@ export const getHydrateBuildConditionals = (cmps: d.ComponentCompilerMeta[]) =>
   build.cssAnnotations = true;
   // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
   build.shadowDomShim = true;
+  // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   build.safari10 = false;
   build.hydratedAttribute = false;
   build.hydratedClass = true;

src/declarations/stencil-private.ts

@@ -181,6 +181,7 @@ export interface BuildConditionals extends Partial<BuildFeatures> {
   hydratedAttribute?: boolean;
   hydratedClass?: boolean;
   initializeNextTick?: boolean;
+  // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   safari10?: boolean;
   scriptDataOpts?: boolean;
   // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field

src/declarations/stencil-public-compiler.ts

@@ -299,13 +299,16 @@ export interface ConfigExtras {
    */
   lifecycleDOMEvents?: boolean;
 
+  // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   /**
    * Safari 10 supports ES modules with `<script type="module">`, however, it did not implement
    * `<script nomodule>`. When set to `true`, the runtime will patch support for Safari 10
    * due to its lack of `nomodule` support.
    * Defaults to `false`.
+   *
+   * @deprecated Since Stencil v3.0.0, Safari 10 is no longer supported.
    */
-  safari10?: boolean;
+  __deprecated__safari10?: boolean;
 
   /**
    * It is possible to assign data to the actual `<script>` element's `data-opts` property,

src/testing/reset-build-conditionals.ts

@@ -41,6 +41,7 @@ export function resetBuildConditionals(b: d.BuildConditionals) {
   // 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;
   b.scriptDataOpts = false;
   b.scopedSlotTextContentFix = false;

src/testing/spec-page.ts

@@ -130,6 +130,7 @@ export async function newSpecPage(opts: NewSpecPageOptions): Promise<SpecPage> {
   BUILD.cloneNodeFix = false;
   // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
   BUILD.shadowDomShim = false;
+  // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   BUILD.safari10 = false;
   BUILD.attachStyles = !!opts.attachStyles;