Component clone, Components in def would be cloned

.idea/workspace.xml

@@ -2,16 +2,9 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="60f6b3df-8be9-486a-9e3c-d8ae43c3e79e" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/test/creatingEl.jsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/webpack.test.config.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/F.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/F.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/index.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.jsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/test/const1.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/test/out" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -26,11 +19,11 @@
     <splitter split-orientation="horizontal" split-proportion="0.44885993">
       <split-first>
         <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-          <file pinned="false" current-in-tab="true">
+          <file pinned="false" current-in-tab="false">
             <entry file="file://$PROJECT_DIR$/src/index.jsx">
               <provider selected="true" editor-type-id="text-editor">
-                <state relative-caret-position="687">
-                  <caret line="115" lean-forward="true" selection-start-line="115" selection-end-line="115" />
+                <state relative-caret-position="474">
+                  <caret line="81" column="15" selection-start-line="81" selection-start-column="15" selection-end-line="81" selection-end-column="15" />
                   <folding>
                     <element signature="e#0#36#0" expanded="true" />
                   </folding>
@@ -97,11 +90,11 @@
               </provider>
             </entry>
           </file>
-          <file pinned="false" current-in-tab="false">
+          <file pinned="false" current-in-tab="true">
             <entry file="file://$PROJECT_DIR$/src/F.js">
               <provider selected="true" editor-type-id="text-editor">
-                <state relative-caret-position="319">
-                  <caret line="307" column="8" selection-start-line="307" selection-start-column="8" selection-end-line="307" selection-end-column="8" />
+                <state relative-caret-position="-4116">
+                  <caret line="277" column="4" selection-start-line="277" selection-start-column="4" selection-end-line="277" selection-end-column="17" />
                 </state>
               </provider>
             </entry>
@@ -166,16 +159,16 @@
                   </provider>
                 </entry>
               </file>
-              <file pinned="false" current-in-tab="false">
+              <file pinned="false" current-in-tab="true">
                 <entry file="file://$PROJECT_DIR$/src/F.js">
                   <provider selected="true" editor-type-id="text-editor">
-                    <state relative-caret-position="453">
-                      <caret line="341" column="25" selection-start-line="341" selection-start-column="25" selection-end-line="341" selection-end-column="25" />
+                    <state relative-caret-position="367">
+                      <caret line="383" column="21" selection-start-line="383" selection-start-column="21" selection-end-line="383" selection-end-column="21" />
                     </state>
                   </provider>
                 </entry>
               </file>
-              <file pinned="false" current-in-tab="true">
+              <file pinned="false" current-in-tab="false">
                 <entry file="file://$PROJECT_DIR$/test/creatingEl.jsx">
                   <provider selected="true" editor-type-id="text-editor">
                     <state relative-caret-position="544">
@@ -241,11 +234,6 @@
   </component>
   <component name="FindInProjectRecents">
     <findStrings>
-      <find>padding</find>
-      <find>margin</find>
-      <find>onClick</find>
-      <find>preact</find>
-      <find>Mouse</find>
       <find>MouseEvent</find>
       <find>Predefined</find>
       <find>init</find>
@@ -265,12 +253,17 @@
       <find>addChild</find>
       <find>styleSetters</find>
       <find>HTMLElement</find>
-      <find>cm</find>
       <find>set:</find>
       <find>res</find>
       <find>style</find>
       <find>back</find>
+      <find>cm</find>
+      <find>Reac</find>
+      <find>Reactivity</find>
+      <find>.def</find>
       <find>text</find>
+      <find>beforeSetKey</find>
+      <find>mover</find>
     </findStrings>
     <replaceStrings>
       <replace>| Reactivity;</replace>
@@ -311,8 +304,8 @@
         <option value="$PROJECT_DIR$/webpack.config.js" />
         <option value="$PROJECT_DIR$/package.json" />
         <option value="$PROJECT_DIR$/test/creatingEl.jsx" />
-        <option value="$PROJECT_DIR$/src/F.js" />
         <option value="$PROJECT_DIR$/src/index.jsx" />
+        <option value="$PROJECT_DIR$/src/F.js" />
       </list>
     </option>
   </component>
@@ -447,7 +440,7 @@
       <workItem from="1557233390052" duration="5206000" />
       <workItem from="1557261512369" duration="21515000" />
       <workItem from="1558366647257" duration="9105000" />
-      <workItem from="1559230950782" duration="26084000" />
+      <workItem from="1559230950782" duration="30313000" />
     </task>
     <servers />
   </component>
