apprun 3.28.12 → 3.28.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apprun",
-  "version": "3.28.12",
+  "version": "3.28.15",
   "description": "JavaScript library that has Elm inspired architecture, event pub-sub and components",
   "main": "dist/apprun.js",
   "module": "dist/apprun.esm.js",

package/src/app.ts

@@ -9,6 +9,7 @@ export class App {
   public render;
   public Fragment;
   public webComponent;
+  public safeHTML;
 
   constructor() {
     this._events = {};

package/src/apprun-dev-tools.tsx

@@ -136,12 +136,12 @@ const _components = (print?) => {
 
   if (components instanceof Map) {
     for (let [key, comps] of components) {
-      const element = typeof key === 'string' ? document.getElementById(key) : key;
+      const element = typeof key === 'string' ? document.getElementById(key) || document.querySelector(key): key;
       data.push({ element, comps });
     }
   } else {
     Object.keys(components).forEach(el => {
-      const element = typeof el === 'string' ? document.getElementById(el) : el;
+      const element = typeof el === 'string' ? document.getElementById(el) || document.querySelector(el): el;
       data.push({ element, comps: components[el] });
     });
   }

package/src/apprun.ts

@@ -14,18 +14,20 @@ export interface IApp {
   run(name: string, ...args: any[]): number;
   h(tag: string | Function, props, ...children): VNode | VNode[];
   createElement(tag: string | Function, props, ...children): VNode | VNode[];
-  render(element: HTMLElement, node: VNode): void;
+  render(element: Element | string, node: VNode): void;
   Fragment(props, ...children): any[];
   route?: Route;
   webComponent(name: string, componentClass, options?: CustomElementOptions): void;
+  safeHTML(html: string): any[];
 }
 
 app.h = app.createElement = createElement;
 app.render = render;
 app.Fragment = Fragment;
 app.webComponent = webComponent;
+app.safeHTML = safeHTML;
 
-app.start = <T, E = any>(element?: Element, model?: T, view?: View<T>, update?: Update<T, E>,
+app.start = <T, E = any>(element?: Element | string, model?: T, view?: View<T>, update?: Update<T, E>,
   options?: AppStartOptions<T>): Component<T, E> => {
   const opts = { render: true, global_event: true, ...options };
   const component = new Component<T, E>(model, view, update);
@@ -62,6 +64,7 @@ if (typeof window === 'object') {
   window['React'] = app;
   window['on'] = on;
   window['customElement'] = customElement;
+  window['safeHTML'] = safeHTML;
 }
 
 

package/src/component.ts

@@ -40,8 +40,8 @@ export class Component<T = any, E = any> {
 
     if (typeof document !== 'object') return;
 
-    const el = (typeof this.element === 'string') ?
-      document.getElementById(this.element) : this.element;
+    const el = (typeof this.element === 'string' && this.element) ?
+      document.getElementById(this.element) || document.querySelector(this.element) : this.element;
 
     if (el) {
       const tracking_attr = '_c';

package/src/vdom-my.ts

@@ -37,22 +37,21 @@ export function createElement(tag: string | Function | [], props?: {}, ...childr
 
 const keyCache = new WeakMap();
 
-export const updateElement = (element: Element, nodes: VDOM, component = {}) => {
+export const updateElement = (element: Element | string, nodes: VDOM, component = {}) => {
   // tslint:disable-next-line
   if (nodes == null || nodes === false) return;
+  const el = (typeof element === 'string' && element) ?
+    document.getElementById(element) || document.querySelector(element) : element;
   nodes = directive(nodes, component);
-  render(element, nodes, component);
+  render(el, nodes, component);
 }
 
 function render(element: Element, nodes: VDOM, parent = {}) {
   // tslint:disable-next-line
   if (nodes == null || nodes === false) return;
-
   nodes = createComponent(nodes, parent);
-
-  const isSvg = element?.nodeName === "SVG";
-
   if (!element) return;
+  const isSvg = element.nodeName === "SVG";
   if (Array.isArray(nodes)) {
     updateChildren(element, nodes, isSvg);
   } else {
@@ -120,7 +119,7 @@ function updateChildren(element, children, isSvg: boolean) {
     }
   }
 
-  let n = element.childNodes.length;
+  let n = element.childNodes?.length || 0;
   while (n > len) {
     element.removeChild(element.lastChild);
     n--;
@@ -138,7 +137,7 @@ 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);
+  return Array.from(div.children);
 }
 
 function createText(node) {