apprun 4.0.0 → 6.0.0-rc.0

package/tests/vdom-my.spec.tsx

@@ -1,195 +0,0 @@
-import { createElement, updateElement } from '../src/vdom-my';
-
-describe('vdom-my', () => {
-  let root;
-  beforeEach(() => {
-    root = document.createElement('div');
-  });
-
-  function render(vnode) {
-    updateElement(root, vnode);
-    return root.firstChild;
-  }
-
-  it('should create element', () => {
-    const element = render(createElement('div', null));
-    expect(element.nodeName).toEqual('DIV');
-    expect(element.textContent).toEqual('');
-  });
-
-  it('should create element with text', () => {
-    const element = render(createElement('div', null, 'x'));
-    expect(element.nodeName).toEqual('DIV');
-    expect(element.textContent).toEqual('x');
-  });
-
-  it('should create element with number', () => {
-    const element = render(createElement('div', null, 0));
-    expect(element.nodeName).toEqual('DIV');
-    expect(element.textContent).toEqual('0');
-  });
-
-  it('should create element without text', () => {
-    const element = render(createElement('div', null, ''));
-    expect(element.nodeName).toEqual('DIV');
-    expect(element.textContent).toEqual('');
-  });
-
-  it('should replace element\'s text', () => {
-    const element = render(createElement('div', null, 'x'));
-    expect(element.nodeName).toEqual('DIV');
-    expect(element.textContent).toEqual('x');
-    render(createElement('div', null, 'xx'));
-    expect(element.nodeName).toEqual('DIV');
-    expect(element.textContent).toEqual('xx');
-  });
-
-  it('should re-create element', () => {
-    const element = render(createElement('div', null, 'x'));
-    expect(element.nodeName).toEqual('DIV');
-    expect(element.textContent).toEqual('x');
-    render(createElement('p', null, 'xx'));
-    expect(element.nodeName).toEqual('DIV');
-    expect(element.textContent).toEqual('x');
-    expect(root.firstChild.nodeName).toEqual('P');
-    expect(root.firstChild.textContent).toEqual('xx');
-  });
-
-  it('should replace element with text', () => {
-    let element = render(createElement('div', null,
-      createElement('div', null, 'x')));
-    expect(element.nodeName).toEqual('DIV');
-    expect(element.textContent).toEqual('x');
-    element = render(createElement('div', null, 'xx'));
-    expect(root.firstChild.nodeName).toEqual('DIV');
-    expect(root.firstChild.textContent).toEqual('xx');
-    expect(root.firstChild.children.length).toEqual(0);
-  });
-
-  it('it should update className', () => {
-
-    const element = render(createElement('div', { className: 'a' }, 'x'));
-    expect(element.className).toEqual('a');
-    render(createElement('div', { className: 'a b' }, 'xx'));
-    expect(element.className).toEqual('a b');
-  });
-
-  it('it should reset and apply new style', () => {
-    let element = render(createElement('div', null, 'x'));
-    expect(element.nodeName).toEqual('DIV');
-    expect(element.textContent).toEqual('x');
-    render(createElement("div", { style: { left: '5px' } }));
-    expect(element.style.left).toEqual('5px');
-    render(createElement("div", { style: { top: '50px' } }));
-    expect(element.style.top).toEqual('50px');
-    expect(element.style.left).toEqual('');
-  });
-
-  it('it should reset class and style', () => {
-    let element = render(createElement('div', {
-      className: 'a',
-      style: { left: '5px' }
-    }, 'x'));
-    expect(element.nodeName).toEqual('DIV');
-    expect(element.className).toEqual('a');
-    expect(element.textContent).toEqual('x');
-    expect(element.style.left).toEqual('5px');
-    render(createElement("div", null));
-    expect(element.style.left).toEqual('');
-    expect(element.className).toEqual('');
-  });
-
-  it('it should flatten children', () => {
-    const nodes = [1, 2, 3].map(i => createElement("li", null, i));
-    const node = createElement("ul", null, nodes);
-    expect(node.children.length).toEqual(3);
-  });
-
-  it('it should render array of nodes', () => {
-    const element = render(createElement('div', 'a'));
-    let nodes = {
-      tag: "div",
-      props: null,
-      children: [createElement('div', null, 'x'), createElement('div', null, 'xx')]
-    };
-    render(nodes);
-    expect(element.childNodes[0].textContent).toEqual('x');
-    expect(element.childNodes[1].textContent).toEqual('xx');
-  });
-
-  it('it should render array of text', () => {
-    const element = render(createElement('div', 'a'));
-    const nodes =
-      { "tag": "div", "props": null, "children": [{ "tag": "div", "props": null, "children": ["Hello: ", "world"] }] }
-    for (let i = 0; i < 5; i++){
-      render(nodes);
-      expect(element.textContent).toEqual('Hello: world');
-    }
-  });
-
-  it('it should reuse element based on key', () => {
-    const element = render(createElement('div', null, [
-        createElement('div', {key: 'a'}),
-        createElement('div', {key: 'b'}),
-      ]));
-    element.childNodes[1].k = 'b';
-    render(createElement('div', null, [
-      createElement('div', {key: 'b'}, 'x')
-    ]));
-
-    expect(element.firstChild.textContent).toEqual('x');
-    expect(element.firstChild.k).toBe('b')
-    expect(element.childNodes.length).toBe(1)
-  });
-
-  it('it should retain element based on key', () => {
-    const element = render(createElement('div', null, [
-        createElement('div', {key: 'a'}),
-        createElement('div', {key: 'b'}),
-      ]));
-    element.childNodes[0].k = 'a';
-    element.childNodes[1].k = 'b';
-    render(createElement('div', null, [
-      createElement('div', {key: 'b'}, 'x'),
-      createElement('div', {key: 'a'}, 'xx')
-    ]));
-
-    expect(element.childNodes[0].textContent).toEqual('x');
-    expect(element.childNodes[0].k).toBe('b')
-
-    expect(element.childNodes[1].textContent).toEqual('xx');
-    expect(element.childNodes[1].k).toBe('a')
-  });
-
-
-  it('it should remove element', () => {
-    const element = render(createElement('div', null,
-      createElement('input', null),
-      createElement('input', null),
-      createElement('input', null)
-    ));
-    expect(element.childNodes.length).toBe(3)
-
-    render(createElement('div', null,
-      createElement('img', null),
-      null,
-      createElement('img', null),
-    ));
-    expect(element.childNodes.length).toBe(2)
-    expect(element.outerHTML).toBe('<div><img><img></div>');
-  });
-
-  it('it should remove text child', () => {
-    root.innerHTML = "text";
-    const element = root;
-
-    render(createElement('div', null,
-      createElement('img', null),
-      null,
-      createElement('img', null),
-    ));
-    expect(element.childNodes.length).toBe(1)
-    expect(element.outerHTML).toBe('<div><div><img><img></div></div>');
-  });
-
-});

