feat: improve treeshaking (#463)

Author: stipsan

package.json

@@ -21,6 +21,7 @@
   },
   "license": "MIT",
   "author": "Sanity.io <[email protected]>",
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {

playground/dummy-side-effects/index.cjs

@@ -0,0 +1 @@
+module.exports.answer = 42

playground/dummy-side-effects/index.d.ts

@@ -0,0 +1 @@
+export declare const answer: number

playground/dummy-side-effects/index.js

@@ -0,0 +1 @@
+export const answer = 42

playground/dummy-side-effects/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "dummy-side-effects",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": ["./side-effect*"],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "require": "./index.cjs",
+      "default": "./index.js"
+    },
+    "./side-effect": {
+      "types": "./side-effect.d.ts",
+      "require": "./side-effect.cjs",
+      "default": "./side-effect.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./index.d.ts",
+  "files": [
+    "index.js",
+    "index.cjs",
+    "index.d.ts",
+    "side-effect.js",
+    "side-effect.cjs",
+    "side-effect.d.ts"
+  ]
+}

playground/dummy-side-effects/side-effect.cjs

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-console
+console.log('side-effect.cjs')

playground/dummy-side-effects/side-effect.d.ts

@@ -0,0 +1 @@
+export {}

playground/dummy-side-effects/side-effect.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-console
+console.log('side-effect.js')

playground/multi-export/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "license": "MIT",
   "type": "module",
+  "sideEffects": ["./side-effect*"],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -27,6 +28,27 @@
       "import": "./dist/plugin.js",
       "default": "./dist/plugin.js"
     },
+    "./pure": {
+      "types": "./dist/pure.d.ts",
+      "source": "./src/pure.ts",
+      "import": "./dist/pure.js",
+      "require": "./dist/pure.cjs",
+      "default": "./dist/pure.js"
+    },
+    "./side-effect": {
+      "types": "./dist/side-effect.d.ts",
+      "source": "./src/side-effect.ts",
+      "import": "./dist/side-effect.js",
+      "require": "./dist/side-effect.cjs",
+      "default": "./dist/side-effect.js"
+    },
+    "./no-side-effect": {
+      "types": "./dist/no-side-effect.d.ts",
+      "source": "./src/no-side-effect.ts",
+      "import": "./dist/no-side-effect.js",
+      "require": "./dist/no-side-effect.cjs",
+      "default": "./dist/no-side-effect.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.cjs",
@@ -37,11 +59,24 @@
     "*": {
       "plugin": [
         "./dist/plugin.d.ts"
+      ],
+      "pure": [
+        "./dist/pure.d.ts"
+      ],
+      "side-effect": [
+        "./dist/side-effect.d.ts"
+      ],
+      "no-side-effect": [
+        "./dist/no-side-effect.d.ts"
       ]
     }
   },
   "scripts": {
     "build": "run-s clean && pkg build --strict && pkg check --strict",
     "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "dummy-side-effects": "workspace:*"
   }
 }
+

playground/multi-export/src/no-side-effect.ts

@@ -0,0 +1,5 @@
+// Should be tree-shaken away as it's a side-effect free module
+import 'dummy-side-effects'
+
+/** @public */
+export const answer = 42

playground/multi-export/src/pure.ts

@@ -0,0 +1,6 @@
+import {answer} from 'dummy-side-effects'
+
+/** @public */
+export function getAnswer() {
+  return answer
+}

playground/multi-export/src/side-effect.ts

@@ -0,0 +1,2 @@
+// Should not be tree-shaken away as it's a side-effect module
+import 'dummy-side-effects/side-effect'

pnpm-lock.yaml

@@ -1,5 +1,5 @@
-import {type PluginItem as BabelPluginItem} from '@babel/core'
-import {NormalizedOutputOptions, type Plugin as RollupPlugin} from 'rollup'
+import type {PluginItem as BabelPluginItem} from '@babel/core'
+import type {NormalizedOutputOptions, Plugin as RollupPlugin, TreeshakingOptions} from 'rollup'
 
 // re-export
 export type {RollupPlugin}
@@ -120,6 +120,13 @@ export interface PkgConfigOptions {
   rollup?: {
     plugins?: PkgConfigProperty<RollupPlugin[]>
     output?: Partial<NormalizedOutputOptions>
+    /**
+     * Default options are `preset: 'recommended'` and `propertyReadSideEffects: false`
+     * @alpha
+     */
+    treeshake?: TreeshakingOptions
+    /** @alpha */
+    experimentalLogSideEffects?: boolean
   }
   /**
    * Default runtime of package exports

src/node/core/config/types.ts

@@ -42,6 +42,7 @@ export interface PackageJSON {
   files?: string[]
   scripts?: Record<string, string | undefined>
   browserslist?: string | string[]
+  sideEffects?: boolean | string[]
   engines?: {
     node?: string
     npm?: string

src/node/core/pkg/types.ts

@@ -47,6 +47,7 @@ const pkgSchema = z.object({
     ),
   ),
   browserslist: z.optional(z.union([z.string(), z.array(z.string())])),
+  sideEffects: z.optional(z.union([z.boolean(), z.array(z.string())])),
 })
 
 export function validatePkg(input: unknown): PackageJSON {

src/node/core/pkg/validatePkg.ts

@@ -42,7 +42,7 @@ export async function resolveBuildContext(options: {
 
   /* eslint-disable padding-line-between-statements */
   let browserslist = pkg.browserslist
-  if (!browserslist) {
+  if (strict && !browserslist) {
     logger.warn(
       'Could not detect a `browserslist` property in `package.json`, using default configuration. Add `"browserslist": "extends @sanity/browserslist-config"` to silence this warning.',
     )
@@ -51,6 +51,12 @@ export async function resolveBuildContext(options: {
   const targetVersions = browserslistToEsbuild(browserslist)
   /* eslint-enable padding-line-between-statements */
 
+  if (strict && typeof pkg.sideEffects === 'undefined') {
+    logger.error(
+      'No `sideEffects` field in `package.json`, assuming all files are side-effectful. Add `"sideEffects": true` to silence this warning. See https://webpack.js.org/guides/tree-shaking/#clarifying-tree-shaking-and-sideeffects for how to define `sideEffects`.',
+    )
+  }
+
   const nodeTarget = resolveNodeTarget(targetVersions)
   const webTarget = resolveBrowserTarget(targetVersions)
 

src/node/resolveBuildContext.ts

@@ -180,8 +180,11 @@ export function resolveRollupConfig(
       plugins,
 
       treeshake: {
+        preset: 'recommended',
         propertyReadSideEffects: false,
+        ...config?.rollup?.treeshake,
       },
+      experimentalLogSideEffects: config?.rollup?.experimentalLogSideEffects,
     },
     outputOptions: {
       chunkFileNames: () => {

src/node/tasks/rollup/resolveRollupConfig.ts

@@ -159,6 +159,7 @@ export const defaultTemplate: PkgTemplate = async ({cwd, logger, packagePath}) =
         'repository': undefined,
         'license': options.license,
         author,
+        'sideEffects': false,
         'type': 'module',
         'exports': {
           '.': {
@@ -188,6 +189,7 @@ export const defaultTemplate: PkgTemplate = async ({cwd, logger, packagePath}) =
             }
           : undefined,
         // prettier: prettierConfig,
+        'browserslist': 'extends @sanity/browserslist-config',
         'dependencies': {},
         'devDependencies': {
           '@sanity/pkg-utils': '*',