apprun 4.0.0 → 6.0.0-rc.0

package/tests/hyperscript.spec.ts

@@ -1,43 +0,0 @@
-import app from '../src/apprun';
-const h = app.createElement;
-import { VNode } from '../src/types';
-
-describe('hyperscript', () => {
-  it('should be supported case 1', () => {
-    const view = state => h('div', null, '1');
-    app.start('my-app', 0, view, {});
-  })
-
-  it('should be supported case 2', () => {
-    const view = state => h('div', null,
-      h('div', null, '2'),
-      h('div', null, '3'));
-    const vdom = view({}) as VNode;
-    expect(vdom.children.length).toBe(2);
-    app.start('my-app', 0, view, {});
-  })
-
-  it('should be supported case 3', () => {
-    const view = state => h('div', null, [
-      h('div', null, '2'),
-      h('div', null, '3')]
-    );
-    const vdom = view({}) as VNode;
-    expect(vdom.children.length).toBe(2);
-    app.start('my-app', 0, view, {});
-  })
-
-  it('should be supported case 4', () => {
-    const view = state => h('div', null,
-      h('div', null,
-        h('div', null, '3')
-      )
-    );
-    const vdom = view({}) as VNode;
-    expect(vdom.children.length).toBe(1);
-    expect((vdom.children[0] as VNode).children.length).toBe(1);
-    app.start('my-app', 0, view, {});
-  })
-  
-})
-

package/tests/node-test.js

@@ -1,7 +0,0 @@
-const app = require('../dist/apprun').default;
-
-app.on('print', p => console.log(
-  app.createElement('div', null, p)
-));
-
-app.run('print', 'hello');

package/tests/router.spec.ts

@@ -1,69 +0,0 @@
-import app from '../src/apprun';
-import route from '../src/router';
-
-describe('router', () => {
-
-  beforeAll(() => {
-    window.onpopstate = () => route(location.hash || location.pathname);
-  });
-
-  it('should not fire event if not initialize', () => {
-    const fn = jasmine.createSpy('fn');
-    app.on('//', fn);
-    expect(fn).not.toHaveBeenCalled();
-  });
-
-  it('should fire events if initialized', () => {
-    const fn1 = jasmine.createSpy('fn1');
-    const fn2 = jasmine.createSpy('fn2');
-    app.on('#', fn1);
-    app.on('//', fn2);
-    route('');
-    expect(fn1).toHaveBeenCalledWith();
-    expect(fn2).toHaveBeenCalledWith('#');
-  });
-
-  it('should fire events if location hash changes', (done) => {
-    const fn3 = jasmine.createSpy('fn3');
-    const fn4 = jasmine.createSpy('fn4');
-    app.on('#x', fn3);
-    app.on('//', fn4);
-    document.location.href = '#x';
-    setTimeout(() => {
-      expect(fn3).toHaveBeenCalledWith();
-      expect(fn4).toHaveBeenCalledWith('#x');
-      done();
-    }, 100);
-  });
-
-  it('should route location path', () => {
-    const fn1 = jasmine.createSpy('fn1');
-    const fn2 = jasmine.createSpy('fn2');
-    app.on('/home', fn1);
-    app.on('//', fn2);
-    app.run('route', '/home');
-    expect(fn1).toHaveBeenCalledWith();
-    expect(fn2).toHaveBeenCalledWith('/home');
-  });
-
-  it('should route location all path', () => {
-    const fn1 = jasmine.createSpy('fn1');
-    const fn2 = jasmine.createSpy('fn2');
-    app.on('/x', fn1);
-    app.on('//', fn2);
-    app.run('route', '/x/y/z');
-    expect(fn1).toHaveBeenCalledWith('y', 'z');
-    expect(fn2).toHaveBeenCalledWith('/x', 'y', 'z');
-  });
-
-  it('should not convert / to #', () => {
-    const fn1 = jasmine.createSpy('fn1');
-    const fn2 = jasmine.createSpy('fn2');
-    app.on('#', fn1);
-    app.on('/', fn2);
-    app.run('route', '/');
-    expect(fn1).not.toHaveBeenCalled();
-    expect(fn2).toHaveBeenCalled();
-  });
-
-});

package/tests/stateful-component.spec.tsx

