├── .gitignore
├── src
    ├── assets
    │   ├── favicon.ico
    │   ├── logo.svg
    │   └── github.svg
    ├── hello-world.js
    ├── index.html
    ├── lit-app.js
    └── lit-app-styles.js
├── test
    ├── index.js
    └── hello-world.spec.js
├── README.md
├── .travis.yml
├── server.js
├── .eslintrc.json
├── .babelrc
├── karma.conf.js
├── package.json
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/


--------------------------------------------------------------------------------
/src/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thepassle/create-lit-app/HEAD/src/assets/favicon.ico


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
1 | const testsContext = require.context('.', true, /\.spec\.js$/);
2 | testsContext.keys().forEach(testsContext);


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | <p align="center">
2 |   <img width="200" src="https://open-wc.org/hero.png"/>
3 | </p>
4 | 
5 | <p align="center">
6 |   This project has been deprecated in favor of the <a href="https://github.com/open-wc/open-wc-starter-app">open-wc starter app</a>.
7 | </p>
8 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | matrix:
 3 |   include:
 4 |   - node_js: '9'
 5 |     os: osx
 6 |     script: npm run test
 7 |     addons:
 8 |       chrome: stable
 9 |       firefox: latest
10 |     before_script:
11 |     - export DISPLAY=:99.0
12 |     script:
13 |     - npm run test


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const app = express();
 3 | 
 4 | app.use(express.static('dist'));
 5 | 
 6 | app.get('*', function(req, res) {
 7 |   res.sendFile(__dirname + '/dist/index.html');
 8 | });
 9 | 
10 | app.listen(process.env.PORT || 8000, function () {
11 |     console.log('Express server is running on port 8000');
12 | });
13 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "env": {
 3 |         "browser": true,
 4 |         "commonjs": true,
 5 |         "es6": true
 6 |     },
 7 |     "extends": "eslint:recommended",
 8 |     "parserOptions": {
 9 |         "sourceType": "module"
10 |     },
11 |     "rules": {
12 |         "linebreak-style": [
13 |             "error",
14 |             "unix"
15 |         ],
16 |         "quotes": [
17 |             "error",
18 |             "single"
19 |         ],
20 |         "semi": [
21 |             "error",
22 |             "always"
23 |         ]
24 |     }
25 | }


--------------------------------------------------------------------------------
/src/hello-world.js:
--------------------------------------------------------------------------------
 1 | import { LitElement, html } from '@polymer/lit-element/';
 2 | 
 3 | class HelloWorld extends LitElement {
 4 | 	static get properties() {
 5 | 		return {
 6 | 			greeting: { type: String }
 7 | 		};
 8 | 	}
 9 | 
10 | 	constructor() {
11 | 		super();
12 | 		this.greeting = 'hello!';
13 | 	}
14 | 
15 | 	render() {
16 | 		const { greeting } = this;
17 | 		return html`
18 | 			<h1>${greeting}</h1>
19 | 			<p class="app-intro">
20 | 				To get started, edit <code>src/lit-app.js</code> and save to reload.
21 | 			</p>
22 | 		`;
23 | 	}
24 | }
25 | 
26 | customElements.define('hello-world', HelloWorld);
27 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["@babel/env", {
 4 |       "targets": {
 5 |       "browsers": ["last 2 versions", "safari >= 7"]
 6 |       }
 7 |     }]
 8 |   ],
 9 |   plugins: [
10 |     [
11 |     '@babel/plugin-transform-runtime',
12 |       {
13 |         corejs: false,
14 |         helpers: false,
15 |         regenerator: true,
16 |         useESModules: false      
17 |       }
18 |     ],
19 |     [
20 |       "@babel/plugin-proposal-decorators",
21 |       { "legacy": true }
22 |     ],
23 |     [
24 |       "@babel/plugin-proposal-class-properties",
25 |       { "loose": true }
26 |     ]
27 |   ]
28 | }


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#288ae2;}
 7 | </style>
 8 | <g id="XMLID_4_">
 9 | 	<polygon id="XMLID_6_" class="st0" points="66.9,26.4 56.1,26.4 34.8,60.5 27.8,48 39.9,26.4 29.1,26.4 17,48 29.1,69.6 39.9,69.6 
10 | 		61.2,35.5 68.2,48 56.1,69.6 66.9,69.6 79,48 	"/>
11 | </g>
12 | </svg>


