Socket
Socket
Sign inDemoInstall

solid-js

Package Overview
Dependencies
Maintainers
1
Versions
458
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.3 to 0.0.4

904

dist/solid.js

@@ -193,48 +193,2 @@ var Core, comparer;

var Sync;
var Sync$1 = Sync = class Sync {
constructor(handler, {defer = true} = {}) {
var ref;
this.handler = handler;
this.execute = this.execute.bind(this);
this.execute.defer = defer;
this.context = {
fn: this.execute,
disposables: []
};
this.execute();
if ((ref = Core$1.context) != null) {
ref.disposables.push(this.dispose.bind(this));
}
}
execute() {
if (this.__disposed) {
return;
}
this.clean();
return Core$1.setContext(this.context, this.handler);
}
clean() {
var disposable, i, len, ref;
ref = this.context.disposables;
for (i = 0, len = ref.length; i < len; i++) {
disposable = ref[i];
disposable();
}
return this.context.disposables = [];
}
dispose() {
if (this.__disposed) {
return;
}
this.clean();
return this.__disposed = true;
}
};
function symbolObservablePonyfill(root) {

@@ -276,217 +230,2 @@ var result;

var Signal, counter;
counter = 0;
var Signal$1 = Signal = class Signal {
constructor(value) {
this.sid = 's_' + counter++;
this.__subscriptions = new Set();
this.__value = value;
Object.defineProperty(this, 'value', {
get: function() {
var ref;
if ((ref = Core$1.context) != null ? ref.fn : void 0) {
Core$1.context.disposables.push(this.subscribe(Core$1.context.fn).unsubscribe);
}
return this.__value;
},
configurable: true
});
Object.defineProperty(this, result, {
get: function() {
return this;
}
});
}
peek() {
return this.__value;
}
next(value, notify = true) {
this.__value = value;
if (notify) {
return this.notify('next', value);
}
}
subscribe(observer) {
if (typeof observer !== 'object' || observer === null) {
observer = {
next: observer,
error: arguments[1],
complete: arguments[2]
};
}
this.__subscriptions.add(observer);
return {
unsubscribe: this.unsubscribe.bind(this, observer)
};
}
unsubscribe(observer) {
return this.__subscriptions.delete(observer);
}
notify(type, value) {
if (!this.__subscriptions.size) {
return;
}
return Core$1.run(() => {
var handler, ref, sub;
ref = this.__subscriptions;
for (sub of ref) {
if (!(handler = sub[type])) {
continue;
}
if (handler.handle != null) {
Core$1.cancelTask(sub.handle, sub.defer);
}
handler.value = value;
handler.handle = Core$1.queueTask(handler, handler.defer);
}
});
}
};
var Selector, sequenceCounter;
sequenceCounter = 0;
var Selector$1 = Selector = class Selector extends Signal$1 {
constructor(handler, {defer} = {}) {
var ref;
super();
this.handler = handler;
Object.defineProperty(this, 'value', {
get: function() {
var ref;
if ((ref = Core$1.context) != null ? ref.fn : void 0) {
Core$1.context.disposables.push(this.subscribe(Core$1.context.fn).unsubscribe);
}
if (!this.context.disposables.length) {
this.execute();
}
return this.__value;
},
configurable: false,
writeable: false
});
this.execute = this.execute.bind(this);
this.execute.defer = defer;
this.context = {
fn: this.execute,
disposables: [],
pure: true
};
if ((ref = Core$1.context) != null) {
ref.disposables.push(this.dispose.bind(this));
}
}
execute() {
var context, currentSeq, is_sleeping, new_val;
if (this.__disposed) {
return;
}
this.seq = currentSeq = sequenceCounter++;
this.clean();
is_sleeping = !this.__subscriptions.size;
context = is_sleeping ? null : this.context;
new_val = Core$1.setContext(context, () => {
return this.handler(this.__value);
});
if (new_val && Core$1.isObject(new_val)) {
if ('then' in new_val) {
new_val.then(function(new_val) {
if (this.__disposed || this.seq !== currentSeq) {
return;
}
return this.resolve(new_val);
}).catch(function(err) {
return this.notify('error', err);
});
return;
}
// TODO check if observable
if (!('_state' in new_val) && 'subscribe' in new_val) {
this.__subscribable = new_val.subscribe((val) => {
return this.resolve(val);
}, (err) => {
return this.notify('error', err);
}, () => {
var ref;
return (ref = this.__subscribable) != null ? ref.unsubscribe() : void 0;
});
return;
}
}
return this.resolve(new_val);
}
resolve(new_val) {
new_val = Core$1.unwrap(new_val, true);
if (new_val === this.__value && !Core$1.isObject(new_val)) {
return;
}
return super.next(new_val, !this._skipNotify);
}
next() {}
peek() {
if (!this.context.disposables.length) {
this.execute();
}
return super.peek();
}
subscribe(fn) {
var disposable, old_size;
old_size = this.__subscriptions.size;
disposable = super.subscribe(fn);
if (!old_size && this.__subscriptions.size && !this.context.disposables.length) {
this._skipNotify = true;
this.execute();
delete this._skipNotify;
}
return disposable;
}
unsubscribe(fn) {
super.unsubscribe(fn);
return Core$1.queueTask(() => {
if (!this.__subscriptions.size) {
return this.clean();
}
}, true);
}
clean() {
var disposable, i, len, ref, ref1;
ref = this.context.disposables;
for (i = 0, len = ref.length; i < len; i++) {
disposable = ref[i];
disposable();
}
this.context.disposables = [];
if ((ref1 = this.__subscribable) != null) {
ref1.unsubscribe();
}
return this.__subscribable = null;
}
dispose() {
if (this.__disposed) {
return;
}
this.notify('complete');
this.clean();
return this.__disposed = true;
}
};
// Shamelessly lifted straight from SurplusJS https://github.com/adamhaile/surplus

@@ -857,4 +596,50 @@ var NOINSERT, NOMATCH, RECONCILE_ARRAY_BATCH, RECONCILE_ARRAY_BITS, RECONCILE_ARRAY_INC, RECONCILE_ARRAY_MASK, equable, findGreatestIndexLEQ, insertOrAppend, longestPositiveIncreasingSubsequence, reconcileArrays;

var mapSelector, multipleExpressions, normalizeIncomingArray, singleExpression;
var Types;
Types = {
Attribute: 'attribute',
Property: 'property'
};
var Attributes = {
href: {
type: Types.Attribute
},
style: {
type: Types.Property,
alias: 'style.cssText'
},
for: {
type: Types.Property,
alias: 'htmlFor'
},
class: {
type: Types.Property,
alias: 'className'
},
// React compat
spellCheck: {
type: Types.Property,
alias: 'spellcheck'
},
allowFullScreen: {
type: Types.Property,
alias: 'allowFullscreen'
},
autoCapitalize: {
type: Types.Property,
alias: 'autocapitalize'
},
autoFocus: {
type: Types.Property,
alias: 'autofocus'
},
autoPlay: {
type: Types.Property,
alias: 'autoplay'
}
};
var multipleExpressions, normalizeIncomingArray, singleExpression;
normalizeIncomingArray = function(normalized, array) {

@@ -868,7 +653,3 @@ var i, item, len;

normalized.push(item);
} else if (item === null || item === true || item === false) {
// matches null, undefined, true or false
// skip
} else if (Array.isArray(item)) {
} else if ((item == null) || item === true || item === false) ; else if (Array.isArray(item)) {
normalizeIncomingArray(normalized, item);

@@ -885,8 +666,8 @@ } else if (typeof item === 'string') {

singleExpression = function(parent, accessor) {
singleExpression = function(parent, accessor, options) {
var current;
current = null;
return new Sync$1(function() {
var array, child, l, len1, len2, m, t, value;
if ((value = accessor()) === current) {
return options.wrapExpr(accessor, function(value) {
var array, child, j, l, len1, len2, t;
if (value === current) {
return;

@@ -931,4 +712,4 @@ }

if (current.length === 0) {
for (l = 0, len1 = array.length; l < len1; l++) {
child = array[l];
for (j = 0, len1 = array.length; j < len1; j++) {
child = array[j];
parent.appendChild(child);

@@ -940,4 +721,4 @@ }

} else if (!current) {
for (m = 0, len2 = array.length; m < len2; m++) {
child = array[m];
for (l = 0, len2 = array.length; l < len2; l++) {
child = array[l];
parent.appendChild(child);

@@ -950,6 +731,2 @@ }

return current = array;
} else if ('sid' in value) {
return singleExpression(parent, function() {
return value.value;
});
} else {

@@ -961,9 +738,8 @@ throw new Error("content must be Node, stringable, or array of same");

multipleExpressions = function(parent, accessor) {
multipleExpressions = function(parent, accessor, options) {
var nodes;
nodes = [];
return new Sync$1(function() {
var array, child, i, l, len1, marker, node, ref, ref1, ref2, t, value;
return options.wrapExpr(accessor, function(value) {
var array, child, i, j, len1, marker, node, ref, ref1, ref2, t;
marker = null;
value = accessor();
t = typeof value;

@@ -997,3 +773,3 @@ parent = ((ref = nodes[0]) != null ? ref.parentNode : void 0) || parent;

if (!nodes.length) {
for (i = l = 0, len1 = array.length; l < len1; i = ++l) {
for (i = j = 0, len1 = array.length; j < len1; i = ++j) {
child = array[i];

@@ -1010,6 +786,2 @@ parent.appendChild(child);

}
} else if ((value != null) && 'sid' in value) {
return multipleExpressions(parent, function() {
return value.value;
});
}

@@ -1044,2 +816,360 @@ // handle nulls

function index(options) {
var runtime;
// options are wrapExpr, sanitize
options.sanitize || (options.sanitize = function(i) {
return i;
});
return runtime = {
assign: function(a) {
var b, i, j, k, ref;
for (i = j = 1, ref = arguments.length; j < ref; i = j += 1) {
b = arguments[i];
for (k in b) {
a[k] = b[k];
}
}
return a;
},
insert: function(parent, multiple, accessor) {
if (multiple) {
multipleExpressions(parent, accessor, options);
} else {
singleExpression(parent, accessor, options);
}
},
wrap: function(accessor, fn) {
return options.wrapExpr(accessor, function(value) {
return fn(options.sanitize(value));
});
},
spread: function(node, accessor) {
return options.wrapExpr(accessor, function(props) {
var className, info, prop, value;
for (prop in props) {
value = props[prop];
if (prop === 'style') {
runtime.assign(node.style, value);
continue;
}
if (prop === 'classList') {
for (className in value) {
node.classList.toggle(className, prop[className]);
}
continue;
}
if (info = Attributes[prop]) {
if (info.type === 'attribute') {
node.setAttribute(prop, value);
continue;
} else {
prop = info.alias;
}
}
node[prop] = options.sanitize(value);
}
});
}
};
}
var Sync;
var Sync$1 = Sync = class Sync {
constructor(handler, {defer = true} = {}) {
var ref;
this.handler = handler;
this.execute = this.execute.bind(this);
this.execute.defer = defer;
this.context = {
fn: this.execute,
disposables: []
};
this.execute();
if ((ref = Core$1.context) != null) {
ref.disposables.push(this.dispose.bind(this));
}
}
execute() {
if (this.__disposed) {
return;
}
this.clean();
return Core$1.setContext(this.context, this.handler);
}
clean() {
var disposable, i, len, ref;
ref = this.context.disposables;
for (i = 0, len = ref.length; i < len; i++) {
disposable = ref[i];
disposable();
}
return this.context.disposables = [];
}
dispose() {
if (this.__disposed) {
return;
}
this.clean();
return this.__disposed = true;
}
};
var Signal, counter;
counter = 0;
var Signal$1 = Signal = class Signal {
constructor(value) {
this.sid = 's_' + counter++;
this.__subscriptions = new Set();
this.__value = value;
Object.defineProperty(this, 'value', {
get: function() {
var ref;
if ((ref = Core$1.context) != null ? ref.fn : void 0) {
Core$1.context.disposables.push(this._subscribe(Core$1.context.fn).unsubscribe);
}
return this.__value;
},
configurable: true
});
Object.defineProperty(this, result, {
value: function() {
return this;
}
});
}
peek() {
return this.__value;
}
next(value, notify = true) {
this.__value = value;
if (notify) {
return this.notify('next', value);
}
}
subscribe(observer) {
var d;
d = this._subscribe(arguments);
(observer.next || observer)(this.__value);
return d;
}
_subscribe(observer) {
if (typeof observer !== 'object' || observer === null) {
observer = {
next: observer,
error: arguments[1],
complete: arguments[2]
};
}
this.__subscriptions.add(observer);
return {
unsubscribe: this.unsubscribe.bind(this, observer)
};
}
unsubscribe(observer) {
return this.__subscriptions.delete(observer);
}
notify(type, value) {
if (!this.__subscriptions.size) {
return;
}
return Core$1.run(() => {
var handler, ref, sub;
ref = this.__subscriptions;
for (sub of ref) {
if (!(handler = sub[type])) {
continue;
}
if (handler.handle != null) {
Core$1.cancelTask(sub.handle, sub.defer);
}
handler.value = value;
handler.handle = Core$1.queueTask(handler, handler.defer);
}
});
}
};
var Selector, sequenceCounter;
sequenceCounter = 0;
var Selector$1 = Selector = class Selector extends Signal$1 {
constructor(handler, {defer} = {}) {
var ref;
super();
this.handler = handler;
Object.defineProperty(this, 'value', {
get: function() {
var ref;
if ((ref = Core$1.context) != null ? ref.fn : void 0) {
Core$1.context.disposables.push(this._subscribe(Core$1.context.fn).unsubscribe);
}
if (!this.context.disposables.length) {
this.execute();
}
return this.__value;
},
enumerable: true
});
this.execute = this.execute.bind(this);
this.execute.defer = defer;
this.context = {
fn: this.execute,
disposables: [],
pure: true
};
if ((ref = Core$1.context) != null) {
ref.disposables.push(this.dispose.bind(this));
}
}
execute() {
var context, currentSeq, is_sleeping, new_val, sub;
if (this.__disposed) {
return;
}
this.seq = currentSeq = sequenceCounter++;
this.clean();
is_sleeping = !this.__subscriptions.size;
context = is_sleeping ? null : this.context;
new_val = Core$1.setContext(context, () => {
return this.handler(this.__value);
});
if (new_val && Core$1.isObject(new_val)) {
if ('then' in new_val) {
new_val.then(function(new_val) {
if (this.__disposed || this.seq !== currentSeq) {
return;
}
return this.resolve(new_val);
}).catch(function(err) {
return this.notify('error', err);
});
return;
}
if (result in new_val) {
this.context.disposables.push((sub = new_val[result]().subscribe((val) => {
return this.resolve(val);
}, (err) => {
return this.notify('error', err);
})).unsubscribe.bind(sub));
return;
}
}
return this.resolve(new_val);
}
resolve(new_val) {
new_val = Core$1.unwrap(new_val, true);
if (new_val === this.__value && !Core$1.isObject(new_val)) {
return;
}
return super.next(new_val, !this._skipNotify);
}
next() {}
peek() {
if (!this.context.disposables.length) {
this.execute();
}
return super.peek();
}
subscribe(observer) {
var d, oldSize;
oldSize = this.__subscriptions.size;
d = this._subscribe(arguments);
if (!oldSize) {
return d;
}
(observer.next || observer)(this.__value);
return d;
}
_subscribe(fn) {
var disposable, oldSize;
oldSize = this.__subscriptions.size;
disposable = super._subscribe(fn);
if (!oldSize && this.__subscriptions.size && !this.context.disposables.length) {
this._skipNotify = true;
this.execute();
delete this._skipNotify;
}
return disposable;
}
unsubscribe(fn) {
super.unsubscribe(fn);
return Core$1.queueTask(() => {
if (!this.__subscriptions.size) {
return this.clean();
}
}, true);
}
clean() {
var disposable, i, len, ref;
ref = this.context.disposables;
for (i = 0, len = ref.length; i < len; i++) {
disposable = ref[i];
disposable();
}
return this.context.disposables = [];
}
dispose() {
if (this.__disposed) {
return;
}
this.notify('complete');
this.clean();
return this.__disposed = true;
}
};
var mapSelector, runtime;
runtime = index({
wrapExpr: function(accessor, fn) {
return new Sync$1(function() {
var sub, value;
value = accessor();
if (Core$1.isObject(value)) {
if ('sid' in value) {
new Sync$1(function() {
return fn(value.value);
});
return;
}
if ('then' in value) {
value.then(fn);
return;
}
if (result in value) {
Core$1.context.disposables.push((sub = value[result]().subscribe(fn)).unsubscribe.bind(sub));
return;
}
}
return fn(value);
});
},
sanitize: Core$1.unwrap
});
mapSelector = function(valueAccessor, mapFn) {

@@ -1052,5 +1182,5 @@ var disposables, length, list, mapped;

Core$1.context.disposables.push(function() {
var d, l, len1;
for (l = 0, len1 = disposables.length; l < len1; l++) {
d = disposables[l];
var d, k, len;
for (k = 0, len = disposables.length; k < len; k++) {
d = disposables[k];
d();

@@ -1061,3 +1191,3 @@ }

return new Selector$1(function() {
var d, end, i, indexedItems, item, itemIndex, j, l, len1, len2, len3, m, n, newEnd, newLength, newList, newListUnwrapped, newMapped, start, tempDisposables;
var d, end, i, indexedItems, item, itemIndex, j, k, l, len, len1, len2, m, newEnd, newLength, newList, newListUnwrapped, newMapped, start, tempDisposables;
newList = valueAccessor();

@@ -1070,4 +1200,4 @@ // non-arrays

list = [];
for (l = 0, len1 = disposables.length; l < len1; l++) {
d = disposables[l];
for (k = 0, len = disposables.length; k < len; k++) {
d = disposables[k];
d();

@@ -1081,4 +1211,4 @@ }

}
for (m = 0, len2 = disposables.length; m < len2; m++) {
d = disposables[m];
for (l = 0, len1 = disposables.length; l < len1; l++) {
d = disposables[l];
d();

@@ -1099,4 +1229,4 @@ }

length = 0;
for (n = 0, len3 = disposables.length; n < len3; n++) {
d = disposables[n];
for (m = 0, len2 = disposables.length; m < len2; m++) {
d = disposables[m];
d();

@@ -1184,24 +1314,6 @@ }

var Renderer = {
assign: function(a, b) {
var k;
for (k in b) {
a[k] = b[k];
}
},
wrap: function(accessor, fn) {
return new Sync$1(function() {
return fn(Core$1.unwrap(accessor()));
});
},
insert: function(parent, multiple, accessor) {
if (multiple) {
multipleExpressions(parent, accessor);
} else {
singleExpression(parent, accessor);
}
},
map: mapSelector
};
runtime.map = mapSelector;
var Renderer = runtime;
var DEFINED, Handler;

@@ -1403,9 +1515,19 @@

var index = State = class State {
constructor(_state) {
var index$1 = State = class State {
constructor(state) {
var k, ref;
this._state = _state;
this._disposables = [];
this._selectors = [];
this._child_subscriptions = {};
Object.defineProperties(this, {
_state: {
value: state,
writable: true
},
_disposables: {
value: [],
writable: true
},
_child_subscriptions: {
value: {},
writable: true
}
});
for (k in this._state) {

@@ -1470,9 +1592,8 @@ this._defineProperty(k);

select(...selections) {
select() {
var j, key, len, selection, selector;
for (j = 0, len = selections.length; j < len; j++) {
selection = selections[j];
for (j = 0, len = arguments.length; j < len; j++) {
selection = arguments[j];
if (Core$1.isFunction(selection) || 'subscribe' in selection) {
selector = Core$1.isFunction(selection) ? new Selector$1(selection) : selection;
this._selectors.push(selector);
this._disposables.push(selector.subscribe((value) => {

@@ -1497,2 +1618,22 @@ var change, key, l, len1, ref, val;

}
if ('then' in selection) {
selection.then((value) => {
var change, key, l, len1, ref, val;
ref = [].concat(...((function() {
var ref, results;
ref = value || {};
results = [];
for (key in ref) {
val = ref[key];
results.push(Core$1.diff(val, this._state[key], [key]));
}
return results;
}).call(this)));
for (l = 0, len1 = ref.length; l < len1; l++) {
change = ref[l];
this.replace(...change);
}
});
continue;
}
for (key in selection) {

@@ -1505,3 +1646,12 @@ selector = selection[key];

selector = Core$1.isFunction(selector) ? new Selector$1(selector) : selector;
this._selectors.push(selector);
if ('then' in selector) {
return selector.then((value) => {
var change, l, len1, ref;
ref = Core$1.diff(value, this._state[key], [key]);
for (l = 0, len1 = ref.length; l < len1; l++) {
change = ref[l];
this.replace(...change);
}
});
}
return this._disposables.push(selector.subscribe((value) => {

@@ -1522,2 +1672,5 @@ var change, l, len1, ref;

var disposable, j, len, ref;
if (!this._disposables) {
return;
}
ref = this._disposables;

@@ -1528,3 +1681,3 @@ for (j = 0, len = ref.length; j < len; j++) {

}
delete this._selectors;
this._disposables = null;
}

@@ -1563,3 +1716,4 @@

return value;
}
},
enumerable: true
});

@@ -1576,2 +1730,3 @@ }

'_state': true,
'on': true,
'peek': true,

@@ -1586,2 +1741,3 @@ 'map': true

this.peek = this.peek.bind(this, target);
this.on = this.on.bind(this, target);
if (Array.isArray(this._state)) {

@@ -1630,3 +1786,3 @@ this.map = this.map.bind(this, target);

}
Core$1.context.disposables.push(this.subscribe(target, property, Core$1.context.fn).unsubscribe);
Core$1.context.disposables.push(this.on(property, Core$1.context.fn).unsubscribe);
return value;

@@ -1643,3 +1799,3 @@ }

subscribe(target, property, fn) {
on(target, property, fn) {
var base;

@@ -1707,9 +1863,19 @@ target[property] || (target[property] = {

var index$1 = ImmutableState = class ImmutableState {
constructor(_state) {
var index$2 = ImmutableState = class ImmutableState {
constructor(state) {
var k, ref;
this._state = _state;
this._disposables = [];
this._selectors = [];
this._subscriptions = {};
Object.defineProperties(this, {
_state: {
value: state,
writable: true
},
_disposables: {
value: [],
writable: true
},
_subscriptions: {
value: {},
writable: true
}
});
for (k in this._state) {

@@ -1820,9 +1986,8 @@ this._defineProperty(k);

select(...selections) {
select() {
var j, key, len, selection, selector;
for (j = 0, len = selections.length; j < len; j++) {
selection = selections[j];
for (j = 0, len = arguments.length; j < len; j++) {
selection = arguments[j];
if (Core$1.isFunction(selection) || 'subscribe' in selection) {
selector = Core$1.isFunction(selection) ? new Selector$1(selection) : selection;
this._selectors.push(selector);
this._disposables.push(selector.subscribe((value) => {

@@ -1847,2 +2012,22 @@ var change, key, l, len1, ref, val;

}
if ('then' in selection) {
selection.then((value) => {
var change, key, l, len1, ref, val;
ref = [].concat(...((function() {
var ref, results;
ref = value || {};
results = [];
for (key in ref) {
val = ref[key];
results.push(Core$1.diff(val, this._state[key], [key]));
}
return results;
}).call(this)));
for (l = 0, len1 = ref.length; l < len1; l++) {
change = ref[l];
this.replace(...change);
}
});
continue;
}
for (key in selection) {

@@ -1855,3 +2040,12 @@ selector = selection[key];

selector = Core$1.isFunction(selector) ? new Selector$1(selector) : selector;
this._selectors.push(selector);
if ('then' in selector) {
return selector.then((value) => {
var change, l, len1, ref;
ref = Core$1.diff(value, this._state[key], [key]);
for (l = 0, len1 = ref.length; l < len1; l++) {
change = ref[l];
this.replace(...change);
}
});
}
return this._disposables.push(selector.subscribe((value) => {

@@ -1902,2 +2096,5 @@ var change, l, len1, ref;

var disposable, j, len, ref;
if (!this._disposables) {
return;
}
ref = this._disposables;

@@ -1908,3 +2105,3 @@ for (j = 0, len = ref.length; j < len; j++) {

}
delete this._selectors;
this._disposables = null;
}

@@ -1989,3 +2186,4 @@

return value;
}
},
enumerable: true
});

@@ -2013,9 +2211,9 @@ return Object.defineProperty(this, property + '$', {

var index$2 = Object.assign({
ignore: Core$1.ignore.bind(Core$1),
root: Core$1.root.bind(Core$1),
unwrap: Core$1.unwrap.bind(Core$1)
var index$3 = Object.assign({
ignore: Core$1.ignore,
root: Core$1.root,
unwrap: Core$1.unwrap
}, Renderer);
export default index$2;
export { index as State, index$1 as ImmutableState, Signal$1 as Signal, Selector$1 as Selector, Sync$1 as Sync };
export default index$3;
export { index$1 as State, index$2 as ImmutableState, Signal$1 as Signal, Selector$1 as Selector, Sync$1 as Sync };

8

documentation/data-types.md

@@ -25,2 +25,10 @@ # Data Types

### peek(property)
This grabs a wrapped version of the property without triggering the dependency detection of the getter
### on(property, fn)
Manual subscription to the state object. This returns an object with the unsubscribe method.
## Signal

@@ -27,0 +35,0 @@

906

lib/solid.js

@@ -197,48 +197,2 @@ 'use strict';

var Sync;
var Sync$1 = Sync = class Sync {
constructor(handler, {defer = true} = {}) {
var ref;
this.handler = handler;
this.execute = this.execute.bind(this);
this.execute.defer = defer;
this.context = {
fn: this.execute,
disposables: []
};
this.execute();
if ((ref = Core$1.context) != null) {
ref.disposables.push(this.dispose.bind(this));
}
}
execute() {
if (this.__disposed) {
return;
}
this.clean();
return Core$1.setContext(this.context, this.handler);
}
clean() {
var disposable, i, len, ref;
ref = this.context.disposables;
for (i = 0, len = ref.length; i < len; i++) {
disposable = ref[i];
disposable();
}
return this.context.disposables = [];
}
dispose() {
if (this.__disposed) {
return;
}
this.clean();
return this.__disposed = true;
}
};
function symbolObservablePonyfill(root) {

@@ -280,217 +234,2 @@ var result;

var Signal, counter;
counter = 0;
var Signal$1 = Signal = class Signal {
constructor(value) {
this.sid = 's_' + counter++;
this.__subscriptions = new Set();
this.__value = value;
Object.defineProperty(this, 'value', {
get: function() {
var ref;
if ((ref = Core$1.context) != null ? ref.fn : void 0) {
Core$1.context.disposables.push(this.subscribe(Core$1.context.fn).unsubscribe);
}
return this.__value;
},
configurable: true
});
Object.defineProperty(this, result, {
get: function() {
return this;
}
});
}
peek() {
return this.__value;
}
next(value, notify = true) {
this.__value = value;
if (notify) {
return this.notify('next', value);
}
}
subscribe(observer) {
if (typeof observer !== 'object' || observer === null) {
observer = {
next: observer,
error: arguments[1],
complete: arguments[2]
};
}
this.__subscriptions.add(observer);
return {
unsubscribe: this.unsubscribe.bind(this, observer)
};
}
unsubscribe(observer) {
return this.__subscriptions.delete(observer);
}
notify(type, value) {
if (!this.__subscriptions.size) {
return;
}
return Core$1.run(() => {
var handler, ref, sub;
ref = this.__subscriptions;
for (sub of ref) {
if (!(handler = sub[type])) {
continue;
}
if (handler.handle != null) {
Core$1.cancelTask(sub.handle, sub.defer);
}
handler.value = value;
handler.handle = Core$1.queueTask(handler, handler.defer);
}
});
}
};
var Selector, sequenceCounter;
sequenceCounter = 0;
var Selector$1 = Selector = class Selector extends Signal$1 {
constructor(handler, {defer} = {}) {
var ref;
super();
this.handler = handler;
Object.defineProperty(this, 'value', {
get: function() {
var ref;
if ((ref = Core$1.context) != null ? ref.fn : void 0) {
Core$1.context.disposables.push(this.subscribe(Core$1.context.fn).unsubscribe);
}
if (!this.context.disposables.length) {
this.execute();
}
return this.__value;
},
configurable: false,
writeable: false
});
this.execute = this.execute.bind(this);
this.execute.defer = defer;
this.context = {
fn: this.execute,
disposables: [],
pure: true
};
if ((ref = Core$1.context) != null) {
ref.disposables.push(this.dispose.bind(this));
}
}
execute() {
var context, currentSeq, is_sleeping, new_val;
if (this.__disposed) {
return;
}
this.seq = currentSeq = sequenceCounter++;
this.clean();
is_sleeping = !this.__subscriptions.size;
context = is_sleeping ? null : this.context;
new_val = Core$1.setContext(context, () => {
return this.handler(this.__value);
});
if (new_val && Core$1.isObject(new_val)) {
if ('then' in new_val) {
new_val.then(function(new_val) {
if (this.__disposed || this.seq !== currentSeq) {
return;
}
return this.resolve(new_val);
}).catch(function(err) {
return this.notify('error', err);
});
return;
}
// TODO check if observable
if (!('_state' in new_val) && 'subscribe' in new_val) {
this.__subscribable = new_val.subscribe((val) => {
return this.resolve(val);
}, (err) => {
return this.notify('error', err);
}, () => {
var ref;
return (ref = this.__subscribable) != null ? ref.unsubscribe() : void 0;
});
return;
}
}
return this.resolve(new_val);
}
resolve(new_val) {
new_val = Core$1.unwrap(new_val, true);
if (new_val === this.__value && !Core$1.isObject(new_val)) {
return;
}
return super.next(new_val, !this._skipNotify);
}
next() {}
peek() {
if (!this.context.disposables.length) {
this.execute();
}
return super.peek();
}
subscribe(fn) {
var disposable, old_size;
old_size = this.__subscriptions.size;
disposable = super.subscribe(fn);
if (!old_size && this.__subscriptions.size && !this.context.disposables.length) {
this._skipNotify = true;
this.execute();
delete this._skipNotify;
}
return disposable;
}
unsubscribe(fn) {
super.unsubscribe(fn);
return Core$1.queueTask(() => {
if (!this.__subscriptions.size) {
return this.clean();
}
}, true);
}
clean() {
var disposable, i, len, ref, ref1;
ref = this.context.disposables;
for (i = 0, len = ref.length; i < len; i++) {
disposable = ref[i];
disposable();
}
this.context.disposables = [];
if ((ref1 = this.__subscribable) != null) {
ref1.unsubscribe();
}
return this.__subscribable = null;
}
dispose() {
if (this.__disposed) {
return;
}
this.notify('complete');
this.clean();
return this.__disposed = true;
}
};
// Shamelessly lifted straight from SurplusJS https://github.com/adamhaile/surplus

@@ -861,4 +600,50 @@ var NOINSERT, NOMATCH, RECONCILE_ARRAY_BATCH, RECONCILE_ARRAY_BITS, RECONCILE_ARRAY_INC, RECONCILE_ARRAY_MASK, equable, findGreatestIndexLEQ, insertOrAppend, longestPositiveIncreasingSubsequence, reconcileArrays;

var mapSelector, multipleExpressions, normalizeIncomingArray, singleExpression;
var Types;
Types = {
Attribute: 'attribute',
Property: 'property'
};
var Attributes = {
href: {
type: Types.Attribute
},
style: {
type: Types.Property,
alias: 'style.cssText'
},
for: {
type: Types.Property,
alias: 'htmlFor'
},
class: {
type: Types.Property,
alias: 'className'
},
// React compat
spellCheck: {
type: Types.Property,
alias: 'spellcheck'
},
allowFullScreen: {
type: Types.Property,
alias: 'allowFullscreen'
},
autoCapitalize: {
type: Types.Property,
alias: 'autocapitalize'
},
autoFocus: {
type: Types.Property,
alias: 'autofocus'
},
autoPlay: {
type: Types.Property,
alias: 'autoplay'
}
};
var multipleExpressions, normalizeIncomingArray, singleExpression;
normalizeIncomingArray = function(normalized, array) {

@@ -872,7 +657,3 @@ var i, item, len;

normalized.push(item);
} else if (item === null || item === true || item === false) {
// matches null, undefined, true or false
// skip
} else if (Array.isArray(item)) {
} else if ((item == null) || item === true || item === false) ; else if (Array.isArray(item)) {
normalizeIncomingArray(normalized, item);

@@ -889,8 +670,8 @@ } else if (typeof item === 'string') {

singleExpression = function(parent, accessor) {
singleExpression = function(parent, accessor, options) {
var current;
current = null;
return new Sync$1(function() {
var array, child, l, len1, len2, m, t, value;
if ((value = accessor()) === current) {
return options.wrapExpr(accessor, function(value) {
var array, child, j, l, len1, len2, t;
if (value === current) {
return;

@@ -935,4 +716,4 @@ }

if (current.length === 0) {
for (l = 0, len1 = array.length; l < len1; l++) {
child = array[l];
for (j = 0, len1 = array.length; j < len1; j++) {
child = array[j];
parent.appendChild(child);

@@ -944,4 +725,4 @@ }

} else if (!current) {
for (m = 0, len2 = array.length; m < len2; m++) {
child = array[m];
for (l = 0, len2 = array.length; l < len2; l++) {
child = array[l];
parent.appendChild(child);

@@ -954,6 +735,2 @@ }

return current = array;
} else if ('sid' in value) {
return singleExpression(parent, function() {
return value.value;
});
} else {

@@ -965,9 +742,8 @@ throw new Error("content must be Node, stringable, or array of same");

multipleExpressions = function(parent, accessor) {
multipleExpressions = function(parent, accessor, options) {
var nodes;
nodes = [];
return new Sync$1(function() {
var array, child, i, l, len1, marker, node, ref, ref1, ref2, t, value;
return options.wrapExpr(accessor, function(value) {
var array, child, i, j, len1, marker, node, ref, ref1, ref2, t;
marker = null;
value = accessor();
t = typeof value;

@@ -1001,3 +777,3 @@ parent = ((ref = nodes[0]) != null ? ref.parentNode : void 0) || parent;

if (!nodes.length) {
for (i = l = 0, len1 = array.length; l < len1; i = ++l) {
for (i = j = 0, len1 = array.length; j < len1; i = ++j) {
child = array[i];

@@ -1014,6 +790,2 @@ parent.appendChild(child);

}
} else if ((value != null) && 'sid' in value) {
return multipleExpressions(parent, function() {
return value.value;
});
}

@@ -1048,2 +820,360 @@ // handle nulls

function index(options) {
var runtime;
// options are wrapExpr, sanitize
options.sanitize || (options.sanitize = function(i) {
return i;
});
return runtime = {
assign: function(a) {
var b, i, j, k, ref;
for (i = j = 1, ref = arguments.length; j < ref; i = j += 1) {
b = arguments[i];
for (k in b) {
a[k] = b[k];
}
}
return a;
},
insert: function(parent, multiple, accessor) {
if (multiple) {
multipleExpressions(parent, accessor, options);
} else {
singleExpression(parent, accessor, options);
}
},
wrap: function(accessor, fn) {
return options.wrapExpr(accessor, function(value) {
return fn(options.sanitize(value));
});
},
spread: function(node, accessor) {
return options.wrapExpr(accessor, function(props) {
var className, info, prop, value;
for (prop in props) {
value = props[prop];
if (prop === 'style') {
runtime.assign(node.style, value);
continue;
}
if (prop === 'classList') {
for (className in value) {
node.classList.toggle(className, prop[className]);
}
continue;
}
if (info = Attributes[prop]) {
if (info.type === 'attribute') {
node.setAttribute(prop, value);
continue;
} else {
prop = info.alias;
}
}
node[prop] = options.sanitize(value);
}
});
}
};
}
var Sync;
var Sync$1 = Sync = class Sync {
constructor(handler, {defer = true} = {}) {
var ref;
this.handler = handler;
this.execute = this.execute.bind(this);
this.execute.defer = defer;
this.context = {
fn: this.execute,
disposables: []
};
this.execute();
if ((ref = Core$1.context) != null) {
ref.disposables.push(this.dispose.bind(this));
}
}
execute() {
if (this.__disposed) {
return;
}
this.clean();
return Core$1.setContext(this.context, this.handler);
}
clean() {
var disposable, i, len, ref;
ref = this.context.disposables;
for (i = 0, len = ref.length; i < len; i++) {
disposable = ref[i];
disposable();
}
return this.context.disposables = [];
}
dispose() {
if (this.__disposed) {
return;
}
this.clean();
return this.__disposed = true;
}
};
var Signal, counter;
counter = 0;
var Signal$1 = Signal = class Signal {
constructor(value) {
this.sid = 's_' + counter++;
this.__subscriptions = new Set();
this.__value = value;
Object.defineProperty(this, 'value', {
get: function() {
var ref;
if ((ref = Core$1.context) != null ? ref.fn : void 0) {
Core$1.context.disposables.push(this._subscribe(Core$1.context.fn).unsubscribe);
}
return this.__value;
},
configurable: true
});
Object.defineProperty(this, result, {
value: function() {
return this;
}
});
}
peek() {
return this.__value;
}
next(value, notify = true) {
this.__value = value;
if (notify) {
return this.notify('next', value);
}
}
subscribe(observer) {
var d;
d = this._subscribe(arguments);
(observer.next || observer)(this.__value);
return d;
}
_subscribe(observer) {
if (typeof observer !== 'object' || observer === null) {
observer = {
next: observer,
error: arguments[1],
complete: arguments[2]
};
}
this.__subscriptions.add(observer);
return {
unsubscribe: this.unsubscribe.bind(this, observer)
};
}
unsubscribe(observer) {
return this.__subscriptions.delete(observer);
}
notify(type, value) {
if (!this.__subscriptions.size) {
return;
}
return Core$1.run(() => {
var handler, ref, sub;
ref = this.__subscriptions;
for (sub of ref) {
if (!(handler = sub[type])) {
continue;
}
if (handler.handle != null) {
Core$1.cancelTask(sub.handle, sub.defer);
}
handler.value = value;
handler.handle = Core$1.queueTask(handler, handler.defer);
}
});
}
};
var Selector, sequenceCounter;
sequenceCounter = 0;
var Selector$1 = Selector = class Selector extends Signal$1 {
constructor(handler, {defer} = {}) {
var ref;
super();
this.handler = handler;
Object.defineProperty(this, 'value', {
get: function() {
var ref;
if ((ref = Core$1.context) != null ? ref.fn : void 0) {
Core$1.context.disposables.push(this._subscribe(Core$1.context.fn).unsubscribe);
}
if (!this.context.disposables.length) {
this.execute();
}
return this.__value;
},
enumerable: true
});
this.execute = this.execute.bind(this);
this.execute.defer = defer;
this.context = {
fn: this.execute,
disposables: [],
pure: true
};
if ((ref = Core$1.context) != null) {
ref.disposables.push(this.dispose.bind(this));
}
}
execute() {
var context, currentSeq, is_sleeping, new_val, sub;
if (this.__disposed) {
return;
}
this.seq = currentSeq = sequenceCounter++;
this.clean();
is_sleeping = !this.__subscriptions.size;
context = is_sleeping ? null : this.context;
new_val = Core$1.setContext(context, () => {
return this.handler(this.__value);
});
if (new_val && Core$1.isObject(new_val)) {
if ('then' in new_val) {
new_val.then(function(new_val) {
if (this.__disposed || this.seq !== currentSeq) {
return;
}
return this.resolve(new_val);
}).catch(function(err) {
return this.notify('error', err);
});
return;
}
if (result in new_val) {
this.context.disposables.push((sub = new_val[result]().subscribe((val) => {
return this.resolve(val);
}, (err) => {
return this.notify('error', err);
})).unsubscribe.bind(sub));
return;
}
}
return this.resolve(new_val);
}
resolve(new_val) {
new_val = Core$1.unwrap(new_val, true);
if (new_val === this.__value && !Core$1.isObject(new_val)) {
return;
}
return super.next(new_val, !this._skipNotify);
}
next() {}
peek() {
if (!this.context.disposables.length) {
this.execute();
}
return super.peek();
}
subscribe(observer) {
var d, oldSize;
oldSize = this.__subscriptions.size;
d = this._subscribe(arguments);
if (!oldSize) {
return d;
}
(observer.next || observer)(this.__value);
return d;
}
_subscribe(fn) {
var disposable, oldSize;
oldSize = this.__subscriptions.size;
disposable = super._subscribe(fn);
if (!oldSize && this.__subscriptions.size && !this.context.disposables.length) {
this._skipNotify = true;
this.execute();
delete this._skipNotify;
}
return disposable;
}
unsubscribe(fn) {
super.unsubscribe(fn);
return Core$1.queueTask(() => {
if (!this.__subscriptions.size) {
return this.clean();
}
}, true);
}
clean() {
var disposable, i, len, ref;
ref = this.context.disposables;
for (i = 0, len = ref.length; i < len; i++) {
disposable = ref[i];
disposable();
}
return this.context.disposables = [];
}
dispose() {
if (this.__disposed) {
return;
}
this.notify('complete');
this.clean();
return this.__disposed = true;
}
};
var mapSelector, runtime;
runtime = index({
wrapExpr: function(accessor, fn) {
return new Sync$1(function() {
var sub, value;
value = accessor();
if (Core$1.isObject(value)) {
if ('sid' in value) {
new Sync$1(function() {
return fn(value.value);
});
return;
}
if ('then' in value) {
value.then(fn);
return;
}
if (result in value) {
Core$1.context.disposables.push((sub = value[result]().subscribe(fn)).unsubscribe.bind(sub));
return;
}
}
return fn(value);
});
},
sanitize: Core$1.unwrap
});
mapSelector = function(valueAccessor, mapFn) {

@@ -1056,5 +1186,5 @@ var disposables, length, list, mapped;

Core$1.context.disposables.push(function() {
var d, l, len1;
for (l = 0, len1 = disposables.length; l < len1; l++) {
d = disposables[l];
var d, k, len;
for (k = 0, len = disposables.length; k < len; k++) {
d = disposables[k];
d();

@@ -1065,3 +1195,3 @@ }

return new Selector$1(function() {
var d, end, i, indexedItems, item, itemIndex, j, l, len1, len2, len3, m, n, newEnd, newLength, newList, newListUnwrapped, newMapped, start, tempDisposables;
var d, end, i, indexedItems, item, itemIndex, j, k, l, len, len1, len2, m, newEnd, newLength, newList, newListUnwrapped, newMapped, start, tempDisposables;
newList = valueAccessor();

@@ -1074,4 +1204,4 @@ // non-arrays

list = [];
for (l = 0, len1 = disposables.length; l < len1; l++) {
d = disposables[l];
for (k = 0, len = disposables.length; k < len; k++) {
d = disposables[k];
d();

@@ -1085,4 +1215,4 @@ }

}
for (m = 0, len2 = disposables.length; m < len2; m++) {
d = disposables[m];
for (l = 0, len1 = disposables.length; l < len1; l++) {
d = disposables[l];
d();

@@ -1103,4 +1233,4 @@ }

length = 0;
for (n = 0, len3 = disposables.length; n < len3; n++) {
d = disposables[n];
for (m = 0, len2 = disposables.length; m < len2; m++) {
d = disposables[m];
d();

@@ -1188,24 +1318,6 @@ }

var Renderer = {
assign: function(a, b) {
var k;
for (k in b) {
a[k] = b[k];
}
},
wrap: function(accessor, fn) {
return new Sync$1(function() {
return fn(Core$1.unwrap(accessor()));
});
},
insert: function(parent, multiple, accessor) {
if (multiple) {
multipleExpressions(parent, accessor);
} else {
singleExpression(parent, accessor);
}
},
map: mapSelector
};
runtime.map = mapSelector;
var Renderer = runtime;
var DEFINED, Handler;

@@ -1407,9 +1519,19 @@

var index = State = class State {
constructor(_state) {
var index$1 = State = class State {
constructor(state) {
var k, ref;
this._state = _state;
this._disposables = [];
this._selectors = [];
this._child_subscriptions = {};
Object.defineProperties(this, {
_state: {
value: state,
writable: true
},
_disposables: {
value: [],
writable: true
},
_child_subscriptions: {
value: {},
writable: true
}
});
for (k in this._state) {

@@ -1474,9 +1596,8 @@ this._defineProperty(k);

select(...selections) {
select() {
var j, key, len, selection, selector;
for (j = 0, len = selections.length; j < len; j++) {
selection = selections[j];
for (j = 0, len = arguments.length; j < len; j++) {
selection = arguments[j];
if (Core$1.isFunction(selection) || 'subscribe' in selection) {
selector = Core$1.isFunction(selection) ? new Selector$1(selection) : selection;
this._selectors.push(selector);
this._disposables.push(selector.subscribe((value) => {

@@ -1501,2 +1622,22 @@ var change, key, l, len1, ref, val;

}
if ('then' in selection) {
selection.then((value) => {
var change, key, l, len1, ref, val;
ref = [].concat(...((function() {
var ref, results;
ref = value || {};
results = [];
for (key in ref) {
val = ref[key];
results.push(Core$1.diff(val, this._state[key], [key]));
}
return results;
}).call(this)));
for (l = 0, len1 = ref.length; l < len1; l++) {
change = ref[l];
this.replace(...change);
}
});
continue;
}
for (key in selection) {

@@ -1509,3 +1650,12 @@ selector = selection[key];

selector = Core$1.isFunction(selector) ? new Selector$1(selector) : selector;
this._selectors.push(selector);
if ('then' in selector) {
return selector.then((value) => {
var change, l, len1, ref;
ref = Core$1.diff(value, this._state[key], [key]);
for (l = 0, len1 = ref.length; l < len1; l++) {
change = ref[l];
this.replace(...change);
}
});
}
return this._disposables.push(selector.subscribe((value) => {

@@ -1526,2 +1676,5 @@ var change, l, len1, ref;

var disposable, j, len, ref;
if (!this._disposables) {
return;
}
ref = this._disposables;

@@ -1532,3 +1685,3 @@ for (j = 0, len = ref.length; j < len; j++) {

}
delete this._selectors;
this._disposables = null;
}

@@ -1567,3 +1720,4 @@

return value;
}
},
enumerable: true
});

@@ -1580,2 +1734,3 @@ }

'_state': true,
'on': true,
'peek': true,

@@ -1590,2 +1745,3 @@ 'map': true

this.peek = this.peek.bind(this, target);
this.on = this.on.bind(this, target);
if (Array.isArray(this._state)) {

@@ -1634,3 +1790,3 @@ this.map = this.map.bind(this, target);

}
Core$1.context.disposables.push(this.subscribe(target, property, Core$1.context.fn).unsubscribe);
Core$1.context.disposables.push(this.on(property, Core$1.context.fn).unsubscribe);
return value;

@@ -1647,3 +1803,3 @@ }

subscribe(target, property, fn) {
on(target, property, fn) {
var base;

@@ -1711,9 +1867,19 @@ target[property] || (target[property] = {

var index$1 = ImmutableState = class ImmutableState {
constructor(_state) {
var index$2 = ImmutableState = class ImmutableState {
constructor(state) {
var k, ref;
this._state = _state;
this._disposables = [];
this._selectors = [];
this._subscriptions = {};
Object.defineProperties(this, {
_state: {
value: state,
writable: true
},
_disposables: {
value: [],
writable: true
},
_subscriptions: {
value: {},
writable: true
}
});
for (k in this._state) {

@@ -1824,9 +1990,8 @@ this._defineProperty(k);

select(...selections) {
select() {
var j, key, len, selection, selector;
for (j = 0, len = selections.length; j < len; j++) {
selection = selections[j];
for (j = 0, len = arguments.length; j < len; j++) {
selection = arguments[j];
if (Core$1.isFunction(selection) || 'subscribe' in selection) {
selector = Core$1.isFunction(selection) ? new Selector$1(selection) : selection;
this._selectors.push(selector);
this._disposables.push(selector.subscribe((value) => {

@@ -1851,2 +2016,22 @@ var change, key, l, len1, ref, val;

}
if ('then' in selection) {
selection.then((value) => {
var change, key, l, len1, ref, val;
ref = [].concat(...((function() {
var ref, results;
ref = value || {};
results = [];
for (key in ref) {
val = ref[key];
results.push(Core$1.diff(val, this._state[key], [key]));
}
return results;
}).call(this)));
for (l = 0, len1 = ref.length; l < len1; l++) {
change = ref[l];
this.replace(...change);
}
});
continue;
}
for (key in selection) {

@@ -1859,3 +2044,12 @@ selector = selection[key];

selector = Core$1.isFunction(selector) ? new Selector$1(selector) : selector;
this._selectors.push(selector);
if ('then' in selector) {
return selector.then((value) => {
var change, l, len1, ref;
ref = Core$1.diff(value, this._state[key], [key]);
for (l = 0, len1 = ref.length; l < len1; l++) {
change = ref[l];
this.replace(...change);
}
});
}
return this._disposables.push(selector.subscribe((value) => {

@@ -1906,2 +2100,5 @@ var change, l, len1, ref;

var disposable, j, len, ref;
if (!this._disposables) {
return;
}
ref = this._disposables;

@@ -1912,3 +2109,3 @@ for (j = 0, len = ref.length; j < len; j++) {

}
delete this._selectors;
this._disposables = null;
}

@@ -1993,3 +2190,4 @@

return value;
}
},
enumerable: true
});

@@ -2017,13 +2215,13 @@ return Object.defineProperty(this, property + '$', {

var index$2 = Object.assign({
ignore: Core$1.ignore.bind(Core$1),
root: Core$1.root.bind(Core$1),
unwrap: Core$1.unwrap.bind(Core$1)
var index$3 = Object.assign({
ignore: Core$1.ignore,
root: Core$1.root,
unwrap: Core$1.unwrap
}, Renderer);
exports.default = index$2;
exports.State = index;
exports.ImmutableState = index$1;
exports.default = index$3;
exports.State = index$1;
exports.ImmutableState = index$2;
exports.Signal = Signal$1;
exports.Selector = Selector$1;
exports.Sync = Sync$1;

14

package.json
{
"name": "solid-js",
"description": "A declarative JavaScript library for building user interfaces.",
"version": "0.0.3",
"version": "0.0.4",
"author": "Ryan Carniato",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/ryansolid/solid"
},
"main": "lib/solid.js",

@@ -17,7 +22,6 @@ "module": "dist/solid.js",

"rollup-plugin-coffee2": "^0.1.15",
"rollup-plugin-node-resolve": "^3.3.0"
},
"dependencies": {
"symbol-observable": "^1.2.0"
"rollup-plugin-node-resolve": "^3.3.0",
"symbol-observable": "^1.2.0",
"babel-plugin-jsx-dom-expressions": "^0.0.10"
}
}

79

README.md
# Solid.js
Solid.js is yet another declaritive Javascript library for creating user interfaces. It is unopinionated about how you organize your code and focuses on synchronizing local state and keeping the DOM up to date. Unlike make popular recent libraries it does not use the Virtual DOM. Instead it opts to compile it's templates down to real DOM nodes and wrap updates in fine grained computations.
Solid.js is yet another declaritive Javascript library for creating user interfaces. It does not use the Virtual DOM. Instead it opts to compile it's templates down to real DOM nodes and wrap updates in fine grained computations.
The project started as trying to find a small performant library to work with Web Components, that had easy interopt with existing technologies. This library is very inspired by Knockout.js and Surplus.js, but seeks to provide an interface that is more familiar to people used to using virtual DOM libraries.
### Key Features:
* Real DOM with fine grained change detection (<b>No Virtual DOM! No Dirty Checking Digest Loop!</b>)
* JSX precompilation with support for standard JSX features and W3C Web Components
* Declarative data
* Data behavior is part of the declaration
* No need for lifecycle functions, and the large chains of conditionals they bring.
* ES6 Proxies to keep data access simple and POJO like
* Promises and ES Observables are first class citizens:
* Easy interopt with existing libraries that manage services and state
* All computations and bindings when resolved to these automatically update asynchronously allowing for 100% pure data declarations.
* Truly just a render library
* Unopinionated about how you set modularize/componentize your code
* The whole tree is only rendered once so statefulness is not a decider for the use of functional components
* Use familiar techniques like HOCs, Class inheritance, dependency injection as you see fit.
* Performance on par with the fastest Virtual DOM libraries
To that end this library is based on solely 3 things: JSX precompilation, ES2015 Proxies, and the TC-39 Observable proposal.
<br />
A Simple Component could look like:

@@ -25,5 +38,3 @@

<ul>{
state.users.map(user => {
<li>{user.firstName} {user.lastName}</li>
}
state.users.map(user => <li>{user.firstName} {user.lastName}</li>)
}</ul>

@@ -39,3 +50,3 @@ </>);

It all starts with a State object. State objects look like plain javascript options except to control change detection you call their set method.
It all starts with a State object. These objects can represent the local state or the props in your components. State objects look like plain javascript options except to control change detection you call their set method.

@@ -58,2 +69,4 @@ var state = new State({counter: 0});

The use of the function allows for more control over the access to update the state object and is the key to reducing the use of unnecessary Proxies to allow for greater performance.
But where the magic happens is with making computations. This done through State's select method which takes an Observable, a Promise, or a Function and maps it to a state property. The simplest form of passing a function will wrap it in our Selector Observable which is a computation that automatically tracks dependencies.

@@ -69,41 +82,57 @@

The way this works is that the State instance is the entry point. When working in your setup code and event handlers you will be just dealing with plain POJO javascript objects. However inside a computation the State instance will return nested proxies to track gets, and so on. In the case of a render tree even if the State root object doesn't make it all the way down as long as you fetch it originally off your state from with the render it will start tracking.
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.
Truthfully for something as trivial as a display name you wouldn't necessarily need a selector and could just inline the expression in the template. But this really comes in handy for reuse and more complicated scenarios. And can be the primary mechanism to interopt with store technologies like Redux, Apollo, RxJS which expose themselves as observables. When you hook up these selectors you can use standard methods to map the observables to grab the properties you want and the State object will automatically diff the changes to only affect the minimal amount.
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.
state.select({
props.select({
myCounter: Observable.from(store).map(({counter}) => counter)
})
There is also a replace method for state which instead of merging values swaps them out.
## Solid Rendering
So to accomplish rendering we use JSX for templating that gets compiled to native DOM element instructions. To do that we take advantage of the babel-plugin-jsx-dom-expressions which while converting JSX to DOM element instructions wraps expressions to be wrapped in our computeds.
To accomplish rendering we use JSX for templating that gets compiled to native DOM element instructions. To do that we take advantage of the babel-plugin-jsx-dom-expressions which while converting JSX to DOM element instructions wraps expressions to be wrapped in our computeds.
JSX as a templating language brings a lot of benefits. The just being javascript goes beyond just not needing a DSL, but setting up closure based context instead of creating context objects. This is both much more performant and uses considerable less memory. The well defined AST lends well to precompilation. This works so well it almost feels like cheating. I believe it's a big part of bringing the same level of tooling to fine grained change detection libraries already enjoyed by Virtual DOM libraries.
To get setup add this babel plugin config to your .babelrc, webpack or rollup config:
To get setup add this babel plugin config to your .babelrc, webpack, or rollup config:
"plugins": ["@babel/syntax-jsx", ["jsx-dom-expressions", {"noWhitespaceOnly": true, "moduleName": "Solid"}]]
"plugins": [["jsx-dom-expressions", {"noWhitespaceOnly": true, "moduleName": "Solid"}]]
## Why?
For all the really good things that came with React and the Virtual DOM evolution of declarative JS UI frameworks it also felt like a bit of a step backwards. And I don't mean the backlash people had with JSX etc..
This project started as trying to find a small performant library to work with Web Components, that had easy interopt with existing standards. It is very inspired by fine grain change detection libraries like Knockout.js and the radical approach taken by Cycle.js. I feel the API for those were a considerable barrier. At the same time, for all the really good things that came with React and the Virtual DOM evolution of UI frameworks it also felt like a bit of a step backwards.
The thing is for all it's differences the VDOM libraries still are based around having a special data object even if they push the complexity to under the hood of rendering. The trade off is lifecycle functions that break apart the declarative nature of the data. At an extreme relying on blacklisting changes in multiple places for shouldComponentUpdate. Imposed boundaries on components to sate performance concerns. A UI model that rerenders every loop that while relatively performant conceptually is at odds with what you see is what you get (it's not a mutable declaration but a series of imperative functions).
* The VDOM render while performant is still conceptually a constant re-render
* It feels much more imperative as variable declarations and iterative methods for constructing the tree are constantly re-evaluating
* Reintroduced lifecycle function hell that break apart the declarative nature of the data. Ex. relying on blacklisting changes across the tree with shouldComponentUpdate.
* Homogenous promise of Components and the overly simplistic local state in practice:
* Imposes boundaries on components to solve performance concerns
* Prices you into a very specific but not necessarily obvious structure
* Only served to make it more ambiguous when emerging best practices lead to specialized component classification anyway
* VDOM libraries still are based around having a specialized data objects.
So the proposition here is if the data is going to be complicated anyway can we use Proxies to move the complexity into it rather than the rendering. And through using standard reactive interopt we can play we can invite playing nice with others rather push the interopt point in userland.
So the driving questions here are:
* If the data is going to be specialized anyway can we use Proxies to move the complexity into it rather than the rendering while keeping the appearance simple?
* Can this free up existing constraints on how you modularize your view code?
* Does this approach ultimately provide more adaptibility while reducing the API surface?
* Is fine grained change detection fundamentally more performant than the Virtual DOM?
Admittedly it takes a strong reason to not go with the general consensus of best, and most supported libraries and frameworks. But I believe there is a better way out there than how we do it today.
## Documentation
* [Data Types](../blob/master/documentation/data-types.md)
* [Components](../blob/master/documentation/components.md)
* [Mutability](../blob/master/documentation/mutability.md)
* [Scheduling](../blob/master/documentation/scheduling.md)
* [Data Types](../master/documentation/data-types.md)
* [Components](../master/documentation/components.md)
* [Mutability](../master/documentation/mutability.md)
* [Scheduling](../master/documentation/scheduling.md)
## Status
This project is still a work in progress. Although I've been working on it for the past 2 years it's been evolved considerably. I've decided to open source this at this point to share the concept. It took discovering the approaches used by Surplus.js to fill the missing pieces this library needed to prove out it's concept. And now I believe we can have performance and Proxies.
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 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. The focus has been API, correctness, performance, compatibility, in that order so there is a lot of work to be done.
I will be publishing some examples. And need to work more on Tests/Compatibility/Documenting the rest of the libary.
Areas of Improvement:
* Tests
* Documentation
* Compile time optimization
* Run time optimization
* Examples
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