chore(esbuild): build mock-doc with esbuild #5012

alicewriteswrongs · 2023-11-01T15:32:02Z

This adds support for building the mock-doc top-level-module using esbuild.

What is the current behavior?

GitHub Issue Number: N/A

What is the new behavior?

Does this introduce a breaking change?

Yes
No

Testing

CI passing with both the Rollup- and Esbuild-based builds is a good signal that things are alright here. I also build and packed the project locally and then installed it in a sample project, ensuring that I could then run a basic stencil test --e2e --spec without issues.

Other information

github-actions · 2023-11-01T15:33:57Z

`--strictNullChecks` error report

Typechecking with --strictNullChecks resulted in 1323 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/mock-doc/serialize-node.ts	36
src/dev-server/server-process.ts	32
src/compiler/style/test/optimize-css.spec.ts	23
src/compiler/output-targets/dist-lazy/generate-lazy-module.ts	22
src/compiler/prerender/prerender-main.ts	22
src/testing/puppeteer/puppeteer-element.ts	22
src/runtime/client-hydrate.ts	20
src/screenshot/connector-base.ts	19
src/runtime/vdom/vdom-render.ts	18
src/compiler/config/test/validate-paths.spec.ts	16
src/dev-server/request-handler.ts	15
src/compiler/prerender/prerender-optimize.ts	14
src/compiler/sys/stencil-sys.ts	14
src/compiler/transpile/transpile-module.ts	14
src/runtime/vdom/vdom-annotations.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

Our most common errors

Typescript Error Code	Count
TS2345	399
TS2322	374
TS18048	286
TS18047	101
TS2722	37
TS2532	30
TS2531	23
TS2454	14
TS2352	13
TS2790	10
TS2769	8
TS2538	8
TS2416	6
TS2344	5
TS2493	3
TS2488	2
TS18046	2
TS2684	1
TS2430	1

Unused exports report

There are 14 unused exports on this PR. That's the same number of errors on main, so at least we're not creating new ones!

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

tanner-reits

One thing I'd personally just like a little clarification on

tanner-reits · 2023-11-15T19:36:45Z

scripts/esbuild/mock-doc.ts

