├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .prettierignore
├── README.md
├── commitlint.config.js
├── husky.config.js
├── karma.conf.js
├── karma.es5.bs.config.js
├── karma.es5.config.js
├── open-wc-starter-app.png
├── package.json
├── prettier.config.js
├── rollup.config.js
├── src
    ├── index.html
    ├── my-app.js
    └── open-wc-logo.js
└── test
    ├── index.html
    └── my-app.test.js


/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | _site/
3 | dist/
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['@open-wc/eslint-config', 'eslint-config-prettier', 'plugin:lit/recommended']
3 | };
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | ## editors
 2 | /.idea
 3 | /.vscode
 4 | 
 5 | ## system files
 6 | .DS_Store
 7 | 
 8 | # code coverage folders
 9 | coverage/
10 | 
11 | ## npm
12 | node_modules
13 | npm-debug.log
14 | 
15 | ## temp folders
16 | /.tmp/
17 | 
18 | ## build output
19 | dist
20 | build-stats.json
21 | 
22 | ## we don't want lock files for now
23 | yarn.lock
24 | package-lock.json


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | ## editors
 2 | /.idea
 3 | /.vscode
 4 | 
 5 | ## system files
 6 | .DS_Store
 7 | 
 8 | # code coverage folders
 9 | coverage/
