apprun 3.28.7 → 3.28.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apprun",
-  "version": "3.28.7",
+  "version": "3.28.8",
   "description": "JavaScript library that has Elm inspired architecture, event pub-sub and components",
   "main": "dist/apprun.js",
   "module": "dist/apprun.esm.js",
@@ -41,26 +41,27 @@
     "commander": "^7.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^19.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.2",
-    "@types/jest": "^26.0.24",
-    "jest": "^27.0.6",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@types/jest": "^27.4.0",
+    "jest": "^27.5.1",
     "json-loader": "^0.5.7",
-    "lit-html": "1.4.1",
-    "marked": "^2.1.3",
-    "rollup": "^2.53.2",
-    "rollup-plugin-filesize": "^9.1.1",
+    "lit-html": "^2.1.3",
+    "marked": "^4.0.12",
+    "rollup": "^2.67.2",
+    "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": "^27.0.3",
-    "ts-loader": "^9.2.3",
-    "typescript": "^4.3.5",
-    "webpack": "^5.45.1",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2"
+    "ts-jest": "^27.1.3",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.5",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "transformIgnorePatterns": [
       "/node_modules/(?!lit-html).+\\.js"
     ],
@@ -81,6 +82,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,60 @@
 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') {
     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'
 }