fix(build): address @ionic/angular bundle size issue

Author: alicewriteswrongs

scripts/esbuild/internal-platform-client.ts

@@ -17,7 +17,7 @@ import { externalAlias, getBaseEsbuildOptions, getEsbuildAliases, getEsbuildExte
  * @param opts build options
  * @returns an array of ESBuild option objects
  */
-export async function getInternalClientBundle(opts: BuildOptions): Promise<ESBuildOptions[]> {
+export async function getInternalClientBundles(opts: BuildOptions): Promise<ESBuildOptions[]> {
   const inputClientDir = join(opts.srcDir, 'client');
   const outputInternalClientDir = join(opts.output.internalDir, 'client');
   const outputInternalClientPolyfillsDir = join(outputInternalClientDir, 'polyfills');
@@ -41,6 +41,10 @@ export async function getInternalClientBundle(opts: BuildOptions): Promise<ESBui
 
   const clientExternal = getEsbuildExternalModules(opts, opts.output.internalDir);
 
+  // the runtime imports from `@stencil/core/mock-doc/constants` so we don't
+  // want to have the existing alias around
+  delete internalClientAliases['@stencil/core/mock-doc'];
+
   const internalClientBundle: ESBuildOptions = {
     ...getBaseEsbuildOptions(),
     entryPoints: [join(inputClientDir, 'index.ts')],
@@ -59,9 +63,6 @@ export async function getInternalClientBundle(opts: BuildOptions): Promise<ESBui
       replace(createReplaceData(opts)),
       externalAlias('@app-data', '@stencil/core/internal/app-data'),
       externalAlias('@utils/shadow-css', './shadow-css.js'),
-      // we want to get the esm, not the cjs, since we're creating an esm
-      // bundle here
-      externalAlias('@stencil/core/mock-doc', '../../mock-doc/index.js'),
       findAndReplaceLoadModule(),
     ],
   };

scripts/esbuild/internal-platform-hydrate.ts

@@ -35,10 +35,11 @@ export async function getInternalPlatformHydrateBundles(opts: BuildOptions): Pro
 
   const hydratePlatformInput = join(hydrateSrcDir, 'platform', 'index.js');
 
-  const external = [...getEsbuildExternalModules(opts, outputInternalHydrateDir), '@stencil/core/mock-doc'];
+  const external = [...getEsbuildExternalModules(opts, outputInternalHydrateDir)];
 
   const internalHydrateAliases = getEsbuildAliases();
   internalHydrateAliases['@platform'] = hydratePlatformInput;
+  delete internalHydrateAliases['@stencil/core/mock-doc'];
 
   const internalHydratePlatformBundle: ESBuildOptions = {
     ...getBaseEsbuildOptions(),
@@ -54,8 +55,6 @@ export async function getInternalPlatformHydrateBundles(opts: BuildOptions): Pro
     plugins: [
       externalAlias('@utils/shadow-css', '../client/shadow-css.js'),
       externalAlias('@app-data', '@stencil/core/internal/app-data'),
-      // this needs to be externalized and also pointed at the esm version
-      externalAlias('@stencil/core/mock-doc', '../../mock-doc/index.js'),
     ],
   };
 

scripts/esbuild/internal.ts

@@ -6,7 +6,7 @@ import { copyStencilInternalDts } from '../bundles/internal';
 import type { BuildOptions } from '../utils/options';
 import { writePkgJson } from '../utils/write-pkg-json';
 import { getInternalAppDataBundles } from './internal-app-data';
-import { getInternalClientBundle } from './internal-platform-client';
+import { getInternalClientBundles } from './internal-platform-client';
 import { getInternalPlatformHydrateBundles } from './internal-platform-hydrate';
 import { getInternalTestingBundle } from './internal-platform-testing';
 import { getBaseEsbuildOptions, runBuilds } from './util';
@@ -53,13 +53,13 @@ export async function buildInternal(opts: BuildOptions) {
     platform: 'node',
   };
 
-  const clientPlatformBundle = await getInternalClientBundle(opts);
+  const clientPlatformBundles = await getInternalClientBundles(opts);
   const hydratePlatformBundles = await getInternalPlatformHydrateBundles(opts);
   const appDataBundles = await getInternalAppDataBundles(opts);
   const internalTestingBundle = await getInternalTestingBundle(opts);
 
   return runBuilds(
-    [shadowCSSBundle, ...clientPlatformBundle, ...hydratePlatformBundles, internalTestingBundle, ...appDataBundles],
+    [shadowCSSBundle, ...clientPlatformBundles, ...hydratePlatformBundles, internalTestingBundle, ...appDataBundles],
     opts,
   );
 }

src/runtime/dom-extras.ts

@@ -1,6 +1,6 @@
 import { BUILD } from '@app-data';
 import { getHostRef, plt, supportsShadow } from '@platform';
-import { NODE_TYPES } from '@stencil/core/mock-doc';
+import { NODE_TYPES } from '@stencil/core/mock-doc/constants';
 import { CMP_FLAGS, HOST_FLAGS } from '@utils';
 
 import type * as d from '../declarations';

test.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+# first build stencil
+npm run build
+
+# then build angular in Ionic Framework
+cd ~/Code/ionic-framework/
+./build_angular.sh
+
+# then build in the repro
+cd ~/Code/scratch-stencil/stencil-4.17-issue/test-test-test/
+./install_dev_versions.sh
+npm run build

tsconfig.json

@@ -36,6 +36,7 @@
       "@stencil/core/internal/client/patch-es": ["src/client/client-patch-esm.ts"],
       "@stencil/core/internal/testing": ["src/testing/platform/index.ts"],
       "@stencil/core/mock-doc": ["src/mock-doc/index.ts"],
+      "@stencil/core/mock-doc/*": ["src/mock-doc/*"],
       "@stencil/core/testing": ["src/testing/index.ts"],
       "@stencil/core/cli": ["src/cli/index.ts"],
       "@sys-api-node": ["src/sys/node/index.ts"],