setup async chunk imports

Author: Devcon4

.babelrc

@@ -3,13 +3,13 @@
       ["@babel/env", {
         "useBuiltIns": "usage",
         "corejs": 3,
-        "targets": "> 0.25%, not dead"
+        "targets": "> 5.0%, not dead"
       }],
       "@babel/typescript" 
     ],
     "plugins": [
-      ["@babel/plugin-proposal-decorators", {"legacy": true}],
-      ["@babel/proposal-class-properties", {"loose": true}],
+      ["@babel/plugin-proposal-decorators", {"decoratorsBeforeExport": true}],
+      ["@babel/proposal-class-properties"],
       "@babel/proposal-object-rest-spread"
     ]
   }

.vscode/oriole.code-snippets

@@ -0,0 +1,44 @@
+{
+	// Place your Oriole workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	// "Print to console": {
+	// 	"scope": "javascript,typescript",
+	// 	"prefix": "log",
+	// 	"body": [
+	// 		"console.log('$1');",
+	// 		"$2"
+	// 	],
+	// 	"description": "Log output to console"
+	// }
+
+  "Component": {
+		"scope": "typescript",
+		"prefix": "component",
+		"description": "Generate a bare bones Oriole component",
+		"body": [
+			"import { LitElement, css, html, customElement } from \"lit-element\";",
+			"import { globalStyles } from \"../globalStyles\";",
+			"",
+			"@customElement('ori-${TM_FILENAME_BASE/(.*)\\..+$/${1:/lowercase}/}')",
+			"export class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g} extends LitElement {",
+			"\t",
+			"\trender() {",
+			"\t\treturn html`<div class=\"${TM_FILENAME_BASE/(.*)\\..+$/${1:/lowercase}/}\">$0</div>`;",
+			"\t}",
+			"\t",
+			"\tstatic get styles() {",
+			"\t\treturn [",
+			"\t\t\tglobalStyles,",
+			"\t\t\tcss``",
+			"\t\t];",
+			"\t}",
+			"}",
+			""
+		]
+	}
+}

package-lock.json

@@ -35,6 +35,7 @@
     "lit-element": "^2.4.0",
     "rollup": "^2.26.9",
     "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dev": "^1.1.3",
     "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-terser": "^7.0.2",

package.json

@@ -7,6 +7,7 @@ import html from '@rollup/plugin-html';
 import copy from 'rollup-plugin-copy';
 import { indexHtml } from './src/indexHtml.js';
 import dev from 'rollup-plugin-dev';
+import del from 'rollup-plugin-delete';
 
 const extensions = ['.js', '.ts'];
 
@@ -20,13 +21,14 @@ const config = {
 		dir: 'dist',
 		format: 'es',
 		name: 'Oriole',
-		entryFileNames: '[name]-[hash].js',
-		chunkFileNames: '[name]-[hash].js',
+		entryFileNames: '[name].[hash].js',
+		chunkFileNames: '[hash].js',
 	},
 
 	plugins: [
+		del({ targets: 'dist/*' }),
 		html({
-			template: indexHtml,
+			template: (opts) => indexHtml(opts, ['app.']),
 		}),
 		minifyHTML(),
 		copy(copyConfig),
@@ -51,7 +53,7 @@ if (!isDevelopment) {
 	config.plugins = [
 		...config.plugins,
 		terser({}),
-		dev({ dirs: ['dist'], host: 'localhost', spa: true }),
+		dev({ dirs: ['dist'], host: 'localhost', spa: 'dist/index.html' }),
 	];
 }