From 92301c5cf2004f7aa062df6a72b25b37f99e1df5 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 9 Oct 2024 21:56:32 -0700 Subject: [PATCH] feat: mark scripts in libraries as being side effect free by default (#12372) --- .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 6455c2ce7d33..c1332da75ce2 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 0808f8d2649b..c07ba6eb68ca 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"