@@ -1,248 +0,0 @@
-import app, { Component } from '../src/apprun';
-
-describe('Stateful Component', () => {
-
-  it('should pass props to the constructor', () => {
-    class Child extends Component {
-      view = (state) => {
-        return <div>{state}</div>
-      }
-      constructor({ n }) {
-        super();
-        expect(n).toBe('7');
-      }
-    }
-    class Main extends Component {
-      view = (state) => {
-        return <div>
-          <Child n='7' />
-        </div>
-      }
-    }
-    new Main().start();
-  });
-
-  it('should set props as state', () => {
-    class Child extends Component {
-      view = (state) => {
-        expect(state.n).toBe('8');
-        return <div>{state.n}</div>
-      }
-    }
-    class Main extends Component {
-      view = (state) => {
-        return <div>
-          <Child n='8'/>
-        </div>
-      }
-    }
-    new Main().start();
-  });
-
-  it('should render children', () => {
-    class Child extends Component {
-      view = (state) => <div>
-        {state.children}
-      </div>
-    }
-    class Main extends Component {
-      view = (state) => {
-        return <div>
-          <Child>
-            <p>child</p>
-          </Child>
-        </div>
-      }
-    }
-    const element = document.createElement('div');
-    app.render(element, <Main />);
-    expect(element.textContent).toBe('child');
-  });
-
-  it('should call mounted function when created', (done) => {
-    class Child extends Component {
-      view = (state) => {
-        return <div>{state.n}</div>
-      }
-      mounted = (props) => {
-        expect(props.n).toBe(0);
-        done()
-      }
-    }
-    class Main extends Component {
-      state = 0
-      view = (state) => {
-        return <div>
-          <Child n={0}/>
-        </div>
-      }
-    }
-    new Main().start();
-  });
-
-  it('should call rendered function when created', (done) => {
-    class Child extends Component {
-      view = (state) => {
-        return <div>{state.n}</div>
-      }
-      rendered = (state) => {
-        expect(state.n).toBe(0);
-        done()
-      }
-    }
-    class Main extends Component {
-      state = 0
-      view = (state) => {
-        return <div>
-          <Child n={0} />
-        </div>
-      }
-    }
-    const element = document.createElement('div');
-    app.render(element, <Main />);
-  });
-
-  it('should call mounted function when refreshed', (done) => {
-    class Child extends Component {
-      view = (state) => {
-        return <div>{state.n}</div>
-      }
-      mounted = (props) => {
-        if (props.n === 1) done();
-      }
-    }
-    class Main extends Component {
-      state = 0
-      view = (state) => {
-        return <div>
-          <Child n={state}/>
-        </div>
-      }
-      update = {
-        '+1': state => state + 1
-      }
-    }
-    const component = new Main().start();
-    component.run('+1');
-  });
-
-  it('should allow async event inside the mounted function', (done) => {
-    class Child3 extends Component {
-      view = (state) => {
-        return <div>{state.n}</div>
-      }
-      mounted = (n) => {
-        if (n !== this.state) this.run('init-async', n);
-      }
-      update = {
-        'init-async': async (state, value) =>
-          new Promise(resolve =>
-            setTimeout(() =>
-              resolve(value))
-          )
-      }
-    }
-
-    class Main extends Component {
-      view = (state) => {
-        return <div>
-          <Child3 n='a' />
-        </div>
-      }
-    }
-
-    const element = document.createElement('div');
-    document.body.appendChild(element);
-    app.render(element, <Main />);
-    setTimeout(() => {
-      expect(element.textContent).toEqual('a');
-      done();
-    },10)
-  });
-
-  it('should off all events after unmount', () => {
-    class Ch extends Component {
-      update = {
-        '#1': state=> state,
-        '#2': state => state,
-        '1': state=> state,
-        '2': state=> state,
-      }
-    }
-
-    const component = new Ch().mount();
-    expect(app['_events']['#1'].length).toBe(1);
-    expect(app['_events']['#2'].length).toBe(1);
-    expect(component['_app']['_events']['1'].length).toBe(1);
-    expect(component['_app']['_events']['2'].length).toBe(1);
-    component.unmount();
-    expect(app['_events']['#1']).toBeUndefined();
-    expect(app['_events']['#2']).toBeUndefined();
-    expect(component['_app']['_events']['1']).toBeUndefined();
-    expect(component['_app']['_events']['2']).toBeUndefined();
-
-  });
-
-  it('should share same instance when refresh', (done) => {
-    class Child extends Component {
-      state = { n: 0 }
-      view = (state) => {
-        return <div>{state.n}</div>
-      }
-      mounted = ({ n }) => {
-        // on second refresh, the state should retain
-        if (n === 2 && this.state.n === 1) done();
-        this.state.n = n;
-      }
-    }
-    class Main extends Component {
-      state = 0
-      view = (state) => {
-        return <div>
-          <Child n={state}/>
-        </div>
-      }
-      update = {
-        '+1': state => state + 1
-      }
-    }
-    const element = document.createElement('div');
-    const component = new Main().start(element);
-
-    component.run('+1'); // triger a refresh
-    component.run('+1'); // triger a refresh
-  });
-
-  it('should not share the same instance', () => {
-    class Child extends Component {
-      state = { n: 0 }
-      view = (state) => {
-        return <div>{state.n}</div>
-      }
-      constructor({n}) {
-        super();
-        this.state.n = n;
-      }
-      // mounted = ({ n }) => { this.setState({n}) }
-    }
-    class Main extends Component {
-      state = 0
-      view = (state) => {
-        return <div>
-          <Child n="1" />
-          <div>
-            <Child n="2"/>
-          </div>
-          <Child n="3"/>
-        </div>
-      }
-      update = {
-        '+1': state => state + 1
-      }
-    }
-    const element = document.createElement('div');
-    app.render(element, <Main />);
-    expect(element.textContent).toBe("123");
-  });
-
-});

