Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

solid-js

Package Overview
Dependencies
Maintainers
1
Versions
463
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

solid-js - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

28

dist/dom.js

@@ -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');

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc