chore: switch from npm to pnpm (#8514)

.github/workflows/ci.yml

@@ -24,12 +24,14 @@ jobs:
             os: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.4
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: npm
+          cache: pnpm
-      - run: npm install
+      - run: pnpm install --frozen-lockfile
-      - run: npm run test:integration
+      - run: node node_modules/puppeteer/install.js
+      - run: pnpm test:integration
         env:
           CI: true
   Lint:
@@ -37,10 +39,11 @@ jobs:
     timeout-minutes: 5
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.4
       - uses: actions/setup-node@v3
         with:
-          cache: npm
+          cache: pnpm
-      - run: 'npm i && npm run lint'
+      - run: 'pnpm i && pnpm lint'
   Unit:
     runs-on: ${{ matrix.os }}
     timeout-minutes: 10
@@ -59,10 +62,11 @@ jobs:
             os: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.4
       - uses: actions/setup-node@v3
         with:
-          cache: npm
+          cache: pnpm
-      - run: npm install
+      - run: pnpm install
         env:
           SKIP_PREPARE: true
-      - run: npm run test:unit
+      - run: pnpm test:unit

CONTRIBUTING.md

@@ -72,9 +72,9 @@ Small pull requests are much easier to review and more likely to get merged.
 
 ### Installation
 
-1. Ensure you have [npm](https://www.npmjs.com/get-npm) installed.
+1. Ensure you have [pnpm](https://pnpm.io/installation) installed.
-1. After cloning the repository, run `npm install` in the root of the repository.
+1. After cloning the repository, run `pnpm install` in the root of the repository.
-1. To start a development server, run `npm run dev`.
+1. To compile in watch mode, run `pnpm dev`.
 
 ### Creating a branch
 
@@ -94,8 +94,8 @@ Test samples are kept in `/test/xxx/samples` folder.
 
 #### Running tests
 
-1. To run test, run `npm run test`.
+1. To run test, run `pnpm test`.
-1. To run test for a specific feature, you can use the `-g` (aka `--grep`) option. For example, to only run test involving transitions, run `npm run test -- -g transition`.
+1. To run test for a specific feature, you can use the `-g` (aka `--grep`) option. For example, to only run test involving transitions, run `pnpm test -- -g transition`.
 
 ##### Running solo test
 
@@ -106,11 +106,11 @@ Test samples are kept in `/test/xxx/samples` folder.
 ##### Updating `.expected` files
 
 1. Tests suites like `css`, `js`, `server-side-rendering` asserts that the generated output has to match the content in the `.expected` file. For example, in the `js` test suites, the generated js code is compared against the content in `expected.js`.
-1. To update the content of the `.expected` file, run the test with `--update` flag. (`npm run test --update`)
+1. To update the content of the `.expected` file, run the test with `--update` flag. (`pnpm test --update`)
 
 ### Style guide
 
-[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`.
+[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `pnpm lint`.
 
 #### Code conventions
 
@@ -122,8 +122,8 @@ Test samples are kept in `/test/xxx/samples` folder.
 Please make sure the following is done when submitting a pull request:
 
 1. Describe your **test plan** in your pull request description. Make sure to test your changes.
-1. Make sure your code lints (`npm run lint`).
+1. Make sure your code lints (`pnpm lint`).
-1. Make sure your tests pass (`npm run test`).
+1. Make sure your tests pass (`pnpm test`).
 
 All pull requests should be opened against the `master` branch. Make sure the PR does only one thing, otherwise please split it.
 

README.md

@@ -34,7 +34,7 @@ To install and work on Svelte locally:
 ```bash
 git clone https://github.com/sveltejs/svelte.git
 cd svelte
-npm install
+pnpm install
 ```
 
 > Do not use Yarn to install the dependencies, as the specific package versions in `package-lock.json` are used to build and test Svelte.
@@ -42,13 +42,13 @@ npm install
 To build the compiler and all the other modules included in the package:
 
 ```bash
-npm run build
+pnpm build
 ```
 
-To watch for changes and continually rebuild the package (this is useful if you're using [npm link](https://docs.npmjs.com/cli/link.html) to test out changes in a project locally):
+To watch for changes and continually rebuild the package (this is useful if you're using [`pnpm link`](https://pnpm.io/cli/link) to test out changes in a project locally):
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 The compiler is written in [TypeScript](https://www.typescriptlang.org/), but don't let that put you off — it's basically just JavaScript with type annotations. You'll pick it up in no time. If you're using an editor other than [Visual Studio Code](https://code.visualstudio.com/), you may need to install a plugin in order to get syntax highlighting and code hints, etc.
@@ -57,13 +57,13 @@ The compiler is written in [TypeScript](https://www.typescriptlang.org/), but do
 ### Running Tests
 
 ```bash
-npm run test
+pnpm test
 ```
 
 To filter tests, use `-g` (aka `--grep`). For example, to only run tests involving transitions:
 
 ```bash
-npm run test -- -g transition
+pnpm test -- -g transition
 ```
 
 

package.json

@@ -130,6 +130,7 @@
     "@rollup/plugin-virtual": "^3.0.1",
     "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.8.0",
     "@types/aria-query": "^5.0.1",
+    "@types/estree": "^1.0.0",
     "@types/mocha": "^10.0.1",
     "@types/node": "^14.14.31",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
@@ -159,5 +160,9 @@
     "tslib": "^2.5.0",
     "typescript": "^5.0.4",
     "util": "^0.12.5"
+  },
+  "packageManager": "pnpm@7.32.0",
+  "engines": {
+    "pnpm": ">=7.0.0"
   }
 }

test/runtime/samples/binding-input-group-each-10/_config.js

@@ -1,6 +1,6 @@
 // https://github.com/sveltejs/svelte/issues/7633
 export default {
-	async test({ assert, target, component, window }) {
+	async test({ assert, target, component }) {
 		let inputs = target.querySelectorAll('input');
 
 		assert.equal(inputs[0].checked, true);

test/runtime/samples/binding-input-group-each-9/_config.js

@@ -1,6 +1,6 @@
 // https://github.com/sveltejs/svelte/issues/7633
 export default {
-	async test({ assert, target, component, window }) {
+	async test({ assert, target, component }) {
 		let inputs = target.querySelectorAll('input');
 
 		assert.equal(inputs[0].checked, true);

test/runtime/samples/const-tag-invalidate/_config.js

@@ -4,7 +4,7 @@ export default {
 		<div>[N] B <button>Toggle</button></div>
 		<div>[N] C <button>Toggle</button></div>
 	`,
-	async test({ component, target, assert, window }) {
+	async test({ target, assert, window }) {
 		const [btn1, btn2, btn3] = target.querySelectorAll('button');
 		await btn1.dispatchEvent(new window.MouseEvent('click'));
 		await btn2.dispatchEvent(new window.MouseEvent('click'));

test/types/actions.ts

@@ -9,19 +9,14 @@ const href: Action<HTMLAnchorElement> = (node) => {
 };
 href;
 
-const required: Action<HTMLElement, boolean> = (node, param) => {
+const required: Action<HTMLElement, boolean> = (_node, _param) => {};
-	node;
-	param;
-};
 required(null as any, true);
 // @ts-expect-error (only in strict mode) boolean missing
 required(null as any);
 // @ts-expect-error no boolean
 required(null as any, 'string');
 
-const required1: Action<HTMLElement, boolean> = (node, param) => {
+const required1: Action<HTMLElement, boolean> = (_node, _param) => {
-	node;
-	param;
 	return {
 		update: (p) => p === true,
 		destroy: () => {}
@@ -29,14 +24,10 @@ const required1: Action<HTMLElement, boolean> = (node, param) => {
 };
 required1;
 
-const required2: Action<HTMLElement, boolean> = (node) => {
+const required2: Action<HTMLElement, boolean> = (_node) => {};
-	node;
-};
 required2;
 
-const required3: Action<HTMLElement, boolean> = (node, param) => {
+const required3: Action<HTMLElement, boolean> = (_node, _param) => {
-	node;
-	param;
 	return {
 		// @ts-expect-error comparison always resolves to false
 		update: (p) => p === 'd',
@@ -45,18 +36,13 @@ const required3: Action<HTMLElement, boolean> = (node, param) => {
 };
 required3;
 
-const optional: Action<HTMLElement, boolean | undefined> = (node, param?) => {
+const optional: Action<HTMLElement, boolean | undefined> = (_node, _param?) => {};
-	node;
-	param;
-};
 optional(null as any, true);
 optional(null as any);
 // @ts-expect-error no boolean
 optional(null as any, 'string');
 
-const optional1: Action<HTMLElement, boolean | undefined> = (node, param?) => {
+const optional1: Action<HTMLElement, boolean | undefined> = (_node, _param?) => {
-	node;
-	param;
 	return {
 		update: (p) => p === true,
 		destroy: () => {}
@@ -64,20 +50,13 @@ const optional1: Action<HTMLElement, boolean | undefined> = (node, param?) => {
 };
 optional1;
 
-const optional2: Action<HTMLElement, boolean | undefined> = (node) => {
+const optional2: Action<HTMLElement, boolean | undefined> = (_node) => {};
-	node;
-};
 optional2;
 
-const optional3: Action<HTMLElement, boolean | undefined> = (node, param) => {
+const optional3: Action<HTMLElement, boolean | undefined> = (_node, _param) => {};
-	node;
-	param;
-};
 optional3;
 
-const optional4: Action<HTMLElement, boolean | undefined> = (node, param?) => {
+const optional4: Action<HTMLElement, boolean | undefined> = (_node, _param?) => {
-	node;
-	param;
 	return {
 		// @ts-expect-error comparison always resolves to false
 		update: (p) => p === 'd',
@@ -86,17 +65,14 @@ const optional4: Action<HTMLElement, boolean | undefined> = (node, param?) => {
 };
 optional4;
 
-const no: Action<HTMLElement, never> = (node) => {
+const no: Action<HTMLElement, never> = (_node) => {};
-	node;
-};
 // @ts-expect-error second param
 no(null as any, true);
 no(null as any);
 // @ts-expect-error second param
 no(null as any, 'string');
 
-const no1: Action<HTMLElement, never> = (node) => {
+const no1: Action<HTMLElement, never> = (_node) => {
-	node;
 	return {
 		destroy: () => {}
 	};
@@ -104,15 +80,15 @@ const no1: Action<HTMLElement, never> = (node) => {
 no1;
 
 // @ts-expect-error param given
-const no2: Action<HTMLElement, never> = (node, param?) => {};
+const no2: Action<HTMLElement, never> = (_node, _param?) => {};
 no2;
 
 // @ts-expect-error param given
-const no3: Action<HTMLElement, never> = (node, param) => {};
+const no3: Action<HTMLElement, never> = (_node, _param) => {};
 no3;
 
 // @ts-expect-error update method given
-const no4: Action<HTMLElement, never> = (node) => {
+const no4: Action<HTMLElement, never> = (_node) => {
 	return {
 		update: () => {},
 		destroy: () => {}