Add Vitejs ⚡️

Author: herberthobregon

README.md

@@ -1,5 +1,8 @@
 # LitElement starter site
-## Litelement + Typescript + Webpack 
+
+this project has a ready to production configuration.
+
+## Litelement + Typescript + Vitejs + Rollup.js
 This project includes a **VERY sample site** to start using LitElement with TypeScript (you can also use JS).
 
 The project tries to have the same structure as an `Android project`. The idea is that it feels familiar and we develop with a standard (or as similar as possible)
@@ -23,21 +26,19 @@ yarn
 
 ## 🚀 Start
 
-This sample uses the Babel and webpack to produce JavaScript that runs in modern browsers.
+This sample uses the `Babel` and `esbuild` with `Vitejs` to produce JavaScript that runs in modern browsers.
 
 ### Dev Server
 
-This sample uses [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) for previewing the project without additional build steps. `webpack-dev-server` handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles Typescript to JavaScript files.
+This sample uses [Vitejs](https://vitejs.dev/) for previewing the project without additional build steps. `Vitejs` handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles Typescript to JavaScript files.
 
-There is a development HTML file located at `src/index.html` that you can view at http://localhost:8000.
+There is a development HTML file located at `index.html` that you can view at http://localhost:8000.
 
 To `build` and `run` the JavaScript version of your component (include watcher):
 
 ```bash
 npm run dev
-```
-or
-```bash
+# or
 yarn dev
 ```
 

src/index.html renamed to index.html

@@ -35,15 +35,15 @@
 
 	<!-- Homescreen icons -->
 	<link rel="apple-touch-startup-image" href="res/drawable/favicon.png" />
-	<link rel="apple-touch-icon" href="/favicon.png" />
+	<link rel="apple-touch-icon" href="/res/drawable/favicon.png" />
 
 	<!-- Tile icon for Windows 8 (144x144 + tile color) -->
 	<meta name="msapplication-TileImage" content="res/drawable/favicon.png" />
 	<meta name="msapplication-TileColor" content="#16478e" />
 	<meta name="msapplication-tap-highlight" content="no" />
 
 	<!-- See https://goo.gl/OOhYW5 -->
-	<link rel="shortcut icon" href="/res/drawable/favicon.png" />
+	<link rel="shortcut icon" type="image/svg+xml" href="/res/drawable/favicon.svg" />
 	<link rel="manifest" href="manifest.json" />
 
 	<style>
@@ -72,7 +72,14 @@
 	<noscript>
 		Please enable JavaScript to view this website. v3.5.8
 	</noscript>
-	<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+		<script
+			src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.8.3/system.min.js"
+			integrity="sha512-dGQpe9Hb1dXjYT7TSrTS6qnRmzrhY9wsyRtN6BR2R+XgiXf5cpgvWVGPWptrarkfoldzpIkl7adWEddhoKsX6A=="
+			crossorigin="anonymous"
+			referrerpolicy="no-referrer"
+		></script>
+		<script type="module" src="/src/lit-app.ts"></script>
 </body>
 
 </html>

package.json

@@ -4,40 +4,36 @@
     "version": "1.0.0",
     "main": "index.html",
     "scripts": {
-        "build": "webpack --mode production",
-        "dev": "webpack serve --mode development"
+        "dev": "vite",
+        "build": "vite build"
     },
     "dependencies": {
-        "@babel/plugin-proposal-export-default-from": "^7.12.13",
-        "@conectate/ct-lit": "^3.1.0",
-        "@conectate/ct-router": "^3.1.0",
+        "@conectate/ct-lit": "^3.2.1",
+        "@conectate/ct-router": "^3.2.1",
         "@webcomponents/webcomponentsjs": "^2.5.0",
-        "lit": "^2.0.0-rc.1"
+        "lit": "^2.0.0-rc.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.14.0",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.13.8",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
-        "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+        "@babel/core": "^7.14.3",
+        "@babel/plugin-proposal-decorators": "^7.14.2",
+        "@babel/plugin-proposal-export-default-from": "^7.12.13",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-syntax-import-meta": "^7.10.4",
-        "@babel/plugin-transform-async-to-generator": "^7.13.0",
-        "@babel/plugin-transform-runtime": "^7.13.15",
-        "@babel/preset-env": "^7.14.1",
-        "@firebase/app-types": "^0.6.1",
+        "@babel/preset-env": "^7.14.4",
+        "@firebase/app-types": "^0.6.2",
+        "@rollup/plugin-babel": "^5.3.0",
+        "@rollup/plugin-node-resolve": "^13.0.0",
         "babel-loader": "^8.2.2",
         "babel-plugin-bundled-import-meta": "^0.3.2",
         "babel-plugin-template-html-minifier": "^4.1.0",
-        "clean-webpack-plugin": "^4.0.0-alpha.0",
-        "copy-webpack-plugin": "5.0.3",
-        "html-webpack-plugin": "^5.3.1",
-        "prettier": "^2.2.1",
-        "svg-inline-loader": "^0.8.0",
-        "ts-loader": "^9.1.2",
-        "typescript": "^4.2.4",
-        "webpack": "^5.36.2",
-        "webpack-bundle-analyzer": "^4.4.1",
-        "webpack-cli": "^4.6.0",
-        "webpack-dev-server": "^3.11.2"
+        "prettier": "^2.3.0",
+        "rollup-plugin-copy": "^3.4.0",
+        "rollup-plugin-minify-html-literals": "^1.2.6",
+        "rollup-plugin-summary": "^1.3.0",
+        "rollup-plugin-terser": "^7.0.2",
+        "svg-inline-loader": "^0.8.2",
+        "ts-loader": "^9.2.2",
+        "typescript": "^4.3.2",
+        "vite": "^2.3.6"
     }
-}
+}