--------------------------------------------------------------------------------
/test/hello-world.spec.js:
--------------------------------------------------------------------------------
 1 | import { html, render } from 'lit-html';
 2 | import { expect } from 'chai';
 3 | 
 4 | import '../src/hello-world';
 5 | 
 6 | describe('hello-world', () => {
 7 |   let element;
 8 | 
 9 |   const fixture = html`
10 |     <hello-world .greeting=${'Welcome'}></hello-world>
11 |   `;
12 | 
13 |   beforeEach(async () => {
14 |     render(fixture, document.body);
15 |     element = document.body.firstElementChild;
16 |     await element.updateComplete;
17 |   });
18 | 
19 |   afterEach(() => {
20 |     element.remove();
21 |   });
22 | 
23 |   it('should render a welcome message', () => {
24 |     const title = element.shadowRoot.querySelector('h1');
25 |     expect(title.innerText).to.equal('Welcome');
26 |   });
27 | });


--------------------------------------------------------------------------------
/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, minimum-scale=1, initial-scale=1, user-scalable=yes">
 6 |     <meta name="description" content="create-lit-app">
 7 | 
 8 |     <title>Lit App</title>
 9 | 
10 |     <base href="/">
11 |     <link rel="icon" href="./assets/favicon.ico">
12 | 
13 |     <style>
14 |       body{
15 |         margin: 0;
16 |         padding: 0;
17 |       }
18 |     </style>
19 |     <script src="./vendor/webcomponents-loader.js"></script>
20 |     <script src="./vendor/custom-elements-es5-adapter.js"></script>
21 |     <script src="./vendor/fetch.js"></script>
22 |     <script src="./vendor/polyfill.min.js"></script>
23 |   </head>
24 |   <body>
25 |     <lit-app></lit-app>
26 | </html>


--------------------------------------------------------------------------------
/src/lit-app.js:
--------------------------------------------------------------------------------
 1 | import { LitElement, html } from '@polymer/lit-element/';
 2 | import { styles } from './lit-app-styles.js';
 3 | import './hello-world.js';
 4 | 
 5 | class LitApp extends LitElement {
 6 | 	render() {
 7 | 		return html`
 8 | 			<style>
 9 | 				${styles}
10 | 			</style>
11 | 			<div class="app">
12 | 				<header class="app-header">
13 | 					<img src="../assets/logo.svg" class="app-logo" alt="logo" />
14 | 					<h1 class="app-title">Welcome to LitHTML</h1>
15 | 				</header>
16 | 
17 | 				<hello-world .greeting=${'Welcome'}></hello-world>
18 | 				
19 | 				<a aria-label="Create lit app on Github" href="https://github.com/thepassle/create-lit-app">
20 | 					<img src="../assets/github.svg" class="app-gh" alt />
21 | 				</a>
22 | 			</div>
23 | 		`;
24 | 	}
25 | }
26 | 
27 | customElements.define('lit-app', LitApp);
28 | 


--------------------------------------------------------------------------------
/src/lit-app-styles.js:
--------------------------------------------------------------------------------
 1 | import { html } from '@polymer/lit-element';
 2 | 
 3 | const POLYMER_PINK = '#fc4482';
 4 | const SPACER = 5;
 5 | 
 6 | export const styles = html`
 7 |   <style>
 8 |     .app {
 9 |       text-align: center;
10 |       font-family: sans-serif;
11 |     }
12 | 
13 |     .app-logo {
14 |       animation: app-logo-spin infinite 20s linear;
15 |       height: 80px;
16 |       margin-top: ${SPACER * 2}px;
17 |     }
18 | 
19 |     .app-header {
20 |       background-color: #222;
21 |       height: 150px;
22 |       padding: ${SPACER * 4}px;
23 |       color: white;
24 |     }
25 | 
26 |     .app-gh {
27 |       position: fixed;
28 |       width: ${SPACER * 5}px;
29 |       bottom: ${SPACER * 5}px;
30 |       left: ${SPACER * 5}px;
31 |     }
32 | 
33 |     @keyframes app-logo-spin {
34 |       from { transform: rotate(0deg); }
35 |       to { transform: rotate(360deg); }
36 |     }
37 | 
38 |     a {
39 |       color: ${POLYMER_PINK};
40 |     }
41 |   </style>
42 | `;


