apprun 3.28.6 → 3.28.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apprun",
-  "version": "3.28.6",
+  "version": "3.28.9",
   "description": "JavaScript library that has Elm inspired architecture, event pub-sub and components",
   "main": "dist/apprun.js",
   "module": "dist/apprun.esm.js",
@@ -37,30 +37,28 @@
     "url": "https://github.com/yysun/apprun/issues"
   },
   "homepage": "https://github.com/yysun/apprun#readme",
-  "dependencies": {
-    "commander": "^7.2.0"
-  },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@types/jest": "^26.0.23",
-    "jest": "^26.6.3",
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@types/jest": "^27.4.1",
+    "jest": "^27.5.1",
     "json-loader": "^0.5.7",
-    "lit-html": "1.4.1",
-    "marked": "^2.0.6",
-    "rollup": "^2.50.4",
-    "rollup-plugin-filesize": "^9.1.1",
+    "lit-html": "^2.2.0",
+    "marked": "^4.0.12",
+    "rollup": "^2.68.0",
+    "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "^26.5.6",
-    "ts-loader": "^9.2.2",
-    "typescript": "^4.3.2",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2"
+    "ts-jest": "^27.1.3",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.5",
+    "webpack": "^5.69.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "transformIgnorePatterns": [
       "/node_modules/(?!lit-html).+\\.js"
     ],
@@ -81,6 +79,7 @@
         "diagnostics": true,
         "tsconfig": "tsconfig.jest.json"
       }
-    }
+    },
+    "testRunner": "jest-jasmine2"
   }
 }

package/src/apprun.ts

