diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..fa338ff
--- /dev/null
+++ b/CHANGELOG.md
@@ -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
diff --git a/README.md b/README.md
index 0371bd3..cf31a0e 100644
--- a/README.md
+++ b/README.md
@@ -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.
diff --git a/docs-src/_includes/footer.11ty.cjs b/docs-src/_includes/footer.11ty.cjs
index 01fdf4c..a93a022 100644
--- a/docs-src/_includes/footer.11ty.cjs
+++ b/docs-src/_includes/footer.11ty.cjs
@@ -3,7 +3,7 @@ module.exports = function (data) {
`;
};
diff --git a/docs-src/api.11ty.cjs b/docs-src/api.11ty.cjs
index 8a0fe7c..7296371 100644
--- a/docs-src/api.11ty.cjs
+++ b/docs-src/api.11ty.cjs
@@ -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 `
-
API
- ${tags
- .map(
- (tag) => `
- <${tag.name}>
-
- ${tag.description}
-
- ${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('')}
- `;
+ API
+ ${elements
+ .map(
+ (element) => `
+ <${element.tagName}>
+
+ ${element.description}
+
+ ${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 `
- ${name}
-
-
- ${properties.map((p) => `| ${capitalize(p)} | `).join('')}
-
- ${data
- .map(
- (i) => `
-
- ${properties.map((p) => `| ${i[p]} | `).join('')}
-
- `
- )
- .join('')}
-
- `;
+ ${name ? `${name}
` : ''}
+
+
+ ${properties
+ .map(
+ (p) =>
+ `| ${capitalize(
+ (Array.isArray(p) ? p[0] : p).split('.')[0]
+ )} | `
+ )
+ .join('')}
+
+ ${data
+ .map(
+ (i) => `
+
+ ${properties.map((p) => `| ${get(i, p)} | `).join('')}
+
+ `
+ )
+ .join('')}
+
+ `;
};
const capitalize = (s) => s[0].toUpperCase() + s.substring(1);
diff --git a/docs-src/docs.css b/docs-src/docs.css
index 006c5f7..800e27e 100644
--- a/docs-src/docs.css
+++ b/docs-src/docs.css
@@ -159,4 +159,5 @@ td, th {
border: solid 1px #aaa;
padding: 4px;
text-align: left;
+ vertical-align: top;
}
diff --git a/docs/api/index.html b/docs/api/index.html
index 69bf681..ecaf431 100644
--- a/docs/api/index.html
+++ b/docs/api/index.html
@@ -29,110 +29,120 @@
- API
-
- <my-element>
-
- An example element.
-
-
- Attributes
-
-
- | Name | Description | Type | Default |
-
-
-
- | name | The name to say "Hello" to. | string | "World" |
-
-
-
- | count | The number of times the button has been clicked. | number | 0 |
-
-
-
-
-
- Properties
-
-
- | Name | Attribute | Description | Type | Default |
-
-
-
- | name | name | The name to say "Hello" to. | string | "World" |
-
-
-
- | count | count | The number of times the button has been clicked. | number | 0 |
-
-
-
- | renderRoot | undefined | Node or ShadowRoot into which element DOM should be rendered. Defaults
-to an open shadowRoot. | HTMLElement | ShadowRoot | undefined |
-
-
-
- | isUpdatePending | undefined | undefined | boolean | undefined |
-
-
-
- | hasUpdated | undefined | undefined | boolean | undefined |
-
-
-
- | updateComplete | undefined | 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. | Promise | undefined |
-
-
-
-
-
-
-
- Slots
-
-
- | Name | Description |
-
-
-
- | This element has a slot |
-
-
-
-
-
- CSS Shadow Parts
-
-
- | Name | Description |
-
-
-
- | button | The button |
-
-
-
-
-
-
-
+ API
+
+ <my-element>
+
+ An example element.
+
+
+ Attributes
+
+
+ | Name | Description | Type | Default |
+
+
+
+ | name | The name to say "Hello" to. | string | 'World' |
+
+
+
+ | count | The number of times the button has been clicked. | number | 0 |
+
+
+
+
+
+ Properties
+
+
+ | Name | Attribute | Description | Type | Default |
+
+
+
+ | name | name | The name to say "Hello" to. | string | 'World' |
+
+
+
+ | count | count | The number of times the button has been clicked. | number | 0 |
+
+
+
+
+
+ Methods
+
+
+ | Name | Parameters | Description | Return |
+
+
+
+ | sayHello |
+
+
+
+ | Name | Description | Type |
+
+
+
+ | name | The name to say "Hello" to | string |
+
+
+
+ | Formats a greeting | string |
+
+
+
+
+
+ Events
+
+
+ | Name | Description |
+
+
+
+ | count-changed | Indicates when the count changes |
+
+
+
+
+
+ Slots
+
+
+ | Name | Description |
+
+
+
+ | (default) | This element has a slot |
+
+
+
+
+
+ CSS Shadow Parts
+
+
+ | Name | Description |
+
+
+
+ | button | The button |
+
+
+
+
+
+
+