Skip to content

R
reactive
Commit 78d40225 by Иван Кубота
Options

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

Reactive subscribe. Components as Nodes and Nodes as Components. Everything is reactive. Inheritance, states. Need to write docs
parent 937ef2d5
Showing with 2915 additions and 187 deletions
.gitignore
node_modules
node_modules/*
.idea
.idea/*
\ No newline at end of file
.idea/workspace.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<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 afterPath="$PROJECT_DIR$/src/Rjsx.d.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/Rjsx.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/cmp/Button.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/index.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/tsconfig.json" afterDir="false" />
<change afterPath="$PROJECT_DIR$/typings.json" 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/cmp/Button.jsx" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.jsx" 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/" />
<ignored path="$PROJECT_DIR$/tmp/" />
......@@ -12,39 +25,44 @@
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileEditorManager">
<leaf>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/Reactive.js">
<splitter split-orientation="horizontal" split-proportion="0.3262123">
<split-first>
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/index.tsx">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="105">
<caret line="5" selection-end-line="60" />
<state relative-caret-position="357">
<caret line="21" column="34" lean-forward="true" selection-start-line="21" selection-start-column="34" selection-end-line="21" selection-end-column="34" />
<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$/button.jsx">
<entry file="file://$PROJECT_DIR$/src/cmp/Button.tsx">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="84">
<caret line="4" column="27" selection-start-line="4" selection-start-column="27" selection-end-line="4" selection-end-column="27" />
<state relative-caret-position="17">
<caret line="1" selection-start-line="1" selection-end-line="1" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/index.jsx">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/Rjsx.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-350">
<caret line="2" column="23" selection-start-line="2" selection-start-column="23" selection-end-line="2" selection-end-column="23" />
<state relative-caret-position="264">
<caret line="62" column="30" selection-start-line="62" selection-start-column="30" selection-end-line="62" selection-end-column="30" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/cmp/Button.jsx">
<entry file="file://$PROJECT_DIR$/src/preact.d.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="364">
<caret line="49" column="8" selection-start-line="49" selection-start-column="8" selection-end-line="51" selection-end-column="34" />
<state relative-caret-position="71">
<caret line="747" column="37" selection-start-line="747" selection-start-column="37" selection-end-line="747" selection-end-column="37" />
</state>
</provider>
</entry>
......@@ -52,28 +70,33 @@
<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="-14">
<caret line="6" column="80" selection-start-line="6" selection-start-column="80" selection-end-line="6" selection-end-column="80" />
<state relative-caret-position="323">
<caret line="19" column="6" selection-start-line="19" selection-start-column="6" selection-end-line="19" selection-end-column="6" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/dist/main.js">
<entry file="file://$PROJECT_DIR$/node_modules/@babel/preset-react/lib/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-1631">
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state>
<state relative-caret-position="-651" />
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/webpack.config.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="63">
<caret line="3" column="14" lean-forward="true" selection-start-line="3" selection-start-column="14" selection-end-line="3" selection-end-column="14" />
<state relative-caret-position="459">
<caret line="27" column="5" selection-start-line="27" selection-start-column="5" selection-end-line="27" selection-end-column="5" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/tsconfig.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="119">
<caret line="7" column="20" selection-start-line="7" selection-start-column="20" selection-end-line="7" selection-end-column="20" />
</state>
</provider>
</entry>
......@@ -81,7 +104,7 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/dist/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="189">
<state relative-caret-position="153">
<caret line="9" column="7" selection-start-line="9" selection-start-column="7" selection-end-line="9" selection-end-column="7" />
</state>
</provider>
......@@ -90,22 +113,82 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="147">
<state relative-caret-position="119">
<caret line="7" column="26" selection-start-line="7" selection-start-column="26" selection-end-line="7" selection-end-column="26" />
</state>
</provider>
</entry>
</file>
</leaf>
</split-first>
<split-second>
<splitter split-orientation="horizontal" split-proportion="0.5">
<split-first>
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/typings.json">
<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>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/Rjsx.d.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="434">
<caret line="55" selection-start-line="55" selection-end-line="55" />
</state>
</provider>
</entry>
</file>
</leaf>
</split-first>
<split-second>
<leaf>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/Rjsx.d.ts">
<provider selected="true" editor-type-id="text-editor" />
</entry>
</file>
</leaf>
</split-second>
</splitter>
</split-second>
</splitter>
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="JavaScript File" />
<option value="HTML File" />
<option value="JavaScript File" />
<option value="TypeScript File" />
</list>
</option>
</component>
<component name="FindInProjectRecents">
<findStrings>
<find>setters</find>
<find>el:</find>
<find>afterSetKey</find>
<find>Reactivity</find>
<find>value</find>
<find>IntrinsicElements</find>
<find>preact</find>
<find>;</find>
<find>innerText</find>
<find>tree =</find>
<find>Agg</find>
</findStrings>
<replaceStrings>
<replace>| Reactivity;</replace>
<replace>Rjsx</replace>
</replaceStrings>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
......@@ -114,14 +197,25 @@
<option value="$PROJECT_DIR$/button.jsx" />
<option value="$PROJECT_DIR$/dist/index.html" />
<option value="$PROJECT_DIR$/src/index.js" />
<option value="$PROJECT_DIR$/webpack.config.js" />
<option value="$PROJECT_DIR$/package.json" />
<option value="$PROJECT_DIR$/h.js" />
<option value="$PROJECT_DIR$/.babelrc" />
<option value="$PROJECT_DIR$/src/cmp/Button.jsx" />
<option value="$PROJECT_DIR$/src/lib.ts" />
<option value="$PROJECT_DIR$/src/lib.d.ts" />
<option value="$PROJECT_DIR$/typings.json" />
<option value="$PROJECT_DIR$/src/index.jsx" />
<option value="$PROJECT_DIR$/tsconfig.json" />
<option value="$PROJECT_DIR$/src/preact.d.ts" />
<option value="$PROJECT_DIR$/src/Rjsx.ts" />
<option value="$PROJECT_DIR$/src/cmp/Button.tsx" />
<option value="$PROJECT_DIR$/webpack.config.js" />
<option value="$PROJECT_DIR$/package.json" />
<option value="$PROJECT_DIR$/src/index.tsx" />
<option value="$PROJECT_DIR$/src/Rjsx.d.ts" />
</list>
</option>
</component>
<component name="ProjectFrameBounds">
<component name="ProjectFrameBounds" extendedState="6">
<option name="width" value="1920" />
<option name="height" value="1056" />
</component>
......@@ -135,19 +229,36 @@
<subPane>
<expand>
<path>
<item name="form" type="b2602c69:ProjectViewProjectNode" />
<item name="form" type="462c0819:PsiDirectoryNode" />
<item name="reactive" type="b2602c69:ProjectViewProjectNode" />
<item name="reactive" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="form" type="b2602c69:ProjectViewProjectNode" />
<item name="form" type="462c0819:PsiDirectoryNode" />
<item name="reactive" type="b2602c69:ProjectViewProjectNode" />
<item name="reactive" type="462c0819:PsiDirectoryNode" />
<item name="dist" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="form" type="b2602c69:ProjectViewProjectNode" />
<item name="form" type="462c0819:PsiDirectoryNode" />
<item name="reactive" type="b2602c69:ProjectViewProjectNode" />
<item name="reactive" type="462c0819:PsiDirectoryNode" />
<item name="node_modules" 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>
<item name="reactive" type="b2602c69:ProjectViewProjectNode" />
<item name="reactive" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
<item name="cmp" 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="Rjsx.ts" type="620a8d5e:NestingTreeNode" />
</path>
</expand>
<select />
</subPane>
......@@ -157,8 +268,16 @@
<component name="PropertiesComponent">
<property name="DefaultHtmlFileTemplate" value="HTML File" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
<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="settings.editor.selected.configurable" value="settings.typescriptcompiler" />
<property name="ts.external.directory.path" value="C:\code\reactive\node_modules\typescript\lib" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\code\reactive\src" />
</key>
</component>
<component name="RunDashboard">
<option name="ruleStates">
......@@ -183,23 +302,21 @@
<option name="presentableId" value="Default" />
<updated>1551497458436</updated>
<workItem from="1551497459602" duration="7338000" />
<workItem from="1551551795192" duration="24849000" />
<workItem from="1551652746316" duration="22720000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="7338000" />
<option name="totallyTimeSpent" value="54907000" />
</component>
<component name="ToolWindowManager">
<frame x="0" y="0" width="1920" height="1056" extended-state="0" />
<editor active="true" />
<frame x="-8" y="-8" width="3456" height="1416" extended-state="6" />
<layout>
<window_info id="Favorites" side_tool="true" />
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24960339" />
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.13721475" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info anchor="bottom" id="Docker" show_stripe_button="false" />
<window_info anchor="bottom" id="Version Control" />
<window_info anchor="bottom" id="Terminal" visible="true" weight="0.32975295" />
<window_info anchor="bottom" id="Event Log" side_tool="true" />
<window_info id="Favorites" order="2" side_tool="true" />
<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 anchor="bottom" id="Run" order="2" />
......@@ -207,6 +324,11 @@
<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" visible="true" weight="0.16056119" />
<window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
<window_info anchor="bottom" id="TypeScript" order="11" />
<window_info anchor="right" id="Commander" order="0" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
......@@ -219,68 +341,134 @@
<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$/Reactive.js">
<provider selected="true" editor-type-id="text-editor">
<state>
<caret column="15" selection-start-column="15" selection-end-column="15" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/button.jsx">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="68">
<caret line="4" column="27" selection-start-line="4" selection-start-column="27" selection-end-line="4" selection-end-column="27" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/node_modules/@babel/parser/lib/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="65110">
<caret line="3830" column="16" selection-start-line="3830" selection-start-column="16" selection-end-line="3830" selection-end-column="16" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/dist/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="189">
<state relative-caret-position="153">
<caret line="9" column="7" selection-start-line="9" selection-start-column="7" selection-end-line="9" selection-end-column="7" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/dist/main.js">
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-1631">
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
<state relative-caret-position="119">
<caret line="7" column="26" selection-start-line="7" selection-start-column="26" selection-end-line="7" selection-end-column="26" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<entry file="jar://$APPLICATION_HOME_DIR$/plugins/NodeJS/lib/NodeJS.jar!/com/jetbrains/nodejs/packageJson/packageJsonSchema.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="283">
<caret line="32" column="6" selection-start-line="32" selection-start-column="6" selection-end-line="32" selection-end-column="6" />
</state>
</provider>
</entry>
<entry file="file://$APPLICATION_HOME_DIR$/plugins/JavaScriptLanguage/jsLanguageServicesImpl/external/react.d.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="283">
<caret line="1479" column="8" selection-start-line="1479" selection-start-column="8" selection-end-line="1479" selection-end-column="8" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/node_modules/@babel/preset-react/lib/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-651" />
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/tsconfig.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="119">
<caret line="7" column="20" selection-start-line="7" selection-start-column="20" selection-end-line="7" selection-end-column="20" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/preact.d.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-14">
<caret line="6" column="80" selection-start-line="6" selection-start-column="80" selection-end-line="6" selection-end-column="80" />
<state relative-caret-position="71">
<caret line="747" column="37" selection-start-line="747" selection-start-column="37" selection-end-line="747" selection-end-column="37" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/webpack.config.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="63">
<caret line="3" column="14" lean-forward="true" selection-start-line="3" selection-start-column="14" selection-end-line="3" selection-end-column="14" />
<state relative-caret-position="459">
<caret line="27" column="5" selection-start-line="27" selection-start-column="5" selection-end-line="27" selection-end-column="5" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.html">
<entry file="file://$PROJECT_DIR$/typings.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="147">
<caret line="7" column="26" selection-start-line="7" selection-start-column="26" selection-end-line="7" selection-end-column="26" />
<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>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/Reactive.js">
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="105">
<caret line="5" selection-end-line="60" />
<state relative-caret-position="323">
<caret line="19" column="6" selection-start-line="19" selection-start-column="6" selection-end-line="19" selection-end-column="6" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/button.jsx">
<entry file="file://$PROJECT_DIR$/src/cmp/Button.tsx">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="84">
<caret line="4" column="27" selection-start-line="4" selection-start-column="27" selection-end-line="4" selection-end-column="27" />
<state relative-caret-position="17">
<caret line="1" selection-start-line="1" selection-end-line="1" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/cmp/Button.jsx">
<entry file="file://$PROJECT_DIR$/src/Rjsx.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="364">
<caret line="49" column="8" selection-start-line="49" selection-start-column="8" selection-end-line="51" selection-end-column="34" />
<state relative-caret-position="264">
<caret line="62" column="30" selection-start-line="62" selection-start-column="30" selection-end-line="62" selection-end-column="30" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/index.jsx">
<entry file="file://$PROJECT_DIR$/src/Rjsx.d.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-350">
<caret line="2" column="23" selection-start-line="2" selection-start-column="23" selection-end-line="2" selection-end-column="23" />
<state relative-caret-position="434">
<caret line="55" selection-start-line="55" selection-end-line="55" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/index.tsx">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="357">
<caret line="21" column="34" lean-forward="true" selection-start-line="21" selection-start-column="34" selection-end-line="21" selection-end-column="34" />
<folding>
<element signature="e#0#36#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
......
dist/Rjsx.js 0 → 100644
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/*
declare global {
namespace JSX {
interface IntrinsicElements {
input: {
type?: string;
value?: any;
disabled?: boolean
};
div: {className?: string}
br: {}
}
}
namespace Rjsx {
R(byPass: Function):Component;
}
}*/
var byPass = function (a) { return a; };
var Reactivity = /** @class */ (function () {
function Reactivity(args) {
this.args = [];
this.scope = null;
this.key = null;
this.fn = null;
this.args = args;
}
Reactivity.prototype.emit = function () {
this.scope.setKey(this.key, this.fn.apply(this.scope, this.args));
};
return Reactivity;
}());
exports.Reactivity = Reactivity;
exports.TaskManager = {
jobs: [],
active: false,
add: function (task) {
exports.TaskManager.jobs.push(task);
if (!exports.TaskManager.active) {
exports.TaskManager.active = true;
requestAnimationFrame(exports.TaskManager.work);
}
},
work: function () {
var jobs = exports.TaskManager.jobs;
exports.TaskManager.jobs = [];
exports.TaskManager.active = false;
for (var i = 0, _i = jobs.length; i < _i; i++) {
jobs[i]();
}
}
};
function R() {
var args = [];
var reactivity = new Reactivity(args);
var _loop_1 = function (i, _i) {
var obj = arguments_1[i];
if (typeof obj === 'function') {
exports.TaskManager.add(function () {
var objResolved = obj();
objResolved.trigger = function (val) {
args[i] = val;
reactivity.emit();
};
args[i] = objResolved.value;
});
}
else {
obj.trigger = function (val) {
args[i] = val;
reactivity.emit();
};
args[i] = obj.value;
}
};
var arguments_1 = arguments;
for (var i = 0, _i = arguments.length === 1 ? arguments.length : arguments.length - 1; i < _i; i++) {
_loop_1(i, _i);
}
if (arguments.length === 1) {
reactivity.fn = byPass;
}
else {
reactivity.fn = arguments[arguments.length - 1];
}
return reactivity;
}
exports.R = R;
;
var Reactive = /** @class */ (function () {
function Reactive(cfg) {
this.state = {};
this.subs = {};
this.setters = {};
if (cfg === false) {
return;
}
this.state = cfg ? Object.create(cfg) : {};
this.subs = {};
// @ts-ignore
}
Reactive.prototype.fire = function (key, val, lastVal) {
if (key in this.subs) {
var subs = this.subs[key];
for (var i = 0, _i = subs.length; i < _i; i++) {
subs[i].call(this, this, val, lastVal);
}
}
};
Reactive.prototype.on = function (key, fn) {
var FN, obj; // TODO unAny
if (arguments.length === 1) {
obj = {
value: key in this.state ? this.state[key] : void 0
};
FN = function (_, val, oldVal) {
obj.value = val;
obj.trigger && obj.trigger(val);
};
}
else {
FN = fn;
}
(this.subs[key] || (this.subs[key] = [])).push(FN);
if (key in this.state)
FN.call(this, this, this.state[key]);
return obj;
};
Reactive.prototype.set = function (obj) {
for (var key in obj)
this.setKey(key, obj[key]);
};
Reactive.prototype.afterSetKey = function (key, val, lastVal) { };
Reactive.prototype.beforeSetKey = function (key, val, lastVal) { return val; };
Reactive.prototype.setKey = function (key, val) {
var lastVal = this.state[key];
if (lastVal === val)
return null;
if (val instanceof Reactivity) {
val.scope = this;
val.key = key;
val.emit();
return true;
}
val = this.beforeSetKey(key, val, lastVal);
this.state[key] = val;
if (key in this.setters) {
this.setters[key].call(this, this, val, lastVal);
}
else {
this.afterSetKey(key, val, lastVal);
}
this.fire(key, val, lastVal);
return true;
};
return Reactive;
}());
var Predefined = {
input: {
onChange: function () {
this.set({ checked: this.el.checked });
}
}
};
var Component = /** @class */ (function (_super) {
__extends(Component, _super);
function Component(tagName) {
var _this = _super.call(this, {}) || this;
_this.nodeName = null;
_this.el = null;
_this.def = {};
_this.children = null;
_this.tree = null;
_this.setters = {
dangerouslySetInnerHTML: function (_, htmlText) { return _.el.innerHTML = htmlText; },
text: function (_, val) { return _.el.innerText = val; }
};
_this.children = [];
_this.nodeName = tagName;
if (tagName in Predefined) {
_this.def = Predefined[tagName];
}
return _this;
}
Component.prototype.render = function () {
this.el = document.createElement(this.nodeName);
return this;
};
Component.prototype.init = function () {
this.tree = this.render();
this.el = this.tree.el;
this.set(this.def);
};
Component.prototype.renderTo = function (where) {
where.appendChild(this.el);
};
Component.prototype.addChild = function (child) {
child.renderTo(this.el);
this.children.push(child);
};
Component.prototype.beforeSetKey = function (key, val, lastVal) {
var _this = this;
if (key.substr(0, 2) === 'on') {
return function (e) { val.call(_this, e); };
}
else {
return val;
}
};
Component.prototype.afterSetKey = function (key, val, lastVal) {
if (this.el) {
if (key.substr(0, 2) === 'on') {
var eventName = key.toLowerCase().substr(2);
if (lastVal) {
this.el.removeEventListener(eventName, lastVal);
}
this.el.addEventListener(eventName, val);
}
else {
//@ts-ignore
this.el[key] = val;
if (val === false) {
this.el.removeAttribute(key);
}
else {
this.el.setAttribute(key, val);
}
}
}
};
return Component;
}(Reactive));
exports.Component = Component;
var TextNode = /** @class */ (function (_super) {
__extends(TextNode, _super);
function TextNode() {
var _this = _super.call(this, 'TextNode') || this;
_this.setters = {
value: function (_, val) { return _.el.textContent = val; }
};
return _this;
}
TextNode.prototype.render = function () {
this.el = document.createTextNode('');
return this;
};
TextNode.prototype.addChild = function (child) {
throw new Error('No children in text node');
};
return TextNode;
}(Component));
exports.TextNode = TextNode;
TextNode.prototype.setters = { value: function (_, val) { return _.el.textContent = val; } };
var h = function (ctor, props) {
var obj;
if (typeof ctor === 'string') {
obj = new Component(ctor);
}
else {
//@ts-ignore
obj = new ctor();
}
obj.init();
obj.set(props);
for (var i = 2; i < arguments.length; i++) {
var child = arguments[i];
if (typeof child === 'string' || typeof child === 'number') {
var textNode = new TextNode();
textNode.init();
textNode.set({ value: child });
obj.addChild(textNode);
}
else if (typeof child === 'function') {
obj.addChild(child());
}
else {
obj.addChild(child);
}
}
return obj;
};
exports.h = h;
//# sourceMappingURL=Rjsx.js.map
\ No newline at end of file
dist/Rjsx.js.map 0 → 100644
{"version":3,"file":"Rjsx.js","sourceRoot":"","sources":["../src/Rjsx.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
dist/bundle.js 0 → 100644
!function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=0)}([function(t,e,n){"use strict";n.r(e);var i=function(t){this.state=t?Object.create(t):{},this.subs={}};i.prototype={fire:function(t,e,n){if(t in this.subs)for(var i=this.subs[t],r=0,o=i.length;r<o;r++)i[r](e,n)},on:function(t,e){this.subs[t]||(this.subs[t]=[]).push(e),t in this.state&&e(this.state[t])},un:function(t,e){},set:function(t){for(var e in t)this.setKey(e,t[e])},setKey:function(t,e){var n=this.state[t];if(n===e)return null;if(this.state[t]=e,this.el)if("on"===t.substr(0,2)){var i=t.toLowerCase().substr(2);n&&this.el.removeEventListener(i,n),this.el.addEventListener(i,e)}else!1===e?this.el.removeAttribute(t):this.el.setAttribute(t,e);return this.fire(t,e,n),!0}};var r=function(t,e){var n=this;i.call(this,this.def),this.children=[],t&&(this.el=document.createElement(t)),this.set(e),this.on("value",function(t){return n.el.innerText=t})};r.prototype=new i,Object.assign(r.prototype,{def:{},render:function(t){t.appendChild(this.el)},addChild:function(t){t.render(this.el),this.children.push(t)}});var o=function(t){var e=this;i.call(this,this.def),this.set(t),this.el=document.createTextNode(""),this.on("value",function(t){return e.el.textContent=t})};o.prototype=new r,Object.assign(o.prototype,{def:{type:"Button",disabled:!1},render:function(t){t.appendChild(this.el)},addChild:function(t){throw new Error("No children in text node")}});var s=function(t){var e=this;i.call(this,this.def);var n=u("button",null);this.el=n.el,this.on("value",function(t){return e.el.innerText=t}),this.on("disabled",function(t){return t?e.el.setAttribute("disabled","disabled"):e.el.removeAttribute("disabled")}),this.set(t)};s.prototype=new r,Object.assign(s.prototype,{def:{type:"Button",disabled:!1},render:function(t){t.appendChild(this.el)},addChild:function(t){this.children.push(t),this.el.appendChild(t.el)}});var u=function(t,e){var n;n="string"==typeof t?new r(t,e):new t(e);for(var i=2;i<arguments.length;i++){var s=arguments[i];"string"==typeof s||"number"==typeof s?n.addChild(new o({value:s})):"function"==typeof s?n.addChild(s()):n.addChild(s)}return n},l=u("i",{x:"2"},"text3"),d=u(s,{onClick:function(t,e,n){console.log(this,t,e,n),h.checkbox.set({checked:!h.checkbox.state.checked})}},"text1",function(){return"function"==typeof u?u("b",null,"text2"):null},l,"text4"),c=0;setInterval(function(){l.set({value:c++})},600),console.log(d),d.render(document.body),console.log("hello");var h=new function(){this.checkbox=u("input",{type:"checkbox"}),this.div=u("div",null,this.checkbox,"Title: ",u("input",{value:""})),this.el=this.div.el};d.addChild(h)}]);
//# sourceMappingURL=bundle.js.map
\ No newline at end of file
dist/bundle.js.map 0 → 100644
{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/cmp/Button.jsx","webpack:///./src/index.jsx"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","Reactive","cfg","this","state","subs","fire","val","lastVal","_i","length","on","fn","push","un","set","obj","setKey","el","substr","eventName","toLowerCase","removeEventListener","addEventListener","removeAttribute","setAttribute","Generic","tagName","_this","def","children","document","createElement","innerText","assign","render","where","appendChild","addChild","child","TextNode","_this2","createTextNode","textContent","type","disabled","Error","Button","_this3","button","h","ctor","props","arguments","x","btn","onClick","a","b","console","log","item","checkbox","checked","counter","setInterval","body","div"],"mappings":"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","file":"bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","const Reactive = function(cfg){\r\n this.state = cfg ? Object.create(cfg) : {};\r\n this.subs = {};\r\n};\r\n\r\nReactive.prototype = {\r\n fire: function(key, val, lastVal){\r\n if(key in this.subs){\r\n const subs = this.subs[key];\r\n for(let i = 0, _i = subs.length; i < _i; i++){\r\n subs[i](val, lastVal);\r\n }\r\n }\r\n },\r\n on: function(key, fn){\r\n this.subs[key] || (this.subs[key] = []).push(fn);\r\n if(key in this.state)\r\n fn(this.state[key]);\r\n },\r\n un: function(key, fn){\r\n\r\n },\r\n set: function(obj){\r\n for(let key in obj)\r\n this.setKey(key, obj[key]);\r\n },\r\n setKey: function(key, val){\r\n const lastVal = this.state[key];\r\n if(lastVal === val)\r\n return null;\r\n this.state[key] = val;\r\n if(this.el){\r\n if(key.substr(0,2)==='on'){\r\n const eventName = key.toLowerCase().substr(2);\r\n if(lastVal){\r\n this.el.removeEventListener(eventName, lastVal);\r\n }\r\n\r\n this.el.addEventListener(eventName, val);\r\n } else {\r\n if (val === false) {\r\n this.el.removeAttribute(key);\r\n } else {\r\n this.el.setAttribute(key, val);\r\n }\r\n }\r\n }\r\n this.fire(key, val, lastVal);\r\n return true;\r\n }\r\n};\r\n\r\nconst Generic = function(tagName, cfg){\r\n Reactive.call(this, this.def);\r\n this.children = [];\r\n\r\n if(tagName) {\r\n this.el = document.createElement(tagName);\r\n }\r\n this.set(cfg);\r\n this.on('value', (val)=>this.el.innerText = val);\r\n};\r\n\r\nGeneric.prototype = new Reactive();\r\nObject.assign(Generic.prototype, {\r\n def: {},\r\n render: function(where){\r\n where.appendChild(this.el);\r\n },\r\n addChild: function (child) {\r\n child.render(this.el);\r\n this.children.push(child);\r\n }\r\n});\r\n\r\n\r\nconst TextNode = function(cfg){\r\n Reactive.call(this, this.def);\r\n this.set(cfg);\r\n this.el = document.createTextNode('');\r\n this.on('value', (val)=>this.el.textContent = val);\r\n};\r\nTextNode.prototype = new Generic();\r\nObject.assign(TextNode.prototype, {\r\n def: {\r\n type: 'Button',\r\n disabled: false\r\n },\r\n render: function(where){\r\n where.appendChild(this.el);\r\n },\r\n addChild: function (child) {\r\n throw new Error('No children in text node');\r\n this.children.push(child);\r\n }\r\n});\r\n\r\nconst Button = function(cfg){\r\n Reactive.call(this, this.def);\r\n const button = <button/>;//onClick={()=>{this.state.onClick.call(this)}}\r\n this.el = button.el;\r\n this.on('value', (val)=>this.el.innerText = val);\r\n this.on('disabled', (val)=>val?this.el.setAttribute('disabled', 'disabled'): this.el.removeAttribute('disabled'));\r\n\r\n this.set(cfg);\r\n};\r\nButton.prototype = new Generic();\r\nObject.assign(Button.prototype, {\r\n def: {\r\n type: 'Button',\r\n disabled: false\r\n },\r\n render: function(where){\r\n where.appendChild(this.el);\r\n },\r\n addChild: function (child) {\r\n this.children.push(child);\r\n this.el.appendChild(child.el)\r\n }\r\n});\r\n\r\n\r\nconst h = function(ctor, props){\r\n let obj;\r\n if(typeof ctor==='string'){\r\n obj = new Generic(ctor, props);\r\n }else {\r\n obj = new ctor(props);\r\n }\r\n for(let i = 2; i < arguments.length; i++) {\r\n const child = arguments[i];\r\n if(typeof child === 'string' || typeof child === 'number'){\r\n obj.addChild(new TextNode({value:child}));\r\n }else if(typeof child === 'function') {\r\n obj.addChild(child());\r\n }else{\r\n obj.addChild(child);\r\n }\r\n }\r\n return obj;\r\n //return new VNode(ctor, props, slice.call(arguments, 2));\r\n};\r\n\r\n/*const btn = new Button({value: '123'});\r\nbtn.render(document.body);\r\n\r\nlet count = 0;\r\nsetInterval(()=>{\r\n btn.set({value: 'btn '+(count++)})\r\n},100);*/\r\n\r\nexport {Generic, Button, TextNode, h};","import {Button, h} from './cmp/Button';\r\n\r\nvar a = [1,2,3];\r\n\r\nvar i = <i x=\"2\">text3</i>;\r\n /*\r\n onClick={(btn)=>{\r\n counter -= 1000;\r\n debugger;\r\n}}\r\n */\r\nvar btn = <Button onClick={function(a,b,c){\r\n console.log(this,a,b,c)\r\n /*counter-=1000*/\r\n item.checkbox.set({checked: !item.checkbox.state.checked})\r\n }}>text1{()=>typeof h === 'function'?<b>text2</b>:null}{i}text4</Button>;\r\n\r\nlet counter = 0;\r\nsetInterval(()=>{\r\n i.set({value: counter++})\r\n //btn.set({disabled: counter%2})\r\n //item.checkbox.set({checked: counter%2===0})\r\n}, 600);\r\n\r\nconsole.log(btn);\r\nbtn.render(document.body)\r\nconsole.log(\"hello\");\r\n\r\nconst Item = function() {\r\n this.checkbox = <input type=\"checkbox\"/>;\r\n this.div = <div>{this.checkbox}Title: <input value=\"\"/></div>\r\n this.el = this.div.el;\r\n};\r\n\r\nconst item = new Item();\r\n btn.addChild(item)\r\n"],"sourceRoot":""}
\ No newline at end of file
dist/cmp/Button.jsx 0 → 100644
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var Rjsx_1 = require("../Rjsx");
var Button = /** @class */ (function (_super) {
__extends(Button, _super);
function Button() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.button = null;
_this.def = {
type: 'Button',
disabled: false
};
_this.setters = {
value: function (_, val) { return _.button.el.innerText = val; },
disabled: function (_, val) { return _.button.set({ disabled: val }); }
};
return _this;
}
Button.prototype.render = function () {
//@ts-ignore
this.button = <button />;
return this.button;
};
return Button;
}(Rjsx_1.Component));
exports.Button = Button;
//# sourceMappingURL=Button.jsx.map
\ No newline at end of file
dist/cmp/Button.jsx.map 0 → 100644
{"version":3,"file":"Button.jsx","sourceRoot":"","sources":["../../src/cmp/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,gCAA2D;AAE3D;IAAqB,0BAAS;IAA9B;QAAA,qEAeC;QAdG,YAAM,GAAc,IAAI,CAAC;QACzB,SAAG,GAAG;YACF,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,KAAK;SAClB,CAAC;QACF,aAAO,GAAiC;YACpC,KAAK,EAAE,UAAC,CAAC,EAAC,GAAU,IAAG,OAAA,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,SAAS,GAAG,GAAG,EAA3B,CAA2B;YAClD,QAAQ,EAAE,UAAC,CAAC,EAAC,GAAW,IAAG,OAAA,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAC,QAAQ,EAAE,GAAG,EAAC,CAAC,EAA7B,CAA6B;SAC3D,CAAC;;IAMN,CAAC;IALG,uBAAM,GAAN;QACI,YAAY;QACZ,IAAI,CAAC,MAAM,GAAG,CAAC,MAAM,CAAA,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IACL,aAAC;AAAD,CAAC,AAfD,CAAqB,gBAAS,GAe7B;AAEO,wBAAM"}
\ No newline at end of file
dist/index.jsx 0 → 100644
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var Button_1 = require("./cmp/Button");
var Rjsx_1 = require("./Rjsx");
var i, btn, item;
var Item = /** @class */ (function (_super) {
__extends(Item, _super);
function Item() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.checkbox = null;
_this.checkbox2 = null;
return _this;
}
Item.prototype.render = function () {
var checkbox3;
return <div>
{this.checkbox = <input disabled={false} type="checkbox"/>}<br />
Title: <input value={Rjsx_1.R(function () { return checkbox3.on('checked'); })}/><br />
{this.checkbox2 = <input type="checkbox"/>}<br />
{checkbox3 = <input type="checkbox" checked={Rjsx_1.R(this.checkbox2.on('checked'), this.checkbox.on('checked'), function (v1, v2) { return !!(v1 ^ v2); })}/>}<br />
{<input type="checkbox" id="c4" checked={Rjsx_1.R(checkbox3.on('checked'))}/>}<br /><br /><br /><br />
</div>;
};
return Item;
}(Rjsx_1.Component));
<div className='wrapper'>
{item = <Item />}
{btn = <Button_1.Button onClick={function (a, b, c) {
item.checkbox.set({ checked: !item.checkbox.state.checked });
}}>text1<b>text2</b>{i = <i x="2">text3</i>}text4</Button_1.Button>}
<Item />
<Item />
</div>;
renderTo(document.body);
var counter = 0;
setInterval(function () {
i.set({ text: counter++ });
btn.set({ disabled: counter % 2 === 0 });
item.checkbox.set({ checked: counter % 2 === 1 });
item.checkbox2.set({ checked: counter % 4 > 1 });
}, 1000);
console.log(btn);
//# sourceMappingURL=index.jsx.map
\ No newline at end of file
dist/index.jsx.map 0 → 100644
{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
\ No newline at end of file
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -10,9 +10,18 @@
"babel": {
"presets": [
"@babel/preset-env",
["@babel/preset-react", {
[
"@babel/preset-react",
{
"pragma": "h"
}]
}
],
["@babel/typescript", { "jsxPragma": "h" }]
],
"plugins": [
"@babel/plugin-proposal-class-properties",
["transform-react-jsx", { "pragma": "h" }]
]
},
"keywords": [],
......@@ -20,15 +29,21 @@
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/plugin-proposal-class-properties": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"babel-preset-preact": "^1.1.0",
"babel-preset-react": "^6.24.1",
"source-map-loader": "^0.2.4",
"typescript": "^3.3.3333",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
}
},
"types": "src/Rjsx.d.ts",
"typings": "./src/Rjsx.d.ts"
}
src/Rjsx.d.ts 0 → 100644
import {Reactivity} from "./Rjsx";
export = Rjsx;
export as namespace Rjsx;
declare namespace Rjsx {
type Key = string | number;
type Ref<T> = (instance: T) => void;
type ComponentChild = VNode<any> | object | string | number | boolean | null;
type ComponentChildren = ComponentChild[] | ComponentChild;
/**
* @deprecated
*
* Use Attributes instead
*/
type ComponentProps = Attributes;
/**
* @deprecated
*
* Use ClassAttributes instead
*/
type RjsxHTMLAttributes = ClassAttributes<any>;
interface Attributes {
key?: Key;
jsx?: boolean;
}
interface ClassAttributes<T> extends Attributes {
ref?: Ref<T>;
}
interface RjsxDOMAttributes {
children?: ComponentChildren;
dangerouslySetInnerHTML?: {
__html: string;
};
}
type ComponentFactory<P> = ComponentConstructor<P> | FunctionalComponent<P>;
/**
* Define the contract for a virtual node in Rjsx.
*
* A virtual node has a name, a map of attributes, an array
* of child {VNode}s and a key. The key is used by Rjsx for
* internal purposes.
*/
interface VNode<P = any> {
nodeName: ComponentFactory<P> | string;
attributes: P;
children: Array<VNode<any> | string>;
key?: Key | null;
renderTo: Function
}
type RenderableProps<P, RefType = any> = Readonly<
P & Attributes & { children?: ComponentChildren; ref?: Ref<RefType> }
>;
interface FunctionalComponent<P = {}> {
(props: RenderableProps<P>, context?: any): VNode<any> | null;
displayName?: string;
defaultProps?: Partial<P>;
}
interface ComponentConstructor<P = {}, S = {}> {
new (props: P, context?: any): Component<P, S>;
displayName?: string;
defaultProps?: Partial<P>;
}
// Type alias for a component considered generally, whether stateless or stateful.
type AnyComponent<P = {}, S = {}> = FunctionalComponent<P> | ComponentConstructor<P, S>;
interface Component<P = {}, S = {}> {
componentWillMount?(): void;
componentDidMount?(): void;
componentWillUnmount?(): void;
getChildContext?(): object;
componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
componentDidUpdate?(previousProps: Readonly<P>, previousState: Readonly<S>, previousContext: any): void;
}
abstract class Component<P, S> {
constructor(props?: P, context?: any);
static displayName?: string;
static defaultProps?: any;
state: Readonly<S>;
props: RenderableProps<P>;
context: any;
base?: HTMLElement;
setState<K extends keyof S>(state: Pick<S, K>, callback?: () => void): void;
setState<K extends keyof S>(fn: (prevState: S, props: P) => Pick<S, K>, callback?: () => void): void;
forceUpdate(callback?: () => void): void;
abstract render(props?: RenderableProps<P>, state?: Readonly<S>, context?: any): ComponentChild;
renderTo?(HTMLElement): void;
}
function h(
node: string,
params: JSX.HTMLAttributes & JSX.SVGAttributes & Record<string, any> | null,
...children: ComponentChildren[]
): VNode<any>;
function h<P>(
node: ComponentFactory<P>,
params: Attributes & P | null,
...children: ComponentChildren[]
): VNode<any>;
function render(node: ComponentChild, parent: Element | Document | ShadowRoot | DocumentFragment, mergeWith?: Element): Element;
function rerender(): void;
//function cloneElement(element: JSX.Element, props: any, ...children: ComponentChildren[]): JSX.Element;
var options: {
syncComponentUpdates?: boolean;
debounceRendering?: (render: () => void) => void;
vnode?: (vnode: VNode<any>) => void;
event?: (event: Event) => Event;
};
}
/*
type Defaultize<Props, Defaults> =
// Distribute over unions
Props extends any
? // Make any properties included in Default optional
& Partial<Pick<Props, Extract<keyof Props, keyof Defaults>>>
// Include the remaining properties from Props
& Pick<Props, Exclude<keyof Props, keyof Defaults>>
: never;
*/
declare global {
namespace JSX {
/*interface Element extends Rjsx.VNode<any> {
}
interface ElementClass extends Rjsx.Component<any, any> {
}*/
interface ElementAttributesProperty {
props: any;
}
interface ElementChildrenAttribute {
children: any;
}
/*type LibraryManagedAttributes<Component, Props> =
Component extends { defaultProps: infer Defaults }
? Defaultize<Props, Defaults>
: Props;*/
interface SVGAttributes extends HTMLAttributes {
accentHeight?: number | string;
accumulate?: "none" | "sum";
additive?: "replace" | "sum";
alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit";
allowReorder?: "no" | "yes";
alphabetic?: number | string;
amplitude?: number | string;
arabicForm?: "initial" | "medial" | "terminal" | "isolated";
ascent?: number | string;
attributeName?: string;
attributeType?: string;
autoReverse?: number | string;
azimuth?: number | string;
baseFrequency?: number | string;
baselineShift?: number | string;
baseProfile?: number | string;
bbox?: number | string;
begin?: number | string;
bias?: number | string;
by?: number | string;
calcMode?: number | string;
capHeight?: number | string;
clip?: number | string;
clipPath?: string;
clipPathUnits?: number | string;
clipRule?: number | string;
colorInterpolation?: number | string;
colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit";
colorProfile?: number | string;
colorRendering?: number | string;
contentScriptType?: number | string;
contentStyleType?: number | string;
cursor?: number | string;
cx?: number | string;
cy?: number | string;
d?: string;
decelerate?: number | string;
descent?: number | string;
diffuseConstant?: number | string;
direction?: number | string;
display?: number | string;
divisor?: number | string;
dominantBaseline?: number | string;
dur?: number | string;
dx?: number | string;
dy?: number | string;
edgeMode?: number | string;
elevation?: number | string;
enableBackground?: number | string;
end?: number | string;
exponent?: number | string;
externalResourcesRequired?: number | string;
fill?: string;
fillOpacity?: number | string;
fillRule?: "nonzero" | "evenodd" | "inherit";
filter?: string;
filterRes?: number | string;
filterUnits?: number | string;
floodColor?: number | string;
floodOpacity?: number | string;
focusable?: number | string;
fontFamily?: string;
fontSize?: number | string;
fontSizeAdjust?: number | string;
fontStretch?: number | string;
fontStyle?: number | string;
fontVariant?: number | string;
fontWeight?: number | string;
format?: number | string;
from?: number | string;
fx?: number | string;
fy?: number | string;
g1?: number | string;
g2?: number | string;
glyphName?: number | string;
glyphOrientationHorizontal?: number | string;
glyphOrientationVertical?: number | string;
glyphRef?: number | string;
gradientTransform?: string;
gradientUnits?: string;
hanging?: number | string;
horizAdvX?: number | string;
horizOriginX?: number | string;
ideographic?: number | string;
imageRendering?: number | string;
in2?: number | string;
in?: string;
intercept?: number | string;
k1?: number | string;
k2?: number | string;
k3?: number | string;
k4?: number | string;
k?: number | string;
kernelMatrix?: number | string;
kernelUnitLength?: number | string;
kerning?: number | string;
keyPoints?: number | string;
keySplines?: number | string;
keyTimes?: number | string;
lengthAdjust?: number | string;
letterSpacing?: number | string;
lightingColor?: number | string;
limitingConeAngle?: number | string;
local?: number | string;
markerEnd?: string;
markerHeight?: number | string;
markerMid?: string;
markerStart?: string;
markerUnits?: number | string;
markerWidth?: number | string;
mask?: string;
maskContentUnits?: number | string;
maskUnits?: number | string;
mathematical?: number | string;
mode?: number | string;
numOctaves?: number | string;
offset?: number | string;
opacity?: number | string;
operator?: number | string;
order?: number | string;
orient?: number | string;
orientation?: number | string;
origin?: number | string;
overflow?: number | string;
overlinePosition?: number | string;
overlineThickness?: number | string;
paintOrder?: number | string;
panose1?: number | string;
pathLength?: number | string;
patternContentUnits?: string;
patternTransform?: number | string;
patternUnits?: string;
pointerEvents?: number | string;
points?: string;
pointsAtX?: number | string;
pointsAtY?: number | string;
pointsAtZ?: number | string;
preserveAlpha?: number | string;
preserveAspectRatio?: string;
primitiveUnits?: number | string;
r?: number | string;
radius?: number | string;
refX?: number | string;
refY?: number | string;
renderingIntent?: number | string;
repeatCount?: number | string;
repeatDur?: number | string;
requiredExtensions?: number | string;
requiredFeatures?: number | string;
restart?: number | string;
result?: string;
rotate?: number | string;
rx?: number | string;
ry?: number | string;
scale?: number | string;
seed?: number | string;
shapeRendering?: number | string;
slope?: number | string;
spacing?: number | string;
specularConstant?: number | string;
specularExponent?: number | string;
speed?: number | string;
spreadMethod?: string;
startOffset?: number | string;
stdDeviation?: number | string;
stemh?: number | string;
stemv?: number | string;
stitchTiles?: number | string;
stopColor?: string;
stopOpacity?: number | string;
strikethroughPosition?: number | string;
strikethroughThickness?: number | string;
string?: number | string;
stroke?: string;
strokeDasharray?: string | number;
strokeDashoffset?: string | number;
strokeLinecap?: "butt" | "round" | "square" | "inherit";
strokeLinejoin?: "miter" | "round" | "bevel" | "inherit";
strokeMiterlimit?: string;
strokeOpacity?: number | string;
strokeWidth?: number | string;
surfaceScale?: number | string;
systemLanguage?: number | string;
tableValues?: number | string;
targetX?: number | string;
targetY?: number | string;
textAnchor?: string;
textDecoration?: number | string;
textLength?: number | string;
textRendering?: number | string;
to?: number | string;
transform?: string;
u1?: number | string;
u2?: number | string;
underlinePosition?: number | string;
underlineThickness?: number | string;
unicode?: number | string;
unicodeBidi?: number | string;
unicodeRange?: number | string;
unitsPerEm?: number | string;
vAlphabetic?: number | string;
values?: string;
vectorEffect?: number | string;
version?: string;
vertAdvY?: number | string;
vertOriginX?: number | string;
vertOriginY?: number | string;
vHanging?: number | string;
vIdeographic?: number | string;
viewBox?: string;
viewTarget?: number | string;
visibility?: number | string;
vMathematical?: number | string;
widths?: number | string;
wordSpacing?: number | string;
writingMode?: number | string;
x1?: number | string;
x2?: number | string;
x?: number | string;
xChannelSelector?: string;
xHeight?: number | string;
xlinkActuate?: string;
xlinkArcrole?: string;
xlinkHref?: string;
xlinkRole?: string;
xlinkShow?: string;
xlinkTitle?: string;
xlinkType?: string;
xmlBase?: string;
xmlLang?: string;
xmlns?: string;
xmlnsXlink?: string;
xmlSpace?: string;
y1?: number | string;
y2?: number | string;
y?: number | string;
yChannelSelector?: string;
z?: number | string;
zoomAndPan?: string;
}
interface PathAttributes {
d: string;
}
interface EventHandler<E extends Event> {
(event: E): void;
}
type ClipboardEventHandler = EventHandler<ClipboardEvent>;
type CompositionEventHandler = EventHandler<CompositionEvent>;
type DragEventHandler = EventHandler<DragEvent>;
type FocusEventHandler = EventHandler<FocusEvent>;
type KeyboardEventHandler = EventHandler<KeyboardEvent>;
type MouseEventHandler = EventHandler<MouseEvent>;
type TouchEventHandler = EventHandler<TouchEvent>;
type UIEventHandler = EventHandler<UIEvent>;
type WheelEventHandler = EventHandler<WheelEvent>;
type AnimationEventHandler = EventHandler<AnimationEvent>;
type TransitionEventHandler = EventHandler<TransitionEvent>;
type GenericEventHandler = EventHandler<Event>;
type PointerEventHandler = EventHandler<PointerEvent>;
interface DOMAttributes extends Rjsx.RjsxDOMAttributes {
// Image Events
onLoad?: GenericEventHandler;
onError?: GenericEventHandler;
onLoadCapture?: GenericEventHandler;
// Clipboard Events
onCopy?: ClipboardEventHandler;
onCopyCapture?: ClipboardEventHandler;
onCut?: ClipboardEventHandler;
onCutCapture?: ClipboardEventHandler;
onPaste?: ClipboardEventHandler;
onPasteCapture?: ClipboardEventHandler;
// Composition Events
onCompositionEnd?: CompositionEventHandler;
onCompositionEndCapture?: CompositionEventHandler;
onCompositionStart?: CompositionEventHandler;
onCompositionStartCapture?: CompositionEventHandler;
onCompositionUpdate?: CompositionEventHandler;
onCompositionUpdateCapture?: CompositionEventHandler;
// Focus Events
onFocus?: FocusEventHandler;
onFocusCapture?: FocusEventHandler;
onBlur?: FocusEventHandler;
onBlurCapture?: FocusEventHandler;
// Form Events
onChange?: GenericEventHandler;
onChangeCapture?: GenericEventHandler;
onInput?: GenericEventHandler;
onInputCapture?: GenericEventHandler;
onSearch?: GenericEventHandler;
onSearchCapture?: GenericEventHandler;
onSubmit?: GenericEventHandler;
onSubmitCapture?: GenericEventHandler;
onInvalid?: GenericEventHandler;
// Keyboard Events
onKeyDown?: KeyboardEventHandler;
onKeyDownCapture?: KeyboardEventHandler;
onKeyPress?: KeyboardEventHandler;
onKeyPressCapture?: KeyboardEventHandler;
onKeyUp?: KeyboardEventHandler;
onKeyUpCapture?: KeyboardEventHandler;
// Media Events
onAbort?: GenericEventHandler;
onAbortCapture?: GenericEventHandler;
onCanPlay?: GenericEventHandler;
onCanPlayCapture?: GenericEventHandler;
onCanPlayThrough?: GenericEventHandler;
onCanPlayThroughCapture?: GenericEventHandler;
onDurationChange?: GenericEventHandler;
onDurationChangeCapture?: GenericEventHandler;
onEmptied?: GenericEventHandler;
onEmptiedCapture?: GenericEventHandler;
onEncrypted?: GenericEventHandler;
onEncryptedCapture?: GenericEventHandler;
onEnded?: GenericEventHandler;
onEndedCapture?: GenericEventHandler;
onLoadedData?: GenericEventHandler;
onLoadedDataCapture?: GenericEventHandler;
onLoadedMetadata?: GenericEventHandler;
onLoadedMetadataCapture?: GenericEventHandler;
onLoadStart?: GenericEventHandler;
onLoadStartCapture?: GenericEventHandler;
onPause?: GenericEventHandler;
onPauseCapture?: GenericEventHandler;
onPlay?: GenericEventHandler;
onPlayCapture?: GenericEventHandler;
onPlaying?: GenericEventHandler;
onPlayingCapture?: GenericEventHandler;
onProgress?: GenericEventHandler;
onProgressCapture?: GenericEventHandler;
onRateChange?: GenericEventHandler;
onRateChangeCapture?: GenericEventHandler;
onSeeked?: GenericEventHandler;
onSeekedCapture?: GenericEventHandler;
onSeeking?: GenericEventHandler;
onSeekingCapture?: GenericEventHandler;
onStalled?: GenericEventHandler;
onStalledCapture?: GenericEventHandler;
onSuspend?: GenericEventHandler;
onSuspendCapture?: GenericEventHandler;
onTimeUpdate?: GenericEventHandler;
onTimeUpdateCapture?: GenericEventHandler;
onVolumeChange?: GenericEventHandler;
onVolumeChangeCapture?: GenericEventHandler;
onWaiting?: GenericEventHandler;
onWaitingCapture?: GenericEventHandler;
// MouseEvents
onClick?: MouseEventHandler;
onClickCapture?: MouseEventHandler;
onContextMenu?: MouseEventHandler;
onContextMenuCapture?: MouseEventHandler;
onDblClick?: MouseEventHandler;
onDblClickCapture?: MouseEventHandler;
onDrag?: DragEventHandler;
onDragCapture?: DragEventHandler;
onDragEnd?: DragEventHandler;
onDragEndCapture?: DragEventHandler;
onDragEnter?: DragEventHandler;
onDragEnterCapture?: DragEventHandler;
onDragExit?: DragEventHandler;
onDragExitCapture?: DragEventHandler;
onDragLeave?: DragEventHandler;
onDragLeaveCapture?: DragEventHandler;
onDragOver?: DragEventHandler;
onDragOverCapture?: DragEventHandler;
onDragStart?: DragEventHandler;
onDragStartCapture?: DragEventHandler;
onDrop?: DragEventHandler;
onDropCapture?: DragEventHandler;
onMouseDown?: MouseEventHandler;
onMouseDownCapture?: MouseEventHandler;
onMouseEnter?: MouseEventHandler;
onMouseEnterCapture?: MouseEventHandler;
onMouseLeave?: MouseEventHandler;
onMouseLeaveCapture?: MouseEventHandler;
onMouseMove?: MouseEventHandler;
onMouseMoveCapture?: MouseEventHandler;
onMouseOut?: MouseEventHandler;
onMouseOutCapture?: MouseEventHandler;
onMouseOver?: MouseEventHandler;
onMouseOverCapture?: MouseEventHandler;
onMouseUp?: MouseEventHandler;
onMouseUpCapture?: MouseEventHandler;
// Selection Events
onSelect?: GenericEventHandler;
onSelectCapture?: GenericEventHandler;
// Touch Events
onTouchCancel?: TouchEventHandler;
onTouchCancelCapture?: TouchEventHandler;
onTouchEnd?: TouchEventHandler;
onTouchEndCapture?: TouchEventHandler;
onTouchMove?: TouchEventHandler;
onTouchMoveCapture?: TouchEventHandler;
onTouchStart?: TouchEventHandler;
onTouchStartCapture?: TouchEventHandler;
// Pointer Events
onPointerOver?: PointerEventHandler;
onPointerOverCapture?: PointerEventHandler;
onPointerEnter?: PointerEventHandler;
onPointerEnterCapture?: PointerEventHandler;
onPointerDown?: PointerEventHandler;
onPointerDownCapture?: PointerEventHandler;
onPointerMove?: PointerEventHandler;
onPointerMoveCapture?: PointerEventHandler;
onPointerUp?: PointerEventHandler;
onPointerUpCapture?: PointerEventHandler;
onPointerCancel?: PointerEventHandler;
onPointerCancelCapture?: PointerEventHandler;
onPointerOut?: PointerEventHandler;
onPointerOutCapture?: PointerEventHandler;
onPointerLeave?: PointerEventHandler;
onPointerLeaveCapture?: PointerEventHandler;
onGotPointerCapture?: PointerEventHandler;
onGotPointerCaptureCapture?: PointerEventHandler;
onLostPointerCapture?: PointerEventHandler;
onLostPointerCaptureCapture?: PointerEventHandler;
// UI Events
onScroll?: UIEventHandler;
onScrollCapture?: UIEventHandler;
// Wheel Events
onWheel?: WheelEventHandler;
onWheelCapture?: WheelEventHandler;
// Animation Events
onAnimationStart?: AnimationEventHandler;
onAnimationStartCapture?: AnimationEventHandler;
onAnimationEnd?: AnimationEventHandler;
onAnimationEndCapture?: AnimationEventHandler;
onAnimationIteration?: AnimationEventHandler;
onAnimationIterationCapture?: AnimationEventHandler;
// Transition Events
onTransitionEnd?: TransitionEventHandler;
onTransitionEndCapture?: TransitionEventHandler;
}
interface HTMLAttributes extends Rjsx.RjsxHTMLAttributes, DOMAttributes {
// Standard HTML Attributes
accept?: string | Reactivity;
acceptCharset?: string | Reactivity;
accessKey?: string | Reactivity;
action?: string | Reactivity;
allowFullScreen?: boolean | Reactivity;
allowTransparency?: boolean | Reactivity;
alt?: string | Reactivity;
async?: boolean | Reactivity;
autocomplete?: string | Reactivity;
autofocus?: boolean | Reactivity;
autoPlay?: boolean | Reactivity;
capture?: boolean | Reactivity;
cellPadding?: number | string | Reactivity;
cellSpacing?: number | string | Reactivity;
charSet?: string | Reactivity;
challenge?: string | Reactivity;
checked?: boolean | Reactivity;
class?: string | Reactivity;
className?: string | Reactivity;
cols?: number | Reactivity;
colSpan?: number | Reactivity;
content?: string | Reactivity;
contentEditable?: boolean | Reactivity;
contextMenu?: string | Reactivity;
controls?: boolean | Reactivity;
controlsList?: string | Reactivity;
coords?: string | Reactivity;
crossOrigin?: string | Reactivity;
data?: string | Reactivity;
dateTime?: string | Reactivity;
default?: boolean | Reactivity;
defer?: boolean | Reactivity;
dir?: string | Reactivity;
disabled?: boolean | Reactivity;
download?: any | Reactivity;
draggable?: boolean | Reactivity;
encType?: string | Reactivity;
form?: string | Reactivity;
formAction?: string | Reactivity;
formEncType?: string | Reactivity;
formMethod?: string | Reactivity;
formNoValidate?: boolean | Reactivity;
formTarget?: string | Reactivity;
frameBorder?: number | string | Reactivity;
headers?: string | Reactivity;
height?: number | string | Reactivity;
hidden?: boolean | Reactivity;
high?: number | Reactivity;
href?: string | Reactivity;
hrefLang?: string | Reactivity;
for?: string | Reactivity;
httpEquiv?: string | Reactivity;
icon?: string | Reactivity;
id?: string | Reactivity;
inputMode?: string | Reactivity;
integrity?: string | Reactivity;
is?: string | Reactivity;
keyParams?: string | Reactivity;
keyType?: string | Reactivity;
kind?: string | Reactivity;
label?: string | Reactivity;
lang?: string | Reactivity;
list?: string | Reactivity;
loop?: boolean | Reactivity;
low?: number | Reactivity;
manifest?: string | Reactivity;
marginHeight?: number | Reactivity;
marginWidth?: number | Reactivity;
max?: number | string | Reactivity;
maxLength?: number | Reactivity;
media?: string | Reactivity;
mediaGroup?: string | Reactivity;
method?: string | Reactivity;
min?: number | string | Reactivity;
minLength?: number | Reactivity;
multiple?: boolean | Reactivity;
muted?: boolean | Reactivity;
name?: string | Reactivity;
noValidate?: boolean | Reactivity;
open?: boolean | Reactivity;
optimum?: number | Reactivity;
pattern?: string | Reactivity;
placeholder?: string | Reactivity;
playsInline?: boolean | Reactivity;
poster?: string | Reactivity;
preload?: string | Reactivity;
radioGroup?: string | Reactivity;
readOnly?: boolean | Reactivity;
rel?: string | Reactivity;
required?: boolean | Reactivity;
role?: string | Reactivity;
rows?: number | Reactivity;
rowSpan?: number | Reactivity;
sandbox?: string | Reactivity;
scope?: string | Reactivity;
scoped?: boolean | Reactivity;
scrolling?: string | Reactivity;
seamless?: boolean | Reactivity;
selected?: boolean | Reactivity;
shape?: string | Reactivity;
size?: number | Reactivity;
sizes?: string | Reactivity;
slot?: string | Reactivity;
span?: number | Reactivity;
spellcheck?: boolean | Reactivity;
src?: string | Reactivity;
srcset?: string | Reactivity;
srcDoc?: string | Reactivity;
srcLang?: string | Reactivity;
srcSet?: string | Reactivity;
start?: number | Reactivity;
step?: number | string | Reactivity;
style?: any | Reactivity;
summary?: string | Reactivity;
tabIndex?: number | Reactivity;
target?: string | Reactivity;
title?: string | Reactivity;
type?: string | Reactivity;
useMap?: string | Reactivity;
value?: string | string[] | number | Reactivity;
width?: number | string | Reactivity;
wmode?: string | Reactivity;
wrap?: string | Reactivity;
// RDFa Attributes
about?: string | Reactivity;
datatype?: string | Reactivity;
inlist?: any | Reactivity;
prefix?: string | Reactivity;
property?: string | Reactivity;
resource?: string | Reactivity;
typeof?: string | Reactivity;
vocab?: string | Reactivity;
innerText?: string | Reactivity;
}
interface IntrinsicElements {
// HTML
a: HTMLAttributes;
abbr: HTMLAttributes;
address: HTMLAttributes;
area: HTMLAttributes;
article: HTMLAttributes;
aside: HTMLAttributes;
audio: HTMLAttributes;
b: HTMLAttributes;
base: HTMLAttributes;
bdi: HTMLAttributes;
bdo: HTMLAttributes;
big: HTMLAttributes;
blockquote: HTMLAttributes;
body: HTMLAttributes;
br: HTMLAttributes;
button: HTMLAttributes;
canvas: HTMLAttributes;
caption: HTMLAttributes;
cite: HTMLAttributes;
code: HTMLAttributes;
col: HTMLAttributes;
colgroup: HTMLAttributes;
data: HTMLAttributes;
datalist: HTMLAttributes;
dd: HTMLAttributes;
del: HTMLAttributes;
details: HTMLAttributes;
dfn: HTMLAttributes;
dialog: HTMLAttributes;
div: HTMLAttributes;
dl: HTMLAttributes;
dt: HTMLAttributes;
em: HTMLAttributes;
embed: HTMLAttributes;
fieldset: HTMLAttributes;
figcaption: HTMLAttributes;
figure: HTMLAttributes;
footer: HTMLAttributes;
form: HTMLAttributes;
h1: HTMLAttributes;
h2: HTMLAttributes;
h3: HTMLAttributes;
h4: HTMLAttributes;
h5: HTMLAttributes;
h6: HTMLAttributes;
head: HTMLAttributes;
header: HTMLAttributes;
hr: HTMLAttributes;
html: HTMLAttributes;
i: HTMLAttributes;
iframe: HTMLAttributes;
img: HTMLAttributes;
input: HTMLAttributes;
ins: HTMLAttributes;
kbd: HTMLAttributes;
keygen: HTMLAttributes;
label: HTMLAttributes;
legend: HTMLAttributes;
li: HTMLAttributes;
link: HTMLAttributes;
main: HTMLAttributes;
map: HTMLAttributes;
mark: HTMLAttributes;
menu: HTMLAttributes;
menuitem: HTMLAttributes;
meta: HTMLAttributes;
meter: HTMLAttributes;
nav: HTMLAttributes;
noscript: HTMLAttributes;
object: HTMLAttributes;
ol: HTMLAttributes;
optgroup: HTMLAttributes;
option: HTMLAttributes;
output: HTMLAttributes;
p: HTMLAttributes;
param: HTMLAttributes;
picture: HTMLAttributes;
pre: HTMLAttributes;
progress: HTMLAttributes;
q: HTMLAttributes;
rp: HTMLAttributes;
rt: HTMLAttributes;
ruby: HTMLAttributes;
s: HTMLAttributes;
samp: HTMLAttributes;
script: HTMLAttributes;
section: HTMLAttributes;
select: HTMLAttributes;
slot: HTMLAttributes;
small: HTMLAttributes;
source: HTMLAttributes;
span: HTMLAttributes;
strong: HTMLAttributes;
style: HTMLAttributes;
sub: HTMLAttributes;
summary: HTMLAttributes;
sup: HTMLAttributes;
table: HTMLAttributes;
tbody: HTMLAttributes;
td: HTMLAttributes;
textarea: HTMLAttributes;
tfoot: HTMLAttributes;
th: HTMLAttributes;
thead: HTMLAttributes;
time: HTMLAttributes;
title: HTMLAttributes;
tr: HTMLAttributes;
track: HTMLAttributes;
u: HTMLAttributes;
ul: HTMLAttributes;
"var": HTMLAttributes;
video: HTMLAttributes;
wbr: HTMLAttributes;
//SVG
svg: SVGAttributes;
animate: SVGAttributes;
circle: SVGAttributes;
clipPath: SVGAttributes;
defs: SVGAttributes;
ellipse: SVGAttributes;
feBlend: SVGAttributes;
feColorMatrix: SVGAttributes;
feComponentTransfer: SVGAttributes;
feComposite: SVGAttributes;
feConvolveMatrix: SVGAttributes;
feDiffuseLighting: SVGAttributes;
feDisplacementMap: SVGAttributes;
feFlood: SVGAttributes;
feGaussianBlur: SVGAttributes;
feImage: SVGAttributes;
feMerge: SVGAttributes;
feMergeNode: SVGAttributes;
feMorphology: SVGAttributes;
feOffset: SVGAttributes;
feSpecularLighting: SVGAttributes;
feTile: SVGAttributes;
feTurbulence: SVGAttributes;
filter: SVGAttributes;
foreignObject: SVGAttributes;
g: SVGAttributes;
image: SVGAttributes;
line: SVGAttributes;
linearGradient: SVGAttributes;
marker: SVGAttributes;
mask: SVGAttributes;
path: SVGAttributes;
pattern: SVGAttributes;
polygon: SVGAttributes;
polyline: SVGAttributes;
radialGradient: SVGAttributes;
rect: SVGAttributes;
stop: SVGAttributes;
symbol: SVGAttributes;
text: SVGAttributes;
tspan: SVGAttributes;
use: SVGAttributes;
}
}
}
src/Rjsx.ts 0 → 100644
export type PropertySetterInterface<T> = (cmp: T, val: any, oldVal: any)=>any;
export type TreeType = {el: HTMLElement|Text,[key: string]: any};
export interface PropSettersInterface<T> {
[key: string]: PropertySetterInterface<T>
}
/*
declare global {
namespace JSX {
interface IntrinsicElements {
input: {
type?: string;
value?: any;
disabled?: boolean
};
div: {className?: string}
br: {}
}
}
namespace Rjsx {
R(byPass: Function):Component;
}
}*/
const byPass = (a:any)=>a;
export class Reactivity {
args: any[] = [];
scope:any = null;
key: string = null;
fn: Function = null;
constructor(args:any[]) {
this.args = args;
}
emit() {
this.scope.setKey(this.key, this.fn.apply(this.scope, this.args));
}
}
export const TaskManager = {
jobs: [] as Function[],
active: false,
add: function(task: Function) {
TaskManager.jobs.push(task);
if(!TaskManager.active) {
TaskManager.active = true;
requestAnimationFrame(TaskManager.work);
}
},
work: function() {
const jobs = TaskManager.jobs;
TaskManager.jobs = [];
TaskManager.active = false;
for (let i = 0, _i = jobs.length; i < _i; i++) {
jobs[i]();
}
}
};
interface ReactiveSubscriber {
trigger?: Function;
value: any;
}
type Aggregate = (...values: any[])=>any;
export function R (byPass: Function): Reactivity;
export function R (reactiveSubscriber1: ReactiveSubscriber, aggregate: Aggregate): Reactivity;
export function R (reactiveSubscriber1: ReactiveSubscriber, reactiveSubscriber2: ReactiveSubscriber, aggregate: Aggregate): Reactivity;
export function R (reactiveSubscriber1: ReactiveSubscriber, reactiveSubscriber2: ReactiveSubscriber, reactiveSubscriber3: ReactiveSubscriber, aggregate: Aggregate): Reactivity;
export function R (reactiveSubscriber1: ReactiveSubscriber, reactiveSubscriber2: ReactiveSubscriber, reactiveSubscriber3: ReactiveSubscriber, reactiveSubscriber4: ReactiveSubscriber, ...other: (Aggregate|ReactiveSubscriber)[]): Reactivity;
export function R ():Reactivity {
const args: any[] = [];
const reactivity = new Reactivity(args);
for(let i = 0, _i = arguments.length === 1 ? arguments.length : arguments.length - 1; i < _i; i++){
const obj: ReactiveSubscriber | Function= arguments[i];
if(typeof obj === 'function'){
TaskManager.add(()=>{
const objResolved = obj();
objResolved.trigger = (val: any) => {
args[i] = val;
reactivity.emit();
};
args[i] = objResolved.value;
})
} else {
obj.trigger = (val: any) => {
args[i] = val;
reactivity.emit();
};
args[i] = obj.value;
}
}
if(arguments.length === 1){
reactivity.fn = byPass;
}else{
reactivity.fn = arguments[arguments.length-1];
}
return reactivity;
};
class Reactive {
state: any = {};
subs: {[key: string]: Function[]} = {};
setters: PropSettersInterface<Reactive> = {};
constructor(cfg: object|false){
if(cfg === false) {
return;
}
this.state = cfg ? Object.create(cfg) : {};
this.subs = {};
// @ts-ignore
}
fire(key:string, val:any, lastVal:any){
if(key in this.subs){
const subs = this.subs[key];
for(let i = 0, _i = subs.length; i < _i; i++){
subs[i].call(this, this, val, lastVal);
}
}
}
on(key: string, fn?: PropertySetterInterface<Reactive>){
let FN: PropertySetterInterface<Reactive>, obj: any;// TODO unAny
if(arguments.length === 1) {
obj = {
value: key in this.state ? this.state[key] :void 0
};
FN = function(_, val, oldVal) {
obj.value = val;
obj.trigger && obj.trigger(val)
};
}else{
FN = fn;
}
(this.subs[key] || (this.subs[key] = [])).push(FN);
if(key in this.state)
FN.call(this, this, this.state[key]);
return obj;
}
set(obj: {[key: string]: any}){
for(let key in obj)
this.setKey(key, obj[key]);
}
afterSetKey(key: string, val: any, lastVal: any){}
beforeSetKey(key: string, val: any, lastVal: any){return val;}
setKey(key: string, val: any){
const lastVal = this.state[key];
if(lastVal === val)
return null;
if(val instanceof Reactivity){
val.scope = this;
val.key = key;
val.emit();
return true;
}
val = this.beforeSetKey(key, val, lastVal);
this.state[key] = val;
if(key in this.setters){
this.setters[key].call(this, this, val, lastVal);
}else {
this.afterSetKey(key, val, lastVal);
}
this.fire(key, val, lastVal);
return true;
}
}
const Predefined: {[key: string]: any} = {
input: {
onChange: function() {
this.set({checked: this.el.checked})
}
}
};
class Component extends Reactive {
nodeName: string = null;
el: HTMLElement|Text|any = null;
def = {};
children: Component[] = null;
tree: TreeType = null;
setters: PropSettersInterface<Component> = {
dangerouslySetInnerHTML: (_, htmlText) => _.el.innerHTML = htmlText,
text: (_, val) => _.el.innerText = val
};
render(): TreeType{
this.el = document.createElement(this.nodeName);
return this;
}
constructor(tagName: string){
super({});
this.children = [];
this.nodeName = tagName;
if(tagName in Predefined){
this.def = Predefined[tagName];
}
}
init(){
this.tree = this.render();
this.el = this.tree.el as HTMLElement;
this.set(this.def);
}
renderTo(where: HTMLElement) {
where.appendChild(this.el);
}
addChild(child: Component) {
child.renderTo(this.el);
this.children.push(child);
}
beforeSetKey(key: string, val: any, lastVal: any): any {
if (key.substr(0, 2) === 'on') {
return (e: any)=>{val.call(this, e)};
}else{
return val;
}
}
afterSetKey(key: string, val: any, lastVal: any){
if(this.el){
if (key.substr(0, 2) === 'on') {
const eventName = key.toLowerCase().substr(2);
if (lastVal) {
this.el.removeEventListener(eventName, lastVal);
}
this.el.addEventListener(eventName, val);
} else {
//@ts-ignore
this.el[key] = val;
if (val === false) {
this.el.removeAttribute(key);
} else {
this.el.setAttribute(key, val);
}
}
}
}
}
class TextNode extends Component {
constructor(){
super('TextNode');
}
setters: PropSettersInterface<TextNode> = {
value: (_, val)=>_.el.textContent = val
};
render(){
this.el = document.createTextNode('') as Text;
return this;
}
addChild (child: any) {
throw new Error('No children in text node');
}
}
TextNode.prototype.setters = { value: (_, val)=>_.el.textContent = val};
const h = function(ctor: string|Function, props: any){
let obj;
if(typeof ctor==='string'){
obj = new Component(ctor);
}else {
//@ts-ignore
obj = new (ctor as Function)();
}
obj.init();
obj.set(props);
for(let i = 2; i < arguments.length; i++) {
const child = arguments[i];
if(typeof child === 'string' || typeof child === 'number'){
let textNode = new TextNode();
textNode.init();
textNode.set({value:child});
obj.addChild(textNode);
}else if(typeof child === 'function') {
obj.addChild(child());
}else{
obj.addChild(child);
}
}
return obj;
};
export {Component, TextNode, h};
\ No newline at end of file
src/cmp/Button.jsx deleted 100644 → 0
const Reactive = function(cfg){
this.state = cfg || {};
this.subs = {};
};
Reactive.prototype = {
fire: function(key, val, lastVal){
if(key in this.subs){
const subs = this.subs[key];
for(let i = 0, _i = subs.length; i < _i; i++){
subs[i](val, lastVal);
}
}
},
on: function(key, fn){
this.subs[key] || (this.subs[key] = []).push(fn);
if(key in this.state)
fn(this.state[key]);
},
un: function(key, fn){
},
set: function(obj){
for(let key in obj)
this.setKey(key, obj[key]);
},
setKey: function(key, val){
const lastVal = this.state[key];
if(lastVal === val)
return null;
this.state[key] = val;
this.fire(key, val, lastVal);
return true;
}
};
const Button = function(cfg){
Reactive.call(this, this.def);
this.children = [];
this.set(cfg);
};
Button.prototype = new Reactive();
Object.assign(Button.prototype, {
def: {
type: 'Button',
disabled: false
},
render: function(where){
const button = document.createElement('button');
this.on('value', (val)=>button.innerText = val);
where.appendChild(button);
},
addChild: function (child) {
this.children.push(child);
}
});
/*const btn = new Button({value: '123'});
btn.render(document.body);
let count = 0;
setInterval(()=>{
btn.set({value: 'btn '+(count++)})
},100);*/
export {Button};
\ No newline at end of file
src/cmp/Button.tsx 0 → 100644
import {Component, h, PropSettersInterface} from '../Rjsx';
class Button extends Component {
button: Component = null;
def = {
type: 'Button',
disabled: false
};
setters: PropSettersInterface<Button> = {
value: (_,val:string)=>_.button.el.innerText = val,
disabled: (_,val:boolean)=>_.button.set({disabled: val})
};
render(){
//@ts-ignore
this.button = <button/>;
return this.button;
}
}
export {Button};
\ No newline at end of file
src/index.jsx deleted 100644 → 0
import {Button} from './cmp/Button';
const slice = [].slice;
const VNode = function(ctor, props){
this.ctor = ctor;
this.props = props;
this.children = [];
};
const Generic = function (tagName, props) {
this.props = props;
this.children = [];
this.el = document.createElement(tagName);
};
Generic.prototype = {
render: function(where){
where.appendChild(this.el);
},
addChild: function (child) {
child.render(this.el)
this.children.push(child);
}
};
const h = function(ctor, props){
let obj;
if(typeof ctor==='string'){
obj = new Generic(ctor, props);
}else {
obj = new ctor(props);
}
for(let i = 2; i < arguments.length; i++) {
obj.addChild(arguments[i]);
}
return obj;
//return new VNode(ctor, props, slice.call(arguments, 2));
};
var a = [1,2,3];
var btn = (<Button>text1{()=>typeof h === 'function'?<b>text2</b>:null}<i x="2">text3</i>text4</Button>);
console.log(btn);
btn.render(document.body)
console.log("hello");
src/index.tsx 0 → 100644
import {Button} from './cmp/Button';
import {h, R, Component} from './Rjsx';
let i, btn, item;
interface ItemProps {
onClick: Function
}
class Item<ItemProps> extends Component {
checkbox: Component = null;
checkbox2: Component = null;
render(){
let checkbox3: Component;
return <div>
{this.checkbox = <input disabled={false} type="checkbox"/>}<br/>
Title: <input value={R(()=>checkbox3.on('checked'))}/><br/>
{this.checkbox2 = <input type="checkbox"/>}<br/>
{checkbox3 = <input type="checkbox" checked={R(
this.checkbox2.on('checked'),
this.checkbox.on('checked'),
(v1,v2)=>!!(v1^v2)
)}/>}<br/>
{<input type="checkbox" id="c4" checked={R(checkbox3.on('checked'))}/>}<br/><br/><br/><br/>
</div>;
}
}
<div className='wrapper'>
{item = <Item/>}
{btn = <Button onClick={function(a,b,c){
item.checkbox.set({checked: !item.checkbox.state.checked})
}}>text1<b>text2</b>{i = <i x="2">text3</i>}text4</Button>}
<Item/>
<Item />
</div>.renderTo(document.body);
let counter = 0;
setInterval(()=>{
i.set({text: counter++});
btn.set({disabled: counter%2===0});
item.checkbox.set({checked: counter%2===1});
item.checkbox2.set({checked: counter%4>1});
}, 1000);
console.log(btn);
\ No newline at end of file
src/preact.d.ts 0 → 100644
export = preact;
export as namespace preact;
declare namespace preact {
type Key = string | number;
type Ref<T> = (instance: T) => void;
type ComponentChild = VNode<any> | object | string | number | boolean | null;
type ComponentChildren = ComponentChild[] | ComponentChild;
/**
* @deprecated
*
* Use Attributes instead
*/
type ComponentProps = Attributes;
/**
* @deprecated
*
* Use ClassAttributes instead
*/
type PreactHTMLAttributes = ClassAttributes<any>;
interface Attributes {
key?: Key;
jsx?: boolean;
}
interface ClassAttributes<T> extends Attributes {
ref?: Ref<T>;
}
interface PreactDOMAttributes {
children?: ComponentChildren;
dangerouslySetInnerHTML?: {
__html: string;
};
}
type ComponentFactory<P> = ComponentConstructor<P> | FunctionalComponent<P>;
/**
* Define the contract for a virtual node in preact.
*
* A virtual node has a name, a map of attributes, an array
* of child {VNode}s and a key. The key is used by preact for
* internal purposes.
*/
interface VNode<P = any> {
nodeName: ComponentFactory<P> | string;
attributes: P;
children: Array<VNode<any> | string>;
key?: Key | null;
}
type RenderableProps<P, RefType = any> = Readonly<
P & Attributes & { children?: ComponentChildren; ref?: Ref<RefType> }
>;
interface FunctionalComponent<P = {}> {
(props: RenderableProps<P>, context?: any): VNode<any> | null;
displayName?: string;
defaultProps?: Partial<P>;
}
interface ComponentConstructor<P = {}, S = {}> {
new (props: P, context?: any): Component<P, S>;
displayName?: string;
defaultProps?: Partial<P>;
}
// Type alias for a component considered generally, whether stateless or stateful.
type AnyComponent<P = {}, S = {}> = FunctionalComponent<P> | ComponentConstructor<P, S>;
interface Component<P = {}, S = {}> {
componentWillMount?(): void;
componentDidMount?(): void;
componentWillUnmount?(): void;
getChildContext?(): object;
componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
componentDidUpdate?(previousProps: Readonly<P>, previousState: Readonly<S>, previousContext: any): void;
}
abstract class Component<P, S> {
constructor(props?: P, context?: any);
static displayName?: string;
static defaultProps?: any;
state: Readonly<S>;
props: RenderableProps<P>;
context: any;
base?: HTMLElement;
setState<K extends keyof S>(state: Pick<S, K>, callback?: () => void): void;
setState<K extends keyof S>(fn: (prevState: S, props: P) => Pick<S, K>, callback?: () => void): void;
forceUpdate(callback?: () => void): void;
abstract render(props?: RenderableProps<P>, state?: Readonly<S>, context?: any): ComponentChild;
}
function h(
node: string,
params: JSX.HTMLAttributes & JSX.SVGAttributes & Record<string, any> | null,
...children: ComponentChildren[]
): VNode<any>;
function h<P>(
node: ComponentFactory<P>,
params: Attributes & P | null,
...children: ComponentChildren[]
): VNode<any>;
function render(node: ComponentChild, parent: Element | Document | ShadowRoot | DocumentFragment, mergeWith?: Element): Element;
function rerender(): void;
//function cloneElement(element: JSX.Element, props: any, ...children: ComponentChildren[]): JSX.Element;
var options: {
syncComponentUpdates?: boolean;
debounceRendering?: (render: () => void) => void;
vnode?: (vnode: VNode<any>) => void;
event?: (event: Event) => Event;
};
}
/*
type Defaultize<Props, Defaults> =
// Distribute over unions
Props extends any
? // Make any properties included in Default optional
& Partial<Pick<Props, Extract<keyof Props, keyof Defaults>>>
// Include the remaining properties from Props
& Pick<Props, Exclude<keyof Props, keyof Defaults>>
: never;
*/
declare global {
namespace JSX {
/*interface Element extends preact.VNode<any> {
}
interface ElementClass extends preact.Component<any, any> {
}*/
interface ElementAttributesProperty {
props: any;
}
interface ElementChildrenAttribute {
children: any;
}
/*type LibraryManagedAttributes<Component, Props> =
Component extends { defaultProps: infer Defaults }
? Defaultize<Props, Defaults>
: Props;*/
interface SVGAttributes extends HTMLAttributes {
accentHeight?: number | string;
accumulate?: "none" | "sum";
additive?: "replace" | "sum";
alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit";
allowReorder?: "no" | "yes";
alphabetic?: number | string;
amplitude?: number | string;
arabicForm?: "initial" | "medial" | "terminal" | "isolated";
ascent?: number | string;
attributeName?: string;
attributeType?: string;
autoReverse?: number | string;
azimuth?: number | string;
baseFrequency?: number | string;
baselineShift?: number | string;
baseProfile?: number | string;
bbox?: number | string;
begin?: number | string;
bias?: number | string;
by?: number | string;
calcMode?: number | string;
capHeight?: number | string;
clip?: number | string;
clipPath?: string;
clipPathUnits?: number | string;
clipRule?: number | string;
colorInterpolation?: number | string;
colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit";
colorProfile?: number | string;
colorRendering?: number | string;
contentScriptType?: number | string;
contentStyleType?: number | string;
cursor?: number | string;
cx?: number | string;
cy?: number | string;
d?: string;
decelerate?: number | string;
descent?: number | string;
diffuseConstant?: number | string;
direction?: number | string;
display?: number | string;
divisor?: number | string;
dominantBaseline?: number | string;
dur?: number | string;
dx?: number | string;
dy?: number | string;
edgeMode?: number | string;
elevation?: number | string;
enableBackground?: number | string;
end?: number | string;
exponent?: number | string;
externalResourcesRequired?: number | string;
fill?: string;
fillOpacity?: number | string;
fillRule?: "nonzero" | "evenodd" | "inherit";
filter?: string;
filterRes?: number | string;
filterUnits?: number | string;
floodColor?: number | string;
floodOpacity?: number | string;
focusable?: number | string;
fontFamily?: string;
fontSize?: number | string;
fontSizeAdjust?: number | string;
fontStretch?: number | string;
fontStyle?: number | string;
fontVariant?: number | string;
fontWeight?: number | string;
format?: number | string;
from?: number | string;
fx?: number | string;
fy?: number | string;
g1?: number | string;
g2?: number | string;
glyphName?: number | string;
glyphOrientationHorizontal?: number | string;
glyphOrientationVertical?: number | string;
glyphRef?: number | string;
gradientTransform?: string;
gradientUnits?: string;
hanging?: number | string;
horizAdvX?: number | string;
horizOriginX?: number | string;
ideographic?: number | string;
imageRendering?: number | string;
in2?: number | string;
in?: string;
intercept?: number | string;
k1?: number | string;
k2?: number | string;
k3?: number | string;
k4?: number | string;
k?: number | string;
kernelMatrix?: number | string;
kernelUnitLength?: number | string;
kerning?: number | string;
keyPoints?: number | string;
keySplines?: number | string;
keyTimes?: number | string;
lengthAdjust?: number | string;
letterSpacing?: number | string;
lightingColor?: number | string;
limitingConeAngle?: number | string;
local?: number | string;
markerEnd?: string;
markerHeight?: number | string;
markerMid?: string;
markerStart?: string;
markerUnits?: number | string;
markerWidth?: number | string;
mask?: string;
maskContentUnits?: number | string;
maskUnits?: number | string;
mathematical?: number | string;
mode?: number | string;
numOctaves?: number | string;
offset?: number | string;
opacity?: number | string;
operator?: number | string;
order?: number | string;
orient?: number | string;
orientation?: number | string;
origin?: number | string;
overflow?: number | string;
overlinePosition?: number | string;
overlineThickness?: number | string;
paintOrder?: number | string;
panose1?: number | string;
pathLength?: number | string;
patternContentUnits?: string;
patternTransform?: number | string;
patternUnits?: string;
pointerEvents?: number | string;
points?: string;
pointsAtX?: number | string;
pointsAtY?: number | string;
pointsAtZ?: number | string;
preserveAlpha?: number | string;
preserveAspectRatio?: string;
primitiveUnits?: number | string;
r?: number | string;
radius?: number | string;
refX?: number | string;
refY?: number | string;
renderingIntent?: number | string;
repeatCount?: number | string;
repeatDur?: number | string;
requiredExtensions?: number | string;
requiredFeatures?: number | string;
restart?: number | string;
result?: string;
rotate?: number | string;
rx?: number | string;
ry?: number | string;
scale?: number | string;
seed?: number | string;
shapeRendering?: number | string;
slope?: number | string;
spacing?: number | string;
specularConstant?: number | string;
specularExponent?: number | string;
speed?: number | string;
spreadMethod?: string;
startOffset?: number | string;
stdDeviation?: number | string;
stemh?: number | string;
stemv?: number | string;
stitchTiles?: number | string;
stopColor?: string;
stopOpacity?: number | string;
strikethroughPosition?: number | string;
strikethroughThickness?: number | string;
string?: number | string;
stroke?: string;
strokeDasharray?: string | number;
strokeDashoffset?: string | number;
strokeLinecap?: "butt" | "round" | "square" | "inherit";
strokeLinejoin?: "miter" | "round" | "bevel" | "inherit";
strokeMiterlimit?: string;
strokeOpacity?: number | string;
strokeWidth?: number | string;
surfaceScale?: number | string;
systemLanguage?: number | string;
tableValues?: number | string;
targetX?: number | string;
targetY?: number | string;
textAnchor?: string;
textDecoration?: number | string;
textLength?: number | string;
textRendering?: number | string;
to?: number | string;
transform?: string;
u1?: number | string;
u2?: number | string;
underlinePosition?: number | string;
underlineThickness?: number | string;
unicode?: number | string;
unicodeBidi?: number | string;
unicodeRange?: number | string;
unitsPerEm?: number | string;
vAlphabetic?: number | string;
values?: string;
vectorEffect?: number | string;
version?: string;
vertAdvY?: number | string;
vertOriginX?: number | string;
vertOriginY?: number | string;
vHanging?: number | string;
vIdeographic?: number | string;
viewBox?: string;
viewTarget?: number | string;
visibility?: number | string;
vMathematical?: number | string;
widths?: number | string;
wordSpacing?: number | string;
writingMode?: number | string;
x1?: number | string;
x2?: number | string;
x?: number | string;
xChannelSelector?: string;
xHeight?: number | string;
xlinkActuate?: string;
xlinkArcrole?: string;
xlinkHref?: string;
xlinkRole?: string;
xlinkShow?: string;
xlinkTitle?: string;
xlinkType?: string;
xmlBase?: string;
xmlLang?: string;
xmlns?: string;
xmlnsXlink?: string;
xmlSpace?: string;
y1?: number | string;
y2?: number | string;
y?: number | string;
yChannelSelector?: string;
z?: number | string;
zoomAndPan?: string;
}
interface PathAttributes {
d: string;
}
interface EventHandler<E extends Event> {
(event: E): void;
}
type ClipboardEventHandler = EventHandler<ClipboardEvent>;
type CompositionEventHandler = EventHandler<CompositionEvent>;
type DragEventHandler = EventHandler<DragEvent>;
type FocusEventHandler = EventHandler<FocusEvent>;
type KeyboardEventHandler = EventHandler<KeyboardEvent>;
type MouseEventHandler = EventHandler<MouseEvent>;
type TouchEventHandler = EventHandler<TouchEvent>;
type UIEventHandler = EventHandler<UIEvent>;
type WheelEventHandler = EventHandler<WheelEvent>;
type AnimationEventHandler = EventHandler<AnimationEvent>;
type TransitionEventHandler = EventHandler<TransitionEvent>;
type GenericEventHandler = EventHandler<Event>;
type PointerEventHandler = EventHandler<PointerEvent>;
interface DOMAttributes extends preact.PreactDOMAttributes {
// Image Events
onLoad?: GenericEventHandler;
onError?: GenericEventHandler;
onLoadCapture?: GenericEventHandler;
// Clipboard Events
onCopy?: ClipboardEventHandler;
onCopyCapture?: ClipboardEventHandler;
onCut?: ClipboardEventHandler;
onCutCapture?: ClipboardEventHandler;
onPaste?: ClipboardEventHandler;
onPasteCapture?: ClipboardEventHandler;
// Composition Events
onCompositionEnd?: CompositionEventHandler;
onCompositionEndCapture?: CompositionEventHandler;
onCompositionStart?: CompositionEventHandler;
onCompositionStartCapture?: CompositionEventHandler;
onCompositionUpdate?: CompositionEventHandler;
onCompositionUpdateCapture?: CompositionEventHandler;
// Focus Events
onFocus?: FocusEventHandler;
onFocusCapture?: FocusEventHandler;
onBlur?: FocusEventHandler;
onBlurCapture?: FocusEventHandler;
// Form Events
onChange?: GenericEventHandler;
onChangeCapture?: GenericEventHandler;
onInput?: GenericEventHandler;
onInputCapture?: GenericEventHandler;
onSearch?: GenericEventHandler;
onSearchCapture?: GenericEventHandler;
onSubmit?: GenericEventHandler;
onSubmitCapture?: GenericEventHandler;
onInvalid?: GenericEventHandler;
// Keyboard Events
onKeyDown?: KeyboardEventHandler;
onKeyDownCapture?: KeyboardEventHandler;
onKeyPress?: KeyboardEventHandler;
onKeyPressCapture?: KeyboardEventHandler;
onKeyUp?: KeyboardEventHandler;
onKeyUpCapture?: KeyboardEventHandler;
// Media Events
onAbort?: GenericEventHandler;
onAbortCapture?: GenericEventHandler;
onCanPlay?: GenericEventHandler;
onCanPlayCapture?: GenericEventHandler;
onCanPlayThrough?: GenericEventHandler;
onCanPlayThroughCapture?: GenericEventHandler;
onDurationChange?: GenericEventHandler;
onDurationChangeCapture?: GenericEventHandler;
onEmptied?: GenericEventHandler;
onEmptiedCapture?: GenericEventHandler;
onEncrypted?: GenericEventHandler;
onEncryptedCapture?: GenericEventHandler;
onEnded?: GenericEventHandler;
onEndedCapture?: GenericEventHandler;
onLoadedData?: GenericEventHandler;
onLoadedDataCapture?: GenericEventHandler;
onLoadedMetadata?: GenericEventHandler;
onLoadedMetadataCapture?: GenericEventHandler;
onLoadStart?: GenericEventHandler;
onLoadStartCapture?: GenericEventHandler;
onPause?: GenericEventHandler;
onPauseCapture?: GenericEventHandler;
onPlay?: GenericEventHandler;
onPlayCapture?: GenericEventHandler;
onPlaying?: GenericEventHandler;
onPlayingCapture?: GenericEventHandler;
onProgress?: GenericEventHandler;
onProgressCapture?: GenericEventHandler;
onRateChange?: GenericEventHandler;
onRateChangeCapture?: GenericEventHandler;
onSeeked?: GenericEventHandler;
onSeekedCapture?: GenericEventHandler;
onSeeking?: GenericEventHandler;
onSeekingCapture?: GenericEventHandler;
onStalled?: GenericEventHandler;
onStalledCapture?: GenericEventHandler;
onSuspend?: GenericEventHandler;
onSuspendCapture?: GenericEventHandler;
onTimeUpdate?: GenericEventHandler;
onTimeUpdateCapture?: GenericEventHandler;
onVolumeChange?: GenericEventHandler;
onVolumeChangeCapture?: GenericEventHandler;
onWaiting?: GenericEventHandler;
onWaitingCapture?: GenericEventHandler;
// MouseEvents
onClick?: MouseEventHandler;
onClickCapture?: MouseEventHandler;
onContextMenu?: MouseEventHandler;
onContextMenuCapture?: MouseEventHandler;
onDblClick?: MouseEventHandler;
onDblClickCapture?: MouseEventHandler;
onDrag?: DragEventHandler;
onDragCapture?: DragEventHandler;
onDragEnd?: DragEventHandler;
onDragEndCapture?: DragEventHandler;
onDragEnter?: DragEventHandler;
onDragEnterCapture?: DragEventHandler;
onDragExit?: DragEventHandler;
onDragExitCapture?: DragEventHandler;
onDragLeave?: DragEventHandler;
onDragLeaveCapture?: DragEventHandler;
onDragOver?: DragEventHandler;
onDragOverCapture?: DragEventHandler;
onDragStart?: DragEventHandler;
onDragStartCapture?: DragEventHandler;
onDrop?: DragEventHandler;
onDropCapture?: DragEventHandler;
onMouseDown?: MouseEventHandler;
onMouseDownCapture?: MouseEventHandler;
onMouseEnter?: MouseEventHandler;
onMouseEnterCapture?: MouseEventHandler;
onMouseLeave?: MouseEventHandler;
onMouseLeaveCapture?: MouseEventHandler;
onMouseMove?: MouseEventHandler;
onMouseMoveCapture?: MouseEventHandler;
onMouseOut?: MouseEventHandler;
onMouseOutCapture?: MouseEventHandler;
onMouseOver?: MouseEventHandler;
onMouseOverCapture?: MouseEventHandler;
onMouseUp?: MouseEventHandler;
onMouseUpCapture?: MouseEventHandler;
// Selection Events
onSelect?: GenericEventHandler;
onSelectCapture?: GenericEventHandler;
// Touch Events
onTouchCancel?: TouchEventHandler;
onTouchCancelCapture?: TouchEventHandler;
onTouchEnd?: TouchEventHandler;
onTouchEndCapture?: TouchEventHandler;
onTouchMove?: TouchEventHandler;
onTouchMoveCapture?: TouchEventHandler;
onTouchStart?: TouchEventHandler;
onTouchStartCapture?: TouchEventHandler;
// Pointer Events
onPointerOver?: PointerEventHandler;
onPointerOverCapture?: PointerEventHandler;
onPointerEnter?: PointerEventHandler;
onPointerEnterCapture?: PointerEventHandler;
onPointerDown?: PointerEventHandler;
onPointerDownCapture?: PointerEventHandler;
onPointerMove?: PointerEventHandler;
onPointerMoveCapture?: PointerEventHandler;
onPointerUp?: PointerEventHandler;
onPointerUpCapture?: PointerEventHandler;
onPointerCancel?: PointerEventHandler;
onPointerCancelCapture?: PointerEventHandler;
onPointerOut?: PointerEventHandler;
onPointerOutCapture?: PointerEventHandler;
onPointerLeave?: PointerEventHandler;
onPointerLeaveCapture?: PointerEventHandler;
onGotPointerCapture?: PointerEventHandler;
onGotPointerCaptureCapture?: PointerEventHandler;
onLostPointerCapture?: PointerEventHandler;
onLostPointerCaptureCapture?: PointerEventHandler;
// UI Events
onScroll?: UIEventHandler;
onScrollCapture?: UIEventHandler;
// Wheel Events
onWheel?: WheelEventHandler;
onWheelCapture?: WheelEventHandler;
// Animation Events
onAnimationStart?: AnimationEventHandler;
onAnimationStartCapture?: AnimationEventHandler;
onAnimationEnd?: AnimationEventHandler;
onAnimationEndCapture?: AnimationEventHandler;
onAnimationIteration?: AnimationEventHandler;
onAnimationIterationCapture?: AnimationEventHandler;
// Transition Events
onTransitionEnd?: TransitionEventHandler;
onTransitionEndCapture?: TransitionEventHandler;
}
interface HTMLAttributes extends preact.PreactHTMLAttributes, DOMAttributes {
// Standard HTML Attributes
accept?: string;
acceptCharset?: string;
accessKey?: string;
action?: string;
allowFullScreen?: boolean;
allowTransparency?: boolean;
alt?: string;
async?: boolean;
autocomplete?: string;
autofocus?: boolean;
autoPlay?: boolean;
capture?: boolean;
cellPadding?: number | string;
cellSpacing?: number | string;
charSet?: string;
challenge?: string;
checked?: boolean;
class?: string;
className?: string;
cols?: number;
colSpan?: number;
content?: string;
contentEditable?: boolean;
contextMenu?: string;
controls?: boolean;
controlsList?: string;
coords?: string;
crossOrigin?: string;
data?: string;
dateTime?: string;
default?: boolean;
defer?: boolean;
dir?: string;
disabled?: boolean;
download?: any;
draggable?: boolean;
encType?: string;
form?: string;
formAction?: string;
formEncType?: string;
formMethod?: string;
formNoValidate?: boolean;
formTarget?: string;
frameBorder?: number | string;
headers?: string;
height?: number | string;
hidden?: boolean;
high?: number;
href?: string;
hrefLang?: string;
for?: string;
httpEquiv?: string;
icon?: string;
id?: string;
inputMode?: string;
integrity?: string;
is?: string;
keyParams?: string;
keyType?: string;
kind?: string;
label?: string;
lang?: string;
list?: string;
loop?: boolean;
low?: number;
manifest?: string;
marginHeight?: number;
marginWidth?: number;
max?: number | string;
maxLength?: number;
media?: string;
mediaGroup?: string;
method?: string;
min?: number | string;
minLength?: number;
multiple?: boolean;
muted?: boolean;
name?: string;
noValidate?: boolean;
open?: boolean;
optimum?: number;
pattern?: string;
placeholder?: string;
playsInline?: boolean;
poster?: string;
preload?: string;
radioGroup?: string;
readOnly?: boolean;
rel?: string;
required?: boolean;
role?: string;
rows?: number;
rowSpan?: number;
sandbox?: string;
scope?: string;
scoped?: boolean;
scrolling?: string;
seamless?: boolean;
selected?: boolean;
shape?: string;
size?: number;
sizes?: string;
slot?: string;
span?: number;
spellcheck?: boolean;
src?: string;
srcset?: string;
srcDoc?: string;
srcLang?: string;
srcSet?: string;
start?: number;
step?: number | string;
style?: any;
summary?: string;
tabIndex?: number;
target?: string;
title?: string;
type?: string;
useMap?: string;
value?: string | string[] | number;
width?: number | string;
wmode?: string;
wrap?: string;
// RDFa Attributes
about?: string;
datatype?: string;
inlist?: any;
prefix?: string;
property?: string;
resource?: string;
typeof?: string;
vocab?: string;
}
interface IntrinsicElements {
// HTML
a: HTMLAttributes;
abbr: HTMLAttributes;
address: HTMLAttributes;
area: HTMLAttributes;
article: HTMLAttributes;
aside: HTMLAttributes;
audio: HTMLAttributes;
b: HTMLAttributes;
base: HTMLAttributes;
bdi: HTMLAttributes;
bdo: HTMLAttributes;
big: HTMLAttributes;
blockquote: HTMLAttributes;
body: HTMLAttributes;
br: HTMLAttributes;
button: HTMLAttributes;
canvas: HTMLAttributes;
caption: HTMLAttributes;
cite: HTMLAttributes;
code: HTMLAttributes;
col: HTMLAttributes;
colgroup: HTMLAttributes;
data: HTMLAttributes;
datalist: HTMLAttributes;
dd: HTMLAttributes;
del: HTMLAttributes;
details: HTMLAttributes;
dfn: HTMLAttributes;
dialog: HTMLAttributes;
div: HTMLAttributes;
dl: HTMLAttributes;
dt: HTMLAttributes;
em: HTMLAttributes;
embed: HTMLAttributes;
fieldset: HTMLAttributes;
figcaption: HTMLAttributes;
figure: HTMLAttributes;
footer: HTMLAttributes;
form: HTMLAttributes;
h1: HTMLAttributes;
h2: HTMLAttributes;
h3: HTMLAttributes;
h4: HTMLAttributes;
h5: HTMLAttributes;
h6: HTMLAttributes;
head: HTMLAttributes;
header: HTMLAttributes;
hr: HTMLAttributes;
html: HTMLAttributes;
i: HTMLAttributes;
iframe: HTMLAttributes;
img: HTMLAttributes;
input: HTMLAttributes;
ins: HTMLAttributes;
kbd: HTMLAttributes;
keygen: HTMLAttributes;
label: HTMLAttributes;
legend: HTMLAttributes;
li: HTMLAttributes;
link: HTMLAttributes;
main: HTMLAttributes;
map: HTMLAttributes;
mark: HTMLAttributes;
menu: HTMLAttributes;
menuitem: HTMLAttributes;
meta: HTMLAttributes;
meter: HTMLAttributes;
nav: HTMLAttributes;
noscript: HTMLAttributes;
object: HTMLAttributes;
ol: HTMLAttributes;
optgroup: HTMLAttributes;
option: HTMLAttributes;
output: HTMLAttributes;
p: HTMLAttributes;
param: HTMLAttributes;
picture: HTMLAttributes;
pre: HTMLAttributes;
progress: HTMLAttributes;
q: HTMLAttributes;
rp: HTMLAttributes;
rt: HTMLAttributes;
ruby: HTMLAttributes;
s: HTMLAttributes;
samp: HTMLAttributes;
script: HTMLAttributes;
section: HTMLAttributes;
select: HTMLAttributes;
slot: HTMLAttributes;
small: HTMLAttributes;
source: HTMLAttributes;
span: HTMLAttributes;
strong: HTMLAttributes;
style: HTMLAttributes;
sub: HTMLAttributes;
summary: HTMLAttributes;
sup: HTMLAttributes;
table: HTMLAttributes;
tbody: HTMLAttributes;
td: HTMLAttributes;
textarea: HTMLAttributes;
tfoot: HTMLAttributes;
th: HTMLAttributes;
thead: HTMLAttributes;
time: HTMLAttributes;
title: HTMLAttributes;
tr: HTMLAttributes;
track: HTMLAttributes;
u: HTMLAttributes;
ul: HTMLAttributes;
"var": HTMLAttributes;
video: HTMLAttributes;
wbr: HTMLAttributes;
//SVG
svg: SVGAttributes;
animate: SVGAttributes;
circle: SVGAttributes;
clipPath: SVGAttributes;
defs: SVGAttributes;
ellipse: SVGAttributes;
feBlend: SVGAttributes;
feColorMatrix: SVGAttributes;
feComponentTransfer: SVGAttributes;
feComposite: SVGAttributes;
feConvolveMatrix: SVGAttributes;
feDiffuseLighting: SVGAttributes;
feDisplacementMap: SVGAttributes;
feFlood: SVGAttributes;
feGaussianBlur: SVGAttributes;
feImage: SVGAttributes;
feMerge: SVGAttributes;
feMergeNode: SVGAttributes;
feMorphology: SVGAttributes;
feOffset: SVGAttributes;
feSpecularLighting: SVGAttributes;
feTile: SVGAttributes;
feTurbulence: SVGAttributes;
filter: SVGAttributes;
foreignObject: SVGAttributes;
g: SVGAttributes;
image: SVGAttributes;
line: SVGAttributes;
linearGradient: SVGAttributes;
marker: SVGAttributes;
mask: SVGAttributes;
path: SVGAttributes;
pattern: SVGAttributes;
polygon: SVGAttributes;
polyline: SVGAttributes;
radialGradient: SVGAttributes;
rect: SVGAttributes;
stop: SVGAttributes;
symbol: SVGAttributes;
text: SVGAttributes;
tspan: SVGAttributes;
use: SVGAttributes;
}
}
}
tsconfig.json 0 → 100644
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "preserve",
"jsxFactory": "h"
},
"include": [
"./src/**/*"
]
}
\ No newline at end of file
typings.json 0 → 100644
{
"name": "Rjsx",
"main": "src/Rjsx.d.ts",
"version": false
}
\ No newline at end of file
webpack.config.js
module.exports = {
entry: './src/index.jsx',
entry: './src/index.tsx',
devtool: 'source-map',
module: {
rules: [
......@@ -8,11 +8,15 @@ module.exports = {
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
},
{
test: /\.tsx?$/,
loader: 'babel-loader',
},
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
extensions: ['*', '.js', '.jsx', '.tsx','.ts']
},
output: {
path: __dirname + '/dist',
......
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