update typedefs

.gitignore

@@ -3,5 +3,4 @@ dist/
 lib/
 .vscode/
 coverage/
-types/
-tsconfig.tsbuildinfo
+types/

.npmignore

@@ -3,5 +3,7 @@ documentation/
 src/
 rollup.config.js
 test/
+types/tsconfig.tsbuildinfo
 coverage/
-.travis.yml
+.travis.yml
+tsconfig.json

dom/package.json

@@ -2,5 +2,6 @@
   "name": "solid-js/dom",
   "main": "../lib/dom.js",
   "module": "../dist/dom.js",
+  "types": "../types/dom/index.d.ts",
   "sideEffects": false
 }

h/package.json

@@ -2,5 +2,6 @@
   "name": "solid-js/h",
   "main": "../lib/h.js",
   "module": "../dist/h.js",
+  "types": "../types/dom/h.d.ts",
   "sideEffects": false
 }

html/package.json

@@ -2,5 +2,6 @@
   "name": "solid-js/html",
   "main": "../lib/html.js",
   "module": "../dist/html.js",
+  "types": "../types/dom/html.d.ts",
   "sideEffects": false
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "0.5.0",
+  "version": "0.5.1-beta.1",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -21,7 +21,7 @@
     "test": "npm run build && jest --coverage"
   },
   "dependencies": {
-    "dom-expressions": "~0.7.1",
+    "dom-expressions": "~0.7.7",
     "s-js": "~0.4.9"
   },
   "devDependencies": {
@@ -30,6 +30,8 @@
     "coveralls": "^3.0.3",
     "jest": "~24.7.1",
     "npm-run-all": "^4.1.5",
+    "hyper-dom-expressions": "0.7.3",
+    "lit-dom-expressions": "0.7.3",
     "rimraf": "^2.6.3",
     "rollup": "^1.10.0",
     "rollup-plugin-babel": "^4.3.2",

rollup.config.js

@@ -5,7 +5,8 @@ const plugins = [nodeResolve({
   extensions: ['.js', '.ts']
 }), babel({
   extensions: ['.js', '.ts'],
-  exclude: 'node_modules/**'
+  exclude: 'node_modules/**',
+  "presets": ["@babel/preset-typescript"],
 })]
 
 export default [{
@@ -20,7 +21,7 @@ export default [{
   external: ['s-js'],
   plugins
 }, {
-  input: 'src/dom/index.js',
+  input: 'src/dom/index.ts',
   output: [{
     file: 'lib/dom.js',
     format: 'cjs'
@@ -31,25 +32,25 @@ export default [{
   external: ['s-js', 'dom-expressions'],
   plugins
 }, {
-  input: 'src/dom/html.js',
+  input: 'src/dom/html.ts',
   output: [{
     file: 'lib/html.js',
     format: 'cjs'
   }, {
     file: 'dist/html.js',
     format: 'es'
   }],
-  external: ['solid-js/dom', 'lit-dom-expressions'],
+  external: ['./index', 'lit-dom-expressions'],
   plugins
 }, {
-  input: 'src/dom/h.js',
+  input: 'src/dom/h.ts',
   output: [{
     file: 'lib/h.js',
     format: 'cjs'
   }, {
     file: 'dist/h.js',
     format: 'es'
   }],
-  external: ['solid-js/dom', 'hyper-dom-expressions'],
+  external: ['./index', 'hyper-dom-expressions'],
   plugins
 }];

src/dom/h.js → src/dom/h.ts

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

src/dom/html.ts

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

src/dom/index.ts

@@ -0,0 +1,55 @@
+import { createRuntime } from 'dom-expressions';
+import S from 's-js';
+
+type DelegatableNode = Node & { model: any }
+
+function createHandler(className: string) {
+  return (e: HTMLElement, s: boolean) => e.classList.toggle(className, s);
+}
+
+function shallowDiff(a: HTMLElement[], b: HTMLElement[]) {
+  let sa = new Set(a), sb = new Set(b);
+  return [a.filter(i => !sb.has(i)), (b.filter(i => !sa.has(i)))];
+}
+
+export const r = createRuntime({wrap: S.makeComputationNode, root: S.root, cleanup: S.cleanup, sample: S.sample});
+
+export function selectWhen(signal: () => any, handler: string) : (s: Node, e: Node | null) => void
+export function selectWhen(signal: () => any, handler: (element: HTMLElement, selected: boolean) => void) : (s: Node, e: Node | null) => void
+export function selectWhen(signal: () => any, handler: any) : (s: Node, e: Node | null) => void {
+  if (typeof handler === 'string') handler = createHandler(handler);
+  let start: Node, end: Node | null;
+  S.makeComputationNode((element?: HTMLElement) => {
+    const model = signal();
+    if (element) handler(element, false);
+    let marker: Node | null = start;
+    while(marker && marker !== end) {
+      if ((marker as DelegatableNode).model === model) {
+        handler(marker, true);
+        return marker;
+      }
+      marker = marker.nextSibling;
+    }
+  });
+  return (s, e) => (start = s, end = e);
+}
+
+export function selectEach(signal: () => any, handler: string) : (s: Node, e: Node | null) => void
+export function selectEach(signal: () => any, handler: (element: HTMLElement, selected: boolean) => void) : (s: Node, e: Node | null) => void
+export function selectEach(signal: () => any, handler: any) : (s: Node, e: Node | null) => void {
+  if (typeof handler === 'string') handler = createHandler(handler);
+  let start: Node, end: Node | null;
+  S.makeComputationNode((elements: HTMLElement[] = []) => {
+    const models = signal(), newElements = [];
+    let marker: Node | null = start;
+    while(marker && marker !== end) {
+      if (models.indexOf((marker as DelegatableNode).model) > -1) newElements.push(marker as HTMLElement);
+      marker = marker.nextSibling;
+    }
+    const [additions, removals] = shallowDiff(newElements, elements);
+    additions.forEach(el => handler(el, true));
+    removals.forEach(el => handler(el, false));
+    return newElements;
+  });
+  return (s, e) => (start = s, end = e);
+}

src/reconcile.ts

@@ -1,6 +1,10 @@
 import { setProperty, unwrap, isWrappable } from './state';
 
-function applyState(target, parent, property, merge, key) {
+type ReconcileOptions = {
+  key?: string, merge?: boolean
+}
+
+function applyState(target: any, parent: any, property: string | number, merge: boolean | undefined, key: string) {
   let previous = parent[property];
   if (target === previous) return;
   if (!isWrappable(target) || (previous == null)) {
@@ -68,8 +72,11 @@ function applyState(target, parent, property, merge, key) {
 }
 
 // Diff method for setState
-export function reconcile(path, options = {}) {
-  let value;
+export function reconcile(...path: any[]): (state: any) => void
+export function reconcile(value: any): (state: any) => void
+export function reconcile(path: any[], options: ReconcileOptions): (state: any) => void
+export function reconcile(path: any, options: ReconcileOptions = {}): (state: any) => void {
+  let value: any;
   if (Array.isArray(path)) {
     value = path.pop();
   } else if (typeof path === 'object') {
@@ -80,7 +87,7 @@ export function reconcile(path, options = {}) {
     value = arguments[arguments.length - 1];
     options = {};
   }
-  const { merge, key = 'id' } = options as any;
+  const { merge, key = 'id' } = options;
   return state => {
     state = unwrap(state);
     if (path) {