apprun 3.28.3 → 3.28.8

package/CHANGELOG.md

@@ -2,8 +2,11 @@
 
 ## Releases
 * apprun@es5: 1.x, stable, es5
-* apprun@latest: 2.x, stable, es2015, web component
-* apprun@next: 3.x, dev, es2015, lit-html
+* apprun@latest: 3.x, stable, es6/es2015, lit-html
+
+## 3.28.3 merged into master
+
+* Replaced _morphdom_ with _lit-html_
 
 ## 1.28/ 2.28 / 3.28
 

package/README.md

@@ -2,7 +2,7 @@
 
 AppRun is a JavaScript library for building reliable, high-performance web applications using the Elm-inspired architecture, events, and components.
 
-> AppRun is an MIT-licensed open source project. Please consider [supporting the project on Patreon](https://www.patreon.com/apprun). 👍❤️🙏
+> [All the Ways to Make a Web Component - May 2021 Update](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/) compares the coding style, bundle size, and performance of 55 different ways to make a Web Component. It put AppRun on the top 1/3 of the list of bundle size and performance.
 
 ## AppRun Benefits
 
@@ -30,13 +30,12 @@ Or use it as ES module from unpkg.com:
 ```
 ## Architecture Concept
 
-![apprun-demo](docs/imgs/apprun-demo.gif)
+* AppRun [architecure](docs/architecture) has _state_, _view_, and _update_.
+* AppRun is [event-driven](docs/event-pubsub).
+* AppRun apps can be global or [Component](docs/component) based.
 
-* AppRun architecure has _state_, _view_, and _update_.
-* AppRun is event-driven.
-* AppRun is [Component](docs/#/05-component) based.
 
-[Try the AppRun Playground](https://apprun.js.org/#play).
+You can get started with [AppRun Docs](https://apprun.js.org/docs) and [the AppRun Playground](https://apprun.js.org/#play).
 
 ## AppRun Book from Apress
 
@@ -66,9 +65,8 @@ npx apprun --init --spa --es5
 
 ## AppRun Dev Server
 
-AppRun now has a dev server. It is base on the _live-server_ and supports ES Modules.
+AppRun now has a dev server. It is base on the _live-server_ and supports ES Modules. _apprun-dev-server_ is install by AppRun CLI when using _esbuild_. Or you can use it directly.
 
-To use the AppRun dev server:
 
 ```sh
 npx apprun-dev-server
@@ -114,6 +112,21 @@ Have fun and send pull requests.
 ## Contributors
 [![](https://contributors-img.firebaseapp.com/image?repo=yysun/apprun)](https://github.com/yysun/apprun/graphs/contributors)
 
+## Support
+
+AppRun is an MIT-licensed open source project. Please consider [supporting the project on Patreon](https://www.patreon.com/apprun). 👍❤️🙏
+
+### Thank you for your support
+
+* Athkahden Asura
+* Alfred Nerstu
+* Gyuri Lajos
+* Lorenz Glißmann
+* Kevin Shi
+* Chancy Kennedy
+
+
+
 ## License
 
 MIT

package/WHATSNEW.md

@@ -2,20 +2,22 @@
 
 ## Default npm Version Change
 
-In the past, the AppRun default version on npm is 1.x. The CLI creates tsconfig for es5. You can use --es6 option to create tsconfig for 2.x.
-
-On Feb 21, 2020, the default version on npm has been changed from 1.x to 2.x. And the CLI creates tsconfig for es2015. You can use --es5 option for 1.x.
+On May 19, 2020, the V3 branch merged into the master branch. AppRun replaced _morphdom_ with _lit-html_.
 
 When upgrading projects to the latest version (2.x), please modify the tsconfig from targeting es5 to es2015.
 
 Currently, the npm tags are as following:
 
 * apprun@es5: 1.x, stable, es5
-* apprun@latest: 2.x, stable, es2015, web components
-* apprun@next: 3.x, dev, es2015, web components, lit-html
+* apprun@latest: 3.x, stable, es2015, web components, lit-html
 
 ## Recent Posts and Publications
 
+### [All the Ways to Make a Web Component - May 2021 Update](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/)
+
+This post compares the coding style, bundle size, and performance of 55 different ways to make a Web Component. It put AppRun on the top 1/3 of the list of bundle size and performance.
+
+
 ### [A Dev Server Supports ESM](https://dev.to/yysun/a-dev-server-supports-esm-3cea)
 
 This post introduces [apprun-dev-server](https://dev.to/yysun/a-dev-server-supports-esm-3cea), a dev server that provides fast and productive experiences to AppRun application development, so-called unbundled development.

package/apprun-cli.js

@@ -8,22 +8,25 @@ const package_json = path.resolve('./package.json');
 const tsconfig_json = path.resolve('./tsconfig.json');
 const webpack_config_js = path.resolve('./webpack.config.js');
 const git_ignore_file = path.resolve('./.gitignore');
+const eslint_file = path.resolve('./.eslintrc.js');
 const index_html = path.resolve('./index.html');
 const main_tsx = path.resolve('./src/main.tsx');
 const spa_index = path.resolve('./index.html');
 const spa_main_tsx = path.resolve('./src/main.tsx');
 const spa_layout_tsx = path.resolve('./src/Layout.tsx');
 const readme_md = path.resolve('./README.md');
-const jest_config = path.resolve('./jest.config.js');
+const build_js = path.resolve('./_build.js');
 const execSync = require('child_process').execSync;
 const program = require('commander');
 
 const dir_src = './src';
 const dir_tests = './tests';
+const dir_stories = './src/stories'
 
 let show_start = false;
 let show_test = false;
 let es5 = false;
+let esbuild = false;
 
 function read(name) {
   return fs.readFileSync(path.resolve(__dirname + '/cli-templates', name), 'utf8');
@@ -53,16 +56,22 @@ function init() {
 
   if (!fs.existsSync(dir_src)) fs.mkdirSync(dir_src);
 
-  console.log(' * Installing packages. This might take a couple minutes.');
-  execSync('npm install apprun webpack webpack-cli webpack-dev-server ts-loader typescript source-map-loader --save-dev');
-
-  if (es5) execSync('npm install apprun@es5 --save');
-
-  es5 ?
-    write(tsconfig_json, read('tsconfig.es5.json'), ' * Configuring typescript - es5', true) :
-    write(tsconfig_json, read('tsconfig.es6.json'), ' * Configuring typescript - es2015', true);
+  const packages_es5 = 'npm install -D apprun@es5 typescript webpack webpack-cli webpack-dev-server ts-loader source-map-loader';
+  const packages_es6 = 'npm install -D apprun typescript webpack webpack-cli webpack-dev-server ts-loader source-map-loader';
+  console.log(' * Installing packages. This might take a few minutes.');
+  if (!esbuild) {
+    es5
+      ? execSync(packages_es5)
+      : execSync(packages_es6);
+  } else {
+    es5
+      ? execSync('npm install -D apprun@es5 apprun-dev-server esbuild')
+      : execSync('npm install -D apprun apprun-dev-server esbuild');
+  }
+  es5
+    ? write(tsconfig_json, read('tsconfig.es5.json'), ' * Configuring typescript - es5', true)
+    : write(tsconfig_json, read('tsconfig.es6.json'), ' * Configuring typescript - es2015', true);
 
-  write(webpack_config_js, read('webpack.config.js'))
   write(index_html, read('index.html'));
   write(main_tsx, read('main.ts_'));
   write(readme_md, read('readme.md'));
@@ -70,19 +79,37 @@ function init() {
   console.log(' * Adding npm scripts');
   const package_info = require(package_json);
   if (!package_info.scripts) package_info["scripts"] = {}
-  if (!package_info.scripts['start']) {
-    package_info["scripts"]["start"] = 'webpack-dev-server --mode development';
+  if (!esbuild) {
+    if (!package_info.scripts['start']) {
+      package_info["scripts"]["start"] = 'webpack serve --mode development';
+    }
+    if (!package_info.scripts['build']) {
+      package_info["scripts"]["build"] = 'webpack --mode production';
+    }
+    write(webpack_config_js, read('webpack.config.js'))
+  } else {
+    write(build_js, read('_build.js'));
+    if (!package_info.scripts['start']) {
+      package_info["scripts"]["start"] = 'node _build start';
+    }
+    if (!package_info.scripts['build']) {
+      package_info["scripts"]["build"] = 'node _build';
+    }
   }
-  if (!package_info.scripts['build']) {
-    package_info["scripts"]["build"] = 'webpack -p --mode production';
+  if (!package_info.scripts['tsc:watch']) {
+    package_info['scripts']['tsc:watch'] = 'tsc -w';
   }
+  save_package_json(package_info);
+  git_init();
+  // jest_init();
+  show_start = true;
+}
+
+function save_package_json(package_info) {
   fs.writeFileSync(
     package_json,
     JSON.stringify(package_info, null, 2)
   );
-  git_init();
-  // jest_init();
-  show_start = true;
 }
 
 function git_init() {
@@ -96,6 +123,7 @@ function git_init() {
 }
 
 function component(name) {
+  if (!fs.existsSync(dir_src)) fs.mkdirSync(dir_src);
   const fn = path.resolve(dir_src + '/' + name + '.tsx');
   const component_template = read('component.ts_');
   write(fn, component_template.replace(/\#name/g, name),
@@ -106,10 +134,30 @@ function component(name) {
 function jest_init() {
   console.log(' * Installing jest');
   execSync('npm i @types/jest jest ts-jest --save-dev');
-  write(jest_config, read('jest.config.js'), 'Creating');
+  const jest_config = {
+    "preset": "ts-jest",
+  }
+
+  const package_info = require(package_json) || {};
+  package_info["jest"] = jest_config
+
+  package_info["scripts"]["test"] = 'jest --watch';
+  save_package_json(package_info);
   show_test = true;
 }
 
+function lint_init() {
+  console.log(' * Installing ESLint');
+  execSync('npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin');
+
+  const package_info = require(package_json) || {};
+  package_info["scripts"]["lint"] = 'eslint src';
+  package_info["scripts"]["lint:fix"] = 'eslint src --fix';
+  save_package_json(package_info);
+
+  write(eslint_file, read('_eslintrc.js'));
+}
+
 function component_spec(name) {
   if (!fs.existsSync(dir_tests)) fs.mkdirSync(dir_tests);
   const fn = path.resolve(dir_tests + '/' + name + '.spec.ts');
@@ -119,7 +167,16 @@ function component_spec(name) {
   show_test = true;
 }
 
+function component_story(name) {
+  if (!fs.existsSync(dir_stories)) fs.mkdirSync(dir_stories);
+  const fn = path.resolve(dir_stories + '/' + name + '.stories.tsx');
+  const story_template = read('stories.js_');
+  write(fn, story_template.replace(/\#name/g, name),
+    `Creating component stories ${name}`);
+}
+
 function spa() {
+  if (!fs.existsSync(dir_src)) fs.mkdirSync(dir_src);
   write(spa_index, read('spa_index.html'), 'Creating', true);
   write(spa_main_tsx, read('spa_main.ts_'), 'Creating', true);
   write(spa_layout_tsx, read('Layout.ts_'), 'Creating', true);
@@ -131,32 +188,39 @@ function spa() {
 
 program
   .name('apprun')
-  .version('3.24.0')
+  .version('2.27')
   .option('-i, --init', 'Initialize AppRun Project')
   .option('-c, --component <file>', 'Generate AppRun component')
   .option('-g, --git', 'Initialize git repository')
   .option('-j, --jest', 'Install jest')
+  .option('-l, --lint', 'Install ESLint')
   .option('-t, --test <file>', 'Generate component spec')
+  .option('-o, --story <file>', 'Generate component stories')
   .option('-s, --spa', 'Generate SPA app')
   .option('-5, --es5', 'Use apprun@es5')
+  .option('-e, --esbuild', 'Use esbuild')
   .parse(process.argv);
 
 program._name = 'apprun';
+const options = program.opts();
 
-if (!program.init && !program.component && !program.git && !program.jest &&
-  !program.test && !program.spa) {
+if (!options.init && !options.component && !options.git && !options.jest &&
+  !options.test && !options.spa && !options.lint && !options.story) {
   program.outputHelp();
   process.exit()
 }
 
-if (program.es5) es5 = true;
-if (program.init) init();
-if (program.component) component(program.component);
-if (program.git) git_init();
-if (program.jest) jest_init();
-if (program.test) component_spec(program.test);
-if (program.spa) spa();
+if (options.es5) es5 = true;
+if (options.esbuild) esbuild = true;
+if (options.init) init();
+if (options.component) component(program.component);
+if (options.git) git_init();
+if (options.jest) jest_init();
+if (options.lint) lint_init();
+if (options.test) component_spec(program.test);
+if (options.story) component_story(program.story);
+if (options.spa) spa();
 
 console.log('\r');
 if (show_start) console.log('All done. You can run `npm start` and then navigate to http://localhost:8080 in a browser.');
-//if (show_test) console.log('All done. You can run `npm test`.');
+//if (show_test) console.log('All done. You can run `npm test`.');

package/cli-templates/_build.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+const builder = require('esbuild');
+const server = require('apprun-dev-server');
+
+const build = (watch = false) => builder.build({
+  entryPoints: ['src/main.tsx'],
+  outfile: 'dist/main.js',
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  watch
+});
+
+const start = () => {
+  server.start({
+    host: 'localhost',
+    port: process.env.PORT || 8080,
+    watch: 'src'
+  });
+}
+
+if (!process.argv[2]) {
+  build();
+} else {
+  build(true);
+  start();
+}

package/cli-templates/_eslintrc.js

@@ -0,0 +1,40 @@
+/* eslint-disable no-undef */
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+
+  plugins: ['@typescript-eslint'],
+
+  /// https://devstephen.medium.com/style-guides-for-linting-ecmascript-2015-eslint-common-google-airbnb-6c25fd3dff0
+  rules: {
+    indent: ['error', 2],
+    quotes: ['error', 'single'],
+    semi: ['error', 'always'],
+    'no-trailing-spaces': 'error',
+    'no-multiple-empty-lines': ['error', { 'max': 1, 'maxEOF': 0 }],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'no-case-declarations': 'off',
+    'eqeqeq': 'error',
+    'curly': ['error', 'all'],
+    'brace-style': ['error', '1tbs', { 'allowSingleLine': true }],
+    'no-extra-parens': ['error', 'functions'],
+    'no-useless-catch': 'error',
+    'no-console': 'error',
+    'space-before-function-paren': ['error', { 'anonymous': 'always', 'named': 'never', 'asyncArrow': 'always' }],
+    'object-curly-spacing': ['error', 'always'],
+    'array-bracket-spacing': ['error', 'never'],
+    'no-unused-expressions': ['error', { allowShortCircuit: true }],
+    'arrow-parens': ['error', 'as-needed', { 'requireForBlockBody': true }],
+    '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: 'app' }],
+    'no-invalid-this': 'off',
+    '@typescript-eslint/no-invalid-this': ['error']
+  },
+};

package/cli-templates/index.html

@@ -5,6 +5,6 @@
   <title>AppRun App</title>
 </head>
 <body>
-  <script src="./dist/app.js"></script>
+  <script type="module" src="./dist/main.js"></script>
 </body>
 </html>

package/cli-templates/spa_index.html

@@ -9,6 +9,6 @@
   <script src="https://unpkg.com/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <script src="https://unpkg.com/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
 <body>
-  <script src="./dist/app.js"></script>
+  <script type="module" src="./dist/main.js"></script>
 </body>
 </html>

package/cli-templates/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 module.exports = {
   entry: {
-    'dist/app': './src/main.tsx',
+    'dist/main': './src/main.tsx',
   },
   output: {
     filename: '[name].js',
@@ -17,7 +17,8 @@ module.exports = {
     ]
   },
   devServer: {
-    open: true
+    open: true,
+    static: path.join(__dirname),
   },
   devtool: 'source-map'
 }

package/dist/apprun-dev-tools.js

@@ -1,3 +1,2 @@
-/*! For license information please see apprun-dev-tools.js.LICENSE.txt */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.apprun=e():t.apprun=e()}(this,(function(){return(()=>{"use strict";var t={};t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),t.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var e={};t.r(e);let n;const s="object"==typeof self&&self.self===self&&self||"object"==typeof t.g&&t.g.global===t.g&&t.g;s.app&&s._AppRunVersions?n=s.app:(n=new class{constructor(){this._events={}}on(t,e,n={}){this._events[t]=this._events[t]||[],this._events[t].push({fn:e,options:n})}off(t,e){const n=this._events[t]||[];this._events[t]=n.filter((t=>t.fn!==e))}find(t){return this._events[t]}run(t,...e){const n=this.getSubscribers(t,this._events);return console.assert(n&&n.length>0,"No subscriber for event: "+t),n.forEach((n=>{const{fn:s,options:o}=n;return o.delay?this.delay(t,s,e,o):Object.keys(o).length>0?s.apply(this,[...e,o]):s.apply(this,e),!n.options.once})),n.length}once(t,e,n={}){this.on(t,e,Object.assign(Object.assign({},n),{once:!0}))}delay(t,e,n,s){s._t&&clearTimeout(s._t),s._t=setTimeout((()=>{clearTimeout(s._t),Object.keys(s).length>0?e.apply(this,[...n,s]):e.apply(this,n)}),s.delay)}query(t,...e){const n=this.getSubscribers(t,this._events);console.assert(n&&n.length>0,"No subscriber for event: "+t);const s=n.map((t=>{const{fn:n,options:s}=t;return Object.keys(s).length>0?n.apply(this,[...e,s]):n.apply(this,e)}));return Promise.all(s)}getSubscribers(t,e){const n=e[t]||[];return e[t]=n.filter((t=>!t.options.once)),Object.keys(e).filter((e=>e.endsWith("*")&&t.startsWith(e.replace("*","")))).sort(((t,e)=>e.length-t.length)).forEach((s=>n.push(...e[s].map((e=>Object.assign(Object.assign({},e),{options:Object.assign(Object.assign({},e.options),{event:t})})))))),n}},s.app=n,s._AppRunVersions="AppRun-2");const o=n,i=new WeakMap,l=t=>"function"==typeof t&&i.has(t),r="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,a={},c={},p=`{{lit-${String(Math.random()).slice(2)}}}`,u=`\x3c!--${p}--\x3e`,h=(new RegExp(`${p}|${u}`),"$lit$"),d=t=>-1!==t.index,m=()=>document.createComment(""),f=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;class _{constructor(t,e,n){this.__parts=[],this.template=t,this.processor=e,this.options=n}update(t){let e=0;for(const n of this.__parts)void 0!==n&&n.setValue(t[e]),e++;for(const t of this.__parts)void 0!==t&&t.commit()}_clone(){const t=r?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),e=[],n=this.template.parts,s=document.createTreeWalker(t,133,null,!1);let o,i=0,l=0,a=s.nextNode();for(;i<n.length;)if(o=n[i],d(o)){for(;l<o.index;)l++,"TEMPLATE"===a.nodeName&&(e.push(a),s.currentNode=a.content),null===(a=s.nextNode())&&(s.currentNode=e.pop(),a=s.nextNode());if("node"===o.type){const t=this.processor.handleTextExpression(this.options);t.insertAfterNode(a.previousSibling),this.__parts.push(t)}else this.__parts.push(...this.processor.handleAttributeExpressions(a,o.name,o.strings,this.options));i++}else this.__parts.push(void 0),i++;return r&&(document.adoptNode(t),customElements.upgrade(t)),t}}const g=window.trustedTypes&&trustedTypes.createPolicy("lit-html",{createHTML:t=>t}),v=` ${p} `;class y{constructor(t,e,n,s){this.strings=t,this.values=e,this.type=n,this.processor=s}getHTML(){const t=this.strings.length-1;let e="",n=!1;for(let s=0;s<t;s++){const t=this.strings[s],o=t.lastIndexOf("\x3c!--");n=(o>-1||n)&&-1===t.indexOf("--\x3e",o+1);const i=f.exec(t);e+=null===i?t+(n?v:u):t.substr(0,i.index)+i[1]+i[2]+h+i[3]+p}return e+=this.strings[t],e}getTemplateElement(){const t=document.createElement("template");let e=this.getHTML();return void 0!==g&&(e=g.createHTML(e)),t.innerHTML=e,t}}const b=t=>null===t||!("object"==typeof t||"function"==typeof t),w=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class x{constructor(t,e,n){this.dirty=!0,this.element=t,this.name=e,this.strings=n,this.parts=[];for(let t=0;t<n.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new N(this)}_getValue(){const t=this.strings,e=t.length-1,n=this.parts;if(1===e&&""===t[0]&&""===t[1]){const t=n[0].value;if("symbol"==typeof t)return String(t);if("string"==typeof t||!w(t))return t}let s="";for(let o=0;o<e;o++){s+=t[o];const e=n[o];if(void 0!==e){const t=e.value;if(b(t)||!w(t))s+="string"==typeof t?t:String(t);else for(const e of t)s+="string"==typeof e?e:String(e)}}return s+=t[e],s}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class N{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===a||b(t)&&t===this.value||(this.value=t,l(t)||(this.committer.dirty=!0))}commit(){for(;l(this.value);){const t=this.value;this.value=a,t(this)}this.value!==a&&this.committer.commit()}}class E{constructor(t){this.value=void 0,this.__pendingValue=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(m()),this.endNode=t.appendChild(m())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.__insert(this.startNode=m()),t.__insert(this.endNode=m())}insertAfterPart(t){t.__insert(this.startNode=m()),this.endNode=t.endNode,t.endNode=this.startNode}setValue(t){this.__pendingValue=t}commit(){if(null===this.startNode.parentNode)return;for(;l(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=a,t(this)}const t=this.__pendingValue;t!==a&&(b(t)?t!==this.value&&this.__commitText(t):t instanceof y?this.__commitTemplateResult(t):t instanceof Node?this.__commitNode(t):w(t)?this.__commitIterable(t):t===c?(this.value=c,this.clear()):this.__commitText(t))}__insert(t){this.endNode.parentNode.insertBefore(t,this.endNode)}__commitNode(t){this.value!==t&&(this.clear(),this.__insert(t),this.value=t)}__commitText(t){const e=this.startNode.nextSibling,n="string"==typeof(t=null==t?"":t)?t:String(t);e===this.endNode.previousSibling&&3===e.nodeType?e.data=n:this.__commitNode(document.createTextNode(n)),this.value=t}__commitTemplateResult(t){const e=this.options.templateFactory(t);if(this.value instanceof _&&this.value.template===e)this.value.update(t.values);else{const n=new _(e,t.processor,this.options),s=n._clone();n.update(t.values),this.__commitNode(s),this.value=n}}__commitIterable(t){Array.isArray(this.value)||(this.value=[],this.clear());const e=this.value;let n,s=0;for(const o of t)n=e[s],void 0===n&&(n=new E(this.options),e.push(n),0===s?n.appendIntoPart(this):n.insertAfterPart(e[s-1])),n.setValue(o),n.commit(),s++;s<e.length&&(e.length=s,this.clear(n&&n.endNode))}clear(t=this.startNode){((t,e,n=null)=>{for(;e!==n;){const n=e.nextSibling;t.removeChild(e),e=n}})(this.startNode.parentNode,t.nextSibling,this.endNode)}}class S{constructor(t,e,n){if(this.value=void 0,this.__pendingValue=void 0,2!==n.length||""!==n[0]||""!==n[1])throw new Error("Boolean attributes can only contain a single expression");this.element=t,this.name=e,this.strings=n}setValue(t){this.__pendingValue=t}commit(){for(;l(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=a,t(this)}if(this.__pendingValue===a)return;const t=!!this.__pendingValue;this.value!==t&&(t?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=t),this.__pendingValue=a}}class V extends x{constructor(t,e,n){super(t,e,n),this.single=2===n.length&&""===n[0]&&""===n[1]}_createPart(){return new T(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class T extends N{}let O=!1;(()=>{try{const t={get capture(){return O=!0,!1}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){}})();class ${constructor(t,e,n){this.value=void 0,this.__pendingValue=void 0,this.element=t,this.eventName=e,this.eventContext=n,this.__boundHandleEvent=t=>this.handleEvent(t)}setValue(t){this.__pendingValue=t}commit(){for(;l(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=a,t(this)}if(this.__pendingValue===a)return;const t=this.__pendingValue,e=this.value,n=null==t||null!=e&&(t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive),s=null!=t&&(null==e||n);n&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),s&&(this.__options=j(t),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=t,this.__pendingValue=a}handleEvent(t){"function"==typeof this.value?this.value.call(this.eventContext||this.element,t):this.value.handleEvent(t)}}const j=t=>t&&(O?{capture:t.capture,passive:t.passive,once:t.once}:t.capture);function A(t){return t.map((t=>M(t))).join("")}function L(t){for(var e in t)null==t[e]?delete t[e]:"object"==typeof t[e]&&L(t[e])}function M(t){if(!t)return"";if(t instanceof y)return t.toString();if(L(t),Array.isArray(t))return A(t);if("string"==typeof t)return t.startsWith("_html:")?t.substring(6):t;if(t.tag){const e=t.props?function(t){return Object.keys(t).map((e=>{return` ${"className"===e?"class":e}="${n=t[e],"object"==typeof n?Object.keys(n).map((t=>`${t}:${n[t]}`)).join(";"):n.toString()}"`;var n})).join("")}(t.props):"",n=t.children?A(t.children):"";return`<${t.tag}${e}>${n}</${t.tag}>`}return"object"==typeof t?JSON.stringify(t):void 0}new class{handleAttributeExpressions(t,e,n,s){const o=e[0];return"."===o?new V(t,e.slice(1),n).parts:"@"===o?[new $(t,e.slice(1),s.eventContext)]:"?"===o?[new S(t,e.slice(1),n)]:new x(t,e,n).parts}handleTextExpression(t){return new E(t)}},new Map,new WeakMap,"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.4.1");const k=M;let C;function I(t){C=window.open("",t),C.document.write(`<html>\n  <title>AppRun Analyzer | ${document.location.href}</title>\n  <style>\n    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" }\n  </style>\n  <body><pre>`)}function P(t){C.document.write(t+"\n")}function R(){C.document.write("</pre>\n  </body>\n  </html>"),C.document.close()}app.debug=!0;const H=t=>{P(`import ${t.constructor.name} from '../src/${t.constructor.name}'`),P(`describe('${t.constructor.name}', ()=>{`),t._actions.forEach((e=>{"."!==e.name&&(P(`  it ('should handle event: ${e.name}', (done)=>{`),P(`    const component = new ${t.constructor.name}().mount();`),P(`    component.run('${e.name}');`),P("    setTimeout(() => {"),P("      //expect(?).toHaveBeenCalled();"),P("      //expect(component.state).toBe(?);"),P("    done();"),P("  })"))})),P("});")};let B=!1,F=[];app.on("debug",(t=>{B&&t.vdom&&(F.push(t),console.log(`* ${F.length} state(s) recorded.`))}));var W;function D(t){const e=window.open("","_apprun_debug","toolbar=0");e.document.write(`<html>\n  <title>AppRun Analyzer | ${document.location.href}</title>\n  <style>\n    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" }\n    li { margin-left: 80px; }\n  </style>\n  <body>\n  <div id="main">${t}</div>\n  <\/script>\n  </body>\n  </html>`),e.document.close()}o.debug=!0,window["_apprun-help"]=["",()=>{Object.keys(window).forEach((t=>{t.startsWith("_apprun-")&&("_apprun-help"===t?console.log("AppRun Commands:"):console.log(`* ${t.substring(8)}: ${window[t][0]}`))}))}];const U=()=>{const t={components:{}};o.run("get-components",t);const{components:e}=t;return e};let X=Number(null===(W=null===window||void 0===window?void 0:window.localStorage)||void 0===W?void 0:W.getItem("__apprun_debugging__"))||0;if(o.on("debug",(t=>{1&X&&t.event&&console.log(t),2&X&&t.vdom&&console.log(t)})),window["_apprun-components"]=["components [print]",t=>{(t=>{const e=U(),n=[];if(e instanceof Map)for(let[t,s]of e){const e="string"==typeof t?document.getElementById(t):t;n.push({element:e,comps:s})}else Object.keys(e).forEach((t=>{const s="string"==typeof t?document.getElementById(t):t;n.push({element:s,comps:e[t]})}));if(t){const t=(t=>{const e=({events:t})=>o.h("ul",null,t&&t.filter((t=>"."!==t.name)).map((t=>o.h("li",null,t.name)))),n=({components:t})=>o.h("ul",null,t.map((t=>o.h("li",null,o.h("div",null,t.constructor.name),o.h(e,{events:t._actions})))));return o.h("ul",null,t.map((({element:t,comps:e})=>o.h("li",null,o.h("div",null,(t=>o.h("div",null,t.tagName.toLowerCase(),t.id?"#"+t.id:""," ",t.className&&t.className.split(" ").map((t=>"."+t)).join()))(t)),o.h(n,{components:e})))))})(n);D(k(t))}else n.forEach((({element:t,comps:e})=>console.log(t,e)))})("print"===t)}],window["_apprun-events"]=["events [print]",t=>{(t=>{const e=o._events,n={},s=U(),i=t=>t._actions.forEach((e=>{n[e.name]=n[e.name]||[],n[e.name].push(t)}));if(s instanceof Map)for(let[t,e]of s)e.forEach(i);else Object.keys(s).forEach((t=>s[t].forEach(i)));const l=[];if(Object.keys(n).forEach((t=>{l.push({event:t,components:n[t],global:!!e[t]})})),l.sort(((t,e)=>t.event>e.event?1:-1)).map((t=>t.event)),t){const t=(t=>{const e=({components:t})=>o.h("ul",null,t.map((t=>o.h("li",null,o.h("div",null,t.constructor.name))))),n=({events:t,global:n})=>o.h("ul",null,t&&t.filter((t=>t.global===n&&"."!==t.event)).map((({event:t,components:n})=>o.h("li",null,o.h("div",null,t),o.h(e,{components:n})))));return o.h("div",null,o.h("div",null,"GLOBAL EVENTS"),o.h(n,{events:t,global:!0}),o.h("div",null,"LOCAL EVENTS"),o.h(n,{events:t,global:!1}))})(l);D(k(t))}else console.log("=== GLOBAL EVENTS ==="),l.filter((t=>t.global&&"."!==t.event)).forEach((({event:t,components:e})=>console.log({event:t},e))),console.log("=== LOCAL EVENTS ==="),l.filter((t=>!t.global&&"."!==t.event)).forEach((({event:t,components:e})=>console.log({event:t},e)))})("print"===t)}],window["_apprun-log"]=["log [event|view] on|off",(t,e)=>{var n;"on"===t?X=3:"off"===t?X=0:"event"===t?"on"===e?X|=1:"off"===e&&(X&=-2):"view"===t&&("on"===e?X|=2:"off"===e&&(X&=-3)),console.log(`* log ${t} ${e||""}`),null===(n=null===window||void 0===window?void 0:window.localStorage)||void 0===n||n.setItem("__apprun_debugging__",`${X}`)}],window["_apprun-create-event-tests"]=["create-event-tests",()=>(()=>{const t={components:{}};app.run("get-components",t);const{components:e}=t;if(I(""),e instanceof Map)for(let[t,n]of e)n.forEach(H);else Object.keys(e).forEach((t=>{e[t].forEach(H)}));R()})()],window["_apprun-create-state-tests"]=["create-state-tests <start|stop>",t=>{var e;"start"===(e=t)?(F=[],B=!0,console.log("* State logging started.")):"stop"===e?(0!==F.length?(I(""),F.forEach(((t,e)=>{P(`  it ('view snapshot: #${e+1}', ()=>{`),P(`    const component = new ${t.component.constructor.name}()`),P(`    const state = ${JSON.stringify(t.state,void 0,2)};`),P("    const vdom = component['view'](state);"),P("    expect(JSON.stringify(vdom)).toMatchSnapshot();"),P("  })")})),R()):console.log("* No state recorded."),B=!1,F=[],console.log("* State logging stopped.")):console.log("create-state-tests <start|stop>")}],window._apprun=t=>{const[e,...n]=t[0].split(" ").filter((t=>!!t)),s=window[`_apprun-${e}`];s?s[1](...n):window["_apprun-help"][1]()},console.info('AppRun DevTools 2.27: type "_apprun `help`" to list all available commands.'),window.__REDUX_DEVTOOLS_EXTENSION__){let t=!1;const e=window.__REDUX_DEVTOOLS_EXTENSION__.connect();if(e){const n=location.hash||"#";e.send(n,"");const s=[{component:null,state:""}];console.info("Connected to the Redux DevTools"),e.subscribe((e=>{if("START"===e.type)t=!0;else if("STOP"===e.type)t=!1;else if("DISPATCH"===e.type){const t=e.payload.index;if(0===t)o.run(n);else{const{component:e,state:n}=s[t];null==e||e.setState(n)}}}));const i=(t,n,o)=>{null!=o&&(s.push({component:t,state:o}),e.send(n,o))};o.on("debug",(e=>{if(t&&e.event){const t=e.newState,n={type:e.event,payload:e.p},s=e.component;t instanceof Promise?t.then((t=>i(s,n,t))):i(s,n,t)}}))}}return e})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.apprun=t():e.apprun=t()}(this,(function(){return(()=>{"use strict";var e={};e.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),e.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var t={};e.r(t);let n;const o="object"==typeof self&&self.self===self&&self||"object"==typeof e.g&&e.g.global===e.g&&e.g;o.app&&o._AppRunVersions?n=o.app:(n=new class{constructor(){this._events={}}on(e,t,n={}){this._events[e]=this._events[e]||[],this._events[e].push({fn:t,options:n})}off(e,t){const n=this._events[e]||[];this._events[e]=n.filter((e=>e.fn!==t))}find(e){return this._events[e]}run(e,...t){const n=this.getSubscribers(e,this._events);return console.assert(n&&n.length>0,"No subscriber for event: "+e),n.forEach((n=>{const{fn:o,options:s}=n;return s.delay?this.delay(e,o,t,s):Object.keys(s).length>0?o.apply(this,[...t,s]):o.apply(this,t),!n.options.once})),n.length}once(e,t,n={}){this.on(e,t,Object.assign(Object.assign({},n),{once:!0}))}delay(e,t,n,o){o._t&&clearTimeout(o._t),o._t=setTimeout((()=>{clearTimeout(o._t),Object.keys(o).length>0?t.apply(this,[...n,o]):t.apply(this,n)}),o.delay)}query(e,...t){const n=this.getSubscribers(e,this._events);console.assert(n&&n.length>0,"No subscriber for event: "+e);const o=n.map((e=>{const{fn:n,options:o}=e;return Object.keys(o).length>0?n.apply(this,[...t,o]):n.apply(this,t)}));return Promise.all(o)}getSubscribers(e,t){const n=t[e]||[];return t[e]=n.filter((e=>!e.options.once)),Object.keys(t).filter((t=>t.endsWith("*")&&e.startsWith(t.replace("*","")))).sort(((e,t)=>t.length-e.length)).forEach((o=>n.push(...t[o].map((t=>Object.assign(Object.assign({},t),{options:Object.assign(Object.assign({},t.options),{event:e})})))))),n}},o.app=n,o._AppRunVersions="AppRun-3");const s=n;function l(e){return e.map((e=>i(e))).join("")}function c(e){for(var t in e)null==e[t]?delete e[t]:"object"==typeof e[t]&&c(e[t])}function i(e){if(!e)return"";if("_$litType$"in e)return e.toString();if(c(e),Array.isArray(e))return l(e);if("string"==typeof e)return e.startsWith("_html:")?e.substring(6):e;if(e.tag){const t=e.props?function(e){return Object.keys(e).map((t=>{return` ${"className"===t?"class":t}="${n=e[t],"object"==typeof n?Object.keys(n).map((e=>`${e}:${n[e]}`)).join(";"):n.toString()}"`;var n})).join("")}(e.props):"",n=e.children?l(e.children):"";return`<${e.tag}${t}>${n}</${e.tag}>`}return"object"==typeof e?JSON.stringify(e):void 0}const r=i;let a;function p(e){a=window.open("",e),a.document.write(`<html>\n  <title>AppRun Analyzer | ${document.location.href}</title>\n  <style>\n    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" }\n  </style>\n  <body><pre>`)}function u(e){a.document.write(e+"\n")}function f(){a.document.write("</pre>\n  </body>\n  </html>"),a.document.close()}app.debug=!0;const d=e=>{u(`import ${e.constructor.name} from '../src/${e.constructor.name}'`),u(`describe('${e.constructor.name}', ()=>{`),e._actions.forEach((t=>{"."!==t.name&&(u(`  it ('should handle event: ${t.name}', (done)=>{`),u(`    const component = new ${e.constructor.name}().mount();`),u(`    component.run('${t.name}');`),u("    setTimeout(() => {"),u("      //expect(?).toHaveBeenCalled();"),u("      //expect(component.state).toBe(?);"),u("    done();"),u("  })"))})),u("});")};let m=!1,h=[];app.on("debug",(e=>{m&&e.vdom&&(h.push(e),console.log(`* ${h.length} state(s) recorded.`))}));var g;function v(e){const t=window.open("","_apprun_debug","toolbar=0");t.document.write(`<html>\n  <title>AppRun Analyzer | ${document.location.href}</title>\n  <style>\n    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" }\n    li { margin-left: 80px; }\n  </style>\n  <body>\n  <div id="main">${e}</div>\n  <\/script>\n  </body>\n  </html>`),t.document.close()}s.debug=!0,window["_apprun-help"]=["",()=>{Object.keys(window).forEach((e=>{e.startsWith("_apprun-")&&("_apprun-help"===e?console.log("AppRun Commands:"):console.log(`* ${e.substring(8)}: ${window[e][0]}`))}))}];const y=()=>{const e={components:{}};s.run("get-components",e);const{components:t}=e;return t};let b=Number(null===(g=null===window||void 0===window?void 0:window.localStorage)||void 0===g?void 0:g.getItem("__apprun_debugging__"))||0;if(s.on("debug",(e=>{1&b&&e.event&&console.log(e),2&b&&e.vdom&&console.log(e)})),window["_apprun-components"]=["components [print]",e=>{(e=>{const t=y(),n=[];if(t instanceof Map)for(let[e,o]of t){const t="string"==typeof e?document.getElementById(e):e;n.push({element:t,comps:o})}else Object.keys(t).forEach((e=>{const o="string"==typeof e?document.getElementById(e):e;n.push({element:o,comps:t[e]})}));if(e){const e=(e=>{const t=({events:e})=>s.h("ul",null,e&&e.filter((e=>"."!==e.name)).map((e=>s.h("li",null,e.name)))),n=({components:e})=>s.h("ul",null,e.map((e=>s.h("li",null,s.h("div",null,e.constructor.name),s.h(t,{events:e._actions})))));return s.h("ul",null,e.map((({element:e,comps:t})=>s.h("li",null,s.h("div",null,(e=>s.h("div",null,e.tagName.toLowerCase(),e.id?"#"+e.id:""," ",e.className&&e.className.split(" ").map((e=>"."+e)).join()))(e)),s.h(n,{components:t})))))})(n);v(r(e))}else n.forEach((({element:e,comps:t})=>console.log(e,t)))})("print"===e)}],window["_apprun-events"]=["events [print]",e=>{(e=>{const t=s._events,n={},o=y(),l=e=>e._actions.forEach((t=>{n[t.name]=n[t.name]||[],n[t.name].push(e)}));if(o instanceof Map)for(let[e,t]of o)t.forEach(l);else Object.keys(o).forEach((e=>o[e].forEach(l)));const c=[];if(Object.keys(n).forEach((e=>{c.push({event:e,components:n[e],global:!!t[e]})})),c.sort(((e,t)=>e.event>t.event?1:-1)).map((e=>e.event)),e){const e=(e=>{const t=({components:e})=>s.h("ul",null,e.map((e=>s.h("li",null,s.h("div",null,e.constructor.name))))),n=({events:e,global:n})=>s.h("ul",null,e&&e.filter((e=>e.global===n&&"."!==e.event)).map((({event:e,components:n})=>s.h("li",null,s.h("div",null,e),s.h(t,{components:n})))));return s.h("div",null,s.h("div",null,"GLOBAL EVENTS"),s.h(n,{events:e,global:!0}),s.h("div",null,"LOCAL EVENTS"),s.h(n,{events:e,global:!1}))})(c);v(r(e))}else console.log("=== GLOBAL EVENTS ==="),c.filter((e=>e.global&&"."!==e.event)).forEach((({event:e,components:t})=>console.log({event:e},t))),console.log("=== LOCAL EVENTS ==="),c.filter((e=>!e.global&&"."!==e.event)).forEach((({event:e,components:t})=>console.log({event:e},t)))})("print"===e)}],window["_apprun-log"]=["log [event|view] on|off",(e,t)=>{var n;"on"===e?b=3:"off"===e?b=0:"event"===e?"on"===t?b|=1:"off"===t&&(b&=-2):"view"===e&&("on"===t?b|=2:"off"===t&&(b&=-3)),console.log(`* log ${e} ${t||""}`),null===(n=null===window||void 0===window?void 0:window.localStorage)||void 0===n||n.setItem("__apprun_debugging__",`${b}`)}],window["_apprun-create-event-tests"]=["create-event-tests",()=>(()=>{const e={components:{}};app.run("get-components",e);const{components:t}=e;if(p(""),t instanceof Map)for(let[e,n]of t)n.forEach(d);else Object.keys(t).forEach((e=>{t[e].forEach(d)}));f()})()],window["_apprun-create-state-tests"]=["create-state-tests <start|stop>",e=>{var t;"start"===(t=e)?(h=[],m=!0,console.log("* State logging started.")):"stop"===t?(0!==h.length?(p(""),h.forEach(((e,t)=>{u(`  it ('view snapshot: #${t+1}', ()=>{`),u(`    const component = new ${e.component.constructor.name}()`),u(`    const state = ${JSON.stringify(e.state,void 0,2)};`),u("    const vdom = component['view'](state);"),u("    expect(JSON.stringify(vdom)).toMatchSnapshot();"),u("  })")})),f()):console.log("* No state recorded."),m=!1,h=[],console.log("* State logging stopped.")):console.log("create-state-tests <start|stop>")}],window._apprun=e=>{const[t,...n]=e[0].split(" ").filter((e=>!!e)),o=window[`_apprun-${t}`];o?o[1](...n):window["_apprun-help"][1]()},console.info('AppRun DevTools 2.27: type "_apprun `help`" to list all available commands.'),window.__REDUX_DEVTOOLS_EXTENSION__){let e=!1;const t=window.__REDUX_DEVTOOLS_EXTENSION__.connect();if(t){const n=location.hash||"#";t.send(n,"");const o=[{component:null,state:""}];console.info("Connected to the Redux DevTools"),t.subscribe((t=>{if("START"===t.type)e=!0;else if("STOP"===t.type)e=!1;else if("DISPATCH"===t.type){const e=t.payload.index;if(0===e)s.run(n);else{const{component:t,state:n}=o[e];null==t||t.setState(n)}}}));const l=(e,n,s)=>{null!=s&&(o.push({component:e,state:s}),t.send(n,s))};s.on("debug",(t=>{if(e&&t.event){const e=t.newState,n={type:t.event,payload:t.p},o=t.component;e instanceof Promise?e.then((e=>l(o,n,e))):l(o,n,e)}}))}}return t})()}));
 //# sourceMappingURL=apprun-dev-tools.js.map