apprun 3.28.9 → 3.28.12

package/esm/vdom.js.map

@@ -1 +1 @@
-{"version":3,"file":"vdom.js","sourceRoot":"","sources":["../src/vdom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACnE,MAAM,UAAU,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,MAAO;IAC3C,aAAa,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;AACvC,CAAC;AACD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"vdom.js","sourceRoot":"","sources":["../src/vdom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,IAAI,MAAM,EAAE,QAAQ,EAAE,CAAC"}

package/esm/web-component.js

@@ -39,22 +39,24 @@ export const customElement = (componentClass, options = {}) => class CustomEleme
                     enumerable: true
                 });
             });
-            const children = this.children ? Array.from(this.children) : [];
-            children.forEach(el => el.parentElement.removeChild(el));
-            this._component = new componentClass(Object.assign(Object.assign({}, props), { children })).mount(this._shadowRoot, opts);
-            // attach props to component
-            this._component._props = props;
-            // expose dispatchEvent
-            this._component.dispatchEvent = this.dispatchEvent.bind(this);
-            if (this._component.mounted) {
-                const new_state = this._component.mounted(props, children, this._component.state);
-                if (typeof new_state !== 'undefined')
-                    this._component.state = new_state;
-            }
-            this.on = this._component.on.bind(this._component);
-            this.run = this._component.run.bind(this._component);
-            if (!(opts.render === false))
-                this._component.run('.');
+            requestAnimationFrame(() => {
+                const children = this.children ? Array.from(this.children) : [];
+                children.forEach(el => el.parentElement.removeChild(el));
+                this._component = new componentClass(Object.assign(Object.assign({}, props), { children })).mount(this._shadowRoot, opts);
+                // attach props to component
+                this._component._props = props;
+                // expose dispatchEvent
+                this._component.dispatchEvent = this.dispatchEvent.bind(this);
+                if (this._component.mounted) {
+                    const new_state = this._component.mounted(props, children, this._component.state);
+                    if (typeof new_state !== 'undefined')
+                        this._component.state = new_state;
+                }
+                this.on = this._component.on.bind(this._component);
+                this.run = this._component.run.bind(this._component);
+                if (!(opts.render === false))
+                    this._component.run('.');
+            });
         }
     }
     disconnectedCallback() {

package/esm/web-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"web-component.js","sourceRoot":"","sources":["../src/web-component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"web-component.js","sourceRoot":"","sources":["../src/web-component.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "apprun",
-  "version": "3.28.9",
+  "version": "3.28.12",
   "description": "JavaScript library that has Elm inspired architecture, event pub-sub and components",
   "main": "dist/apprun.js",
   "module": "dist/apprun.esm.js",
   "types": "apprun.d.ts",
+  "type": "module",
   "bin": {
     "apprun": "apprun-cli.js"
   },
@@ -38,24 +39,24 @@
   },
   "homepage": "https://github.com/yysun/apprun#readme",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@types/jest": "^27.4.1",
     "jest": "^27.5.1",
     "json-loader": "^0.5.7",
-    "lit-html": "^2.2.0",
+    "lit-html": "^2.2.1",
     "marked": "^4.0.12",
-    "rollup": "^2.68.0",
+    "rollup": "^2.70.1",
     "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.1.3",
-    "ts-loader": "^9.2.6",
-    "typescript": "^4.5.5",
-    "webpack": "^5.69.1",
+    "ts-jest": "^27.1.4",
+    "ts-loader": "^9.2.8",
+    "typescript": "^4.6.3",
+    "webpack": "^5.71.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "webpack-dev-server": "^4.8.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/apprun-html.ts

@@ -2,7 +2,7 @@ import app from './apprun'
 export {
   app, Component, View, Action, Update, on, update, event, EventOptions,
   customElement, CustomElementOptions,
-  ROUTER_404_EVENT, ROUTER_EVENT
+  ROUTER_404_EVENT, ROUTER_EVENT, safeHTML
 } from './apprun'
 import { createElement, render, Fragment, html, svg, run } from './vdom-lit-html';
 export { html, svg, render, run }

package/src/apprun.ts

@@ -1,5 +1,5 @@
 import app from './app';
-import { createElement, render, Fragment } from './vdom';
+import { createElement, render, Fragment,safeHTML } from './vdom';
 import { Component } from './component';
 import { VNode, View, Action, Update, EventOptions, ActionOptions, MountOptions, AppStartOptions } from './types';
 import { on, update, customElement } from './decorator';
@@ -50,9 +50,8 @@ if (typeof document === 'object') {
     }
   });
 }
-
 export type StatelessComponent<T = {}> = (args: T) => string | VNode | void;
-export { app, Component, View, Action, Update, on, update, EventOptions, ActionOptions, MountOptions, Fragment }
+export { app, Component, View, Action, Update, on, update, EventOptions, ActionOptions, MountOptions, Fragment, safeHTML }
 export { update as event };
 export { ROUTER_EVENT, ROUTER_404_EVENT };
 export { customElement, CustomElementOptions, AppStartOptions };

package/src/component.ts