--------------------------------------------------------------------------------
/src/assets/github.svg:
--------------------------------------------------------------------------------
1 | <svg height="1024" width="1024" xmlns="http://www.w3.org/2000/svg">
2 |   <path d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.688 418.125 350.156 485.812 25.594 4.688 34.938-11.125 34.938-24.625 0-12.188-0.469-52.562-0.719-95.312C242 908.812 211.906 817.5 211.906 817.5c-23.312-59.125-56.844-74.875-56.844-74.875-46.531-31.75 3.53-31.125 3.53-31.125 51.406 3.562 78.47 52.75 78.47 52.75 45.688 78.25 119.875 55.625 149 42.5 4.654-33 17.904-55.625 32.5-68.375C304.906 725.438 185.344 681.5 185.344 485.312c0-55.938 19.969-101.562 52.656-137.406-5.219-13-22.844-65.094 5.062-135.562 0 0 42.938-13.75 140.812 52.5 40.812-11.406 84.594-17.031 128.125-17.219 43.5 0.188 87.312 5.875 128.188 17.281 97.688-66.312 140.688-52.5 140.688-52.5 28 70.531 10.375 122.562 5.125 135.5 32.812 35.844 52.625 81.469 52.625 137.406 0 196.688-119.75 240-233.812 252.688 18.438 15.875 34.75 47 34.75 94.75 0 68.438-0.688 123.625-0.688 140.5 0 13.625 9.312 29.562 35.25 24.562C877.438 930 1024 738.125 1024 512 1024 229.25 794.75 0 512 0z" />
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | const { join } = require('path');
 2 | 
 3 | 
 4 | module.exports = function(config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     singleRun: true,
 8 |     browsers: ['ChromeHeadless'],
 9 |     frameworks: ['mocha'],
10 | 
11 |     files: [
12 |       {
13 |         pattern: 'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js',
14 |         watched: false
15 |       },
16 |       {
17 |         pattern: 'node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js',
18 |         watched: false
19 |       },
20 |       'test/index.js'
21 |     ],
22 | 
23 |     preprocessors: {
24 |       'test/index.js': ['webpack', 'sourcemap']
25 |     },
26 |     port: 9876,
27 |     colors: true,
28 |     logLevel: config.LOG_INFO,
29 | 
30 |     client: {
31 |       mocha: {
32 |         reporter: 'html',
33 |         ui: 'bdd'
34 |       },
35 |       chai: {
36 |         includeStack: true
37 |       }
38 |     },
39 |     webpack: {
40 |       devtool: 'inline-source-map',
41 |       mode: 'development',
42 |       module: {
43 |         rules: [{
44 |             use: [
45 |               {
46 |                 loader: 'babel-loader',
47 |                 options: {
48 |                   babelrc: true,
49 |                   extends: join(__dirname + '/.babelrc'),
50 |                   cacheDirectory: true,
51 |                   envName: 'develop'
52 |                 }
53 |               }
54 |             ]
55 |           }
56 |         ]
57 |       }
58 |     },
59 | 
60 |     webpackMiddleware: {
61 |       stats: 'errors-only'
62 |     },
63 | 
64 |     webpackServer: {
65 |       noInfo: true
66 |     }
67 |   });
68 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "create-lit-app",
 3 |   "version": "1.0.0",
 4 |   "author": "Pascal Schilp",
 5 |   "license": "MIT",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/"
 9 |   },
