From fddb01149cc6146d65ef86125b28e2247e8a312f Mon Sep 17 00:00:00 2001 From: Kevin Schaaf Date: Fri, 29 Jan 2021 17:34:51 -0800 Subject: [PATCH 1/3] Update lit-starter-ts to lit-next * Upgrades the source to work with lit-next * Aligns the linting and formatting rules/settings & ignores with the monorepo * Upgrades to the same version of typescript and tsconfig settings as the monorepo * Upgrades the test runner from karma to web-test-runner * Upgrades the dev server from es-dev-server to @web/dev-server --- .eleventy.cjs | 8 +- .eslintignore | 5 + .eslintrc.json | 33 +- .gitignore | 2 +- .vscode/extensions.json | 16 +- README.md | 29 +- custom-elements.json | 18 + dev/README.md | 1 - dev/index.html | 6 +- docs-src/.eleventyignore | 2 + docs-src/_data/api.11tydata.js | 4 +- docs-src/_includes/example.11ty.cjs | 20 +- docs-src/_includes/footer.11ty.cjs | 4 +- docs-src/_includes/header.11ty.cjs | 2 +- docs-src/_includes/nav.11ty.cjs | 2 +- docs-src/_includes/page.11ty.cjs | 9 +- docs-src/api.11ty.cjs | 53 +- docs-src/examples/index.md | 8 +- docs-src/index.md | 13 +- docs-src/install.md | 2 + docs/_README/index.html | 4 - docs/api/index.html | 30 +- docs/examples/index.html | 6 +- docs/examples/name-property/index.html | 4 +- docs/index.html | 6 +- docs/install/index.html | 4 +- docs/my-element.bundled.js | Bin 28172 -> 17378 bytes karma.conf.cjs | 24 - package-lock.json | 5371 +++++++++++++++++++++++- package.json | 47 +- rollup.config.js | 9 +- src/my-element.ts | 3 +- src/test/my-element_test.ts | 1 + tsconfig.json | 9 +- web-dev-server.config.js | 14 + web-test-runner.config.js | 39 + 36 files changed, 5508 insertions(+), 300 deletions(-) create mode 100644 .eslintignore create mode 100644 docs-src/.eleventyignore delete mode 100644 docs/_README/index.html delete mode 100644 karma.conf.cjs create mode 100644 web-dev-server.config.js create mode 100644 web-test-runner.config.js 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..7c38c16 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ /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/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 + +