fix(build): address dist bundle size issue

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');
@@ -59,9 +59,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,7 +35,7 @@ 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;
@@ -54,8 +54,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-platform-testing.ts

@@ -33,7 +33,7 @@ export async function getInternalTestingBundle(opts: BuildOptions): Promise<ESBu
     '@platform': inputTestingPlatform,
   };
 
-  const external = [...getEsbuildExternalModules(opts, opts.output.internalDir), '@stencil/core/mock-doc'];
+  const external = getEsbuildExternalModules(opts, opts.output.internalDir);
 
   const internalTestingBuildOptions: ESBuildOptions = {
     ...getBaseEsbuildOptions(),

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,7 +1,6 @@
 import { BUILD } from '@app-data';
 import { getHostRef, plt, supportsShadow } from '@platform';
-import { NODE_TYPES } from '@stencil/core/mock-doc';
-import { CMP_FLAGS, HOST_FLAGS } from '@utils';
+import { CMP_FLAGS, HOST_FLAGS, NODE_TYPES } from '@utils/constants';
 
 import type * as d from '../declarations';
 import { PLATFORM_FLAGS } from './runtime-constants';

src/utils/constants.ts

@@ -231,3 +231,28 @@ export const VALID_CONFIG_OUTPUT_TARGETS = [
 ] as const;
 
 export const GENERATED_DTS = 'components.d.ts';
+
+/**
+ * DOM Node types
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+ *
+ * Note: this is a duplicate of the `NODE_TYPES` enum in mock-doc, it's
+ * copied over here so that we do not need to introduce a dependency on the
+ * mock-doc bundle in the runtime. See
+ * https://github.com/ionic-team/stencil/pull/5705 for more details.
+ */
+export const enum NODE_TYPES {
+  ELEMENT_NODE = 1,
+  ATTRIBUTE_NODE = 2,
+  TEXT_NODE = 3,
+  CDATA_SECTION_NODE = 4,
+  ENTITY_REFERENCE_NODE = 5,
+  ENTITY_NODE = 6,
+  PROCESSING_INSTRUCTION_NODE = 7,
+  COMMENT_NODE = 8,
+  DOCUMENT_NODE = 9,
+  DOCUMENT_TYPE_NODE = 10,
+  DOCUMENT_FRAGMENT_NODE = 11,
+  NOTATION_NODE = 12,
+}

tsconfig.json

@@ -40,6 +40,7 @@
       "@stencil/core/cli": ["src/cli/index.ts"],
       "@sys-api-node": ["src/sys/node/index.ts"],
       "@utils": ["src/utils/index.ts"],
+      "@utils/*": ["src/utils/*"],
       "@utils/shadow-css": ["src/utils/shadow-css"]
     },
     "pretty": true,