chore(props): removal of deprecated connect and context APIs (#4437)

BREAKING CHANGE: this removes the connect and context APIs which have been deprecated since Stencil v1 This means that the following code will no longer work. ```ts @prop({ context: 'config' }) config: Config; @prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl: Lazy<MenuController>; ```
ionic-team · Jun 26, 2023 · 4691e9f · 4691e9f
1 parent 4ff025d
commit 4691e9f
Show file tree

Hide file tree

Showing 25 changed files with 21 additions and 203 deletions.
diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
@@ -12,10 +12,20 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 ## Stencil v4.0.0
 
 - [General](#general)
+  - [Legacy Context and Connect APIs Removed](#legacy-context-and-connect-APIs-removed)
   - [Legacy Browser Support Fields Removed](#legacy-browser-support-fields-removed)
 
 ### General
 
+#### Legacy Context and Connect APIs Removed
+
+Previously Stencil supported `context` and `connect` as options within the `@Prop` decorator. Both of these APIs were deprecated in Stencil v1 and are now removed.
+
+```ts
+@Prop({ context: 'config' }) config: Config;
+@Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl: Lazy<MenuController>;
+```
+
 #### Legacy Browser Support Fields Removed
 
 ##### `__deprecated__cssVarsShim`

diff --git a/STYLE_GUIDE.md b/STYLE_GUIDE.md
@@ -164,14 +164,7 @@ export class Something {
   @State() status = 0;
 
   /**
-   * 4. Internal props (context and connect)
-   * Inlined decorator, alphabetical order.
-   */
-  @Prop({ context: 'config' }) config: Config;
-  @Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl: Lazy<MenuController>;
-
-  /**
-   * 5. Public Property API
+   * 4. Public Property API
    * Inlined decorator, alphabetical order. These are
    * different than "own properties" in that public props
    * are exposed as properties and attributes on the host element.
@@ -196,7 +189,7 @@ export class Something {
   }
 
   /**
-   * 6. Events section
+   * 5. Events section
    * Inlined decorator, alphabetical order.
    * Requires JSDocs for public API documentation.
    */
@@ -205,7 +198,7 @@ export class Something {
   @Event() ionOpen: EventEmitter;
 
   /**
-   * 7. Component lifecycle events
+   * 6. Component lifecycle events
    * Ordered by their natural call order, for example
    * WillLoad should go before DidLoad.
    */
@@ -215,7 +208,7 @@ export class Something {
   disconnectedCallback() {}
 
   /**
-   * 8. Listeners
+   * 7. Listeners
    * It is ok to place them in a different location
    * if makes more sense in the context. Recommend
    * starting a listener method with "on".
@@ -227,7 +220,7 @@ export class Something {
   }
 
   /**
-   * 9. Public methods API
+   * 8. Public methods API
    * These methods are exposed on the host element.
    * Always use two lines.
    * Requires JSDocs for public API documentation.
@@ -243,7 +236,7 @@ export class Something {
   }
 
   /**
-   * 10. Local methods
+   * 9. Local methods
    * Internal business logic. These methods cannot be
    * called from the host element.
    */
@@ -256,7 +249,7 @@ export class Something {
   }
 
   /**
-   * 11. hostData() function
+   * 10. hostData() function
    * Used to dynamically set host element attributes.
    * Should be placed directly above render()
    */
@@ -272,7 +265,7 @@ export class Something {
   }
 
   /**
-   * 12. render() function
+   * 11. render() function
    * Always the last one in the class.
    */
   render() {

diff --git a/src/client/client-context.ts b/src/client/client-context.ts
diff --git a/src/client/index.ts b/src/client/index.ts
@@ -1,5 +1,4 @@
 export * from './client-build';
-export * from './client-context';
 export * from './client-host-ref';
 export * from './client-load-module';
 export * from './client-log';

diff --git a/src/compiler/build/build-stats.ts b/src/compiler/build/build-stats.ts
@@ -157,8 +157,6 @@ function getComponentsFileMap(config: d.Config, buildCtx: d.BuildCtx) {
       excludeFromCollection: component.excludeFromCollection,
       events: component.events,
       internal: component.internal,
-      legacyConnect: component.legacyConnect,
-      legacyContext: component.legacyContext,
       listeners: component.listeners,
       methods: component.methods,
       potentialCmpRefs: component.potentialCmpRefs,

diff --git a/src/compiler/bundle/app-data-plugin.ts b/src/compiler/bundle/app-data-plugin.ts
@@ -6,13 +6,7 @@ import ts from 'typescript';
 
 import type * as d from '../../declarations';
 import { removeCollectionImports } from '../transformers/remove-collection-imports';
-import {
-  APP_DATA_CONDITIONAL,
-  STENCIL_APP_DATA_ID,
-  STENCIL_APP_GLOBALS_ID,
-  STENCIL_CORE_ID,
-  STENCIL_INTERNAL_HYDRATE_ID,
-} from './entry-alias-ids';
+import { APP_DATA_CONDITIONAL, STENCIL_APP_DATA_ID, STENCIL_APP_GLOBALS_ID } from './entry-alias-ids';
 
 export const appDataPlugin = (
   config: d.Config,
@@ -93,7 +87,7 @@ export const appDataPlugin = (
         const program = this.parse(code, {});
         const needsDefault = !(program as any).body.some((s: any) => s.type === 'ExportDefaultDeclaration');
         const defaultExport = needsDefault ? '\nexport const globalFn = () => {};\nexport default globalFn;' : '';
-        code = getContextImport(platform) + code + defaultExport;
+        code = code + defaultExport;
 
         const compilerOptions: ts.CompilerOptions = { ...config.tsCompilerOptions };
         compilerOptions.module = ts.ModuleKind.ESNext;
@@ -205,10 +199,6 @@ const appendNamespace = (config: d.Config, s: MagicString) => {
   s.append(`export const NAMESPACE = '${config.fsNamespace}';\n`);
 };
 
-const getContextImport = (platform: string) => {
-  return `import { Context } from '${platform === 'hydrate' ? STENCIL_INTERNAL_HYDRATE_ID : STENCIL_CORE_ID}';\n`;
-};
-
 interface GlobalScript {
   defaultName: string;
   path: string;

diff --git a/src/compiler/output-targets/dist-hydrate-script/relocate-hydrate-context.ts b/src/compiler/output-targets/dist-hydrate-script/relocate-hydrate-context.ts
@@ -3,12 +3,6 @@ import { getGlobalScriptData } from '../../bundle/app-data-plugin';
 import { HYDRATE_APP_CLOSURE_START } from './hydrate-factory-closure';
 
 export const relocateHydrateContextConst = (config: d.Config, compilerCtx: d.CompilerCtx, code: string) => {
-  // for whatever reason, const Context = {};
-  // is not hoisted to the correct location when bundled,
-  // so manually doing it here
-
-  // /*hydrate context start*/export const Context = {};/*hydrate context end*/
-
   const globalScripts = getGlobalScriptData(config, compilerCtx);
   if (globalScripts.length > 0) {
     const startCode = code.indexOf('/*hydrate context start*/');

diff --git a/src/compiler/transformers/component-lazy/lazy-constructor.ts b/src/compiler/transformers/component-lazy/lazy-constructor.ts
@@ -3,7 +3,6 @@ import ts from 'typescript';
 import type * as d from '../../../declarations';
 import { addCoreRuntimeApi, REGISTER_INSTANCE, RUNTIME_APIS } from '../core-runtime-apis';
 import { addCreateEvents } from '../create-event';
-import { addLegacyProps } from '../legacy-props';
 import { retrieveTsModifiers } from '../transform-utils';
 
 export const updateLazyComponentConstructor = (
@@ -24,7 +23,6 @@ export const updateLazyComponentConstructor = (
       registerInstanceStatement(moduleFile),
       ...addCreateEvents(moduleFile, cmp),
       ...cstrMethod.body.statements,
-      ...addLegacyProps(moduleFile, cmp),
     ]);
 
     classMembers[cstrMethodIndex] = ts.factory.updateConstructorDeclaration(
@@ -38,14 +36,7 @@ export const updateLazyComponentConstructor = (
     const cstrMethod = ts.factory.createConstructorDeclaration(
       undefined,
       cstrMethodArgs,
-      ts.factory.createBlock(
-        [
-          registerInstanceStatement(moduleFile),
-          ...addCreateEvents(moduleFile, cmp),
-          ...addLegacyProps(moduleFile, cmp),
-        ],
-        true
-      )
+      ts.factory.createBlock([registerInstanceStatement(moduleFile), ...addCreateEvents(moduleFile, cmp)], true)
     );
     classMembers.unshift(cstrMethod);
   }

diff --git a/src/compiler/transformers/component-native/native-constructor.ts b/src/compiler/transformers/component-native/native-constructor.ts
@@ -4,7 +4,6 @@ import ts from 'typescript';
 import type * as d from '../../../declarations';
 import { addOutputTargetCoreRuntimeApi, RUNTIME_APIS } from '../core-runtime-apis';
 import { addCreateEvents } from '../create-event';
-import { addLegacyProps } from '../legacy-props';
 import { retrieveTsModifiers } from '../transform-utils';
 
 /**
@@ -40,7 +39,6 @@ export const updateNativeConstructor = (
       ...nativeInit(moduleFile, cmp),
       ...addCreateEvents(moduleFile, cmp),
       ...cstrBodyStatements,
-      ...addLegacyProps(moduleFile, cmp),
     ];
 
     const hasSuper = cstrBodyStatements.some((s) => s.kind === ts.SyntaxKind.SuperKeyword);
@@ -60,7 +58,6 @@ export const updateNativeConstructor = (
       createNativeConstructorSuper(),
       ...nativeInit(moduleFile, cmp),
       ...addCreateEvents(moduleFile, cmp),
-      ...addLegacyProps(moduleFile, cmp),
     ];
 
     const cstrMethod = ts.factory.createConstructorDeclaration(undefined, [], ts.factory.createBlock(statements, true));

diff --git a/src/compiler/transformers/core-runtime-apis.ts b/src/compiler/transformers/core-runtime-apis.ts
@@ -3,8 +3,6 @@ import type * as d from '../../declarations';
 export const ATTACH_SHADOW = '__stencil_attachShadow';
 export const CREATE_EVENT = '__stencil_createEvent';
 export const DEFINE_CUSTOM_ELEMENT = '__stencil_defineCustomElement';
-export const GET_CONNECT = '__stencil_getConnect';
-export const GET_CONTEXT = '__stencil_getContext';
 export const GET_ELEMENT = '__stencil_getElement';
 export const HOST = '__stencil_Host';
 export const HTML_ELEMENT = 'HTMLElement';
@@ -17,8 +15,6 @@ export const RUNTIME_APIS = {
   attachShadow: `attachShadow as ${ATTACH_SHADOW}`,
   createEvent: `createEvent as ${CREATE_EVENT}`,
   defineCustomElement: `defineCustomElement as ${DEFINE_CUSTOM_ELEMENT}`,
-  getConnect: `getConnect as ${GET_CONNECT}`,
-  getContext: `getContext as ${GET_CONTEXT}`,
   getElement: `getElement as ${GET_ELEMENT}`,
   h: `h as ${H}`,
   legacyH: `h`,

diff --git a/src/compiler/transformers/legacy-props.ts b/src/compiler/transformers/legacy-props.ts
diff --git a/src/compiler/transformers/remove-static-meta-properties.ts b/src/compiler/transformers/remove-static-meta-properties.ts
@@ -45,6 +45,4 @@ const REMOVE_STATIC_GETTERS = new Set([
   'styleUrl',
   'watchers',
   'styleUrls',
-  'contextProps',
-  'connectProps',
 ]);
diff --git a/src/compiler/transformers/static-to-meta/component.ts b/src/compiler/transformers/static-to-meta/component.ts
@@ -71,8 +71,6 @@ export const parseStaticComponentMeta = (
     events: parseStaticEvents(staticMembers),
     watchers: parseStaticWatchers(staticMembers),
     styles: parseStaticStyles(compilerCtx, tagName, moduleFile.sourceFilePath, isCollectionDependency, staticMembers),
-    legacyConnect: getStaticValue(staticMembers, 'connectProps') || [],
-    legacyContext: getStaticValue(staticMembers, 'contextProps') || [],
     internal: isInternal(docs),
     assetsDirs: parseAssetsDirs(staticMembers, moduleFile.jsFilePath),
     styleDocs: [],
@@ -145,13 +143,6 @@ export const parseStaticComponentMeta = (
   visitComponentChildNode(cmpNode);
   parseClassMethods(cmpNode, cmp);
 
-  cmp.legacyConnect.forEach(({ connect }) => {
-    cmp.htmlTagNames.push(connect);
-    if (connect.includes('-')) {
-      cmp.potentialCmpRefs.push(connect);
-    }
-  });
-
   cmp.htmlAttrNames = unique(cmp.htmlAttrNames);
   cmp.htmlTagNames = unique(cmp.htmlTagNames);
   cmp.potentialCmpRefs = unique(cmp.potentialCmpRefs);

diff --git a/src/compiler/transformers/test/transpile.ts b/src/compiler/transformers/test/transpile.ts
@@ -134,8 +134,6 @@ export function transpileModule(
   const methods = cmp ? cmp.methods : null;
   const method = methods ? methods[0] : null;
   const elementRef = cmp ? cmp.elementRef : null;
-  const legacyConnect = cmp ? cmp.legacyConnect : null;
-  const legacyContext = cmp ? cmp.legacyContext : null;
 
   return {
     buildCtx,
@@ -148,8 +146,6 @@ export function transpileModule(
     elementRef,
     event,
     events,
-    legacyConnect,
-    legacyContext,
     listener,
     listeners,
     method,

diff --git a/src/compiler/types/tests/ComponentCompilerMeta.stub.ts b/src/compiler/types/tests/ComponentCompilerMeta.stub.ts
@@ -75,8 +75,6 @@ export const stubComponentCompilerMeta = (
   isPlain: false,
   isUpdateable: false,
   jsFilePath: '/some/stubbed/path/my-component.js',
-  legacyConnect: [],
-  legacyContext: [],
   listeners: [],
   methods: [],
   potentialCmpRefs: [],

diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts
@@ -809,25 +809,12 @@ export interface ComponentCompilerMeta extends ComponentCompilerFeatures {
   styles: StyleCompiler[];
   tagName: string;
   internal: boolean;
-  legacyConnect: ComponentCompilerLegacyConnect[];
-  legacyContext: ComponentCompilerLegacyContext[];
-
   dependencies?: string[];
   dependents?: string[];
   directDependencies?: string[];
   directDependents?: string[];
 }
 
-export interface ComponentCompilerLegacyConnect {
-  name: string;
-  connect: string;
-}
-
-export interface ComponentCompilerLegacyContext {
-  name: string;
-  context: string;
-}
-
 export type Encapsulation = 'shadow' | 'scoped' | 'none';
 
 /**
@@ -2285,7 +2272,6 @@ export interface EventInitDict {
 export interface JestEnvironmentGlobal {
   __NEW_TEST_PAGE__: () => Promise<any>;
   __CLOSE_OPEN_PAGES__: () => Promise<any>;
-  Context: any;
   loadTestWindow: (testWindow: any) => Promise<void>;
   h: any;
   resourcesUrl: string;

diff --git a/src/hydrate/platform/index.ts b/src/hydrate/platform/index.ts
@@ -96,8 +96,6 @@ export const consoleDevInfo = (..._: any[]) => {
 
 export const setErrorHandler = (handler: d.ErrorHandler) => (customError = handler);
 
-/*hydrate context start*/ export const Context = {}; /*hydrate context end*/
-
 export const plt: d.PlatformRuntime = {
   $flags$: 0,
   $resourcesUrl$: '',
@@ -171,8 +169,6 @@ export {
   forceUpdate,
   Fragment,
   getAssetPath,
-  getConnect,
-  getContext,
   getElement,
   getMode,
   getRenderingRef,