10 |   "dependencies": {
11 |     "@polymer/lit-element": "^0.6.4",
12 |     "lit-html": "^0.14.0",
13 |     "@webcomponents/webcomponentsjs": "^2.2.1",
14 |     "express": "^4.16.3",
15 |     "promise-polyfill": "^8.0.0",
16 |     "@babel/runtime": "^7.0.0",
17 |     "whatwg-fetch": "^2.0.4"
18 |   },
19 |   "devDependencies": {
20 |     "@babel/core": "^7.1.0",
21 |     "@babel/plugin-proposal-class-properties": "^7.1.0",
22 |     "@babel/plugin-proposal-decorators": "^7.1.2",
23 |     "@babel/plugin-transform-runtime": "^7.1.0",
24 |     "@babel/preset-env": "^7.1.0",
25 |     "babel-loader": "^8.0.2",
26 |     "chai": "^4.2.0",
27 |     "clean-webpack-plugin": "^0.1.19",
28 |     "copy-webpack-plugin": "^4.5.2",
29 |     "eslint": "^4.19.1",
30 |     "eslint-plugin-import": "^2.13.0",
31 |     "html-webpack-plugin": "^4.0.0-alpha",
32 |     "karma": "^3.1.1",
33 |     "karma-chrome-launcher": "^2.2.0",
34 |     "karma-mocha": "^1.3.0",
35 |     "karma-sourcemap-loader": "^0.3.7",
36 |     "karma-webpack": "^3.0.5",
37 |     "mocha": "^5.2.0",
38 |     "webpack": "^4.14.0",
39 |     "webpack-cli": "^3.0.8",
40 |     "webpack-dev-server": "^3.1.4",
41 |     "webpack-merge": "^4.1.3"
42 |   },
43 |   "scripts": {
44 |     "build": "webpack --env production",
45 |     "lint": "eslint ./src/*.js",
46 |     "postinstall": "npm run build",
47 |     "start": "webpack-dev-server --env development",
48 |     "test": "./node_modules/karma/bin/karma start"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const { resolve, join } = require('path');
  4 | const merge = require('webpack-merge');
  5 | const CopyWebpackPlugin = require('copy-webpack-plugin');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CleanWebpackPlugin = require('clean-webpack-plugin');
  8 | 
  9 | const ENV = process.argv.find(arg => arg.includes('production'))
 10 |   ? 'production'
 11 |   : 'development';
 12 | const OUTPUT_PATH = ENV === 'production' ? resolve('dist') : resolve('src');
 13 | const INDEX_TEMPLATE = resolve('./src/index.html');
 14 | 
 15 | const webcomponentsjs = './node_modules/@webcomponents/webcomponentsjs';
 16 | 
 17 | const assets = [
 18 |   {
 19 |     from: resolve('./src/assets'),
 20 |     to: resolve('dist/assets/')
 21 |   }
 22 | ];
 23 | 
 24 | const polyfills = [
 25 |   {
 26 |     from: resolve(`${webcomponentsjs}/webcomponents-*.js`),
 27 |     to: join(OUTPUT_PATH, 'vendor'),
 28 |     flatten: true
 29 |   },
 30 |   {
 31 |     from: resolve(`${webcomponentsjs}/bundles/*.js`),
 32 |     to: join(OUTPUT_PATH, 'vendor', 'bundles'),
 33 |     flatten: true
 34 |   },
 35 |   {
 36 |     from: resolve(`${webcomponentsjs}/custom-elements-es5-adapter.js`),
 37 |     to: join(OUTPUT_PATH, 'vendor'),
 38 |     flatten: true
 39 |   },
 40 |   {
 41 |     from: resolve('./node_modules/whatwg-fetch/fetch.js'),
 42 |     to: join(OUTPUT_PATH, 'vendor')
 43 |   },
 44 |   {
 45 |     from: resolve('./node_modules/promise-polyfill/dist/polyfill.min.js'),
 46 |     to: join(OUTPUT_PATH, 'vendor')
 47 |   }
 48 | ];
 49 | 
 50 | const commonConfig = merge([
 51 |   {
 52 |     entry: './src/lit-app.js',
 53 |     output: {
 54 |       path: OUTPUT_PATH,
 55 |       filename: '[name].[chunkhash:8].js'
 56 |     },
 57 |     module: {
 58 |       rules: [
 59 |         {
 60 |           test: /\.js$/,
 61 |           use: [
 62 |             {
 63 |               loader: 'babel-loader',
 64 |               options: {
 65 |                 babelrc: true,
 66 |                 extends: join(__dirname + '/.babelrc'),
 67 |                 cacheDirectory: true,
 68 |                 envName: ENV
 69 |               }
 70 |             }
 71 |           ]
 72 |         }
 73 |       ]
 74 |     }
 75 |   }
 76 | ]);
 77 | 
 78 | const developmentConfig = merge([
 79 |   {
 80 |     devtool: 'cheap-module-source-map',
 81 |     plugins: [
 82 |       new CopyWebpackPlugin(polyfills),
 83 |       new HtmlWebpackPlugin({
 84 |         template: INDEX_TEMPLATE
 85 |       })
 86 |     ],
 87 | 
 88 |     devServer: {
 89 |       contentBase: OUTPUT_PATH,
 90 |       compress: true,
 91 |       overlay: true,
 92 |       port: 3000,
 93 |       historyApiFallback: true,
 94 |       host: 'localhost'
 95 |     }
 96 |   }
 97 | ]);
 98 | 
 99 | const productionConfig = merge([
100 |   {
101 |     devtool: 'nosources-source-map',
102 |     plugins: [
103 |       new CleanWebpackPlugin([OUTPUT_PATH], { verbose: true }),
104 |       new CopyWebpackPlugin([...polyfills, ...assets]),
105 |       new HtmlWebpackPlugin({
106 |         template: INDEX_TEMPLATE,
107 |         minify: {
108 |           collapseWhitespace: true,
109 |           removeComments: true,
110 |           minifyCSS: true,
111 |           minifyJS: true
112 |         }
113 |       })
114 |     ]
115 |   }
116 | ]);
117 | 
118 | module.exports = mode => {
119 |   if (mode === 'production') {
120 |     return merge(commonConfig, productionConfig, { mode });
121 |   }
122 | 
123 |   return merge(commonConfig, developmentConfig, { mode });
124 | };
125 | 


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