+  return runBuilds([esmOptions, cjsOptions], opts);
+}
+
+async function bundleMockDocDts(opts: BuildOptions, inputDir: string, outputDir: string) {


This function seems quite different from the Rollup equivalent. How different are the written index.d.ts files? Also, was index.d.ts-bundled.d.ts file useless (IIUC, that isn't getting created anymore)?

I did a bunch of manual checking and I believe that the files are the same, i.e. they end up exporting the same types. The function in the Rollup bundle (here) is basically a super manual way to bundle up and 'statically link' (sort of) a .d.ts file to make it standalone and portable, so it actually reads the files from disk, concatenates things, etc.

Here in the esbuild version I wanted to see if we could achieve the same result using our bundleDts function which leverages dts-bundle-generator. Instead of being a somewhat 'homemade' solution this is a pretty reliable and tested library.

The reason for not writing a -bundled.d.ts version here (by passing false for the useCache parameter) is because I think for this code we always just want to generate a fresh new index.d.ts since it's not very expensive to do so and we can just avoid a whole potentially class of bugs that way

Okay, that all makes sense. In that case, I think this is g2g!

scripts/esbuild/mock-doc.ts

alicewriteswrongs · 2023-11-17T17:36:56Z

One thing I just realized, I need the code I have in #5027 for the replacePlugin over here as well, so I'll hold off on merging this until after #5027 lands and I can rebase over it and pull that in

rwaskiewicz

The build here is currently broken:

 /home/runner/work/stencil/stencil/build/sys/node/worker.js → sys/node/worker.js...
created sys/node/worker.js in 15ms
/home/runner/work/stencil/stencil/scripts/build/bundles/plugins/parse5-plugin.js:54
    const fileName = `parse5-${opts.parse5Version.replace(/\./g, '_')}-bundle-cache${opts.isProd ? '.min' : ''}.js`;
                                                  ^

TypeError: Cannot read properties of undefined (reading 'replace')
    at bundleParse5 (/home/runner/work/stencil/stencil/scripts/build/bundles/plugins/parse5-plugin.js:54:51)
    at buildMockDoc (/home/runner/work/stencil/stencil/scripts/build/esbuild/mock-doc.js:32:67)
    at async Promise.all (index 2)
    at async main (/home/runner/work/stencil/stencil/scripts/build/esbuild/build.js:14:5)

scripts/esbuild/mock-doc.ts

alicewriteswrongs · 2023-11-29T18:16:22Z

Fixed the build issue - the bundleParse5 function has an implicit dependency on a side-effect of the createReplaceData function so I added a call to that function to the mock-doc bundle

This adds support for building the mock-doc top-level-module using esbuild. STENCIL-1009: port mock-doc bundle to esbuild

In #5012 when we put together a script to build `mock-doc/` with Esbuild we refactored a custom, hand-built `.d.ts` bundler that was used in the Rollup build to instead use `dts-bundle-generator`, a library that we depend on elsewhere. Although in theory a better option for avoiding NIH syndrome the output is just too different, so we want to switch to using the old rollup approach in our new, Esbuild-based build script for `mock-doc/`. To accomplish this we can just export the existing function from the Rollup script and then call it in the Esbuild script. STENCIL-1246

…5624) In #5012 when we put together a script to build `mock-doc/` with Esbuild we refactored a custom, hand-built `.d.ts` bundler that was used in the Rollup build to instead use `dts-bundle-generator`, a library that we depend on elsewhere. Although in theory a better option for avoiding NIH syndrome the output is just too different, so we want to switch to using the old rollup approach in our new, Esbuild-based build script for `mock-doc/`. To accomplish this we can just export the existing function from the Rollup script and then call it in the Esbuild script. STENCIL-1246

alicewriteswrongs force-pushed the ap/esbuild-mock-doc branch 2 times, most recently from cdcbbb6 to 8ae45fd Compare November 2, 2023 13:57

alicewriteswrongs force-pushed the ap/esbuild-mock-doc branch 2 times, most recently from f912ec1 to 27a331e Compare November 9, 2023 14:56

alicewriteswrongs marked this pull request as ready for review November 10, 2023 14:37

alicewriteswrongs requested a review from a team as a code owner November 10, 2023 14:37

alicewriteswrongs requested review from rwaskiewicz and tanner-reits November 10, 2023 14:37

alicewriteswrongs force-pushed the ap/esbuild-mock-doc branch 2 times, most recently from 20394e5 to b0a2013 Compare November 13, 2023 16:36

tanner-reits reviewed Nov 15, 2023

View reviewed changes

tanner-reits approved these changes Nov 15, 2023

View reviewed changes

rwaskiewicz requested changes Nov 16, 2023

View reviewed changes

scripts/esbuild/mock-doc.ts Show resolved Hide resolved

scripts/esbuild/mock-doc.ts Show resolved Hide resolved

scripts/esbuild/mock-doc.ts Show resolved Hide resolved

scripts/esbuild/mock-doc.ts Show resolved Hide resolved

alicewriteswrongs force-pushed the ap/esbuild-mock-doc branch 2 times, most recently from 02d8f63 to b6a9835 Compare November 17, 2023 15:28

alicewriteswrongs requested a review from rwaskiewicz November 17, 2023 15:32

rwaskiewicz requested changes Nov 29, 2023

View reviewed changes

scripts/esbuild/mock-doc.ts Show resolved Hide resolved

alicewriteswrongs force-pushed the ap/esbuild-mock-doc branch from 78a4d95 to 330e5ff Compare November 29, 2023 18:15

alicewriteswrongs requested a review from rwaskiewicz November 30, 2023 14:38

alicewriteswrongs force-pushed the ap/esbuild-mock-doc branch 2 times, most recently from 205b72f to 41f2f03 Compare November 30, 2023 18:58

rwaskiewicz approved these changes Dec 8, 2023

View reviewed changes

alicewriteswrongs force-pushed the ap/esbuild-mock-doc branch from 41f2f03 to e3c81bf Compare December 8, 2023 15:21

chore(esbuild): build mock-doc with esbuild

2da9db6

This adds support for building the mock-doc top-level-module using esbuild. STENCIL-1009: port mock-doc bundle to esbuild

alicewriteswrongs force-pushed the ap/esbuild-mock-doc branch from e3c81bf to 2da9db6 Compare December 8, 2023 15:40

alicewriteswrongs enabled auto-merge December 8, 2023 15:40

alicewriteswrongs added this pull request to the merge queue Dec 8, 2023

Merged via the queue into main with commit 3c57875 Dec 8, 2023

alicewriteswrongs deleted the ap/esbuild-mock-doc branch December 8, 2023 15:58

alicewriteswrongs mentioned this pull request Apr 5, 2024

chore(build): port d.ts bundling for mock-doc from rollup to esbuild #5624

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(esbuild): build mock-doc with esbuild #5012

chore(esbuild): build mock-doc with esbuild #5012

Uh oh!

alicewriteswrongs commented Nov 1, 2023 •

edited

Loading

Uh oh!

github-actions bot commented Nov 1, 2023 •

edited

Loading

Uh oh!

tanner-reits left a comment

Uh oh!

tanner-reits Nov 15, 2023

Uh oh!

alicewriteswrongs Nov 15, 2023

Uh oh!

tanner-reits Nov 15, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alicewriteswrongs commented Nov 17, 2023

Uh oh!

rwaskiewicz left a comment

Uh oh!

Uh oh!

alicewriteswrongs commented Nov 29, 2023

Uh oh!

Uh oh!

chore(esbuild): build mock-doc with esbuild #5012

chore(esbuild): build mock-doc with esbuild #5012

Uh oh!

Conversation

alicewriteswrongs commented Nov 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Testing

Other information

Uh oh!

github-actions bot commented Nov 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

--strictNullChecks error report

reports and statistics

Unused exports report

Uh oh!

tanner-reits left a comment

Choose a reason for hiding this comment

Uh oh!

tanner-reits Nov 15, 2023

Choose a reason for hiding this comment

Uh oh!

alicewriteswrongs Nov 15, 2023

Choose a reason for hiding this comment

Uh oh!

tanner-reits Nov 15, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alicewriteswrongs commented Nov 17, 2023

Uh oh!

rwaskiewicz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alicewriteswrongs commented Nov 29, 2023

Uh oh!

Uh oh!

alicewriteswrongs commented Nov 1, 2023 •

edited

Loading

github-actions bot commented Nov 1, 2023 •

edited

Loading

`--strictNullChecks` error report