From 9b6ca840bd73c52efebaf6217fbec1368baf4269 Mon Sep 17 00:00:00 2001 From: Ryan Waskiewicz Date: Thu, 29 Jun 2023 12:00:37 -0400 Subject: [PATCH 1/2] fix(compiler): sourcemap generation for non-external runtime this commit fixes a bug where projects using the `dist-custom-elements` output target with `externalRuntime: false` would receive the following error when building their project: ``` [ WARN ] Bundling Warning SOURCEMAP_ERROR Error when using sourcemap for reporting an error: Can't resolve original location of error. ``` the cause of this error was attempting to import a function, `attachShadow` that is no longer exported from the runtime bundle (as of https://github.com/ionic-team/stencil/pull/3117). to date, this has not had an effect on stencil (as the import gets treeshaken away). however, when trying to generate sourcemaps for a project using this configuration would cause a mismatch between what was expected to be in the produced output (the import statement) and what was really there (no import statement) --- .../component-native/native-constructor.ts | 19 +++++-------------- .../test/native-constructor.spec.ts | 4 ++-- .../karma.spec.ts | 6 ++---- 3 files changed, 9 insertions(+), 20 deletions(-) diff --git a/src/compiler/transformers/component-native/native-constructor.ts b/src/compiler/transformers/component-native/native-constructor.ts index 49f64c8f49a..69211626ed9 100644 --- a/src/compiler/transformers/component-native/native-constructor.ts +++ b/src/compiler/transformers/component-native/native-constructor.ts @@ -1,8 +1,6 @@ -import { DIST_CUSTOM_ELEMENTS } from '@utils'; import ts from 'typescript'; import type * as d from '../../../declarations'; -import { addOutputTargetCoreRuntimeApi, RUNTIME_APIS } from '../core-runtime-apis'; import { addCreateEvents } from '../create-event'; import { retrieveTsModifiers } from '../transform-utils'; @@ -35,11 +33,7 @@ export const updateNativeConstructor = ( // a constructor may not have a body (e.g. in the case of constructor overloads) const cstrBodyStatements: ts.NodeArray = cstrMethod.body?.statements ?? ts.factory.createNodeArray(); - let statements: ts.Statement[] = [ - ...nativeInit(moduleFile, cmp), - ...addCreateEvents(moduleFile, cmp), - ...cstrBodyStatements, - ]; + let statements: ts.Statement[] = [...nativeInit(cmp), ...addCreateEvents(moduleFile, cmp), ...cstrBodyStatements]; const hasSuper = cstrBodyStatements.some((s) => s.kind === ts.SyntaxKind.SuperKeyword); if (!hasSuper) { @@ -56,7 +50,7 @@ export const updateNativeConstructor = ( // create a constructor() const statements: ts.Statement[] = [ createNativeConstructorSuper(), - ...nativeInit(moduleFile, cmp), + ...nativeInit(cmp), ...addCreateEvents(moduleFile, cmp), ]; @@ -67,14 +61,13 @@ export const updateNativeConstructor = ( /** * Generates a series of expression statements used to help initialize a Stencil component - * @param moduleFile the Stencil module that will be instantiated * @param cmp the component's metadata * @returns the generated expression statements */ -const nativeInit = (moduleFile: d.Module, cmp: d.ComponentCompilerMeta): ReadonlyArray => { +const nativeInit = (cmp: d.ComponentCompilerMeta): ReadonlyArray => { const initStatements = [nativeRegisterHostStatement()]; if (cmp.encapsulation === 'shadow') { - initStatements.push(nativeAttachShadowStatement(moduleFile)); + initStatements.push(nativeAttachShadowStatement()); } return initStatements; }; @@ -97,11 +90,9 @@ const nativeRegisterHostStatement = (): ts.ExpressionStatement => { /** * Generates an expression statement for attaching a shadow DOM tree to an element. - * @param moduleFile the Stencil module that will use the generated expression statement * @returns the generated expression statement */ -const nativeAttachShadowStatement = (moduleFile: d.Module): ts.ExpressionStatement => { - addOutputTargetCoreRuntimeApi(moduleFile, DIST_CUSTOM_ELEMENTS, RUNTIME_APIS.attachShadow); +const nativeAttachShadowStatement = (): ts.ExpressionStatement => { // Create an expression statement, `this.__attachShadow();` return ts.factory.createExpressionStatement( ts.factory.createCallExpression( diff --git a/src/compiler/transformers/test/native-constructor.spec.ts b/src/compiler/transformers/test/native-constructor.spec.ts index c898dbeb10e..4b689d9bd82 100644 --- a/src/compiler/transformers/test/native-constructor.spec.ts +++ b/src/compiler/transformers/test/native-constructor.spec.ts @@ -38,7 +38,7 @@ describe('nativeComponentTransform', () => { const transpiledModule = transpileModule(code, null, compilerCtx, [], [transformer]); expect(transpiledModule.outputText).toContain( - `import { defineCustomElement as __stencil_defineCustomElement, HTMLElement, attachShadow as __stencil_attachShadow } from "@stencil/core";` + `import { defineCustomElement as __stencil_defineCustomElement, HTMLElement } from "@stencil/core";` ); expect(transpiledModule.outputText).toContain(`this.__attachShadow()`); }); @@ -63,7 +63,7 @@ describe('nativeComponentTransform', () => { const transpiledModule = transpileModule(code, null, compilerCtx, [], [transformer]); expect(transpiledModule.outputText).toContain( - `import { defineCustomElement as __stencil_defineCustomElement, HTMLElement, attachShadow as __stencil_attachShadow } from "@stencil/core";` + `import { defineCustomElement as __stencil_defineCustomElement, HTMLElement } from "@stencil/core";` ); expect(transpiledModule.outputText).toContain(`this.__attachShadow()`); }); diff --git a/test/karma/test-app/custom-elements-delegates-focus/karma.spec.ts b/test/karma/test-app/custom-elements-delegates-focus/karma.spec.ts index 060d65bef84..779c70505f6 100644 --- a/test/karma/test-app/custom-elements-delegates-focus/karma.spec.ts +++ b/test/karma/test-app/custom-elements-delegates-focus/karma.spec.ts @@ -15,8 +15,7 @@ describe('custom-elements-delegates-focus', () => { const elm: Element = app.querySelector('custom-elements-delegates-focus'); expect(elm.shadowRoot).toBeDefined(); - // as of TypeScript 4.3, `delegatesFocus` does not exist on the `shadowRoot` object - expect((elm.shadowRoot as any).delegatesFocus).toBe(true); + expect(elm.shadowRoot.delegatesFocus).toBe(true); }); it('does not set delegatesFocus when shadow is set to "true"', async () => { @@ -25,7 +24,6 @@ describe('custom-elements-delegates-focus', () => { const elm: Element = app.querySelector('custom-elements-no-delegates-focus'); expect(elm.shadowRoot).toBeDefined(); - // as of TypeScript 4.3, `delegatesFocus` does not exist on the `shadowRoot` object - expect((elm.shadowRoot as any).delegatesFocus).toBe(false); + expect(elm.shadowRoot.delegatesFocus).toBe(false); }); }); From bea1aeb2725dc2f68391ff8499632d36c831ddf5 Mon Sep 17 00:00:00 2001 From: Ryan Waskiewicz Date: Thu, 29 Jun 2023 12:07:46 -0400 Subject: [PATCH 2/2] refactor(compiler): remove unused ATTACH_SHADOW API this commit removes the RUNTIME_APIS.ATTACH_SHADOW field that is no longer used in the codebase. it's only usage was in tests for adding runtime apis, and has been replaced with another field from `RUNTIME_APIS` --- .../transformers/core-runtime-apis.ts | 2 -- .../test/core-runtime-apis.spec.ts | 28 +++++++++---------- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/src/compiler/transformers/core-runtime-apis.ts b/src/compiler/transformers/core-runtime-apis.ts index 5ba0ec6f4ba..faab64d5247 100644 --- a/src/compiler/transformers/core-runtime-apis.ts +++ b/src/compiler/transformers/core-runtime-apis.ts @@ -1,6 +1,5 @@ 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_ELEMENT = '__stencil_getElement'; @@ -12,7 +11,6 @@ export const REGISTER_HOST = '__stencil_registerHost'; export const H = '__stencil_h'; export const RUNTIME_APIS = { - attachShadow: `attachShadow as ${ATTACH_SHADOW}`, createEvent: `createEvent as ${CREATE_EVENT}`, defineCustomElement: `defineCustomElement as ${DEFINE_CUSTOM_ELEMENT}`, getElement: `getElement as ${GET_ELEMENT}`, diff --git a/src/compiler/transformers/test/core-runtime-apis.spec.ts b/src/compiler/transformers/test/core-runtime-apis.spec.ts index 1a46582ba09..eb098fee806 100644 --- a/src/compiler/transformers/test/core-runtime-apis.spec.ts +++ b/src/compiler/transformers/test/core-runtime-apis.spec.ts @@ -21,23 +21,23 @@ describe('addCoreRuntimeApi()', () => { expect(mockModule.coreRuntimeApis).toBeDefined(); expect(mockModule.coreRuntimeApis).toHaveLength(0); - addCoreRuntimeApi(mockModule, RUNTIME_APIS.attachShadow); - expect(mockModule.coreRuntimeApis).toEqual([RUNTIME_APIS.attachShadow]); + addCoreRuntimeApi(mockModule, RUNTIME_APIS.Host); + expect(mockModule.coreRuntimeApis).toEqual([RUNTIME_APIS.Host]); addCoreRuntimeApi(mockModule, RUNTIME_APIS.createEvent); - expect(mockModule.coreRuntimeApis).toEqual([RUNTIME_APIS.attachShadow, RUNTIME_APIS.createEvent]); + expect(mockModule.coreRuntimeApis).toEqual([RUNTIME_APIS.Host, RUNTIME_APIS.createEvent]); }); it("does not allow duplicate entries in a module's coreRuntimeApis", () => { expect(mockModule.coreRuntimeApis).toBeDefined(); expect(mockModule.coreRuntimeApis).toHaveLength(0); - addCoreRuntimeApi(mockModule, RUNTIME_APIS.attachShadow); - expect(mockModule.coreRuntimeApis).toEqual([RUNTIME_APIS.attachShadow]); + addCoreRuntimeApi(mockModule, RUNTIME_APIS.Host); + expect(mockModule.coreRuntimeApis).toEqual([RUNTIME_APIS.Host]); // attempt to add the api again, doing so shall not create a duplicate entry - addCoreRuntimeApi(mockModule, RUNTIME_APIS.attachShadow); - expect(mockModule.coreRuntimeApis).toEqual([RUNTIME_APIS.attachShadow]); + addCoreRuntimeApi(mockModule, RUNTIME_APIS.Host); + expect(mockModule.coreRuntimeApis).toEqual([RUNTIME_APIS.Host]); }); }); @@ -57,12 +57,12 @@ describe('addOutputTargetCoreRuntimeApi()', () => { expect(mockModule.outputTargetCoreRuntimeApis).toBeDefined(); expect(Object.entries(mockModule.outputTargetCoreRuntimeApis)).toHaveLength(0); - addOutputTargetCoreRuntimeApi(mockModule, DIST_CUSTOM_ELEMENTS, RUNTIME_APIS.attachShadow); - expect(mockModule.outputTargetCoreRuntimeApis).toEqual({ [DIST_CUSTOM_ELEMENTS]: [RUNTIME_APIS.attachShadow] }); + addOutputTargetCoreRuntimeApi(mockModule, DIST_CUSTOM_ELEMENTS, RUNTIME_APIS.Host); + expect(mockModule.outputTargetCoreRuntimeApis).toEqual({ [DIST_CUSTOM_ELEMENTS]: [RUNTIME_APIS.Host] }); addOutputTargetCoreRuntimeApi(mockModule, DIST_CUSTOM_ELEMENTS, RUNTIME_APIS.createEvent); expect(mockModule.outputTargetCoreRuntimeApis).toEqual({ - [DIST_CUSTOM_ELEMENTS]: [RUNTIME_APIS.attachShadow, RUNTIME_APIS.createEvent], + [DIST_CUSTOM_ELEMENTS]: [RUNTIME_APIS.Host, RUNTIME_APIS.createEvent], }); }); @@ -70,12 +70,12 @@ describe('addOutputTargetCoreRuntimeApi()', () => { expect(mockModule.outputTargetCoreRuntimeApis).toBeDefined(); expect(Object.entries(mockModule.outputTargetCoreRuntimeApis)).toHaveLength(0); - addOutputTargetCoreRuntimeApi(mockModule, DIST_CUSTOM_ELEMENTS, RUNTIME_APIS.attachShadow); - expect(mockModule.outputTargetCoreRuntimeApis).toEqual({ [DIST_CUSTOM_ELEMENTS]: [RUNTIME_APIS.attachShadow] }); + addOutputTargetCoreRuntimeApi(mockModule, DIST_CUSTOM_ELEMENTS, RUNTIME_APIS.Host); + expect(mockModule.outputTargetCoreRuntimeApis).toEqual({ [DIST_CUSTOM_ELEMENTS]: [RUNTIME_APIS.Host] }); // attempt to add the api again, doing so shall not create a duplicate entry - addOutputTargetCoreRuntimeApi(mockModule, DIST_CUSTOM_ELEMENTS, RUNTIME_APIS.attachShadow); - expect(mockModule.outputTargetCoreRuntimeApis).toEqual({ [DIST_CUSTOM_ELEMENTS]: [RUNTIME_APIS.attachShadow] }); + addOutputTargetCoreRuntimeApi(mockModule, DIST_CUSTOM_ELEMENTS, RUNTIME_APIS.Host); + expect(mockModule.outputTargetCoreRuntimeApis).toEqual({ [DIST_CUSTOM_ELEMENTS]: [RUNTIME_APIS.Host] }); }); });