New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vasille

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vasille - npm Package Compare versions

Comparing version 2.0.5 to 2.2.0

lib/functional/components.js
lib/functional/merge.js
lib/functional/models.js
lib/functional/options.js
lib/functional/reactivity.js
lib/functional/stack.js
lib/spec/html.js
lib/spec/react.js
lib/spec/svg.js
lib/v/index.js
types/functional/components.d.ts
types/functional/merge.d.ts
types/functional/models.d.ts
types/functional/options.d.ts
types/functional/reactivity.d.ts
types/functional/stack.d.ts
types/spec/html.d.ts
types/spec/react.d.ts
types/spec/svg.d.ts
types/v/index.d.ts

9

lib/binding/attribute.js

@@ -18,6 +18,11 @@ import { Binding } from "./binding";

if (value) {
node.app.run.setAttribute(node.node, name, value);
if (typeof value === 'boolean') {
node.node.setAttribute(name, "");
}
else {
node.node.setAttribute(name, `${value}`);
}
}
else {
node.app.run.removeAttribute(node.node, name);
node.node.removeAttribute(name);
}

@@ -24,0 +29,0 @@ });

4

lib/binding/class.js
import { Binding } from "./binding";
function addClass(node, cl) {
node.app.run.addClass(node.node, cl);
node.node.classList.add(cl);
}
function removeClass(node, cl) {
node.app.run.removeClass(node.node, cl);
node.node.classList.remove(cl);
}

@@ -8,0 +8,0 @@ export class StaticClassBinding extends Binding {

2

lib/binding/style.js

@@ -18,3 +18,3 @@ import { Binding } from "./binding";

if (node.node instanceof HTMLElement) {
node.app.run.setStyle(node.node, name, value);
node.node.style.setProperty(name, value);
}

@@ -21,0 +21,0 @@ });

64

lib/core/core.js

@@ -7,2 +7,11 @@ import { Destroyable } from "./destroyable.js";

