Fix tree shaking

[jeetiss]

hello, folks

I fixed two tree-shaking issues with this PR

• package.json in dist/esm overrides default one so webpack doesn't see sideEffects: false option and disables optimizations. I added this field.
• webpack and other tools don't remove top-level function calls even when sideEffects: false is specified, so I added /*#__PURE__*/ annotation with babel plugin

size before:

  viem (cjs)
  Size limit:   60 kB
  Size:         59.77 kB with all dependencies, minified and gzipped
  Loading time: 1.2 s    on slow 3G
  Running time: 427 ms   on Snapdragon 410
  Total time:   1.6 s
  
  viem (tree-shaking check)
  Package size limit has exceeded by 16.75 kB
  Size limit:   1.5 kB
  Size:         18.25 kB with all dependencies, minified and gzipped
  Loading time: 357 ms   on slow 3G
  Running time: 203 ms   on Snapdragon 410
  Total time:   560 ms
  
  viem/chains
  Package size limit has exceeded by 1.76 kB
  Size limit:   1 kB
  Size:         2.76 kB with all dependencies, minified and gzipped
  Loading time: 54 ms   on slow 3G
  Running time: 98 ms   on Snapdragon 410
  Total time:   152 ms

size after:

  viem (cjs)
  Size limit:   60 kB
  Size:         59.77 kB with all dependencies, minified and gzipped
  Loading time: 1.2 s    on slow 3G
  Running time: 404 ms   on Snapdragon 410
  Total time:   1.6 s
  
  viem (tree-shaking check)
  Size limit:   1.5 kB
  Size:         1.43 kB with all dependencies, minified and gzipped
  Loading time: 28 ms   on slow 3G
  Running time: 83 ms   on Snapdragon 410
  Total time:   111 ms
  
  viem/chains
  Size limit:   1 kB
  Size:         993 B with all dependencies, minified and gzipped
  Loading time: 20 ms on slow 3G
  Running time: 76 ms on Snapdragon 410
  Total time:   96 ms

---

PR-Codex overview

This PR adds pure annotation to the codebase and updates some dependencies.

Detailed summary

• Adds pure annotation to the codebase using the babel-plugin-annotate-pure-calls plugin.
• Updates the @babel/cli and @babel/core dependencies.
• Updates the @babel/plugin-syntax-typescript dependency.
• Updates the size-limit configuration to include new size limits for different parts of the codebase.
• Adds sideEffects to the package.json file to optimize tree-shaking.
• Adds a new script to build a pure-annotations version of the codebase.
• Makes minor changes to code formatting in various files.

The following files were skipped due to too many changes: src/chains.ts, pnpm-lock.yaml

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

[changeset-bot]

⚠️ No Changeset found

Latest commit: e4ed9da

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@jeetiss is attempting to deploy a commit to the wagmi Team on Vercel.

A member of the Team first needs to authorize it.

[socket-security]

New and updated dependency changes detected. Learn more about Socket for GitHub ↗︎

Packages		Version	New capabilities	Transitives1	Size	Publisher
babel-plugin-annotate-pure-calls	🆕	0.4.0	None	+17	9.06 MB	andarist
@babel/core	🆕	7.22.1	None	+16	9.06 MB	nicolo-ribaudo
@babel/cli	🆕	7.21.5	filesystem	+21	9.28 MB	nicolo-ribaudo

Footnotes

1. https://docs.socket.dev ↩

[fubhy]

Hey there. Good find!

• package.json in dist/esm overrides default one so webpack doesn't see sideEffects: false option and disables optimizations. I added this field.

Is that a bug in webpack? Doesn't hurt to add that property here but feels like webpack should traverse to & inherit that from the package.json of the package.

webpack and other tools don't remove top-level function calls even when sideEffects: false is specified, so I added /#PURE/ annotation with babel plugin

Instead of introducing another build step & babel for that, let's just add that annotation to the offending root level function calls in viem/chains and wherever else necessary?

[jeetiss]

Is that a bug in webpack?

I don't know exactly, but it seems as not. esbuild works the same way, and includes all classes when only defineBlock is imported https://bundlejs.com/?q=viem&treeshake=%5B%7B+defineBlock+%7D%5D&config=%7B%22esbuild%22%3A%7B%22minify%22%3Afalse%7D%7D

another build step & babel

I wouldn't say I like this either, but this solution is bulletproof and typescript doesn't provide any way to achieve the same result.

Current code contains 110 pure annotations:

Any usage without annotations would include the function and the call to bundle, so I think is better to use an automated solution.

But ofc, I can set comments manually if you don't like the costs of babel

[fubhy]

Any usage without annotations would include the function and the call to bundle, so I think is better to use an automated solution.

Oh okay, so the annotation is needed for more than just the viem/chains use of defineChain?

[jeetiss]

yes, it is used for all define functions: defineBlock, defineTransaction, defineChain, defineFormatter, defineTransactionReceipt, defineTransactionRequest

Pure annotations affect viem and other entries too, but not as dramatically as viem/chains

[jxom]

Just gave this a test run, and it seems to strip out all the sourcemap comments. Can we stop it from doing that?

[fubhy]

@jeetiss Could you split this into two PRs? One for just adding the sideEffects: false to the package.jsons and the other for setting up the PURE annotations?

We are currently researching our options for that and don't have a super clear picture yet. A lot of the discussions both in the typescript repository are super recent and inconclusive:

• Add pure and immutable keywords to ensure code has no unintended side-effects microsoft/TypeScript#17181

We also found some interesting related discussions and recent activity for rollup, esbuild, etc. that are relevant:

• feat: support #__NO_SIDE_EFFECTS__ annotation for function declaration  rollup/rollup#5024
• Support #__NO_SIDE_EFFECTS__ comment from Rollup evanw/esbuild#3149

I dislike the proposed babel solution because it feels somewhat icky to post-process the build output with an additional step effectively fiddling with the dist artifacts after build. I'm worried about how that might potentially affect source maps too.

My personal preference for the annotations would be:

1. Add NO_SIDE_EFFECTS annotations to the declaration functions
2. Add PURE annotations to the usage sites of these functions (until NO_SIDE_EFFECTS is widely supported)
3. Make tsc play nice and emit those properly and also check that it doesn't produce any other code (e.g. classes) that are not considered side-effect free

This is my personal preference with admitedly only rather superficial understanding of the status quo of tooling support & best practices for these annotations in general.

[jeetiss]

@fubhy yes ofc, I will split this PR sideEffects: false gain most improvements here and are not much controversial as pure annotations.

I found that I can run babel over typescript sources, so I can do your suggestion automatically, it just adds pure to every top-level invocation

Instead of introducing another build step & babel for that, let's just add that annotation to the offending root level function calls in viem/chains and wherever else necessary?

It looks like a good compromise for me before NO_SIDE_EFFECTS is settled well

What do you think?

[fubhy]

I found that I can run babel over typescript sources, so I can do your suggestion automatically, it just adds pure to every top-level invocation

Yeah that sounds good. Adding them to the source code would also give us an idea how many of those are necessary and how much maintenance burden that would add going forward.

@jxom Also identified a potential problem with how tsc is emitting code for errors/base.ts. We'd have to check that too but that could also be another follow-up.

EDIT: That base error class issue is solved with this: #684

[jeetiss]

This PR contains a command to add pure annotations, if you want to run it again

close in favor of #687