fix(compiler): sourcemap errors for dist-custom-elements + dist-hydra…

…te-script (#4527)

this commit fixes an issue where a stencil project that use both the
`dist-custom-elements` and `dist-hydrate-script` output targets would
see the following error when building their project (with sourcemaps
enabled):

```
[ WARN  ]  Bundling Warning SOURCEMAP_ERROR
           Error when using sourcemap for reporting an error: Can't resolve original location of error.
```

this commit resolves this error by ensuring the `HTMLElement` core
runtime API used by `dist-custom-elements` no longer interferese with
the generated code for `dist-hydrate-script`. this is accomplished by
using the output-target-specific runtime api slots introduced in #4200.
this prevents the `HTMLElement` import from polluting the
sourcemaps/source used in the `dist-hydrate-script` target

src/compiler/transformers/component-native/native-component.ts

@@ -1,7 +1,8 @@
+import { DIST_CUSTOM_ELEMENTS } from '@utils';
 import ts from 'typescript';
 
 import type * as d from '../../../declarations';
-import { addCoreRuntimeApi, HTML_ELEMENT, RUNTIME_APIS } from '../core-runtime-apis';
+import { addOutputTargetCoreRuntimeApi, HTML_ELEMENT, RUNTIME_APIS } from '../core-runtime-apis';
 import { transformHostData } from '../host-data-transform';
 import { removeStaticMetaProperties } from '../remove-static-meta-properties';
 import { updateComponentClass } from '../update-component-class';
@@ -40,7 +41,7 @@ const updateNativeHostComponentHeritageClauses = (
 
   if (moduleFile.cmps.length >= 1) {
     // we'll need to import `HTMLElement` in order to extend it
-    addCoreRuntimeApi(moduleFile, RUNTIME_APIS.HTMLElement);
+    addOutputTargetCoreRuntimeApi(moduleFile, DIST_CUSTOM_ELEMENTS, RUNTIME_APIS.HTMLElement);
   }
 
   const heritageClause = ts.factory.createHeritageClause(ts.SyntaxKind.ExtendsKeyword, [

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 { HTMLElement, defineCustomElement as __stencil_defineCustomElement, attachShadow as __stencil_attachShadow } from "@stencil/core";`
+        `import { defineCustomElement as __stencil_defineCustomElement, HTMLElement, attachShadow as __stencil_attachShadow } 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 { HTMLElement, defineCustomElement as __stencil_defineCustomElement, attachShadow as __stencil_attachShadow } from "@stencil/core";`
+        `import { defineCustomElement as __stencil_defineCustomElement, HTMLElement, attachShadow as __stencil_attachShadow } from "@stencil/core";`
       );
       expect(transpiledModule.outputText).toContain(`this.__attachShadow()`);
     });