apprun 4.0.0 → 6.0.0-rc.0

package/src/component.ts

@@ -1,189 +0,0 @@
-
-import app, { App } from './app';
-import { Reflect } from './decorator'
-import { VNode, View, Update } from './types';
-
-const componentCache = {};
-app.on('get-components', o => o.components = componentCache);
-
-export class Component<T=any> {
-  static __isAppRunComponent = true;
-  private _app = new App();
-  private _actions = [];
-  element;
-  private _history = [];
-  private _history_idx = -1;
-  private enable_history;
-  private global_event;
-  public rendered;
-  public mounted;
-
-  private renderState(state: T) {
-    if (!this.view) return;
-    const html = this.view(state);
-
-    app.run('debug', {
-      component: this,
-      state,
-      vdom: html || '[vdom is null - no render]',
-    });
-
-    if (typeof document !== 'object') return;
-
-    const el = (typeof this.element === 'string') ?
-      document.getElementById(this.element) : this.element;
-    if (el) el['_component'] = this;
-    app.render(el, html, this);
-    if (this.rendered) (this.rendered(this.state));
-  }
-
-  public setState(state: T, options: { render: boolean, history: boolean, callback?}
-    = { render: true, history: false}) {
-    if (state instanceof Promise) {
-      // Promise will not be saved or rendered
-      // state will be saved and rendered when promise is resolved
-      state.then(s => {
-        this.setState(s, options)
-      }).catch(err => {
-        console.error(err);
-        throw err;
-      });
-      this.state = state;
-    } else {
-      if (state == null) return;
-      this.state = state;
-      if (options.render !== false) this.renderState(state);
-      if (options.history !== false && this.enable_history) {
-        this._history = [...this._history, state];
-        this._history_idx = this._history.length - 1;
-      }
-      if (typeof options.callback === 'function') options.callback(this.state);
-    }
-  }
-
-  constructor(
-    protected state?: T,
-    protected view?: View<T>,
-    protected update?: Update<T>,
-    protected options?) {
-  }
-
-  start = (element = null,
-    options: { render?: boolean, history?, global_event?: boolean } = { render: true }): Component<T> => {
-    return this.mount(element, { ...options, render: true });
-  }
-
-  public mount(element = null, options?: { render?: boolean, history?, global_event?: boolean}) {
-
-    console.assert(!this.element, 'Component already mounted.')
-    this.options = options = Object.assign(this.options || {}, options);
-    this.element = element;
-    this.global_event = options.global_event;
-    this.enable_history = !!options.history;
-
-    if (this.enable_history) {
-      const prev = () => {
-        this._history_idx --;
-        if (this._history_idx >=0) {
-          this.setState(this._history[this._history_idx], { render: true, history: false });
-        }
-        else {
-          this._history_idx = 0;
-        }
-      };
-
-      const next = () => {
-        this._history_idx ++;
-        if (this._history_idx < this._history.length) {
-          this.setState(this._history[this._history_idx], { render: true, history: false });
-        }
-        else {
-          this._history_idx = this._history.length - 1;
-        }
-      };
-      this.on(options.history.prev || 'history-prev', prev)
-      this.on(options.history.next || 'history-next', next)
-    }
-    this.add_actions();
-    if (this.state === undefined) this.state = this['model'] || {};
-    if (options.render) {
-      this.setState(this.state, { render: true, history: true });
-    } else {
-      this.setState(this.state, { render: false, history: true });
-    }
-
-    componentCache[element] = componentCache[element] || [];
-    componentCache[element].push(this);
-    return this;
-  }
-
-  is_global_event(name: string): boolean {
-    return name && (name.startsWith('#') || name.startsWith('/'));
-  }
-
-  add_action(name: string, action, options: any = {}) {
-    if (!action || typeof action !== 'function') return;
-    this.on(name, (...p) => {
-      const newState = action(this.state, ...p);
-
-      app.run('debug', {
-        component: this,
-        'event': name,
-        e: p,
-        state: this.state,
-        newState,
-        options
-      })
-
-      this.setState(newState, options)
-    }, options);
-  }
-
-  add_actions() {
-    const actions = this.update || {};
-    Reflect.getMetadataKeys(this).forEach(key => {
-      if (key.startsWith('apprun-update:')) {
-        const meta = Reflect.getMetadata(key, this)
-        actions[meta.name] = [this[meta.key].bind(this), meta.options];
-      }
-    })
-    const all = {};
-    Object.keys(actions).forEach(name => {
-      const action = actions[name];
-      if (typeof action === 'function' || Array.isArray(action)) {
-        name.split(',').forEach(n => all[n.trim()] = action)
-      }
-    })
-
-    Object.keys(all).forEach(name => {
-      const action = all[name];
-      if (typeof action === 'function') {
-        this.add_action(name, action);
-      } else if (Array.isArray(action)) {
-        this.add_action(name, action[0], action[1]);
-      }
-    });
-  }
-
-  public run(name: string, ...args) {
-    return this.global_event || this.is_global_event(name) ?
-      app.run(name, ...args) :
-      this._app.run(name, ...args);
-  }
-
-  public on(name: string, fn: (...args) => void, options?: any) {
-    this._actions.push({ name, fn });
-    return this.global_event || this.is_global_event(name) ?
-      app.on(name, fn, options) :
-      this._app.on(name, fn, options);
-  }
-
-  public unmount() {
-    this._actions.forEach(action => {
-      const { name, fn } = action;
-      this.global_event || this.is_global_event(name) ?
-        app.off(name, fn) :
-        this._app.off(name, fn);
-    });
-  }
-}

