From f21b29ef359670ba434931509de4273638767cb8 Mon Sep 17 00:00:00 2001 From: Julien Lengrand-Lambert Date: Tue, 13 Jul 2021 11:05:44 +0200 Subject: [PATCH] Move to lit 2 --- package-lock.json | 77 ++++++++++++++++++++++++++++++++++ package.json | 27 ++++++------ src/BetterSetupMic.ts | 78 ----------------------------------- src/better-setup-mic.ts | 65 ++++++++++++++++++++++++++++- src/open-wc-logo.ts | 33 --------------- test/better-setup-mic.test.ts | 2 +- 6 files changed, 154 insertions(+), 128 deletions(-) delete mode 100644 src/BetterSetupMic.ts delete mode 100644 src/open-wc-logo.ts diff --git a/package-lock.json b/package-lock.json index cd2b5a8..770c3db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "version": "0.0.0", "license": "MIT", "dependencies": { + "lit": "^2.0.0-rc.2", "lit-element": "^2.5.1", "lit-html": "^1.4.1" }, @@ -1747,6 +1748,11 @@ "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==", "dev": true }, + "node_modules/@lit/reactive-element": { + "version": "1.0.0-rc.2", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0-rc.2.tgz", + "integrity": "sha512-cujeIl5Ei8FC7UHf4/4Q3bRJOtdTe1vpJV/JEBYCggedmQ+2P8A2oz7eE+Vxi6OJ4nc0X+KZxXnBoH4QrEbmEQ==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2397,6 +2403,11 @@ "@types/sinon": "*" } }, + "node_modules/@types/trusted-types": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-1.0.6.tgz", + "integrity": "sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==" + }, "node_modules/@types/uglify-js": { "version": "3.13.1", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz", @@ -7446,6 +7457,16 @@ "enquirer": ">= 2.3.0 < 3" } }, + "node_modules/lit": { + "version": "2.0.0-rc.2", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0-rc.2.tgz", + "integrity": "sha512-BOCuoJR04WaTV8UqTKk09cNcQA10Aq2LCcBOiHuF7TzWH5RNDsbCBP5QM9sLBSotGTXbDug/gFO08jq6TbyEtw==", + "dependencies": { + "@lit/reactive-element": "^1.0.0-rc.2", + "lit-element": "^3.0.0-rc.2", + "lit-html": "^2.0.0-rc.3" + } + }, "node_modules/lit-element": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz", @@ -7459,6 +7480,23 @@ "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz", "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==" }, + "node_modules/lit/node_modules/lit-element": { + "version": "3.0.0-rc.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0-rc.2.tgz", + "integrity": "sha512-2Z7DabJ3b5K+p5073vFjMODoaWqy5PIaI4y6ADKm+fCGc8OnX9fU9dMoUEBZjFpd/bEFR9PBp050tUtBnT9XTQ==", + "dependencies": { + "@lit/reactive-element": "^1.0.0-rc.2", + "lit-html": "^2.0.0-rc.3" + } + }, + "node_modules/lit/node_modules/lit-html": { + "version": "2.0.0-rc.3", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-rc.3.tgz", + "integrity": "sha512-Y6P8LlAyQuqvzq6l/Nc4z5/P5M/rVLYKQIRxcNwSuGajK0g4kbcBFQqZmgvqKG+ak+dHZjfm2HUw9TF5N/pkCw==", + "dependencies": { + "@types/trusted-types": "^1.0.1" + } + }, "node_modules/load-json-file": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", @@ -12817,6 +12855,11 @@ "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==", "dev": true }, + "@lit/reactive-element": { + "version": "1.0.0-rc.2", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0-rc.2.tgz", + "integrity": "sha512-cujeIl5Ei8FC7UHf4/4Q3bRJOtdTe1vpJV/JEBYCggedmQ+2P8A2oz7eE+Vxi6OJ4nc0X+KZxXnBoH4QrEbmEQ==" + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -13419,6 +13462,11 @@ "@types/sinon": "*" } }, + "@types/trusted-types": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-1.0.6.tgz", + "integrity": "sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==" + }, "@types/uglify-js": { "version": "3.13.1", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz", @@ -17226,6 +17274,35 @@ "wrap-ansi": "^7.0.0" } }, + "lit": { + "version": "2.0.0-rc.2", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0-rc.2.tgz", + "integrity": "sha512-BOCuoJR04WaTV8UqTKk09cNcQA10Aq2LCcBOiHuF7TzWH5RNDsbCBP5QM9sLBSotGTXbDug/gFO08jq6TbyEtw==", + "requires": { + "@lit/reactive-element": "^1.0.0-rc.2", + "lit-element": "^3.0.0-rc.2", + "lit-html": "^2.0.0-rc.3" + }, + "dependencies": { + "lit-element": { + "version": "3.0.0-rc.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0-rc.2.tgz", + "integrity": "sha512-2Z7DabJ3b5K+p5073vFjMODoaWqy5PIaI4y6ADKm+fCGc8OnX9fU9dMoUEBZjFpd/bEFR9PBp050tUtBnT9XTQ==", + "requires": { + "@lit/reactive-element": "^1.0.0-rc.2", + "lit-html": "^2.0.0-rc.3" + } + }, + "lit-html": { + "version": "2.0.0-rc.3", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-rc.3.tgz", + "integrity": "sha512-Y6P8LlAyQuqvzq6l/Nc4z5/P5M/rVLYKQIRxcNwSuGajK0g4kbcBFQqZmgvqKG+ak+dHZjfm2HUw9TF5N/pkCw==", + "requires": { + "@types/trusted-types": "^1.0.1" + } + } + } + }, "lit-element": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz", diff --git a/package.json b/package.json index c7fe87c..91e2ac7 100644 --- a/package.json +++ b/package.json @@ -1,23 +1,23 @@ { "devDependencies": { - "eslint": "^7.30.0", + "@open-wc/building-rollup": "^1.10.0", "@open-wc/eslint-config": "^4.3.0", - "@typescript-eslint/parser": "^4.28.3", + "@open-wc/testing": "^2.5.33", "@typescript-eslint/eslint-plugin": "^4.28.3", - "prettier": "^2.2.1", + "@typescript-eslint/parser": "^4.28.3", + "@web/dev-server": "^0.1.18", + "@web/test-runner": "^0.12.20", + "concurrently": "^5.3.0", + "deepmerge": "^4.2.2", + "eslint": "^7.30.0", "eslint-config-prettier": "^7.2.0", "husky": "^4.3.8", "lint-staged": "^10.5.4", - "@web/test-runner": "^0.12.20", - "@open-wc/testing": "^2.5.33", - "@open-wc/building-rollup": "^1.10.0", - "deepmerge": "^4.2.2", + "prettier": "^2.2.1", "rimraf": "^3.0.2", "rollup": "^2.53.1", - "@web/dev-server": "^0.1.18", - "concurrently": "^5.3.0", - "typescript": "^4.3.5", - "tslib": "^2.3.0" + "tslib": "^2.3.0", + "typescript": "^4.3.5" }, "scripts": { "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore", @@ -34,8 +34,7 @@ "author": "better-setup-mic", "license": "MIT", "dependencies": { - "lit-html": "^1.4.1", - "lit-element": "^2.5.1" + "lit": "^2.0.0-rc.2" }, "eslintConfig": { "parser": "@typescript-eslint/parser", @@ -76,4 +75,4 @@ "prettier --write" ] } -} \ No newline at end of file +} diff --git a/src/BetterSetupMic.ts b/src/BetterSetupMic.ts deleted file mode 100644 index 2dac184..0000000 --- a/src/BetterSetupMic.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { LitElement, html, css, property } from 'lit-element'; -import { openWcLogo } from './open-wc-logo.js'; - -export class BetterSetupMic extends LitElement { - @property({ type: String }) title = 'My app'; - - static styles = css` - :host { - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - font-size: calc(10px + 2vmin); - color: #1a2b42; - max-width: 960px; - margin: 0 auto; - text-align: center; - background-color: var(--better-setup-mic-background-color); - } - - main { - flex-grow: 1; - } - - .logo > svg { - margin-top: 36px; - animation: app-logo-spin infinite 20s linear; - } - - @keyframes app-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - - .app-footer { - font-size: calc(12px + 0.5vmin); - align-items: center; - } - - .app-footer a { - margin-left: 5px; - } - `; - - render() { - return html` -
- -

${this.title}

- -

Edit src/BetterSetupMic.ts and save to reload.

- - Code examples - -
- -

- 🚽 Made with love by - open-wc. -

- `; - } -} diff --git a/src/better-setup-mic.ts b/src/better-setup-mic.ts index 1e637d4..39583f9 100644 --- a/src/better-setup-mic.ts +++ b/src/better-setup-mic.ts @@ -1,3 +1,64 @@ -import { BetterSetupMic } from './BetterSetupMic.js'; +import {LitElement, css, html} from 'lit'; +import {customElement, property} from 'lit/decorators.js'; -customElements.define('better-setup-mic', BetterSetupMic); +@customElement('better-setup-mic') +export class BetterSetupMic extends LitElement { + @property({ type: String }) title = 'My app'; + + static styles = css` + :host { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + font-size: calc(10px + 2vmin); + color: #1a2b42; + max-width: 960px; + margin: 0 auto; + text-align: center; + background-color: var(--better-setup-mic-background-color); + } + + main { + flex-grow: 1; + } + + .app-footer { + font-size: calc(12px + 0.5vmin); + align-items: center; + } + + .app-footer a { + margin-left: 5px; + } + `; + + render() { + return html` +
+

${this.title}

+ +

Edit src/BetterSetupMic.ts and save to reload.

+ + Code examples + +
+ +

+ 🚽 Made with love by + open-wc. +

+ `; + } +} diff --git a/src/open-wc-logo.ts b/src/open-wc-logo.ts deleted file mode 100644 index 858bade..0000000 --- a/src/open-wc-logo.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { html } from 'lit-html'; - -export const openWcLogo = html` - - - - - - - - - - - -`; diff --git a/test/better-setup-mic.test.ts b/test/better-setup-mic.test.ts index 7fe253d..05c72b7 100644 --- a/test/better-setup-mic.test.ts +++ b/test/better-setup-mic.test.ts @@ -1,6 +1,6 @@ import { html, fixture, expect } from '@open-wc/testing'; -import { BetterSetupMic } from '../src/BetterSetupMic.js'; +import { BetterSetupMic } from '../src/better-setup-mic.js'; import '../src/better-setup-mic.js'; describe('BetterSetupMic', () => {