@@ -144,7 +144,7 @@ export class Component<T = any, E = any> {
 
     if (options.route) {
       this.update = this.update || {};
-      this.update[options.route] = REFRESH;
+      if (!this.update[options.route]) this.update[options.route] = REFRESH;
     }
 
     this.add_actions();

package/src/directive.ts

@@ -19,15 +19,15 @@ const apply_directive = (key: string, props: {}, tag, component) => {
     const event = props[key];
     key = key.substring(1)
     if (typeof event === 'boolean') {
-      props[key] = e => component.run(key, e);
+      props[key] = e => component.run ? component.run(key, e) : app.run(key, e);
     } else if (typeof event === 'string') {
-      props[key] = e => component.run(event, e);
+      props[key] = e => component.run ? component.run(event, e) : app.run(event, e);
     } else if (typeof event === 'function') {
       props[key] = e => component.setState(event(component.state, e));
     } else if (Array.isArray(event)) {
       const [handler, ...p] = event;
       if (typeof handler === 'string') {
-        props[key] = e => component.run(handler, ...p, e);
+        props[key] = e => component.run ? component.run(handler, ...p, e) : app.run(handler, ...p, e);
       } else if (typeof handler === 'function') {
         props[key] = e => component.setState(handler(component.state, ...p, e));
       }

package/src/vdom-lit-html.ts

@@ -4,6 +4,7 @@ import { createElement, updateElement, Fragment } from './vdom-my';
 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';
+import app from './apprun';
 
 function _render(element, vdom, parent?) {
   if (!vdom) return;
@@ -45,7 +46,10 @@ export class RunDirective extends Directive {
     }
     const [event, ...args] = params;
     if (typeof event === 'string') {
-      element[`on${name}`] = e => getComponent().run(event, ...args, e);
+      element[`on${name}`] = e => {
+        const component = getComponent();
+        component ? component.run(event, ...args, e) : app.run(event, ...args, e)
+      }
     } else if (typeof event === 'function') {
       element[`on${name}`] = e => getComponent().setState(event(getComponent().state, ...args, e));
     }

package/src/vdom-my.ts

@@ -1,4 +1,5 @@
 import { VDOM, VNode } from './types';
+import directive from './directive';
 export type Element = any; //HTMLElement | SVGSVGElement | SVGElement;
 
 export function Fragment(props, ...children): any[] {
@@ -36,10 +37,14 @@ export function createElement(tag: string | Function | [], props?: {}, ...childr
 
 const keyCache = new WeakMap();
 
-export const updateElement = render;
+export const updateElement = (element: Element, nodes: VDOM, component = {}) => {
+  // tslint:disable-next-line
+  if (nodes == null || nodes === false) return;
+  nodes = directive(nodes, component);
+  render(element, nodes, component);
+}
 
-export function render(element: Element, nodes: VDOM, parent = {}) {
-  // console.log('render', element, node);
+function render(element: Element, nodes: VDOM, parent = {}) {
   // tslint:disable-next-line
   if (nodes == null || nodes === false) return;
 
@@ -130,6 +135,12 @@ function updateChildren(element, children, isSvg: boolean) {
   }
 }
 
+export const safeHTML = (html: string) => {
+  const div = document.createElement('section');
+  div.insertAdjacentHTML('afterbegin', html)
+  return Array.from(div.childNodes);
+}
+
 function createText(node) {
   if (node?.indexOf('_html:') === 0) { // ?
     const div = document.createElement('div');

package/src/vdom.ts

@@ -1,7 +1,4 @@
-import { createElement, updateElement, Fragment } from './vdom-my';
-export function render(element, html, parent?) {
-  updateElement(element, html, parent);
-}
-export { createElement, Fragment };
+import { createElement, updateElement, Fragment, safeHTML } from './vdom-my';
+export { createElement, Fragment, updateElement as render, safeHTML };
 
 

package/src/web-component.ts

@@ -59,20 +59,22 @@ export const customElement = (componentClass, options: CustomElementOptions = {}
         });
       })
 
-      const children = this.children ? Array.from(this.children) : [];
-      children.forEach(el => el.parentElement.removeChild(el));
-      this._component = new componentClass({ ...props, children }).mount(this._shadowRoot, opts);
-      // attach props to component
-      this._component._props = props;
-      // expose dispatchEvent
-      this._component.dispatchEvent = this.dispatchEvent.bind(this)
-      if (this._component.mounted) {
-        const new_state = this._component.mounted(props, children, this._component.state);
-        if (typeof new_state !== 'undefined') this._component.state = new_state;
-      }
-      this.on = this._component.on.bind(this._component);
-      this.run = this._component.run.bind(this._component);
-      if (!(opts.render===false)) this._component.run('.');
+      requestAnimationFrame(() => {
+        const children = this.children ? Array.from(this.children) : [];
+        children.forEach(el => el.parentElement.removeChild(el));
+        this._component = new componentClass({ ...props, children }).mount(this._shadowRoot, opts);
+        // attach props to component
+        this._component._props = props;
+        // expose dispatchEvent
+        this._component.dispatchEvent = this.dispatchEvent.bind(this)
+        if (this._component.mounted) {
+          const new_state = this._component.mounted(props, children, this._component.state);
+          if (typeof new_state !== 'undefined') this._component.state = new_state;
+        }
+        this.on = this._component.on.bind(this._component);
+        this.run = this._component.run.bind(this._component);
+        if (!(opts.render === false)) this._component.run('.');
+      });
     }
   }