jlengrand/create-1
1
0
Fork 0
mirror of https://github.com/jlengrand/create-1.git synced 2026-03-10 08:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: use WDS storybook and other improvements

Browse Source
This commit is contained in:
Lars den Bakker
2020-12-27 21:15:10 +01:00
parent 0c704c2b8e
commit f1cff22a90
71 changed files with 612 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
owc-app/.editorconfig
View File

@@ -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 = */

20
owc-app/.gitignore vendored
View File

@@ -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/

21
owc-app/LICENSE
View File

@@ -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.

30
owc-app/README.md
View File

@@ -1,30 +0,0 @@
<p align="center">
<img width="200" src="https://open-wc.org/hero.png"></img>
</p>
## 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.

26
owc-app/custom-elements.json
View File

@@ -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": []
}
]
}

28
owc-app/index.html
View File

@@ -1,28 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="Description" content="Put your description here.">
<base href="/">
<style>
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #ededed;
}
</style>
<title>owc-app</title>
</head>
<body>
<owc-app></owc-app>
<script type="module" src="./src/owc-app.js"></script>
</body>
</html>

49
owc-app/package.json
View File

@@ -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"
}
}

84
owc-app/src/OwcApp.js
View File

@@ -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`
<main>
<div class="logo">${openWcLogo}</div>
<h1>My app</h1>
<p>Edit <code>src/OwcApp.js</code> and save to reload.</p>
<a
class="app-link"
href="https://open-wc.org/developing/#code-examples"
target="_blank"
rel="noopener noreferrer"
>
Code examples
</a>
</main>
<p class="app-footer">
🚽 Made with love by
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/open-wc"
>open-wc</a
>.
</p>
`;
}
}

33
owc-app/src/open-wc-logo.js
View File

@@ -1,33 +0,0 @@
import { html } from 'lit-html';
export const openWcLogo = html`
<svg
width="244px"
height="244px"
viewBox="0 0 244 244"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#9B00FF" offset="0%"></stop>
<stop stop-color="#0077FF" offset="100%"></stop>
</linearGradient>
</defs>
<g
id="Page-1"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
>
<path
d="M205.639259,176.936244 C207.430887,174.217233 209.093339,171.405629 210.617884,168.510161 M215.112174,158.724316 C216.385153,155.50304 217.495621,152.199852 218.433474,148.824851 M220.655293,138.874185 C221.231935,135.482212 221.637704,132.03207 221.863435,128.532919 M222,118.131039 C221.860539,114.466419 221.523806,110.85231 221.000113,107.299021 M218.885321,96.8583653 C218.001583,93.4468963 216.942225,90.1061026 215.717466,86.8461994 M211.549484,77.3039459 C209.957339,74.1238901 208.200597,71.0404957 206.290425,68.0649233 M200.180513,59.5598295 C181.848457,36.6639805 153.655709,22 122.036748,22 C66.7879774,22 22,66.771525 22,122 C22,177.228475 66.7879774,222 122.036748,222 C152.914668,222 180.52509,208.015313 198.875424,186.036326"
id="Shape"
stroke="url(#linearGradient-1)"
stroke-width="42.0804674"
></path>
</g>
</svg>
`;

3
owc-app/src/owc-app.js
View File

@@ -1,3 +0,0 @@
import { OwcApp } from './OwcApp.js';
customElements.define('owc-app', OwcApp);

58
src/core.js
View File

@@ -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));
}

8
src/generators/app-lit-element-ts/templates/_MyApp.ts
View File