package/tests/view-engine.spec.js

@@ -1,59 +0,0 @@
-const toHTML = require('../viewEngine')('html');
-
-describe('view engine', () => {
-  it('should not convert vnode to HTML', () => {
-    const html = toHTML({ tag: 'div', props: null, children: null});
-    expect(html).toBe('<div></div>')
-  });
-
-  it('should not convert vnode array to HTML', () => {
-    const html = toHTML([
-      { tag: 'div', props: null, children: null },
-      { tag: 'p', props: null, children: null }
-    ]);
-    expect(html).toBe('<div></div><p></p>');
-  });
-
-  it('should not convert vnode children to HTML', () => {
-    const html = toHTML({
-      tag: 'div', props: null, children: [
-        { tag: 'p', props: null, children: null }]
-    });
-    expect(html).toBe('<div><p></p></div>');
-  });
-
-  it('should not convert vnode props HTML', () => {
-    const html = toHTML({ tag: 'div', props: {id: 1}, children: null });
-    expect(html).toBe('<div id="1"></div>')
-  });
-
-  it('should not convert vnode class HTML', () => {
-    const html = toHTML({ tag: 'div', props: { className: "1" }, children: null });
-    expect(html).toBe('<div class="1"></div>')
-  });
-
-  it('should not convert vnode data attr HTML', () => {
-    const html = toHTML({ tag: 'div', props: { 'data-a': 'a' }, children: null });
-    expect(html).toBe('<div data-a="a"></div>')
-  });
-
-  it('should not convert vnode style props HTML', () => {
-    const html = toHTML({
-      tag: 'div',
-      props: { id: 1, style: { color: 'red' } },
-      children: null
-    });
-    expect(html).toBe('<div id="1" style="color:red"></div>')
-  });
-
-  it('should not convert vnode style props HTML', () => {
-    const html = toHTML({
-      tag: 'div', props: {
-        id: 1,
-        style: { color: 'red', 'background-color': 'green' }
-      },
-      children: null
-    });
-    expect(html).toBe('<div id="1" style="color:red;background-color:green"></div>')
-  });
-})

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "es2015",
-		"module": "commonjs",
-		"jsx": "react",
-		"reactNamespace": "app",
-		"lib": ["dom", "es2015", "es5"],
-		"experimentalDecorators": true,
-		"sourceMap": true
-	}
-}

