From 031861e414b0f1a1f646b71c077f96fde52fd3d0 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 19 Jun 2024 09:46:31 -0700 Subject: [PATCH] feat: mark scripts in libraries as being side effect free by default --- .changeset/clean-wolves-bathe.md | 5 +++++ documentation/docs/30-advanced/70-packaging.md | 13 +++++++++---- .../templates/skeletonlib/package.template.json | 1 + 3 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 .changeset/clean-wolves-bathe.md diff --git a/.changeset/clean-wolves-bathe.md b/.changeset/clean-wolves-bathe.md new file mode 100644 index 000000000000..6ff1df2b416e --- /dev/null +++ b/.changeset/clean-wolves-bathe.md @@ -0,0 +1,5 @@ +--- +"create-svelte": minor +--- + +feat: mark scripts in libraries as being side effect free by default diff --git a/documentation/docs/30-advanced/70-packaging.md b/documentation/docs/30-advanced/70-packaging.md index 8315370d2fb5..1a475c8d370e 100644 --- a/documentation/docs/30-advanced/70-packaging.md +++ b/documentation/docs/30-advanced/70-packaging.md @@ -128,9 +128,9 @@ This is a legacy field that enabled tooling to recognise Svelte component librar ### sideEffects -The `sideEffects` field in `package.json` is used by bundlers to determine if a module may contain code that has side-effects. A module is considered to have side-effects if it makes changes that are observable from other scripts outside the module when it's imported. For example, side-effects include modifying global variables or the prototype of built-in JavaScript objects. Because a side-effect could potentially affect the behavior of other parts of the application, these files/modules will be included in the final bundle regardless of whether their exports are used in the application. It is a best practice to avoid side-effects in your code. +The `sideEffects` field in `package.json` is used by bundlers to determine if a module may contain code that has side effects. A module is considered to have side effects if it makes changes that are observable from other scripts outside the module when it's imported. For example, side effects include modifying global variables or the prototype of built-in JavaScript objects. Because a side effect could potentially affect the behavior of other parts of the application, these files/modules will be included in the final bundle regardless of whether their exports are used in the application. It is a best practice to avoid side effects in your code. -Setting the `sideEffects` field in `package.json` can help the bundler to be more aggressive in eliminating unused exports from the final bundle, a process known as tree-shaking. This results in smaller and more efficient bundles. Different bundlers handle `sideEffects` in various manners. While not necessary for Vite, we recommend that libraries state that all CSS files have side-effects so that your library will be [compatible with webpack](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free). +Setting the `sideEffects` field in `package.json` can help the bundler to be more aggressive in eliminating unused exports from the final bundle, a process known as tree-shaking. This results in smaller and more efficient bundles. Different bundlers handle `sideEffects` in various manners. While not necessary for Vite, we recommend that libraries state that all CSS files have side effects so that your library will be [compatible with webpack](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free). This is the configuration that comes with newly created projects: ```json /// file: package.json @@ -139,12 +139,17 @@ Setting the `sideEffects` field in `package.json` can help the bundler to be mor } ``` -Make sure that `"sideEffects"` is correctly set. If a file with side effects is incorrectly marked as having no side effects, it can result in broken functionality. If your package has files with side effects, you can specify them in an array: +> If the scripts in your library have side effects, ensure that you update the `sideEffects` field. All scripts are marked as side effect free by default in newly created projects. If a file with side effects is incorrectly marked as having no side effects, it can result in broken functionality. + +If your package has files with side effects, you can specify them in an array: ```json /// file: package.json { - "sideEffects": ["**/*.css", "./src/sideEffectfulFile.js"] + "sideEffects": [ + "**/*.css", + "./dist/sideEffectfulFile.js" + ] } ``` diff --git a/packages/create-svelte/templates/skeletonlib/package.template.json b/packages/create-svelte/templates/skeletonlib/package.template.json index 6d013e565c9a..569aecd3ab1f 100644 --- a/packages/create-svelte/templates/skeletonlib/package.template.json +++ b/packages/create-svelte/templates/skeletonlib/package.template.json @@ -14,6 +14,7 @@ "svelte": "./dist/index.js" } }, + "sideEffects": ["**/*.css"], "files": ["dist", "!dist/**/*.test.*", "!dist/**/*.spec.*"], "peerDependencies": { "svelte": "^4.0.0"