@@ -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`
<main>
<div class="logo">${openWcLogo}</div>
<h1>My app</h1>
<h1>${this.title}</h1>
<p>Edit <code>src/<%= className %>.js</code> and save to reload.</p>
<a

31
src/generators/app-lit-element-ts/templates/_my-app.stories.ts
View File

@@ -1,11 +1,30 @@
import { html } from 'lit-html';
import { html, TemplateResult } from 'lit-html';
import '../src/<%= tagName %>.js';
export default {
title: '<%= tagName %>',
title: '<%= className %>',
component: '<%= tagName %>',
argTypes: {
backgroundColor: { control: 'color' },
},
};
export const App = () =>
html`
<<%= tagName %>></<%= tagName %>>
`;
interface Story<T> {
(args: T): TemplateResult;
args?: Partial<T>;
argTypes?: Record<string, unknown>;
}
interface ArgTypes {
title?: string;
backgroundColor?: string;
}
const Template: Story<ArgTypes> = ({ title, backgroundColor = 'white' }: ArgTypes) => html`
<<%= tagName %> style="--<%= tagName %>-background-color: ${backgroundColor}" .title=${title}></<%= tagName %>>
`;
export const App = Template.bind({});
App.args = {
title: 'My app',
};

6
src/generators/app-lit-element-ts/templates/_my-app.test.ts
View File

@@ -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 %>></<%= tagName %>>
`);
element = await fixture(html`<<%= tagName %>></<%= tagName %>>`);
});
it('renders a h1', () => {

12
src/generators/app-lit-element-ts/templates/_package.json
View File

@@ -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"
}
}

13
src/generators/app-lit-element-ts/templates/static-demoing/.storybook/main.js
View File

@@ -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}'],
};

17
src/generators/app-lit-element-ts/templates/static-demoing/.storybook/preview.js
View File

@@ -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();

8
src/generators/app-lit-element-ts/templates/static-demoing/.storybook/server.mjs Normal file
View File

@@ -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' })],
});

31
src/generators/app-lit-element-ts/templates/static-testing/web-test-runner.config.mjs
View File

@@ -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
};
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
});

28
src/generators/app-lit-element-ts/templates/static/web-dev-server.config.mjs Normal file
View File

@@ -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
});

9
src/generators/app-lit-element/templates/_MyApp.js
View File

@@ -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`
<main>
<div class="logo">${openWcLogo}</div>
<h1>My app</h1>
<h1>${this.title}</h1>
<p>Edit <code>src/<%= className %>.js</code> and save to reload.</p>
<a

22
src/generators/app-lit-element/templates/_my-app.stories.js
View File

@@ -2,10 +2,24 @@ import { html } from 'lit-html';
import '../src/<%= tagName %>.js';
export default {
title: '<%= tagName %>',
title: '<%= className %>',
component: '<%= tagName %>',
argTypes: {
backgroundColor: { control: 'color' },
},
};
export const App = () =>
html`
<<%= tagName %>></<%= tagName %>>
function Template({ title, backgroundColor }) {
return html`
<<%= tagName %>
style="--<%= tagName %>-background-color: ${backgroundColor || 'white'}"
.title=${title}
>
</<%= tagName %>>
`;
}
export const App = Template.bind({});
App.args = {
title: 'My app',
};

4
src/generators/app-lit-element/templates/_my-app.test.js
View File

@@ -5,9 +5,7 @@ import '../src/<%= tagName %>.js';
describe('<%= className %>', () => {
let element;
beforeEach(async () => {
element = await fixture(html`
<<%= tagName %>></<%= tagName %>>
`);
element = await fixture(html`<<%= tagName %>></<%= tagName %>>`);
});
it('renders a h1', () => {

4
src/generators/app-lit-element/templates/_package.json
View File

@@ -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"
}
}

11
src/generators/app-lit-element/templates/static-demoing/.storybook/main.js
View File

@@ -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
},
};

17
src/generators/app-lit-element/templates/static-demoing/.storybook/preview.js
View File

@@ -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();

8
src/generators/app-lit-element/templates/static-demoing/.storybook/server.mjs Normal file
View File

@@ -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' })],
});

31
src/generators/app-lit-element/templates/static-testing/web-test-runner.config.mjs
View File

@@ -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
};
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
});

28
src/generators/app-lit-element/templates/static/web-dev-server.config.mjs Normal file
View File

@@ -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
});

2
src/generators/building-rollup-ts/templates/static/rollup.config.js
View File

@@ -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',
});
});

