fix(compiler): sourcemap generation without ext runtime (#4570)

* 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
#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)

* 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`

Author: rwaskiewicz

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<ts.Statement> = 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<ts.ExpressionStatement> => {
+const nativeInit = (cmp: d.ComponentCompilerMeta): ReadonlyArray<ts.ExpressionStatement> => {
   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(

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}`,

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,25 +57,25 @@ 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],
     });
   });
 
   it("does not allow duplicate entries in a module's outputTargetCoreRuntimeApis", () => {
     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] });
   });
 });
 

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()`);
     });

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);
   });
 });