@@ -484,7 +477,7 @@
     </history-entry>
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="158028000" />
+    <option name="totallyTimeSpent" value="162257000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="-8" y="-8" width="3456" height="1416" extended-state="6" />
@@ -496,14 +489,14 @@
       <window_info id="npm" order="3" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
       <window_info anchor="bottom" id="Find" order="1" />
-      <window_info active="true" anchor="bottom" id="Run" order="2" visible="true" weight="0.23070927" />
+      <window_info anchor="bottom" id="Run" order="2" weight="0.23070927" />
       <window_info anchor="bottom" id="Debug" order="3" weight="0.3998441" />
       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
       <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
       <window_info anchor="bottom" id="TODO" order="6" />
       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" order="8" />
-      <window_info anchor="bottom" id="Terminal" order="9" weight="0.1979735" />
+      <window_info active="true" anchor="bottom" id="Terminal" order="9" visible="true" weight="0.1979735" />
       <window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
       <window_info anchor="bottom" id="TypeScript" order="11" weight="0.32969603" />
       <window_info anchor="right" id="Commander" order="0" weight="0.4" />
@@ -632,13 +625,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/.gitignore">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="85">
-          <caret line="5" selection-start-line="5" selection-end-line="5" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/Rjsx.d.ts">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="1853">
@@ -733,22 +719,29 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/F.js">
+    <entry file="file://$PROJECT_DIR$/.gitignore">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="319">
-          <caret line="307" column="8" selection-start-line="307" selection-start-column="8" selection-end-line="307" selection-end-column="8" />
+        <state relative-caret-position="85">
+          <caret line="5" selection-start-line="5" selection-end-line="5" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/index.jsx">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="687">
-          <caret line="115" lean-forward="true" selection-start-line="115" selection-end-line="115" />
+        <state relative-caret-position="474">
+          <caret line="81" column="15" selection-start-line="81" selection-start-column="15" selection-end-line="81" selection-end-column="15" />
           <folding>
             <element signature="e#0#36#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/F.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="367">
+          <caret line="383" column="21" selection-start-line="383" selection-start-column="21" selection-end-line="383" selection-end-column="21" />
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>
\ No newline at end of file

src/F.js

@@ -82,7 +82,32 @@ export const R = function() {
 
     return reactivity;
 };
