feat: update to lit v2

README.md

@@ -95,7 +95,7 @@ npm init @open-wc
   <br/>
 
 - `Building`<br>
-  This generator adds a complete building setup with rollup.
+  This generator adds a complete building setup with Rollup.
   <br/>
 
 ## Extending

package.json

@@ -23,6 +23,7 @@
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint --ext .ts,.js,.mjs,.cjs .",
     "lint:prettier": "prettier \"**/*.{ts,js,mjs,cjs,md}\" --check --ignore-path .eslintignore",
+    "format": "eslint --ext .ts,.js,.mjs,.cjs  --fix && prettier \"**/*.{ts,js,mjs,cjs,md}\" --check --ignore-path .eslintignore --write",
     "release": "standard-version && git push --follow-tags origin master && npm publish",
     "start": "npm run build && node ./dist/create.js",
     "test": "npm run test:node",
@@ -56,19 +57,24 @@
     "@babel/register": "^7.15.3",
     "@open-wc/building-rollup": "^1.10.0",
     "@open-wc/eslint-config": "^4.3.0",
+    "@open-wc/testing": "^2.5.33",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@web/rollup-plugin-html": "^1.9.1",
+    "@web/rollup-plugin-import-meta-assets": "^1.0.7",
     "babel-plugin-transform-dynamic-import": "^2.1.0",
     "chai": "^4.3.4",
     "chai-fs": "^2.0.0",
     "eslint": "^7.32.0",
-    "eslint-config-prettier": "^7.2.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-lit": "^1.5.1",
     "eslint-plugin-lit-a11y": "^1.0.1",
     "eslint-plugin-wc": "^1.3.1",
+    "lit": "^2.0.0-rc.2",
     "lit-element": "^2.5.1",