package/tslint.json

@@ -1,124 +0,0 @@
-{
-  "rules": {
-    // -- Strict errors --
-    // These lint rules are likely always a good idea.
-    // Force function overloads to be declared together. This ensures readers understand APIs.
-    "adjacent-overload-signatures": true,
-    // Do not allow the subtle/obscure comma operator.
-    "ban-comma-operator": true,
-    // Do not allow internal modules or namespaces . These are deprecated in favor of ES6 modules.
-    "no-namespace": true,
-    // Do not allow parameters to be reassigned. To avoid bugs, developers should instead assign new values to new vars.
-    "no-parameter-reassignment": false,
-    // Force the use of ES6-style imports instead of /// <reference path=> imports.
-    "no-reference": true,
-    // Do not allow type assertions that do nothing. This is a big warning that the developer may not understand the
-    // code currently being edited (they may be incorrectly handling a different type case that does not exist).
-    "no-unnecessary-type-assertion": true,
-    // Disallow nonsensical label usage.
-    "label-position": true,
-    // Disallows the (often typo) syntax if (var1 = var2). Replace with if (var2) { var1 = var2 }.
-    "no-conditional-assignment": true,
-    // Disallows constructors for primitive types (e.g. new Number('123'), though Number('123') is still allowed).
-    "no-construct": true,
-    // Do not allow super() to be called twice in a constructor.
-    "no-duplicate-super": true,
-    // Do not allow the same case to appear more than once in a switch block.
-    "no-duplicate-switch-case": true,
-    // Do not allow a variable to be declared more than once in the same block. Consider function parameters in this
-    // rule.
-    "no-duplicate-variable": [
-      true,
-      "check-parameters"
-    ],
-    // Disallows a variable definition in an inner scope from shadowing a variable in an outer scope. Developers should
-    // instead use a separate variable name.
-    "no-shadowed-variable": [false,
-      {
-        "class": true,
-        "enum": true,
-        "function": true,
-        "interface": false,
-        "namespace": true,
-        "typeAlias": false,
-        "typeParameter": false
-      }
-    ],
-    // Empty blocks are almost never needed. Allow the one general exception: empty catch blocks.
-    "no-empty": [
-      false,
-      "allow-empty-catch"
-    ],
-    // Functions must either be handled directly (e.g. with a catch() handler) or returned to another function.
-    // This is a major source of errors in Cloud Functions and the team strongly recommends leaving this rule on.
-    "no-floating-promises": true,
-    // Do not allow any imports for modules that are not in package.json. These will almost certainly fail when
-    // deployed.
-    "no-implicit-dependencies": true,
-    // The 'this' keyword can only be used inside of classes.
-    "no-invalid-this": true,
-    // Do not allow strings to be thrown because they will not include stack traces. Throw Errors instead.
-    "no-string-throw": true,
-    // Disallow control flow statements, such as return, continue, break, and throw in finally blocks.
-    "no-unsafe-finally": true,
-    // Do not allow variables to be used before they are declared.
-    "no-use-before-declare": true,
-    // Expressions must always return a value. Avoids common errors like const myValue = functionReturningVoid();
-    "no-void-expression": [
-      true,
-      "ignore-arrow-function-shorthand"
-    ],
-    // Disallow duplicate imports in the same file.
-    "no-duplicate-imports": true,
-    // -- Strong Warnings --
-    // These rules should almost never be needed, but may be included due to legacy code.
-    // They are left as a warning to avoid frustration with blocked deploys when the developer
-    // understand the warning and wants to deploy anyway.
-    // Warn when an empty interface is defined. These are generally not useful.
-    "no-empty-interface": {
-      "severity": "warning"
-    },
-    // Warn when an import will have side effects.
-    "no-import-side-effect": {
-      "severity": "warning"
-    },
-    // Warn when variables are defined with var. Var has subtle meaning that can lead to bugs. Strongly prefer const for
-    // most values and let for values that will change.
-    "no-var-keyword": {
-      "severity": "warning"
-    },
-    // Prefer === and !== over == and !=. The latter operators support overloads that are often accidental.
-    "triple-equals": {
-      "severity": "warning"
-    },
-    // Warn when using deprecated APIs.
-    "deprecation": {
-      "severity": "warning"
-    },
-    // -- Light Warnigns --
-    // These rules are intended to help developers use better style. Simpler code has fewer bugs. These would be "info"
-    // if TSLint supported such a level.
-    // prefer for( ... of ... ) to an index loop when the index is only used to fetch an object from an array.
-    // (Even better: check out utils like .map if transforming an array!)
-    "prefer-for-of": {
-      "severity": "warning"
-    },
-    // Warns if function overloads could be unified into a single function with optional or rest parameters.
-    "unified-signatures": {
-      "severity": "warning"
-    },
-    // Warns if code has an import or variable that is unused.
-    "no-unused-variable": {
-      "severity": "warning"
-    },
-    // Prefer const for values that will not change. This better documents code.
-    "prefer-const": {
-      "severity": "warning"
-    },
-    // Multi-line object liiterals and function calls should have a trailing comma. This helps avoid merge conflicts.
-    "trailing-comma": {
-      "severity": "warning"
-    }
-  },
-  "defaultSeverity": "error"
-}

