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

solid-js

Package Overview
Dependencies
Maintainers
1
Versions
463
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

solid-js - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

documentation/operators.md

6

dist/dom.js

@@ -26,3 +26,3 @@ import { createRuntime } from 'babel-plugin-jsx-dom-expressions';

return (element, value) => {
element[`__ev$${eventName}`] = value();
element[`__ev$${eventName}`] = S.sample(value);
element[`__ev$${eventName}Id`] = eId;

@@ -41,3 +41,3 @@ }

return (element, value) => {
let id = value();
let id = S.sample(value);
index[id] = element;

@@ -58,3 +58,3 @@ S.cleanup(function() { index[id] = null; });

return (element, value) => {
let id = value();
let id = S.sample(value);
index[id] = element;

@@ -61,0 +61,0 @@ S.cleanup(function() { index[id] = null; });

56

dist/solid.js
import S from 's-js';
import $$observable from 'symbol-observable';

@@ -67,3 +66,3 @@ function comparer(v, k, b, isArray, path, r) {

function unwrap(item, deep) {
let k, result, unwrapped, v;
let keys, result, unwrapped, v;
if (result = item != null ? item._state : void 0) return result;

@@ -73,5 +72,6 @@

for (k in item) {
v = item[k];
if ((unwrapped = unwrap(v, true)) !== v) item[k] = unwrapped;
keys = Object.keys(item);
for (let i = 0, l = keys.length; i < l; i++) {
v = item[keys[i]];
if ((unwrapped = unwrap(v, true)) !== v) item[keys[i]] = unwrapped;
}

@@ -86,7 +86,3 @@ return item;

const obj = {};
for (let k in v) {
obj[k] = v[k];
}
return obj;
return Object.assign({}, v);
}

@@ -161,3 +157,3 @@

isArray = Array.isArray(item),
value, notify;
value, notify, keys;

@@ -177,10 +173,10 @@ if (arguments.length === 3) {

for (const property in changes) {
if (changes.hasOwnProperty(property)) {
notify = isArray || !(property in item);
value = unwrap(changes[property]);
if (value === void 0) delete item[property];
else item[property] = value;
trigger(node, property, notify);
}
keys = Object.keys(changes);
for (let i = 0, l = keys.length; i < l; i++) {
const property = keys[i];
notify = isArray || !(property in item);
value = unwrap(changes[property]);
if (value === void 0) delete item[property];
else item[property] = value;
trigger(node, property, notify);
}

@@ -238,3 +234,7 @@ }

} else {
for (let property in args[0]) this._setProperty(property, args[0][property]);
const keys = Object.keys(args[0]);
for (let i = 0, l = keys.length; i < l; i++) {
const property = keys[i];
this._setProperty(property, args[0][property]);
}
}

@@ -571,3 +571,3 @@ return;

if (typeof input === 'function') return input;
if ($$observable in input) return fromObservable(input[$$observable](), seed);
if (Symbol.observable in input) return fromObservable(input[Symbol.observable](), seed);
if ('then' in input) return fromPromise(input, seed);

@@ -578,2 +578,6 @@ }

function pipe(input, ...fns) {
compose(...fns)(input);
}
function map(fn) {

@@ -589,3 +593,3 @@ return function mapper(input) {

function pipe(...fns) {
function compose(...fns) {
if (!fns) return i => i;

@@ -717,3 +721,3 @@ if (fns.length === 1) return fns[0];

function observable(input) {
if ($$observable in input) return input[$$observable]();
if (Symbol.observable in input) return input[Symbol.observable]();
return {

@@ -734,8 +738,10 @@ subscribe(observer) {

},
[$$observable]() { return this; }
[Symbol.observable]() { return this; }
};
}
// ensure Symbol.observable
if (!Symbol.observable) Symbol.observable = Symbol('observable');
const root = S.root;
export { root, State, ImmutableState, unwrap, from, map, pipe, memo, observable };
export { root, State, ImmutableState, unwrap, from, pipe, map, compose, memo, observable };

61

documentation/signals.md

@@ -5,3 +5,3 @@ # Signals

At it's core Solid uses [S.js](https://github.com/adamhaile/S) to propogate it's change detection. Signals are a simple primitive that contain values that change over time. With Signals you can track sorts of changes from various sources in your applications. You can create a Signal manually or from any Async source.
At it's core Solid uses [S.js](https://github.com/adamhaile/S) to propagate it's change detection. Signals are a simple primitive that contain values that change over time. With Signals you can track sorts of changes from various sources in your applications. You can create a Signal manually or from any Async source.

@@ -66,60 +66,1 @@ ```js

Observables can work well with Signals as being a source that feeds data into them. Like State, Observables are another tool that allow more control in a specific aspect of your application. Where State is valuable for reconciling multiple Signals together into a serializable structure to keep managing Component or Storage code simple, Observables are useful for transforming Async data pipelines like handling Data Communication services.
## Operators
Operators in Solid are functionally composable or pipeable and constructed using currying. They all take their arguments and return a function that takes a function, Observable, or Promise. In so when using Solid you may find you aren't explicitly using the Signal factory as much as you might expect.
```js
import { State, map } from 'solid-js'
state = new State({name: 'Heather', count: 1});
// single expression
upperName$ = map((name) => name.toUpperCase())(() => state.name)
// in steps
reverseName = map((name) => name.reverse())
reverseUpperName$ = reverseName(upperName$)
```
Solid.js only contains a very small subset of operators helpful for rendering or connecting other observable libraries. If you require more operators it's recommended to write your own or use with a more complete library like RxJS.
Current operators:
### map((value) =>....)
Maps a value to a new value.
### memo((item) =>....)
A super mapper for rendering, memo is a memoized map that returns previously mapped value if input value is the same. It automatically splits across arrays and clears on falsey values.
### pipe(...operators)
This composes a sequence of operators into a single operator.
### from(fn|observable|promise)
No-op for fn's, but ensures observables/promises are made into a Signal.
### observable(s)
Returns a minimal observable implementation.
To write your own pipeable operator involves creating a function that returns a function that takes a thunk and returns a new thunk. Generally it looks like this:
```js
import { pipe, map } from 'solid-js';
function someOperator(...someArguments) {
return function(input) {
return () =>
//...do some calculation based on input
// return fn(input())
}
}
// now you can use it in a pipe
var s = S.data(),
someArguments; //whatever they are
pipe(
map(i => i)
someOperator(someArguments)
)(s);
```

6

lib/dom.js

@@ -32,3 +32,3 @@ 'use strict';

return (element, value) => {
element[`__ev$${eventName}`] = value();
element[`__ev$${eventName}`] = S.sample(value);
element[`__ev$${eventName}Id`] = eId;

@@ -47,3 +47,3 @@ }

return (element, value) => {
let id = value();
let id = S.sample(value);
index[id] = element;

@@ -64,3 +64,3 @@ S.cleanup(function() { index[id] = null; });

return (element, value) => {
let id = value();
let id = S.sample(value);
index[id] = element;

@@ -67,0 +67,0 @@ S.cleanup(function() { index[id] = null; });

57

lib/solid.js

@@ -8,3 +8,2 @@ 'use strict';

var S = _interopDefault(require('s-js'));
var $$observable = _interopDefault(require('symbol-observable'));

@@ -74,3 +73,3 @@ function comparer(v, k, b, isArray, path, r) {

function unwrap(item, deep) {
let k, result, unwrapped, v;
let keys, result, unwrapped, v;
if (result = item != null ? item._state : void 0) return result;

@@ -80,5 +79,6 @@

for (k in item) {
v = item[k];
if ((unwrapped = unwrap(v, true)) !== v) item[k] = unwrapped;
keys = Object.keys(item);
for (let i = 0, l = keys.length; i < l; i++) {
v = item[keys[i]];
if ((unwrapped = unwrap(v, true)) !== v) item[keys[i]] = unwrapped;
}

@@ -93,7 +93,3 @@ return item;

const obj = {};
for (let k in v) {
obj[k] = v[k];
}
return obj;
return Object.assign({}, v);
}

@@ -168,3 +164,3 @@

isArray = Array.isArray(item),
value, notify;
value, notify, keys;

@@ -184,10 +180,10 @@ if (arguments.length === 3) {

for (const property in changes) {
if (changes.hasOwnProperty(property)) {
notify = isArray || !(property in item);
value = unwrap(changes[property]);
if (value === void 0) delete item[property];
else item[property] = value;
trigger(node, property, notify);
}
keys = Object.keys(changes);
for (let i = 0, l = keys.length; i < l; i++) {
const property = keys[i];
notify = isArray || !(property in item);
value = unwrap(changes[property]);
if (value === void 0) delete item[property];
else item[property] = value;
trigger(node, property, notify);
}

@@ -245,3 +241,7 @@ }

} else {
for (let property in args[0]) this._setProperty(property, args[0][property]);
const keys = Object.keys(args[0]);
for (let i = 0, l = keys.length; i < l; i++) {
const property = keys[i];
this._setProperty(property, args[0][property]);
}
}

@@ -578,3 +578,3 @@ return;

if (typeof input === 'function') return input;
if ($$observable in input) return fromObservable(input[$$observable](), seed);
if (Symbol.observable in input) return fromObservable(input[Symbol.observable](), seed);
if ('then' in input) return fromPromise(input, seed);

@@ -585,2 +585,6 @@ }

function pipe(input, ...fns) {
compose(...fns)(input);
}
function map(fn) {

@@ -596,3 +600,3 @@ return function mapper(input) {

function pipe(...fns) {
function compose(...fns) {
if (!fns) return i => i;

@@ -724,3 +728,3 @@ if (fns.length === 1) return fns[0];

function observable(input) {
if ($$observable in input) return input[$$observable]();
if (Symbol.observable in input) return input[Symbol.observable]();
return {

@@ -741,6 +745,8 @@ subscribe(observer) {

},
[$$observable]() { return this; }
[Symbol.observable]() { return this; }
};
}
// ensure Symbol.observable
if (!Symbol.observable) Symbol.observable = Symbol('observable');
const root = S.root;

@@ -753,5 +759,6 @@

exports.from = from;
exports.pipe = pipe;
exports.map = map;
exports.pipe = pipe;
exports.compose = compose;
exports.memo = memo;
exports.observable = observable;

5

package.json
{
"name": "solid-js",
"description": "A declarative JavaScript library for building user interfaces.",
"version": "0.0.14",
"version": "0.0.15",
"author": "Ryan Carniato",

@@ -18,5 +18,2 @@ "license": "MIT",

},
"dependencies": {
"symbol-observable": "^1.2.0"
},
"peerDependencies": {

@@ -23,0 +20,0 @@ "babel-plugin-jsx-dom-expressions": "~0.0.28",

13

README.md

@@ -92,2 +92,10 @@ # Solid.js

})
// or if you prefer
props.select({
myCounter: pipe(
from(store.observable()),
map(({counter}) => counter)
)
})
```

@@ -147,4 +155,5 @@

* [Components](../master/documentation/components.md)
* [Operators](../master/documentation/operators.md)
* [Mutability](../master/documentation/mutability.md)
* [Signals](../master/documentation/signals.md)
* [Mutability](../master/documentation/mutability.md)

@@ -163,2 +172,2 @@ ## Related Projects

This project is still a work in progress. Although I've been working on it for the past 2 years it's been evolving considerably. I've decided to open source this at this point to share the concept. It took discovering the approaches used by [Surplus.js](https://github.com/adamhaile/surplus) to fill the missing pieces this library needed to prove out it's concept. And now I believe we can have performance and a simple clean API.
This project is still a work in progress. Although I've been working on it for the past 2 years it's been evolving considerably. I've decided to open source this at this point to share the concept. I'm still constantly changing API as I approach a 0.1.0 release.
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc