mirror of
https://github.com/jlengrand/better-setup-mic.git
synced 2026-03-09 23:51:20 +00:00
Move to lit 2
This commit is contained in:
Julien Lengrand-Lambert
77
package-lock.json
generated
77
package-lock.json
generated
@@ -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",
|
||||
|
||||
27
package.json
27
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"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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`
|
||||
<main>
|
||||
<div class="logo">${openWcLogo}</div>
|
||||
<h1>${this.title}</h1>
|
||||
|
||||
<p>Edit <code>src/BetterSetupMic.ts</code> and save to reload.</p>
|
||||
<a
|
||||
class="app-link"
|
||||
href="https://open-wc.org/guides/developing-components/code-examples"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Code examples
|
||||
</a>
|
||||
</main>
|
||||
|
||||
<p class="app-footer">
|
||||
🚽 Made with love by
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://github.com/open-wc"
|
||||
>open-wc</a
|
||||
>.
|
||||
</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -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`
|
||||
<main>
|
||||
<h1>${this.title}</h1>
|
||||
|
||||
<p>Edit <code>src/BetterSetupMic.ts</code> and save to reload.</p>
|
||||
<a
|
||||
class="app-link"
|
||||
href="https://open-wc.org/guides/developing-components/code-examples"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Code examples
|
||||
</a>
|
||||
</main>
|
||||
|
||||
<p class="app-footer">
|
||||
🚽 Made with love by
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://github.com/open-wc"
|
||||
>open-wc</a
|
||||
>.
|
||||
</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
import { html } from 'lit-html';
|
||||
|
||||
export const openWcLogo = html`
|
||||
<svg
|
||||
width="244px"
|
||||
height="244px"
|
||||
viewBox="0 0 244 244"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#9B00FF" offset="0%"></stop>
|
||||
<stop stop-color="#0077FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g
|
||||
id="Page-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<path
|
||||
d="M205.639259,176.936244 C207.430887,174.217233 209.093339,171.405629 210.617884,168.510161 M215.112174,158.724316 C216.385153,155.50304 217.495621,152.199852 218.433474,148.824851 M220.655293,138.874185 C221.231935,135.482212 221.637704,132.03207 221.863435,128.532919 M222,118.131039 C221.860539,114.466419 221.523806,110.85231 221.000113,107.299021 M218.885321,96.8583653 C218.001583,93.4468963 216.942225,90.1061026 215.717466,86.8461994 M211.549484,77.3039459 C209.957339,74.1238901 208.200597,71.0404957 206.290425,68.0649233 M200.180513,59.5598295 C181.848457,36.6639805 153.655709,22 122.036748,22 C66.7879774,22 22,66.771525 22,122 C22,177.228475 66.7879774,222 122.036748,222 C152.914668,222 180.52509,208.015313 198.875424,186.036326"
|
||||
id="Shape"
|
||||
stroke="url(#linearGradient-1)"
|
||||
stroke-width="42.0804674"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
@@ -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', () => {
|
||||
|
||||
Reference in New Issue
Block a user