Reactive subscribe. Components as Nodes and Nodes as Components. Everything is…

.gitignore

 node_modules
 node_modules/*
+.idea
+.idea/*
\ No newline at end of file

dist/Rjsx.js

+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            input: {
+                type?: string;
+                value?: any;
+                disabled?: boolean
+            };
+            div: {className?: string}
+            br: {}
+
+        }
+    }
+    namespace Rjsx {
+        R(byPass: Function):Component;
+
+    }
+}*/
+var byPass = function (a) { return a; };
+var Reactivity = /** @class */ (function () {
+    function Reactivity(args) {
+        this.args = [];
+        this.scope = null;
+        this.key = null;
+        this.fn = null;
+        this.args = args;
+    }
+    Reactivity.prototype.emit = function () {
+        this.scope.setKey(this.key, this.fn.apply(this.scope, this.args));
+    };
+    return Reactivity;
+}());
+exports.Reactivity = Reactivity;
+exports.TaskManager = {
+    jobs: [],
+    active: false,
+    add: function (task) {
+        exports.TaskManager.jobs.push(task);
+        if (!exports.TaskManager.active) {
+            exports.TaskManager.active = true;
+            requestAnimationFrame(exports.TaskManager.work);
+        }
+    },
+    work: function () {
+        var jobs = exports.TaskManager.jobs;
+        exports.TaskManager.jobs = [];
+        exports.TaskManager.active = false;
+        for (var i = 0, _i = jobs.length; i < _i; i++) {
+            jobs[i]();
+        }
+    }
+};
+function R() {
+    var args = [];
+    var reactivity = new Reactivity(args);
+    var _loop_1 = function (i, _i) {
+        var obj = arguments_1[i];
+        if (typeof obj === 'function') {
+            exports.TaskManager.add(function () {
+                var objResolved = obj();
+                objResolved.trigger = function (val) {
+                    args[i] = val;
+                    reactivity.emit();
+                };
+                args[i] = objResolved.value;
+            });
+        }
+        else {
+            obj.trigger = function (val) {
+                args[i] = val;
+                reactivity.emit();
+            };
+            args[i] = obj.value;
+        }
+    };
+    var arguments_1 = arguments;
+    for (var i = 0, _i = arguments.length === 1 ? arguments.length : arguments.length - 1; i < _i; i++) {
+        _loop_1(i, _i);
+    }
+    if (arguments.length === 1) {
+        reactivity.fn = byPass;
+    }
+    else {
+        reactivity.fn = arguments[arguments.length - 1];
+    }
+    return reactivity;
+}
+exports.R = R;
+;
+var Reactive = /** @class */ (function () {
+    function Reactive(cfg) {
+        this.state = {};
+        this.subs = {};
+        this.setters = {};
+        if (cfg === false) {
+            return;
+        }
+        this.state = cfg ? Object.create(cfg) : {};
+        this.subs = {};
+        // @ts-ignore
+    }
+    Reactive.prototype.fire = function (key, val, lastVal) {
+        if (key in this.subs) {
+            var subs = this.subs[key];
+            for (var i = 0, _i = subs.length; i < _i; i++) {
+                subs[i].call(this, this, val, lastVal);
+            }
+        }
+    };
+    Reactive.prototype.on = function (key, fn) {
+        var FN, obj; // TODO unAny
+        if (arguments.length === 1) {
+            obj = {
+                value: key in this.state ? this.state[key] : void 0
+            };
+            FN = function (_, val, oldVal) {
+                obj.value = val;
+                obj.trigger && obj.trigger(val);
+            };
+        }
+        else {
+            FN = fn;
+        }
+        (this.subs[key] || (this.subs[key] = [])).push(FN);
+        if (key in this.state)
+            FN.call(this, this, this.state[key]);
+        return obj;
+    };
+    Reactive.prototype.set = function (obj) {
+        for (var key in obj)
+            this.setKey(key, obj[key]);
+    };
+    Reactive.prototype.afterSetKey = function (key, val, lastVal) { };
+    Reactive.prototype.beforeSetKey = function (key, val, lastVal) { return val; };
+    Reactive.prototype.setKey = function (key, val) {
+        var lastVal = this.state[key];
+        if (lastVal === val)
+            return null;
+        if (val instanceof Reactivity) {
+            val.scope = this;
+            val.key = key;
+            val.emit();
+            return true;
+        }
+        val = this.beforeSetKey(key, val, lastVal);
+        this.state[key] = val;
+        if (key in this.setters) {
+            this.setters[key].call(this, this, val, lastVal);
+        }
+        else {
+            this.afterSetKey(key, val, lastVal);
+        }
+        this.fire(key, val, lastVal);
+        return true;
+    };
+    return Reactive;
+}());
+var Predefined = {
+    input: {
+        onChange: function () {
+            this.set({ checked: this.el.checked });
+        }
+    }
+};
+var Component = /** @class */ (function (_super) {
+    __extends(Component, _super);
+    function Component(tagName) {
+        var _this = _super.call(this, {}) || this;
+        _this.nodeName = null;
+        _this.el = null;
+        _this.def = {};
+        _this.children = null;
+        _this.tree = null;
+        _this.setters = {
+            dangerouslySetInnerHTML: function (_, htmlText) { return _.el.innerHTML = htmlText; },
+            text: function (_, val) { return _.el.innerText = val; }
+        };
+        _this.children = [];
+        _this.nodeName = tagName;
+        if (tagName in Predefined) {
+            _this.def = Predefined[tagName];
+        }
+        return _this;
+    }
+    Component.prototype.render = function () {
+        this.el = document.createElement(this.nodeName);
+        return this;
+    };
+    Component.prototype.init = function () {
+        this.tree = this.render();
+        this.el = this.tree.el;
+        this.set(this.def);
+    };
+    Component.prototype.renderTo = function (where) {
+        where.appendChild(this.el);
+    };
+    Component.prototype.addChild = function (child) {
+        child.renderTo(this.el);
+        this.children.push(child);
+    };
+    Component.prototype.beforeSetKey = function (key, val, lastVal) {
+        var _this = this;
+        if (key.substr(0, 2) === 'on') {
+            return function (e) { val.call(_this, e); };
+        }
+        else {
+            return val;
+        }
+    };
+    Component.prototype.afterSetKey = function (key, val, lastVal) {
+        if (this.el) {
+            if (key.substr(0, 2) === 'on') {
+                var eventName = key.toLowerCase().substr(2);
+                if (lastVal) {
+                    this.el.removeEventListener(eventName, lastVal);
+                }
+                this.el.addEventListener(eventName, val);
+            }
+            else {
+                //@ts-ignore
+                this.el[key] = val;
+                if (val === false) {
+                    this.el.removeAttribute(key);
+                }
+                else {
+                    this.el.setAttribute(key, val);
+                }
+            }
+        }
+    };
+    return Component;
+}(Reactive));
+exports.Component = Component;
+var TextNode = /** @class */ (function (_super) {
+    __extends(TextNode, _super);
+    function TextNode() {
+        var _this = _super.call(this, 'TextNode') || this;
+        _this.setters = {
+            value: function (_, val) { return _.el.textContent = val; }
+        };
+        return _this;
+    }
+    TextNode.prototype.render = function () {
+        this.el = document.createTextNode('');
+        return this;
+    };
+    TextNode.prototype.addChild = function (child) {
+        throw new Error('No children in text node');
+    };
+    return TextNode;
+}(Component));
+exports.TextNode = TextNode;
+TextNode.prototype.setters = { value: function (_, val) { return _.el.textContent = val; } };
+var h = function (ctor, props) {
+    var obj;
+    if (typeof ctor === 'string') {
+        obj = new Component(ctor);
+    }
+    else {
+        //@ts-ignore
+        obj = new ctor();
+    }
+    obj.init();
+    obj.set(props);
+    for (var i = 2; i < arguments.length; i++) {
+        var child = arguments[i];
+        if (typeof child === 'string' || typeof child === 'number') {
+            var textNode = new TextNode();
+            textNode.init();
+            textNode.set({ value: child });
+            obj.addChild(textNode);
+        }
+        else if (typeof child === 'function') {
+            obj.addChild(child());
+        }
+        else {
+            obj.addChild(child);
+        }
+    }
+    return obj;
+};
+exports.h = h;
+//# sourceMappingURL=Rjsx.js.map
\ No newline at end of file