-    "mocha": "^8.4.0",
+    "mocha": "^9.0.3",
     "onchange": "^7.1.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.2",
     "standard-version": "^9.3.1"
   },
   "prettier": {

src/core.js

@@ -27,6 +27,7 @@ const pkgJsonOrder = [
   'main',
   'module',
   'browser',
+  'exports',
   'man',
   'preferGlobal',
   'bin',
@@ -52,6 +53,8 @@ const pkgJsonOrder = [
   'publishConfig',
 ];
 
+const sortedValues = ['dependencies', 'devDependencies'];
+
 /**
  *
  * @param {Function[]} mixins
@@ -328,13 +331,15 @@ export async function writeFilesToDisk() {
 export function optionsToCommand(options, generatorName = '@open-wc') {
   let command = `npm init ${generatorName} `;
   Object.keys(options).forEach(key => {
-    const value = options[key];
-    if (typeof value === 'string' || typeof value === 'number') {
-      command += `--${key} ${value} `;
-    } else if (typeof value === 'boolean' && value === true) {
-      command += `--${key} `;
-    } else if (Array.isArray(value)) {
-      command += `--${key} ${value.join(' ')} `;
+    if (key !== '_scaffoldFilesFor') {
+      const value = options[key];
+      if (typeof value === 'string' || typeof value === 'number') {
+        command += `--${key} ${value} `;
+      } else if (typeof value === 'boolean' && value === true) {
+        command += `--${key} `;
+      } else if (Array.isArray(value)) {
+        command += `--${key} ${value.join(' ')} `;
+      }
     }
   });
   return command;
@@ -445,11 +450,20 @@ export function copyTemplateJsonInto(
     const temp = {};
     const indexOf = k => {
       const i = pkgJsonOrder.indexOf(k);
-      return i === -1 ? Infinity : 0;
+      return i === -1 ? Number.MAX_SAFE_INTEGER : i;
     };
     const entries = Object.entries(finalObj).sort(([a], [b]) => indexOf(a) - indexOf(b));
     for (const [k, v] of entries) {
-      temp[k] = v;
+      let finalV = v;
+      if (sortedValues.includes(k)) {
+        const newV = {};
+        const vEntries = Object.entries(v).sort();
+        for (const [k2, v2] of vEntries) {
+          newV[k2] = v2;
+        }
+        finalV = newV;
+      }
+      temp[k] = finalV;
     }
     finalObj = temp;
   }

src/generators/app-lit-element-ts/index.js

@@ -20,8 +20,8 @@ export const TsAppLitElementMixin = subclass =>
       );
 
       this.copyTemplate(
-        `${__dirname}/templates/open-wc-logo.ts`,
-        this.destinationPath(`src/open-wc-logo.ts`),
+        `${__dirname}/templates/open-wc-logo.svg`,
+        this.destinationPath(`assets/open-wc-logo.svg`),
       );
 
       this.copyTemplateJsonInto(
@@ -49,7 +49,7 @@ export const TsAppLitElementMixin = subclass =>
         await this.copyTemplates(`${__dirname}/templates/static-demoing/**/*`);
       }
 
-      if (this.options.scaffoldFilesFor && this.options.scaffoldFilesFor.includes('demoing')) {
+      if (this.options._scaffoldFilesFor && this.options._scaffoldFilesFor.includes('demoing')) {
         this.copyTemplate(
           `${__dirname}/templates/my-app.stories.ts`,
           this.destinationPath(`./stories/${tagName}.stories.ts`),
@@ -58,7 +58,7 @@ export const TsAppLitElementMixin = subclass =>
         await this.copyTemplates(`${__dirname}/templates/static-scaffold-demoing/**/*`);
       }
 
-      if (this.options.scaffoldFilesFor && this.options.scaffoldFilesFor.includes('testing')) {
+      if (this.options._scaffoldFilesFor && this.options._scaffoldFilesFor.includes('testing')) {
         this.copyTemplate(
           `${__dirname}/templates/my-app.test.ts`,
           this.destinationPath(`./test/${tagName}.test.ts`),

src/generators/app-lit-element-ts/templates/MyApp.ts

@@ -1,5 +1,7 @@
-import { LitElement, html, css, property } from 'lit-element';
-import { openWcLogo } from './open-wc-logo.js';
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+
+const logo = new URL('../../assets/open-wc-logo.svg', import.meta.url).href;
 
 export class <%= className %> extends LitElement {
   @property({ type: String }) title = 'My app';
@@ -23,7 +25,7 @@ export class <%= className %> extends LitElement {
       flex-grow: 1;
     }
 
-    .logo > svg {
+    .logo {
       margin-top: 36px;
       animation: app-logo-spin infinite 20s linear;
     }
@@ -50,7 +52,7 @@ export class <%= className %> extends LitElement {
   render() {
     return html`
       <main>
-        <div class="logo">${openWcLogo}</div>
+        <div class="logo"><img alt="open-wc logo" src=${logo} /></div>
         <h1>${this.title}</h1>
 
         <p>Edit <code>src/<%= className %>.ts</code> and save to reload.</p>

src/generators/app-lit-element-ts/templates/my-app.stories.ts

@@ -1,4 +1,4 @@
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'lit';
 import '../src/<%= tagName %>.js';
 
 export default {

src/generators/app-lit-element-ts/templates/my-app.test.ts

@@ -1,4 +1,5 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
 
 import { <%= className %> } from '../src/<%= className %>.js';
 import '../src/<%= tagName %>.js';

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

@@ -5,8 +5,7 @@
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\""
   },
   "dependencies": {
-    "lit-html": "^1.4.1",
-    "lit-element": "^2.5.1"
+    "lit": "^2.0.0-rc.2"
   },
   "devDependencies": {
     "@web/dev-server": "^0.1.21",

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

@@ -1,17 +1,29 @@
 // import { playwrightLauncher } from '@web/test-runner-playwright';
 
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
   files: 'out-tsc/test/**/*.test.js',
-  nodeResolve: true,
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
 
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
   // esbuildTarget: 'auto',
 
-  /** Confgure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
   /** Amount of browsers to run concurrently */
   // concurrentBrowsers: 2,
 

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

@@ -4,21 +4,19 @@
 const hmr = process.argv.includes('--hmr');
 
 export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  nodeResolve: true,
   open: '/',
   watch: !hmr,
-
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
   // esbuildTarget: 'auto'
 
   /** Set appIndex to enable SPA routing */
   // appIndex: 'demo/index.html',
 
-  /** Confgure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
   plugins: [
     /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
     // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),

src/generators/app-lit-element/index.js

@@ -20,8 +20,8 @@ export const AppLitElementMixin = subclass =>
       );
 
       this.copyTemplate(
-        `${__dirname}/templates/open-wc-logo.js`,
-        this.destinationPath(`src/open-wc-logo.js`),
+        `${__dirname}/templates/open-wc-logo.svg`,
+        this.destinationPath(`assets/open-wc-logo.svg`),
       );
 
       this.copyTemplateJsonInto(
@@ -44,7 +44,7 @@ export const AppLitElementMixin = subclass =>
         await this.copyTemplates(`${__dirname}/templates/static-demoing/**/*`);
       }
 
-      if (this.options.scaffoldFilesFor && this.options.scaffoldFilesFor.includes('demoing')) {
+      if (this.options._scaffoldFilesFor && this.options._scaffoldFilesFor.includes('demoing')) {
         this.copyTemplate(
           `${__dirname}/templates/my-app.stories.js`,
           this.destinationPath(`./stories/${tagName}.stories.js`),
@@ -53,7 +53,7 @@ export const AppLitElementMixin = subclass =>
         await this.copyTemplates(`${__dirname}/templates/static-scaffold-demoing/**/*`);
       }
 
-      if (this.options.scaffoldFilesFor && this.options.scaffoldFilesFor.includes('testing')) {
+      if (this.options._scaffoldFilesFor && this.options._scaffoldFilesFor.includes('testing')) {
         this.copyTemplate(
           `${__dirname}/templates/my-app.test.js`,
           this.destinationPath(`./test/${tagName}.test.js`),

src/generators/app-lit-element/templates/MyApp.js

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from 'lit-element';
-import { openWcLogo } from './open-wc-logo.js';
+import { LitElement, html, css } from 'lit';
+
+const logo = new URL('../assets/open-wc-logo.svg', import.meta.url).href;
 
 export class <%= className %> extends LitElement {
   static get properties() {
@@ -28,7 +29,7 @@ export class <%= className %> extends LitElement {
         flex-grow: 1;
       }
 
-      .logo > svg {
+      .logo {
         margin-top: 36px;
         animation: app-logo-spin infinite 20s linear;
       }
@@ -61,7 +62,7 @@ export class <%= className %> extends LitElement {
   render() {
     return html`
       <main>
-        <div class="logo">${openWcLogo}</div>
+        <div class="logo"><img alt="open-wc logo" src=${logo} /></div>
         <h1>${this.title}</h1>
 
         <p>Edit <code>src/<%= className %>.js</code> and save to reload.</p>