Comparing version 0.0.13 to 0.0.14
@@ -22,16 +22,8 @@ import { createRuntime } from 'babel-plugin-jsx-dom-expressions'; | ||
let eventId = 0; | ||
function delegateEvent(eventName, handler) { | ||
let attached = null, | ||
eId = ++eventId, | ||
fn = handleEvent(handler, eId); | ||
S.cleanup(() => attached && attached.removeEventListener(eventName, fn)); | ||
return data => element => { | ||
element[`__ev$${eventName}`] = data; | ||
function delegateEvent(element, eventName, handler) { | ||
let eId = ++eventId; | ||
element.addEventListener(eventName, handleEvent(handler, eId)); | ||
return (element, value) => { | ||
element[`__ev$${eventName}`] = value(); | ||
element[`__ev$${eventName}Id`] = eId; | ||
if (attached) return; | ||
attached = true; | ||
Promise.resolve().then(() => { | ||
attached = 'getRootNode' in element ? element.getRootNode() : document; | ||
attached.addEventListener(eventName, fn); | ||
}); | ||
} | ||
@@ -48,5 +40,6 @@ } | ||
}); | ||
return id => element => { | ||
return (element, value) => { | ||
let id = value(); | ||
index[id] = element; | ||
S.cleanup(() => index[id] = null); | ||
S.cleanup(function() { index[id] = null; }); | ||
} | ||
@@ -64,5 +57,6 @@ } | ||
}); | ||
return id => element => { | ||
return (element, value) => { | ||
let id = value(); | ||
index[id] = element; | ||
S.cleanup(() => index[id] = null); | ||
S.cleanup(function() { index[id] = null; }); | ||
} | ||
@@ -69,0 +63,0 @@ } |
import S from 's-js'; | ||
import $$observable$1 from 'symbol-observable'; | ||
import $$observable from 'symbol-observable'; | ||
@@ -27,26 +27,2 @@ function comparer(v, k, b, isArray, path, r) { | ||
function fromPromise(promise, seed) { | ||
let s = S.makeDataNode(seed), | ||
complete = false; | ||
promise | ||
.then((value) => { | ||
if (complete) return; | ||
s.next(value); | ||
}).catch(err => console.error(err)); | ||
S.cleanup(function dispose() { complete = true; }); | ||
return () => s.current(); | ||
} | ||
function fromObservable(observable, seed) { | ||
let s = S.makeDataNode(seed), | ||
disposable = observable.subscribe(v => s.next(v), err => console.error(err)); | ||
S.cleanup(function dispose() { | ||
disposable.unsubscribe(); | ||
disposable = null; | ||
}); | ||
return () => s.current(); | ||
} | ||
function isObject(obj) { | ||
@@ -116,11 +92,2 @@ let ref; | ||
function from(input, seed) { | ||
if (isObject(input)) { | ||
if (typeof input === 'function') return input; | ||
if ($$observable$1 in input) return fromObservable(input[$$observable$1](), seed); | ||
if ('then' in input) return fromPromise(input, seed); | ||
} | ||
throw new Error('from() input must be a function, Promise, or Observable'); | ||
} | ||
function select() { | ||
@@ -150,3 +117,3 @@ const mapFn1 = selection => () => { | ||
if (typeof selection === 'function' || 'then' in selection || 'subscribe' in selection) { | ||
S.makeComputationNode(mapFn1(from(selection))); | ||
S.makeComputationNode(mapFn1(selection)); | ||
continue; | ||
@@ -156,3 +123,3 @@ } | ||
if (!(key in this)) this._defineProperty(key); | ||
S.makeComputationNode(mapFn2(key, from(selection[key]))); | ||
S.makeComputationNode(mapFn2(key, selection[key])); | ||
} | ||
@@ -575,5 +542,37 @@ } | ||
function fromPromise(promise, seed) { | ||
let s = S.makeDataNode(seed), | ||
complete = false; | ||
promise | ||
.then((value) => { | ||
if (complete) return; | ||
s.next(value); | ||
}).catch(err => console.error(err)); | ||
S.cleanup(function dispose() { complete = true; }); | ||
return () => s.current(); | ||
} | ||
function fromObservable(observable, seed) { | ||
let s = S.makeDataNode(seed), | ||
disposable = observable.subscribe(v => s.next(v), err => console.error(err)); | ||
S.cleanup(function dispose() { | ||
disposable.unsubscribe(); | ||
disposable = null; | ||
}); | ||
return () => s.current(); | ||
} | ||
function from(input, seed) { | ||
if (isObject(input)) { | ||
if (typeof input === 'function') return input; | ||
if ($$observable in input) return fromObservable(input[$$observable](), seed); | ||
if ('then' in input) return fromPromise(input, seed); | ||
} | ||
throw new Error('from() input must be a function, Promise, or Observable'); | ||
} | ||
function map(fn) { | ||
return function mapper(input) { | ||
input = from(input); | ||
return () => { | ||
@@ -591,3 +590,2 @@ const value = input(); | ||
return (input) => { | ||
input = from(input); | ||
return fns.reduce(((prev, fn) => fn(prev)), input); | ||
@@ -594,0 +592,0 @@ }; |
@@ -105,11 +105,9 @@ # Signals | ||
```js | ||
import { pipe, map, from } from 'solid-js'; | ||
import { pipe, map } from 'solid-js'; | ||
function someOperator(...someArguments) { | ||
return function(input) { | ||
// lift the input into a Signal if isn't already | ||
input = from(input) | ||
return () => | ||
//...do some calculation based on input | ||
) | ||
// return fn(input()) | ||
} | ||
@@ -116,0 +114,0 @@ } |
@@ -28,16 +28,8 @@ 'use strict'; | ||
let eventId = 0; | ||
function delegateEvent(eventName, handler) { | ||
let attached = null, | ||
eId = ++eventId, | ||
fn = handleEvent(handler, eId); | ||
S.cleanup(() => attached && attached.removeEventListener(eventName, fn)); | ||
return data => element => { | ||
element[`__ev$${eventName}`] = data; | ||
function delegateEvent(element, eventName, handler) { | ||
let eId = ++eventId; | ||
element.addEventListener(eventName, handleEvent(handler, eId)); | ||
return (element, value) => { | ||
element[`__ev$${eventName}`] = value(); | ||
element[`__ev$${eventName}Id`] = eId; | ||
if (attached) return; | ||
attached = true; | ||
Promise.resolve().then(() => { | ||
attached = 'getRootNode' in element ? element.getRootNode() : document; | ||
attached.addEventListener(eventName, fn); | ||
}); | ||
} | ||
@@ -54,5 +46,6 @@ } | ||
}); | ||
return id => element => { | ||
return (element, value) => { | ||
let id = value(); | ||
index[id] = element; | ||
S.cleanup(() => index[id] = null); | ||
S.cleanup(function() { index[id] = null; }); | ||
} | ||
@@ -70,5 +63,6 @@ } | ||
}); | ||
return id => element => { | ||
return (element, value) => { | ||
let id = value(); | ||
index[id] = element; | ||
S.cleanup(() => index[id] = null); | ||
S.cleanup(function() { index[id] = null; }); | ||
} | ||
@@ -75,0 +69,0 @@ } |
@@ -8,3 +8,3 @@ 'use strict'; | ||
var S = _interopDefault(require('s-js')); | ||
var $$observable$1 = _interopDefault(require('symbol-observable')); | ||
var $$observable = _interopDefault(require('symbol-observable')); | ||
@@ -34,26 +34,2 @@ function comparer(v, k, b, isArray, path, r) { | ||
function fromPromise(promise, seed) { | ||
let s = S.makeDataNode(seed), | ||
complete = false; | ||
promise | ||
.then((value) => { | ||
if (complete) return; | ||
s.next(value); | ||
}).catch(err => console.error(err)); | ||
S.cleanup(function dispose() { complete = true; }); | ||
return () => s.current(); | ||
} | ||
function fromObservable(observable, seed) { | ||
let s = S.makeDataNode(seed), | ||
disposable = observable.subscribe(v => s.next(v), err => console.error(err)); | ||
S.cleanup(function dispose() { | ||
disposable.unsubscribe(); | ||
disposable = null; | ||
}); | ||
return () => s.current(); | ||
} | ||
function isObject(obj) { | ||
@@ -123,11 +99,2 @@ let ref; | ||
function from(input, seed) { | ||
if (isObject(input)) { | ||
if (typeof input === 'function') return input; | ||
if ($$observable$1 in input) return fromObservable(input[$$observable$1](), seed); | ||
if ('then' in input) return fromPromise(input, seed); | ||
} | ||
throw new Error('from() input must be a function, Promise, or Observable'); | ||
} | ||
function select() { | ||
@@ -157,3 +124,3 @@ const mapFn1 = selection => () => { | ||
if (typeof selection === 'function' || 'then' in selection || 'subscribe' in selection) { | ||
S.makeComputationNode(mapFn1(from(selection))); | ||
S.makeComputationNode(mapFn1(selection)); | ||
continue; | ||
@@ -163,3 +130,3 @@ } | ||
if (!(key in this)) this._defineProperty(key); | ||
S.makeComputationNode(mapFn2(key, from(selection[key]))); | ||
S.makeComputationNode(mapFn2(key, selection[key])); | ||
} | ||
@@ -582,5 +549,37 @@ } | ||
function fromPromise(promise, seed) { | ||
let s = S.makeDataNode(seed), | ||
complete = false; | ||
promise | ||
.then((value) => { | ||
if (complete) return; | ||
s.next(value); | ||
}).catch(err => console.error(err)); | ||
S.cleanup(function dispose() { complete = true; }); | ||
return () => s.current(); | ||
} | ||
function fromObservable(observable, seed) { | ||
let s = S.makeDataNode(seed), | ||
disposable = observable.subscribe(v => s.next(v), err => console.error(err)); | ||
S.cleanup(function dispose() { | ||
disposable.unsubscribe(); | ||
disposable = null; | ||
}); | ||
return () => s.current(); | ||
} | ||
function from(input, seed) { | ||
if (isObject(input)) { | ||
if (typeof input === 'function') return input; | ||
if ($$observable in input) return fromObservable(input[$$observable](), seed); | ||
if ('then' in input) return fromPromise(input, seed); | ||
} | ||
throw new Error('from() input must be a function, Promise, or Observable'); | ||
} | ||
function map(fn) { | ||
return function mapper(input) { | ||
input = from(input); | ||
return () => { | ||
@@ -598,3 +597,2 @@ const value = input(); | ||
return (input) => { | ||
input = from(input); | ||
return fns.reduce(((prev, fn) => fn(prev)), input); | ||
@@ -601,0 +599,0 @@ }; |
{ | ||
"name": "solid-js", | ||
"description": "A declarative JavaScript library for building user interfaces.", | ||
"version": "0.0.13", | ||
"version": "0.0.14", | ||
"author": "Ryan Carniato", | ||
@@ -22,3 +22,3 @@ "license": "MIT", | ||
"peerDependencies": { | ||
"babel-plugin-jsx-dom-expressions": "~0.0.26", | ||
"babel-plugin-jsx-dom-expressions": "~0.0.28", | ||
"s-js": "~0.4.9" | ||
@@ -25,0 +25,0 @@ }, |
@@ -12,6 +12,8 @@ # Solid.js | ||
* ES6 Proxies to keep data access simple and POJO like | ||
* Promises and ES Observables are first class citizens: | ||
* Easy Promises and ES Observables interoptability: | ||
* Easy interopt with existing libraries that manage services and state. | ||
* All Selectors when resolved to these automatically update asynchronously allowing for 100% pure data declarations. | ||
* Async Functions are first class citizens and Selectors can be written using them. | ||
* from operator converts Promise or Observable to a Signal. | ||
* Expandable custom operators and binding directives. | ||
* Truly just a render library | ||
@@ -83,3 +85,3 @@ * Unopinionated about how you set modularize/componentize your code | ||
Whenever any dependency changes the State value will immediately update. Internally all JSX expressions also get wrapped in Selectors so for something as trivial as a display name you could just inline the expression in the template and have it update automatically. | ||
Whenever any dependency changes the State value will immediately update. Internally all JSX expressions also get wrapped in computations so for something as trivial as a display name you could just inline the expression in the template and have it update automatically. | ||
@@ -90,3 +92,3 @@ This is also primary mechanism to interopt with store technologies like Redux, Apollo, RxJS which expose themselves as Observables or Promises. When you hook up these Selectors you can use standard methods to map the properties you want and the State object will automatically diff the changes to only affect the minimal amount. | ||
props.select({ | ||
myCounter: map(({counter}) => counter)(store.observable()) | ||
myCounter: map(({counter}) => counter)(from(store.observable())) | ||
}) | ||
@@ -93,0 +95,0 @@ ``` |
const S = require('s-js'); | ||
const { ImmutableState } = require('../lib/solid'); | ||
const { ImmutableState, from } = require('../lib/solid'); | ||
@@ -128,3 +128,3 @@ describe('state.set', () => { | ||
state.select({ data: p }); | ||
state.select({ data: from(p) }); | ||
await p; | ||
@@ -131,0 +131,0 @@ expect(state.data).toBe('promised'); |
const S = require('s-js'); | ||
const { State } = require('../lib/solid'); | ||
const { State, from } = require('../lib/solid'); | ||
@@ -128,3 +128,3 @@ describe('state.set', () => { | ||
state.select({ data: p }); | ||
state.select({ data: from(p) }); | ||
await p; | ||
@@ -131,0 +131,0 @@ expect(state.data).toBe('promised'); |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
161
90478
1997