-
+export const ReactiveContent = function(parent, reactivity) {
+    reactivity.scope = this;
+    reactivity.key = 'content';
+    this.parent = parent;
+    this.reactivity = reactivity;
+};
+ReactiveContent.prototype = {
+    _setKey: function(key, keyCursor, val, state, setters) {
+        const children = this.parent.children;
+        const index = children.indexOf(this);
+
+        if(index>-1){
+            let i, _i = children.length, child;
+
+            for( i = index + 1; i < _i; i++ ){
+                child = children[i];
+                if(child instanceof Component){
+                    child.el.parentNode.insertBefore(val.el, child.el);
+                    break;
+                }
+            }
+        }else{
+            throw new Error('Fix it. My parent does not contain me (ReactiveChild)');
+        }
+    }
+};
 export const Reactive = function(cfg){
     if(cfg === false) {
         return;
@@ -276,6 +301,7 @@ const styleSetters = {
 };
 Component.prototype = new Reactive();
 Object.assign(Component.prototype, {
+    _ctor: Component,
     _laterTrigger: false,
     later: function(name, fn) {
         if(!(name in this._laters)){
@@ -343,10 +369,21 @@ Object.assign(Component.prototype, {
         this.el = document.createElement(this.nodeName);
         return this;
     },
+
+    // become true after init function is finished
+    _inited: false,
     init: function () {
         this.tree = this.render();
         this.el = this.tree.el;
+
         this.set(this.def);
+        this._inited = true;
+    },
+    clone: function() {
+        const clone = new this._ctor(this.nodeName);
+        clone.init();
+        clone.set(this.state);
+        return clone;
     },
     renderTo: function (where) {
         where.appendChild(this.el);
@@ -369,10 +406,19 @@ Object.assign(Component.prototype, {
         }
     },
     addChild: function (child) {
-        child.renderTo(this.el);
-        this.children.push(child);
-        if(this.inDOM){
-            child._updateSize();
+        if(child instanceof Reactivity){
+
+            this.children.push( new ReactiveContent(this, child) );
+
+            /*val.scope = this;
+            val.key = key;*/
+            //debugger
+        }else{
+            child.renderTo( this.el );
+            this.children.push( child );
+            if( this.inDOM ){
+                child._updateSize();
+            }
         }
     },
     _updateSize: function() {
@@ -387,7 +433,12 @@ Object.assign(Component.prototype, {
                 val.call(this, e)
             };
         } else {
-            return val;
+            if(val instanceof Component && !this._inited){
+                // magically defined subcomponents
+                return val.clone();
+            }else{
+                return val;
+            }
         }
 
     },
@@ -465,6 +516,8 @@ Component.extend = function(name, cfg) {
     ctor.prototype.type = name;
 
     Object.assign(ctor.prototype, cfg);
+
+    ctor.prototype._ctor = ctor;
     ctor.prototype.setters = setters;
     ctor.extend = Component.extend;
     return ctor;

src/index.jsx

@@ -78,7 +78,10 @@ const Slider = UIComponent.extend('Slider', {
         step: 1,
         value: 0,
         sliderWidth: 10,
-        background: 'red'
+        background: 'red',
+        mover: <div
+            style={{cursor: 'pointer', width: 10, height: 10, border: '3px solid #fff', position: 'absolute', boxSizing: 'border-box'}}
+        />
     },
     recalc: function() {
         if(this.state.value<this.state.from){
@@ -89,7 +92,7 @@ const Slider = UIComponent.extend('Slider', {
         }
 
         var delta = this.state.to - this.state.from;
-        this.mover.set({
+        this.state.mover.set({
             style: {
                 left: (this.state.value-this.state.from)/delta*(this.state.width-this.state.sliderWidth)
             }
@@ -98,21 +101,20 @@ const Slider = UIComponent.extend('Slider', {
     setters: {
         'from,to,step,value,width': (_)=>{
             _.later('recalc', _.recalc);
-        }
-    },
-    render(){
-        let sliderRect;
-        const moveFn = (e)=>{
-            const newRawVal = Math.max(0, Math.min(1,(e.clientX-sliderRect.left)/(sliderRect.width))),
-                delta = this.state.to - this.state.from,
-                newRangedVal = newRawVal*delta+this.state.from,
-                step = this.state.step,
-                newRoundedVal = Math.round(newRangedVal/step)*step;
-            this.set({value: newRoundedVal});
-        };
-        this.mover = <div
-            style={{cursor: 'pointer', width: 10, height: 10, border: '3px solid #fff', position: 'absolute', boxSizing: 'border-box'}}
-            onMouseDown={(e)=>{
+        },
+        mover: function(_, val) {
+            let sliderRect;
+            const moveFn = (e)=>{
+                const newRawVal = Math.max(0, Math.min(1,(e.clientX-sliderRect.left)/(sliderRect.width))),
+                    delta = this.state.to - this.state.from,
+                    newRangedVal = newRawVal*delta+this.state.from,
+                    step = this.state.step,
+                    newRoundedVal = Math.round(newRangedVal/step)*step;
+                this.set({value: newRoundedVal});
+            };
+            //this.state.mover = ;
+
+            val.on('mousedown', (e)=>{
                 console.log('down');
 
                 sliderRect = this.getBoundingClientRect();
@@ -122,12 +124,12 @@ const Slider = UIComponent.extend('Slider', {
                 });
                 this.set({width: sliderRect.width});
                 e.preventDefault();
-            }}
-        />;
-
-        //console.log()
+            });
+        }
+    },
+    render(){
         return <div class="slider" style={{background: R(this.sub('background')), position: 'relative', height: 10}}>
-            {this.mover}
+            {R(this.sub('mover'))}<div/>
         </div>;
     }
 });
@@ -164,9 +166,11 @@ let RS, GS, BS;
         (r)=>'rgba('+[r,0,0,1]+')'
     )}/>}
     {GS = <Slider from={0} to={255} step={1} value={123} background={R(
-        ()=>GS.sub('value'),
-        (g)=>'rgba('+[0,g,0,1]+')'
-    )}/>}
+            ()=>GS.sub('value'),
+            (g)=>'rgba('+[0,g,0,1]+')'
+        )}
+        mover={<div style={{width:13, height:23, background:'#f0f', position: 'absolute'}}/>}
+    />}
     {BS = <Slider from={0} to={255} step={1} value={123} background={R(
         ()=>BS.sub('value'),
         (b)=>'rgba('+[0,0,b,1]+')'