package/src/createComponent.tsx

@@ -1,38 +0,0 @@
-import app from './app';
-
-function render(node, parent, idx) {
-  const { tag, props, children } = node;
-
-  let id = props && props['id'];
-  let key = `_${tag.name}_${idx}`
-  if (!id) {
-    id = `_${tag.name}_${idx}`;
-  } else {
-    key = `_${tag.name}_${id}`;
-  }
-
-  if (!parent.__componentCache) parent.__componentCache = {};
-  let component = parent.__componentCache[key];
-  if (!component) {
-    component = parent.__componentCache[key] = new tag({ ...props, children }).mount(id);
-  }
-  component.mounted && component.mounted(props, children);
-  const state = component.state;
-  let vdom = '';
-  if (!(state instanceof Promise) && component.view) {
-    vdom = component.view(state);
-    component.rendered && component.rendered(state);
-  }
-  return <div id={id}>{vdom}</div>;
-}
-
-function createComponent(node, parent, idx = 0) {
-  if (typeof node === 'string') return node;
-  if (Array.isArray(node)) return node.map(child => createComponent(child, parent, idx++));
-  let vdom = node;
-  if (node && node.tag && Object.getPrototypeOf(node.tag).__isAppRunComponent) vdom = render(node, parent, idx++);
-  if (vdom && vdom.children) vdom.children = vdom.children.map(child => createComponent(child, parent, idx++));
-  return vdom;
- }
-
-export default createComponent;

package/src/decorator.ts

@@ -1,36 +0,0 @@
-export const Reflect = {
-
-  meta: new WeakMap(),
-
-  defineMetadata(metadataKey, metadataValue, target) {
-    if (!this.meta.has(target)) this.meta.set(target, {});
-    this.meta.get(target)[metadataKey] = metadataValue;
-  },
-
-  getMetadataKeys(target) {
-    target = Object.getPrototypeOf(target);
-    return this.meta.get(target) ? Object.keys(this.meta.get(target)) : [];
-  },
-
-  getMetadata(metadataKey, target) {
-    target = Object.getPrototypeOf(target);
-    return this.meta.get(target) ? this.meta.get(target)[metadataKey] : null;
-  }
-}
-
-export function update(name?: string, options: any = {}) {
-  return (target: any, key: string, descriptor: any) => {
-    name = name || key;
-    Reflect.defineMetadata(`apprun-update:${name}`,
-      { name, key, options }, target);
-    return descriptor;
-  }
-}
-
-export function on(name?: string, options: any = {}) {
-  return function (target: any, key: string) {
-    name = name || key;
-    Reflect.defineMetadata(`apprun-update:${name}`,
-        { name, key, options }, target)
-  }
-}

