diff --git a/.eleventy.cjs b/.eleventy.cjs index 5800279..8a623a3 100644 --- a/.eleventy.cjs +++ b/.eleventy.cjs @@ -2,8 +2,12 @@ const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight'); module.exports = function (eleventyConfig) { eleventyConfig.addPlugin(syntaxHighlight); - eleventyConfig.addPassthroughCopy("docs-src/docs.css"); - eleventyConfig.addPassthroughCopy("docs-src/.nojekyll"); + eleventyConfig.addPassthroughCopy('docs-src/docs.css'); + eleventyConfig.addPassthroughCopy('docs-src/.nojekyll'); + eleventyConfig.addPassthroughCopy( + 'node_modules/@webcomponents/webcomponentsjs' + ); + eleventyConfig.addPassthroughCopy('node_modules/lit/polyfill-support.js'); return { dir: { input: 'docs-src', diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..119019c --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +node_modules/* +docs/* +docs-src/* +rollup-config.js +custom-elements.json diff --git a/.eslintrc.json b/.eslintrc.json index 7a9c364..00a28ce 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,4 +1,5 @@ { + "root": true, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", @@ -10,17 +11,41 @@ "sourceType": "module" }, "plugins": ["@typescript-eslint"], + "env": { + "browser": true + }, "rules": { - "no-unexpected-multiline": "off", - "@typescript-eslint/indent": "off", + "no-prototype-builtins": "off", + "@typescript-eslint/ban-types": "off", "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/no-explicit-any": "error", + "@typescript-eslint/no-empty-function": "off", "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/no-use-before-define": "off", "@typescript-eslint/no-unused-vars": [ "warn", { "argsIgnorePattern": "^_" } ] - } + }, + "overrides": [ + { + "files": ["rollup.config.js", "web-test-runner.config.js"], + "env": { + "node": true + } + }, + { + "files": [ + "*_test.ts", + "**/custom_typings/*.ts", + "packages/lit-ssr/src/test/integration/tests/**", + "packages/lit-ssr/src/lib/util/parse5-utils.ts" + ], + "rules": { + "@typescript-eslint/no-explicit-any": "off" + } + } + ] } diff --git a/.gitignore b/.gitignore index c0b598a..e5d0fa6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ -/node_modules/ +node_modules/ /lib/ /test/ - +custom-elements.json # top level source my-element.js my-element.js.map diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 4bfdd30..ca11131 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,13 +1,9 @@ { - // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. - // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp + // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. + // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp - // List of extensions which should be recommended for users of this workspace. - "recommendations": [ - "runem.lit-plugin" - ], - // List of extensions recommended by VS Code that should not be recommended for users of this workspace. - "unwantedRecommendations": [ - - ] + // List of extensions which should be recommended for users of this workspace. + "recommendations": ["runem.lit-plugin"], + // List of extensions recommended by VS Code that should not be recommended for users of this workspace. + "unwantedRecommendations": [] } diff --git a/LICENSE b/LICENSE index 529f69e..6ab8d4a 100644 --- a/LICENSE +++ b/LICENSE @@ -1,20 +1,20 @@ BSD 3-Clause License -Copyright (c) 2019, The Polymer Authors. All rights reserved. +Copyright (c) 2019 Google LLC. All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: -* Redistributions of source code must retain the above copyright notice, this - list of conditions and the following disclaimer. +1. Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. -* Redistributions in binary form must reproduce the above copyright notice, - this list of conditions and the following disclaimer in the documentation - and/or other materials provided with the distribution. +2. Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. -* Neither the name of the copyright holder nor the names of its - contributors may be used to endorse or promote products derived from - this software without specific prior written permission. +3. Neither the name of the copyright holder nor the names of its + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE @@ -25,4 +25,4 @@ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. \ No newline at end of file diff --git a/README.md b/README.md index de27dcf..0e16339 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# LitElement TypeScript starter +# LitElement TypeScript starter This project includes a sample component using LitElement with TypeScript. @@ -30,7 +30,11 @@ Both the TypeScript compiler and lit-analyzer are configured to be very strict. ## Testing -This sample uses Karma, Chai, Mocha, and the open-wc test helpers for testing. See the [open-wc testing documentation](https://open-wc.org/testing/testing.html) for more information. +This sample modern-web.dev's +[@web/test-runner](https://www.npmjs.com/package/@web/test-runner) along with +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: @@ -40,7 +44,7 @@ npm test ## Dev Server -This sample uses open-wc's [es-dev-server](https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server) for previewing the project without additional build steps. ES 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. +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. To run the dev server and open the project in a new browser tab: @@ -53,15 +57,16 @@ There is a development HTML file located at `/dev/index.html` that you can view ## Editing If you use VS Code, we highly reccomend the [lit-plugin extension](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin), which enables some extremely useful features for lit-html templates: - - Syntax highlighting - - Type-checking - - Code completion - - Hover-over docs - - Jump to definition - - Linting - - Quick Fixes - - The project is setup to reccomend lit-plugin to VS Code users if they don't already have it installed. + +- Syntax highlighting +- Type-checking +- Code completion +- Hover-over docs +- Jump to definition +- Linting +- Quick Fixes + +The project is setup to reccomend lit-plugin to VS Code users if they don't already have it installed. ## Linting diff --git a/custom-elements.json b/custom-elements.json index a182afa..84dc694 100644 --- a/custom-elements.json +++ b/custom-elements.json @@ -33,6 +33,24 @@ "description": "The number of times the button has been clicked.", "type": "number", "default": "0" + }, + { + "name": "renderRoot", + "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.", + "type": "HTMLElement | ShadowRoot" + }, + { + "name": "isUpdatePending", + "type": "boolean" + }, + { + "name": "hasUpdated", + "type": "boolean" + }, + { + "name": "updateComplete", + "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.", + "type": "Promise" } ], "slots": [ diff --git a/dev/README.md b/dev/README.md index a4fe9fb..57a7ed9 100644 --- a/dev/README.md +++ b/dev/README.md @@ -1,2 +1 @@ - This directory contains HTML files containing your element for development. By running `npm run build:watch` and `npm run serve` you can edit and see changes without bundling. diff --git a/dev/index.html b/dev/index.html index 8e27df2..8ecd73c 100644 --- a/dev/index.html +++ b/dev/index.html @@ -1,9 +1,11 @@ - + - + <my-element> Demo + +