apprun 4.0.0 → 6.0.0-rc.0

package/demo-html/main.tsx

@@ -1,31 +0,0 @@
-
-import app, { Component } from '../src/apprun';
-declare var customElements;
-class MyApp extends Component {
-  // state = 0/
-
-  view = (state) => {
-    return <div><h1>{state}</h1></div>
-  }
-
-  update = {
-    '-1': (state) => state - 1,
-    '+1': (state) => state + 1
-  }
-
-  children;
-  rendered = state => {
-    this.children.forEach(el => {
-      this.element.firstElementChild.appendChild(el)
-    });
-    this.element.setAttribute('num', state);
-  }
-
-  constructor({ num, children } ) {
-    super();
-    this.children = children;
-    this.state = parseInt(num);
-  }
-}
-
-app.webComponent('my-app', MyApp);

package/docs/README.md

@@ -1,326 +0,0 @@
-# Building Applications with AppRun
-
-AppRun is a 3K library for building applications using the [elm architecture](https://guide.elm-lang.org/architecture) and event publication and subscription.
-
-## Architecture
-
-According to the elm architecture, there are three separated parts in an application.
-
-* Model — the data model of your application state
-* Update — a set of functions to update the state
-* View — a function to display the state as HTML
-
-The 15 lines of code below is a simple counter application demonstrates the architecture using AppRun.
-
-```
-const state = 0;
-
-const view = state => {
-  return `<div>
-    <h1>${state}</h1>
-    <button onclick='app.run("-1")'>-1</button>
-    <button onclick='app.run("+1")'>+1</button>
-  </div>`;
-};
-
-const update = {
-  '+1': state => state + 1,
-  '-1': state => state - 1
-};
-
-app.start('my-app', state, view, update);
-```
-
-### The Model
-
-The model can be any data structure, a number, an array, or an object that reflects the state of the application. In the counter example, it is a number.
-```
-const state = 0;
-```
-
-### The Update
-
-The update contains functions that take existing state and create new states.
-```
-const update = {
-  '+1': state => state + 1,
-  '-1': state => state - 1
-}
-```
-
-### The View
-
-The view generates HTML based on the state. AppRun parses the HTML string into virtual dom. It then calculates the differences against the web page element and renders the changes.
-
-```
-const view = state => {
-  return `<div>
-    <h1>${state}</h1>
-    <button onclick='app.run("-1")'>-1</button>
-    <button onclick='app.run("+1")'>+1</button>
-  </div>`;
-};
-```
-
-### Trigger the Update
-
-AppRun exposes a global object named _app_ that is accessible globally to trigger the Update by calling _app.run_ function.
-```
-app.run('+1');
-```
-The web page programming is event driven. Connecting web events to AppRun events, you can trigger update functions from user input, click, navigation and etc.
-
-E.g. call _app.run_ in HTML markup directly:
-```
-<button id="inc" onclick="app.run('+1')">+1</button>
-```
-Or in JavaScript:
-```
-document.getElementById('inc').addEventListener('click',
-  () => app.run('+1'));
-```
-Or with JSX:
-```
-<button onclick={()=>app.run("+1")}>+1</button>
-```
-Or even with jQuery:
-```
-$('#inc').on('click', ()=>app.run('+1'));
-```
-
-Finally, _app.start_ function from AppRun ties State, View and Update together to an element and starts the application.
-```
-const element = document.getElementById('my-app');
-app.start(element, State, view, update);
-```
-
-To summarize above, the two functions from AppRun (_app.run_ and _app.start_) are all you need to make an application of elm architecture.
-
-Try the counter example online: [Simple Counter](https://jsfiddle.net/ap1kgyeb/4).
-
-## Event PubSubs
-
-At the core, AppRun is an event publication and subscription system, which is also known as event emitter. It is a commonly used pattern in JavaScript programming.
-
-AppRun has two important functions: _app.run_ and _app.on_. _app.run_ fires events.
-_app.on_ handles events. E.g. :
-
-Module A subscribes to an event _print_:
-```
-import app from 'apprun';
-export () => app.on('print', e => console.log(e));
-```
-Module B publishes the event _print_:
-```
-import app from 'apprun';
-export () => app.run('print', {});
-```
-Main Module:
-```
-import a from './A';
-import b from './B';
-a();
-b();
-```
-Module A and Module B only have to know the event system, not other modules, so they are only dependent on the event system, not other modules. Therefore modules are decoupled. Thus makes it easier to modify, extend and swap modules.
-
-The most significant benefit of such event system is decoupling. In traditional MVC architecture, the model, view and controller are coupled, which makes it difficult to test and maintain. In result, there are many architecture patterns have been developed to solve the coupling problem, such as Model-View-Presenter, Presentation Model, and Model-View-ViewModel. AppRun solved the coupling problem by using event publication and subscription. Model, View and Controller/Update don't know each.
-
-AppRun applications have an event cycle like below:
-
-```
-Web events => AppRun Events => Update => (new state) => View => (HTML)
-```
-
-Behind scene AppRun events trigger update functions; the update functions create new states; AppRun then let view function turn the new state into HTML or virtual DOM. Finally AppRun renders the HTML or virtual DOM to web page element.
-
-## State Management
-
-During the event cycle, AppRun manages application states. It passes current state into the update functions. It takes the new state from the update functions and passes into the view function. Therefore it can maintain the history of all states, which enables the time travel / undo-redo feature.
-
-In leverage the time travel / undo-redo feature, the update functions must make sure current state immutable and always create a new state.
-
-See the multiple counter example that has undo-redo online: [Multiple counters](https://jsfiddle.net/ap1kgyeb/6)
-
-
-## Virtual DOM
-
-When applications get complex, we start to think performance and build system.
-
-In the simple counter example above, the View creates HTML string out of the state.
-Although HTML string is easy to understand and useful for trying out ideas, it takes
-time to parse it into virtual dom at run time, which may cause performance issue.
-It also has some problems that have been documented by the Facebook React team:
-[Why not template literals](http://facebook.github.io/jsx/#why-not-template-literals).
-
-Using JSX, the JSX compiler compiles the JSX into functions at compile time. The View function creates virtual dom in runtime directly without parsing HTML, which gives
-better performance. Therefore, we recommend using JSX in production.
-
-To compile and build production code, we recommend using TypeScript and webpack. See CLI section below.
-
-
-## Component
-
-Another thing to consider when applications get complex is to divide and organize code into components.
-
-A component in AppRun is a mini elm architecture, which means inside a component, there are model, view and update. Let's use _AppRun CLI_ to generate a component.
-
-```
-apprun -c Counter
-```
-
-It generates a Counter component:
-```
-import app, {Component} from 'apprun';
-
-export default class CounterComponent extends Component {
-  state = 'Counter';
-  view = state => {
-    return <div>
-      <h1>{state}</h1>
-    </div>
-  }
-  update = {
-    '#Counter': state => state,
-  }
-}
-```
-
-To use the Counter component, create an instance of it and then mount the instance to an element.
-
-```
-import Counter from './Counter';
-const element = document.getElementById('my-app');
-new Counter().mount(element);
-```
-
-Notice the update has a '#Counter' function. It is a route. See Routing section below.
-
-### Pure Function Component
-
-Pure Function Component is fully supported. Make sure the function name is capitalized.
-
-```
-const Counter = ({num, idx}) => (
-  <div>
-    <h1>{num}</h1>
-    <button onclick={() => app.run("-1", idx)}>-1</button>
-    <button onclick={() => app.run("+1", idx)}>+1</button>
-    <button onclick={() => app.run("remove-counter", idx)}>x</button>
-  </div>
-);
-
-const CounterList = ({counters}) => counters.map((num, idx) =>
-  <Counter num={num} idx={idx} />
-);
-
-const view = state => {
-  console.log(state);
-  return (
-  <div>
-    <div>
-      <button onclick={() => app.run("add-counter")}>add counter</button>
-      <button onclick={() => app.run("remove-counter", state.length-1)} disabled={state.length <= 0}>remove counter</button>
-    </div>
-    <br/>
-    <CounterList counters={state} />
-  </div>);
-};
-```
-
-### Child Stateful Component
-
-(Working in progress)
-
-```
-    class TestComponent extends Component {
-      state = '';
-      view = state => <div>{state}</div>
-      update = { }
-      constructor({ id }) {
-        super();
-      }
-    }
-
-    class MainComponent extends Component {
-      view = state => {
-        return <div>
-          <TestComponent id = 'c1' />
-          <TestComponent id = 'c2' />
-          <TestComponent id = 'c3'/>
-        </div>
-      }
-    }
-
-    new MainComponent().start('my-app');
-```
-
-### Update function Decorator
-
-In AppRun, there are two decorators to make the update functions easier to write and read in component. _@update_ and _@on_. _@update_ is for class functions. _@on_ is for class properties.
-
-```
-    class TestComponent extends Component {
-      view = state => state
-
-      // function decorator
-      @update('hi, #hi')
-      f2(state, val) {
-        return val;
-      }
-
-      // property decorator
-      @on('hi2, #hi2')
-      f2 = (state, val) => val
-    }
-```
-
-## Routing
-
-Because AppRun can connect web page events to AppRun Event, handling routing becomes much easier. AppRun detects the hash changes in URL and calls update functions by matching the hash. E.g., when URL in the browser address bar becomes http://..../#Counter, The #Couter update function of the component will run.
-
-Each component defines its route in an update function. The URL changes trigger and run the update function. It can avoid a lot of code for registering and matching routes like in the other frameworks and libraries.
-
-
-## CLI
-
-AppRun includes a cli. To install AppRun CLI:
-
-```
-npm install apprun -g
-```
-
-AppRun CLI can:
-
-* Initialize a TypeScript and webpack configured project
-* Initialize git repository
-* Add Jest unit test
-* Generate component
-* Generate SPA application
-
-Let's initialize a SPA project.
-
-```
-apprun -i --spa
-```
-
-The apprun -i command installs apprun, webpack, webpack-dev-server and typescript. It also generates files: tsconfig.json, webpack.config.js, index.html and main.tsx.
-
-The apprun --spa command generates files: index.html, main.tsx and three components: Home, About and Contact.
-
-After the command finishes execution, you can start the application and then navigate to https://localhost:8080 in a browser.
-
-```
-npm start
-```
-
-## Performance
-
-AppRun itself is lightweight. It is about 3K gzipped. More important is that applications built with AppRun have less line of code, smaller js file, and better performance.
-See a comparison from [A Real-World Comparison of Front-End Frameworks with Benchmarks](https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-e1cb62fd526c).
-
-AppRun has also joined the [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) project. You can see its [performance results](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html) compared to other frameworks and libraries.
-
-
-AppRun makes your applications clean, precious, declarative and has no ceremony.
-Please give it a try and send pull requests.

package/docs/index.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
-  <title>AppRun</title>
-  <link rel="stylesheet" href="https://unpkg.com/docute@3/dist/docute.css">
-</head>
-<body>
-  <div id="app"></div>
-  <script src="https://unpkg.com/docute@3/dist/docute.js"></script>
-  <script>
-    docute.init({
-      // sidebar: false,
-      nav: [
-        {title: 'Home', path: '/'},
-        {title: 'Github', path: 'https://github.com/yysun/apprun'}
-      ]
-    })
-  </script>
-</body>
-</html>

package/index.html

@@ -1,85 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <title>AppRun Examples</title>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
-    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-  <link rel="stylesheet" type="text/css" href="demo/styles.css">
-</head>
-<body>
-    <!-- navbar -->
-    <nav class="navbar navbar-default">
-      <div class="container">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="#">AppRun</a>
-        </div>
-        <div id="navbar" class="navbar-collapse collapse">
-          <ul class="nav navbar-nav">
-            <!--<li class="active"><a href="#">Home</a></li>-->
-            <li class="dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Hello
-              <span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="#hello">Hello World</a></li>
-                <li><a href="#hello-pushstate">Hello World - Push State</a></li>
-                <li><a href="#hello-delayed">Hello World - Delayed</a></li>
-                <li><a href="#hello-directive">Hello World - Directive</a></li>
-              </ul>
-            </li>
-            <li class="dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Counter
-              <span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="#counter">Simple Counter</a></li>
-                <li><a href="#counters">Multiple Counters</a></li>
-              </ul>
-            </li>
-            <li><a href="#blade">Blade</a></li>
-            <li><a href="#dragdrop">Drag</a></li>
-            <li><a href="#todo">Todo</a></li>
-            <li><a href="#multi-selection">Type-ahead</a></li>
-            <li><a href="#benchmark">Benchmark</a></li>
-
-            <li class="dropdown">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">More
-              <span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="https://yysun.github.io/apprun-hn">Hacker News Reader</a></li>
-                <li><a href="https://github.com/gothinkster/apprun-realworld-example-app">RealWorld Example App</a></li>
-                <li><a href="https://github.com/yysun/apprun-ssr">Server-Side Rendering</a></li>
-                <li><a href="https://github.com/yysun/apprun-multilingual">Multilingual Example</a></li>
-                <li><a href="https://github.com/yysun/apprun-firebase-authentication">Firebase Authentication</a></li>
-                <li><a href="https://github.com/yysun/apprun-dynamic-components">Dynamic Module Import</a></li>
-                <li><a href="https://github.com/yysun/apprun-hot-module-reload">Hot Module Reload with Webpack</a></li>
-                <li><a href="https://github.com/yysun/apprun-parcel-bundler">Use Parcel</a></li>
-              </ul>
-            </li>
-          </ul>
-          <ul class="nav navbar-nav navbar-right">
-            <li><a href="https://github.com/yysun/apprun">Github</a></li>
-          </ul>
-        </div><!--/.nav-collapse -->
-      </div>
-    </nav>
-
-    <div class="container">
-      <div id="my-app"></div>
-    </div> <!-- /container -->
-
-  <script src="https://code.jquery.com/jquery-3.1.1.min.js"
-    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
-
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
-    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-
-  <script src="demo/app.js"></script>
-</body>
-</html>

package/src/app.ts

@@ -1,69 +0,0 @@
-export class App {
-
-  private _events: Object;
-
-  public start;
-  public createElement;
-  public render;
-  public Fragment;
-  public webComponent;
-
-  constructor() {
-    this._events = {};
-  }
-
-  on(name: string, fn: (...args) => void, options: any = {}) {
-    this._events[name] = this._events[name] || [];
-    this._events[name].push({ fn: fn, options: options });
-  }
-
-  off(name: string, fn: (...args) => void) {
-    let subscribers = this._events[name];
-    if (subscribers) {
-      subscribers = subscribers.filter((sub) => sub.fn !== fn);
-      if (subscribers.length) this._events[name] = subscribers;
-      else delete this._events[name]
-    }
-  }
-
-  run(name: string, ...args) {
-    let subscribers = this._events[name];
-    console.assert(!!subscribers, 'No subscriber for event: ' + name);
-    if (subscribers) {
-      subscribers = subscribers.filter((sub) => {
-        const { fn, options } = sub;
-        if (options.delay) {
-          this.delay(name, fn, args, options);
-        } else {
-          fn.apply(this, args);
-        }
-        return !sub.options.once;
-      });
-      if (subscribers.length) this._events[name] = subscribers;
-      else delete this._events[name]
-    }
-  }
-
-  once(name: string, fn, options: any = {}) {
-    this.on(name, fn, { ...options, once: true });
-  }
-
-  private delay(name, fn, args, options) {
-    if (options._t) clearTimeout(options._t);
-    options._t = setTimeout(() => {
-      clearTimeout(options._t);
-      fn.apply(this, args);
-    }, options.delay);
-  }
-}
-
-let app: App;
-declare var global;
-const root = global || window;
-if (root['app'] && root['app']['start']) {
-  app = root['app'];
-} else {
-  app = new App();
-  root['app'] = app;
-}
-export default app;

package/src/apprun-dev-tools.tsx

@@ -1,67 +0,0 @@
-import app from './app';
-import toHTML from './vdom-to-html';
-
-const log = p => console.log(p);
-let debug = false;
-
-window['_debug'] = (on) => {
-  on ? !debug && app.on('debug', log) : debug && app.off('debug', log);
-  debug = on;
-}
-
-function newWin(html) {
-  const newWin = window.open('', '_apprun_debug', 'toolbar=0');
-  newWin.document.write(`<html>
-  <title>AppRun Analyzer | ${document.location.href}</title>
-  <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" }
-    li { margin-left: 30px; }
-  </style>
-  <body>
-  <div id="main">${html}</div>
-  </script>
-  </body>
-  </html>`);
-  newWin.document.close();
-}
-
-const Events = ({ events }) => <ul>
-  {events && events
-    .sort(((a, b) => a.name > b.name ? 1 : -1))
-    .map(event => <li>
-    {event.name}
-  </li>)}
-</ul>;
-
-const Components = ({ components }) => <ul>
-  {components.map(component => <li>
-    <div>{component.constructor.name}</div>
-    <Events events={component['_actions']} />
-  </li>)}
-</ul>;
-
-const view = state => <ul>
-  {Object.keys(state).map(name =><li>
-    <div>#{name}</div>
-    <Components components={state[name]} />
-  </li>)}
-</ul>
-
-window['_components'] = (print) => {
-  const o = { components: {} };
-  app.run('get-components', o);
-  const { components } = o;
-  if (print) {
-    const vdom = view(components);
-    newWin(toHTML(vdom));
-  } else {
-    Object.keys(components).forEach(el => {
-      const element = typeof el === 'string' ? document.getElementById(el) : el;
-      const comps = components[el].map(component => ({
-        component,
-        events: component['_actions'].sort(((a, b) => a.name > b.name ? 1 : -1)).map(e => e.name),
-      }));
-      console.log(element, comps);
-    });
-  }
-}

package/src/apprun-html.ts

@@ -1,13 +0,0 @@
-import app, { Component, View, Action, Update, on, update } from './apprun'
-import { createElement, render, Fragment } from './vdom-html';
-
-app.createElement = createElement;
-app.render = render;
-app.Fragment = Fragment;
-
-export default app;
-export { Component, View, Action, Update, on, update };
-
-if (typeof window === 'object') {
-  window['Component'] = Component;
-}

package/src/apprun.ts

@@ -1,53 +0,0 @@
-import app from './app';
-import { createElement, render, Fragment } from './vdom';
-import { Component } from './component';
-import { VNode, View, Action, Update } from './types';
-import { on, update } from './decorator';
-import route from './router';
-import webComponent from './web-component';
-
-export interface IApp {
-  start<T>(element?: Element | string, model?: T, view?: View<T>, update?: Update<T>,
-    options?: { history?, rendered?: (state: T) => void}): Component<T>;
-  on(name: string, fn: (...args: any[]) => void, options?: any): void;
-  off(name: string, fn: (...args: any[]) => void): void;
-  run(name: string, ...args: any[]): void;
-  createElement(tag: string | Function, props, ...children): VNode | VNode[];
-  render(element: HTMLElement, node: VNode): void;
-  Fragment(props, ...children): any[];
-  webComponent(name: string, componentClass, options?): void;
-}
-
-app.createElement = createElement;
-app.render = render;
-app.Fragment = Fragment;
-app.webComponent = webComponent;
-
-app.start = <T>(element?: HTMLElement | string, model?: T,  view?: View<T>, update?: Update<T>,
-  options?: { history?, rendered?: (state: T) => void }) : Component<T> => {
-    const opts = Object.assign(options || {}, { render: true, global_event: true });
-    const component = new Component<T>(model, view, update);
-    if (options && options.rendered) component.rendered = options.rendered;
-    component.mount(element, opts);
-    return component;
-};
-
-if (!app['route']) {
-  app['route'] = route;
-  app.on('//', _ => { });
-  app.on('#', _ => { });
-  app.on('route', url => route(url));
-  if (typeof document === 'object') {
-    document.addEventListener("DOMContentLoaded", () => {
-      window.onpopstate = () => route(location.hash);
-      route(location.hash);
-    });
-  }
-}
-
-export type StatelessComponent<T={}> = (args: T) => string | VNode | void;
-export { Component, View, Action, Update, on, update };
-export { update as event };
-export default app as IApp;
-
-app.on('debug', _ => 0);