package/src/router.ts

@@ -1,19 +0,0 @@
-import app from './app';
-
-const ROUTER_EVENT = '//';
-
-export default function route(url: string) {
-  if (!url) url = '#';
-  if (url.startsWith('#')) {
-    const [name, ...rest] = url.split('/');
-    app.run(name, ...rest);
-    app.run(ROUTER_EVENT, name, ...rest);
-  } else if (url.startsWith('/')) {
-    const [_, name, ...rest] = url.split('/');
-    app.run('/' + name, ...rest);
-    app.run(ROUTER_EVENT, '/' + name, ...rest);
-  } else {
-    app.run(url);
-    app.run(ROUTER_EVENT, url);
-  }
-}

package/src/types.ts

@@ -1,9 +0,0 @@
-export type VNode = {
-  tag: string | Function,
-  props: {},
-  children: Array<VNode|string>
-}
-export type VDOM = string | VNode | Array<VNode | string>;
-export type View<T> = (state: T) => VDOM | void;
-export type Action<T> = (state: T, ...p: any[]) => T | Promise<T>;
-export type Update<T> = { [name: string]: Action<T> | {}[] | void; };

package/src/vdom-html.ts

@@ -1,17 +0,0 @@
-import { createElement, updateElement, Fragment } from './vdom-my';
-import * as morphdom from 'morphdom';
-
-export function render(element, html, parent?) {
-  if (typeof html === 'string') {
-    html = html.trim();
-    if (element.firstChild) {
-      morphdom(element.firstChild, html);
-    } else {
-      element.innerHTML = html;
-    }
-  } else {
-    updateElement(element, html, parent);
-  }
-}
-export { createElement, Fragment };
-

package/src/vdom-my.ts