import { Mirror } from "../value/mirror";
export let current = null;
const currentStack = [];
function stack(node) {
currentStack.push(current);
current = node;
}
function unstack() {
current = currentStack.pop();
}
/**

@@ -43,3 +52,2 @@ * Private stuff of a reactive object

destroy() {
var _a;
this.watch.forEach(value => value.destroy());

@@ -51,3 +59,4 @@ this.watch.clear();

this.models.clear();
(_a = this.freezeExpr) === null || _a === void 0 ? void 0 : _a.destroy();
this.freezeExpr && this.freezeExpr.destroy();
this.onDestroy && this.onDestroy();
super.destroy();

@@ -62,7 +71,15 @@ }

export class Reactive extends Destroyable {
constructor($) {
constructor(input, $) {
super();
this.input = input;
this.$ = $ || new ReactivePrivate;
this.seal();
}
/**
* Get parent node
*/
get parent() {
return this.$.parent;
}
/**
* Create a reference

@@ -114,8 +131,19 @@ * @param value {*} value to reference

}
watch(func, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
/**
* Creates a watcher
* @param func {function} function to run on any argument change
* @param values
*/
watch(func, ...values) {
const $ = this.$;
$.watch.add(new Expression(func, !this.$.frozen, v1, v2, v3, v4, v5, v6, v7, v8, v9));
$.watch.add(new Expression(func, !this.$.frozen, ...values));
}
bind(func, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
const res = new Expression(func, !this.$.frozen, v1, v2, v3, v4, v5, v6, v7, v8, v9);
/**
* Creates a computed value
* @param func {function} function to run on any argument change
* @param values
* @return {IValue} the created ivalue
*/
expr(func, ...values) {
const res = new Expression(func, !this.$.frozen, ...values);
const $ = this.$;

@@ -182,2 +210,24 @@ $.watch.add(res);

}
init() {
this.applyOptions(this.input);
this.compose(this.input);
}
applyOptions(input) {
// empty
}
compose(input) {
// empty
}
runFunctional(f, ...args) {
stack(this);
// yet another ts bug
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const result = f(...args);
unstack();
return result;
}
runOnDestroy(func) {
this.$.onDestroy = func;
}
destroy() {

@@ -184,0 +234,0 @@ super.destroy();

9

lib/index.js
import { Destroyable } from "./core/destroyable";
import { Executor, InstantExecutor, TimeoutExecutor } from "./core/executor";
import { Reactive } from "./core/core";
import { IValue } from "./core/ivalue";
import { Signal } from "./core/signal";
import { Slot } from "./core/slot";
import { ArrayModel } from "./models/array-model";

@@ -13,3 +10,2 @@ import { Listener } from "./models/listener";

import { App, AppNode } from "./node/app";
import { Interceptor, InterceptorNode } from "./node/interceptor";
import { Component, Extension, Fragment, INode, Tag } from "./node/node";

@@ -24,6 +20,5 @@ import { Expression } from "./value/expression";

import { ObjectView } from "./views/object-view";
import { RepeatNode } from "./views/repeat-node";
import { Repeater } from "./views/repeater";
import { SetView } from "./views/set-view";
import { Binding } from "./binding/binding";
export { Destroyable, IValue, Reference, Mirror, Pointer, ArrayModel, MapModel, ObjectModel, SetModel, RepeatNode, Repeater, BaseView, Listener, ArrayView, MapView, ObjectView, SetView, Fragment, INode, Tag, Component, Extension, AppNode, App, Executor, InstantExecutor, TimeoutExecutor, Signal, Slot, Interceptor, InterceptorNode, Expression, Binding, Reactive, };
import * as libV from "./v/index";
export { Destroyable, IValue, Reference, Mirror, Pointer, ArrayModel, MapModel, ObjectModel, SetModel, BaseView, Listener, ArrayView, MapView, ObjectView, SetView, Fragment, INode, Tag, Component, Extension, AppNode, App, Expression, Binding, Reactive, libV };

9

lib/models/array-model.js

@@ -22,2 +22,11 @@ import { Listener } from "./listener";

}
// proxy
proxy() {
return new Proxy(this, {
set(target, p, value) {
target.splice(parseInt(p), 1, value);
return true;
}
});
}
/* Array members */

@@ -24,0 +33,0 @@ /**

42

lib/models/object-model.js

@@ -13,2 +13,3 @@ import { Listener } from "./listener";

super();
this.container = Object.create(null);
Object.defineProperty(this, 'listener', {

@@ -20,3 +21,3 @@ value: new Listener,

for (const i in obj) {
Object.defineProperty(this, i, {
Object.defineProperty(this.container, i, {
value: obj[i],

@@ -36,4 +37,3 @@ configurable: true,

get(key) {
const ts = this;
return ts[key];
return this.container[key];
}

@@ -47,10 +47,8 @@ /**

set(key, v) {
const ts = this;
// eslint-disable-next-line no-prototype-builtins
if (ts.hasOwnProperty(key)) {
this.listener.emitRemoved(key, ts[key]);
ts[key] = v;
if (Reflect.has(this.container, key)) {
this.listener.emitRemoved(key, this.container[key]);
this.container[key] = v;
}
else {
Object.defineProperty(ts, key, {
Object.defineProperty(this.container, key, {
value: v,

@@ -62,3 +60,3 @@ configurable: true,

}
this.listener.emitAdded(key, ts[key]);
this.listener.emitAdded(key, this.container[key]);
return this;

@@ -71,8 +69,24 @@ }

delete(key) {
const ts = this;
if (ts[key]) {
this.listener.emitRemoved(key, ts[key]);
delete ts[key];
if (this.container[key]) {
this.listener.emitRemoved(key, this.container[key]);
delete this.container[key];
}
}
proxy() {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const ts = this;
return new Proxy(this.container, {
get(target, p) {
return ts.get(p);
},
set(target, p, value) {
ts.set(p, value);
return true;
},
deleteProperty(target, p) {
ts.delete(p);
return true;
}
});
}
enableReactivity() {

@@ -79,0 +93,0 @@ this.listener.enableReactivity();

31

lib/node/app.js

@@ -1,2 +0,1 @@

import { instantExecutor, timeoutExecutor } from "../core/executor";
import { INode } from "./node";

@@ -10,8 +9,8 @@ /**

/**
* @param options {Object} Application options
* @param input
*/
constructor(options) {
super();
this.run = (options === null || options === void 0 ? void 0 : options.executor) || ((options === null || options === void 0 ? void 0 : options.freezeUi) === false ? timeoutExecutor : instantExecutor);
this.debugUi = (options === null || options === void 0 ? void 0 : options.debugUi) || false;
constructor(input) {
super(input);
this.debugUi = input.debugUi || false;
this.seal();
}

@@ -28,14 +27,24 @@ }

* @param node {Element} The root of application
* @param options {Object} Application options
* @param input
*/
constructor(node, options) {
super(options);
constructor(node, input) {
super(input);
this.$.node = node;
this.preinit(this, this);
this.init();
this.seal();
}
appendNode(node) {
const $ = this.$;
this.run.appendChild($.node, node);
this.$.node.appendChild(node);
}
}
export class Portal extends AppNode {
constructor(input) {
super(input);
this.$.node = input.node;
this.seal();
}
appendNode(node) {
this.$.node.appendChild(node);
}
}

724

lib/node/node.js

@@ -44,6 +44,7 @@ import { Reactive, ReactivePrivate } from "../core/core";

* Constructs a Vasille Node
* @param input
* @param $ {FragmentPrivate}
*/
constructor($) {
super($ || new FragmentPrivate);
constructor(input, $) {
super(input, $ || new FragmentPrivate);
/**

@@ -72,20 +73,6 @@ * The children list

}
/**
* Initialize node
*/
init() {
this.createWatchers();
this.created();
this.compose();
this.mounted();
return this;
compose(input) {
super.compose(input);
input.slot && input.slot(this);
}
/** To be overloaded: created event handler */
created() {
// empty
}
/** To be overloaded: mounted event handler */
mounted() {
// empty
}
/** To be overloaded: ready event handler */

@@ -95,10 +82,2 @@ ready() {

}
/** To be overloaded: watchers creation milestone */
createWatchers() {
// empty
}
/** To be overloaded: DOM creation milestone */
compose() {
// empty
}
/**

@@ -150,3 +129,3 @@ * Pushes a node to children immediately

if (child) {
$.app.run.insertBefore(child, node);
child.parentElement.insertBefore(node, child);
}

@@ -168,10 +147,5 @@ else if ($.next) {

const node = new TextNode();
const textValue = text instanceof IValue ? text : this.ref(text);
node.preinit($.app, this, textValue);
node.preinit($.app, this, text);
this.pushNode(node);
if (cb) {
$.app.run.callCallback(() => {
cb(node);
});
}
cb && cb(node);
}

@@ -184,16 +158,18 @@ debug(text) {

}
return this;
}
tag(tagName, cb) {
/**
* Defines a tag element
* @param tagName {String} the tag name
* @param input
* @param cb {function(Tag, *)} callback
*/
tag(tagName, input, cb) {
const $ = this.$;
const node = new Tag();
const node = new Tag(input);
input.slot = cb || input.slot;
node.preinit($.app, this, tagName);
node.init();
this.pushNode(node);
$.app.run.callCallback(() => {
if (cb) {
cb(node, node.node);
}
node.ready();
});
node.ready();
return node.node;
}

@@ -204,16 +180,11 @@ /**

* @param callback {function($ : *)}
* @param callback1 {function($ : *)}
*/
create(node, callback, callback1) {
create(node, callback) {
const $ = this.$;
node.$.parent = this;
node.preinit($.app, this);
if (callback) {
callback(node);
}
if (callback1) {
callback1(node);
}
node.input.slot = callback || node.input.slot;
this.pushNode(node);
node.init().ready();
node.init();
node.ready();
}

@@ -227,28 +198,25 @@ /**

if(cond, cb) {
return this.switch({ cond, cb });
}
/**
* Defines a if-else node
* @param ifCond {IValue} `if` condition
* @param ifCb {function(Fragment)} Call-back to create `if` child nodes
* @param elseCb {function(Fragment)} Call-back to create `else` child nodes
*/
if_else(ifCond, ifCb, elseCb) {
return this.switch({ cond: ifCond, cb: ifCb }, { cond: trueIValue, cb: elseCb });
}
/**
* Defines a switch nodes: Will break after first true condition
* @param cases {...{ cond : IValue, cb : function(Fragment) }} cases
* @return {INode}
*/
switch(...cases) {
const $ = this.$;
const node = new SwitchedNode();
node.preinit($.app, this);
node.preinit(this.$.app, this);
node.init();
this.pushNode(node);
node.setCases(cases);
node.addCase(this.case(cond, cb));
node.ready();
return this;
}
else(cb) {
if (this.lastChild instanceof SwitchedNode) {
this.lastChild.addCase(this.default(cb));
}
else {
throw userError('wrong `else` function use', 'logic-error');
}
}
elif(cond, cb) {
if (this.lastChild instanceof SwitchedNode) {
this.lastChild.addCase(this.case(cond, cb));
}
else {
throw userError('wrong `elif` function use', 'logic-error');
}
}
/**

@@ -318,2 +286,3 @@ * Create a case for switch

* @param app {AppNode} the app node
* @param parent
* @param text {IValue}

@@ -323,6 +292,8 @@ */

super.preinit(app, parent);
this.node = document.createTextNode(text.$);
this.bindings.add(new Expression((v) => {
this.node.replaceData(0, -1, v);
}, true, text));
this.node = document.createTextNode(text instanceof IValue ? text.$ : text);
if (text instanceof IValue) {
this.bindings.add(new Expression((v) => {
this.node.replaceData(0, -1, v);
}, true, text));
}
}

@@ -343,3 +314,3 @@ /**

constructor($ = new TextNodePrivate()) {
super($);
super({}, $);
this.seal();

@@ -391,6 +362,7 @@ }

* Constructs a base node
* @param input
* @param $ {?INodePrivate}
*/
constructor($) {
super($ || new INodePrivate);
constructor(input, $) {
super(input, $ || new INodePrivate);
this.seal();

@@ -405,22 +377,2 @@ }

/**
* Initialize node
*/
init() {
this.createWatchers();
this.createAttrs();
this.createStyle();
this.created();
this.compose();
this.mounted();
return this;
}
/** To be overloaded: attributes creation milestone */
createAttrs() {
// empty
}
/** To be overloaded: $style attributes creation milestone */
createStyle() {
// empty
}
/**
* Bind attribute value

@@ -435,7 +387,2 @@ * @param name {String} name of attribute

}
bindAttr(name, calculator, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
const $ = this.$;
const expr = this.bind(calculator, v1, v2, v3, v4, v5, v6, v7, v8, v9);
$.bindings.add(new AttributeBinding(this, name, expr));
}
/**

@@ -447,3 +394,10 @@ * Set attribute value

setAttr(name, value) {
this.$.app.run.setAttribute(this.$.node, name, value);
if (typeof value === 'boolean') {
if (value) {
this.$.node.setAttribute(name, "");
}
}
else {
this.$.node.setAttribute(name, `${value}`);
}
return this;

@@ -456,3 +410,3 @@ }

addClass(cl) {
this.$.app.run.addClass(this.$.node, cl);
this.$.node.classList.add(cl);
return this;

@@ -464,6 +418,4 @@ }

*/
addClasses(...cls) {
cls.forEach(cl => {
this.$.app.run.addClass(this.$.node, cl);
});
removeClasse(cl) {
this.$.node.classList.remove(cl);
return this;

@@ -504,13 +456,2 @@ }

}
bindStyle(name, calculator, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
const $ = this.$;
const expr = this.bind(calculator, v1, v2, v3, v4, v5, v6, v7, v8, v9);
if ($.node instanceof HTMLElement) {
$.bindings.add(new StyleBinding(this, name, expr));
}
else {
throw userError('style can be applied to HTML elements only', 'non-html-element');
}
return this;
}
/**

@@ -523,6 +464,6 @@ * Sets a style property value

if (this.$.node instanceof HTMLElement) {
this.$.app.run.setStyle(this.$.node, prop, value);
this.$.node.style.setProperty(prop, value);
}
else {
throw userError("Style can be setted for HTML elements only", "non-html-element");
throw userError("Style can be set for HTML elements only", "non-html-element");
}

@@ -541,383 +482,4 @@ return this;

}
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
oncontextmenu(handler, options) {
return this.listen("contextmenu", handler, options);
}
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmousedown(handler, options) {
return this.listen("mousedown", handler, options);
}
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmouseenter(handler, options) {
return this.listen("mouseenter", handler, options);
}
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmouseleave(handler, options) {
return this.listen("mouseleave", handler, options);
}
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmousemove(handler, options) {
return this.listen("mousemove", handler, options);
}
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmouseout(handler, options) {
return this.listen("mouseout", handler, options);
}
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmouseover(handler, options) {
return this.listen("mouseover", handler, options);
}
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmouseup(handler, options) {
return this.listen("mouseup", handler, options);
}
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onclick(handler, options) {
return this.listen("click", handler, options);
}
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
ondblclick(handler, options) {
return this.listen("dblclick", handler, options);
}
/**
* @param handler {function (FocusEvent)}
* @param options {Object | boolean}
*/
onblur(handler, options) {
return this.listen("blur", handler, options);
}
/**
* @param handler {function (FocusEvent)}
* @param options {Object | boolean}
*/
onfocus(handler, options) {
return this.listen("focus", handler, options);
}
/**
* @param handler {function (FocusEvent)}
* @param options {Object | boolean}
*/
onfocusin(handler, options) {
return this.listen("focusin", handler, options);
}
/**
* @param handler {function (FocusEvent)}
* @param options {Object | boolean}
*/
onfocusout(handler, options) {
return this.listen("focusout", handler, options);
}
/**
* @param handler {function (KeyboardEvent)}
* @param options {Object | boolean}
*/
onkeydown(handler, options) {
return this.listen("keydown", handler, options);
}
/**
* @param handler {function (KeyboardEvent)}
* @param options {Object | boolean}
*/
onkeyup(handler, options) {
return this.listen("keyup", handler, options);
}
/**
* @param handler {function (KeyboardEvent)}
* @param options {Object | boolean}
*/
onkeypress(handler, options) {
return this.listen("keypress", handler, options);
}
/**
* @param handler {function (TouchEvent)}
* @param options {Object | boolean}
*/
ontouchstart(handler, options) {
return this.listen("touchstart", handler, options);
}
/**
* @param handler {function (TouchEvent)}
* @param options {Object | boolean}
*/
ontouchmove(handler, options) {
return this.listen("touchmove", handler, options);
}
/**
* @param handler {function (TouchEvent)}
* @param options {Object | boolean}
*/
ontouchend(handler, options) {
return this.listen("touchend", handler, options);
}
/**
* @param handler {function (TouchEvent)}
* @param options {Object | boolean}
*/
ontouchcancel(handler, options) {
return this.listen("touchcancel", handler, options);
}
/**
* @param handler {function (WheelEvent)}
* @param options {Object | boolean}
*/
onwheel(handler, options) {
return this.listen("wheel", handler, options);
}
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onabort(handler, options) {
return this.listen("abort", handler, options);
}
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onerror(handler, options) {
return this.listen("error", handler, options);
}
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onload(handler, options) {
return this.listen("load", handler, options);
}
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onloadend(handler, options) {
return this.listen("loadend", handler, options);
}
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onloadstart(handler, options) {
return this.listen("loadstart", handler, options);
}
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onprogress(handler, options) {
return this.listen("progress", handler, options);
}
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
ontimeout(handler, options) {
return this.listen("timeout", handler, options);
}
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondrag(handler, options) {
return this.listen("drag", handler, options);
}
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragend(handler, options) {
return this.listen("dragend", handler, options);
}
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragenter(handler, options) {
return this.listen("dragenter", handler, options);
}
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragexit(handler, options) {
return this.listen("dragexit", handler, options);
}
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragleave(handler, options) {
return this.listen("dragleave", handler, options);
}
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragover(handler, options) {
return this.listen("dragover", handler, options);
}
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragstart(handler, options) {
return this.listen("dragstart", handler, options);
}
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondrop(handler, options) {
return this.listen("drop", handler, options);
}
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerover(handler, options) {
return this.listen("pointerover", handler, options);
}
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerenter(handler, options) {
return this.listen("pointerenter", handler, options);
}
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerdown(handler, options) {
return this.listen("pointerdown", handler, options);
}
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointermove(handler, options) {
return this.listen("pointermove", handler, options);
}
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerup(handler, options) {
return this.listen("pointerup", handler, options);
}
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointercancel(handler, options) {
return this.listen("pointercancel", handler, options);
}
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerout(handler, options) {
return this.listen("pointerout", handler, options);
}
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerleave(handler, options) {
return this.listen("pointerleave", handler, options);
}
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
ongotpointercapture(handler, options) {
return this.listen("gotpointercapture", handler, options);
}
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onlostpointercapture(handler, options) {
return this.listen("lostpointercapture", handler, options);
}
/**
* @param handler {function (AnimationEvent)}
* @param options {Object | boolean}
*/
onanimationstart(handler, options) {
return this.listen("animationstart", handler, options);
}
/**
* @param handler {function (AnimationEvent)}
* @param options {Object | boolean}
*/
onanimationend(handler, options) {
return this.listen("animationend", handler, options);
}
/**
* @param handler {function (AnimationEvent)}
* @param options {Object | boolean}
*/
onanimationiteraton(handler, options) {
return this.listen("animationiteration", handler, options);
}
/**
* @param handler {function (ClipboardEvent)}
* @param options {Object | boolean}
*/
onclipboardchange(handler, options) {
return this.listen("clipboardchange", handler, options);
}
/**
* @param handler {function (ClipboardEvent)}
* @param options {Object | boolean}
*/
oncut(handler, options) {
return this.listen("cut", handler, options);
}
/**
* @param handler {function (ClipboardEvent)}
* @param options {Object | boolean}
*/
oncopy(handler, options) {
return this.listen("copy", handler, options);
}
/**
* @param handler {function (ClipboardEvent)}
* @param options {Object | boolean}
*/
onpaste(handler, options) {
return this.listen("paste", handler, options);
}
insertAdjacent(node) {
const $ = this.$;
$.app.run.insertBefore($.node, node);
this.$.node.parentNode.insertBefore(node, this.$.node);
}

@@ -949,9 +511,9 @@ /**

*/
html(value) {
bindDomApi(name, value) {
const $ = this.$;
const node = $.node;
if (node instanceof HTMLElement) {
node.innerHTML = value.$;
node[name] = value.$;
this.watch((v) => {
node.innerHTML = v;
node[name] = v;
}, value);

@@ -963,2 +525,88 @@ }

}
applyOptions(options) {
options["v:attr"] && Object.keys(options["v:attr"]).forEach(name => {
const value = options["v:attr"][name];
if (value instanceof IValue) {
this.attr(name, value);
}
else {
this.setAttr(name, value);
}
});
if (options.class) {
const handleClass = (name, value) => {
if (value instanceof IValue) {
this.floatingClass(value, name);
}
else if (value && name !== '$') {
this.addClass(name);
}
else {
this.removeClasse(name);
}
};
if (Array.isArray(options.class)) {
options.class.forEach(item => {
if (item instanceof IValue) {
this.bindClass(item);
}
else if (typeof item == "string") {
this.addClass(item);
}
else {
Reflect.ownKeys(item).forEach((name) => {
handleClass(name, item[name]);
});
}
});
}
else {
options.class.$.forEach(item => {
this.bindClass(item);
});
Reflect.ownKeys(options.class).forEach((name) => {
handleClass(name, options.class[name]);
});
}
}
options.style && Object.keys(options.style).forEach(name => {
const value = options.style[name];
if (value instanceof IValue) {
this.style(name, value);
}
else if (typeof value === "string") {
this.setStyle(name, value);
}
else {
if (value[0] instanceof IValue) {
this.style(name, this.expr((v) => v + value[1], value[0]));
}
else {
this.setStyle(name, value[0] + value[1]);
}
}
});
options["v:events"] && Object.keys(options["v:events"]).forEach(name => {
this.listen(name, options["v:events"][name]);
});
if (options["v:bind"]) {
const inode = this.node;
Reflect.ownKeys(options["v:bind"]).forEach((k) => {
const value = options["v:bind"][k];
if (k === 'value' && (inode instanceof HTMLInputElement || inode instanceof HTMLTextAreaElement)) {
inode.oninput = () => value.$ = inode.value;
}
else if (k === 'checked' && inode instanceof HTMLInputElement) {
inode.oninput = () => value.$ = inode.checked;
}
else if (k === 'volume' && inode instanceof HTMLMediaElement) {
inode.onvolumechange = () => value.$ = inode.volume;
}
this.bindDomApi(k, value);
});
}
options["v:set"] && Object.keys(options["v:set"]).forEach(key => {
this.node[key] = options["v:set"][key];
});
}
}

@@ -971,4 +619,4 @@ /**

export class Tag extends INode {
constructor() {
super();
constructor(input) {
super(input);
this.seal();

@@ -986,2 +634,5 @@ }

}
compose(input) {
input.slot && input.slot(this);
}
findFirstChild() {

@@ -1004,4 +655,3 @@ return this.$.unmounted ? null : this.$.node;

appendNode(node) {
const $ = this.$;
$.app.run.appendChild($.node, node);
this.$.node.appendChild(node);
}

@@ -1039,15 +689,15 @@ /**

preinit(app, parent) {
if (parent instanceof INode) {
const $ = this.$;
$.preinit(app, parent);
$.node = parent.node;
const $ = this.$;
let it = parent;
while (it && !(it instanceof INode)) {
it = it.parent;
}
else {
if (it && it instanceof INode) {
$.node = it.node;
}
$.preinit(app, parent);
if (!it) {
throw userError("A extension node can be encapsulated only in a tag/extension/component", "virtual-dom");
}
}
constructor($) {
super($);
this.seal();
}
destroy() {

@@ -1063,8 +713,4 @@ super.destroy();

export class Component extends Extension {
constructor() {
super();
this.seal();
}
mounted() {
super.mounted();
ready() {
super.ready();
if (this.children.size !== 1) {

@@ -1094,2 +740,7 @@ throw userError("Component must have a child only", "dom-error");

super();
/**
* Array of possible cases
* @type {Array<{cond : IValue<boolean>, cb : function(Fragment)}>}
*/
this.cases = [];
this.seal();

@@ -1112,3 +763,3 @@ }

*/
class SwitchedNode extends Fragment {
export class SwitchedNode extends Fragment {
/**

@@ -1118,3 +769,3 @@ * Constructs a switch node and define a sync function

constructor() {
super(new SwitchedNodePrivate);
super({}, new SwitchedNodePrivate);
this.$.sync = () => {

@@ -1146,9 +797,6 @@ const $ = this.$;

}
/**
* Set up switch cases
* @param cases {{ cond : IValue, cb : function(Fragment) }}
*/
setCases(cases) {
const $ = this.$;
$.cases = [...cases];
addCase(case_) {
this.$.cases.push(case_);
case_.cond.on(this.$.sync);
this.$.sync();
}

@@ -1160,3 +808,3 @@ /**

createChild(cb) {
const node = new Fragment();
const node = new Fragment({});
node.preinit(this.$.app, this);

@@ -1220,3 +868,3 @@ node.init();

constructor() {
super();
super({});
/**

@@ -1223,0 +871,0 @@ * private data

18

lib/node/watch.js
import { Fragment } from "./node";
import { Slot } from "../core/slot";
/**

@@ -9,9 +8,3 @@ * Watch Node

export class Watch extends Fragment {
constructor() {
super();
this.slot = new Slot;
this.model = this.ref(null);
this.seal();
}
createWatchers() {
compose(input) {
this.watch((value) => {

@@ -22,8 +15,7 @@ this.children.forEach(child => {

this.children.clear();
this.slot.release(this, value);
}, this.model);
this.lastChild = null;
input.slot && input.slot(this, value);
}, input.model);
input.slot(this, input.model.$);
}
compose() {
this.slot.release(this, this.model.$);
}
}

13

lib/value/expression.js

@@ -9,3 +9,9 @@ import { Reference } from "./reference.js";

export class Expression extends IValue {
constructor(func, link, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
/**
* Creates a function bounded to N values
* @param func {Function} the function to bound
* @param values
* @param link {Boolean} links immediately if true
*/
constructor(func, link, ...values) {
super(false);

@@ -16,3 +22,2 @@ /**

this.linkedFunc = [];
const values = [v1, v2, v3, v4, v5, v6, v7, v8, v9].filter(v => v instanceof IValue);
const handler = (i) => {

@@ -26,3 +31,3 @@ if (i != null) {

// @ts-ignore
this.valuesCache = values.map(iValue => iValue.$);
this.valuesCache = values.map(item => item.$);
this.sync = new Reference(func.apply(this, this.valuesCache));

@@ -33,4 +38,2 @@ let i = 0;

});
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this.values = values;

@@ -37,0 +40,0 @@ this.func = handler;

16

lib/views/array-view.js

@@ -8,15 +8,11 @@ import { BaseView } from "./base-view";

export class ArrayView extends BaseView {
constructor(model) {
super();
this.model = model;
createChild(input, id, item, before) {
super.createChild(input, item, item, before || this.$.nodes.get(id));
}
createChild(id, item, before) {
super.createChild(item, item, before || this.$.nodes.get(id));
}
ready() {
this.model.forEach(item => {
this.createChild(item, item);
compose(input) {
super.compose(input);
input.model.forEach(item => {
this.createChild(input, item, item);
});
super.ready();
}
}

33

lib/views/base-view.js

@@ -20,7 +20,9 @@ import { RepeatNode, RepeatNodePrivate } from "./repeat-node";

export class BaseView extends RepeatNode {
constructor($1) {
super($1 || new BaseViewPrivate);
constructor(input, $) {
super(input, $ || new BaseViewPrivate);
}
compose(input) {
const $ = this.$;
$.addHandler = (id, item) => {
this.createChild(id, item);
this.createChild(input, id, item);
};

@@ -30,22 +32,9 @@ $.removeHandler = (id, item) => {

};
this.seal();
input.model.listener.onAdd($.addHandler);
input.model.listener.onRemove($.removeHandler);
this.runOnDestroy(() => {
input.model.listener.offAdd($.addHandler);
input.model.listener.offRemove($.removeHandler);
});
}
/**
* Handle ready event
*/
ready() {
const $ = this.$;
this.model.listener.onAdd($.addHandler);
this.model.listener.onRemove($.removeHandler);
super.ready();
}
/**
* Handles destroy event
*/
destroy() {
const $ = this.$;
this.model.listener.offAdd($.addHandler);
this.model.listener.offRemove($.removeHandler);
super.destroy();
}
}

13

lib/views/map-view.js

@@ -8,13 +8,8 @@ import { BaseView } from "./base-view";

export class MapView extends BaseView {
constructor(model) {
super();
this.model = model;
}
ready() {
const map = this.model;
map.forEach((value, key) => {
this.createChild(key, value);
compose(input) {
super.compose(input);
input.model.forEach((value, key) => {
this.createChild(input, key, value);
});
super.ready();
}
}

11

lib/views/object-view.js

@@ -8,10 +8,7 @@ import { BaseView } from "./base-view";

export class ObjectView extends BaseView {
constructor(model) {
super();
this.model = model;
}
ready() {
const obj = this.model;
compose(input) {
super.compose(input);
const obj = input.model.proxy();
for (const key in obj) {
this.createChild(key, obj[key]);
this.createChild(input, key, obj[key]);
}

@@ -18,0 +15,0 @@ super.ready();

24

lib/views/repeat-node.js
import { Fragment, INodePrivate } from "../node/node";
import { Slot } from "../core/slot";
import { timeoutExecutor } from "../core/executor";
/**

@@ -30,4 +28,4 @@ * Private part of repeat node

export class RepeatNode extends Fragment {
constructor($) {
super($ || new RepeatNodePrivate);
constructor(input, $) {
super(input, $);
/**

@@ -37,7 +35,5 @@ * If false will use timeout executor, otherwise the app executor

this.freezeUi = true;
this.slot = new Slot;
}
createChild(id, item, before) {
// TODO: Refactor: remove @ts-ignore
const node = new Fragment();
createChild(opts, id, item, before) {
const node = new Fragment({});
this.destroyChild(id, item);

@@ -58,12 +54,4 @@ if (before) {

node.init();
const callback = () => {
this.slot.release(node, item, id);
node.ready();
};
if (this.freezeUi) {
this.$.app.run.callCallback(callback);
}
else {
timeoutExecutor.callCallback(callback);
}
opts.slot && opts.slot(node, item, id);
node.ready();
this.$.nodes.set(id, node);

@@ -70,0 +58,0 @@ }

15

lib/views/set-view.js

@@ -8,16 +8,9 @@ import { BaseView } from "./base-view";

export class SetView extends BaseView {
constructor(model) {
super();
this.model = model;
}
ready() {
const $ = this.$;
const set = this.model;
compose(input) {
super.compose(input);
const set = input.model;
set.forEach(item => {
$.app.run.callCallback(() => {
this.createChild(item, item);
});
this.createChild(input, item, item);
});
super.ready();
}
}

4

package.json

@@ -6,3 +6,3 @@ {

"types": "types/index.d.ts",
"version": "2.0.5",
"version": "2.2.0",
"exports": {

@@ -19,2 +19,3 @@ "import": "./lib/index.js",

"update-types": "tsc --build tsconfig-types.json",
"update-flowjs": "node flow-typed/create.js",
"cdn-create": "node cdn/create.js",

@@ -50,2 +51,3 @@ "es5-check": "es-check es5 cdn/*es5.js"

"eslint": "latest",
"flow-bin": "latest",
"jest": "latest",

@@ -52,0 +54,0 @@ "jsdom": "latest",

4

README.md

@@ -28,2 +28,6 @@ # Vasille

### How to create the first project step by step
[Read instruction here](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/GetStarted.md).
### CDN

@@ -30,0 +34,0 @@

4

types/binding/attribute.d.ts

@@ -9,3 +9,3 @@ import { Binding } from "./binding";

*/
export declare class AttributeBinding extends Binding<string> {
export declare class AttributeBinding extends Binding<string | number | boolean | null> {
/**

@@ -17,3 +17,3 @@ * Constructs an attribute binding description

*/
constructor(node: INode, name: string, value: IValue<string>);
constructor(node: INode, name: string, value: IValue<string | number | boolean | null>);
}

66

types/core/core.d.ts
import { Destroyable } from "./destroyable.js";
import { IValue, Switchable } from "./ivalue.js";
import { Expression } from "../value/expression";
import { Expression, KindOfIValue } from "../value/expression";
import { Pointer } from "../value/pointer";
import { Mirror } from "../value/mirror";
import { IModel } from "../models/model";
import { Options } from "../functional/options";
export declare let current: Reactive | null;
/**

@@ -41,3 +43,9 @@ * Private stuff of a reactive object

*/
freezeExpr: Expression<void, boolean>;
freezeExpr: Expression<void, [boolean]>;
/**
* Parent node
* @type {Reactive}
*/
parent: Reactive;
onDestroy?: () => void;
constructor();

@@ -51,3 +59,3 @@ destroy(): void;

*/
export declare class Reactive extends Destroyable {
export declare class Reactive<T extends Options = Options> extends Destroyable {
/**

@@ -58,4 +66,9 @@ * Private stuff

protected $: ReactivePrivate;
constructor($?: ReactivePrivate);
input: T;
constructor(input: T, $?: ReactivePrivate);
/**
* Get parent node
*/
get parent(): Reactive;
/**
* Create a reference

@@ -89,44 +102,12 @@ * @param value {*} value to reference

* @param func {function} function to run on any argument change
* @param v1 {IValue} argument
* @param v2 {IValue} argument
* @param v3 {IValue} argument
* @param v4 {IValue} argument
* @param v5 {IValue} argument
* @param v6 {IValue} argument
* @param v7 {IValue} argument
* @param v8 {IValue} argument
* @param v9 {IValue} argument
* @param values
*/
watch<T1>(func: (a1: T1) => void, v1: IValue<T1>): any;
watch<T1, T2>(func: (a1: T1, a2: T2) => void, v1: IValue<T1>, v2: IValue<T2>): any;
watch<T1, T2, T3>(func: (a1: T1, a2: T2, a3: T3) => void, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>): any;
watch<T1, T2, T3, T4>(func: (a1: T1, a2: T2, a3: T3, a4: T4) => void, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>): any;
watch<T1, T2, T3, T4, T5>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5) => void, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>): any;
watch<T1, T2, T3, T4, T5, T6>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6) => void, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>): any;
watch<T1, T2, T3, T4, T5, T6, T7>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7) => void, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>): any;
watch<T1, T2, T3, T4, T5, T6, T7, T8>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8) => void, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>): any;
watch<T1, T2, T3, T4, T5, T6, T7, T8, T9>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8, a9: T9) => void, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>, v9: IValue<T9>): any;
watch<Args extends unknown[]>(func: (...args: Args) => void, ...values: KindOfIValue<Args>): void;
/**
* Creates a computed value
* @param func {function} function to run on any argument change
* @param v1 {IValue} argument
* @param v2 {IValue} argument
* @param v3 {IValue} argument
* @param v4 {IValue} argument
* @param v5 {IValue} argument
* @param v6 {IValue} argument
* @param v7 {IValue} argument
* @param v8 {IValue} argument
* @param v9 {IValue} argument
* @param values
* @return {IValue} the created ivalue
*/
bind<T, T1>(func: (a1: T1) => T, v1: IValue<T1>): IValue<T>;
bind<T, T1, T2>(func: (a1: T1, a2: T2) => T, v1: IValue<T1>, v2: IValue<T2>): IValue<T>;
bind<T, T1, T2, T3>(func: (a1: T1, a2: T2, a3: T3) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>): IValue<T>;
bind<T, T1, T2, T3, T4>(func: (a1: T1, a2: T2, a3: T3, a4: T4) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>): IValue<T>;
bind<T, T1, T2, T3, T4, T5>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>): IValue<T>;
bind<T, T1, T2, T3, T4, T5, T6>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>): IValue<T>;
bind<T, T1, T2, T3, T4, T5, T6, T7>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>): IValue<T>;
bind<T, T1, T2, T3, T4, T5, T6, T7, T8>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>): IValue<T>;
bind<T, T1, T2, T3, T4, T5, T6, T7, T8, T9>(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8, a9: T9) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>, v9: IValue<T9>): IValue<T>;
expr<T, Args extends unknown[]>(func: (...args: Args) => T, ...values: KindOfIValue<Args>): IValue<T>;
/**

@@ -147,3 +128,8 @@ * Enable reactivity of fields

bindAlive(cond: IValue<boolean>, onOff?: () => void, onOn?: () => void): this;
init(): void;
protected applyOptions(input: T): void;
protected compose(input: T): void;
runFunctional<F extends (...args: any) => any>(f: F, ...args: Parameters<F>): ReturnType<F>;
runOnDestroy(func: () => void): void;
destroy(): void;
}

10

types/index.d.ts
import { Destroyable } from "./core/destroyable";
import { Executor, InstantExecutor, TimeoutExecutor } from "./core/executor";
import { Reactive } from "./core/core";
import { IValue } from "./core/ivalue";
import { Signal } from "./core/signal";
import { Slot } from "./core/slot";
import { ArrayModel } from "./models/array-model";

@@ -13,3 +10,2 @@ import { Listener } from "./models/listener";

import { App, AppNode } from "./node/app";
import { Interceptor, InterceptorNode } from "./node/interceptor";
import { Component, Extension, Fragment, INode, Tag } from "./node/node";

@@ -24,6 +20,6 @@ import { Expression } from "./value/expression";

import { ObjectView } from "./views/object-view";
import { RepeatNode } from "./views/repeat-node";
import { Repeater } from "./views/repeater";
import { SetView } from "./views/set-view";
import { Binding } from "./binding/binding";
export { Destroyable, IValue, Reference, Mirror, Pointer, ArrayModel, MapModel, ObjectModel, SetModel, RepeatNode, Repeater, BaseView, Listener, ArrayView, MapView, ObjectView, SetView, Fragment, INode, Tag, Component, Extension, AppNode, App, Executor, InstantExecutor, TimeoutExecutor, Signal, Slot, Interceptor, InterceptorNode, Expression, Binding, Reactive, };
import { Options, TagOptions } from "./functional/options";
import * as libV from "./v/index";
export { Destroyable, IValue, Reference, Mirror, Pointer, ArrayModel, MapModel, ObjectModel, SetModel, BaseView, Listener, ArrayView, MapView, ObjectView, SetView, Fragment, INode, Tag, Component, Extension, AppNode, App, Expression, Binding, Reactive, Options, TagOptions, libV };

1

types/models/array-model.d.ts

@@ -14,2 +14,3 @@ import { Listener } from "./listener";

constructor(data?: Array<T>);
proxy(): ArrayModel<T>;
/**

@@ -16,0 +17,0 @@ * Gets the last item of array

2

types/models/object-model.d.ts

@@ -9,2 +9,3 @@ import { Listener } from "./listener";

listener: Listener<T, string>;
private container;
/**

@@ -35,4 +36,5 @@ * Constructs a object model

delete(key: string): void;
proxy(): Record<string, T>;
enableReactivity(): void;
disableReactivity(): void;
}

36

types/node/app.d.ts

@@ -1,8 +0,7 @@

import { Executor } from "../core/executor";
import { INode } from "./node";
declare type AppOptions = {
import { Fragment, INode } from "./node";
import { TagOptions } from "../functional/options";
import { AcceptedTagsMap } from "../spec/react";
export interface AppOptions<K extends keyof AcceptedTagsMap> extends TagOptions<K> {
debugUi?: boolean;
freezeUi?: boolean;
executor?: Executor;
};
}
/**

@@ -13,9 +12,4 @@ * Application Node

*/
export declare class AppNode extends INode {
export declare class AppNode<T extends AppOptions<any> = AppOptions<any>> extends INode<T> {
/**
* Executor is used to optimize the page creation/update
* @type {Executor}
*/
run: Executor;
/**
* Enables debug comments

@@ -25,5 +19,5 @@ */

/**
* @param options {Object} Application options
* @param input
*/
constructor(options?: AppOptions);
constructor(input: T);
}

@@ -35,11 +29,19 @@ /**

*/
export declare class App extends AppNode {
export declare class App<T extends AppOptions<any> = AppOptions<any>> extends AppNode<T> {
/**
* Constructs an app node
* @param node {Element} The root of application
* @param options {Object} Application options
* @param input
*/
constructor(node: Element, options?: AppOptions);
constructor(node: Element, input: T);
appendNode(node: Node): void;
}
interface PortalOptions extends AppOptions<'div'> {
node: Element;
slot?: (node: Fragment) => void;
}
export declare class Portal extends AppNode<PortalOptions> {
constructor(input: PortalOptions);
appendNode(node: Node): void;
}
export {};

433

types/node/node.d.ts
import { Reactive, ReactivePrivate } from "../core/core";
import { IValue } from "../core/ivalue";
import type { AppNode } from "./app";
import { Options, TagOptions } from "../functional/options";
import { AcceptedTagsMap } from "../spec/react";
/**

@@ -46,3 +48,3 @@ * Represents a Vasille.js node

*/
export declare class Fragment extends Reactive {
export declare class Fragment<T extends Options = Options> extends Reactive {
/**

@@ -58,8 +60,9 @@ * Private part

children: Set<Fragment>;
lastChild: any;
lastChild: Fragment | null;
/**
* Constructs a Vasille Node
* @param input
* @param $ {FragmentPrivate}
*/
constructor($?: FragmentPrivate);
constructor(input: T, $?: FragmentPrivate);
/**

@@ -76,16 +79,5 @@ * Gets the app of node

preinit(app: AppNode, parent: Fragment, data?: unknown): void;
/**
* Initialize node
*/
init(): this;
/** To be overloaded: created event handler */
created(): void;
/** To be overloaded: mounted event handler */
mounted(): void;
protected compose(input: Options): void;
/** To be overloaded: ready event handler */
ready(): void;
/** To be overloaded: watchers creation milestone */
createWatchers(): void;
/** To be overloaded: DOM creation milestone */
compose(): void;
/**

@@ -119,11 +111,10 @@ * Pushes a node to children immediately

text(text: string | IValue<string>, cb?: (text: TextNode) => void): void;
debug(text: IValue<string>): this;
debug(text: IValue<string>): void;
/**
* Defines a tag element
* @param tagName {String} the tag name
* @param input
* @param cb {function(Tag, *)} callback
*/
tag<K extends keyof HTMLElementTagNameMap>(tagName: K, cb?: (node: Tag, element: HTMLElementTagNameMap[K]) => void): void;
tag<K extends keyof SVGElementTagNameMap>(tagName: K, cb?: (node: Tag, element: SVGElementTagNameMap[K]) => void): void;
tag(tagName: string, cb?: (node: Tag, element: Element) => void): void;
tag<K extends keyof AcceptedTagsMap>(tagName: K, input: TagOptionsWithSlot<K>, cb?: (node: Tag<K>) => void): (HTMLElementTagNameMap & SVGElementTagNameMap)[K];
/**

@@ -133,5 +124,4 @@ * Defines a custom element

* @param callback {function($ : *)}
* @param callback1 {function($ : *)}
*/
create<T extends Fragment>(node: T, callback?: ($: T) => void, callback1?: ($: T) => void): void;
create<T extends Fragment>(node: T, callback?: T['input']['slot']): void;
/**

@@ -143,20 +133,6 @@ * Defines an if node

*/
if(cond: IValue<boolean>, cb: (node: Fragment) => void): this;
if(cond: IValue<boolean>, cb: (node: Fragment) => void): void;
else(cb: (node: Fragment) => void): void;
elif(cond: IValue<boolean>, cb: (node: Fragment) => void): void;
/**
* Defines a if-else node
* @param ifCond {IValue} `if` condition
* @param ifCb {function(Fragment)} Call-back to create `if` child nodes
* @param elseCb {function(Fragment)} Call-back to create `else` child nodes
*/
if_else(ifCond: IValue<boolean>, ifCb: (node: Fragment) => void, elseCb: (node: Fragment) => void): this;
/**
* Defines a switch nodes: Will break after first true condition
* @param cases {...{ cond : IValue, cb : function(Fragment) }} cases
* @return {INode}
*/
switch(...cases: Array<{
cond: IValue<boolean>;
cb: (node: Fragment) => void;
}>): this;
/**
* Create a case for switch

@@ -195,5 +171,6 @@ * @param cond {IValue<boolean>}

* @param app {AppNode} the app node
* @param parent
* @param text {IValue}
*/
preinitText(app: AppNode, parent: Fragment, text: IValue<string>): void;
preinitText(app: AppNode, parent: Fragment, text: IValue<string> | string): void;
/**

@@ -212,3 +189,3 @@ * Clear node data

constructor($?: TextNodePrivate);
preinit(app: AppNode, parent: Fragment, text?: IValue<string>): void;
preinit(app: AppNode, parent: Fragment, text?: IValue<string> | string): void;
protected findFirstChild(): Node;

@@ -241,9 +218,10 @@ destroy(): void;

*/
export declare class INode extends Fragment {
export declare class INode<T extends TagOptions<any> = TagOptions<any>> extends Fragment<T> {
protected $: INodePrivate;
/**
* Constructs a base node
* @param input
* @param $ {?INodePrivate}
*/
constructor($?: INodePrivate);
constructor(input: T, $?: INodePrivate);
/**

@@ -254,10 +232,2 @@ * Get the bound node

/**
* Initialize node
*/
init(): this;
/** To be overloaded: attributes creation milestone */
createAttrs(): void;
/** To be overloaded: $style attributes creation milestone */
createStyle(): void;
/**
* Bind attribute value

@@ -267,28 +237,4 @@ * @param name {String} name of attribute

*/
attr(name: string, value: IValue<string>): void;
attr(name: string, value: IValue<string | number | boolean>): void;
/**
* Creates and binds a multivalued binding to attribute
* @param name {String} The name of attribute
* @param calculator {Function} Binding calculator (must return a value)
* @param v1 {*} argument
* @param v2 {*} argument
* @param v3 {*} argument
* @param v4 {*} argument
* @param v5 {*} argument
* @param v6 {*} argument
* @param v7 {*} argument
* @param v8 {*} argument
* @param v9 {*} argument
* @return {INode} A pointer to this
*/
bindAttr<T1>(name: string, calculator: (a1: T1) => string, v1: IValue<T1>, v2?: IValue<void>, v3?: IValue<void>, v4?: IValue<void>, v5?: IValue<void>, v6?: IValue<void>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>): this;
bindAttr<T1, T2>(name: string, calculator: (a1: T1, a2: T2) => string, v1: IValue<T1>, v2: IValue<T2>, v3?: IValue<void>, v4?: IValue<void>, v5?: IValue<void>, v6?: IValue<void>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>): this;
bindAttr<T1, T2, T3>(name: string, calculator: (a1: T1, a2: T2, a3: T3) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4?: IValue<void>, v5?: IValue<void>, v6?: IValue<void>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>): this;
bindAttr<T1, T2, T3, T4>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5?: IValue<void>, v6?: IValue<void>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>): this;
bindAttr<T1, T2, T3, T4, T5>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6?: IValue<void>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>): this;
bindAttr<T1, T2, T3, T4, T5, T6>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>): this;
bindAttr<T1, T2, T3, T4, T5, T6, T7>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8?: IValue<void>, v9?: IValue<void>): this;
bindAttr<T1, T2, T3, T4, T5, T6, T7, T8>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>, v9?: IValue<void>): this;
bindAttr<T1, T2, T3, T4, T5, T6, T7, T8, T9>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8, a9: T9) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>, v9: IValue<T9>): this;
/**
* Set attribute value

@@ -298,3 +244,3 @@ * @param name {string} name of attribute

*/
setAttr(name: string, value: string): this;
setAttr(name: string, value: string | number | boolean): this;
/**

@@ -309,3 +255,3 @@ * Adds a CSS class

*/
addClasses(...cls: Array<string>): this;
removeClasse(cl: string): this;
/**

@@ -329,25 +275,2 @@ * Bind a CSS class

/**
* Binds style property value
* @param name {string} name of style attribute
* @param calculator {function} calculator for style value
* @param v1 {*} argument
* @param v2 {*} argument
* @param v3 {*} argument
* @param v4 {*} argument
* @param v5 {*} argument
* @param v6 {*} argument
* @param v7 {*} argument
* @param v8 {*} argument
* @param v9 {*} argument
*/
bindStyle<T1>(name: string, calculator: (a1: T1) => string, v1: IValue<T1>): this;
bindStyle<T1, T2>(name: string, calculator: (a1: T1, a2: T2) => string, v1: IValue<T1>, v2: IValue<T2>): this;
bindStyle<T1, T2, T3>(name: string, calculator: (a1: T1, a2: T2, a3: T3) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>): this;
bindStyle<T1, T2, T3, T4>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>): this;
bindStyle<T1, T2, T3, T4, T5>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>): this;
bindStyle<T1, T2, T3, T4, T5, T6>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>): this;
bindStyle<T1, T2, T3, T4, T5, T6, T7>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>): this;
bindStyle<T1, T2, T3, T4, T5, T6, T7, T8>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>): this;
bindStyle<T1, T2, T3, T4, T5, T6, T7, T8, T9>(name: string, calculator: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8, a9: T9) => string, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>, v9: IValue<T9>): this;
/**
* Sets a style property value

@@ -365,272 +288,2 @@ * @param prop {string} Property name

listen(name: string, handler: (ev: Event) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
oncontextmenu(handler: (ev: MouseEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmousedown(handler: (ev: MouseEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmouseenter(handler: (ev: MouseEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmouseleave(handler: (ev: MouseEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmousemove(handler: (ev: MouseEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmouseout(handler: (ev: MouseEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmouseover(handler: (ev: MouseEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onmouseup(handler: (ev: MouseEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
onclick(handler: (ev: MouseEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (MouseEvent)}
* @param options {Object | boolean}
*/
ondblclick(handler: (ev: MouseEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (FocusEvent)}
* @param options {Object | boolean}
*/
onblur(handler: (ev: FocusEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (FocusEvent)}
* @param options {Object | boolean}
*/
onfocus(handler: (ev: FocusEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (FocusEvent)}
* @param options {Object | boolean}
*/
onfocusin(handler: (ev: FocusEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (FocusEvent)}
* @param options {Object | boolean}
*/
onfocusout(handler: (ev: FocusEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (KeyboardEvent)}
* @param options {Object | boolean}
*/
onkeydown(handler: (ev: KeyboardEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (KeyboardEvent)}
* @param options {Object | boolean}
*/
onkeyup(handler: (ev: KeyboardEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (KeyboardEvent)}
* @param options {Object | boolean}
*/
onkeypress(handler: (ev: KeyboardEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (TouchEvent)}
* @param options {Object | boolean}
*/
ontouchstart(handler: (ev: TouchEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (TouchEvent)}
* @param options {Object | boolean}
*/
ontouchmove(handler: (ev: TouchEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (TouchEvent)}
* @param options {Object | boolean}
*/
ontouchend(handler: (ev: TouchEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (TouchEvent)}
* @param options {Object | boolean}
*/
ontouchcancel(handler: (ev: TouchEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (WheelEvent)}
* @param options {Object | boolean}
*/
onwheel(handler: (ev: WheelEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onabort(handler: (ev: ProgressEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onerror(handler: (ev: ProgressEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onload(handler: (ev: ProgressEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onloadend(handler: (ev: ProgressEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onloadstart(handler: (ev: ProgressEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
onprogress(handler: (ev: ProgressEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (ProgressEvent)}
* @param options {Object | boolean}
*/
ontimeout(handler: (ev: ProgressEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondrag(handler: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragend(handler: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragenter(handler: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragexit(handler: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragleave(handler: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragover(handler: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondragstart(handler: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (DragEvent)}
* @param options {Object | boolean}
*/
ondrop(handler: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerover(handler: (ev: PointerEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerenter(handler: (ev: PointerEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerdown(handler: (ev: PointerEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointermove(handler: (ev: PointerEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerup(handler: (ev: PointerEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointercancel(handler: (ev: PointerEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerout(handler: (ev: PointerEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onpointerleave(handler: (ev: PointerEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
ongotpointercapture(handler: (ev: PointerEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (PointerEvent)}
* @param options {Object | boolean}
*/
onlostpointercapture(handler: (ev: PointerEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (AnimationEvent)}
* @param options {Object | boolean}
*/
onanimationstart(handler: (ev: AnimationEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (AnimationEvent)}
* @param options {Object | boolean}
*/
onanimationend(handler: (ev: AnimationEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (AnimationEvent)}
* @param options {Object | boolean}
*/
onanimationiteraton(handler: (ev: AnimationEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (ClipboardEvent)}
* @param options {Object | boolean}
*/
onclipboardchange(handler: (ev: ClipboardEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (ClipboardEvent)}
* @param options {Object | boolean}
*/
oncut(handler: (ev: ClipboardEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (ClipboardEvent)}
* @param options {Object | boolean}
*/
oncopy(handler: (ev: ClipboardEvent) => void, options?: boolean | AddEventListenerOptions): this;
/**
* @param handler {function (ClipboardEvent)}
* @param options {Object | boolean}
*/
onpaste(handler: (ev: ClipboardEvent) => void, options?: boolean | AddEventListenerOptions): this;
insertAdjacent(node: Node): void;

@@ -646,4 +299,8 @@ /**

*/
html(value: IValue<string>): void;
bindDomApi(name: string, value: IValue<string>): void;
protected applyOptions(options: T): void;
}
export interface TagOptionsWithSlot<K extends keyof AcceptedTagsMap> extends TagOptions<K> {
slot?: (tag: Tag<K>) => void;
}
/**

@@ -654,5 +311,6 @@ * Represents an Vasille.js HTML element node

*/
export declare class Tag extends INode {
constructor();
export declare class Tag<K extends keyof AcceptedTagsMap> extends INode<TagOptionsWithSlot<K>> {
constructor(input: TagOptionsWithSlot<K>);
preinit(app: AppNode, parent: Fragment, tagName?: string): void;
protected compose(input: TagOptionsWithSlot<K>): void;
protected findFirstChild(): Node;

@@ -676,5 +334,4 @@ insertAdjacent(node: Node): void;

*/
export declare class Extension extends INode {
export declare class Extension<T extends TagOptions<any> = TagOptions<any>> extends INode<T> {
preinit(app: AppNode, parent: Fragment): void;
constructor($?: INodePrivate);
destroy(): void;

@@ -687,5 +344,4 @@ }

*/
export declare class Component extends Extension {
constructor();
mounted(): void;
export declare class Component<T extends TagOptions<any>> extends Extension<T> {
ready(): void;
preinit(app: AppNode, parent: Fragment): void;

@@ -724,2 +380,23 @@ }

/**
* Defines a node witch can switch its children conditionally
*/
export declare class SwitchedNode extends Fragment {
protected $: SwitchedNodePrivate;
/**
* Constructs a switch node and define a sync function
*/
constructor();
addCase(case_: {
cond: IValue<boolean>;
cb: (node: Fragment) => void;
}): void;
/**
* Creates a child node
* @param cb {function(Fragment)} Call-back
*/
createChild(cb: (node: Fragment) => void): void;
ready(): void;
destroy(): void;
}
/**
* The private part of a text node

@@ -726,0 +403,0 @@ */

24

types/node/watch.d.ts
import { Fragment } from "./node";
import { Slot } from "../core/slot";
import { IValue } from "../core/ivalue";
import { Options } from "../functional/options";
interface WatchOptions<T> extends Options {
model: IValue<T>;
slot?: (node: Fragment, value: T) => void;
}
/**

@@ -9,16 +13,6 @@ * Watch Node

*/
export declare class Watch<T> extends Fragment {
/**
* Default slot
* @type Slot
*/
slot: Slot<Fragment, T>;
/**
* iValue to watch
* @type IValue
*/
model: IValue<T>;
constructor();
createWatchers(): void;
compose(): void;
export declare class Watch<T> extends Fragment<WatchOptions<T>> {
input: WatchOptions<T>;
compose(input: WatchOptions<T>): void;
}
export {};

25

types/value/expression.d.ts
import { IValue } from "../core/ivalue";
export declare type KindOfIValue<T extends unknown[]> = {
[K in keyof T]: IValue<T[K]>;
};
/**

@@ -7,3 +10,3 @@ * Bind some values to one expression

*/
export declare class Expression<T, T1 = void, T2 = void, T3 = void, T4 = void, T5 = void, T6 = void, T7 = void, T8 = void, T9 = void> extends IValue<T> {
export declare class Expression<T, Args extends unknown[]> extends IValue<T> {
/**

@@ -34,22 +37,6 @@ * The array of value which will trigger recalculation

* @param func {Function} the function to bound
* @param values
* @param link {Boolean} links immediately if true
* @param v1 {*} argument
* @param v2 {*} argument
* @param v3 {*} argument
* @param v4 {*} argument
* @param v5 {*} argument
* @param v6 {*} argument
* @param v7 {*} argument
* @param v8 {*} argument
* @param v9 {*} argument
*/
constructor(func: (a1: T1) => T, link: boolean, v1: IValue<T1>, v2?: IValue<void>, v3?: IValue<void>, v4?: IValue<void>, v5?: IValue<void>, v6?: IValue<void>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>);
constructor(func: (a1: T1, a2: T2) => T, link: boolean, v1: IValue<T1>, v2: IValue<T2>, v3?: IValue<void>, v4?: IValue<void>, v5?: IValue<void>, v6?: IValue<void>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>);
constructor(func: (a1: T1, a2: T2, a3: T3) => T, link: boolean, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4?: IValue<void>, v5?: IValue<void>, v6?: IValue<void>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>);
constructor(func: (a1: T1, a2: T2, a3: T3, a4: T4) => T, link: boolean, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5?: IValue<void>, v6?: IValue<void>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>);
constructor(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5) => T, link: boolean, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6?: IValue<void>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>);
constructor(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6) => T, link: boolean, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7?: IValue<void>, v8?: IValue<void>, v9?: IValue<void>);
constructor(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7) => T, link: boolean, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8?: IValue<void>, v9?: IValue<void>);
constructor(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8) => T, link: boolean, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>, v9?: IValue<void>);
constructor(func: (a1: T1, a2: T2, a3: T3, a4: T4, a5: T5, a6: T6, a7: T7, a8: T8, a9: T9) => T, link: boolean, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>, v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>, v7: IValue<T7>, v8: IValue<T8>, v9: IValue<T9>);
constructor(func: (...args: Args) => T, link: boolean, ...values: KindOfIValue<Args>);
get $(): T;

@@ -56,0 +43,0 @@ set $(value: T);

7

types/views/array-view.d.ts

@@ -1,2 +0,2 @@

import { BaseView } from "./base-view";
import { BaseView, BSO } from "./base-view";
import { ArrayModel } from "../models/array-model";

@@ -10,5 +10,4 @@ import { Fragment } from "../node/node";

export declare class ArrayView<T> extends BaseView<T, T, ArrayModel<T>> {
constructor(model: ArrayModel<T>);
createChild(id: T, item: T, before?: Fragment): any;
ready(): void;
createChild(input: BSO<T, T, ArrayModel<T>>, id: T, item: T, before?: Fragment): any;
protected compose(input: BSO<T, T, ArrayModel<T>>): void;
}

24

types/views/base-view.d.ts

@@ -1,2 +0,2 @@

import { RepeatNode, RepeatNodePrivate } from "./repeat-node";
import { RepeatNode, RepeatNodePrivate, RNO } from "./repeat-node";
import { ListenableModel } from "../models/model";

@@ -21,2 +21,5 @@ /**

}
export interface BSO<K, T, Model extends ListenableModel<K, T>> extends RNO<T, K> {
model: Model;
}
/**

@@ -28,18 +31,7 @@ * Base class of default views

*/
export declare class BaseView<K, T, Model extends ListenableModel<K, T>> extends RepeatNode<K, T> {
export declare class BaseView<K, T, Model extends ListenableModel<K, T>> extends RepeatNode<K, T, BSO<K, T, Model>> {
protected $: BaseViewPrivate<K, T>;
/**
* Property which will contain a model
* @type {IModel}
*/
model: Model;
constructor($1?: BaseViewPrivate<K, T>);
/**
* Handle ready event
*/
ready(): void;
/**
* Handles destroy event
*/
destroy(): void;
input: BSO<K, T, Model>;
constructor(input: BSO<K, T, Model>, $?: BaseViewPrivate<K, T>);
protected compose(input: BSO<K, T, Model>): void;
}

5

types/views/map-view.d.ts

@@ -1,2 +0,2 @@

import { BaseView } from "./base-view";
import { BaseView, BSO } from "./base-view";
import { MapModel } from "../models/map-model";

@@ -9,4 +9,3 @@ /**

export declare class MapView<K, T> extends BaseView<K, T, MapModel<K, T>> {
constructor(model: MapModel<K, T>);
ready(): void;
protected compose(input: BSO<K, T, MapModel<K, T>>): void;
}

5

types/views/object-view.d.ts

@@ -1,2 +0,2 @@

import { BaseView } from "./base-view";
import { BaseView, BSO } from "./base-view";
import { ObjectModel } from "../models/object-model";

@@ -9,4 +9,3 @@ /**

export declare class ObjectView<T> extends BaseView<string, T, ObjectModel<T>> {
constructor(model: ObjectModel<T>);
ready(): void;
protected compose(input: BSO<string, T, ObjectModel<T>>): void;
}

15

types/views/repeat-node.d.ts
import { Fragment, INodePrivate } from "../node/node";
import { Slot } from "../core/slot";
import { Options } from "../functional/options";
/**

@@ -17,2 +17,5 @@ * Private part of repeat node

}
export interface RNO<T, IdT> extends Options {
slot?: (node: Fragment, value: T, index: IdT) => void;
}
/**

@@ -23,15 +26,11 @@ * Repeat node repeats its children

*/
export declare class RepeatNode<IdT, T> extends Fragment {
export declare class RepeatNode<IdT, T, Opts extends RNO<T, IdT> = RNO<T, IdT>> extends Fragment<Opts> {
protected $: RepeatNodePrivate<IdT>;
/**
* Default slot
*/
slot: Slot<Fragment, T, IdT>;
/**
* If false will use timeout executor, otherwise the app executor
*/
freezeUi: boolean;
constructor($?: RepeatNodePrivate<IdT>);
createChild(id: IdT, item: T, before?: Fragment): any;
constructor(input: Opts, $: RepeatNodePrivate<IdT>);
createChild(opts: Opts, id: IdT, item: T, before?: Fragment): any;
destroyChild(id: IdT, item: T): void;
}

5

types/views/set-view.d.ts

@@ -1,2 +0,2 @@

import { BaseView } from "./base-view";
import { BaseView, BSO } from "./base-view";
import { SetModel } from "../models/set-model";

@@ -9,4 +9,3 @@ /**

export declare class SetView<T> extends BaseView<T, T, SetModel<T>> {
constructor(model: SetModel<T>);
ready(): void;
protected compose(input: BSO<T, T, SetModel<T>>): void;
}
types/core/executor.d.ts
types/core/signal.d.ts
types/core/slot.d.ts
types/node/interceptor.d.ts
types/views/repeater.d.ts
cdn/es2015.js

Sorry, the diff of this file is too big to display

cdn/es5.js

Sorry, the diff of this file is too big to display

flow-typed/vasille.js

Sorry, the diff of this file is too big to display

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