dist/Rjsx.js.map

+{"version":3,"file":"Rjsx.js","sourceRoot":"","sources":["../src/Rjsx.ts"],"names":[],"mappings":"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"}
\ No newline at end of file

dist/bundle.js

+!function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=0)}([function(t,e,n){"use strict";n.r(e);var i=function(t){this.state=t?Object.create(t):{},this.subs={}};i.prototype={fire:function(t,e,n){if(t in this.subs)for(var i=this.subs[t],r=0,o=i.length;r<o;r++)i[r](e,n)},on:function(t,e){this.subs[t]||(this.subs[t]=[]).push(e),t in this.state&&e(this.state[t])},un:function(t,e){},set:function(t){for(var e in t)this.setKey(e,t[e])},setKey:function(t,e){var n=this.state[t];if(n===e)return null;if(this.state[t]=e,this.el)if("on"===t.substr(0,2)){var i=t.toLowerCase().substr(2);n&&this.el.removeEventListener(i,n),this.el.addEventListener(i,e)}else!1===e?this.el.removeAttribute(t):this.el.setAttribute(t,e);return this.fire(t,e,n),!0}};var r=function(t,e){var n=this;i.call(this,this.def),this.children=[],t&&(this.el=document.createElement(t)),this.set(e),this.on("value",function(t){return n.el.innerText=t})};r.prototype=new i,Object.assign(r.prototype,{def:{},render:function(t){t.appendChild(this.el)},addChild:function(t){t.render(this.el),this.children.push(t)}});var o=function(t){var e=this;i.call(this,this.def),this.set(t),this.el=document.createTextNode(""),this.on("value",function(t){return e.el.textContent=t})};o.prototype=new r,Object.assign(o.prototype,{def:{type:"Button",disabled:!1},render:function(t){t.appendChild(this.el)},addChild:function(t){throw new Error("No children in text node")}});var s=function(t){var e=this;i.call(this,this.def);var n=u("button",null);this.el=n.el,this.on("value",function(t){return e.el.innerText=t}),this.on("disabled",function(t){return t?e.el.setAttribute("disabled","disabled"):e.el.removeAttribute("disabled")}),this.set(t)};s.prototype=new r,Object.assign(s.prototype,{def:{type:"Button",disabled:!1},render:function(t){t.appendChild(this.el)},addChild:function(t){this.children.push(t),this.el.appendChild(t.el)}});var u=function(t,e){var n;n="string"==typeof t?new r(t,e):new t(e);for(var i=2;i<arguments.length;i++){var s=arguments[i];"string"==typeof s||"number"==typeof s?n.addChild(new o({value:s})):"function"==typeof s?n.addChild(s()):n.addChild(s)}return n},l=u("i",{x:"2"},"text3"),d=u(s,{onClick:function(t,e,n){console.log(this,t,e,n),h.checkbox.set({checked:!h.checkbox.state.checked})}},"text1",function(){return"function"==typeof u?u("b",null,"text2"):null},l,"text4"),c=0;setInterval(function(){l.set({value:c++})},600),console.log(d),d.render(document.body),console.log("hello");var h=new function(){this.checkbox=u("input",{type:"checkbox"}),this.div=u("div",null,this.checkbox,"Title: ",u("input",{value:""})),this.el=this.div.el};d.addChild(h)}]);
+//# sourceMappingURL=bundle.js.map
\ No newline at end of file

