chore: update next branch with master

.eslintignore

@@ -8,6 +8,7 @@ stats.html
 /packages/**/demo/**/*
 /packages/dev-server-hmr/src/patches/**/*
 /packages/testing/plugins/**/*
+/packages/lit-helpers/src/spread.js
 _site/
 _site-dev
 docs/_merged_assets/

.github/workflows/canary.yml

@@ -14,33 +14,33 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
-      - name: Setup Node.js 14
-        uses: actions/setup-node@v2
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v3
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: '20'
+          cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install Dependencies
-        run: yarn --frozen-lockfile
+        run: npm ci
 
       - name: Build types
-        run: yarn types
+        run: npm run types
 
       - name: Version canary release
-        run: yarn changeset version --snapshot canary
+        run: npx changeset version --snapshot canary
 
       - name: Release canary snapshots
         id: changesets
         uses: changesets/action@master
         with:
           # This expects you to have a script called release which does a build for your packages and calls changeset publish
-          publish: yarn changeset publish --tag canary
+          publish: npx changeset publish --tag canary
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/lint.yml

@@ -14,24 +14,24 @@ jobs:
     if: ${{ contains(github.event.comment.body, 'CI format please') }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           # Check out the PR branch
           ref: ${{ github.event.pull_request.head.ref }}
 
       - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: '16'
-          cache: yarn
+          node-version: '20'
+          cache: npm
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: npm ci
 
       - name: Format
         # format the working dir, add *ALL* changed files, commit and push
         run: |
-          yarn format:prettier
+          npm run format:prettier
           echo "Setting github user"
           git config user.name github-actions
           git config user.email github-actions@github.com

.github/workflows/preview.yml

@@ -10,20 +10,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@master
+        uses: actions/checkout@v3
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
-      - name: Setup Node.js 14
-        uses: actions/setup-node@v2
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v3
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: '20'
+          cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install Dependencies
-        run: yarn --frozen-lockfile
+        run: npm ci
 
       - name: Get the slugified branch name
         run: |
@@ -39,40 +39,40 @@ jobs:
         env:
           DEPLOY_URL: ${{ steps.preview.outputs.url }}
           CONTEXT: deploy-preview
-        run: yarn site:build
+        run: npm run site:build
 
       - name: Publish to Netlify
         env:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-        run: yarn netlify deploy --alias=${{steps.slugified_branch.outputs.name}} --dir=_site
+        run: npx netlify deploy --alias=${{steps.slugified_branch.outputs.name}} --dir=_site
 
       - name: Post Previews
-        uses: actions/github-script@v4
+        uses: actions/github-script@v6
         env:
           PREVIEW_URL: ${{ steps.preview.outputs.url }}
         with:
             script: |
                 const body = `Preview published to [${process.env.PREVIEW_URL}](${process.env.PREVIEW_URL}).`;
-                github.issues.listComments({
+                github.rest.issues.listComments({
                   owner: context.repo.owner,
                   repo: context.repo.repo,
                   issue_number: context.issue.number,
                 }).then(({data}) => {
                   const priorComment = data.find(comment => comment.body.startsWith('Preview published to'));
                   if (priorComment) {
-                    github.issues.updateComment({
+                    github.rest.issues.updateComment({
                       owner: context.repo.owner,
                       repo: context.repo.repo,
                       comment_id: priorComment.id,
                       body
                     });
                   } else {
-                    github.issues.createComment({
+                    github.rest.issues.createComment({
                       owner: context.repo.owner,
                       repo: context.repo.repo,
                       issue_number: context.issue.number,
                       body
                     });
                   }
-                });
+                });

.github/workflows/release.yml

@@ -13,30 +13,30 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@master
+        uses: actions/checkout@v3
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
-      - name: Setup Node.js 14
-        uses: actions/setup-node@v2
+      - name: Use Node.js 20
+        uses: actions/setup-node@v3
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: '20'
+          cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install Dependencies
-        run: yarn --frozen-lockfile
+        run: npm ci
 
       - name: Build types
-        run: yarn types
+        run: npm run types
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
-        uses: changesets/action@master
+        uses: changesets/action@v1
         with:
           # This expects you to have a script called release which does a build for your packages and calls changeset publish
-          publish: yarn release
+          publish: npm run release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/verify-node.yml

@@ -7,58 +7,64 @@ jobs:
     name: Verify changes
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - name: Setup Node 14
-        uses: actions/setup-node@v2
+      - name: Setup Node 20
+        uses: actions/setup-node@v3
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: '20'
+          cache: 'npm'
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: npm ci
+
+      - name: Build types
+        run: npm run types
 
       - name: Lint
-        run: yarn lint
+        run: npm run lint
 
   web-tests:
     name: Web tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - name: Setup Node 14
-        uses: actions/setup-node@v2
+      - name: Setup Node 20
+        uses: actions/setup-node@v3
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: '20'
+          cache: 'npm'
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: npm ci
+
+      - name: Build types
+        run: npm run types
 
       - name: Install Playwright dependencies
-        run: npx playwright install-deps
+        run: npx playwright install-deps && npx playwright install
 
       - name: Test
-        run: yarn test:web
+        run: npm run test:web
 
   node-tests:
     name: Node tests
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ['12', '14']
+        node-version: ['18', '20']
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Setup Node ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
+          cache: 'npm'
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: npm ci
 
       - name: Test
-        run: yarn test:node
+        run: npm run test:node

.gitignore

@@ -10,14 +10,14 @@ coverage/
 
 ## generated types
 packages/*/types
+packages/*/*.d.ts*
 tsconfig.tsbuildinfo
 
 ## npm
 node_modules
 !packages/es-dev-server/test/**/node_modules
 !packages/scoped-elements/demo/**/node_modules
 npm-debug.log
-yarn-error.log
 
 ## lerna
 lerna-debug.log
@@ -29,10 +29,7 @@ lerna-debug.log
 /_site/
 /_site-dev/
 
-## we prefer yarn.lock
-package-lock.json
-## lock files in packages we do not need to save
-packages/*/yarn.lock
+yarn.lock
 
 ## build output
 dist

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+npx lint-staged

.nvmrc

@@ -1 +1 @@
-14
+20

.prettierignore

@@ -8,6 +8,7 @@ stats.html
 packages/semantic-dom-diff/bundle/get-diffable-html.js
 packages/**/test-node/**/snapshots
 /packages/demoing-storybook/storybook-static/**/*
+/packages/lit-helpers/src/spread.js
 /packages/rollup-plugin-input-html/test/fixtures/**/*
 /packages/rollup-plugin-html/dist/**/*
 /packages/testing/plugins/**/*

CONTRIBUTING.md

@@ -21,10 +21,10 @@ git remote add upstream git@github.com:open-wc/open-wc.git
 
 ## Preparing Your Local Environment for Development
 
-Now that you have cloned the repository, ensure you have [yarn](https://classic.yarnpkg.com/lang/en/) installed, then run the following command to set up the development environment.
+Now that you have cloned the repository, ensure you have Node 18+ installed, then run the following command to set up the development environment.
 
 ```sh
-yarn install
+npm install
 ```
 
 This will download and install all packages needed.
@@ -45,11 +45,11 @@ Commits are linted using precommit hooks, meaning that any code that raises a li
 
 ### Running Tests
 
-To run the tests of a package, it's recommended to `cd` into the package directory and then using `yarn test` to run them. This way you're only running tests of that specific package.
+To run the tests of a package, it's recommended to `cd` into the package directory and then using `npm test` to run them. This way you're only running tests of that specific package.
 
 ### Adding New Packages
 
-For all projects, the tsconfig/jsconfig configuration files are auto-generated. You need to add an entry to the [./workspace-packages.mjs](./workspace-packages.mjs) to let it generate a config for you. After adding an entry, run `yarn update-package-configs` to generate the files for you.
+For all projects, the tsconfig/jsconfig configuration files are auto-generated. You need to add an entry to the [./workspace-packages.mjs](./workspace-packages.mjs) to let it generate a config for you. After adding an entry, run `npm run update-package-configs` to generate the files for you.
 
 ### Creating a Changeset
 
@@ -61,7 +61,7 @@ This documents your intent to release and allows you to specify a message that w
 To create a changeset, run:
 
 ```sh
-yarn changeset
+npx changeset
 ```
 
 Use the menu to select for which packages you need a release, and then select what kind of release. For the release type, we follow [Semantic Versioning](https://semver.org/), so please take a look if you're unfamiliar.