package/tests/typed.spec.tsx

@@ -1,63 +0,0 @@
-import app, { View, Action, Update, Component, StatelessComponent, on, update } from '../src/apprun';
-
-
-const element = document.createElement('div');
-
-const state = { msg: 'Hello' };
-type State = typeof state;
-
-describe('app', () => {
-  it('should support global typed application', () => {
-
-    const view: View<State> = (state) => <div>
-      <h1>{state.msg}</h1>
-    </div>;
-
-    const update: Update<State> = {
-      '#': (state) => state,
-    }
-
-    app.start<State>(element, state, view, update);
-    expect(element.textContent).toBe('Hello');
-
-  })
-
-  it('should support typed component', () => {
-    class MyComponent extends Component<State> {
-
-      state = { msg: 'World' };
-
-      view: View<State> = state => <h1>{state.msg}</h1>;
-
-      update = {
-        '#1': state => state,
-        '#2': (state: State) => state,
-        '#3': async (state: State) => state
-      }
-
-      @on('#4')
-      route: Action<State> = (state) => state
-
-      @update('#5')
-      route1(state) {
-        return state;
-      }
-    }
-
-    new MyComponent().start(element);
-    expect(element.textContent).toBe('World');
-
-  })
-
-  it('should support typed stateless component', () => {
-    const a = { msg: 'Hello' };
-    const List1: StatelessComponent<typeof a> = (a) => <div>{a.msg}</div>;
-    const List2: StatelessComponent<typeof a> = (a) => '';
-    const List3: StatelessComponent<typeof a> = (a) => { };
-
-    expect(List1(a)).toEqual({ tag: 'div', props: null, children: ['Hello'] });
-    expect(List2(a)).toBe('');
-    expect(List3(a)).toBe(undefined);
-  })
-
-})

package/tests/vdom-html.spec.ts

@@ -1,35 +0,0 @@
-import app from '../src/apprun-html';
-
-const model = 'y';
-const view = _ => `\n <div>${_}</div>`;
-const update = {
-  hi: (_, val) => val
-}
-
-describe('vdom-html', () => {
-
-  let element;
-  beforeEach(()=>{
-    element = document.createElement('div');
-    app.start(element, model, view, update);
-  });
-
-  it('should create first child element', () => {
-    expect(element.firstChild.nodeName).toEqual('DIV');
-    expect(element.firstChild.textContent).toEqual('y');
-  });
-
-  it('should re-create child element', () => {
-    element.removeChild(element.firstChild);
-    app.run('hi', 'yy');
-    expect(element.firstChild.nodeName).toEqual('DIV');
-    expect(element.firstChild.textContent).toEqual('yy');
-  });
-
-  it('should update child element', () => {
-    app.run('hi', 'yyy');
-    expect(element.firstChild.nodeName).toEqual('DIV');
-    expect(element.firstChild.textContent).toEqual('yyy');
-  });
-
-});