dist/cmp/Button.jsx

+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var Rjsx_1 = require("../Rjsx");
+var Button = /** @class */ (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.button = null;
+        _this.def = {
+            type: 'Button',
+            disabled: false
+        };
+        _this.setters = {
+            value: function (_, val) { return _.button.el.innerText = val; },
+            disabled: function (_, val) { return _.button.set({ disabled: val }); }
+        };
+        return _this;
+    }
+    Button.prototype.render = function () {
+        //@ts-ignore
+        this.button = <button />;
+        return this.button;
+    };
+    return Button;
+}(Rjsx_1.Component));
+exports.Button = Button;
+//# sourceMappingURL=Button.jsx.map
\ No newline at end of file

dist/cmp/Button.jsx.map

+{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../src/cmp/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,gCAA2D;AAE3D;IAAqB,0BAAS;IAA9B;QAAA,qEAeC;QAdG,YAAM,GAAc,IAAI,CAAC;QACzB,SAAG,GAAG;YACF,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,KAAK;SAClB,CAAC;QACF,aAAO,GAAiC;YACpC,KAAK,EAAE,UAAC,CAAC,EAAC,GAAU,IAAG,OAAA,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,GAAG,GAAG,EAA3B,CAA2B;YAClD,QAAQ,EAAE,UAAC,CAAC,EAAC,GAAW,IAAG,OAAA,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAC,QAAQ,EAAE,GAAG,EAAC,CAAC,EAA7B,CAA6B;SAC3D,CAAC;;IAMN,CAAC;IALG,uBAAM,GAAN;QACI,YAAY;QACZ,IAAI,CAAC,MAAM,GAAG,CAAC,MAAM,CAAA,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IACL,aAAC;AAAD,CAAC,AAfD,CAAqB,gBAAS,GAe7B;AAEO,wBAAM"}
\ No newline at end of file

dist/index.jsx

+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var Button_1 = require("./cmp/Button");
+var Rjsx_1 = require("./Rjsx");
+var i, btn, item;
+var Item = /** @class */ (function (_super) {
+    __extends(Item, _super);
+    function Item() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.checkbox = null;
+        _this.checkbox2 = null;
+        return _this;
+    }
+    Item.prototype.render = function () {
+        var checkbox3;
+        return <div>
+            {this.checkbox = <input disabled={false} type="checkbox"/>}<br />
+            Title: <input value={Rjsx_1.R(function () { return checkbox3.on('checked'); })}/><br />
+            {this.checkbox2 = <input type="checkbox"/>}<br />
+            {checkbox3 = <input type="checkbox" checked={Rjsx_1.R(this.checkbox2.on('checked'), this.checkbox.on('checked'), function (v1, v2) { return !!(v1 ^ v2); })}/>}<br />
+            {<input type="checkbox" id="c4" checked={Rjsx_1.R(checkbox3.on('checked'))}/>}<br /><br /><br /><br />
+        </div>;
+    };
+    return Item;
+}(Rjsx_1.Component));
+<div className='wrapper'>
+
+    {item = <Item />}
+    {btn = <Button_1.Button onClick={function (a, b, c) {
+    item.checkbox.set({ checked: !item.checkbox.state.checked });
+}}>text1<b>text2</b>{i = <i x="2">text3</i>}text4</Button_1.Button>}
+    <Item />
+    <Item />
+</div>;
+renderTo(document.body);
+var counter = 0;
+setInterval(function () {
+    i.set({ text: counter++ });
+    btn.set({ disabled: counter % 2 === 0 });
+    item.checkbox.set({ checked: counter % 2 === 1 });
+    item.checkbox2.set({ checked: counter % 4 > 1 });
+}, 1000);
+console.log(btn);
+//# sourceMappingURL=index.jsx.map
\ No newline at end of file