2
src/generators/building-rollup/templates/static/rollup.config.js
View File

@@ -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',
});
});

4
src/generators/common-repo/templates/_gitignore
View File

@@ -18,4 +18,6 @@
# build
/_site/
/dist/
/out-tsc/
/out-tsc/
storybook-static

6
src/generators/demoing-storybook-ts/templates/_package.json
View File

@@ -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"
}
}

48
src/generators/demoing-storybook-ts/templates/static-scaffold/stories/index.stories.md
View File

@@ -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 %>></<%= tagName %>>
`;
```
## Variations
###### Custom Title
```js preview-story
export const CustomTitle = () => html`
<<%= tagName %> title="Hello World"></<%= tagName %>>
`;
```

60
src/generators/demoing-storybook-ts/templates/static-scaffold/stories/index.stories.ts Normal file
View File

@@ -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<T> {
(args: T): TemplateResult;
args?: Partial<T>;
argTypes?: Record<string, unknown>;
}
interface ArgTypes {
title?: string;
counter?: number;
textColor?: string;
slot?: TemplateResult;
}
const Template: Story<ArgTypes> = ({
title = 'Hello world',
counter = 5,
textColor,
slot,
}: ArgTypes) => html`
<<%= tagName %>
style="--<%= tagName %>-text-color: ${textColor || 'black'}"
.title=${title}
.counter=${counter}
>
${slot}
</<%= tagName %>>
`;
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`<p>Slotted content</p>`,
};
SlottedContent.argTypes = {
slot: { table: { disable: true } },
};

13
src/generators/demoing-storybook-ts/templates/static/.storybook/main.js
View File

@@ -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}'],
};

17
src/generators/demoing-storybook-ts/templates/static/.storybook/preview.js
View File

@@ -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();

8
src/generators/demoing-storybook-ts/templates/static/.storybook/server.mjs Normal file
View File

@@ -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' })],
});

4
src/generators/demoing-storybook/templates/_package.json
View File

@@ -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"
}
}

44
src/generators/demoing-storybook/templates/static-scaffold/stories/index.stories.js Normal file
View File

@@ -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}
</<%= tagName %>>
`;
}
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`<p>Slotted content</p>`,
};
SlottedContent.argTypes = {
slot: { table: { disable: true } },
};

48
src/generators/demoing-storybook/templates/static-scaffold/stories/index.stories.md
View File

@@ -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 %>></<%= tagName %>>
`;
```
## Variations
###### Custom Title
```js preview-story
export const CustomTitle = () => html`
<<%= tagName %> title="Hello World"></<%= tagName %>>
`;
```

11
src/generators/demoing-storybook/templates/static/.storybook/main.js
View File

@@ -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
},
};

17
src/generators/demoing-storybook/templates/static/.storybook/preview.js
View File

@@ -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();

8
src/generators/demoing-storybook/templates/static/.storybook/server.mjs Normal file
View File

@@ -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' })],
});

20
src/generators/linting-eslint-ts/templates/_.eslintrc.js
View File

@@ -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 }],
},
};

22
src/generators/linting-eslint-ts/templates/_package.json
View File

@@ -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 }]
}
}
}

6
src/generators/linting-eslint/templates/_package.json
View File

@@ -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": [

4
src/generators/linting-prettier-ts/templates/_package.json
View File

@@ -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"

4
src/generators/linting-prettier/templates/_package.json
View File

@@ -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"

4
src/generators/linting-ts/templates/_package.json
View File

@@ -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",

4
src/generators/linting/templates/_package.json
View File

@@ -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",

18
src/generators/testing-ts/templates/_my-el.test.ts
View File

@@ -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 %>></<%= tagName %>>
`);
const el = await fixture<<%= className %>>(html`<<%= tagName %>></<%= 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 %>></<%= tagName %>>
`);
const el = await fixture<<%= className %>>(html`<<%= tagName %>></<%= 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"></<%= tagName %>>
`);
const el = await fixture<<%= className %>>(html`<<%= tagName %> title="attribute title"></<%= tagName %>>`);
expect(el.title).to.equal('attribute title');
});
it('passes the a11y audit', async () => {
const el: <%= className %> = await fixture(html`
<<%= tagName %>></<%= tagName %>>
`);
const el = await fixture<<%= className %>>(html`<<%= tagName %>></<%= tagName %>>`);
await expect(el).shadowDom.to.be.accessible();
});