package/tests/vdom-jsx.spec.tsx

@@ -1,131 +0,0 @@
-import app, { Component } from '../src/apprun';
-
-const model = 'x';
-const view = _ => <div>{_}</div>;
-const update = {
-  hi: (_, val) => val
-}
-
-class TestComponent extends Component {
-  state = 'x';
-  view = (state) => <div>{state}</div>
-  update = {
-    '#hi': (state, v) => v
-  }
-}
-
-describe('vdom-jsx', () => {
-
-  let element;
-  beforeEach(() => {
-    element = document.createElement('div');
-    app.start(element, model, view, update);
-  });
-
-  it('created by app.start should trigger view', () => {
-    const model = 'x';
-    const view = jasmine.createSpy('view');
-    const component = app.start(document.body, model, view, update);
-    expect(view).toHaveBeenCalledWith('x');
-    app.run('hi', 'xx');
-    expect(view).toHaveBeenCalledWith('xx');
-  });
-
-  it('should create first child element', () => {
-    expect(element.firstChild.nodeName).toEqual('DIV');
-    expect(element.firstChild.textContent).toEqual('x');
-  });
-
-  it('should re-create child element', () => {
-    element.removeChild(element.firstChild);
-    app.run('hi', 'xx');
-    expect(element.firstChild.nodeName).toEqual('DIV');
-    expect(element.firstChild.textContent).toEqual('xx');
-  });
-
-  it('should update child element', () => {
-    app.run('hi', 'xxx');
-    expect(element.firstChild.nodeName).toEqual('DIV');
-    expect(element.firstChild.textContent).toEqual('xxx');
-  });
-
-  it('should render custom element', () => {
-    const CustomElement = ({ val }) => <div>{val}</div>;
-    const view = _ => <CustomElement val={_} />;
-    const element = document.createElement('div');
-    document.body.appendChild(element);
-    app.start(element, model, view, update);
-    app.run('hi', 'xxxxx');
-    expect(element.firstChild.textContent).toEqual('xxxxx');
-  });
-
-  it('should render nested element', () => {
-    const CustomElement = ({ val }) => <li>{val}</li>;
-    const view = _ => (
-      <ul>
-        <CustomElement val={_ + '1'} />
-        <CustomElement val={_ + '2'} />
-        <CustomElement val={_ + '3'} />
-        <CustomElement val={_ + '4'} />
-      </ul>);
-    const element = document.createElement('div');
-    document.body.appendChild(element);
-    app.start(element, '', view, update);
-    const el = element.firstChild as HTMLElement;
-
-    expect(el.children[0].textContent).toEqual('1');
-    expect(el.children[1].textContent).toEqual('2');
-    expect(el.children[2].textContent).toEqual('3');
-    expect(el.children[3].textContent).toEqual('4');
-
-    app.run('hi', 'x');
-    expect(el.children[0].textContent).toEqual('x1');
-    expect(el.children[1].textContent).toEqual('x2');
-    expect(el.children[2].textContent).toEqual('x3');
-    expect(el.children[3].textContent).toEqual('x4');
-
-  });
-
-  it('should render JSON', () => {
-    const view = _ => <div>{_}</div>;
-    const element = document.createElement('div');
-    document.body.appendChild(element);
-    app.start(element, { name: 'x' }, view, update);
-    expect(element.textContent).toEqual('{"name":"x"}');
-  });
-
-  it('should allow element to be string', () => {
-    const element = document.createElement('div');
-    element.id = 'main';
-    document.body.appendChild(element);
-    new TestComponent().start('main');
-    expect(element.textContent).toEqual('x');
-  });
-
-  it('should render stateful component with id', () => {
-    class TestComponent2 extends Component {
-      view = (state) => {
-        return <div>
-          <TestComponent id='test' />
-        </div>
-      }
-      update = {
-        '#hi2': (state, v) => {
-          const c = document.getElementById('test')['_component'];
-          c.run('#hi', v);
-          return state;
-        }
-      }
-    }
-
-    const element = document.createElement('div');
-    document.body.appendChild(element);
-    new TestComponent2().start(element);
-    expect(element.textContent).toEqual('x');
-    app.run('#hi', 'xxxx');
-    expect(element.textContent).toEqual('xxxx');
-    app.run('#hi2', 'xxxxx');
-    expect(element.textContent).toEqual('xxxxx');
-  });
-
-})