dist/index.jsx.map

+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
\ No newline at end of file

package.json

@@ -10,9 +10,18 @@
   "babel": {
     "presets": [
       "@babel/preset-env",
-      ["@babel/preset-react", {
+      [
+        "@babel/preset-react",
+        {
           "pragma": "h"
-      }]
+        }
+      ],
+      ["@babel/typescript", { "jsxPragma": "h" }]
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-class-properties",
+      ["transform-react-jsx", { "pragma": "h" }]
+
     ]
   },
   "keywords": [],
@@ -20,15 +29,21 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.3.4",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.0.5",
     "babel-preset-env": "^1.7.0",
     "babel-preset-preact": "^1.1.0",
     "babel-preset-react": "^6.24.1",
+    "source-map-loader": "^0.2.4",
+    "typescript": "^3.3.3333",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.2.1"
-  }
+  },
+  "types": "src/Rjsx.d.ts",
+  "typings": "./src/Rjsx.d.ts"
 }

src/Rjsx.ts

+export type PropertySetterInterface<T> = (cmp: T, val: any, oldVal: any)=>any;
+export type TreeType = {el: HTMLElement|Text,[key: string]: any};
+export interface PropSettersInterface<T> {
+    [key: string]: PropertySetterInterface<T>
+}
+
+/*
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            input: {
+                type?: string;
+                value?: any;
+                disabled?: boolean
+            };
+            div: {className?: string}
+            br: {}
+
+        }
+    }
+    namespace Rjsx {
+        R(byPass: Function):Component;
+
+    }
+}*/
+
+
+const byPass = (a:any)=>a;
+
+export class Reactivity {
+    args: any[] = [];
+    scope:any = null;
+    key: string = null;
+    fn: Function = null;
+    constructor(args:any[]) {
+        this.args = args;
+    }
+    emit() {
+        this.scope.setKey(this.key, this.fn.apply(this.scope, this.args));
+    }
+}
+
+export const TaskManager = {
+    jobs: [] as Function[],
+    active: false,
+    add: function(task: Function) {
+        TaskManager.jobs.push(task);
+        if(!TaskManager.active) {
+            TaskManager.active = true;
+            requestAnimationFrame(TaskManager.work);
+        }
+    },
+    work: function() {
+        const jobs = TaskManager.jobs;
+        TaskManager.jobs = [];
+        TaskManager.active = false;
+
+        for (let i = 0, _i = jobs.length; i < _i; i++) {
+            jobs[i]();
+        }
+    }
+};
+interface ReactiveSubscriber {
+    trigger?: Function;
+    value: any;
+}
+type Aggregate = (...values: any[])=>any;
+export function R (byPass: Function): Reactivity;
+export function R (reactiveSubscriber1: ReactiveSubscriber, aggregate: Aggregate): Reactivity;
+export function R (reactiveSubscriber1: ReactiveSubscriber, reactiveSubscriber2: ReactiveSubscriber, aggregate: Aggregate): Reactivity;
+export function R (reactiveSubscriber1: ReactiveSubscriber, reactiveSubscriber2: ReactiveSubscriber, reactiveSubscriber3: ReactiveSubscriber, aggregate: Aggregate): Reactivity;
+export function R (reactiveSubscriber1: ReactiveSubscriber, reactiveSubscriber2: ReactiveSubscriber, reactiveSubscriber3: ReactiveSubscriber, reactiveSubscriber4: ReactiveSubscriber, ...other: (Aggregate|ReactiveSubscriber)[]): Reactivity;
+export function R ():Reactivity {
+    const args: any[] = [];
+
+    const reactivity = new Reactivity(args);
+    for(let i = 0, _i = arguments.length === 1 ? arguments.length : arguments.length - 1; i < _i; i++){
+        const obj: ReactiveSubscriber |  Function= arguments[i];
+        if(typeof obj === 'function'){
+            TaskManager.add(()=>{
+                const objResolved = obj();
+                objResolved.trigger = (val: any) => {
+                    args[i] = val;
+                    reactivity.emit();
+                };
+                args[i] = objResolved.value;
+            })
+        } else {
+
+            obj.trigger = (val: any) => {
+                args[i] = val;
+                reactivity.emit();
+            };
+            args[i] = obj.value;
+        }
+    }
+
+    if(arguments.length === 1){
+        reactivity.fn = byPass;
+    }else{
+        reactivity.fn = arguments[arguments.length-1];
+    }
+
+    return reactivity;
+};
+
+class Reactive {
+    state: any = {};
+    subs: {[key: string]: Function[]} = {};
+    setters: PropSettersInterface<Reactive> = {};
+    constructor(cfg: object|false){
+        if(cfg === false) {
+            return;
+        }
+
+        this.state = cfg ? Object.create(cfg) : {};
+        this.subs = {};
+        // @ts-ignore
+    }
+
+    fire(key:string, val:any, lastVal:any){
+        if(key in this.subs){
+            const subs = this.subs[key];
+            for(let i = 0, _i = subs.length; i < _i; i++){
+                subs[i].call(this, this, val, lastVal);
+            }
+        }
+    }
+    on(key: string, fn?: PropertySetterInterface<Reactive>){
+        let FN: PropertySetterInterface<Reactive>, obj: any;// TODO unAny
+        if(arguments.length === 1) {
+            obj = {
+                value: key in this.state ? this.state[key] :void 0
+            };
+            FN = function(_, val, oldVal) {
+                obj.value = val;
+                obj.trigger && obj.trigger(val)
+            };
+        }else{
+            FN = fn;
+        }
+        (this.subs[key] || (this.subs[key] = [])).push(FN);
+        if(key in this.state)
+            FN.call(this, this, this.state[key]);
+
+        return obj;
+    }
+    set(obj: {[key: string]: any}){
+        for(let key in obj)
+            this.setKey(key, obj[key]);
+    }
+    afterSetKey(key: string, val: any, lastVal: any){}
+    beforeSetKey(key: string, val: any, lastVal: any){return val;}
+    setKey(key: string, val: any){
+        const lastVal = this.state[key];
+        if(lastVal === val)
+            return null;
+        if(val instanceof Reactivity){
+            val.scope = this;
+            val.key = key;
+            val.emit();
+            return true;
+        }
+
+        val = this.beforeSetKey(key, val, lastVal);
+        this.state[key] = val;
+
+        if(key in this.setters){
+            this.setters[key].call(this, this, val, lastVal);
+        }else {
+            this.afterSetKey(key, val, lastVal);
+        }
+
+        this.fire(key, val, lastVal);
+        return true;
+    }
+}
+
+const Predefined: {[key: string]: any} = {
+    input: {
+        onChange: function() {
+            this.set({checked: this.el.checked})
+        }
+    }
+};
+class Component extends Reactive {
+    nodeName: string = null;
+    el: HTMLElement|Text|any = null;
+    def = {};
+    children: Component[] = null;
+    tree: TreeType = null;
+    setters: PropSettersInterface<Component> = {
+        dangerouslySetInnerHTML: (_, htmlText) => _.el.innerHTML = htmlText,
+        text: (_, val) => _.el.innerText = val
+    };
+
+    render(): TreeType{
+        this.el = document.createElement(this.nodeName);
+        return this;
+    }
+    constructor(tagName: string){
+        super({});
+        this.children = [];
+        this.nodeName = tagName;
+        if(tagName in Predefined){
+            this.def = Predefined[tagName];
+        }
+    }
+    init(){
+        this.tree = this.render();
+        this.el = this.tree.el as HTMLElement;
+        this.set(this.def);
+    }
+    renderTo(where: HTMLElement) {
+        where.appendChild(this.el);
+    }
+    addChild(child: Component) {
+        child.renderTo(this.el);
+        this.children.push(child);
+    }
+    beforeSetKey(key: string, val: any, lastVal: any): any {
+        if (key.substr(0, 2) === 'on') {
+            return (e: any)=>{val.call(this, e)};
+        }else{
+            return val;
+        }
+
+    }
+
+    afterSetKey(key: string, val: any, lastVal: any){
+        if(this.el){
+            if (key.substr(0, 2) === 'on') {
+                const eventName = key.toLowerCase().substr(2);
+                if (lastVal) {
+                    this.el.removeEventListener(eventName, lastVal);
+                }
+
+                this.el.addEventListener(eventName, val);
+            } else {
+                //@ts-ignore
+                this.el[key]  = val;
+                if (val === false) {
+                    this.el.removeAttribute(key);
+                } else {
+                    this.el.setAttribute(key, val);
+                }
+            }
+        }
+    }
+}
+
+
+class TextNode extends Component {
+    constructor(){
+        super('TextNode');
+    }
+    setters: PropSettersInterface<TextNode> = {
+        value: (_, val)=>_.el.textContent = val
+    };
+    render(){
+        this.el = document.createTextNode('') as Text;
+        return this;
+    }
+    addChild (child: any) {
+        throw new Error('No children in text node');
+    }
+}
+TextNode.prototype.setters = { value: (_, val)=>_.el.textContent = val};
+
+
+
+const h = function(ctor: string|Function, props: any){
+    let obj;
+    if(typeof ctor==='string'){
+        obj = new Component(ctor);
+    }else {
+        //@ts-ignore
+        obj = new (ctor as Function)();
+    }
+    obj.init();
+    obj.set(props);
+    for(let i = 2; i < arguments.length; i++) {
+        const child = arguments[i];
+        if(typeof child === 'string' || typeof child === 'number'){
+            let textNode = new TextNode();
+            textNode.init();
+            textNode.set({value:child});
+            obj.addChild(textNode);
+        }else if(typeof child === 'function') {
+            obj.addChild(child());
+        }else{
+            obj.addChild(child);
+        }
+    }
+    return obj;
+};
+
+
+
+export {Component, TextNode, h};
\ No newline at end of file

