diff --git a/owc-app/.editorconfig b/owc-app/.editorconfig deleted file mode 100644 index c8c2d2a..0000000 --- a/owc-app/.editorconfig +++ /dev/null @@ -1,29 +0,0 @@ -# EditorConfig helps developers define and maintain consistent -# coding styles between different editors and IDEs -# editorconfig.org - -root = true - - -[*] - -# Change these settings to your own preference -indent_style = space -indent_size = 2 - -# We recommend you to keep these unchanged -end_of_line = lf -charset = utf-8 -trim_trailing_whitespace = true -insert_final_newline = true - -[*.md] -trim_trailing_whitespace = false - -[*.json] -indent_size = 2 - -[*.{html,js,md}] -block_comment_start = /** -block_comment = * -block_comment_end = */ diff --git a/owc-app/.gitignore b/owc-app/.gitignore deleted file mode 100644 index f3d7ea0..0000000 --- a/owc-app/.gitignore +++ /dev/null @@ -1,20 +0,0 @@ -## editors -/.idea -/.vscode - -## system files -.DS_Store - -## npm -/node_modules/ -/npm-debug.log - -## testing -/coverage/ - -## temp folders -/.tmp/ - -# build -/_site/ -/dist/ diff --git a/owc-app/LICENSE b/owc-app/LICENSE deleted file mode 100644 index 7246e5a..0000000 --- a/owc-app/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2019 owc-app - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file diff --git a/owc-app/README.md b/owc-app/README.md deleted file mode 100644 index f62e851..0000000 --- a/owc-app/README.md +++ /dev/null @@ -1,30 +0,0 @@ -

- -

- -## Open-wc Starter App - -[![Built with open-wc recommendations](https://img.shields.io/badge/built%20with-open--wc-blue.svg)](https://github.com/open-wc) - -## Quickstart - -To get started: - -```bash -npm init @open-wc -# requires node 10 & npm 6 or higher -``` - -## Scripts - -- `start` runs your app for development, reloading on file changes -- `start:build` runs your app after it has been built using the build command -- `build` builds your app and outputs it in your `dist` directory -- `test` runs your test suite with Web Test Runner -- `lint` runs the linter for your project - -## Tooling configs - -For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project. - -If you customize the configuration a lot, you can consider moving them to individual files. diff --git a/owc-app/custom-elements.json b/owc-app/custom-elements.json deleted file mode 100644 index c59cca7..0000000 --- a/owc-app/custom-elements.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "version": 2, - "tags": [ - { - "name": "owc-app", - "description": "An application with a title and an action counter", - "properties": [ - { - "name": "title", - "type": "String", - "description": "The title of your application", - "default": "Hey there" - }, - { - "name": "page", - "type": "String", - "description": "Which page to show", - "default": "main" - } - ], - "events": [], - "slots": [], - "cssProperties": [] - } - ] -} diff --git a/owc-app/index.html b/owc-app/index.html deleted file mode 100644 index d39c546..0000000 --- a/owc-app/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - owc-app - - - - - - - - - \ No newline at end of file diff --git a/owc-app/package.json b/owc-app/package.json deleted file mode 100644 index 68c9980..0000000 --- a/owc-app/package.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "name": "owc-app", - "version": "0.0.0", - "description": "Webcomponent owc-app following open-wc recommendations", - "license": "MIT", - "author": "owc-app", - "scripts": { - "format": "npm run format:eslint && npm run format:prettier", - "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore", - "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore", - "lint": "npm run lint:eslint && npm run lint:prettier", - "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore", - "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore", - "start": "web-dev-server --app-index index.html --node-resolve --open --watch" - }, - "dependencies": { - "lit-element": "^2.0.1", - "lit-html": "^1.0.0" - }, - "devDependencies": { - "@open-wc/eslint-config": "^4.0.0", - "@web/dev-server": "^0.0.12", - "husky": "^1.0.0", - "lint-staged": "^10.0.0", - "prettier": "^2.0.4" - }, - "eslintConfig": { - "extends": [ - "@open-wc/eslint-config", - "eslint-config-prettier" - ] - }, - "husky": { - "hooks": { - "pre-commit": "lint-staged" - } - }, - "lint-staged": { - "*.js": [ - "eslint --fix", - "prettier --write", - "git add" - ] - }, - "prettier": { - "singleQuote": true, - "arrowParens": "avoid" - } -} diff --git a/owc-app/src/OwcApp.js b/owc-app/src/OwcApp.js deleted file mode 100644 index 98460d9..0000000 --- a/owc-app/src/OwcApp.js +++ /dev/null @@ -1,84 +0,0 @@ -import { LitElement, html, css } from 'lit-element'; -import { openWcLogo } from './open-wc-logo.js'; - -export class OwcApp extends LitElement { - static get properties() { - return { - title: { type: String }, - page: { type: String }, - }; - } - - static get styles() { - return css` - :host { - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - font-size: calc(10px + 2vmin); - color: #1a2b42; - max-width: 960px; - margin: 0 auto; - text-align: center; - } - - main { - flex-grow: 1; - } - - .logo > svg { - margin-top: 36px; - animation: app-logo-spin infinite 20s linear; - } - - @keyframes app-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - - .app-footer { - font-size: calc(12px + 0.5vmin); - align-items: center; - } - - .app-footer a { - margin-left: 5px; - } - `; - } - - render() { - return html` -
- -

My app

- -

Edit src/OwcApp.js and save to reload.

- - Code examples - -
- -

- 🚽 Made with love by - open-wc. -

