Lots of modernization. (#104)

* ci: run CI against node 18, 20, and 22

* fix: ensure all index.html files leverage the "viewport" meta tag

* refactor: only use .js extensions now that the projects are "type=module"

* feat: move to Storybook Builder from Storybook Pre-built

* feat: update husky to 9.x

* fix: remove wallaby templates

* deps: use latest OpenWC versions

* deps: use latest @web versions

* deps: update @babel dependencies

* deps: use latest Rollup depednencies

* deps: use latest TS

* deps: use latest CEM analyzer

* deps: use latest lint-staged

* deps: use latest prettier depdendencies

* deps: update concurrently

* deps: use latest rimraf (#110)

* deps: latest lint plugins (#111)

* deps: use lit@^3.0 (#113)

* chore: normalize on using "web-dev-server" over "wds" (#114)

* chore: update tsconfig for more modern values (#116)

* deps: use latest deepmerge (#117)

* fix: remove "require" in ESM contexts (#118)

* chore: remove unused dependency (#120)

* fix: ensure stories work in TS projects (#119)

* fix: correct more info URL in output (#121)

* remove: take "@babel/preset-env" out of the generators (#122)

* docs: outline node version usage (#126)

Author: Westbrook

.github/workflows/release.yml

@@ -13,15 +13,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
         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.x
-        uses: actions/setup-node@master
+      - name: Setup Node.js 22.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 14.x
+          node-version: 22.x
           registry-url: 'https://registry.npmjs.org'
 
       - name: Get yarn cache directory path

.github/workflows/verify-node.yml

@@ -12,12 +12,12 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [18.x, 20.x, 22.x]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Setup Node ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'yarn'
@@ -31,7 +31,5 @@ jobs:
       - name: Lint
         run: yarn lint
 
-      - run: npm config set scripts-prepend-node-path true
-
       - name: Test
         run: yarn test

.github/workflows/verify-windows.yml

@@ -16,12 +16,12 @@ jobs:
           git config --global core.autocrlf false
           git config --global core.eol lf
 
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - name: Setup Node 14.x
-        uses: actions/setup-node@v2
+      - name: Setup Node 22.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 14.x
+          node-version: 22.x
           cache: 'yarn'
 
       - name: Install dependencies
@@ -30,7 +30,5 @@ jobs:
       - name: Build
         run: yarn build
 
-      - run: npm config set scripts-prepend-node-path true
-
       - name: Test
         run: yarn test

.nvmrc

@@ -0,0 +1 @@
+18

README.md

@@ -18,7 +18,7 @@ Web component project scaffolding.
 npm init @open-wc
 ```
 
-<div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p><code>npm init</code> requires node 14 &amp; npm 6 or higher</p></div>
+<div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p><code>npm init</code> requires node 18 &amp; npm 6 or higher</p></div>
 
 This will kickstart a menu guiding you through all available actions.
 
@@ -30,7 +30,7 @@ This will kickstart a menu guiding you through all available actions.
      .d'    Web Components  `b.    Start or upgrade your web component project with
      .d'                     `b.   ease. All our recommendations at your fingertips.
      ::   .................   ::
-     `p.                     .q'   See more details at https://open-wc.org/init/
+     `p.                     .q'   See more details at https://open-wc.org/docs/development/generator/
       `p.    open-wc.org    .q'
        `b.     @openWc     .d'
          `q..            ..,'      Note: you can exit any time with Ctrl+C or Esc

package.json

@@ -5,6 +5,9 @@
     "access": "public"
   },
   "description": "Easily setup all the tools of Open Web Components.",
+  "engines": {
+    "node": ">=18.0.0"
+},
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -54,30 +57,30 @@
   "devDependencies": {
     "@babel/cli": "^7.24.6",
     "@babel/core": "^7.24.6",
-    "@babel/preset-env": "^7.24.6",
     "@babel/register": "^7.24.6",
-    "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@open-wc/building-rollup": "^2.2.3",
-    "@open-wc/eslint-config": "^9.2.2",
-    "@open-wc/testing": "^2.5.33",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@web/rollup-plugin-html": "^1.11.1",
-    "@web/rollup-plugin-import-meta-assets": "^1.0.8",
+    "@custom-elements-manifest/analyzer": "^0.10.2",
+    "@open-wc/eslint-config": "^12.0.3",
+    "@open-wc/testing": "^4.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@web/rollup-plugin-html": "^2.3.0",
+    "@web/rollup-plugin-import-meta-assets": "^2.2.1",
     "babel-plugin-transform-dynamic-import": "^2.1.0",
     "chai": "^4.4.1",
     "chai-fs": "^2.0.0",
     "eslint": "^8.57.0",
-    "eslint-config-prettier": "^8.10.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-lit": "^1.13.0",
-    "eslint-plugin-lit-a11y": "^1.1.0",
+    "eslint-plugin-lit-a11y": "^4.1.2",
     "eslint-plugin-wc": "^1.5.0",
-    "lit": "^2.0.2",
-    "lit-element": "^2.5.1",
+    "lit": "^3.0.0",
+    "lit-element": "^4.0.0",
     "mocha": "^9.2.2",
     "onchange": "^7.1.0",
-    "prettier": "^2.8.8",
-    "rollup-plugin-esbuild": "^5.0.0",
+    "prettier": "^3.2.5",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-workbox": "^8.1.0",
     "commit-and-tag-version": "^9.6.0"
   },
   "prettier": {

src/generators/app-lit-element-ts/templates/package.json

@@ -3,15 +3,15 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\""
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\""
   },
   "dependencies": {
-    "lit": "^2.0.2"
+    "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@web/dev-server": "^0.1.38",
-    "concurrently": "^5.3.0",
-    "typescript": "^4.5.5",
-    "tslib": "^2.3.1"
+    "@web/dev-server": "^0.4.5",
+    "concurrently": "^8.2.2",
+    "typescript": "^5.4.5",
+    "tslib": "^2.6.2"
   }
 }

src/generators/app-lit-element-ts/templates/static-demoing/.storybook/main.js

@@ -1,3 +1,8 @@
-module.exports = {
-  stories: ['../**/out-tsc/stories/*.stories.{js,md,mdx}'],
+const config = {
+  stories: ['../out-tsc/stories/**/*.stories.{js,md,mdx}'],
+  framework: {
+    name: '@web/storybook-framework-web-components',
+  },
 };
+
+export default config;

src/generators/app-lit-element-ts/templates/static-demoing/.storybook/server.mjs

@@ -1,6 +1,6 @@
 // import { playwrightLauncher } from '@web/test-runner-playwright';
 
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+const filteredLogs = ['Running in dev mode', 'Lit is in dev mode'];
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Test files to run */

src/generators/app-lit-element-ts/templates/static-testing/web-test-runner.config.mjs renamed to src/generators/app-lit-element-ts/templates/static-testing/web-test-runner.config.js

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
+    "target": "es2021",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
+    "lib": ["es2021", "dom", "DOM.Iterable"],
     "strict": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
@@ -14,7 +14,8 @@
     "sourceMap": true,
     "inlineSources": true,
     "rootDir": "./",
-    "incremental": true
+    "incremental": true,
+    "skipLibCheck": true
   },
   "include": ["**/*.ts"]
 }

src/generators/app-lit-element-ts/templates/static/web-dev-server.config.mjs renamed to src/generators/app-lit-element-ts/templates/static/web-dev-server.config.js

@@ -6,9 +6,9 @@
     "start": "web-dev-server"
   },
   "dependencies": {
-    "lit": "^2.0.2"
+    "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@web/dev-server": "^0.1.38"
+    "@web/dev-server": "^0.4.5"
   }
 }

src/generators/app-lit-element-ts/templates/tsconfig.json

@@ -1,3 +1,8 @@
-module.exports = {
-  stories: ['../**/stories/*.stories.{js,md,mdx}'],
+const config = {
+  stories: ['../stories/*.stories.{js,md,mdx}'],
+  framework: {
+    name: '@web/storybook-framework-web-components',
+  },
 };
+
+export default config;

src/generators/app-lit-element/templates/package.json

@@ -1,6 +1,6 @@
 // import { playwrightLauncher } from '@web/test-runner-playwright';
 
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+const filteredLogs = ['Running in dev mode', 'Lit is in dev mode'];
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Test files to run */

src/generators/app-lit-element/templates/static-demoing/.storybook/main.js

@@ -10,7 +10,7 @@ export default `
  \`p.                     .q'
   \`p.    open-wc.org    .q'
    \`b.     @openWc     .d'
-     \`q..            ..,'      See more details at https://open-wc.org/init/
+     \`q..            ..,'      See more details at https://open-wc.org/docs/development/generator/
         '',,,,,,,,,,''
 
 `;

src/generators/app-lit-element/templates/static-demoing/.storybook/server.js

@@ -4,17 +4,15 @@
     "start:build": "web-dev-server --root-dir dist --app-index index.html --open"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.24.6",
-    "@open-wc/building-rollup": "^2.2.3",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@web/rollup-plugin-html": "^1.11.1",
-    "@web/rollup-plugin-import-meta-assets": "^1.0.8",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@web/rollup-plugin-html": "^2.3.0",
+    "@web/rollup-plugin-import-meta-assets": "^2.2.1",
     "babel-plugin-template-html-minifier": "^4.1.0",
     "deepmerge": "^4.3.1",
-    "rimraf": "^3.0.2",
-    "rollup-plugin-esbuild": "^5.0.0",
-    "rollup-plugin-workbox": "^6.2.2",
-    "rollup": "^2.60.2"
+    "rimraf": "^5.0.7",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-workbox": "^8.1.0",
+    "rollup": "^4.18.0"
   }
 }

src/generators/app-lit-element/templates/static-testing/web-test-runner.config.js

@@ -1,6 +1,6 @@
 import nodeResolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
-import html from '@web/rollup-plugin-html';
+import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
 import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
 import esbuild from 'rollup-plugin-esbuild';
 import { generateSW } from 'rollup-plugin-workbox';
@@ -37,7 +37,7 @@ export default {
     babel({
       plugins: [
         [
-          require.resolve('babel-plugin-template-html-minifier'),
+          'babel-plugin-template-html-minifier',
           {
             modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
             failOnError: false,

src/generators/app/header.js

@@ -4,17 +4,15 @@
     "start:build": "web-dev-server --root-dir dist --app-index index.html --open"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.24.6",
-    "@open-wc/building-rollup": "^2.2.3",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@web/rollup-plugin-html": "^1.11.1",
-    "@web/rollup-plugin-import-meta-assets": "^1.0.8",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@web/rollup-plugin-html": "^2.3.0",
+    "@web/rollup-plugin-import-meta-assets": "^2.2.1",
     "babel-plugin-template-html-minifier": "^4.1.0",
     "deepmerge": "^4.3.1",
-    "rimraf": "^3.0.2",
-    "rollup-plugin-esbuild": "^5.0.0",
-    "rollup-plugin-workbox": "^6.2.2",
-    "rollup": "^2.60.2"
+    "rimraf": "^5.0.7",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-workbox": "^8.1.0",
+    "rollup": "^4.18.0"
   }
 }

src/generators/building-rollup-ts/templates/package.json

@@ -1,6 +1,6 @@
 import nodeResolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
-import html from '@web/rollup-plugin-html';
+import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
 import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
 import esbuild from 'rollup-plugin-esbuild';
 import { generateSW } from 'rollup-plugin-workbox';
@@ -37,7 +37,7 @@ export default {
     babel({
       plugins: [
         [
-          require.resolve('babel-plugin-template-html-minifier'),
+          'babel-plugin-template-html-minifier',
           {
             modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
             failOnError: false,

src/generators/building-rollup-ts/templates/static/rollup.config.js

@@ -9,6 +9,6 @@
     "analyze": "cem analyze --litelement"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.4.17"
+    "@custom-elements-manifest/analyzer": "^0.10.2"
   }
 }

src/generators/building-rollup/templates/package.json

@@ -1,9 +1,15 @@
 {
   "scripts": {
-    "storybook": "tsc && <%= scriptRunCommand %> analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
-    "storybook:build": "tsc && <%= scriptRunCommand %> analyze -- --exclude dist && build-storybook"
+    "storybook": "tsc && <%= scriptRunCommand %> analyze -- --exclude dist && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"storybook dev -p 8080\"",
+    "storybook:build": "tsc && <%= scriptRunCommand %> analyze -- --exclude dist && storybook build"
   },
   "devDependencies": {
-    "@web/dev-server-storybook": "^0.5.4"
+    "@storybook/addon-a11y": "^7.5.0",
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/web-components": "^7.5.0",
+    "@web/storybook-builder": "^0.1.16",
+    "@web/storybook-framework-web-components": "^0.1.2",
+    "storybook": "^7.5.0"
   }
 }

src/generators/building-rollup/templates/static/rollup.config.js

@@ -1,3 +1,8 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
+const config = {
+  stories: ['../**/dist/stories/*.stories.{js,md,mdx}'],
+  framework: {
+    name: '@web/storybook-framework-web-components',
+  },
 };
+
+export default config;