src/cmp/Button.jsx

-const Reactive = function(cfg){
-    this.state = cfg || {};
-    this.subs = {};
-};
-
-Reactive.prototype = {
-    fire: function(key, val, lastVal){
-        if(key in this.subs){
-            const subs = this.subs[key];
-            for(let i = 0, _i = subs.length; i < _i; i++){
-                subs[i](val, lastVal);
-            }
-        }
-    },
-    on: function(key, fn){
-        this.subs[key] || (this.subs[key] = []).push(fn);
-        if(key in this.state)
-            fn(this.state[key]);
-    },
-    un: function(key, fn){
-
-    },
-    set: function(obj){
-        for(let key in obj)
-            this.setKey(key, obj[key]);
-    },
-    setKey: function(key, val){
-        const lastVal = this.state[key];
-        if(lastVal === val)
-            return null;
-        this.state[key] = val;
-        this.fire(key, val, lastVal);
-        return true;
-    }
-};
-
-const Button = function(cfg){
-    Reactive.call(this, this.def);
-    this.children = [];
-    this.set(cfg);
-
-};
-Button.prototype = new Reactive();
-Object.assign(Button.prototype, {
-    def: {
-        type: 'Button',
-        disabled: false
-    },
-    render: function(where){
-        const button = document.createElement('button');
-        this.on('value', (val)=>button.innerText = val);
-        where.appendChild(button);
-    },
-    addChild: function (child) {
-        this.children.push(child);
-    }
-});
-
-/*const btn = new Button({value: '123'});
-btn.render(document.body);
-
-let count = 0;
-setInterval(()=>{
-    btn.set({value: 'btn '+(count++)})
-},100);*/
-
-export {Button};
\ No newline at end of file

