Skip to content

R
reactive
Commit 31813a8d by Иван Кубота
Options

1. Subscribe as component

2. Reflection (collect reactivities and subscription for recreation ability) 3. clone Component method 4. Lots of unsubscribes 5. Set child component properties as parents properties
parent b0ffe5cc
Showing with 402 additions and 179 deletions
.idea/workspace.xml
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="60f6b3df-8be9-486a-9e3c-d8ae43c3e79e" name="Default Changelist" comment=""> <list default="true" id="60f6b3df-8be9-486a-9e3c-d8ae43c3e79e" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/dist/bundle.js" beforeDir="false" afterPath="$PROJECT_DIR$/dist/bundle.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/F.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/F.js" 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$/src/index.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.jsx" afterDir="false" />
</list> </list>
...@@ -20,22 +21,10 @@ ...@@ -20,22 +21,10 @@
<split-first> <split-first>
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300"> <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="false"> <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="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>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/package.json"> <entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="47"> <state relative-caret-position="425">
<caret line="26" column="25" selection-start-line="26" selection-start-column="25" selection-end-line="26" selection-end-column="25" /> <caret line="25" column="16" lean-forward="true" selection-start-line="25" selection-start-column="16" selection-end-line="25" selection-end-column="16" />
</state> </state>
</provider> </provider>
</entry> </entry>
...@@ -50,10 +39,12 @@ ...@@ -50,10 +39,12 @@
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/dist/index.jsx"> <entry file="file://$PROJECT_DIR$/dist/main.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="306"> <state relative-caret-position="-1077">
<caret line="18" column="42" selection-start-line="18" selection-start-column="36" selection-end-line="18" selection-end-column="42" /> <folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
...@@ -90,11 +81,11 @@ ...@@ -90,11 +81,11 @@
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/F.js"> <entry file="file://$PROJECT_DIR$/src/F.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-4116"> <state relative-caret-position="476">
<caret line="277" column="4" selection-start-line="277" selection-start-column="4" selection-end-line="277" selection-end-column="17" /> <caret line="31" selection-start-line="31" selection-end-line="31" />
</state> </state>
</provider> </provider>
</entry> </entry>
...@@ -108,89 +99,103 @@ ...@@ -108,89 +99,103 @@
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/index.jsx">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="803">
<caret line="238" column="24" selection-start-line="238" selection-start-column="24" selection-end-line="238" selection-end-column="24" />
<folding>
<element signature="e#0#36#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
</leaf> </leaf>
</split-first> </split-first>
<split-second> <split-second>
<splitter split-orientation="horizontal" split-proportion="0.49672875"> <splitter split-orientation="horizontal" split-proportion="0.4964539">
<split-first> <split-first>
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300"> <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/typings.json"> <entry file="file://$PROJECT_DIR$/src/Rjsx.ts">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="34"> <state relative-caret-position="510">
<caret line="2" column="19" selection-start-line="2" selection-start-column="19" selection-end-line="2" selection-end-column="19" /> <caret line="30" column="21" selection-start-line="30" selection-start-column="21" selection-end-line="30" selection-end-column="21" />
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/Reactive.js"> <entry file="file://$PROJECT_DIR$/src/Rjsx.d.ts">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="153"> <state relative-caret-position="1853">
<caret line="9" column="58" selection-start-line="9" selection-start-column="58" selection-end-line="9" selection-end-column="58" /> <caret line="109" column="21" selection-start-line="109" selection-start-column="21" selection-end-line="109" selection-end-column="21" />
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/.gitignore"> <entry file="file://$PROJECT_DIR$/src/F.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="85"> <state relative-caret-position="-5038">
<caret line="5" selection-start-line="5" selection-end-line="5" /> <caret line="370" column="26" selection-start-line="370" selection-start-column="26" selection-end-line="370" selection-end-column="26" />
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/Rjsx.ts"> <entry file="file://$PROJECT_DIR$/test/creatingEl.jsx">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="510"> <state relative-caret-position="527">
<caret line="30" column="21" selection-start-line="30" selection-start-column="21" selection-end-line="30" selection-end-column="21" /> <caret line="31" selection-start-line="31" selection-end-line="31" />
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/Rjsx.d.ts"> <entry file="file://$PROJECT_DIR$/node_modules/chai/lib/chai/interface/assert.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1853"> <state relative-caret-position="248">
<caret line="109" column="21" selection-start-line="109" selection-start-column="21" selection-end-line="109" selection-end-column="21" /> <caret line="136" selection-start-line="136" selection-end-line="136" />
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/F.js"> <entry file="file://$PROJECT_DIR$/node_modules/typescript/lib/lib.dom.d.ts">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="367"> <state relative-caret-position="248">
<caret line="383" column="21" selection-start-line="383" selection-start-column="21" selection-end-line="383" selection-end-column="21" /> <caret line="4807" column="4" selection-start-line="4807" selection-start-column="4" selection-end-line="4807" selection-end-column="4" />
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/test/creatingEl.jsx"> <entry file="file://$PROJECT_DIR$/node_modules/simplest-dom/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="544"> <state relative-caret-position="349">
<caret line="84" column="55" selection-start-line="84" selection-start-column="40" selection-end-line="84" selection-end-column="55" /> <caret line="321" column="78" selection-start-line="321" selection-start-column="67" selection-end-line="321" selection-end-column="78" />
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/node_modules/simplest-dom/index.js"> <entry file="file://$PROJECT_DIR$/dist/bundle.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="396"> <state relative-caret-position="606">
<caret line="182" column="28" selection-start-line="182" selection-start-column="16" selection-end-line="182" selection-end-column="28" /> <caret line="124" column="34" selection-start-line="124" selection-start-column="34" selection-end-line="124" selection-end-column="34" />
</state> </state>
</provider> </provider>
</entry> </entry>
</file> </file>
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/dist/bundle.js"> <entry file="file://$PROJECT_DIR$/build0/bundle.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="17"> <state relative-caret-position="-179495">
<caret line="1" column="34" selection-start-line="1" selection-start-column="34" selection-end-line="1" selection-end-column="34" /> <folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
...@@ -198,7 +203,7 @@ ...@@ -198,7 +203,7 @@
<file pinned="false" current-in-tab="false"> <file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/node_modules/mocha/lib/runnable.js"> <entry file="file://$PROJECT_DIR$/node_modules/mocha/lib/runnable.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="248"> <state relative-caret-position="6562">
<caret line="386" column="20" selection-start-line="386" selection-start-column="20" selection-end-line="386" selection-end-column="20" /> <caret line="386" column="20" selection-start-line="386" selection-start-column="20" selection-end-line="386" selection-end-column="20" />
</state> </state>
</provider> </provider>
...@@ -234,15 +239,6 @@ ...@@ -234,15 +239,6 @@
</component> </component>
<component name="FindInProjectRecents"> <component name="FindInProjectRecents">
<findStrings> <findStrings>
<find>MouseEvent</find>
<find>Predefined</find>
<find>init</find>
<find>R(</find>
<find>UIComponent</find>
<find>_setKey</find>
<find>fs</find>
<find>133</find>
<find>13322</find>
<find>add</find> <find>add</find>
<find>TaskManager</find> <find>TaskManager</find>
<find>setters</find> <find>setters</find>
...@@ -259,17 +255,29 @@ ...@@ -259,17 +255,29 @@
<find>back</find> <find>back</find>
<find>cm</find> <find>cm</find>
<find>Reac</find> <find>Reac</find>
<find>Reactivity</find>
<find>.def</find> <find>.def</find>
<find>text</find> <find>text</find>
<find>beforeSetKey</find> <find>beforeSetKey</find>
<find>exten</find>
<find>Reactive</find>
<find>mover</find> <find>mover</find>
<find>Reactivity</find>
<find>style:</find>
<find>.sub(</find>
<find>Compo</find>
<find>clone</find>
<find>.set(</find>
<find>Componen</find>
<find>outer</find>
</findStrings> </findStrings>
<replaceStrings> <replaceStrings>
<replace>| Reactivity;</replace> <replace>| Reactivity;</replace>
<replace>Rjsx</replace> <replace>Rjsx</replace>
<replace>cmp</replace> <replace>cmp</replace>
</replaceStrings> </replaceStrings>
<dirStrings>
<dir>C:\code\reactive</dir>
</dirStrings>
</component> </component>
<component name="Git.Settings"> <component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
...@@ -303,9 +311,11 @@ ...@@ -303,9 +311,11 @@
<option value="$PROJECT_DIR$/webpack.test.config.js" /> <option value="$PROJECT_DIR$/webpack.test.config.js" />
<option value="$PROJECT_DIR$/webpack.config.js" /> <option value="$PROJECT_DIR$/webpack.config.js" />
<option value="$PROJECT_DIR$/package.json" /> <option value="$PROJECT_DIR$/package.json" />
<option value="$PROJECT_DIR$/src/F.js" />
<option value="$PROJECT_DIR$/dist/bundle.js" />
<option value="$PROJECT_DIR$/test/creatingEl.jsx" /> <option value="$PROJECT_DIR$/test/creatingEl.jsx" />
<option value="$PROJECT_DIR$/node_modules/simplest-dom/index.js" />
<option value="$PROJECT_DIR$/src/index.jsx" /> <option value="$PROJECT_DIR$/src/index.jsx" />
<option value="$PROJECT_DIR$/src/F.js" />
</list> </list>
</option> </option>
</component> </component>
...@@ -320,7 +330,6 @@ ...@@ -320,7 +330,6 @@
<foldersAlwaysOnTop value="true" /> <foldersAlwaysOnTop value="true" />
</navigator> </navigator>
<panes> <panes>
<pane id="Scope" />
<pane id="ProjectPane"> <pane id="ProjectPane">
<subPane> <subPane>
<expand> <expand>
...@@ -331,6 +340,11 @@ ...@@ -331,6 +340,11 @@
<path> <path>
<item name="reactive" type="b2602c69:ProjectViewProjectNode" /> <item name="reactive" type="b2602c69:ProjectViewProjectNode" />
<item name="reactive" type="462c0819:PsiDirectoryNode" /> <item name="reactive" type="462c0819:PsiDirectoryNode" />
<item name="build0" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="reactive" type="b2602c69:ProjectViewProjectNode" />
<item name="reactive" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" />
</path> </path>
<path> <path>
...@@ -348,12 +362,13 @@ ...@@ -348,12 +362,13 @@
<select /> <select />
</subPane> </subPane>
</pane> </pane>
<pane id="Scope" />
</panes> </panes>
</component> </component>
<component name="PropertiesComponent"> <component name="PropertiesComponent">
<property name="DefaultHtmlFileTemplate" value="HTML File" /> <property name="DefaultHtmlFileTemplate" value="HTML File" />
<property name="WebServerToolWindowFactoryState" value="false" /> <property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/test" /> <property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="nodejs.mocha.mocha_node_package_dir" value="$PROJECT_DIR$/node_modules/mocha" /> <property name="nodejs.mocha.mocha_node_package_dir" value="$PROJECT_DIR$/node_modules/mocha" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" /> <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" /> <property name="nodejs_npm_path_reset_for_default_project" value="true" />
...@@ -440,48 +455,48 @@ ...@@ -440,48 +455,48 @@
<workItem from="1557233390052" duration="5206000" /> <workItem from="1557233390052" duration="5206000" />
<workItem from="1557261512369" duration="21515000" /> <workItem from="1557261512369" duration="21515000" />
<workItem from="1558366647257" duration="9105000" /> <workItem from="1558366647257" duration="9105000" />
<workItem from="1559230950782" duration="30313000" /> <workItem from="1559230950782" duration="36379000" />
<workItem from="1559483737093" duration="16474000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TestHistory"> <component name="TestHistory">
<history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 16m 34s.xml"> <history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 21m 58s.xml">
<configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" /> <configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" />
</history-entry> </history-entry>
<history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 17m 13s.xml"> <history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 22m 24s.xml">
<configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" /> <configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" />
</history-entry> </history-entry>
<history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 17m 58s.xml"> <history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 22m 42s.xml">
<configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" /> <configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" />
</history-entry> </history-entry>
<history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 19m 43s.xml"> <history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 15h 30m 27s.xml">
<configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" /> <configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" />
</history-entry> </history-entry>
<history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 20m 15s.xml"> <history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.04 at 16h 11m 58s.xml">
<configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" /> <configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" />
</history-entry> </history-entry>
<history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 20m 31s.xml"> <history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.04 at 17h 14m 27s.xml">
<configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" /> <configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" />
</history-entry> </history-entry>
<history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 21m 58s.xml"> <history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.04 at 17h 14m 43s.xml">
<configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" /> <configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" />
</history-entry> </history-entry>
<history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 22m 24s.xml"> <history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.04 at 17h 27m 13s.xml">
<configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" /> <configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" />
</history-entry> </history-entry>
<history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 14h 22m 42s.xml"> <history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.04 at 17h 29m 59s.xml">
<configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" /> <configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" />
</history-entry> </history-entry>
<history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.01 at 15h 30m 27s.xml"> <history-entry file="C__code_reactive_test______{js,jsx} - 2019.06.04 at 17h 30m 01s.xml">
<configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" /> <configuration name="C:\code\reactive\test\**\*.{js,jsx}" configurationId="mocha-javascript-test-runner" />
</history-entry> </history-entry>
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="162257000" /> <option name="totallyTimeSpent" value="184797000" />
</component> </component>
<component name="ToolWindowManager"> <component name="ToolWindowManager">
<frame x="-8" y="-8" width="3456" height="1416" extended-state="6" /> <frame x="-8" y="-8" width="3456" height="1416" extended-state="6" />
<editor active="true" />
<layout> <layout>
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.10181393" /> <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.10181393" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" /> <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
...@@ -512,19 +527,22 @@ ...@@ -512,19 +527,22 @@
</list> </list>
</option> </option>
</component> </component>
<component name="XDebuggerManager">
<breakpoint-manager>
<breakpoints>
<line-breakpoint enabled="true" type="javascript">
<url>file://$PROJECT_DIR$/test/creatingEl.jsx</url>
<line>31</line>
<properties lambdaOrdinal="-1" />
<option name="timeStamp" value="1" />
</line-breakpoint>
</breakpoints>
</breakpoint-manager>
</component>
<component name="editorHistoryManager"> <component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/node_modules/babel-core/index.js"> <entry file="file://$PROJECT_DIR$/node_modules/babel-core/index.js">
<provider selected="true" editor-type-id="text-editor" /> <provider selected="true" editor-type-id="text-editor" />
</entry> </entry>
<entry file="file://$PROJECT_DIR$/dist/main.js">
<provider selected="true" editor-type-id="text-editor">
<state>
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/h.js" /> <entry file="file://$PROJECT_DIR$/h.js" />
<entry file="file://$PROJECT_DIR$/.babelrc" /> <entry file="file://$PROJECT_DIR$/.babelrc" />
<entry file="file://$PROJECT_DIR$/button.jsx"> <entry file="file://$PROJECT_DIR$/button.jsx">
...@@ -555,13 +573,6 @@ ...@@ -555,13 +573,6 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/node_modules/typescript/lib/lib.dom.d.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="279157">
<caret line="16434" column="27" lean-forward="true" selection-start-line="16434" selection-start-column="27" selection-end-line="16434" selection-end-column="27" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/index.tsx2"> <entry file="file://$PROJECT_DIR$/src/index.tsx2">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="170"> <state relative-caret-position="170">
...@@ -597,6 +608,8 @@ ...@@ -597,6 +608,8 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/test/out" />
<entry file="file://$PROJECT_DIR$/test/const1.js" />
<entry file="file://$PROJECT_DIR$/dist/index.html"> <entry file="file://$PROJECT_DIR$/dist/index.html">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="153"> <state relative-caret-position="153">
...@@ -604,10 +617,27 @@ ...@@ -604,10 +617,27 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/dist/index.jsx"> <entry file="file://$PROJECT_DIR$/node_modules/@babel/preset-react/lib/index.js">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/webpack.config.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="306"> <state relative-caret-position="153">
<caret line="18" column="42" selection-start-line="18" selection-start-column="36" selection-end-line="18" selection-end-column="42" /> <caret line="9" column="37" selection-start-line="9" selection-start-column="37" selection-end-line="9" selection-end-column="37" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/tsconfig.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="102">
<caret line="6" column="18" selection-start-line="6" selection-start-column="15" selection-end-line="6" selection-end-column="18" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/webpack.test.config.js">
<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> </state>
</provider> </provider>
</entry> </entry>
...@@ -625,123 +655,124 @@ ...@@ -625,123 +655,124 @@
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/Rjsx.d.ts"> <entry file="file://$PROJECT_DIR$/Reactive.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1853"> <state relative-caret-position="153">
<caret line="109" column="21" selection-start-line="109" selection-start-column="21" selection-end-line="109" selection-end-column="21" /> <caret line="9" column="58" selection-start-line="9" selection-start-column="58" selection-end-line="9" selection-end-column="58" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/test/out"> <entry file="file://$PROJECT_DIR$/.gitignore">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="409"> <state>
<caret line="25333" column="57" selection-start-line="25333" selection-start-column="57" selection-end-line="25333" selection-end-column="57" /> <caret line="5" selection-start-line="5" selection-end-line="5" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/test/const1.js"> <entry file="file://$PROJECT_DIR$/src/Rjsx.ts">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="17"> <state relative-caret-position="510">
<caret line="1" column="26" selection-start-line="1" selection-start-column="26" selection-end-line="1" selection-end-column="26" /> <caret line="30" column="21" selection-start-line="30" selection-start-column="21" selection-end-line="30" selection-end-column="21" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/Reactive.js"> <entry file="file://$PROJECT_DIR$/node_modules/mocha/lib/runnable.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="153"> <state relative-caret-position="6562">
<caret line="9" column="58" selection-start-line="9" selection-start-column="58" selection-end-line="9" selection-end-column="58" /> <caret line="386" column="20" selection-start-line="386" selection-start-column="20" selection-end-line="386" selection-end-column="20" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/node_modules/@babel/preset-react/lib/index.js"> <entry file="file://$PROJECT_DIR$/src/Rjsx.d.ts">
<provider selected="true" editor-type-id="text-editor" /> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1853">
<caret line="109" column="21" selection-start-line="109" selection-start-column="21" selection-end-line="109" selection-end-column="21" />
</state>
</provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/tsconfig.json"> <entry file="file://$PROJECT_DIR$/src/F.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="102"> <state relative-caret-position="476">
<caret line="6" column="18" selection-start-line="6" selection-start-column="15" selection-end-line="6" selection-end-column="18" /> <caret line="31" selection-start-line="31" selection-end-line="31" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/Rjsx.ts"> <entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="510"> <state relative-caret-position="425">
<caret line="30" column="21" selection-start-line="30" selection-start-column="21" selection-end-line="30" selection-end-column="21" /> <caret line="25" column="16" lean-forward="true" selection-start-line="25" selection-start-column="16" selection-end-line="25" selection-end-column="16" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/node_modules/mocha/lib/runnable.js"> <entry file="file://$PROJECT_DIR$/dist/index.jsx">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="248"> <state relative-caret-position="306">
<caret line="386" column="20" selection-start-line="386" selection-start-column="20" selection-end-line="386" selection-end-column="20" /> <caret line="18" column="42" selection-start-line="18" selection-start-column="36" selection-end-line="18" selection-end-column="42" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/dist/bundle.js"> <entry file="file://$PROJECT_DIR$/dist/bundle.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="17"> <state relative-caret-position="606">
<caret line="1" column="34" selection-start-line="1" selection-start-column="34" selection-end-line="1" selection-end-column="34" /> <caret line="124" column="34" selection-start-line="124" selection-start-column="34" selection-end-line="124" selection-end-column="34" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/webpack.test.config.js"> <entry file="file://$PROJECT_DIR$/dist/main.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="85"> <state relative-caret-position="-1077">
<caret line="5" selection-start-line="5" selection-end-line="5" /> <folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/webpack.config.js"> <entry file="file://$PROJECT_DIR$/build0/bundle.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="153"> <state relative-caret-position="-179495">
<caret line="9" column="37" selection-start-line="9" selection-start-column="37" selection-end-line="9" selection-end-column="37" /> <folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/package.json"> <entry file="file://$PROJECT_DIR$/node_modules/typescript/lib/lib.dom.d.ts">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="47"> <state relative-caret-position="248">
<caret line="26" column="25" selection-start-line="26" selection-start-column="25" selection-end-line="26" selection-end-column="25" /> <caret line="4807" column="4" selection-start-line="4807" selection-start-column="4" selection-end-line="4807" selection-end-column="4" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/node_modules/simplest-dom/index.js"> <entry file="file://$PROJECT_DIR$/node_modules/chai/lib/chai/interface/assert.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="396"> <state relative-caret-position="248">
<caret line="182" column="28" selection-start-line="182" selection-start-column="16" selection-end-line="182" selection-end-column="28" /> <caret line="136" selection-start-line="136" selection-end-line="136" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/test/creatingEl.jsx"> <entry file="file://$PROJECT_DIR$/test/creatingEl.jsx">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="544"> <state relative-caret-position="527">
<caret line="84" column="55" selection-start-line="84" selection-start-column="40" selection-end-line="84" selection-end-column="55" /> <caret line="31" selection-start-line="31" selection-end-line="31" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/.gitignore"> <entry file="file://$PROJECT_DIR$/node_modules/simplest-dom/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="85"> <state relative-caret-position="349">
<caret line="5" selection-start-line="5" selection-end-line="5" /> <caret line="321" column="78" selection-start-line="321" selection-start-column="67" selection-end-line="321" selection-end-column="78" />
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/index.jsx"> <entry file="file://$PROJECT_DIR$/src/index.jsx">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="474"> <state relative-caret-position="803">
<caret line="81" column="15" selection-start-line="81" selection-start-column="15" selection-end-line="81" selection-end-column="15" /> <caret line="238" column="24" selection-start-line="238" selection-start-column="24" selection-end-line="238" selection-end-column="24" />
<folding> <folding>
<element signature="e#0#36#0" expanded="true" /> <element signature="e#0#36#0" expanded="true" />
</folding> </folding>
</state> </state>
</provider> </provider>
</entry> </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> </component>
</project> </project>
\ No newline at end of file
src/F.js
...@@ -2,12 +2,38 @@ import {PropertySetterInterface, PropSettersInterface} from "./Rjsx"; ...@@ -2,12 +2,38 @@ import {PropertySetterInterface, PropSettersInterface} from "./Rjsx";
const byPass = a => a; const byPass = a => a;
const emptyFn = ()=>void 0; const emptyFn = ()=>void 0;
const falseFn = ()=>false;
const REFLECTION = true;
export const Reactivity = function(args) { export const Reactivity = function(args) {
this.args = args; this.args = args;
}; };
const Sub = function(obj, key) {
this.value = obj.get(key);
if(REFLECTION){
this.key = key;
this.obj = obj;
}
this.FN = this.FN.bind(this);
};
Sub.prototype = {
value: void 0,
trigger: emptyFn,
key: '',
obj: null,
FN: function (_, val, oldVal) {
this.value = val;
this.trigger && this.trigger(val);
},
'~destroy': function() {
this.obj.unsub(this.key, this.FN);
}
};
Reactivity.prototype = { Reactivity.prototype = {
_deps: [],
args: [], args: [],
scope: null, scope: null,
key: null, key: null,
...@@ -16,8 +42,17 @@ Reactivity.prototype = { ...@@ -16,8 +42,17 @@ Reactivity.prototype = {
TaskManager.add(()=>{ TaskManager.add(()=>{
this.scope._setKey(this.key, 0, this.fn.apply(this.scope, this.args), this.scope.state, this.scope.setters); this.scope._setKey(this.key, 0, this.fn.apply(this.scope, this.args), this.scope.state, this.scope.setters);
}); });
},
'~destroy': function() {
let deps = this._deps, i = 0, _i = deps.length;
for(;i<_i;i++){
deps[i]['~destroy']();
}
} }
}; };
if(REFLECTION){
Reactivity.prototype._deps = [];
}
let jobSwap = []; let jobSwap = [];
const Task = function(fn, scope) { const Task = function(fn, scope) {
...@@ -76,8 +111,14 @@ export const R = function() { ...@@ -76,8 +111,14 @@ export const R = function() {
if(arguments.length === 1){ if(arguments.length === 1){
reactivity.fn = byPass; reactivity.fn = byPass;
if(REFLECTION){
reactivity._deps = [].slice.call( arguments );
}
}else{ }else{
reactivity.fn = arguments[arguments.length-1]; reactivity.fn = arguments[arguments.length-1];
if(REFLECTION){
reactivity._deps = [].slice.call( arguments, 0, arguments.length - 1 );
}
} }
return reactivity; return reactivity;
...@@ -94,31 +135,73 @@ ReactiveContent.prototype = { ...@@ -94,31 +135,73 @@ ReactiveContent.prototype = {
const index = children.indexOf(this); const index = children.indexOf(this);
if(index>-1){ if(index>-1){
let i, _i = children.length, child; let i, _i = children.length, child, childInserted = false;
for( i = index + 1; i < _i; i++ ){ for( i = index + 1; i < _i; i++ ){
child = children[i]; child = children[i];
if(child instanceof Component){ if(child instanceof Component){
child.el.parentNode.insertBefore(val.el, child.el); child.el.parentNode.insertBefore(val.el, child.el);
childInserted = true;
break; break;
} }
} }
// TODO other cases!
}else{ }else{
throw new Error('Fix it. My parent does not contain me (ReactiveChild)'); throw new Error('Fix it. My parent does not contain me (ReactiveChild)');
} }
} }
}; };
export const clone = function(what, where, transformator){
let key, val;
let proxy = transformator || falseFn;
let transformed;
for(key in what){
val = what[key];
if(typeof val === 'object'){
transformed = proxy(val);
if(transformed === false){
if(Array.isArray(val)){
if(!(key in where))
where[key] = [];
}else{
if(!(key in where))
where[key] = {};
}
clone(val, where[key], transformator);
}else{
where[key] = transformed;
}
}else{
where[key] = val;
}
}
return where;
};
const walk = function(obj, fn) {
clone(obj, {}, fn);
};
export const Reactive = function(cfg){ export const Reactive = function(cfg){
if(cfg === false) { if(cfg === false) {
return; return;
} }
if(REFLECTION){
this._rState = {};
}else{
this._r = [];
}
this.state = cfg ? Object.create(cfg) : {}; this.state = cfg ? Object.create(cfg) : {};
this.subs = {}; this.subs = {};
}; };
Reactive.prototype = { Reactive.prototype = {
state: {}, state: {},
_rState: {},
_r: [],
subs: {}, subs: {},
setters: {}, setters: {},
...@@ -131,25 +214,25 @@ Reactive.prototype = { ...@@ -131,25 +214,25 @@ Reactive.prototype = {
} }
}, },
sub: function (key, fn) { sub: function (key) {
let FN, obj;// TODO unAny let obj = new Sub(this, key);
if (arguments.length === 1) {
obj = { (this.subs[key] || (this.subs[key] = [])).push(obj.FN);
value: key in this.state ? this.state[key] : void 0 if (this.has(key))
}; obj.FN.call(this, this, this.get(key));
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; return obj;
}, },
unsub: function(key, fn) {
const index = this.subs[key].indexOf(fn);
if(index === -1){
throw new Error('Already unsubscribed');
}else{
this.subs[key].splice(index, 1);
}
},
get: function(key) { get: function(key) {
let ptr = this.state, let ptr = this.state,
tokens = key.split('.'), tokens = key.split('.'),
...@@ -161,6 +244,10 @@ Reactive.prototype = { ...@@ -161,6 +244,10 @@ Reactive.prototype = {
} }
return ptr; return ptr;
}, },
has: function(key) {
// TODO rewrite recursive
return key in this.state;
},
set: function (obj, statePtr, settersPtr) { set: function (obj, statePtr, settersPtr) {
let state, setters, key; let state, setters, key;
...@@ -180,7 +267,47 @@ Reactive.prototype = { ...@@ -180,7 +267,47 @@ Reactive.prototype = {
beforeSetKey: function (key, val, lastVal) { beforeSetKey: function (key, val, lastVal) {
return val; return val;
}, },
_getReflectiveState: function() {
const cloningState = {};
clone(this.state, cloningState, function(val) {
if(val instanceof Component){
// serialize
return val;
}
return false;
});
clone(this._rState, cloningState, function(val) {
if(val instanceof Reactivity){
var args = val._deps.map((dep)=>dep.obj.sub(dep.key)).concat(val.fn);
console.log(val, args)
return R.apply(this, args);
}
return false;
});
return cloningState;
},
_storeReactivity: function(r) {
if(REFLECTION){
let pointer = this._rState,
key = r.key,
subKey,
i = 0, _i = key.length - 1;
for(;i<_i; i++){
subKey = key[i];
pointer = pointer[subKey] || (pointer[subKey] = {});
}
pointer[key[i]] = r;//{from: r._deps, to: {obj: r.scope, key: r.key}, fn: r.fn};
}else{
this._r.push(r);
}
},
_setKey: function (key, keyCursor, val, state, setters) { _setKey: function (key, keyCursor, val, state, setters) {
let valueKey; let valueKey;
...@@ -199,6 +326,7 @@ Reactive.prototype = { ...@@ -199,6 +326,7 @@ Reactive.prototype = {
val.scope = this; val.scope = this;
val.key = key; val.key = key;
val.emit(); val.emit();
this._storeReactivity(val);
return true; return true;
} }
...@@ -232,11 +360,22 @@ Reactive.prototype = { ...@@ -232,11 +360,22 @@ Reactive.prototype = {
val = this.beforeSetKey(theKey, val, lastVal); val = this.beforeSetKey(theKey, val, lastVal);
let shouldSetVal = true;
const isComponent = val instanceof Component,
wasComponent = lastVal instanceof Component;
if(!(isComponent) && wasComponent){
lastVal.set(val);
return false;
}
if(isComponent && wasComponent){
lastVal['~destroy']();
}
if (keyInSetters) { if (keyInSetters) {
if(setterIsFn){ if(setterIsFn){
let setterResult = setters[ theKey ].call( this, this, val, lastVal, theKey, state ); shouldSetVal = false !== setters[ theKey ].call( this, this, val, lastVal, theKey, state );
if(setterResult !== false){ if(shouldSetVal !== false){
state[ theKey ] = val; state[ theKey ] = val;
} }
}else{ }else{
...@@ -257,9 +396,22 @@ Reactive.prototype = { ...@@ -257,9 +396,22 @@ Reactive.prototype = {
state[theKey] = val; state[theKey] = val;
this.afterSetKey(theKey, val, lastVal); this.afterSetKey(theKey, val, lastVal);
} }
if(shouldSetVal){
this.fire(theKey, val, lastVal); this.fire( theKey, val, lastVal );
}
return true; return true;
},
'~destroy': function() {
if(REFLECTION){
walk(this._rState, function(val) {
if(val instanceof Reactivity){
val['~destroy']();
return true;
}else{
return false;
}
});
}
} }
}; };
...@@ -346,6 +498,7 @@ Object.assign(Component.prototype, { ...@@ -346,6 +498,7 @@ Object.assign(Component.prototype, {
val[i].scope = _; val[i].scope = _;
val[i].key = ['style', i]; val[i].key = ['style', i];
val[i].emit(); val[i].emit();
_._storeReactivity(val[i]);
continue; continue;
} }
...@@ -382,7 +535,13 @@ Object.assign(Component.prototype, { ...@@ -382,7 +535,13 @@ Object.assign(Component.prototype, {
clone: function() { clone: function() {
const clone = new this._ctor(this.nodeName); const clone = new this._ctor(this.nodeName);
clone.init(); clone.init();
if(REFLECTION){
clone.set( this._getReflectiveState() );
}else{
clone.set(this.state); clone.set(this.state);
}
return clone; return clone;
}, },
renderTo: function (where) { renderTo: function (where) {
...@@ -433,6 +592,7 @@ Object.assign(Component.prototype, { ...@@ -433,6 +592,7 @@ Object.assign(Component.prototype, {
val.call(this, e) val.call(this, e)
}; };
} else { } else {
if(val instanceof Component && !this._inited){ if(val instanceof Component && !this._inited){
// magically defined subcomponents // magically defined subcomponents
return val.clone(); return val.clone();
......
src/index.jsx
...@@ -70,7 +70,7 @@ const Check = UIComponent.extend('Check', { ...@@ -70,7 +70,7 @@ const Check = UIComponent.extend('Check', {
} }
}); });
let gg = 0;
const Slider = UIComponent.extend('Slider', { const Slider = UIComponent.extend('Slider', {
def: { def: {
from: 0, from: 0,
...@@ -80,7 +80,21 @@ const Slider = UIComponent.extend('Slider', { ...@@ -80,7 +80,21 @@ const Slider = UIComponent.extend('Slider', {
sliderWidth: 10, sliderWidth: 10,
background: 'red', background: 'red',
mover: <div mover: <div
style={{cursor: 'pointer', width: 10, height: 10, border: '3px solid #fff', position: 'absolute', boxSizing: 'border-box'}} style={{
cursor: 'pointer',
width: 10,
height: R(but.sub('text'), (v1)=>{
if(gg<30){
console.log( v1 );
gg++;
}
return (v1-0)%20
}),
border: '3px solid #fff',
position: 'absolute',
boxSizing: 'border-box'
}}
/> />
}, },
recalc: function() { recalc: function() {
...@@ -102,7 +116,8 @@ const Slider = UIComponent.extend('Slider', { ...@@ -102,7 +116,8 @@ const Slider = UIComponent.extend('Slider', {
'from,to,step,value,width': (_)=>{ 'from,to,step,value,width': (_)=>{
_.later('recalc', _.recalc); _.later('recalc', _.recalc);
}, },
mover: function(_, val) { mover: function(_, val, lastVal) {
let sliderRect; let sliderRect;
const moveFn = (e)=>{ const moveFn = (e)=>{
const newRawVal = Math.max(0, Math.min(1,(e.clientX-sliderRect.left)/(sliderRect.width))), const newRawVal = Math.max(0, Math.min(1,(e.clientX-sliderRect.left)/(sliderRect.width))),
...@@ -141,7 +156,9 @@ console.log(chhh); ...@@ -141,7 +156,9 @@ console.log(chhh);
let slider1 = <Slider from={-10} to={100} step={1}/>; let slider1 = <Slider from={-10} to={100} step={1}/>;
let RS, GS, BS; let RS, GS, BS;
<div className='wrapper'> let fr, tt;
var D = <div className='wrapper'>
<div text="text of div"/><div>text in div</div>
<Check value={true} label={{text: 'Ti pidor'}} hidden={R(()=>chhh.sub('value'))}/> <Check value={true} label={{text: 'Ti pidor'}} hidden={R(()=>chhh.sub('value'))}/>
{chhh} {chhh}
<Check value={R(()=>chhh.sub('value'))}/> <Check value={R(()=>chhh.sub('value'))}/>
...@@ -164,7 +181,9 @@ let RS, GS, BS; ...@@ -164,7 +181,9 @@ let RS, GS, BS;
{RS = <Slider from={0} to={255} step={1} value={123} background={R( {RS = <Slider from={0} to={255} step={1} value={123} background={R(
()=>RS.sub('value'), ()=>RS.sub('value'),
(r)=>'rgba('+[r,0,0,1]+')' (r)=>'rgba('+[r,0,0,1]+')'
)}/>} )}
mover={{style: {borderColor: '#0ff'}}}
/>}
{GS = <Slider from={0} to={255} step={1} value={123} background={R( {GS = <Slider from={0} to={255} step={1} value={123} background={R(
()=>GS.sub('value'), ()=>GS.sub('value'),
(g)=>'rgba('+[0,g,0,1]+')' (g)=>'rgba('+[0,g,0,1]+')'
...@@ -179,7 +198,7 @@ let RS, GS, BS; ...@@ -179,7 +198,7 @@ let RS, GS, BS;
width: 300, width: 300,
height: 300, height: 300,
padding: '30px', padding: '30px',
position: 'absolute', position: 'relative',
background: R( background: R(
()=>RS.sub('value'), ()=>RS.sub('value'),
()=>GS.sub('value'), ()=>GS.sub('value'),
...@@ -203,9 +222,22 @@ let RS, GS, BS; ...@@ -203,9 +222,22 @@ let RS, GS, BS;
B: ${b}` B: ${b}`
)} )}
/> />
{fr = <Slider from={0} to={R(()=>tt.sub('value'))} step={1} value={123}/>}
<div style={{background: '#400'}} text={R(fr.sub('from'),fr.sub('to'), fr.sub('value'), (from,to,value)=>`
from: ${from}
to: ${to}
value: ${value}
`)}/>
{tt = <Slider from={R(()=>fr.sub('value'))} to={255} step={1} value={123}/>}
<div text={R(tt.sub('from'),tt.sub('to'), tt.sub('value'), (from,to,value)=>`
from: ${from}
to: ${to}
value: ${value}
`)}/>
</div>.mount(document.body); </div>;
//D.mount(document.body);
window.D = D;
let counter = 0; let counter = 0;
setInterval(()=>{ setInterval(()=>{
i.set({text: counter++}); i.set({text: counter++});
...@@ -218,13 +250,14 @@ setTimeout(()=>{ ...@@ -218,13 +250,14 @@ setTimeout(()=>{
//debugger; //debugger;
but.set({ but.set({
text: R(but.sub('text'), (v1)=>{ text: R(but.sub('text'), (v1)=>{
return (v1-0)+148 return (v1-0)+1
}) })
}); });
}, 100); }, 100);
// Do not read after this line // Do not read after this line
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment