3 files changed, 52 insertions(+), 49 deletions(-)

M package.json
M src/main.js
M test/main.js

@@ 1,6 1,6 @@
 {
   "name": "wigly",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "main": "dist/wigly.es5.js",
   "module": "src/main.js",
   "scripts": {

@@ 1,12 1,12 @@
-import { h as createElement, patch } from "superfine";
+let superfine = require("superfine");
 
 let current;
 let defer = Promise.resolve().then.bind(Promise.resolve());
 
 let runEffects = (el, self) => {
   for (let key in self.effects) {
-    let { prev, args = [], f, cleanup } = self.effects[key];
-    if (typeof prev === "undefined" || args.length === 0 || prev.join() !== args.join()) {
+    let { prev, args, f, cleanup } = self.effects[key];
+    if (args && f && (typeof prev === "undefined" || args.length === 0 || prev.join() !== args.join())) {
       if (cleanup) cleanup();
       self.effects[key] = { prev: args, cleanup: f(el) };
     }


@@ 31,7 31,7 @@ let transformer = async (spec, getEnv, giveEnv, giveVDOM, updateVDOM) => {
 
   let { f, props, children = [] } = spec;
 
-  children = children.filter(item => !!item);
+  children = children.filter(item => !!item); // remove nullies
 
   if (typeof f === "function") {
     let lastvdom;


@@ 50,7 50,7 @@ let transformer = async (spec, getEnv, giveEnv, giveVDOM, updateVDOM) => {
           giveEnv,
           next => {
             if (lastvdom && lastvdom.element && lastvdom.element.parentElement) {
-              lastvdom = patch(lastvdom, next, lastvdom.element.parentElement);
+              lastvdom = superfine.patch(lastvdom, next, lastvdom.element.parentElement);
             }
           },
           updateVDOM


@@ 111,22 111,25 @@ let transformer = async (spec, getEnv, giveEnv, giveVDOM, updateVDOM) => {
         );
       },
       (component, key, vdom) => {
-        Object.assign(
-          lastvdom,
-          traverse(lastvdom, item => {
-            if (item.internal && item.internal.f === component && key === item.props.key) {
-              return vdom;
-            } else {
-              return item;
-            }
-          })
+        updateVDOM(
+          f,
+          props.key,
+          Object.assign(
+            lastvdom,
+            traverse(lastvdom, item => {
+              if (item.internal && item.internal.f === component && key === item.props.key) {
+                return vdom;
+              } else {
+                return item;
+              }
+            })
+          )
         );
-        // updateVDOM(f, props.key, lastvdom); // we probably need this yea?
       }
     );
   } else {
     giveVDOM(
-      createElement(
+      superfine.h(
         f,
         props,
         await Promise.all(


@@ 141,11 144,9 @@ let transformer = async (spec, getEnv, giveEnv, giveVDOM, updateVDOM) => {
   }
 };
 
-export let h = (f, props, ...children) => {
-  return { f, props: props || {}, children: [].concat.apply([], children) };
-};
+let h = (f, props, ...children) => ({ f, props: props || {}, children: [].concat.apply([], children) });
 
-export let state = init => {
+let state = init => {
   let curr = current;
   let key = curr.iter++;
   let val = curr.states[key];


@@ 167,34 168,35 @@ export let state = init => {
   ];
 };
 
-export let effect = (f, ...args) => {
+let effect = (f, ...args) => {
   let key = current.iter++;
   let last = current.effects[key];
   current.effects[key] = { prev: [], ...last, f, args };
 };
 
-export let render = (f, el) => {
-  let cb = () => {};
-
-  defer(() => {
+let render = (f, el) => {
+  return new Promise(resolve => {
     transformer(
       h(() => f),
       () => ({}),
       () => ({}),
       vdom => {
-        patch(null, vdom, el);
-        cb(vdom.element);
+        superfine.patch(null, vdom, el);
+        resolve(vdom.element);
       },
       () => {}
     );
   });
-
-  // promise mock
-  return {
-    then: f => {
-      cb = f;
-    }
-  };
 };
 
-export default { render, state, effect, h };
+module.exports = {
+  // base
+  h,
+  render,
+  state,
+  effect,
+  // react esque
+  createElement: h,
+  useState: state,
+  useEffect: effect
+};

@@ 1,35 1,32 @@
 require("browser-env")();
 
 let test = require("ava");
-let { h, render, state, effect } = require("../dist/wigly.es6");
+let { h, render, state, effect } = require("../src/main");
 
-let click = async query => {
-  let $ = document.querySelector.bind(document);
-  let sleep = (t = 0) => new Promise(r => setTimeout(r, t));
-  $(query).click();
-  await sleep();
-};
+let sleep = t => new Promise(r => setTimeout(r, t));
 
-test("'Hello, World'", t => {
+test("'Hello, World'", async t => {
   let App = () => {
     let [msg] = state("Hello, World!");
     return <div>{msg}</div>;
   };
 
-  render(<App />, document.body);
+  await render(<App />, document.body);
 
   t.deepEqual(document.body.textContent, "Hello, World!");
 });
 
 test("Effects works as mounted and unmounted.", async t => {
   t.plan(2);
+
   let Child = () => {
     effect(() => {
       t.deepEqual(true, true);
       return () => t.deepEqual(true, true);
     });
-    return h("div", {}, "Child goes here.");
+    return <div>child goes here</div>;
   };
+
   let App = () => {
     let [displayChild, set] = state(false);
     return (


@@ 39,7 36,11 @@ test("Effects works as mounted and unmounted.", async t => {
       </div>
     );
   };
-  render(<App />, document.body);
-  await click("button");
-  await click("button");
+
+  let el = await render(<App />, document.body);
+
+  el.querySelector("button").click();
+  el.querySelector("button").click();
+
+  await sleep();
 });