- `; - } -} diff --git a/owc-app/src/open-wc-logo.js b/owc-app/src/open-wc-logo.js deleted file mode 100644 index 858bade..0000000 --- a/owc-app/src/open-wc-logo.js +++ /dev/null @@ -1,33 +0,0 @@ -import { html } from 'lit-html'; - -export const openWcLogo = html` - - - - - - - - - - - -`; diff --git a/owc-app/src/owc-app.js b/owc-app/src/owc-app.js deleted file mode 100644 index 9edd11b..0000000 --- a/owc-app/src/owc-app.js +++ /dev/null @@ -1,3 +0,0 @@ -import { OwcApp } from './OwcApp.js'; - -customElements.define('owc-app', OwcApp); diff --git a/src/core.js b/src/core.js index c8e379e..6cc0fe3 100644 --- a/src/core.js +++ b/src/core.js @@ -8,6 +8,50 @@ import path from 'path'; import prompts from 'prompts'; import Generator from './Generator.js'; +// order taken from prettier-package-json +const pkgJsonOrder = [ + '$schema', + 'private', + 'name', + 'description', + 'license', + 'author', + 'maintainers', + 'contributors', + 'homepage', + 'repository', + 'bugs', + 'version', + 'type', + 'workspaces', + 'main', + 'module', + 'browser', + 'man', + 'preferGlobal', + 'bin', + 'files', + 'directories', + 'scripts', + 'config', + 'sideEffects', + 'types', + 'typings', + 'optionalDependencies', + 'dependencies', + 'bundleDependencies', + 'bundledDependencies', + 'peerDependencies', + 'devDependencies', + 'keywords', + 'engines', + 'engine-strict', + 'engineStrict', + 'os', + 'cpu', + 'publishConfig', +]; + /** * * @param {Function[]} mixins @@ -391,6 +435,20 @@ export function copyTemplateJsonInto( finalObj = deepmerge(JSON.parse(sourceContent), finalObj, mergeOptions); } + // sort package.json keys + if (toPath.endsWith('package.json')) { + const temp = {}; + const indexOf = k => { + const i = pkgJsonOrder.indexOf(k); + return i === -1 ? Infinity : 0; + }; + const entries = Object.entries(finalObj).sort(([a], [b]) => indexOf(a) - indexOf(b)); + for (const [k, v] of entries) { + temp[k] = v; + } + finalObj = temp; + } + writeFileToPath(toPath, JSON.stringify(finalObj, null, 2)); } diff --git a/src/generators/app-lit-element-ts/templates/_MyApp.ts b/src/generators/app-lit-element-ts/templates/_MyApp.ts index caad176..bc44f70 100644 --- a/src/generators/app-lit-element-ts/templates/_MyApp.ts +++ b/src/generators/app-lit-element-ts/templates/_MyApp.ts @@ -2,10 +2,7 @@ import { LitElement, html, css, property } from 'lit-element'; import { openWcLogo } from './open-wc-logo.js'; export class <%= className %> extends LitElement { - - @property({type: String}) page = 'main'; - - @property({type: String}) title = ''; + @property({ type: String }) title = 'My app'; static styles = css` :host { @@ -19,6 +16,7 @@ export class <%= className %> extends LitElement { max-width: 960px; margin: 0 auto; text-align: center; + background-color: var(--<%= tagName %>-background-color); } main { @@ -53,7 +51,7 @@ export class <%= className %> extends LitElement { return html`
-

My app

+

${this.title}

Edit src/<%= className %>.js and save to reload.

.js'; export default { - title: '<%= tagName %>', + title: '<%= className %>', + component: '<%= tagName %>', + argTypes: { + backgroundColor: { control: 'color' }, + }, }; -export const App = () => - html` - <<%= tagName %>>> - `; +interface Story { + (args: T): TemplateResult; + args?: Partial; + argTypes?: Record; +} + +interface ArgTypes { + title?: string; + backgroundColor?: string; +} + +const Template: Story = ({ title, backgroundColor = 'white' }: ArgTypes) => html` + <<%= tagName %> style="--<%= tagName %>-background-color: ${backgroundColor}" .title=${title}>> +`; + +export const App = Template.bind({}); +App.args = { + title: 'My app', +}; diff --git a/src/generators/app-lit-element-ts/templates/_my-app.test.ts b/src/generators/app-lit-element-ts/templates/_my-app.test.ts index e21bc3f..91f71dc 100644 --- a/src/generators/app-lit-element-ts/templates/_my-app.test.ts +++ b/src/generators/app-lit-element-ts/templates/_my-app.test.ts @@ -1,14 +1,12 @@ import { html, fixture, expect } from '@open-wc/testing'; -import {<%= className %>} from '../src/<%= className %>.js'; +import { <%= className %> } from '../src/<%= className %>.js'; import '../src/<%= tagName %>.js'; describe('<%= className %>', () => { let element: <%= className %>; beforeEach(async () => { - element = await fixture(html` - <<%= tagName %>>> - `); + element = await fixture(html`<<%= tagName %>>>`); }); it('renders a h1', () => { diff --git a/src/generators/app-lit-element-ts/templates/_package.json b/src/generators/app-lit-element-ts/templates/_package.json index af48483..75557a7 100644 --- a/src/generators/app-lit-element-ts/templates/_package.json +++ b/src/generators/app-lit-element-ts/templates/_package.json @@ -2,18 +2,16 @@ "name": "<%= tagName %>", "license": "MIT", "scripts": { - "start": "concurrently --kill-others --names tsc,web-dev-server \"npm run tsc:watch\" \"web-dev-server --app-index index.html --node-resolve --open --watch\"", - "tsc:watch": "tsc --watch" + "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"" }, "dependencies": { "lit-html": "^1.0.0", "lit-element": "^2.0.1" }, "devDependencies": { - "@types/node": "13.11.1", - "@web/dev-server": "^0.0.12", - "typescript": "~4.0.3", - "concurrently": "^5.1.0", - "tslib": "^1.11.0" + "@web/dev-server": "^0.1.1", + "concurrently": "^5.3.0", + "typescript": "^4.1.3", + "tslib": "^2.0.3" } } diff --git a/src/generators/app-lit-element-ts/templates/static-demoing/.storybook/main.js b/src/generators/app-lit-element-ts/templates/static-demoing/.storybook/main.js index 1a4258d..93ff33d 100644 --- a/src/generators/app-lit-element-ts/templates/static-demoing/.storybook/main.js +++ b/src/generators/app-lit-element-ts/templates/static-demoing/.storybook/main.js @@ -1,14 +1,3 @@ module.exports = { - stories: ['../**/stories/*.stories.{js,md,mdx}'], - addons: [ - 'storybook-prebuilt/addon-knobs/register.js', - 'storybook-prebuilt/addon-docs/register.js', - 'storybook-prebuilt/addon-viewport/register.js', - ], - esDevServer: { - // custom es-dev-server options - nodeResolve: true, - watch: true, - open: true - }, + stories: ['../**/out-tsc/stories/*.stories.{js,md,mdx}'], }; diff --git a/src/generators/app-lit-element-ts/templates/static-demoing/.storybook/preview.js b/src/generators/app-lit-element-ts/templates/static-demoing/.storybook/preview.js deleted file mode 100644 index 2cc90bb..0000000 --- a/src/generators/app-lit-element-ts/templates/static-demoing/.storybook/preview.js +++ /dev/null @@ -1,17 +0,0 @@ -import { addParameters, setCustomElements } from '@open-wc/demoing-storybook'; - -addParameters({ - docs: { - iframeHeight: '200px', - } -}); - -async function run() { - const customElements = await ( - await fetch(new URL('../custom-elements.json', import.meta.url)) - ).json(); - - setCustomElements(customElements); -} - -run(); diff --git a/src/generators/app-lit-element-ts/templates/static-demoing/.storybook/server.mjs b/src/generators/app-lit-element-ts/templates/static-demoing/.storybook/server.mjs new file mode 100644 index 0000000..c24942b --- /dev/null +++ b/src/generators/app-lit-element-ts/templates/static-demoing/.storybook/server.mjs @@ -0,0 +1,8 @@ +import { storybookPlugin } from '@web/dev-server-storybook'; +import baseConfig from '../web-dev-server.config.mjs'; + +export default /** @type {import('@web/dev-server').DevServerConfig} */ ({ + ...baseConfig, + open: '/', + plugins: [...baseConfig.plugins, storybookPlugin({ type: 'web-components' })], +}); diff --git a/src/generators/app-lit-element-ts/templates/static-testing/web-test-runner.config.mjs b/src/generators/app-lit-element-ts/templates/static-testing/web-test-runner.config.mjs index e22a691..fe6355d 100644 --- a/src/generators/app-lit-element-ts/templates/static-testing/web-test-runner.config.mjs +++ b/src/generators/app-lit-element-ts/templates/static-testing/web-test-runner.config.mjs @@ -1,4 +1,29 @@ -export default { +// import { playwrightLauncher } from '@web/test-runner-playwright'; + +export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({ files: 'out-tsc/test/**/*.test.js', - nodeResolve: true -}; \ No newline at end of file + nodeResolve: true, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto', + + /** Confgure bare import resolve plugin */ + // nodeResolve: { + // exportConditions: ['browser', 'development'] + // }, + + /** Amount of browsers to run concurrently */ + // concurrentBrowsers: 2, + + /** Amount of test files per browser to test concurrently */ + // concurrency: 1, + + /** Browsers to run tests on */ + // browsers: [ + // playwrightLauncher({ product: 'chromium' }), + // playwrightLauncher({ product: 'firefox' }), + // playwrightLauncher({ product: 'webkit' }), + // ], + + // See documentation for all available options +}); diff --git a/src/generators/app-lit-element-ts/templates/static/web-dev-server.config.mjs b/src/generators/app-lit-element-ts/templates/static/web-dev-server.config.mjs new file mode 100644 index 0000000..58a93c6 --- /dev/null +++ b/src/generators/app-lit-element-ts/templates/static/web-dev-server.config.mjs @@ -0,0 +1,28 @@ +// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr'; + +/** Use Hot Module replacement by adding --hmr to the start command */ +const hmr = process.argv.includes('--hmr'); + +export default /** @type {import('@web/dev-server').DevServerConfig} */ ({ + nodeResolve: true, + open: '/', + watch: !hmr, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto' + + /** Set appIndex to enable SPA routing */ + // appIndex: 'demo/index.html', + + /** Confgure bare import resolve plugin */ + // nodeResolve: { + // exportConditions: ['browser', 'development'] + // }, + + plugins: [ + /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */ + // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }), + ], + + // See documentation for all available options +}); diff --git a/src/generators/app-lit-element/templates/_MyApp.js b/src/generators/app-lit-element/templates/_MyApp.js index e15a313..90d2897 100644 --- a/src/generators/app-lit-element/templates/_MyApp.js +++ b/src/generators/app-lit-element/templates/_MyApp.js @@ -5,7 +5,6 @@ export class <%= className %> extends LitElement { static get properties() { return { title: { type: String }, - page: { type: String }, }; } @@ -22,6 +21,7 @@ export class <%= className %> extends LitElement { max-width: 960px; margin: 0 auto; text-align: center; + background-color: var(--<%= tagName %>-background-color); } main { @@ -53,11 +53,16 @@ export class <%= className %> extends LitElement { `; } + constructor() { + super(); + this.title = 'My app'; + } + render() { return html`
-

My app

+

${this.title}

Edit src/<%= className %>.js and save to reload.

.js'; export default { - title: '<%= tagName %>', + title: '<%= className %>', + component: '<%= tagName %>', + argTypes: { + backgroundColor: { control: 'color' }, + }, }; -export const App = () => - html` - <<%= tagName %>>> +function Template({ title, backgroundColor }) { + return html` + <<%= tagName %> + style="--<%= tagName %>-background-color: ${backgroundColor || 'white'}" + .title=${title} + > + > `; +} + +export const App = Template.bind({}); +App.args = { + title: 'My app', +}; diff --git a/src/generators/app-lit-element/templates/_my-app.test.js b/src/generators/app-lit-element/templates/_my-app.test.js index bd1b1d1..62749ab 100644 --- a/src/generators/app-lit-element/templates/_my-app.test.js +++ b/src/generators/app-lit-element/templates/_my-app.test.js @@ -5,9 +5,7 @@ import '../src/<%= tagName %>.js'; describe('<%= className %>', () => { let element; beforeEach(async () => { - element = await fixture(html` - <<%= tagName %>>> - `); + element = await fixture(html`<<%= tagName %>>>`); }); it('renders a h1', () => { diff --git a/src/generators/app-lit-element/templates/_package.json b/src/generators/app-lit-element/templates/_package.json index d2d49d1..be44ebc 100644 --- a/src/generators/app-lit-element/templates/_package.json +++ b/src/generators/app-lit-element/templates/_package.json @@ -2,13 +2,13 @@ "name": "<%= tagName %>", "license": "MIT", "scripts": { - "start": "web-dev-server --app-index index.html --node-resolve --open --watch" + "start": "web-dev-server" }, "dependencies": { "lit-html": "^1.0.0", "lit-element": "^2.0.1" }, "devDependencies": { - "@web/dev-server": "^0.0.12" + "@web/dev-server": "^0.1.1" } } \ No newline at end of file diff --git a/src/generators/app-lit-element/templates/static-demoing/.storybook/main.js b/src/generators/app-lit-element/templates/static-demoing/.storybook/main.js index 1a4258d..94f9cf8 100644 --- a/src/generators/app-lit-element/templates/static-demoing/.storybook/main.js +++ b/src/generators/app-lit-element/templates/static-demoing/.storybook/main.js @@ -1,14 +1,3 @@ module.exports = { stories: ['../**/stories/*.stories.{js,md,mdx}'], - addons: [ - 'storybook-prebuilt/addon-knobs/register.js', - 'storybook-prebuilt/addon-docs/register.js', - 'storybook-prebuilt/addon-viewport/register.js', - ], - esDevServer: { - // custom es-dev-server options - nodeResolve: true, - watch: true, - open: true - }, }; diff --git a/src/generators/app-lit-element/templates/static-demoing/.storybook/preview.js b/src/generators/app-lit-element/templates/static-demoing/.storybook/preview.js deleted file mode 100644 index 2cc90bb..0000000 --- a/src/generators/app-lit-element/templates/static-demoing/.storybook/preview.js +++ /dev/null @@ -1,17 +0,0 @@ -import { addParameters, setCustomElements } from '@open-wc/demoing-storybook'; - -addParameters({ - docs: { - iframeHeight: '200px', - } -}); - -async function run() { - const customElements = await ( - await fetch(new URL('../custom-elements.json', import.meta.url)) - ).json(); - - setCustomElements(customElements); -} - -run(); diff --git a/src/generators/app-lit-element/templates/static-demoing/.storybook/server.mjs b/src/generators/app-lit-element/templates/static-demoing/.storybook/server.mjs new file mode 100644 index 0000000..c24942b --- /dev/null +++ b/src/generators/app-lit-element/templates/static-demoing/.storybook/server.mjs @@ -0,0 +1,8 @@ +import { storybookPlugin } from '@web/dev-server-storybook'; +import baseConfig from '../web-dev-server.config.mjs'; + +export default /** @type {import('@web/dev-server').DevServerConfig} */ ({ + ...baseConfig, + open: '/', + plugins: [...baseConfig.plugins, storybookPlugin({ type: 'web-components' })], +}); diff --git a/src/generators/app-lit-element/templates/static-testing/web-test-runner.config.mjs b/src/generators/app-lit-element/templates/static-testing/web-test-runner.config.mjs index bbb5f73..93ec00e 100644 --- a/src/generators/app-lit-element/templates/static-testing/web-test-runner.config.mjs +++ b/src/generators/app-lit-element/templates/static-testing/web-test-runner.config.mjs @@ -1,4 +1,29 @@ -export default { +// import { playwrightLauncher } from '@web/test-runner-playwright'; + +export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({ files: 'test/**/*.test.js', - nodeResolve: true -}; \ No newline at end of file + nodeResolve: true, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto', + + /** Confgure bare import resolve plugin */ + // nodeResolve: { + // exportConditions: ['browser', 'development'] + // }, + + /** Amount of browsers to run concurrently */ + // concurrentBrowsers: 2, + + /** Amount of test files per browser to test concurrently */ + // concurrency: 1, + + /** Browsers to run tests on */ + // browsers: [ + // playwrightLauncher({ product: 'chromium' }), + // playwrightLauncher({ product: 'firefox' }), + // playwrightLauncher({ product: 'webkit' }), + // ], + + // See documentation for all available options +}); diff --git a/src/generators/app-lit-element/templates/static/web-dev-server.config.mjs b/src/generators/app-lit-element/templates/static/web-dev-server.config.mjs new file mode 100644 index 0000000..58a93c6 --- /dev/null +++ b/src/generators/app-lit-element/templates/static/web-dev-server.config.mjs @@ -0,0 +1,28 @@ +// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr'; + +/** Use Hot Module replacement by adding --hmr to the start command */ +const hmr = process.argv.includes('--hmr'); + +export default /** @type {import('@web/dev-server').DevServerConfig} */ ({ + nodeResolve: true, + open: '/', + watch: !hmr, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto' + + /** Set appIndex to enable SPA routing */ + // appIndex: 'demo/index.html', + + /** Confgure bare import resolve plugin */ + // nodeResolve: { + // exportConditions: ['browser', 'development'] + // }, + + plugins: [ + /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */ + // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }), + ], + + // See documentation for all available options +}); diff --git a/src/generators/building-rollup-ts/templates/static/rollup.config.js b/src/generators/building-rollup-ts/templates/static/rollup.config.js index babc0bf..f71b49b 100644 --- a/src/generators/building-rollup-ts/templates/static/rollup.config.js +++ b/src/generators/building-rollup-ts/templates/static/rollup.config.js @@ -28,4 +28,4 @@ export default merge(baseConfig, { // alternatively, you can use your JS as entrypoint for rollup and // optionally set a HTML template manually // input: './app.js', -}); \ No newline at end of file +}); diff --git a/src/generators/building-rollup/templates/static/rollup.config.js b/src/generators/building-rollup/templates/static/rollup.config.js index babc0bf..f71b49b 100644 --- a/src/generators/building-rollup/templates/static/rollup.config.js +++ b/src/generators/building-rollup/templates/static/rollup.config.js @@ -28,4 +28,4 @@ export default merge(baseConfig, { // alternatively, you can use your JS as entrypoint for rollup and // optionally set a HTML template manually // input: './app.js', -}); \ No newline at end of file +}); diff --git a/src/generators/common-repo/templates/_gitignore b/src/generators/common-repo/templates/_gitignore index cd190ee..ee91b02 100644 --- a/src/generators/common-repo/templates/_gitignore +++ b/src/generators/common-repo/templates/_gitignore @@ -18,4 +18,6 @@ # build /_site/ /dist/ -/out-tsc/ \ No newline at end of file +/out-tsc/ + +storybook-static \ No newline at end of file diff --git a/src/generators/demoing-storybook-ts/templates/_package.json b/src/generators/demoing-storybook-ts/templates/_package.json index cce7f67..db40f86 100644 --- a/src/generators/demoing-storybook-ts/templates/_package.json +++ b/src/generators/demoing-storybook-ts/templates/_package.json @@ -1,9 +1,9 @@ { "scripts": { - "storybook": "concurrently --kill-others --names tsc,storybook \"npm run tsc:watch\" \"start-storybook --node-resolve --watch --open\"", - "storybook:build": "build-storybook" + "storybook": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"", + "storybook:build": "tsc && build-storybook" }, "devDependencies": { - "@open-wc/demoing-storybook": "^2.0.0" + "@web/dev-server-storybook": "^0.3.2" } } diff --git a/src/generators/demoing-storybook-ts/templates/static-scaffold/stories/index.stories.md b/src/generators/demoing-storybook-ts/templates/static-scaffold/stories/index.stories.md deleted file mode 100644 index fcd13da..0000000 --- a/src/generators/demoing-storybook-ts/templates/static-scaffold/stories/index.stories.md +++ /dev/null @@ -1,48 +0,0 @@ -```js script -import { html } from '@open-wc/demoing-storybook'; -import '../dist/<%= tagName %>.js'; - -export default { - title: '<%= className %>', - component: '<%= tagName %>', - options: { selectedPanel: "storybookjs/knobs/panel" }, -}; -``` - -# <%= className %> - -A component for... - -## Features: - -- a -- b -- ... - -## How to use - -### Installation - -```bash -yarn add <%= tagName %> -``` - -```js -import '<%= tagName %>/<%= tagName %>.js'; -``` - -```js preview-story -export const Simple = () => html` - <<%= tagName %>>> -`; -``` - -## Variations - -###### Custom Title - -```js preview-story -export const CustomTitle = () => html` - <<%= tagName %> title="Hello World">> -`; -``` diff --git a/src/generators/demoing-storybook-ts/templates/static-scaffold/stories/index.stories.ts b/src/generators/demoing-storybook-ts/templates/static-scaffold/stories/index.stories.ts new file mode 100644 index 0000000..df4dea6 --- /dev/null +++ b/src/generators/demoing-storybook-ts/templates/static-scaffold/stories/index.stories.ts @@ -0,0 +1,60 @@ +import { html, TemplateResult } from 'lit-html'; +import '../<%= tagName %>.js'; + +export default { + title: '<%= className %>', + component: '<%= tagName %>', + argTypes: { + title: { control: 'text' }, + counter: { control: 'number' }, + textColor: { control: 'color' }, + }, +}; + +interface Story { + (args: T): TemplateResult; + args?: Partial; + argTypes?: Record; +} + +interface ArgTypes { + title?: string; + counter?: number; + textColor?: string; + slot?: TemplateResult; +} + +const Template: Story = ({ + title = 'Hello world', + counter = 5, + textColor, + slot, +}: ArgTypes) => html` + <<%= tagName %> + style="--<%= tagName %>-text-color: ${textColor || 'black'}" + .title=${title} + .counter=${counter} + > + ${slot} + > +`; + +export const Regular = Template.bind({}); + +export const CustomTitle = Template.bind({}); +CustomTitle.args = { + title: 'My title', +}; + +export const CustomCounter = Template.bind({}); +CustomCounter.args = { + counter: 123456, +}; + +export const SlottedContent = Template.bind({}); +SlottedContent.args = { + slot: html`

Slotted content

`, +}; +SlottedContent.argTypes = { + slot: { table: { disable: true } }, +}; diff --git a/src/generators/demoing-storybook-ts/templates/static/.storybook/main.js b/src/generators/demoing-storybook-ts/templates/static/.storybook/main.js index c926a24..cbdd056 100644 --- a/src/generators/demoing-storybook-ts/templates/static/.storybook/main.js +++ b/src/generators/demoing-storybook-ts/templates/static/.storybook/main.js @@ -1,14 +1,3 @@ module.exports = { - stories: ['../stories/**/*.stories.{js,md,mdx}'], - addons: [ - 'storybook-prebuilt/addon-knobs/register.js', - 'storybook-prebuilt/addon-docs/register.js', - 'storybook-prebuilt/addon-viewport/register.js', - ], - esDevServer: { - // custom es-dev-server options - nodeResolve: true, - watch: true, - open: true - }, + stories: ['../dist/stories/**/*.stories.{js,md,mdx}'], }; diff --git a/src/generators/demoing-storybook-ts/templates/static/.storybook/preview.js b/src/generators/demoing-storybook-ts/templates/static/.storybook/preview.js deleted file mode 100644 index 2cc90bb..0000000 --- a/src/generators/demoing-storybook-ts/templates/static/.storybook/preview.js +++ /dev/null @@ -1,17 +0,0 @@ -import { addParameters, setCustomElements } from '@open-wc/demoing-storybook'; - -addParameters({ - docs: { - iframeHeight: '200px', - } -}); - -async function run() { - const customElements = await ( - await fetch(new URL('../custom-elements.json', import.meta.url)) - ).json(); - - setCustomElements(customElements); -} - -run(); diff --git a/src/generators/demoing-storybook-ts/templates/static/.storybook/server.mjs b/src/generators/demoing-storybook-ts/templates/static/.storybook/server.mjs new file mode 100644 index 0000000..c24942b --- /dev/null +++ b/src/generators/demoing-storybook-ts/templates/static/.storybook/server.mjs @@ -0,0 +1,8 @@ +import { storybookPlugin } from '@web/dev-server-storybook'; +import baseConfig from '../web-dev-server.config.mjs'; + +export default /** @type {import('@web/dev-server').DevServerConfig} */ ({ + ...baseConfig, + open: '/', + plugins: [...baseConfig.plugins, storybookPlugin({ type: 'web-components' })], +}); diff --git a/src/generators/demoing-storybook/templates/_package.json b/src/generators/demoing-storybook/templates/_package.json index 201434e..61ca8d6 100644 --- a/src/generators/demoing-storybook/templates/_package.json +++ b/src/generators/demoing-storybook/templates/_package.json @@ -1,9 +1,9 @@ { "scripts": { - "storybook": "start-storybook", + "storybook": "web-dev-server -c .storybook/server.mjs", "storybook:build": "build-storybook" }, "devDependencies": { - "@open-wc/demoing-storybook": "^2.0.0" + "@web/dev-server-storybook": "^0.3.2" } } diff --git a/src/generators/demoing-storybook/templates/static-scaffold/stories/index.stories.js b/src/generators/demoing-storybook/templates/static-scaffold/stories/index.stories.js new file mode 100644 index 0000000..feec9e7 --- /dev/null +++ b/src/generators/demoing-storybook/templates/static-scaffold/stories/index.stories.js @@ -0,0 +1,44 @@ +import { html } from 'lit-html'; +import '../<%= tagName %>.js'; + +export default { + title: '<%= className %>', + component: '<%= tagName %>', + argTypes: { + title: { control: 'text' }, + counter: { control: 'number' }, + textColor: { control: 'color' }, + }, +}; + +function Template({ title = 'Hello world', counter = 5, textColor, slot }) { + return html` + <<%= tagName %> + style="--<%= tagName %>-text-color: ${textColor || 'black'}" + .title=${title} + .counter=${counter} + > + ${slot} + > + `; +} + +export const Regular = Template.bind({}); + +export const CustomTitle = Template.bind({}); +CustomTitle.args = { + title: 'My title', +}; + +export const CustomCounter = Template.bind({}); +CustomCounter.args = { + counter: 123456, +}; + +export const SlottedContent = Template.bind({}); +SlottedContent.args = { + slot: html`

Slotted content

`, +}; +SlottedContent.argTypes = { + slot: { table: { disable: true } }, +}; diff --git a/src/generators/demoing-storybook/templates/static-scaffold/stories/index.stories.md b/src/generators/demoing-storybook/templates/static-scaffold/stories/index.stories.md deleted file mode 100644 index e807928..0000000 --- a/src/generators/demoing-storybook/templates/static-scaffold/stories/index.stories.md +++ /dev/null @@ -1,48 +0,0 @@ -```js script -import { html } from '@open-wc/demoing-storybook'; -import '../<%= tagName %>.js'; - -export default { - title: '<%= className %>', - component: '<%= tagName %>', - options: { selectedPanel: "storybookjs/knobs/panel" }, -}; -``` - -# <%= className %> - -A component for... - -## Features: - -- a -- b -- ... - -## How to use - -### Installation - -```bash -yarn add <%= tagName %> -``` - -```js -import '<%= tagName %>/<%= tagName %>.js'; -``` - -```js preview-story -export const Simple = () => html` - <<%= tagName %>>> -`; -``` - -## Variations - -###### Custom Title - -```js preview-story -export const CustomTitle = () => html` - <<%= tagName %> title="Hello World">> -`; -``` diff --git a/src/generators/demoing-storybook/templates/static/.storybook/main.js b/src/generators/demoing-storybook/templates/static/.storybook/main.js index c926a24..b3a4c59 100644 --- a/src/generators/demoing-storybook/templates/static/.storybook/main.js +++ b/src/generators/demoing-storybook/templates/static/.storybook/main.js @@ -1,14 +1,3 @@ module.exports = { stories: ['../stories/**/*.stories.{js,md,mdx}'], - addons: [ - 'storybook-prebuilt/addon-knobs/register.js', - 'storybook-prebuilt/addon-docs/register.js', - 'storybook-prebuilt/addon-viewport/register.js', - ], - esDevServer: { - // custom es-dev-server options - nodeResolve: true, - watch: true, - open: true - }, }; diff --git a/src/generators/demoing-storybook/templates/static/.storybook/preview.js b/src/generators/demoing-storybook/templates/static/.storybook/preview.js deleted file mode 100644 index 2cc90bb..0000000 --- a/src/generators/demoing-storybook/templates/static/.storybook/preview.js +++ /dev/null @@ -1,17 +0,0 @@ -import { addParameters, setCustomElements } from '@open-wc/demoing-storybook'; - -addParameters({ - docs: { - iframeHeight: '200px', - } -}); - -async function run() { - const customElements = await ( - await fetch(new URL('../custom-elements.json', import.meta.url)) - ).json(); - - setCustomElements(customElements); -} - -run(); diff --git a/src/generators/demoing-storybook/templates/static/.storybook/server.mjs b/src/generators/demoing-storybook/templates/static/.storybook/server.mjs new file mode 100644 index 0000000..c24942b --- /dev/null +++ b/src/generators/demoing-storybook/templates/static/.storybook/server.mjs @@ -0,0 +1,8 @@ +import { storybookPlugin } from '@web/dev-server-storybook'; +import baseConfig from '../web-dev-server.config.mjs'; + +export default /** @type {import('@web/dev-server').DevServerConfig} */ ({ + ...baseConfig, + open: '/', + plugins: [...baseConfig.plugins, storybookPlugin({ type: 'web-components' })], +}); diff --git a/src/generators/linting-eslint-ts/templates/_.eslintrc.js b/src/generators/linting-eslint-ts/templates/_.eslintrc.js deleted file mode 100644 index c4cfa86..0000000 --- a/src/generators/linting-eslint-ts/templates/_.eslintrc.js +++ /dev/null @@ -1,20 +0,0 @@ -module.exports = { - root: true, - parser: '@typescript-eslint/parser', - plugins: ['@typescript-eslint', 'import', 'html'], - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/eslint-recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:import/errors', - 'plugin:import/warnings', - ], - rules: { - // disable the rule for all files - '@typescript-eslint/explicit-function-return-type': 'off', - '@typescript-eslint/no-non-null-assertion': 'off', - 'import/named': 'off', - 'import/no-unresolved': 'off', - 'import/extensions': ['error', 'always', { ignorePackages: true }], - }, -}; \ No newline at end of file diff --git a/src/generators/linting-eslint-ts/templates/_package.json b/src/generators/linting-eslint-ts/templates/_package.json index bcf036e..7291cb5 100644 --- a/src/generators/linting-eslint-ts/templates/_package.json +++ b/src/generators/linting-eslint-ts/templates/_package.json @@ -1,17 +1,19 @@ { - "scripts": { - "lint:eslint": "eslint --ext .ts,.html . --ignore-path .gitignore", - "format:eslint": "eslint --ext .ts,.html . --fix --ignore-path .gitignore" - }, "devDependencies": { "eslint": "^6.1.0", - "@open-wc/eslint-config": "^4.0.0", - "@typescript-eslint/eslint-plugin": "^2.20.0", - "@typescript-eslint/parser": "^2.20.0" + "@open-wc/eslint-config": "^4.2.0", + "@typescript-eslint/parser": "^2.20.0", + "@typescript-eslint/eslint-plugin": "^2.20.0" }, "eslintConfig": { - "extends": [ - "@open-wc/eslint-config" - ] + "parser": "@typescript-eslint/parser", + "extends": ["@open-wc/eslint-config"], + "plugins": ["@typescript-eslint"], + "rules": { + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": ["error"], + "import/no-unresolved": "off", + "import/extensions": ["error", "always", { "ignorePackages": true }] + } } } diff --git a/src/generators/linting-eslint/templates/_package.json b/src/generators/linting-eslint/templates/_package.json index 36e2ed5..ee725eb 100644 --- a/src/generators/linting-eslint/templates/_package.json +++ b/src/generators/linting-eslint/templates/_package.json @@ -1,11 +1,7 @@ { - "scripts": { - "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore", - "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore" - }, "devDependencies": { "eslint": "^6.1.0", - "@open-wc/eslint-config": "^4.0.0" + "@open-wc/eslint-config": "^4.2.0" }, "eslintConfig": { "extends": [ diff --git a/src/generators/linting-prettier-ts/templates/_package.json b/src/generators/linting-prettier-ts/templates/_package.json index aef2c21..bb6b45a 100644 --- a/src/generators/linting-prettier-ts/templates/_package.json +++ b/src/generators/linting-prettier-ts/templates/_package.json @@ -1,8 +1,4 @@ { - "scripts": { - "lint:prettier": "prettier \"**/*.js\" \"**/*.ts\" --check --ignore-path .gitignore", - "format:prettier": "prettier \"**/*.js\" \"**/*.ts\" --write --ignore-path .gitignore" - }, "devDependencies": { "prettier": "^2.0.4", "eslint-config-prettier": "^6.11.0" diff --git a/src/generators/linting-prettier/templates/_package.json b/src/generators/linting-prettier/templates/_package.json index f26ac3d..bb6b45a 100644 --- a/src/generators/linting-prettier/templates/_package.json +++ b/src/generators/linting-prettier/templates/_package.json @@ -1,8 +1,4 @@ { - "scripts": { - "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore", - "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore" - }, "devDependencies": { "prettier": "^2.0.4", "eslint-config-prettier": "^6.11.0" diff --git a/src/generators/linting-ts/templates/_package.json b/src/generators/linting-ts/templates/_package.json index 1dc1998..df8a13d 100644 --- a/src/generators/linting-ts/templates/_package.json +++ b/src/generators/linting-ts/templates/_package.json @@ -12,8 +12,8 @@ ] }, "scripts": { - "lint": "npm run lint:eslint && npm run lint:prettier", - "format": "npm run format:eslint && npm run format:prettier" + "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore", + "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore" }, "devDependencies": { "husky": "^1.0.0", diff --git a/src/generators/linting/templates/_package.json b/src/generators/linting/templates/_package.json index 9ad72fd..9c242ad 100644 --- a/src/generators/linting/templates/_package.json +++ b/src/generators/linting/templates/_package.json @@ -12,8 +12,8 @@ ] }, "scripts": { - "lint": "npm run lint:eslint && npm run lint:prettier", - "format": "npm run format:eslint && npm run format:prettier" + "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore", + "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore" }, "devDependencies": { "husky": "^1.0.0", diff --git a/src/generators/testing-ts/templates/_my-el.test.ts b/src/generators/testing-ts/templates/_my-el.test.ts index 6e137cc..dbbc091 100644 --- a/src/generators/testing-ts/templates/_my-el.test.ts +++ b/src/generators/testing-ts/templates/_my-el.test.ts @@ -1,39 +1,31 @@ import { html, fixture, expect } from '@open-wc/testing'; -import {<%= className %>} from '../src/<%= className %>.js'; +import { <%= className %> } from '../src/<%= className %>.js'; import '../<%= tagName %>.js'; describe('<%= className %>', () => { it('has a default title "Hey there" and counter 5', async () => { - const el: <%= className %> = await fixture(html` - <<%= tagName %>>> - `); + const el = await fixture<<%= className %>>(html`<<%= tagName %>>>`); expect(el.title).to.equal('Hey there'); expect(el.counter).to.equal(5); }); it('increases the counter on button click', async () => { - const el: <%= className %> = await fixture(html` - <<%= tagName %>>> - `); + const el = await fixture<<%= className %>>(html`<<%= tagName %>>>`); el.shadowRoot!.querySelector('button')!.click(); expect(el.counter).to.equal(6); }); it('can override the title via attribute', async () => { - const el: <%= className %> = await fixture(html` - <<%= tagName %> title="attribute title">> - `); + const el = await fixture<<%= className %>>(html`<<%= tagName %> title="attribute title">>`); expect(el.title).to.equal('attribute title'); }); it('passes the a11y audit', async () => { - const el: <%= className %> = await fixture(html` - <<%= tagName %>>> - `); + const el = await fixture<<%= className %>>(html`<<%= tagName %>>>`); await expect(el).shadowDom.to.be.accessible(); }); diff --git a/src/generators/testing-wtr-ts/templates/_package.json b/src/generators/testing-wtr-ts/templates/_package.json index 97d64f9..dfdff2e 100644 --- a/src/generators/testing-wtr-ts/templates/_package.json +++ b/src/generators/testing-wtr-ts/templates/_package.json @@ -1,9 +1,9 @@ { "scripts": { - "test": "tsc && web-test-runner --coverage", - "test:watch": "web-test-runner --watch" + "test": "tsc && wtr --coverage", + "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"" }, "devDependencies": { - "@web/test-runner": "^0.7.41" + "@web/test-runner": "^0.11.5" } } \ No newline at end of file diff --git a/src/generators/testing-wtr-ts/templates/static/web-test-runner.config.mjs b/src/generators/testing-wtr-ts/templates/static/web-test-runner.config.mjs index 6f07564..2e57b01 100644 --- a/src/generators/testing-wtr-ts/templates/static/web-test-runner.config.mjs +++ b/src/generators/testing-wtr-ts/templates/static/web-test-runner.config.mjs @@ -1,4 +1,29 @@ -export default { - files: 'dist/**/test/**/*.test.js', - nodeResolve: true -}; \ No newline at end of file +// import { playwrightLauncher } from '@web/test-runner-playwright'; + +export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({ + files: 'dist/test/**/*.test.js', + nodeResolve: true, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto', + + /** Confgure bare import resolve plugin */ + // nodeResolve: { + // exportConditions: ['browser', 'development'] + // }, + + /** Amount of browsers to run concurrently */ + // concurrentBrowsers: 2, + + /** Amount of test files per browser to test concurrently */ + // concurrency: 1, + + /** Browsers to run tests on */ + // browsers: [ + // playwrightLauncher({ product: 'chromium' }), + // playwrightLauncher({ product: 'firefox' }), + // playwrightLauncher({ product: 'webkit' }), + // ], + + // See documentation for all available options +}); diff --git a/src/generators/testing-wtr/templates/_package.json b/src/generators/testing-wtr/templates/_package.json index fbd8ad8..56ad249 100644 --- a/src/generators/testing-wtr/templates/_package.json +++ b/src/generators/testing-wtr/templates/_package.json @@ -4,6 +4,6 @@ "test:watch": "web-test-runner --watch" }, "devDependencies": { - "@web/test-runner": "^0.7.41" + "@web/test-runner": "^0.11.5" } } \ No newline at end of file diff --git a/src/generators/testing-wtr/templates/static/web-test-runner.config.mjs b/src/generators/testing-wtr/templates/static/web-test-runner.config.mjs index bbb5f73..93ec00e 100644 --- a/src/generators/testing-wtr/templates/static/web-test-runner.config.mjs +++ b/src/generators/testing-wtr/templates/static/web-test-runner.config.mjs @@ -1,4 +1,29 @@ -export default { +// import { playwrightLauncher } from '@web/test-runner-playwright'; + +export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({ files: 'test/**/*.test.js', - nodeResolve: true -}; \ No newline at end of file + nodeResolve: true, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto', + + /** Confgure bare import resolve plugin */ + // nodeResolve: { + // exportConditions: ['browser', 'development'] + // }, + + /** Amount of browsers to run concurrently */ + // concurrentBrowsers: 2, + + /** Amount of test files per browser to test concurrently */ + // concurrency: 1, + + /** Browsers to run tests on */ + // browsers: [ + // playwrightLauncher({ product: 'chromium' }), + // playwrightLauncher({ product: 'firefox' }), + // playwrightLauncher({ product: 'webkit' }), + // ], + + // See documentation for all available options +}); diff --git a/src/generators/testing/templates/_my-el.test.js b/src/generators/testing/templates/_my-el.test.js index 7efe9e0..b9a800a 100644 --- a/src/generators/testing/templates/_my-el.test.js +++ b/src/generators/testing/templates/_my-el.test.js @@ -4,35 +4,27 @@ import '../<%= tagName %>.js'; describe('<%= className %>', () => { it('has a default title "Hey there" and counter 5', async () => { - const el = await fixture(html` - <<%= tagName %>>> - `); + const el = await fixture(html`<<%= tagName %>>>`); expect(el.title).to.equal('Hey there'); expect(el.counter).to.equal(5); }); it('increases the counter on button click', async () => { - const el = await fixture(html` - <<%= tagName %>>> - `); + const el = await fixture(html`<<%= tagName %>>>`); el.shadowRoot.querySelector('button').click(); expect(el.counter).to.equal(6); }); it('can override the title via attribute', async () => { - const el = await fixture(html` - <<%= tagName %> title="attribute title">> - `); + const el = await fixture(html`<<%= tagName %> title="attribute title">>`); expect(el.title).to.equal('attribute title'); }); it('passes the a11y audit', async () => { - const el = await fixture(html` - <<%= tagName %>>> - `); + const el = await fixture(html`<<%= tagName %>>>`); await expect(el).shadowDom.to.be.accessible(); }); diff --git a/src/generators/wc-lit-element-ts/templates/_MyEl.ts b/src/generators/wc-lit-element-ts/templates/_MyEl.ts index 90a65d1..01550bd 100644 --- a/src/generators/wc-lit-element-ts/templates/_MyEl.ts +++ b/src/generators/wc-lit-element-ts/templates/_MyEl.ts @@ -1,7 +1,7 @@ import { html, css, LitElement, property } from 'lit-element'; export class <%= className %> extends LitElement { - static styles =css` + static styles = css` :host { display: block; padding: 25px; @@ -9,9 +9,9 @@ export class <%= className %> extends LitElement { } `; - @property({type: String}) title = 'Hey there'; + @property({ type: String }) title = 'Hey there'; - @property({type: Number}) counter = 5; + @property({ type: Number }) counter = 5; __increment() { this.counter += 1; diff --git a/src/generators/wc-lit-element-ts/templates/_package.json b/src/generators/wc-lit-element-ts/templates/_package.json index a5f652e..c81a1a3 100644 --- a/src/generators/wc-lit-element-ts/templates/_package.json +++ b/src/generators/wc-lit-element-ts/templates/_package.json @@ -2,8 +2,8 @@ "main": "dist/index.js", "module": "dist/index.js", "scripts": { - "start": "concurrently --kill-others --names tsc,web-dev-server \"npm run tsc:watch\" \"web-dev-server --app-index demo/index.html --node-resolve --open --watch\"", - "tsc:watch": "tsc --watch", + "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"", + "build": "tsc", "prepublish": "tsc" }, "dependencies": { @@ -11,10 +11,9 @@ "lit-element": "^2.2.1" }, "devDependencies": { - "@types/node": "13.11.1", - "@web/dev-server": "^0.0.12", - "typescript": "~4.0.3", - "concurrently": "^5.1.0", - "tslib": "^1.11.0" + "@web/dev-server": "^0.1.1", + "concurrently": "^5.3.0", + "typescript": "^4.1.3", + "tslib": "^2.0.3" } } diff --git a/src/generators/wc-lit-element-ts/templates/static/web-dev-server.config.mjs b/src/generators/wc-lit-element-ts/templates/static/web-dev-server.config.mjs new file mode 100644 index 0000000..f44a6d2 --- /dev/null +++ b/src/generators/wc-lit-element-ts/templates/static/web-dev-server.config.mjs @@ -0,0 +1,28 @@ +// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr'; + +/** Use Hot Module replacement by adding --hmr to the start command */ +const hmr = process.argv.includes('--hmr'); + +export default /** @type {import('@web/dev-server').DevServerConfig} */ ({ + nodeResolve: true, + open: '/demo/', + watch: !hmr, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto' + + /** Set appIndex to enable SPA routing */ + // appIndex: 'demo/index.html', + + /** Confgure bare import resolve plugin */ + // nodeResolve: { + // exportConditions: ['browser', 'development'] + // }, + + plugins: [ + /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */ + // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }), + ], + + // See documentation for all available options +}); diff --git a/src/generators/wc-lit-element/templates/_package.json b/src/generators/wc-lit-element/templates/_package.json index ec2c3a6..da9381c 100644 --- a/src/generators/wc-lit-element/templates/_package.json +++ b/src/generators/wc-lit-element/templates/_package.json @@ -2,13 +2,13 @@ "main": "index.js", "module": "index.js", "scripts": { - "start": "web-dev-server --app-index demo/index.html --node-resolve --open --watch" + "start": "web-dev-server" }, "dependencies": { "lit-html": "^1.1.2", "lit-element": "^2.2.1" }, "devDependencies": { - "@web/dev-server": "^0.0.12" + "@web/dev-server": "^0.1.1" } } \ No newline at end of file diff --git a/src/generators/wc-lit-element/templates/static/web-dev-server.config.mjs b/src/generators/wc-lit-element/templates/static/web-dev-server.config.mjs new file mode 100644 index 0000000..f44a6d2 --- /dev/null +++ b/src/generators/wc-lit-element/templates/static/web-dev-server.config.mjs @@ -0,0 +1,28 @@ +// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr'; + +/** Use Hot Module replacement by adding --hmr to the start command */ +const hmr = process.argv.includes('--hmr'); + +export default /** @type {import('@web/dev-server').DevServerConfig} */ ({ + nodeResolve: true, + open: '/demo/', + watch: !hmr, + + /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */ + // esbuildTarget: 'auto' + + /** Set appIndex to enable SPA routing */ + // appIndex: 'demo/index.html', + + /** Confgure bare import resolve plugin */ + // nodeResolve: { + // exportConditions: ['browser', 'development'] + // }, + + plugins: [ + /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */ + // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }), + ], + + // See documentation for all available options +}); diff --git a/test/snapshots/fully-loaded-app/.gitignore b/test/snapshots/fully-loaded-app/.gitignore index cd190ee..ee91b02 100644 --- a/test/snapshots/fully-loaded-app/.gitignore +++ b/test/snapshots/fully-loaded-app/.gitignore @@ -18,4 +18,6 @@ # build /_site/ /dist/ -/out-tsc/ \ No newline at end of file +/out-tsc/ + +storybook-static \ No newline at end of file diff --git a/test/snapshots/fully-loaded-app/.storybook/main.js b/test/snapshots/fully-loaded-app/.storybook/main.js index 1a4258d..94f9cf8 100644 --- a/test/snapshots/fully-loaded-app/.storybook/main.js +++ b/test/snapshots/fully-loaded-app/.storybook/main.js @@ -1,14 +1,3 @@ module.exports = { stories: ['../**/stories/*.stories.{js,md,mdx}'], - addons: [ - 'storybook-prebuilt/addon-knobs/register.js', - 'storybook-prebuilt/addon-docs/register.js', - 'storybook-prebuilt/addon-viewport/register.js', - ], - esDevServer: { - // custom es-dev-server options - nodeResolve: true, - watch: true, - open: true - }, }; diff --git a/test/snapshots/fully-loaded-app/.storybook/preview.js b/test/snapshots/fully-loaded-app/.storybook/preview.js deleted file mode 100644 index 2cc90bb..0000000 --- a/test/snapshots/fully-loaded-app/.storybook/preview.js +++ /dev/null @@ -1,17 +0,0 @@ -import { addParameters, setCustomElements } from '@open-wc/demoing-storybook'; - -addParameters({ - docs: { - iframeHeight: '200px', - } -}); - -async function run() { - const customElements = await ( - await fetch(new URL('../custom-elements.json', import.meta.url)) - ).json(); - - setCustomElements(customElements); -} - -run(); diff --git a/test/snapshots/fully-loaded-app/.storybook/server.mjs b/test/snapshots/fully-loaded-app/.storybook/server.mjs new file mode 100644 index 0000000..c24942b --- /dev/null +++ b/test/snapshots/fully-loaded-app/.storybook/server.mjs @@ -0,0 +1,8 @@ +import { storybookPlugin } from '@web/dev-server-storybook'; +import baseConfig from '../web-dev-server.config.mjs'; + +export default /** @type {import('@web/dev-server').DevServerConfig} */ ({ + ...baseConfig, + open: '/', + plugins: [...baseConfig.plugins, storybookPlugin({ type: 'web-components' })], +}); diff --git a/test/snapshots/fully-loaded-app/package.json b/test/snapshots/fully-loaded-app/package.json index 05fc718..4183945 100644 --- a/test/snapshots/fully-loaded-app/package.json +++ b/test/snapshots/fully-loaded-app/package.json @@ -1,34 +1,39 @@ { - "scripts": { - "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore", - "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore", - "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore", - "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore", - "lint": "npm run lint:eslint && npm run lint:prettier", - "format": "npm run format:eslint && npm run format:prettier", - "test": "web-test-runner --coverage", - "test:watch": "web-test-runner --watch", - "storybook": "start-storybook", - "storybook:build": "build-storybook", - "build": "rimraf dist && rollup -c rollup.config.js", - "start:build": "npm run build && web-dev-server --root-dir dist --app-index index.html --open --compatibility none", - "start": "web-dev-server --app-index index.html --node-resolve --open --watch" - }, "devDependencies": { "eslint": "^6.1.0", - "@open-wc/eslint-config": "^4.0.0", + "@open-wc/eslint-config": "^4.2.0", "prettier": "^2.0.4", "eslint-config-prettier": "^6.11.0", "husky": "^1.0.0", "lint-staged": "^10.0.0", - "@web/test-runner": "^0.7.41", + "@web/test-runner": "^0.11.5", "@open-wc/testing": "^2.0.0", - "@open-wc/demoing-storybook": "^2.0.0", + "@web/dev-server-storybook": "^0.3.2", "@open-wc/building-rollup": "^1.0.0", "deepmerge": "^4.2.2", "rimraf": "^2.6.3", "rollup": "^2.3.4", - "@web/dev-server": "^0.0.12" + "@web/dev-server": "^0.1.1" + }, + "scripts": { + "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore", + "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore", + "test": "web-test-runner --coverage", + "test:watch": "web-test-runner --watch", + "storybook": "web-dev-server -c .storybook/server.mjs", + "storybook:build": "build-storybook", + "build": "rimraf dist && rollup -c rollup.config.js", + "start:build": "npm run build && web-dev-server --root-dir dist --app-index index.html --open --compatibility none", + "start": "web-dev-server" + }, + "name": "scaffold-app", + "version": "0.0.0", + "description": "Webcomponent scaffold-app following open-wc recommendations", + "author": "scaffold-app", + "license": "MIT", + "dependencies": { + "lit-html": "^1.0.0", + "lit-element": "^2.0.1" }, "eslintConfig": { "extends": [ @@ -51,14 +56,5 @@ "prettier --write", "git add" ] - }, - "name": "scaffold-app", - "version": "0.0.0", - "description": "Webcomponent scaffold-app following open-wc recommendations", - "author": "scaffold-app", - "license": "MIT", - "dependencies": { - "lit-html": "^1.0.0", - "lit-element": "^2.0.1" } } \ No newline at end of file diff --git a/test/snapshots/fully-loaded-app/rollup.config.js b/test/snapshots/fully-loaded-app/rollup.config.js index babc0bf..f71b49b 100644 --- a/test/snapshots/fully-loaded-app/rollup.config.js +++ b/test/snapshots/fully-loaded-app/rollup.config.js @@ -28,4 +28,4 @@ export default merge(baseConfig, { // alternatively, you can use your JS as entrypoint for rollup and // optionally set a HTML template manually // input: './app.js', -}); \ No newline at end of file +}); diff --git a/test/snapshots/fully-loaded-app/src/ScaffoldApp.js b/test/snapshots/fully-loaded-app/src/ScaffoldApp.js index 08e2b58..a05882d 100644 --- a/test/snapshots/fully-loaded-app/src/ScaffoldApp.js +++ b/test/snapshots/fully-loaded-app/src/ScaffoldApp.js @@ -5,7 +5,6 @@ export class ScaffoldApp extends LitElement { static get properties() { return { title: { type: String }, - page: { type: String }, }; } @@ -22,6 +21,7 @@ export class ScaffoldApp extends LitElement { max-width: 960px; margin: 0 auto; text-align: center; + background-color: var(--scaffold-app-background-color); } main { @@ -53,11 +53,16 @@ export class ScaffoldApp extends LitElement { `; } + constructor() { + super(); + this.title = 'My app'; + } + render() { return html`
-

My app

+

${this.title}

Edit src/ScaffoldApp.js and save to reload.