dikshya/exploRUGComponent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #60 from lit/ga-release

Browse Source 
Update to Lit 2.0.0 (manually)
This commit is contained in:
Kevin Schaaf
2021-09-21 09:38:35 -07:00
committed by GitHub
parent 1f62cf47ed a2c387402d
commit 3ffed2e267
19 changed files with 31059 additions and 28678 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
CHANGELOG.md Normal file
View File

@@ -0,0 +1,14 @@
# @lit/lit-starter-ts
## 1.0.0
### Patch Changes
- [#2113](https://github.com/lit/lit/pull/2113) [`5b2f3642`](https://github.com/lit/lit/commit/5b2f3642ff91931b5b01f8bdd2ed98aba24f1047) - Dependency upgrades including TypeScript 4.4.2
- [#2103](https://github.com/lit/lit/pull/2103) [`15a8356d`](https://github.com/lit/lit/commit/15a8356ddd59a1e80880a93acd21fadc9c24e14b) - Added Lit dev mode to test and serve commands, controlled via the MODE=dev or MODE=prod environment variables.
- [#2117](https://github.com/lit/lit/pull/2117) [`eff2fbc7`](https://github.com/lit/lit/commit/eff2fbc7e45cfc2a7b8df21e18c84619dfbcb277) - Updated starter templates to use open-wc analyzer for generating custom-elements.json, and updated basic API docs generater included in the template to the new manifest format.
- Updated dependencies [[`15a8356d`](https://github.com/lit/lit/commit/15a8356ddd59a1e80880a93acd21fadc9c24e14b), [`5fabe2b5`](https://github.com/lit/lit/commit/5fabe2b5ae4ab8fba9dc2d23a69105d32e4c0705), [`5b2f3642`](https://github.com/lit/lit/commit/5b2f3642ff91931b5b01f8bdd2ed98aba24f1047), [`5fabe2b5`](https://github.com/lit/lit/commit/5fabe2b5ae4ab8fba9dc2d23a69105d32e4c0705), [`5fabe2b5`](https://github.com/lit/lit/commit/5fabe2b5ae4ab8fba9dc2d23a69105d32e4c0705), [`0312f3e5`](https://github.com/lit/lit/commit/0312f3e533611eb3f4f9381594485a33ad003b74)]:
- lit@2.0.0

14
README.md
View File

@@ -36,12 +36,20 @@ Mocha, Chai, and some related helpers for testing. See the
[modern-web.dev testing documentation](https://modern-web.dev/docs/test-runner/overview) for
more information.
Tests can be run with the `test` script:
Tests can be run with the `test` script, which will run your tests against Lit's development mode (with more verbose errors) as well as against Lit's production mode:
```bash
npm test
```
For local testing during development, the `test:dev:watch` command will run your tests in Lit's development mode (with verbose errors) on every change to your source files:
```bash
npm test:watch
```
Alternatively the `test:prod` and `test:prod:watch` commands will run your tests in Lit's production mode.
## Dev Server
This sample uses modern-web.dev's [@web/dev-server](https://www.npmjs.com/package/@web/dev-server) for previewing the project without additional build steps. Web Dev Server handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles JavaScript and adds polyfills to support older browsers. See [modern-web.dev's Web Dev Server documentation](https://modern-web.dev/docs/dev-server/overview/) for more information.
@@ -52,7 +60,7 @@ To run the dev server and open the project in a new browser tab:
npm run serve
```
There is a development HTML file located at `/dev/index.html` that you can view at http://localhost:8000/dev/index.html.
There is a development HTML file located at `/dev/index.html` that you can view at http://localhost:8000/dev/index.html. Note that this command will serve your code using Lit's development mode (with more verbose errors). To serve your code against Lit's production mode, use `npm run serve:prod`.
## Editing
@@ -82,7 +90,7 @@ npm run lint
## Formatting
[Prettier](https://prettier.io/) is used for code formatting. It has been pre-configured according to the Polymer Project's style. You can change this in `.prettierrc.json`.
[Prettier](https://prettier.io/) is used for code formatting. It has been pre-configured according to the Lit's style. You can change this in `.prettierrc.json`.
Prettier has not been configured to run when committing files, but this can be added with Husky and and `pretty-quick`. See the [prettier.io](https://prettier.io/) site for instructions.

2
docs-src/_includes/footer.11ty.cjs
View File

@@ -3,7 +3,7 @@ module.exports = function (data) {
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
<a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
</p>
</footer>`;
};

161
docs-src/api.11ty.cjs
View File

@@ -11,80 +11,117 @@ module.exports = class Docs {
}
render(data) {
const customElements = data.api['11tydata'].customElements;
const tags = customElements.tags;
const manifest = data.api['11tydata'].customElements;
const elements = manifest.modules.reduce(
(els, module) =>
els.concat(
module.declarations?.filter((dec) => dec.customElement) ?? []
),
[]
);
return `
<h1>API</h1>
${tags
.map(
(tag) => `
<h2>&lt;${tag.name}></h2>
<div>
${tag.description}
</div>
${renderTable(
'Attributes',
['name', 'description', 'type', 'default'],
tag.attributes
)}
${renderTable(
'Properties',
['name', 'attribute', 'description', 'type', 'default'],
tag.properties
)}
${
/*
* Methods are not output by web-component-analyzer yet (a bug), so
* this is a placeholder so that at least _something_ will be output
* when that is fixed, and element maintainers will hopefully have a
* signal to update this file to add the neccessary columns.
*/
renderTable('Methods', ['name', 'description'], tag.methods)
}
${renderTable('Events', ['name', 'description'], tag.events)}
${renderTable('Slots', ['name', 'description'], tag.slots)}
${renderTable(
'CSS Shadow Parts',
['name', 'description'],
tag.cssParts
)}
${renderTable(
'CSS Custom Properties',
['name', 'description'],
tag.cssProperties
)}
`
)
.join('')}
`;
<h1>API</h1>
${elements
.map(
(element) => `
<h2>&lt;${element.tagName}></h2>
<div>
${element.description}
</div>
${renderTable(
'Attributes',
['name', 'description', 'type.text', 'default'],
element.attributes
)}
${renderTable(
'Properties',
['name', 'attribute', 'description', 'type.text', 'default'],
element.members.filter((m) => m.kind === 'field')
)}
${renderTable(
'Methods',
['name', 'parameters', 'description', 'return.type.text'],
element.members
.filter((m) => m.kind === 'method' && m.privacy !== 'private')
.map((m) => ({
...m,
parameters: renderTable(
'',
['name', 'description', 'type.text'],
m.parameters
),
}))
)}
${renderTable('Events', ['name', 'description'], element.events)}
${renderTable(
'Slots',
[['name', '(default)'], 'description'],
element.slots
)}
${renderTable(
'CSS Shadow Parts',
['name', 'description'],
element.cssParts
)}
${renderTable(
'CSS Custom Properties',
['name', 'description'],
element.cssProperties
)}
`
)
.join('')}
`;
}
};
/**
* Reads a (possibly deep) path off of an object.
*/
const get = (obj, path) => {
let fallback = '';
if (Array.isArray(path)) {
[path, fallback] = path;
}
const parts = path.split('.');
while (obj && parts.length) {
obj = obj[parts.shift()];
}
return obj == null || obj === '' ? fallback : obj;
};
/**
* Renders a table of data, plucking the given properties from each item in
* `data`.
*/
const renderTable = (name, properties, data) => {
if (data === undefined) {
if (data === undefined || data.length === 0) {
return '';
}
return `
<h3>${name}</h3>
<table>
<tr>
${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
</tr>
${data
.map(
(i) => `
<tr>
${properties.map((p) => `<td>${i[p]}</td>`).join('')}
</tr>
`
)
.join('')}
</table>
`;
${name ? `<h3>${name}</h3>` : ''}
<table>
<tr>
${properties
.map(
(p) =>
`<th>${capitalize(
(Array.isArray(p) ? p[0] : p).split('.')[0]
)}</th>`
)
.join('')}
</tr>
${data
.map(
(i) => `
<tr>
${properties.map((p) => `<td>${get(i, p)}</td>`).join('')}
</tr>
`
)
.join('')}
</table>
`;
};
const capitalize = (s) => s[0].toUpperCase() + s.substring(1);

1
docs-src/docs.css
View File

@@ -159,4 +159,5 @@ td, th {
border: solid 1px #aaa;
padding: 4px;
text-align: left;
vertical-align: top;
}

206
docs/api/index.html
View File

@@ -29,110 +29,120 @@
<div id="main-wrapper">
<main>
<h1>API</h1>
<h2>&lt;my-element></h2>
<div>
An example element.
</div>
<h3>Attributes</h3>
<table>
<tr>
<th>Name</th><th>Description</th><th>Type</th><th>Default</th>
</tr>
<tr>
<td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
</tr>
<tr>
<td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
</table>
<h3>Properties</h3>
<table>
<tr>
<th>Name</th><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th>
</tr>
<tr>
<td>name</td><td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
</tr>
<tr>
<td>count</td><td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
<tr>
<td>renderRoot</td><td>undefined</td><td>Node or ShadowRoot into which element DOM should be rendered. Defaults
to an open shadowRoot.</td><td>HTMLElement | ShadowRoot</td><td>undefined</td>
</tr>
<tr>
<td>isUpdatePending</td><td>undefined</td><td>undefined</td><td>boolean</td><td>undefined</td>
</tr>
<tr>
<td>hasUpdated</td><td>undefined</td><td>undefined</td><td>boolean</td><td>undefined</td>
</tr>
<tr>
<td>updateComplete</td><td>undefined</td><td>Returns a Promise that resolves when the element has completed updating.
The Promise value is a boolean that is `true` if the element completed the
update without triggering another update. The Promise result is `false` if
a property was set inside `updated()`. If the Promise is rejected, an
exception was thrown during the update.
To await additional asynchronous work, override the `getUpdateComplete`
method. For example, it is sometimes useful to await a rendered element
before fulfilling this Promise. To do this, first await
`super.getUpdateComplete()`, then any subsequent state.</td><td>Promise<boolean></td><td>undefined</td>
</tr>
</table>
<h3>Slots</h3>
<table>
<tr>
<th>Name</th><th>Description</th>
</tr>
<tr>
<td></td><td>This element has a slot</td>
</tr>
</table>
<h3>CSS Shadow Parts</h3>
<table>
<tr>
<th>Name</th><th>Description</th>
</tr>
<tr>
<td>button</td><td>The button</td>
</tr>
</table>
<h1>API</h1>
<h2>&lt;my-element></h2>
<div>
An example element.
</div>
<h3>Attributes</h3>
<table>
<tr>
<th>Name</th><th>Description</th><th>Type</th><th>Default</th>
</tr>
<tr>
<td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>'World'</td>
</tr>
<tr>
<td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
</table>
<h3>Properties</h3>
<table>
<tr>
<th>Name</th><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th>
</tr>
<tr>
<td>name</td><td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>'World'</td>
</tr>
<tr>
<td>count</td><td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
</table>
<h3>Methods</h3>
<table>
<tr>
<th>Name</th><th>Parameters</th><th>Description</th><th>Return</th>
</tr>
<tr>
<td>sayHello</td><td>
<table>
<tr>
<th>Name</th><th>Description</th><th>Type</th>
</tr>
<tr>
<td>name</td><td>The name to say "Hello" to</td><td>string</td>
</tr>
</table>
</td><td>Formats a greeting</td><td>string</td>
</tr>
</table>
<h3>Events</h3>
<table>
<tr>
<th>Name</th><th>Description</th>
</tr>
<tr>
<td>count-changed</td><td>Indicates when the count changes</td>
</tr>
</table>
<h3>Slots</h3>
<table>
<tr>
<th>Name</th><th>Description</th>
</tr>
<tr>
<td>(default)</td><td>This element has a slot</td>
</tr>
</table>
<h3>CSS Shadow Parts</h3>
<table>
<tr>
<th>Name</th><th>Description</th>
</tr>
<tr>
<td>button</td><td>The button</td>
</tr>
</table>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
<a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>

1
docs/docs.css
View File

@@ -159,4 +159,5 @@ td, th {
border: solid 1px #aaa;
padding: 4px;
text-align: left;
vertical-align: top;
}

10
docs/examples/index.html
View File

@@ -34,14 +34,14 @@
<nav class="collection">
<ul>
<li class=>
<a href="name-property/">Setting the name property</a>
</li>
<li class=selected>
<a href="">A basic example</a>
</li>
<li class=>
<a href="name-property/">Setting the name property</a>
</li>
</ul>
</nav>
<div>
@@ -68,7 +68,7 @@
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
<a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>

10
docs/examples/name-property/index.html
View File

@@ -34,14 +34,14 @@
<nav class="collection">
<ul>
<li class=selected>
<a href="">Setting the name property</a>
</li>
<li class=>
<a href="../">A basic example</a>
</li>
<li class=selected>
<a href="">Setting the name property</a>
</li>
</ul>
</nav>
<div>
@@ -58,7 +58,7 @@
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
<a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>

2
docs/index.html
View File

@@ -68,7 +68,7 @@
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
<a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>

2
docs/install/index.html
View File

@@ -46,7 +46,7 @@
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
<a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
</p>
</footer>
</body>

30
docs/my-element.bundled.js
View File

File diff suppressed because one or more lines are too long

59194
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

50
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@lit/lit-starter-ts",
"private": true,
"version": "0.0.0",
"version": "1.0.0",
"description": "A simple web component",
"main": "my-element.js",
"module": "my-element.js",
@@ -21,10 +21,15 @@
"docs:build": "rollup -c --file docs/my-element.bundled.js",
"docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
"docs:serve": "wds --root-dir=docs --node-resolve --watch",
"analyze": "wca analyze \"src/**/*.ts\" --outFile custom-elements.json",
"analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
"analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
"serve": "wds --watch",
"test": "wtr",
"test:watch": "npm run test -- --watch",
"serve:prod": "MODE=prod npm run serve",
"test": "npm run test:dev && npm run test:prod",
"test:dev": "wtr",
"test:watch": "wtr --watch",
"test:prod": "MODE=prod wtr",
"test:prod:watch": "MODE=prod wtr --watch",
"checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
},
"keywords": [
@@ -36,36 +41,37 @@
"author": "Google LLC",
"license": "BSD-3-Clause",
"dependencies": {
"lit": "^2.0.0-rc.1"
"lit": "^2.0.0"
},
"devDependencies": {
"@11ty/eleventy": "^0.12.1",
"@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
"@custom-elements-manifest/analyzer": "^0.5.3",
"@esm-bundle/chai": "^4.1.5",
"@open-wc/testing": "^2.5.32",
"@open-wc/testing": "^3.0.0-next.1",
"@open-wc/testing-karma": "^4.0.9",
"@rollup/plugin-node-resolve": "^9.0.0",
"@rollup/plugin-replace": "^2.3.3",
"@types/mocha": "^7.0.2",
"@typescript-eslint/eslint-plugin": "^2.27.0",
"@typescript-eslint/parser": "^2.27.0",
"@web/dev-server": "0.0.29",
"@rollup/plugin-node-resolve": "^13.0.4",
"@rollup/plugin-replace": "^3.0.0",
"@types/mocha": "^9.0.0",
"@typescript-eslint/eslint-plugin": "^4.3.0",
"@typescript-eslint/parser": "^4.30.0",
"@web/dev-server": "^0.1.22",
"@web/dev-server-legacy": "^0.1.4",
"@web/dev-server-rollup": "^0.2.7",
"@web/test-runner": "^0.12.15",
"@web/test-runner-mocha": "^0.3.5",
"@web/dev-server-rollup": "^0.3.9",
"@web/test-runner": "^0.13.16",
"@web/test-runner-mocha": "^0.7.4",
"@web/test-runner-playwright": "^0.8.4",
"@webcomponents/webcomponentsjs": "^2.5.0",
"@webcomponents/webcomponentsjs": "^2.6.0",
"deepmerge": "^4.2.2",
"eslint": "^6.8.0",
"eslint": "^7.32.0",
"lit-analyzer": "^1.1.10",
"mocha": "^7.1.1",
"prettier": "^2.0.4",
"mocha": "^9.1.1",
"prettier": "^2.3.2",
"rimraf": "^3.0.2",
"rollup": "^2.28.2",
"rollup-plugin-summary": "^1.2.3",
"rollup-plugin-terser": "^7.0.2",
"typescript": "^3.8.3",
"web-component-analyzer": "^1.0.3"
}
"typescript": "^4.3.5"
},
"customElements": "custom-elements.json"
}

16
src/my-element.ts
View File

@@ -10,12 +10,13 @@ import {customElement, property} from 'lit/decorators.js';
/**
* An example element.
*
* @fires count-changed - Indicates when the count changes
* @slot - This element has a slot
* @csspart button - The button
*/
@customElement('my-element')
export class MyElement extends LitElement {
static styles = css`
static override styles = css`
:host {
display: block;
border: solid 1px gray;
@@ -36,9 +37,9 @@ export class MyElement extends LitElement {
@property({type: Number})
count = 0;
render() {
override render() {
return html`
<h1>Hello, ${this.name}!</h1>
<h1>${this.sayHello(this.name)}!</h1>
<button @click=${this._onClick} part="button">
Click Count: ${this.count}
</button>
@@ -48,10 +49,15 @@ export class MyElement extends LitElement {
private _onClick() {
this.count++;
this.dispatchEvent(new CustomEvent('count-changed'));
}
foo(): string {
return 'foo';
/**
* Formats a greeting
* @param name The name to say "Hello" to
*/
sayHello(name: string): string {
return `Hello, ${name}`;
}
}

5
src/test/my-element_test.ts
View File

@@ -6,9 +6,8 @@
import {MyElement} from '../my-element.js';
import {fixture, html} from '@open-wc/testing';
const assert = chai.assert;
import {fixture, assert} from '@open-wc/testing';
import {html} from 'lit/static-html.js';
suite('my-element', () => {
test('is defined', () => {

1
tsconfig.json
View File

@@ -20,6 +20,7 @@
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"noImplicitOverride": true,
"plugins": [
{
"name": "ts-lit-plugin",

8
web-dev-server.config.js
View File

@@ -6,9 +6,15 @@
import {legacyPlugin} from '@web/dev-server-legacy';
const mode = process.env.MODE || 'dev';
if (!['dev', 'prod'].includes(mode)) {
throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
}
export default {
nodeResolve: true,
nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
preserveSymlinks: true,
rootDir: 'docs',
plugins: [
legacyPlugin({
polyfills: {

10
web-test-runner.config.js
View File

@@ -7,6 +7,11 @@
import {legacyPlugin} from '@web/dev-server-legacy';
import {playwrightLauncher} from '@web/test-runner-playwright';
const mode = process.env.MODE || 'dev';
if (!['dev', 'prod'].includes(mode)) {
throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
}
// Uncomment for testing on Sauce Labs
// Must run `npm i --save-dev @web/test-runner-saucelabs` and set
// SAUCE_USERNAME and SAUCE_USERNAME environment variables
@@ -87,7 +92,7 @@ try {
export default {
rootDir: '.',
files: ['./test/**/*_test.js'],
nodeResolve: true,
nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
preserveSymlinks: true,
browsers: commandLineBrowsers ?? Object.values(browsers),
testFramework: {
@@ -108,8 +113,7 @@ export default {
{
name: 'lit-polyfill-support',
path: 'node_modules/lit/polyfill-support.js',
test:
"!('attachShadow' in Element.prototype) || !('getRootNode' in Element.prototype) || window.ShadyDOM && window.ShadyDOM.force",
test: "!('attachShadow' in Element.prototype) || !('getRootNode' in Element.prototype) || window.ShadyDOM && window.ShadyDOM.force",
module: false,
},
],