setting sub properties

src/F.js

@@ -13,12 +13,12 @@ Reactivity.prototype = {
     fn: null,
     emit: function() {
         TaskManager.add(()=>{
-            this.scope.setKey(this.key, this.fn.apply(this.scope, this.args));
+            this.scope._setKey(this.key, 0, this.fn.apply(this.scope, this.args), this.scope.state, this.scope.setters);
         });
     }
 };
 
-
+let jobSwap = [];
 export const TaskManager = {
     jobs: [],
     active: false,
@@ -31,7 +31,9 @@ export const TaskManager = {
     },
     work: function() {
         const jobs = TaskManager.jobs;
-        TaskManager.jobs = [];
+        TaskManager.jobs = jobSwap;
+        jobSwap.length = 0;
+        jobSwap = jobs;
         TaskManager.active = false;
 
         for (let i = 0, _i = jobs.length; i < _i; i++) {
@@ -116,19 +118,48 @@ Reactive.prototype = {
 
         return obj;
     },
-    set: function (obj) {
-        for (let key in obj)
-            this.setKey(key, obj[key]);
+    set: function (obj, statePtr, settersPtr) {
+        let state, setters, key;
+
+        if(statePtr === void 0){
+            state = this.state;
+            setters = this.setters;
+        }else{
+            state = statePtr;
+            setters = settersPtr;
+        }
+
+        for (key in obj)
+            this._setKey(key.split('.'), 0, obj[key], state, setters);
     },
     afterSetKey: function (key, val, lastVal) {
     },
     beforeSetKey: function (key, val, lastVal) {
         return val;
     },
-    setKey: function (key, val) {
-        const lastVal = this.state[key];
-        if (lastVal === val)
+
+    _setKey: function (key, keyCursor, val, state, setters) {
+
+        let valueKey;
+
+        const theKey = key[keyCursor];
+        let lastVal = state[theKey];
+
+        if(key.length>keyCursor+1){
+            // Deeper
+            if(typeof state[theKey] !== 'object'){
+                state[theKey] = lastVal = {};
+            }
+            return this._setKey(key, keyCursor + 1, val, lastVal, setters[theKey] || {});
+
+        }
+        const isObjectVal = typeof val === 'object';
+        if (lastVal === val && !isObjectVal){
             return null;
+        }
+
+
+
         if (val instanceof Reactivity) {
             val.scope = this;
             val.key = key;
@@ -136,20 +167,32 @@ Reactive.prototype = {
             return true;
         }
 
-        val = this.beforeSetKey(key, val, lastVal);
-        this.state[key] = val;
 
-        if (key in this.setters) {
-            if(typeof this.setters[key] === 'function'){
-                this.setters[ key ].call( this, this, val, lastVal );
-            }else{
 
+        val = this.beforeSetKey(theKey, val, lastVal);
+        state[theKey] = val;
+
+        if (theKey in setters) {
+            if(typeof setters[theKey] === 'function'){
+                setters[ theKey ].call( this, this, val, lastVal );
+            }else{
+                if(isObjectVal){
+                    if(typeof lastVal !== 'object'){
+                        state[theKey] = lastVal = {};
+                    }
+
+                    // TODO if lastVal is not reactive => make it
+                    for (valueKey in val){
+                        this._setKey(key.concat(valueKey), keyCursor + 1, val[valueKey], lastVal, setters[theKey] || {})
+                    }
+                    return true;
+                }
             }
         } else {
-            this.afterSetKey(key, val, lastVal);
+            this.afterSetKey(theKey, val, lastVal);
         }
 
-        this.fire(key, val, lastVal);
+        this.fire(theKey, val, lastVal);
         return true;
     }
 };
@@ -181,7 +224,13 @@ Object.assign(Component.prototype, {
     tree: null,
     setters: {
         dangerouslySetInnerHTML: (_, htmlText) => _.el.innerHTML = htmlText,
-        text: (_, val) => _.el.innerText = val
+        text: (_, val) => _.el.innerText = val,
+        style: (_, val)=>{
+            var style = _.el.style;
+            for(var i in val){
+                style[i] = val[i];
+            }
+        }
     },
 
     render: function () {

src/index.jsx

@@ -43,16 +43,14 @@ class UIComponent extends Component {
         }
     };
     setters = {
-        hidden: (_, val) => _.el.style.display = val ? 'block' : 'none'
-    }
-}
+        hidden: (_, val) => _.el.style.display = val ? 'block' : 'none',
+        style: (_, val)=>{
 
-class Input extends UIComponent {
-    def = {
-        value: null
+        }
     }
 }
 
+
 class Check extends UIComponent {
     setters = {
         value: (_, val)=>{
@@ -67,20 +65,30 @@ class Check extends UIComponent {
     };
     render(){
         this.check = <input type="checkbox"/>;
+        this.set({value: R(this.check.on('checked'))})
         this.check.on('click', ()=>{console.log('lalka')} );
         this.label = <span>456</span>;
-        return <div>{this.check}{this.label}</div>
+        return <label>{this.check}{this.label}</label>
     }
 }
 
 
+class Slider extends UIComponent {
+    render(){
+        return <div class="slider" style={{background: 'red'}}>
 
+        </div>;
+    }
+}
 
-//R(()=>i.on('text'))
 
+//
+let chhh = <Check value={false} label={{text: R(()=>i.on('text'))}}/>;
+console.log(chhh);
 <div className='wrapper'>
-    <Check value={true} label={{text: 'Ti pidor'}}/>
-    <Check value={false}/>
+    <Check value={true} label={{text: 'Ti pidor'}} hidden={R(()=>chhh.on('value'))}/>
+    {chhh}
+    <Check value={R(()=>chhh.on('value'))}/>
     {item = <Item/>}
     {btn = <Button onClick={function(e,b,c){
         item.checkbox.set({checked: !item.checkbox.state.checked})
@@ -88,6 +96,7 @@ class Check extends UIComponent {
     <Item/>
     <Item />
     {but}
+    <Slider/>
 </div>.renderTo(document.body);
 
 let counter = 0;
@@ -102,7 +111,7 @@ setTimeout(()=>{
     //debugger;
     but.set({
         text: R(but.on('text'), (v1)=>{
-            return (v1-0)+1
+            return (v1-0)+148
         })
     });
 }, 100);

test/const1.js

+var x;
+for(var i = 0; i < 0x13322; i++){
+    x+=i;
+}
+void 0;
\ No newline at end of file