@@ -1,191 +0,0 @@
-import createComponent from './createComponent';
-import { VNode } from './types';
-export type Element = any; //HTMLElement | SVGSVGElement | SVGElement;
-
-const ATTR_PROPS = '_props';
-
-function collect(children) {
-  const ch = [];
-  const push = (c) => {
-    if (c !== null && c !== undefined && c !== '' && c !== false) {
-      ch.push((typeof c === 'function' || typeof c === 'object') ? c : `${c}`);
-    }
-  }
-  children && children.forEach(c => {
-    if (Array.isArray(c)) {
-      c.forEach(i => push(i));
-    } else {
-      push(c);
-    }
-  });
-  return ch;
-}
-
-export function createElement (tag: string | Function, props: {}, ...children) {
-  const ch = collect(children);
-  if (typeof tag === 'string') return { tag, props, children: ch };
-  else if (tag === undefined && children) return ch; // JSX fragments
-  else if (Object.getPrototypeOf(tag).__isAppRunComponent) {
-    return { tag, props, children:ch } // createComponent(tag, { ...props, children });
-  }
-  else
-    return tag(props, ch);
-};
-
-const keyCache = {};
-
-export const updateElement = render;
-
-export function render(element: Element, nodes: VNode | VNode[], parent = {}) {
-  // console.log('render', element, node);
-  if (nodes == null) return;
-
-  nodes = createComponent(nodes, parent);
-
-  if (!element) return;
-  if (Array.isArray(nodes)) {
-    updateChildren(element, nodes);
-  } else {
-    const node = nodes;
-    if (!element.firstChild) {
-      element.appendChild(create(node));
-    } else {
-      update(element.firstChild, node);
-    }
-  }
-}
-
-function same(el: Element, node: VNode) {
-  // if (!el || !node) return false;
-  const key1 = el.nodeName;
-  const key2 = `${node.tag || ''}`;
-  return key1 === key2.toUpperCase();
-}
-
-function update(element: Element, node: VNode) {
-  console.assert(!!element);
-  //console.log('update', element, node);
-  if (!same(element, node)) {
-    element.parentNode.replaceChild(create(node), element);
-    return;
-  }
-  updateChildren(element, node.children);
-  updateProps(element, node.props);
-}
-
-function updateChildren(element, children) {
-  const len = Math.min(element.childNodes.length, children.length);
-  for (let i = 0; i < len; i++) {
-    const child = children[i];
-    const el = element.childNodes[i];
-    if (typeof child === 'string') {
-      if (el.textContent !== child) {
-        if (el.nodeType === 3) {
-          el.textContent = child
-        } else {
-          element.replaceChild(createText(child), el);
-        }
-      }
-    } else {
-      const key = child.props && child.props['key'];
-      if (key) {
-        if (el.key === key) {
-          update(element.childNodes[i], child);
-        } else {
-          const old = key && keyCache[key];
-          if (old) {
-            element.replaceChild(old, el);
-            element.appendChild(el);
-            update(element.childNodes[i], child);
-          } else {
-            element.appendChild(create(child), el);
-            update(element.childNodes[i], child);
-          }
-        }
-      } else {
-        update(element.childNodes[i], child);
-      }
-    }
-  }
-
-  let n = element.childNodes.length;
-  while (n > len) {
-    element.removeChild(element.lastChild);
-    n--;
-  }
-
-  if (children.length > len) {
-    const d = document.createDocumentFragment();
-    for (let i = len; i < children.length; i++) {
-      d.appendChild(create(children[i]));
-    }
-    element.appendChild(d);
-  }
-}
-
-function createText(node) {
-  if (node.indexOf('_html:') === 0) { // ?
-    const div = document.createElement('div');
-    div.insertAdjacentHTML('afterbegin', node.substring(6))
-    return div;
-  } else {
-    return document.createTextNode(node);
-  }
-}
-
-function create(node: VNode | string): Element {
-  console.assert(node !== null && node !== undefined);
-  // console.log('create', node, typeof node);
-
-  if (typeof node === "string") return createText(node);
-  if (!node.tag || (typeof node.tag == 'function')) return createText(JSON.stringify(node));
-
-  const element = (node.tag === "svg")
-    ? document.createElementNS("http://www.w3.org/2000/svg", node.tag)
-    : document.createElement(node.tag);
-
-  updateProps(element, node.props);
-
-  if (node.children) node.children.forEach(child => element.appendChild(create(child)));
-
-  return element
-}
-
-function mergeProps(a: {}, b: {}): {} {
-  const props = {};
-  if (a) Object.keys(a).forEach(p => props[p] = '');
-  if (b) Object.keys(b).forEach(p => props[p] = b[p]);
-  return props;
-}
-
-function updateProps(element: Element, props: {}) {
-  console.assert(!!element);
-  // console.log('updateProps', element, props);
-
-  const cached = element[ATTR_PROPS] || {};
-  props = mergeProps(cached, props);
-  element[ATTR_PROPS] = props;
-  for (let name in props) {
-    const value = props[name];
-    // if (cached[name] === value) continue;
-    // console.log('updateProps', name, value);
-    if (name === 'style') {
-      if (element.style.cssText) element.style.cssText = '';
-      for (let s in value) {
-        if (element.style[s] !== value[s]) element.style[s] = value[s];
-      }
-    } else if (name.startsWith('data-')) {
-      const dname = name.substring(5);
-        if (element.dataset[dname] !== value) element.dataset[dname] = value;
-    } else if (name.startsWith("role") || name.startsWith("aria-")) {
-      if (element.getAttribute(name) !== value) element.setAttribute(name, value)
-    } else {
-      if (element[name] !== value) element[name] = value;
-      if (name === 'key' && value) keyCache[value] = element;
-    }
-  }
-}
-
-export function Fragment(props, ...children): any[] {
-  return collect(children);
-}

