Skip to content

Commit fc090cd

Browse files
feat: update to lit v2 (#36)
* feat!: update to lit v2 * style: do the rain dance for prettier * style: remove extraneous comments * style: remove extraneous comment * chore: update eslint-config-prettier and other devdeps * style: prefer short form of eslint-configs * test: add lit as devdep for tests * style: oogah chukkuh oogah chukkuh Co-authored-by: Benny Powers <[email protected]>
1 parent 0d05bea commit fc090cd

File tree

84 files changed

+1306
-654
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+1306
-654
lines changed

README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ npm init @open-wc
9595
<br/>
9696

9797
- `Building`<br>
98-
This generator adds a complete building setup with rollup.
98+
This generator adds a complete building setup with Rollup.
9999
<br/>
100100

101101
## Extending

package.json

+9-3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"lint": "npm run lint:eslint && npm run lint:prettier",
2424
"lint:eslint": "eslint --ext .ts,.js,.mjs,.cjs .",
2525
"lint:prettier": "prettier \"**/*.{ts,js,mjs,cjs,md}\" --check --ignore-path .eslintignore",
26+
"format": "eslint --ext .ts,.js,.mjs,.cjs --fix && prettier \"**/*.{ts,js,mjs,cjs,md}\" --check --ignore-path .eslintignore --write",
2627
"release": "standard-version && git push --follow-tags origin master && npm publish",
2728
"start": "npm run build && node ./dist/create.js",
2829
"test": "npm run test:node",
@@ -56,19 +57,24 @@
5657
"@babel/register": "^7.15.3",
5758
"@open-wc/building-rollup": "^1.10.0",
5859
"@open-wc/eslint-config": "^4.3.0",
60+
"@open-wc/testing": "^2.5.33",
61+
"@rollup/plugin-babel": "^5.3.0",
62+
"@web/rollup-plugin-html": "^1.9.1",
63+
"@web/rollup-plugin-import-meta-assets": "^1.0.7",
5964
"babel-plugin-transform-dynamic-import": "^2.1.0",
6065
"chai": "^4.3.4",
6166
"chai-fs": "^2.0.0",
6267
"eslint": "^7.32.0",
63-
"eslint-config-prettier": "^7.2.0",
68+
"eslint-config-prettier": "^8.3.0",
6469
"eslint-plugin-import": "^2.24.0",
6570
"eslint-plugin-lit": "^1.5.1",
6671
"eslint-plugin-lit-a11y": "^1.0.1",
6772
"eslint-plugin-wc": "^1.3.1",
73+
"lit": "^2.0.0-rc.2",
6874
"lit-element": "^2.5.1",
69-
"mocha": "^8.4.0",
75+
"mocha": "^9.0.3",
7076
"onchange": "^7.1.0",
71-
"prettier": "^2.2.1",
77+
"prettier": "^2.3.2",
7278
"standard-version": "^9.3.1"
7379
},
7480
"prettier": {

src/core.js

+23-9
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const pkgJsonOrder = [
2727
'main',
2828
'module',
2929
'browser',
30+
'exports',
3031
'man',
3132
'preferGlobal',
3233
'bin',
@@ -52,6 +53,8 @@ const pkgJsonOrder = [
5253
'publishConfig',
5354
];
5455

56+
const sortedValues = ['dependencies', 'devDependencies'];
57+
5558
/**
5659
*
5760
* @param {Function[]} mixins
@@ -328,13 +331,15 @@ export async function writeFilesToDisk() {
328331
export function optionsToCommand(options, generatorName = '@open-wc') {
329332
let command = `npm init ${generatorName} `;
330333
Object.keys(options).forEach(key => {
331-
const value = options[key];
332-
if (typeof value === 'string' || typeof value === 'number') {
333-
command += `--${key} ${value} `;
334-
} else if (typeof value === 'boolean' && value === true) {
335-
command += `--${key} `;
336-
} else if (Array.isArray(value)) {
337-
command += `--${key} ${value.join(' ')} `;
334+
if (key !== '_scaffoldFilesFor') {
335+
const value = options[key];
336+
if (typeof value === 'string' || typeof value === 'number') {
337+
command += `--${key} ${value} `;
338+
} else if (typeof value === 'boolean' && value === true) {
339+
command += `--${key} `;
340+
} else if (Array.isArray(value)) {
341+
command += `--${key} ${value.join(' ')} `;
342+
}
338343
}
339344
});
340345
return command;
@@ -445,11 +450,20 @@ export function copyTemplateJsonInto(
445450
const temp = {};
446451
const indexOf = k => {
447452
const i = pkgJsonOrder.indexOf(k);
448-
return i === -1 ? Infinity : 0;
453+
return i === -1 ? Number.MAX_SAFE_INTEGER : i;
449454
};
450455
const entries = Object.entries(finalObj).sort(([a], [b]) => indexOf(a) - indexOf(b));
451456
for (const [k, v] of entries) {
452-
temp[k] = v;
457+
let finalV = v;
458+
if (sortedValues.includes(k)) {
459+
const newV = {};
460+
const vEntries = Object.entries(v).sort();
461+
for (const [k2, v2] of vEntries) {
462+
newV[k2] = v2;
463+
}
464+
finalV = newV;
465+
}
466+
temp[k] = finalV;
453467
}
454468
finalObj = temp;
455469
}

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export const TsAppLitElementMixin = subclass =>
2020
);
2121

2222
this.copyTemplate(
23-
`${__dirname}/templates/open-wc-logo.ts`,
24-
this.destinationPath(`src/open-wc-logo.ts`),
23+
`${__dirname}/templates/open-wc-logo.svg`,
24+
this.destinationPath(`assets/open-wc-logo.svg`),
2525
);
2626

2727
this.copyTemplateJsonInto(
@@ -49,7 +49,7 @@ export const TsAppLitElementMixin = subclass =>
4949
await this.copyTemplates(`${__dirname}/templates/static-demoing/**/*`);
5050
}
5151

52-
if (this.options.scaffoldFilesFor && this.options.scaffoldFilesFor.includes('demoing')) {
52+
if (this.options._scaffoldFilesFor && this.options._scaffoldFilesFor.includes('demoing')) {
5353
this.copyTemplate(
5454
`${__dirname}/templates/my-app.stories.ts`,
5555
this.destinationPath(`./stories/${tagName}.stories.ts`),
@@ -58,7 +58,7 @@ export const TsAppLitElementMixin = subclass =>
5858
await this.copyTemplates(`${__dirname}/templates/static-scaffold-demoing/**/*`);
5959
}
6060

61-
if (this.options.scaffoldFilesFor && this.options.scaffoldFilesFor.includes('testing')) {
61+
if (this.options._scaffoldFilesFor && this.options._scaffoldFilesFor.includes('testing')) {
6262
this.copyTemplate(
6363
`${__dirname}/templates/my-app.test.ts`,
6464
this.destinationPath(`./test/${tagName}.test.ts`),

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

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import { LitElement, html, css, property } from 'lit-element';
2-
import { openWcLogo } from './open-wc-logo.js';
1+
import { LitElement, html, css } from 'lit';
2+
import { property } from 'lit/decorators.js';
3+
4+
const logo = new URL('../../assets/open-wc-logo.svg', import.meta.url).href;
35

46
export class <%= className %> extends LitElement {
57
@property({ type: String }) title = 'My app';
@@ -23,7 +25,7 @@ export class <%= className %> extends LitElement {
2325
flex-grow: 1;
2426
}
2527
26-
.logo > svg {
28+
.logo {
2729
margin-top: 36px;
2830
animation: app-logo-spin infinite 20s linear;
2931
}
@@ -50,7 +52,7 @@ export class <%= className %> extends LitElement {
5052
render() {
5153
return html`
5254
<main>
53-
<div class="logo">${openWcLogo}</div>
55+
<div class="logo"><img alt="open-wc logo" src=${logo} /></div>
5456
<h1>${this.title}</h1>
5557
5658
<p>Edit <code>src/<%= className %>.ts</code> and save to reload.</p>

src/generators/app-lit-element-ts/templates/custom-elements.json

-26
This file was deleted.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { html, TemplateResult } from 'lit-html';
1+
import { html, TemplateResult } from 'lit';
22
import '../src/<%= tagName %>.js';
33

44
export default {

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { html, fixture, expect } from '@open-wc/testing';
1+
import { html } from 'lit';
2+
import { fixture, expect } from '@open-wc/testing';
23

34
import { <%= className %> } from '../src/<%= className %>.js';
45
import '../src/<%= tagName %>.js';
Loading

src/generators/app-lit-element-ts/templates/open-wc-logo.ts

-33
This file was deleted.

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\""
66
},
77
"dependencies": {
8-
"lit-html": "^1.4.1",
9-
"lit-element": "^2.5.1"
8+
"lit": "^2.0.0-rc.2"
109
},
1110
"devDependencies": {
1211
"@web/dev-server": "^0.1.21",

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

+18-6
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
11
// import { playwrightLauncher } from '@web/test-runner-playwright';
22

3+
const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
4+
35
export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
6+
/** Test files to run */
47
files: 'out-tsc/test/**/*.test.js',
5-
nodeResolve: true,
8+
9+
/** Resolve bare module imports */
10+
nodeResolve: {
11+
exportConditions: ['browser', 'development'],
12+
},
13+
14+
/** Filter out lit dev mode logs */
15+
filterBrowserLogs(log) {
16+
for (const arg of log.args) {
17+
if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
18+
return false;
19+
}
20+
}
21+
return true;
22+
},
623

724
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
825
// esbuildTarget: 'auto',
926

10-
/** Confgure bare import resolve plugin */
11-
// nodeResolve: {
12-
// exportConditions: ['browser', 'development']
13-
// },
14-
1527
/** Amount of browsers to run concurrently */
1628
// concurrentBrowsers: 2,
1729

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

+5-7
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,19 @@
44
const hmr = process.argv.includes('--hmr');
55

66
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
7-
nodeResolve: true,
87
open: '/',
98
watch: !hmr,
10-
9+
/** Resolve bare module imports */
10+
nodeResolve: {
11+
exportConditions: ['browser', 'development'],
12+
},
13+
1114
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
1215
// esbuildTarget: 'auto'
1316

1417
/** Set appIndex to enable SPA routing */
1518
// appIndex: 'demo/index.html',
1619

17-
/** Confgure bare import resolve plugin */
18-
// nodeResolve: {
19-
// exportConditions: ['browser', 'development']
20-
// },
21-
2220
plugins: [
2321
/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
2422
// hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export const AppLitElementMixin = subclass =>
2020
);
2121

2222
this.copyTemplate(
23-
`${__dirname}/templates/open-wc-logo.js`,
24-
this.destinationPath(`src/open-wc-logo.js`),
23+
`${__dirname}/templates/open-wc-logo.svg`,
24+
this.destinationPath(`assets/open-wc-logo.svg`),
2525
);
2626

2727
this.copyTemplateJsonInto(
@@ -44,7 +44,7 @@ export const AppLitElementMixin = subclass =>
4444
await this.copyTemplates(`${__dirname}/templates/static-demoing/**/*`);
4545
}
4646

47-
if (this.options.scaffoldFilesFor && this.options.scaffoldFilesFor.includes('demoing')) {
47+
if (this.options._scaffoldFilesFor && this.options._scaffoldFilesFor.includes('demoing')) {
4848
this.copyTemplate(
4949
`${__dirname}/templates/my-app.stories.js`,
5050
this.destinationPath(`./stories/${tagName}.stories.js`),
@@ -53,7 +53,7 @@ export const AppLitElementMixin = subclass =>
5353
await this.copyTemplates(`${__dirname}/templates/static-scaffold-demoing/**/*`);
5454
}
5555

56-
if (this.options.scaffoldFilesFor && this.options.scaffoldFilesFor.includes('testing')) {
56+
if (this.options._scaffoldFilesFor && this.options._scaffoldFilesFor.includes('testing')) {
5757
this.copyTemplate(
5858
`${__dirname}/templates/my-app.test.js`,
5959
this.destinationPath(`./test/${tagName}.test.js`),

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

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { LitElement, html, css } from 'lit-element';
2-
import { openWcLogo } from './open-wc-logo.js';
1+
import { LitElement, html, css } from 'lit';
2+
3+
const logo = new URL('../assets/open-wc-logo.svg', import.meta.url).href;
34

45
export class <%= className %> extends LitElement {
56
static get properties() {
@@ -28,7 +29,7 @@ export class <%= className %> extends LitElement {
2829
flex-grow: 1;
2930
}
3031
31-
.logo > svg {
32+
.logo {
3233
margin-top: 36px;
3334
animation: app-logo-spin infinite 20s linear;
3435
}
@@ -61,7 +62,7 @@ export class <%= className %> extends LitElement {
6162
render() {
6263
return html`
6364
<main>
64-
<div class="logo">${openWcLogo}</div>
65+
<div class="logo"><img alt="open-wc logo" src=${logo} /></div>
6566
<h1>${this.title}</h1>
6667
6768
<p>Edit <code>src/<%= className %>.js</code> and save to reload.</p>

0 commit comments

Comments
 (0)