10 | 
11 | ## npm
12 | node_modules
13 | npm-debug.log
14 | 
15 | ## temp folders
16 | /.tmp/
17 | 
18 | ## build output
19 | dist
20 | build-stats.json
21 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | coverage/
2 | _site/
3 | dist/
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img width="200" src="https://open-wc.org/hero.png"></img>
 3 | </p>
 4 | 
 5 | # Open-wc Starter App
 6 | 
 7 | [![Built with open-wc recommendations](https://img.shields.io/badge/built%20with-open--wc-blue.svg)](https://github.com/open-wc)
 8 | 
 9 | ## Quickstart
10 | 
11 | To get started:
12 | 
13 | ```sh
14 | npm init @open-wc
15 | # requires node 10.12 & npm 6 or higher
16 | ```
17 | 
18 | <p align="center">
19 |   <a href="https://open-wc-starter-app.netlify.com/">
20 |     <img src="./open-wc-starter-app.png"></img>
21 |   </a>
22 | </p>
23 | 
24 | [Live demo](https://open-wc-starter-app.netlify.com/)
25 | 
26 | 
27 | ## Scripts
28 | - `build` builds your app and outputs it in your dist directory
29 | - `start:build` runs your built app from dist directory
30 | - `watch:build` builds and runs your app, rebuilding when input files change
31 | - `test` runs your test suite with Karma
32 | - `lint` runs the linter for your project
33 | 


--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['@commitlint/config-conventional'],
3 | };
4 | 


--------------------------------------------------------------------------------
/husky.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   hooks: {
3 |     'pre-commit': 'lint-staged',
4 |     'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable import/no-extraneous-dependencies */
 2 | const defaultSettings = require('@open-wc/testing-karma/default-settings.js');
 3 | const merge = require('webpack-merge');
 4 | 
 5 | module.exports = config => {
 6 |   config.set(
 7 |     merge(defaultSettings(config), {
 8 |       files: [
 9 |         // allows running single tests with the --grep flag
10 |         config.grep ? config.grep : 'test/**/*.test.js',
11 |       ],
12 | 
13 |       // your custom config
14 |     }),
15 |   );
16 |   return config;
17 | };
18 | 


--------------------------------------------------------------------------------
/karma.es5.bs.config.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable import/no-extraneous-dependencies */
 2 | const merge = require('webpack-merge');
 3 | const bsSettings = require('@open-wc/testing-karma-bs/bs-settings.js');
 4 | const karmaEs5Config = require('./karma.es5.config.js');
 5 | 
 6 | module.exports = config => {
 7 |   config.set(
 8 |     merge(bsSettings(config), karmaEs5Config(config), {
 9 |       browserStack: {
10 |         project: 'your-name',
11 |       },
12 |     }),
13 |   );
14 | 
15 |   return config;
16 | };
17 | 


--------------------------------------------------------------------------------
/karma.es5.config.js:
--------------------------------------------------------------------------------
1 | const merge = require('webpack-merge');
2 | const es5Settings = require('@open-wc/testing-karma/es5-settings.js');
3 | const karmaConf = require('./karma.conf.js');
4 | 
5 | module.exports = config => {
6 |   config.set(merge(es5Settings(config), karmaConf(config)));
7 |   return config;
8 | };
9 | 


--------------------------------------------------------------------------------
/open-wc-starter-app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/open-wc/open-wc-starter-app/18e009ef4bc4c9cef9d12790e42c278c06ca0070/open-wc-starter-app.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "lint:eslint": "eslint --ext .js,.html .",
 4 |     "format:eslint": "eslint --ext .js,.html . --fix",
 5 |     "lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
 6 |     "format:prettier": "prettier \"**/*.js\" --write",
 7 |     "lint": "npm run lint:eslint && npm run lint:prettier",
 8 |     "format": "npm run format:eslint && npm run format:prettier",
 9 |     "test": "karma start",
10 |     "test:watch": "karma start --auto-watch=true --single-run=false",
11 |     "test:es5": "karma start karma.es5.config.js",
12 |     "test:es5:watch": "karma start karma.es5.config.js --auto-watch=true --single-run=false",
13 |     "test:es5:bs": "karma start karma.es5.bs.config.js",
14 |     "build": "rimraf dist && rollup -c rollup.config.js",
15 |     "start:build": "http-server dist -o",
16 |     "watch:build": "rimraf dist && rollup --watch -c rollup.config.js & http-server dist -o",
17 |     "start": "owc-dev-server --open ./src"
18 |   },
19 |   "devDependencies": {
20 |     "@open-wc/eslint-config": "^0.3.0",
21 |     "@open-wc/prettier-config": "^0.1.0",
22 |     "@commitlint/cli": "^7.0.0",
23 |     "@commitlint/config-conventional": "^7.0.0",
24 |     "husky": "^1.0.0",
25 |     "lint-staged": "^8.0.0",
26 |     "@open-wc/testing-karma": "^0.4.0",
27 |     "webpack-merge": "^4.1.5",
28 |     "@open-wc/testing-karma-bs": "^0.2.0",
29 |     "@open-wc/testing": "^0.9.0",
30 |     "@open-wc/building-rollup": "^0.1.1",
31 |     "http-server": "^0.11.1",
32 |     "rimraf": "^2.6.3",
33 |     "rollup": "^1.6.0",
34 |     "@open-wc/polyfills-loader": "^0.2.1",
35 |     "owc-dev-server": "^0.1.2",
36 |     "eslint-plugin-lit": "^0.5.0"
37 |   },
38 |   "lint-staged": {
39 |     "*.js": [
40 |       "eslint --fix",
41 |       "prettier --write",
42 |       "git add"
43 |     ]
44 |   },
45 |   "name": "my-app",
46 |   "license": "MIT",
47 |   "dependencies": {
48 |     "lit-html": "^1.0.0",
49 |     "lit-element": "^2.0.1"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require('@open-wc/prettier-config');
2 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import createDefaultConfig from '@open-wc/building-rollup/modern-config';
2 | 
3 | export default createDefaultConfig({ input: './src/index.html' });


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 6 |   <meta name="Description" content="Put your description here.">
 7 | 
 8 |   <style>
 9 |     * {
10 |       margin: 0;
11 |       padding: 0;
12 |       font-family: sans-serif;
13 |     }
14 | 
15 |     body {
16 |       background-color: #ededed;
17 |     }
18 |   </style>
19 |   <title>my-app</title>
20 | </head>
21 | <body>
22 |   <my-app></my-app>
23 | 
24 |   <script type="module" src="./my-app.js"></script>
25 | </body>
26 | 
27 | </html>
28 | 


--------------------------------------------------------------------------------
/src/my-app.js:
--------------------------------------------------------------------------------
 1 | import { LitElement, html, css } from 'lit-element';
 2 | import { openWc } from './open-wc-logo';
 3 | 
 4 | class MyApp extends LitElement {
 5 |   static get properties() {
 6 |     return {
 7 |       title: { type: String },
 8 |     };
 9 |   }
10 | 
11 |   constructor() {
12 |     super();
13 |     this.title = 'open-wc';
14 |   }
15 | 
16 |   static get styles() {
17 |     return [
18 |       css`
19 |         :host {
20 |           text-align: center;
21 |           min-height: 100vh;
22 |           display: flex;
23 |           flex-direction: column;
24 |           align-items: center;
25 |           justify-content: center;
26 |           font-size: calc(10px + 2vmin);
27 |           color: #1a2b42;
28 |         }
29 | 
30 |         header {
31 |           margin: auto;
32 |         }
33 | 
34 |         svg {
35 |           animation: app-logo-spin infinite 20s linear;
36 |         }
37 | 
38 |         a {
39 |           color: #217ff9;
40 |         }
41 | 
42 |         .app-footer {
43 |           color: #a8a8a8;
44 |           font-size: calc(10px + 0.5vmin);
45 |         }
46 | 
47 |         @keyframes app-logo-spin {
48 |           from {
49 |             transform: rotate(0deg);
50 |           }
51 |           to {
52 |             transform: rotate(360deg);
53 |           }
54 |         }
55 |       `,
56 |     ];
57 |   }
58 | 
59 |   render() {
60 |     return html`
61 |       <header class="app-header">
62 |         ${openWc}
63 |         <h1>${this.title}</h1>
64 |         <p>Edit <code>src/my-app.js</code> and save to reload.</p>
65 |         <a
66 |           class="app-link"
67 |           href="https://open-wc.org/developing/#examples"
68 |           target="_blank"
69 |           rel="noopener noreferrer"
70 |         >
71 |           Code examples
72 |         </a>
73 |       </header>
74 |       <p class="app-footer">
75 |         🚽 Made with love by
76 |         <a target="_blank" rel="noopener noreferrer" href="https://github.com/open-wc">open-wc</a>.
77 |       </p>
78 |     `;
79 |   }
80 | }
81 | 
82 | customElements.define('my-app', MyApp);
83 | 


--------------------------------------------------------------------------------
/src/open-wc-logo.js:
--------------------------------------------------------------------------------
 1 | import { html } from 'lit-html';
 2 | 
 3 | export const openWc = html`
 4 |   <svg
 5 |     width="244px"
 6 |     height="244px"
 7 |     viewBox="0 0 244 244"
 8 |     version="1.1"
 9 |     xmlns="http://www.w3.org/2000/svg"
10 |     xmlns:xlink="http://www.w3.org/1999/xlink"
11 |   >
12 |     <defs>
13 |       <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
14 |         <stop stop-color="#9B00FF" offset="0%"></stop>
15 |         <stop stop-color="#0077FF" offset="100%"></stop>
16 |       </linearGradient>
17 |     </defs>
18 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
19 |       <path
20 |         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"
21 |         id="Shape"
22 |         stroke="url(#linearGradient-1)"
23 |         stroke-width="42.0804674"
24 |       ></path>
25 |     </g>
26 |   </svg>
27 | `;
28 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <link href="../node_modules/mocha/mocha.css" rel="stylesheet" />
 6 |   <script src="../node_modules/mocha/mocha.js"></script>
 7 |   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
 8 | </head>
 9 | <body>
10 |   <div id="mocha"></div>
11 |   <script>
12 |     mocha.setup('bdd');
13 |   </script>
14 | 
15 |   <script type="module">
16 |     import './my-app.test.js';
17 | 
18 |     mocha.checkLeaks();
19 |     mocha.run();
20 |   </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/test/my-app.test.js:
--------------------------------------------------------------------------------
 1 | import { html, fixture, expect } from '@open-wc/testing';
 2 | 
 3 | import '../src/my-app';
 4 | 
 5 | describe('<my-app>', () => {
 6 |   it('has a default property header', async () => {
 7 |     const el = await fixture('<my-app></my-app>');
 8 |     expect(el.title).to.equal('open-wc');
 9 |   });
10 | 
11 |   it('allows property header to be overwritten', async () => {
12 |     const el = await fixture(html`
13 |       <my-app title="different"></my-app>
14 |     `);
15 |     expect(el.title).to.equal('different');
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------