6
src/generators/testing-wtr-ts/templates/_package.json
View File

@@ -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"
}
}

33
src/generators/testing-wtr-ts/templates/static/web-test-runner.config.mjs
View File

@@ -1,4 +1,29 @@
export default {
files: 'dist/**/test/**/*.test.js',
nodeResolve: true
};
// 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
});

2
src/generators/testing-wtr/templates/_package.json
View File

@@ -4,6 +4,6 @@
"test:watch": "web-test-runner --watch"
},
"devDependencies": {
"@web/test-runner": "^0.7.41"
"@web/test-runner": "^0.11.5"
}
}

31
src/generators/testing-wtr/templates/static/web-test-runner.config.mjs
View File

@@ -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
};
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
});

16
src/generators/testing/templates/_my-el.test.js
View File

@@ -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 %>></<%= tagName %>>
`);
const el = await fixture(html`<<%= tagName %>></<%= 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 %>></<%= tagName %>>
`);
const el = await fixture(html`<<%= tagName %>></<%= 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"></<%= tagName %>>
`);
const el = await fixture(html`<<%= tagName %> title="attribute title"></<%= tagName %>>`);
expect(el.title).to.equal('attribute title');
});
it('passes the a11y audit', async () => {
const el = await fixture(html`
<<%= tagName %>></<%= tagName %>>
`);
const el = await fixture(html`<<%= tagName %>></<%= tagName %>>`);
await expect(el).shadowDom.to.be.accessible();
});

6
src/generators/wc-lit-element-ts/templates/_MyEl.ts
View File

@@ -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;

13
src/generators/wc-lit-element-ts/templates/_package.json
View File

@@ -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"
}
}

28
src/generators/wc-lit-element-ts/templates/static/web-dev-server.config.mjs Normal file
View File

@@ -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
});

4
src/generators/wc-lit-element/templates/_package.json
View File

@@ -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"
}
}

28
src/generators/wc-lit-element/templates/static/web-dev-server.config.mjs Normal file
View File

@@ -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
});

4
test/snapshots/fully-loaded-app/.gitignore vendored
View File

@@ -18,4 +18,6 @@
# build
/_site/
/dist/
/out-tsc/
/out-tsc/
storybook-static

11
test/snapshots/fully-loaded-app/.storybook/main.js
View File

@@ -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
},
};

17
test/snapshots/fully-loaded-app/.storybook/preview.js
View File

@@ -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();

8
test/snapshots/fully-loaded-app/.storybook/server.mjs Normal file
View File

@@ -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' })],
});

52
test/snapshots/fully-loaded-app/package.json
View File

@@ -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"
}
}

2
test/snapshots/fully-loaded-app/rollup.config.js
View File

@@ -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',
});
});

9
test/snapshots/fully-loaded-app/src/ScaffoldApp.js
View File

@@ -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`
<main>
<div class="logo">${openWcLogo}</div>
<h1>My app</h1>
<h1>${this.title}</h1>
<p>Edit <code>src/ScaffoldApp.js</code> and save to reload.</p>
<a

26
test/snapshots/fully-loaded-app/web-dev-server.config.mjs Normal file
View File

@@ -0,0 +1,26 @@
// 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] }),
],
});

11
test/snapshots/fully-loaded-app/web-test-runner.config.mjs
View File

@@ -1,4 +1,9 @@
export default {
import baseConfig from './web-dev-server.config.mjs';
export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
files: 'test/**/*.test.js',
nodeResolve: true
};
/** Reuse options from Web Dev Server config */
nodeResolve: baseConfig.nodeResolve,
plugins: [...baseConfig.plugins],
});