src/cmp/Button.tsx

+import {Component, h, PropSettersInterface} from '../Rjsx';
+
+class Button extends Component {
+    button: Component = null;
+    def = {
+        type: 'Button',
+        disabled: false
+    };
+    setters: PropSettersInterface<Button> = {
+        value: (_,val:string)=>_.button.el.innerText = val,
+        disabled: (_,val:boolean)=>_.button.set({disabled: val})
+    };
+    render(){
+        //@ts-ignore
+        this.button = <button/>;
+        return this.button;
+    }
+}
+
+export {Button};
\ No newline at end of file

src/index.jsx

-import {Button} from './cmp/Button';
-const slice = [].slice;
-const VNode = function(ctor, props){
-    this.ctor = ctor;
-    this.props = props;
-    this.children = [];
-};
-const Generic = function (tagName, props) {
-    this.props = props;
-    this.children = [];
-    this.el = document.createElement(tagName);
-};
-Generic.prototype = {
-    render: function(where){
-        where.appendChild(this.el);
-    },
-    addChild: function (child) {
-        child.render(this.el)
-        this.children.push(child);
-    }
-};
-const h = function(ctor, props){
-    let obj;
-    if(typeof ctor==='string'){
-        obj = new Generic(ctor, props);
-    }else {
-        obj = new ctor(props);
-    }
-    for(let i = 2; i < arguments.length; i++) {
-        obj.addChild(arguments[i]);
-    }
-    return obj;
-    //return new VNode(ctor, props, slice.call(arguments, 2));
-};
-var a = [1,2,3];
-
-var btn = (<Button>text1{()=>typeof h === 'function'?<b>text2</b>:null}<i x="2">text3</i>text4</Button>);
-console.log(btn);
-btn.render(document.body)
-console.log("hello");

