update v0.4.0

.npmignore

@@ -1,4 +1,4 @@
 src/
 types/tsconfig.tsbuildinfo
-rollup.config.js
+*.config.js
 tsconfig.json

README.md

@@ -6,16 +6,20 @@ Check out MobX JSX performance near the top of the charts on the [JS Frameworks
 
 It accomplishes this with using [Babel Plugin JSX DOM Expressions](https://github.com/ryansolid/babel-plugin-jsx-dom-expressions). It compiles JSX to DOM statements and by using inner parenthesis syntax ```{( )}``` wraps expressions in functions that can be called by the library of choice. In this case autorun wrap these expressions ensuring the view stays up to date. Unlike Virtual DOM only the changed nodes are affected and the whole tree is not re-rendered over and over.
 
-To use simply import r and wrap your code in a root:
+To use simply wrap your code in a root:
 
 ```js
-import { r, root } from 'mobx-jsx';
+import { root } from 'mobx-jsx';
 
 root(() => document.body.appendChild(<App />))
 ```
 
 And include 'babel-plugin-jsx-dom-expressions' in your babelrc, webpack babel loader, or rollup babel plugin.
 
+```js
+"plugins": [["jsx-dom-expressions", {moduleName: 'mobx-jsx'}]]
+```
+
 # Installation
 
 ```sh

dom-expressions.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  output: 'src/runtime.js',
+  variables: {
+    imports: [
+      `import { untracked } from 'mobx'`,
+      `import { root as mRoot, cleanup as mCleanup, computed as mComputed } from './core'`
+    ],
+    computed: 'mComputed',
+    sample: 'untracked',
+    root: 'mRoot',
+    cleanup: 'mCleanup'
+  }
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mobx-jsx",
   "description": "Raw MobX performance without the restraints of a Virtual DOM",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -12,19 +12,17 @@
   "main": "lib/index.js",
   "types": "types/index.d.ts",
   "scripts": {
-    "build": "rollup -c && tsc",
+    "build": "dom-expressions && rollup -c && tsc",
     "prepublishOnly": "npm run build"
   },
-  "dependencies": {
-    "dom-expressions": "~0.7.7"
-  },
   "devDependencies": {
     "@babel/core": "7.4.3",
     "@babel/preset-typescript": "7.3.3",
-    "hyper-dom-expressions": "0.7.3",
-    "lit-dom-expressions": "0.7.3",
+    "dom-expressions": "~0.8.0",
+    "hyper-dom-expressions": "~0.8.0",
+    "lit-dom-expressions": "~0.8.0",
     "mobx": "^5.9.0",
-    "rollup": "^1.10.1",
+    "rollup": "^1.11.3",
     "rollup-plugin-babel": "4.3.2",
     "rollup-plugin-node-resolve": "4.2.3",
     "typescript": "3.4.4"

rollup.config.js

@@ -22,7 +22,7 @@ export default [{
     format: 'es',
     file: 'dist/index.js'
   }],
-  external: ['mobx', 'dom-expressions'],
+  external: ['mobx'],
   plugins
 }, {
   input: 'src/html.ts',

src/core.ts

@@ -0,0 +1,35 @@
+import { autorun, untracked } from 'mobx'
+
+type Context = { disposables: any[] };
+let globalContext: Context;
+
+export function root<T>(fn: (dispose: () => void) => T) {
+  let context, d: any[], ret: T;
+  context = globalContext;
+  globalContext = {
+    disposables: d = []
+  };
+  ret = untracked(() =>
+    fn(() => {
+      let disposable, k, len: number;
+      for (k = 0, len = d.length; k < len; k++) {
+        disposable = d[k];
+        disposable();
+      }
+      d = [];
+    })
+  );
+  globalContext = context;
+  return ret;
+};
+
+export function cleanup(fn: () => void) {
+  let ref;
+  (ref = globalContext) != null && ref.disposables.push(fn);
+}
+
+export function computed<T>(fn: (prev?: T) => T) {
+  let current: T,
+    dispose = autorun(() => current = fn(current));
+  cleanup(dispose);
+}

src/h.ts

@@ -1,5 +1,5 @@
 import { createHyperScript } from 'hyper-dom-expressions';
-import { r } from './index';
-export * from './index';
+import * as r from './index';
 
+export { root, cleanup, selectWhen, selectEach } from './index';
 export const h = createHyperScript(r);

src/html.ts

@@ -1,5 +1,5 @@
 import { createHTML } from 'lit-dom-expressions';
-import { r } from './index';
-export * from './index';
+import * as r from './index';
 
+export { root, cleanup, selectWhen, selectEach } from './index';
 export const html = createHTML(r);