package/src/vdom-to-html.tsx

@@ -1,45 +0,0 @@
-
-import { VDOM } from './types';
-
-function getProp(prop) {
-  if (typeof prop === 'object') {
-    return Object.keys(prop).map(name => `${name}:${prop[name]}`).join(';');
-  }
-  else return prop.toString();
-}
-
-function toProps(props) {
-  return Object.keys(props)
-    .map(name => ` ${name === 'className' ? 'class' : name}="${getProp(props[name])}"`)
-    .join('');
-}
-
-function toHTMLArray(nodes) {
-  return nodes.map(node => toHTML(node)).join('');
-}
-
-function clean(obj) {
-  for (var i in obj) {
-    if (obj[i] == null) {
-      delete obj[i];
-    } else if (typeof obj[i] === 'object') {
-      clean(obj[i]);
-    }
-  }
-}
-
-function toHTML (vdom: VDOM) {
-  if (!vdom) return '';
-  clean(vdom);
-  if (Array.isArray(vdom)) return toHTMLArray(vdom);
-  if (typeof vdom === 'string') {
-    return vdom.startsWith('_html:') ? vdom.substring(6) : vdom;
-  } else if (vdom.tag) {
-    const props = vdom.props ? toProps(vdom.props) : '';
-    const children = vdom.children ? toHTMLArray(vdom.children) : '';
-    return `<${vdom.tag}${props}>${children}</${vdom.tag}>`;
-  }
-  if (typeof vdom === 'object') return JSON.stringify(vdom);
-}
-
-export default toHTML;

package/src/vdom.ts

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

package/src/web-component.ts

@@ -1,29 +0,0 @@
-import { Component } from './component';
-declare var customElements;
-
-export const customElement = (componentClass, options={}) => class extends HTMLElement {
-  private _shadowRoot;
-  private _component;
-  public on;
-  public run;
-  constructor() {
-    super();
-    const opts = { render: true, shadow: false, ...options };
-    this._shadowRoot = opts.shadow ?
-      this.attachShadow({ mode: 'open' }) : this;
-    const props = {}
-    Array.from(this.attributes).forEach(item => props[item.name] = item.value);
-    if (this.children) {
-      props['children'] = Array.from(this.children);
-      props['children'].forEach(el => el.parentElement.removeChild(el));
-    }
-    this._component = new componentClass(props).mount(this._shadowRoot, opts);
-    this.on = this._component.on.bind(this._component);
-    this.run = this._component.run.bind(this._component);
-  }
-  get state() { return this._component.state; }
-}
-
-export default (name: string, componentClass, options?) => {
-  customElements && customElements.define(name, customElement(componentClass, options))
-}

package/tests/app-rx.spec_

@@ -1,41 +0,0 @@
-import {App} from '../src/app';
-
-describe('app', () => {
-
-  let app: App;
-  beforeEach(() => app = new App());
-
-  it ('should be able to cancel subscription', () => {
-    let called = false;
-    const fn = () => (called = true);
-    const subscription: any = app.on('test', fn);
-    subscription.unsubscribe();
-    app.run('test');
-    expect(called).toBeFalsy();
-  });
-
-  it ('should be able to return Observable<{}> from app.on', (done) => {
-    let called = false;
-    const subject:any = app.on('test');
-    subject.debounceTime(200).subscribe(()=> called = true);
-    app.run('test');
-    expect(called).toBeFalsy();
-    setTimeout(() => {
-      expect(called).toBeTruthy();
-      done();
-    }, 250);
-  });
-
-  it ('should be able to return Subject<{}> from app.run', () => {
-    let i=0, j=0
-    const fn = () => {i++};
-    const subscription: any = app.on('test', fn)
-    const subject = app.run('test');
-    subscription.unsubscribe();
-    subject.subscribe(() => j++);
-    subject.next();
-    expect(i).toEqual(1);
-    expect(j).toEqual(1);
-  });
-
-});