src/index.tsx

+import {Button} from './cmp/Button';
+import {h, R, Component} from './Rjsx';
+let i, btn, item;
+
+interface ItemProps {
+    onClick: Function
+}
+class Item<ItemProps> extends Component {
+    checkbox: Component = null;
+    checkbox2: Component = null;
+
+    render(){
+        let checkbox3: Component;
+
+        return <div>
+            {this.checkbox = <input disabled={false} type="checkbox"/>}<br/>
+            Title: <input value={R(()=>checkbox3.on('checked'))}/><br/>
+            {this.checkbox2 = <input type="checkbox"/>}<br/>
+            {checkbox3 = <input type="checkbox" checked={R(
+                this.checkbox2.on('checked'),
+                this.checkbox.on('checked'),
+                (v1,v2)=>!!(v1^v2)
+            )}/>}<br/>
+            {<input type="checkbox" id="c4" checked={R(checkbox3.on('checked'))}/>}<br/><br/><br/><br/>
+        </div>;
+    }
+}
+
+<div className='wrapper'>
+
+    {item = <Item/>}
+    {btn = <Button onClick={function(a,b,c){
+        item.checkbox.set({checked: !item.checkbox.state.checked})
+    }}>text1<b>text2</b>{i = <i x="2">text3</i>}text4</Button>}
+    <Item/>
+    <Item />
+</div>.renderTo(document.body);
+
+let counter = 0;
+setInterval(()=>{
+    i.set({text: counter++});
+    btn.set({disabled: counter%2===0});
+    item.checkbox.set({checked: counter%2===1});
+    item.checkbox2.set({checked: counter%4>1});
+}, 1000);
+
+console.log(btn);
\ No newline at end of file

tsconfig.json

+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es5",
+    "jsx": "preserve",
+    "jsxFactory": "h"
+  },
+  "include": [
+    "./src/**/*"
+  ]
+}
\ No newline at end of file

typings.json

+{
+  "name": "Rjsx",
+  "main": "src/Rjsx.d.ts",
+  "version": false
+}
\ No newline at end of file

webpack.config.js

 
 module.exports = {
-    entry: './src/index.jsx',
+    entry: './src/index.tsx',
     devtool: 'source-map',
     module: {
         rules: [
@@ -8,11 +8,15 @@ module.exports = {
                 test: /\.(js|jsx)$/,
                 exclude: /node_modules/,
                 use: ['babel-loader']
-            }
+            },
+            {
+                test: /\.tsx?$/,
+                loader: 'babel-loader',
+            },
         ]
     },
     resolve: {
-        extensions: ['*', '.js', '.jsx']
+        extensions: ['*', '.js', '.jsx', '.tsx','.ts']
     },
     output: {
         path: __dirname + '/dist',