res/drawable/favicon.png

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+	<!-- Material - Responsive -->
+	<meta charset="utf-8" />
+	<title>LitElement Starter Project</title>
+	<base href="/" />
+	<meta name="description" content="Template for LitElement Starter Project" />
+	<meta name=" theme-color" content="#16478e" />
+	<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1" />
+	<meta name="robots" content="index, follow" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=40" />
+	<!--<meta name="apple-itunes-app" content="app-id=1093787284" />-->
+	<link rel="canonical" href="https://github.com/conectate/lit-element-starter" id="canonical" />
+
+
+	<!-- Facebook’s Open Graph -->
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content="https://github.com/conectate/lit-element-starter" />
+	<meta property="og:title" content="LitElement Starter Project" />
+	<meta property="og:site_name" content="LitElement Starter Project" />
+	<meta property="og:description" content="Template for LitElement Starter Project" />
+	<meta property=" og:image" content="/res/drawable/og/default.png" />
+	<!-- twitter -->
+	<meta name="twitter:card" content="app" />
+	<meta name="twitter:title" content="LitElement Starter Project" />
+	<meta name="twitter:description" content="Template for LitElement Starter Project" />
+	<meta name=" twitter:image" content="/res/drawable/og/default.png" />
+
+	<!-- Add to homescreen for Safari on iOS -->
+	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<meta name="apple-mobile-web-app-status-bar-style" content="#16478e" />
+	<meta name="apple-mobile-web-app-title" content="LitElement Starter Project" />
+
+	<!-- Homescreen icons -->
+	<link rel="apple-touch-startup-image" href="res/drawable/favicon.png" />
+	<link rel="apple-touch-icon" href="/favicon.png" />
+
+	<!-- Tile icon for Windows 8 (144x144 + tile color) -->
+	<meta name="msapplication-TileImage" content="res/drawable/favicon.png" />
+	<meta name="msapplication-TileColor" content="#16478e" />
+	<meta name="msapplication-tap-highlight" content="no" />
+
+	<!-- See https://goo.gl/OOhYW5 -->
+	<link rel="shortcut icon" href="/res/drawable/favicon.png" />
+	<link rel="manifest" href="manifest.json" />
+
+	<style>
+		html {
+			height: 100%;
+			width: 100%;
+			max-height: 100%;
+			max-width: 100%;
+		}
+
+		body,
+		html {
+			position: relative;
+			margin: 0;
+			padding: 0;
+			font-size: 14px;
+			background: var(--color-background, #fff);
+			height: 100%;
+			font-family: 'Roboto', sans-serif !important;
+		}
+	</style>
+</head>
+
+<body>
+	<lit-app></lit-app>
+	<noscript>
+		Please enable JavaScript to view this website. v3.5.8
+	</noscript>
+	<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+		<script
+			src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.8.3/system.min.js"
+			integrity="sha512-dGQpe9Hb1dXjYT7TSrTS6qnRmzrhY9wsyRtN6BR2R+XgiXf5cpgvWVGPWptrarkfoldzpIkl7adWEddhoKsX6A=="
+			crossorigin="anonymous"
+			referrerpolicy="no-referrer"
+		></script>
+		<script>
+			System.import('/app.bundle.js');
+		</script>
+</body>
+
+</html>

res/drawable/favicon.svg

@@ -0,0 +1 @@
+console.log("development");

res/index.universal.html

@@ -1,5 +1,5 @@
 import { CtLit, html, property, customElement, css } from '@conectate/ct-lit';
-import { strings } from '../../../res/values/strings';
+import { strings } from '../../xconfig/strings';
 
 @customElement('home-app')
 export class HomeApp extends CtLit {

manifest.json renamed to res/manifest.json

@@ -1,8 +1,8 @@
 import './base/app-router';
 import AppLocalStorage from './base/app-localstorage';
-import { loadLang } from '../res/values/strings';
+import { loadLang } from './xconfig/strings';
 import { css, CtLit, customElement, html } from '@conectate/ct-lit';
-import { property, query, queryAll, queryAssignedNodes, queryAsync, state, state as internalProperty } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { injectTheme, Theme } from './base/styles/default-theme';
 
 @customElement('lit-app')

res/service-worker.js

@@ -0,0 +1,86 @@
+import { RollupBabelInputPluginOptions, babel } from '@rollup/plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import copy from 'rollup-plugin-copy';
+import minifyHTML from 'rollup-plugin-minify-html-literals';
+import summary from 'rollup-plugin-summary';
+import { terser } from 'rollup-plugin-terser';
+import { defineConfig } from 'vite';
+
+import app from './package.json';
+
+const babelConfig: RollupBabelInputPluginOptions = {
+	babelHelpers: 'bundled',
+	plugins: [
+		['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+		'@babel/plugin-syntax-dynamic-import',
+		'@babel/plugin-syntax-import-meta',
+		'@babel/plugin-proposal-export-default-from'
+	],
+	babelrc: false,
+	presets: [['@babel/preset-env', { targets: { chrome: process.env.NODE_ENV == 'development' ? '90' : '55' }, debug: true }]]
+};
+
+const copyConfig = {
+	targets: [
+		{ src: 'node_modules/@webcomponents', dest: './build/node_modules' },
+		{ src: 'res/index.universal.html', dest: 'build', rename: 'index.bak.html' },
+		{ src: 'res/manifest.json', dest: './build' },
+		{ src: 'res', dest: 'build' }
+	]
+};
+let development = process.env.NODE_ENV != 'production';
+
+console.log('process.env.NODE_ENV ', process.env.NODE_ENV);
+// https://vitejs.dev/config/
+export default (opts: any) => {
+	return defineConfig({
+		server: {
+			port: 8000,
+			fsServe: {
+				root: '/'
+			}
+		},
+		define: {
+			'process.env.NODE_ENV': JSON.stringify(development ? 'development' : 'production'),
+			'process.env.VERSION': JSON.stringify(app.version)
+		},
+		plugins: [],
+		build: {
+			target: 'chrome55',
+			assetsInlineLimit: 100000,
+			// "outDir": "build",
+			rollupOptions: {
+				input: {
+					app: './src/lit-app.ts'
+				},
+				// input: ['src/my-element.ts'],
+				// Specifies two JS output configurations, modern and legacy, which the HTML plugin will
+				// automatically choose between; the legacy build is compiled to ES5
+				// and SystemJS modules
+				output: {
+					// Legacy JS bundles (ES5 compilation and SystemJS module output)
+					format: 'systemjs',
+					chunkFileNames: `${process.env.NODE_ENV == 'development' ? '[name].' : 'c.'}[hash].js`,
+					entryFileNames: '[name].bundle.js',
+					dir: 'build'
+				},
+				plugins: [
+					// Minify HTML template literals
+					minifyHTML(),
+					babel(babelConfig),
+					// Resolve bare module specifiers to relative paths
+					resolve(),
+
+					// Minify JS
+					terser({
+						module: true
+					}),
+					// @ts-ignore Print bundle summary
+					summary(),
+					copy(copyConfig)
+				],
+				preserveEntrySignatures: false
+			}
+		}
+	});
+};