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 405 additions and 182 deletions
.idea/workspace.xml
......@@ -3,6 +3,7 @@
<component name="ChangeListManager">
<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$/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/index.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.jsx" afterDir="false" />
</list>
......@@ -20,22 +21,10 @@
<split-first>
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<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">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="47">
<caret line="26" column="25" selection-start-line="26" selection-start-column="25" selection-end-line="26" selection-end-column="25" />
<state relative-caret-position="425">
<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>
</provider>
</entry>
......@@ -50,10 +39,12 @@
</entry>
</file>
<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">
<state relative-caret-position="306">
<caret line="18" column="42" selection-start-line="18" selection-start-column="36" selection-end-line="18" selection-end-column="42" />
<state relative-caret-position="-1077">
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state>
</provider>
</entry>
......@@ -90,11 +81,11 @@
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/F.js">
<provider selected="true" editor-type-id="text-editor">
<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 relative-caret-position="476">
<caret line="31" selection-start-line="31" selection-end-line="31" />
</state>
</provider>
</entry>
......@@ -108,89 +99,103 @@
</provider>
</entry>
</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>
</split-first>
<split-second>
<splitter split-orientation="horizontal" split-proportion="0.49672875">
<splitter split-orientation="horizontal" split-proportion="0.4964539">
<split-first>
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<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">
<state relative-caret-position="34">
<caret line="2" column="19" selection-start-line="2" selection-start-column="19" selection-end-line="2" selection-end-column="19" />
<state relative-caret-position="510">
<caret line="30" column="21" selection-start-line="30" selection-start-column="21" selection-end-line="30" selection-end-column="21" />
</state>
</provider>
</entry>
</file>
<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">
<state relative-caret-position="153">
<caret line="9" column="58" selection-start-line="9" selection-start-column="58" selection-end-line="9" selection-end-column="58" />
<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>
</file>
<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">
<state relative-caret-position="85">
<caret line="5" selection-start-line="5" selection-end-line="5" />
<state relative-caret-position="-5038">
<caret line="370" column="26" selection-start-line="370" selection-start-column="26" selection-end-line="370" selection-end-column="26" />
</state>
</provider>
</entry>
</file>
<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">
<state relative-caret-position="510">
<caret line="30" column="21" selection-start-line="30" selection-start-column="21" selection-end-line="30" selection-end-column="21" />
<state relative-caret-position="527">
<caret line="31" selection-start-line="31" selection-end-line="31" />
</state>
</provider>
</entry>
</file>
<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">
<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 relative-caret-position="248">
<caret line="136" selection-start-line="136" selection-end-line="136" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/F.js">
<file pinned="false" current-in-tab="false">
<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="367">
<caret line="383" column="21" selection-start-line="383" selection-start-column="21" selection-end-line="383" selection-end-column="21" />
<state relative-caret-position="248">
<caret line="4807" column="4" selection-start-line="4807" selection-start-column="4" selection-end-line="4807" selection-end-column="4" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/test/creatingEl.jsx">
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/node_modules/simplest-dom/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="544">
<caret line="84" column="55" selection-start-line="84" selection-start-column="40" selection-end-line="84" selection-end-column="55" />
<state relative-caret-position="349">
<caret line="321" column="78" selection-start-line="321" selection-start-column="67" selection-end-line="321" selection-end-column="78" />
</state>
</provider>
</entry>
</file>
<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">
<state relative-caret-position="396">
<caret line="182" column="28" selection-start-line="182" selection-start-column="16" selection-end-line="182" selection-end-column="28" />
<state relative-caret-position="606">
<caret line="124" column="34" selection-start-line="124" selection-start-column="34" selection-end-line="124" selection-end-column="34" />
</state>
</provider>
</entry>
</file>
<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">
<state relative-caret-position="17">
<caret line="1" column="34" selection-start-line="1" selection-start-column="34" selection-end-line="1" selection-end-column="34" />
<state relative-caret-position="-179495">
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state>
</provider>
</entry>
......@@ -198,7 +203,7 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/node_modules/mocha/lib/runnable.js">
<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" />
</state>
</provider>
......@@ -234,15 +239,6 @@
</component>
<component name="FindInProjectRecents">
<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>TaskManager</find>
<find>setters</find>
......@@ -259,17 +255,29 @@
<find>back</find>
<find>cm</find>
<find>Reac</find>
<find>Reactivity</find>
<find>.def</find>
<find>text</find>
<find>beforeSetKey</find>
<find>exten</find>
<find>Reactive</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>
<replaceStrings>
<replace>| Reactivity;</replace>
<replace>Rjsx</replace>
<replace>cmp</replace>
</replaceStrings>
<dirStrings>
<dir>C:\code\reactive</dir>
</dirStrings>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
......@@ -303,9 +311,11 @@
<option value="$PROJECT_DIR$/webpack.test.config.js" />
<option value="$PROJECT_DIR$/webpack.config.js" />
<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$/node_modules/simplest-dom/index.js" />
<option value="$PROJECT_DIR$/src/index.jsx" />
<option value="$PROJECT_DIR$/src/F.js" />
</list>
</option>
</component>
......@@ -320,7 +330,6 @@
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="Scope" />
<pane id="ProjectPane">
<subPane>
<expand>
......@@ -331,6 +340,11 @@
<path>
<item name="reactive" type="b2602c69:ProjectViewProjectNode" />
<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" />
</path>
<path>
......@@ -348,12 +362,13 @@
<select />
</subPane>
</pane>
<pane id="Scope" />
</panes>
</component>
<component name="PropertiesComponent">
<property name="DefaultHtmlFileTemplate" value="HTML File" />
<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_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
......@@ -440,48 +455,48 @@
<workItem from="1557233390052" duration="5206000" />
<workItem from="1557261512369" duration="21515000" />
<workItem from="1558366647257" duration="9105000" />
<workItem from="1559230950782" duration="30313000" />
<workItem from="1559230950782" duration="36379000" />
<workItem from="1559483737093" duration="16474000" />
</task>
<servers />
</component>
<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" />
</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" />
</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" />
</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" />
</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" />
</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" />
</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" />
</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" />
</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" />
</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" />
</history-entry>
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="162257000" />
<option name="totallyTimeSpent" value="184797000" />
</component>
<component name="ToolWindowManager">
<frame x="-8" y="-8" width="3456" height="1416" extended-state="6" />
<editor active="true" />
<layout>
<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" />
......@@ -512,19 +527,22 @@
</list>
</option>
</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">
<entry file="file://$PROJECT_DIR$/node_modules/babel-core/index.js">
<provider selected="true" editor-type-id="text-editor" />
</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$/.babelrc" />
<entry file="file://$PROJECT_DIR$/button.jsx">
......@@ -555,13 +573,6 @@
</state>
</provider>
</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">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="170">
......@@ -597,6 +608,8 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/test/out" />
<entry file="file://$PROJECT_DIR$/test/const1.js" />
<entry file="file://$PROJECT_DIR$/dist/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="153">
......@@ -604,10 +617,27 @@
</state>
</provider>
</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">
<state relative-caret-position="306">
<caret line="18" column="42" selection-start-line="18" selection-start-column="36" selection-end-line="18" selection-end-column="42" />
<state relative-caret-position="153">
<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>
</provider>
</entry>
......@@ -625,123 +655,124 @@
</state>
</provider>
</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">
<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 relative-caret-position="153">
<caret line="9" column="58" selection-start-line="9" selection-start-column="58" selection-end-line="9" selection-end-column="58" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/test/out">
<entry file="file://$PROJECT_DIR$/.gitignore">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="409">
<caret line="25333" column="57" selection-start-line="25333" selection-start-column="57" selection-end-line="25333" selection-end-column="57" />
<state>
<caret line="5" selection-start-line="5" selection-end-line="5" />
</state>
</provider>
</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">
<state relative-caret-position="17">
<caret line="1" column="26" selection-start-line="1" selection-start-column="26" selection-end-line="1" selection-end-column="26" />
<state relative-caret-position="510">
<caret line="30" column="21" selection-start-line="30" selection-start-column="21" selection-end-line="30" selection-end-column="21" />
</state>
</provider>
</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">
<state relative-caret-position="153">
<caret line="9" column="58" selection-start-line="9" selection-start-column="58" selection-end-line="9" selection-end-column="58" />
<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" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/node_modules/@babel/preset-react/lib/index.js">
<provider selected="true" editor-type-id="text-editor" />
<entry file="file://$PROJECT_DIR$/src/Rjsx.d.ts">
<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 file="file://$PROJECT_DIR$/tsconfig.json">
<entry file="file://$PROJECT_DIR$/src/F.js">
<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 relative-caret-position="476">
<caret line="31" selection-start-line="31" selection-end-line="31" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/Rjsx.ts">
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="510">
<caret line="30" column="21" selection-start-line="30" selection-start-column="21" selection-end-line="30" selection-end-column="21" />
<state relative-caret-position="425">
<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>
</provider>
</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">
<state relative-caret-position="248">
<caret line="386" column="20" selection-start-line="386" selection-start-column="20" selection-end-line="386" selection-end-column="20" />
<state relative-caret-position="306">
<caret line="18" column="42" selection-start-line="18" selection-start-column="36" selection-end-line="18" selection-end-column="42" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/dist/bundle.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="17">
<caret line="1" column="34" selection-start-line="1" selection-start-column="34" selection-end-line="1" selection-end-column="34" />
<state relative-caret-position="606">
<caret line="124" column="34" selection-start-line="124" selection-start-column="34" selection-end-line="124" selection-end-column="34" />
</state>
</provider>
</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">
<state relative-caret-position="85">
<caret line="5" selection-start-line="5" selection-end-line="5" />
<state relative-caret-position="-1077">
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state>
</provider>
</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">
<state relative-caret-position="153">
<caret line="9" column="37" selection-start-line="9" selection-start-column="37" selection-end-line="9" selection-end-column="37" />
<state relative-caret-position="-179495">
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state>
</provider>
</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">
<state relative-caret-position="47">
<caret line="26" column="25" selection-start-line="26" selection-start-column="25" selection-end-line="26" selection-end-column="25" />
<state relative-caret-position="248">
<caret line="4807" column="4" selection-start-line="4807" selection-start-column="4" selection-end-line="4807" selection-end-column="4" />
</state>
</provider>
</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">
<state relative-caret-position="396">
<caret line="182" column="28" selection-start-line="182" selection-start-column="16" selection-end-line="182" selection-end-column="28" />
<state relative-caret-position="248">
<caret line="136" selection-start-line="136" selection-end-line="136" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/test/creatingEl.jsx">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="544">
<caret line="84" column="55" selection-start-line="84" selection-start-column="40" selection-end-line="84" selection-end-column="55" />
<state relative-caret-position="527">
<caret line="31" selection-start-line="31" selection-end-line="31" />
</state>
</provider>
</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">
<state relative-caret-position="85">
<caret line="5" selection-start-line="5" selection-end-line="5" />
<state relative-caret-position="349">
<caret line="321" column="78" selection-start-line="321" selection-start-column="67" selection-end-line="321" selection-end-column="78" />
</state>
</provider>
</entry>
<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" />
<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>
<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
......@@ -2,12 +2,38 @@ import {PropertySetterInterface, PropSettersInterface} from "./Rjsx";
const byPass = a => a;
const emptyFn = ()=>void 0;
const falseFn = ()=>false;
const REFLECTION = true;
export const Reactivity = function(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 = {
_deps: [],
args: [],
scope: null,
key: null,
......@@ -16,8 +42,17 @@ Reactivity.prototype = {
TaskManager.add(()=>{
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 = [];
const Task = function(fn, scope) {
......@@ -76,8 +111,14 @@ export const R = function() {
if(arguments.length === 1){
reactivity.fn = byPass;
if(REFLECTION){
reactivity._deps = [].slice.call( arguments );
}
}else{
reactivity.fn = arguments[arguments.length-1];
if(REFLECTION){
reactivity._deps = [].slice.call( arguments, 0, arguments.length - 1 );
}
}
return reactivity;
......@@ -94,31 +135,73 @@ ReactiveContent.prototype = {
const index = children.indexOf(this);
if(index>-1){
let i, _i = children.length, child;
let i, _i = children.length, child, childInserted = false;
for( i = index + 1; i < _i; i++ ){
child = children[i];
if(child instanceof Component){
child.el.parentNode.insertBefore(val.el, child.el);
childInserted = true;
break;
}
}
// TODO other cases!
}else{
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){
if(cfg === false) {
return;
}
if(REFLECTION){
this._rState = {};
}else{
this._r = [];
}
this.state = cfg ? Object.create(cfg) : {};
this.subs = {};
};
Reactive.prototype = {
state: {},
_rState: {},
_r: [],
subs: {},
setters: {},
......@@ -131,25 +214,25 @@ Reactive.prototype = {
}
},
sub: function (key, fn) {
let 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]);
sub: function (key) {
let obj = new Sub(this, key);
(this.subs[key] || (this.subs[key] = [])).push(obj.FN);
if (this.has(key))
obj.FN.call(this, this, this.get(key));
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) {
let ptr = this.state,
tokens = key.split('.'),
......@@ -161,6 +244,10 @@ Reactive.prototype = {
}
return ptr;
},
has: function(key) {
// TODO rewrite recursive
return key in this.state;
},
set: function (obj, statePtr, settersPtr) {
let state, setters, key;
......@@ -180,7 +267,47 @@ Reactive.prototype = {
beforeSetKey: function (key, val, lastVal) {
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) {
let valueKey;
......@@ -199,6 +326,7 @@ Reactive.prototype = {
val.scope = this;
val.key = key;
val.emit();
this._storeReactivity(val);
return true;
}
......@@ -232,11 +360,22 @@ Reactive.prototype = {
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(setterIsFn){
let setterResult = setters[ theKey ].call( this, this, val, lastVal, theKey, state );
if(setterResult !== false){
shouldSetVal = false !== setters[ theKey ].call( this, this, val, lastVal, theKey, state );
if(shouldSetVal !== false){
state[ theKey ] = val;
}
}else{
......@@ -257,9 +396,22 @@ Reactive.prototype = {
state[theKey] = val;
this.afterSetKey(theKey, val, lastVal);
}
this.fire(theKey, val, lastVal);
if(shouldSetVal){
this.fire( theKey, val, lastVal );
}
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, {
val[i].scope = _;
val[i].key = ['style', i];
val[i].emit();
_._storeReactivity(val[i]);
continue;
}
......@@ -382,7 +535,13 @@ Object.assign(Component.prototype, {
clone: function() {
const clone = new this._ctor(this.nodeName);
clone.init();
clone.set(this.state);
if(REFLECTION){
clone.set( this._getReflectiveState() );
}else{
clone.set(this.state);
}
return clone;
},
renderTo: function (where) {
......@@ -433,6 +592,7 @@ Object.assign(Component.prototype, {
val.call(this, e)
};
} else {
if(val instanceof Component && !this._inited){
// magically defined subcomponents
return val.clone();
......
src/index.jsx
......@@ -70,7 +70,7 @@ const Check = UIComponent.extend('Check', {
}
});
let gg = 0;
const Slider = UIComponent.extend('Slider', {
def: {
from: 0,
......@@ -80,7 +80,21 @@ const Slider = UIComponent.extend('Slider', {
sliderWidth: 10,
background: 'red',
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() {
......@@ -102,7 +116,8 @@ const Slider = UIComponent.extend('Slider', {
'from,to,step,value,width': (_)=>{
_.later('recalc', _.recalc);
},
mover: function(_, val) {
mover: function(_, val, lastVal) {
let sliderRect;
const moveFn = (e)=>{
const newRawVal = Math.max(0, Math.min(1,(e.clientX-sliderRect.left)/(sliderRect.width))),
......@@ -141,7 +156,9 @@ console.log(chhh);
let slider1 = <Slider from={-10} to={100} step={1}/>;
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'))}/>
{chhh}
<Check value={R(()=>chhh.sub('value'))}/>
......@@ -162,9 +179,11 @@ let RS, GS, BS;
{RS = <Slider from={0} to={255} step={1} value={123} background={R(
()=>RS.sub('value'),
(r)=>'rgba('+[r,0,0,1]+')'
)}/>}
()=>RS.sub('value'),
(r)=>'rgba('+[r,0,0,1]+')'
)}
mover={{style: {borderColor: '#0ff'}}}
/>}
{GS = <Slider from={0} to={255} step={1} value={123} background={R(
()=>GS.sub('value'),
(g)=>'rgba('+[0,g,0,1]+')'
......@@ -179,7 +198,7 @@ let RS, GS, BS;
width: 300,
height: 300,
padding: '30px',
position: 'absolute',
position: 'relative',
background: R(
()=>RS.sub('value'),
()=>GS.sub('value'),
......@@ -203,9 +222,22 @@ let RS, GS, BS;
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;
setInterval(()=>{
i.set({text: counter++});
......@@ -218,13 +250,14 @@ setTimeout(()=>{
//debugger;
but.set({
text: R(but.sub('text'), (v1)=>{
return (v1-0)+148
return (v1-0)+1
})
});
}, 100);
// 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