@@ -27,7 +27,7 @@ app.webComponent = webComponent;
 
 app.start = <T, E = any>(element?: Element, model?: T, view?: View<T>, update?: Update<T, E>,
   options?: AppStartOptions<T>): Component<T, E> => {
-  const opts = { ...options, render: true, global_event: true };
+  const opts = { render: true, global_event: true, ...options };
   const component = new Component<T, E>(model, view, update);
   if (options && options.rendered) component.rendered = options.rendered;
   component.mount(element, opts);

package/src/component.ts

@@ -127,7 +127,7 @@ export class Component<T = any, E = any> {
   }
 
   start = (element = null, options?: MountOptions): Component<T, E> => {
-    return this.mount(element, { ...options, render: true });
+    return this.mount(element, { render: true, ...options });
   }
 
   public mount(element = null, options?: MountOptions): Component<T, E> {

package/src/vdom-lit-html.ts

@@ -1,38 +1,61 @@
 import { createElement, updateElement, Fragment } from './vdom-my';
-import { html, render, TemplateResult, svg, directive, EventPart, parts } from 'lit-html';
-import { unsafeHTML } from "lit-html/directives/unsafe-html";
+
+
+import { render, svg, html, noChange, nothing } from 'lit-html';
+import { directive, Directive, Part, PartInfo, PartType, EventPart } from 'lit-html/directive.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 function _render(element, vdom, parent?) {
+  if (!vdom) return;
   if (typeof vdom === 'string') {
+    if (!element['_$litPart$']) element.replaceChildren();
     render(html`${unsafeHTML(vdom)}`, element);
-  } else if (vdom instanceof TemplateResult) {
+  } else if ('_$litType$' in vdom) {
+    if (!element['_$litPart$']) element.replaceChildren();
     render(vdom, element);
   } else {
     updateElement(element, vdom, parent);
-    parts.delete(element);
+    element['_$litPart$'] = undefined;
   }
 }
 
-const run = directive((event, ...args) => (part) => {
-  if (!(part instanceof EventPart)) {
-    throw new Error('${run} can only be used in event handlers');
+export class RunDirective extends Directive {
+  // State stored in class field
+  value: number | undefined;
+  constructor(partInfo: PartInfo) {
+    super(partInfo);
+    // When necessary, validate part in constructor using `part.type`
+    if (partInfo.type !== PartType.EVENT) {
+      throw new Error('${run} can only be used in event handlers');
+    }
   }
-  let { element, eventName } = part;
-  const getComponent = () => {
-    let component = element['_component'];
-    while (!component && element) {
-      element = element.parentElement;
-      component = element && element['_component'];
+  // Optional: override update to perform any direct DOM manipulation
+  update(part: Part, params) {
+    /* Any imperative updates to DOM/parts would go here */
+
+    let { element, name } = part as EventPart;
+    const getComponent = () => {
+      let component = element['_component'];
+      while (!component && element) {
+        element = element.parentElement;
+        component = element && element['_component'];
+      }
+      console.assert(!!component, 'Component not found.');
+      return component;
+    }
+    const [event, ...args] = params;
+    if (typeof event === 'string') {
+      element[`on${name}`] = e => getComponent().run(event, ...args, e);
+    } else if (typeof event === 'function') {
+      element[`on${name}`] = e => getComponent().setState(event(getComponent().state, ...args, e));
     }
-    console.assert(!!component, 'Component not found.');
-    return component;
+    return this.render();
   }
-  if (typeof event === 'string') {
-    element[`on${eventName}`] = e => getComponent().run(event, ...args, e);
-  } else if (typeof event === 'function') {
-    element[`on${eventName}`] = e => getComponent().setState(event(getComponent().state, ...args, e));
+  render() {
+    return noChange;
   }
-});
+}
 
+const run = directive(RunDirective) as any;
 export { createElement, Fragment, html, svg, _render as render, run };
 

package/src/vdom-to-html.tsx

@@ -29,9 +29,9 @@ function clean(obj) {
   }
 }
 
-function toHTML (vdom: VDOM) {
+function toHTML (vdom) {
   if (!vdom) return '';
-  if (vdom instanceof TemplateResult) {
+  if ('_$litType$' in vdom) {
     return vdom.toString();
   }
   clean(vdom);

package/webpack.config.js

@@ -24,7 +24,8 @@ module.exports = {
     ]
   },
   devServer: {
-    open: true
+    open: true,
+    static: path.join(__dirname),
   },
   devtool: 'source-map'
 }

package/cli-templates/Layout.ts_

@@ -1,35 +0,0 @@
-
-import app from 'apprun';
-
-app.on('//', (route) => {
-  const menus = document.querySelectorAll('.navbar-nav li');
-  for (let i = 0; i < menus.length; ++i) {menus[i].classList.remove('active');}
-  const item = document.querySelector(`[href='${route}']`);
-  item && item.parentElement.classList.add('active');
-});
-
-export default () => <div class="container">
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <a class="navbar-brand" href="#">Project Name</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-      aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item active">
-          <a class="nav-link" href="#Home">Home
-            <span class="sr-only">(current)</span>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#About">About</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#Contact">Contact</a>
-        </li>
-      </ul>
-    </div>
-  </nav>
-  <div class="container" id="my-app"></div>
-</div>;

package/cli-templates/_build.js

@@ -1,27 +0,0 @@
-#!/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

@@ -1,40 +0,0 @@
-/* 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/_gitignore

@@ -1,6 +0,0 @@
-.DS_Store
-Thumbs.db
-*.log
-node_modules
-coverage
-.cache

package/cli-templates/component.ts_

@@ -1,14 +0,0 @@
-import { app, Component } from 'apprun';
-
-export default class #nameComponent extends Component {
-  state = '#name';
-
-  view = state => <div>
-    <h1>{state}</h1>
-  </div>;
-
-  update = {
-    '##name': state => state,
-  };
-}
-

package/cli-templates/index.html

@@ -1,10 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>AppRun App</title>
-</head>
-<body>
-  <script type="module" src="./dist/main.js"></script>
-</body>
-</html>

package/cli-templates/jest.config.js

@@ -1,19 +0,0 @@
-module.exports = {
-  "transform": {
-    "^.+\\.tsx?$": "ts-jest"
-  },
-  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
-  "moduleFileExtensions": [
-    "ts",
-    "tsx",
-    "js",
-    "jsx",
-    "json",
-    "node"
-  ],
-  "globals": {
-    "ts-jest": {
-      "diagnostics": true
-    }
-  },
-}

package/cli-templates/karma.conf.js

@@ -1,24 +0,0 @@
-var webpackConfig = require('./webpack.config');
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ["jasmine"],
-    files: [
-      { pattern: "tests/*.spec.*" }
-    ],
-    exclude: [
-    ],
-    preprocessors: {
-      'tests/*.spec.*': ['webpack'],
-    },
-    webpack: webpackConfig,
-    reporters: ["progress"],
-    colors: true,
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-    browsers: ['Chrome'],
-    mime: {
-      'text/x-typescript': ['ts', 'tsx']
-    }
-  })
-}

package/cli-templates/main.ts_

@@ -1,13 +0,0 @@
-import app from 'apprun';
-
-const state = 'Hello world - AppRun !';
-
-const view = (state) => <div>
-  <h1>{state}</h1>
-</div>;
-
-const update = {
-
-};
-
-app.start(document.body, state, view, update);

package/cli-templates/readme.md

@@ -1,7 +0,0 @@
-##
-
-* Use _npm start_ to start the dev server
-* Use _npm test_ to run unit tests
-* Use _npm run build_ to build for production
-
-This is an application built with [AppRun](https://github.com/yysun/apprun).

package/cli-templates/spa_index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>AppRun SPA</title>
-  <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css">
-  <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.slim.min.js"></script>
-  <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 type="module" src="./dist/main.js"></script>
-</body>
-</html>

package/cli-templates/spa_main.ts_

@@ -1,12 +0,0 @@
-import app from 'apprun';
-import Home from './Home';
-import About from './About';
-import Contact from './Contact';
-import Layout from './Layout';
-
-app.render(document.body, <Layout />);
-
-const element = 'my-app';
-new Home().start(element);
-new About().mount(element);
-new Contact().mount(element);

package/cli-templates/spec.ts_

@@ -1,12 +0,0 @@
-import app from 'apprun';
-import #name from '../src/#name';
-
-describe('component', () => {
-  it('should render state upon route event', () => {
-    const element = document.createElement('div');
-    const component = new #name().mount(element);
-    app.run('##name');
-    expect(element.textContent).toBe('#name');
-    expect(component.state).toBe('#name');
-  });
-});

package/cli-templates/stories.js_

@@ -1,47 +0,0 @@
-import #name from '../#name';
-
-export default {
-  title: '#name',
-  argTypes: {
-    event: {
-      name: 'event',
-      type: { name: 'string', required: false },
-      description: 'event',
-      control: {
-        type: 'text'
-      }
-    },
-
-    route: {
-      name: 'route',
-      type: { name: 'string', required: false },
-      description: 'route',
-      control: {
-        type: 'text'
-      }
-    }
-  },
-};
-
-export const #name_Event = ({ event }) => {
-  const div = document.createElement('div');
-  const component = new #name().mount(div);
-  const e = JSON.parse(event);
-  const [name, ...params] = e;
-  component.run(name, ...params);
-  return div;
-};
-#name_Event.args = {
-  event: '["."]',
-};
-
-export const #name_Route = ({ route }) => {
-  const div = document.createElement('div');
-  new #name().mount(div);
-  app.route(route);
-  return div;
-};
-
-#name_Route.args = {
-  route: '##name',
-};

package/cli-templates/tsconfig.es5.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "jsx": "react",
-    "jsxFactory": "app.h",
-    "jsxFragmentFactory": "app.Fragment",
-    "lib": ["dom", "es2015", "es5"],
-    "experimentalDecorators": true,
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "outDir": "dist"
-  }
-}

package/cli-templates/tsconfig.es6.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2015",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "jsx": "react",
-    "jsxFactory": "app.h",
-    "jsxFragmentFactory": "app.Fragment",
-    "lib": ["dom", "es2015", "es5"],
-    "experimentalDecorators": true,
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "outDir": "dist"
-  }
-}

package/cli-templates/webpack.config.js

@@ -1,23 +0,0 @@
-const path = require('path');
-module.exports = {
-  entry: {
-    'dist/main': './src/main.tsx',
-  },
-  output: {
-    filename: '[name].js',
-    path: path.resolve(__dirname)
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js']
-  },
-  module: {
-    rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader' },
-      { test: /\.js$/, use: ["source-map-loader"], enforce: "pre" }
-    ]
-  },
-  devServer: {
-    open: true
-  },
-  devtool: 'source-map'
-}

package/index-apprun-play.html

@@ -1,46 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>AppRun Play</title>
-  <link rel="stylesheet" href="demo/lib/codemirror.css">
-  <script src="demo/lib/codemirror.js"></script>
-  <script src="demo/mode/javascript/javascript.js"></script>
-  <script src="demo/mode/xml/xml.js"></script>
-  <script src="demo/mode/jsx/jsx.js"></script>
-  <script src="dist/apprun-play.js"></script>
-</head>
-<body>
-  <textarea style="width:100%; height:300px">
-      const state = 0;
-      const view = state => {
-        return `<div>
-          <h1>${state}</h1>
-          <button onclick='app.run("-1")'>-1</button>
-          <button onclick='app.run("+1")'>+1</button>
-        </div>`;
-      };
-      const update = {
-        '+1': state => state + 1,
-        '-1': state => state - 1
-      };
-      app.start(document.body, state, view, update);
-    </textarea>
-<apprun-play></apprun-play>
-
-<textarea>
-<html>
-<body>
-<script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
-<script>
-  const view = state => `<div>${state}</div>`;
-  app.start(document.body, 'hello world', view);
-</script>
-</body>
-</html>
-</textarea>
-<p>
-  <apprun-play></apprun-play>
-</p>
-</body>
-</html>