package/typescriptreact.json

@@ -1,87 +0,0 @@
-{
-  "AppRun Application": {
-    "prefix": "apprun",
-    "body": [
-      "import app from 'apprun';",
-      "",
-      "const state = {}",
-      "",
-      "const view = (state) => {",
-      "\treturn <div>",
-      "\t\t{state}",
-      "\t</div>",
-      "}",
-      "",
-      "const update = {",
-      "\t'#': (state) => state",
-      "}",
-      "",
-      "app.start('${0:my-app}', state, view, update);"
-    ],
-    "description": "AppRun application"
-  },
-  "AppRun Component": {
-    "prefix": "component",
-    "body": [
-      "import { app, Component } from 'apprun';",
-      "",
-      "export default class extends Component {",
-      "\tstate = {}",
-      "",
-      "\tview = (state) => {",
-      "\t\treturn <div>",
-      "\t\t\t{state}",
-      "\t\t</div>",
-      "\t}",
-      "",
-      "\tupdate = {",
-      "\t\t'#': (state) => state",
-      "\t}",
-      "}"
-    ],
-    "description": "AppRun application"
-  },
-  "AppRun Pure Function Component": {
-    "prefix": "pfc",
-    "body": [
-      "const ${1:Name} = ({ ${2:prop} }) => {",
-      "\treturn <div>",
-      "\t\t$0",
-      "\t</div>",
-      "}"
-    ],
-    "description": "AppRun view function"
-  },
-  "AppRun Update": {
-    "prefix": "@on",
-    "body": [
-      "@on() ${1:name} = (state, ${2:e}) => {",
-      "\treturn { ...state, $2 }",
-      "}"
-    ],
-    "description": "AppRun update function"
-  },
-  "AppRun Log State": {
-    "prefix": "log",
-    "body": [
-      "console.log(${1:state})"
-    ],
-    "description": "Log state"
-  },
-  "AppRun Event Publication": {
-    "prefix": "run",
-    "body": [
-      "{e => ${1|this,app|}.run('$2', e)}"
-    ],
-    "description": "AppRun publish event"
-  },
-  "AppRun Event Subscription": {
-    "prefix": "on",
-    "body": [
-      "app.on('$1', ($2) => {",
-      "\t$3",
-      "})"
-    ],
-    "description": "AppRun subscribe to event"
-  }
-}

package/viewEngine.js

@@ -1,54 +0,0 @@
-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 toHTML(vdom) {
-  if (!vdom) return '';
-  if (Array.isArray(vdom)) return toHTMLArray(vdom)
-  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);
-  else {
-    const html = vdom.toString();
-    return html.startsWith('_html:') ? html.substring(6) : html;
-  }
-}
-
-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 engine(name, options, callback) {
-  const fn = require(name).default;
-  const rendered = fn(options);
-  clean(rendered);
-  return options.ssr ?
-    callback(null, toHTML(rendered)) :
-    callback(null, rendered);
-}
-
-module.exports = function (mode) {
-  return mode === 'html' ? toHTML : engine
-}

package/webpack.config.js

@@ -1,30 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  entry: {
-    'dist/apprun': './src/apprun.ts',
-    'dist/apprun-html': './src/apprun-html.ts',
-    'dist/apprun-dev-tools': './src/apprun-dev-tools.tsx',
-    'demo/app': './demo/main.ts',
-    'demo-html/app': './demo-html/main.tsx'
-  },
-  output: {
-    filename: '[name].js',
-    library: 'apprun',
-    libraryTarget: 'umd',
-    path: path.resolve(__dirname),
-    globalObject: 'this'
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js']
-  },
-  module: {
-    rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader' }
-    ]
-  },
-  devServer: {
-    open: true
-  },
-  devtool: 'source-map'
-}