fix(build): address dist bundle size issue

[alicewriteswrongs]

What is the current behavior?

GitHub Issue Number: N/A

What is the new behavior?

Documentation

Does this introduce a breaking change?

• Yes
• No

Testing

This one is a little involved to test because the full reproduction involves ionic framework and an ionic angular project.

So! We need to do some setup.

First, you should get Stencil linked up to ionic-framework. In the Stencil repo you can do:

npm link

Then in Framework do:

cd core
npm link @stencil/core
cd ..

then for testing purposes you'll need to apply this patch:

https://gist.github.com/alicewriteswrongs/1a1967bfe4171546f5393a91bcabee95

This adds a script for building the @ionic/core and @ionic/angular packages called ./build_angular.sh and also makes some changes to tsconfig.json which are necessary for the npm link business to work correctly.

Once you have that in place you should also clone this reproduction of the issue:

https://github.com/alicewriteswrongs/stencil-ionic-angular-repro

it's in the test-test-test subdirectory. If you go in there there is a script called install_dev_versions.sh which will install the packed @ionic/core and @ionic/angular packages into this test project.

OK! So if you get all of that set up then you're ready to work on this.

First, you should confirm the issue. You can use a script like this to run through the whole repro:

#!/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

Adjust as-needed to account for where you have stencil, framework, and my reproduction cloned.

So first run that script with main checked out in Stencil, and confirm that the build output for the angular project should a main.XXXXX.js file with a size of ~700kb.

Then check out this branch and confirm that the size drops down to under 400kb.

[github-actions]

--strictNullChecks error report

Typechecking with --strictNullChecks resulted in 1138 errors on this branch.

That's the same number of errors on main, so at least we're not creating new ones!

reports and statistics

Our most error-prone files

Path	Error Count
src/dev-server/index.ts	37
src/dev-server/server-process.ts	32
src/compiler/prerender/prerender-main.ts	22
src/runtime/client-hydrate.ts	20
src/testing/puppeteer/puppeteer-element.ts	20
src/screenshot/connector-base.ts	19
src/runtime/vdom/vdom-render.ts	17
src/dev-server/request-handler.ts	15
src/compiler/prerender/prerender-optimize.ts	14
src/compiler/sys/stencil-sys.ts	14
src/sys/node/node-sys.ts	14
src/compiler/prerender/prerender-queue.ts	13
src/compiler/sys/in-memory-fs.ts	13
src/runtime/connected-callback.ts	13
src/runtime/set-value.ts	13
src/compiler/output-targets/output-www.ts	12
src/compiler/transformers/test/parse-vdom.spec.ts	12
src/compiler/transformers/transform-utils.ts	12
src/compiler/transpile/transpile-module.ts	12
src/mock-doc/test/attribute.spec.ts	12

Our most common errors

Typescript Error Code	Count
TS2322	361
TS2345	344
TS18048	205
TS18047	82
TS2722	37
TS2532	24
TS2531	21
TS2454	14
TS2790	11
TS2352	9
TS2769	8
TS2538	8
TS2416	7
TS2493	3
TS18046	2
TS2684	1
TS2430	1

Unused exports report

There are 15 unused exports on this PR. Unfortunately, it looks like that's an increase of 1 over main 😞.

Unused exports

File	Line	Identifier
src/runtime/bootstrap-lazy.ts	21	setNonce
src/screenshot/screenshot-fs.ts	18	readScreenshotData
src/testing/testing-utils.ts	198	withSilentWarn
src/utils/index.ts	145	CUSTOM
src/utils/index.ts	245	NODE_TYPES
src/utils/index.ts	269	normalize
src/utils/index.ts	7	escapeRegExpSpecialCharacters
src/compiler/app-core/app-data.ts	25	BUILD
src/compiler/app-core/app-data.ts	115	Env
src/compiler/app-core/app-data.ts	117	NAMESPACE
src/compiler/fs-watch/fs-watch-rebuild.ts	123	updateCacheFromRebuild
src/compiler/types/validate-primary-package-output-target.ts	61	satisfies
src/compiler/types/validate-primary-package-output-target.ts	61	Record
src/testing/puppeteer/puppeteer-declarations.ts	485	WaitForEventOptions
src/compiler/sys/fetch/write-fetch-success.ts	7	writeFetchSuccessSync

[github-actions]

PR built and packed!

Download the tarball here: https://github.com/ionic-team/stencil/actions/runs/8852607652/artifacts/1451876325

If your browser saves files to ~/Downloads you can install it like so:

unzip -d ~/Downloads ~/Downloads/stencil-core-4.17.1-dev.1714155715.54efd62.tgz.zip && npm install ~/Downloads/stencil-core-4.17.1-dev.1714155715.54efd62.tgz

[rwaskiewicz]

@alicewriteswrongs When I run build-angular.sh from the root of the Framework repo, I get:

[ ERROR ]  unhandledRejection: Error: Could not resolve '../../mock-doc/index.cjs/constants' from
           ../../stencil/internal/hydrate/index.js at error
           (/Users/ryan/workspaces/stencil/compiler/stencil.js:9734:27) at ModuleLoader.handleResolveId
           (/Users/ryan/workspaces/stencil/compiler/stencil.js:27260:20) at
           /Users/ryan/workspaces/stencil/compiler/stencil.js:27254:77

~~Is there anything obvious I might be doing wrong here? ~~ Probably PEBKAC

[alicewriteswrongs]

just noting something

[alicewriteswrongs]

this is a little test script - I'm going to leave it in for the review and delete before merge

[tanner-reits]

LGTM!

[christian-bromann]

Awesome work 🎉

Verified that this works by:

• creating a new Ionic project via ionic start photo-gallery tabs --type=angular --capacitor selecting NgModules
• building @ionic/core using Stencil build with this branch
• run npm run build
• bundle size for main.62054bba8aec0c16.js before: 671523, bundle size after: 367433

👍