jlengrand/simple-food-diary
1
0
Fork 0
mirror of https://github.com/jlengrand/simple-food-diary.git synced 2026-03-10 08:41:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move to latest lit

Browse Source
This commit is contained in:
Julien Lengrand-Lambert
2021-05-26 11:03:47 +02:00
parent 661a962354
commit bc688bbb6a
6 changed files with 162 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"version": "0.0.0",
"license": "MIT",
"dependencies": {
"lit": "*",
"lit-element": "^2.5.1",
"lit-html": "^1.4.1"
},
@@ -1473,6 +1474,11 @@
"@hapi/hoek": "^8.3.0"
}
},
"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.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -2130,6 +2136,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.0",
"resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.0.tgz",
@@ -7221,6 +7232,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",
@@ -7234,6 +7255,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",
@@ -12640,6 +12678,11 @@
"@hapi/hoek": "^8.3.0"
}
},
"@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.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -13243,6 +13286,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.0",
"resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.0.tgz",
@@ -17097,6 +17145,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",

6
package.json
View File

@@ -26,7 +26,8 @@
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
"build": "rimraf dist && tsc && rollup -c rollup.config.js",
"start:build": "npm run build && web-dev-server --root-dir dist --app-index index.html --open --compatibility none",
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\""
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
"clean": "rimraf dist"
},
"name": "simple-food-diary",
"version": "0.0.0",
@@ -34,8 +35,7 @@
"author": "simple-food-diary",
"license": "MIT",
"dependencies": {
"lit-element": "^2.5.1",
"lit-html": "^1.4.1"
"lit": "*"
},
"eslintConfig": {
"parser": "@typescript-eslint/parser",

78
src/SimpleFoodDiary.ts
View File

@@ -1,78 +0,0 @@
import { LitElement, html, css, property } from 'lit-element';
import { openWcLogo } from './open-wc-logo.js';
export class SimpleFoodDiary 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(--simple-food-diary-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/SimpleFoodDiary.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>
`;
}
}

2
src/open-wc-logo.ts
View File

@@ -1,4 +1,4 @@
import { html } from 'lit-html';
import { html } from 'lit';
export const openWcLogo = html`
<svg

81
src/simple-food-diary.ts
View File

@@ -1,3 +1,80 @@
import { SimpleFoodDiary } from './SimpleFoodDiary.js';
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { openWcLogo } from './open-wc-logo.js';
customElements.define('simple-food-diary', SimpleFoodDiary);
@customElement('simple-food-diary')
export class SimpleFoodDiary 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(--simple-food-diary-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/SimpleFoodDiary.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>
`;
}
}

3
test/simple-food-diary.test.ts
View File

@@ -1,8 +1,9 @@
import { html, fixture, expect } from '@open-wc/testing';
import { SimpleFoodDiary } from '../src/SimpleFoodDiary.js';
import { SimpleFoodDiary } from '../src/simple-food-diary.js';
import '../src/simple-food-diary.js';
describe('SimpleFoodDiary', () => {
let element: SimpleFoodDiary;
beforeEach(async () => {