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

Update to Lit 2.0.0 (manually)

Browse Source 
Will attempt to get this back to syncing with monorepo history per https://github.com/lit/lit#exporting-starter-templates in a follow-up.
This commit is contained in:
Kevin Schaaf
2021-09-20 21:01:02 -07:00
parent 1f62cf47ed
commit a2c387402d
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 [modern-web.dev testing documentation](https://modern-web.dev/docs/test-runner/overview) for
more information. 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 ```bash
npm test 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 ## 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. 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 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 ## Editing
@@ -82,7 +90,7 @@ npm run lint
## Formatting ## 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. 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> <footer>
<p> <p>
Made with 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> </p>
</footer>`; </footer>`;
}; };

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

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

158
docs/api/index.html
View File

@@ -29,99 +29,109 @@
<div id="main-wrapper"> <div id="main-wrapper">
<main> <main>
<h1>API</h1> <h1>API</h1>
<h2>&lt;my-element></h2> <h2>&lt;my-element></h2>
<div> <div>
An example element. An example element.
</div> </div>
<h3>Attributes</h3> <h3>Attributes</h3>
<table> <table>
<tr> <tr>
<th>Name</th><th>Description</th><th>Type</th><th>Default</th> <th>Name</th><th>Description</th><th>Type</th><th>Default</th>
</tr> </tr>
<tr> <tr>
<td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td> <td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>'World'</td>
</tr> </tr>
<tr> <tr>
<td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td> <td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr> </tr>
</table> </table>
<h3>Properties</h3> <h3>Properties</h3>
<table> <table>
<tr> <tr>
<th>Name</th><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th> <th>Name</th><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th>
</tr> </tr>
<tr> <tr>
<td>name</td><td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td> <td>name</td><td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>'World'</td>
</tr> </tr>
<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> <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>
<tr> </table>
<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>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>Slots</h3> <h3>Events</h3>
<table> <table>
<tr> <tr>
<th>Name</th><th>Description</th> <th>Name</th><th>Description</th>
</tr> </tr>
<tr> <tr>
<td></td><td>This element has a slot</td> <td>count-changed</td><td>Indicates when the count changes</td>
</tr> </tr>
</table> </table>
<h3>CSS Shadow Parts</h3> <h3>Slots</h3>
<table> <table>
<tr> <tr>
<th>Name</th><th>Description</th> <th>Name</th><th>Description</th>
</tr> </tr>
<tr> <tr>
<td>button</td><td>The button</td> <td>(default)</td><td>This element has a slot</td>
</tr> </tr>
</table> </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>
@@ -132,7 +142,7 @@ before fulfilling this Promise. To do this, first await
<footer> <footer>
<p> <p>
Made with 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> </p>
</footer> </footer>
</body> </body>

1
docs/docs.css
View File

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

10
docs/examples/index.html
View File

@@ -34,14 +34,14 @@
<nav class="collection"> <nav class="collection">
<ul> <ul>
<li class=>
<a href="name-property/">Setting the name property</a>
</li>
<li class=selected> <li class=selected>
<a href="">A basic example</a> <a href="">A basic example</a>
</li> </li>
<li class=>
<a href="name-property/">Setting the name property</a>
</li>
</ul> </ul>
</nav> </nav>
<div> <div>
@@ -68,7 +68,7 @@
<footer> <footer>
<p> <p>
Made with 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> </p>
</footer> </footer>
</body> </body>

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

@@ -34,14 +34,14 @@
<nav class="collection"> <nav class="collection">
<ul> <ul>
<li class=selected>
<a href="">Setting the name property</a>
</li>
<li class=> <li class=>
<a href="../">A basic example</a> <a href="../">A basic example</a>
</li> </li>
<li class=selected>
<a href="">Setting the name property</a>
</li>
</ul> </ul>
</nav> </nav>
<div> <div>
@@ -58,7 +58,7 @@
<footer> <footer>
<p> <p>
Made with 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> </p>
</footer> </footer>
</body> </body>

2
docs/index.html
View File

@@ -68,7 +68,7 @@
<footer> <footer>
<p> <p>
Made with 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> </p>
</footer> </footer>
</body> </body>

2
docs/install/index.html
View File

@@ -46,7 +46,7 @@
<footer> <footer>
<p> <p>
Made with 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> </p>
</footer> </footer>
</body> </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", "name": "@lit/lit-starter-ts",
"private": true, "private": true,
"version": "0.0.0", "version": "1.0.0",
"description": "A simple web component", "description": "A simple web component",
"main": "my-element.js", "main": "my-element.js",
"module": "my-element.js", "module": "my-element.js",
@@ -21,10 +21,15 @@
"docs:build": "rollup -c --file docs/my-element.bundled.js", "docs:build": "rollup -c --file docs/my-element.bundled.js",
"docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/", "docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
"docs:serve": "wds --root-dir=docs --node-resolve --watch", "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", "serve": "wds --watch",
"test": "wtr", "serve:prod": "MODE=prod npm run serve",
"test:watch": "npm run test -- --watch", "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" "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
}, },
"keywords": [ "keywords": [
@@ -36,36 +41,37 @@
"author": "Google LLC", "author": "Google LLC",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
"lit": "^2.0.0-rc.1" "lit": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^0.12.1", "@11ty/eleventy": "^0.12.1",
"@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1", "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
"@custom-elements-manifest/analyzer": "^0.5.3",
"@esm-bundle/chai": "^4.1.5", "@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", "@open-wc/testing-karma": "^4.0.9",
"@rollup/plugin-node-resolve": "^9.0.0", "@rollup/plugin-node-resolve": "^13.0.4",
"@rollup/plugin-replace": "^2.3.3", "@rollup/plugin-replace": "^3.0.0",
"@types/mocha": "^7.0.2", "@types/mocha": "^9.0.0",
"@typescript-eslint/eslint-plugin": "^2.27.0", "@typescript-eslint/eslint-plugin": "^4.3.0",
"@typescript-eslint/parser": "^2.27.0", "@typescript-eslint/parser": "^4.30.0",
"@web/dev-server": "0.0.29", "@web/dev-server": "^0.1.22",
"@web/dev-server-legacy": "^0.1.4", "@web/dev-server-legacy": "^0.1.4",
"@web/dev-server-rollup": "^0.2.7", "@web/dev-server-rollup": "^0.3.9",
"@web/test-runner": "^0.12.15", "@web/test-runner": "^0.13.16",
"@web/test-runner-mocha": "^0.3.5", "@web/test-runner-mocha": "^0.7.4",
"@web/test-runner-playwright": "^0.8.4", "@web/test-runner-playwright": "^0.8.4",
"@webcomponents/webcomponentsjs": "^2.5.0", "@webcomponents/webcomponentsjs": "^2.6.0",
"deepmerge": "^4.2.2", "deepmerge": "^4.2.2",
"eslint": "^6.8.0", "eslint": "^7.32.0",
"lit-analyzer": "^1.1.10", "lit-analyzer": "^1.1.10",
"mocha": "^7.1.1", "mocha": "^9.1.1",
"prettier": "^2.0.4", "prettier": "^2.3.2",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.28.2", "rollup": "^2.28.2",
"rollup-plugin-summary": "^1.2.3", "rollup-plugin-summary": "^1.2.3",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"typescript": "^3.8.3", "typescript": "^4.3.5"
"web-component-analyzer": "^1.0.3" },
} "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. * An example element.
* *
* @fires count-changed - Indicates when the count changes
* @slot - This element has a slot * @slot - This element has a slot
* @csspart button - The button * @csspart button - The button
*/ */
@customElement('my-element') @customElement('my-element')
export class MyElement extends LitElement { export class MyElement extends LitElement {
static styles = css` static override styles = css`
:host { :host {
display: block; display: block;
border: solid 1px gray; border: solid 1px gray;
@@ -36,9 +37,9 @@ export class MyElement extends LitElement {
@property({type: Number}) @property({type: Number})
count = 0; count = 0;
render() { override render() {
return html` return html`
<h1>Hello, ${this.name}!</h1> <h1>${this.sayHello(this.name)}!</h1>
<button @click=${this._onClick} part="button"> <button @click=${this._onClick} part="button">
Click Count: ${this.count} Click Count: ${this.count}
</button> </button>
@@ -48,10 +49,15 @@ export class MyElement extends LitElement {
private _onClick() { private _onClick() {
this.count++; 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 {MyElement} from '../my-element.js';
import {fixture, html} from '@open-wc/testing'; import {fixture, assert} from '@open-wc/testing';
import {html} from 'lit/static-html.js';
const assert = chai.assert;
suite('my-element', () => { suite('my-element', () => {
test('is defined', () => { test('is defined', () => {

1
tsconfig.json
View File

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

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

@@ -6,9 +6,15 @@
import {legacyPlugin} from '@web/dev-server-legacy'; 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 { export default {
nodeResolve: true, nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
preserveSymlinks: true, preserveSymlinks: true,
rootDir: 'docs',
plugins: [ plugins: [
legacyPlugin({ legacyPlugin({
polyfills: { polyfills: {

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

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