🔥

Author: kohutd

.gitignore

@@ -0,0 +1,4 @@
+/.idea/
+/node_modules/
+/yarn.lock
+/yarn-error.log

.npmignore

@@ -0,0 +1,2 @@
+src
+tsconfig.json

LICENSE

@@ -0,0 +1,52 @@
+# VR
+Virtual DOM and Components.
+
+## Installation
+NPM:
+```shell script
+npm install @telegramv/vr
+```
+
+Yarn:
+```shell script
+yarn add @telegramv/vr
+```
+
+## Usage
+Example:
+```jsx harmony
+import VRDOM from "@telegramv/vr/dom";
+import StatelessComponent from "@telegramv/vr/StatelessComponent";
+import StatefulComponent from "@telegramv/vr/StatefulComponent";
+
+const Button = ({onClick}, content) => {
+    return <button onClick={onClick}>content</button>
+}
+
+class Title extends StatelessComponent {
+    render(state, props) {
+        return <h1>{props.value}</h1>
+    }
+}
+
+class Counter extends StatefulComponent {
+    state = {
+        count: 0
+    }
+
+    render(state) {
+        return (
+            <div>
+                <Title value={state.count}/>
+
+                <Button onClick={() => this.setState({
+                    count: this.state.count + 1
+                })}>Increment</Button>
+            </div>
+        );
+    }
+}
+
+const $element = VRDOM.render(<Counter/>);
+console.log($element);
+```

README.md

@@ -0,0 +1,14 @@
+{
+  "transform": {
+    "^.+\\.(t|j)sx?$": "ts-jest"
+  },
+  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+  "moduleFileExtensions": [
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "json",
+    "node"
+  ]
+}

jestconfig.json

@@ -0,0 +1,3 @@
+declare class StatefulComponent {
+}
+export default StatefulComponent;

lib/StatefulComponent.d.ts

@@ -0,0 +1,22 @@
+"use strict";
+/*
+ * Telegram V
+ * Copyright (C) 2020 Davyd Kohut
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+class StatefulComponent {
+}
+exports.default = StatefulComponent;

lib/StatefulComponent.js

@@ -0,0 +1,3 @@
+declare class StatelessComponent {
+}
+export default StatelessComponent;

lib/StatelessComponent.d.ts

@@ -0,0 +1,22 @@
+"use strict";
+/*
+ * Telegram V
+ * Copyright (C) 2020 Davyd Kohut
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+class StatelessComponent {
+}
+exports.default = StatelessComponent;

lib/StatelessComponent.js

@@ -0,0 +1,19 @@
+export declare type VRElementAttrs = null | any;
+export declare type VRElementListeners = {
+    [key: string]: (event: Event) => any;
+} | null;
+export declare type VRNode = VRElement | any;
+export declare type VRElementChildren = Array<VRNode>;
+export declare type VRElementProps = {
+    attributes: VRElementAttrs;
+    listeners: VRElementListeners;
+    children: VRElementChildren;
+};
+declare class VRElement {
+    tagName: string;
+    attributes: VRElementAttrs;
+    listeners: VRElementListeners;
+    children: VRElementChildren;
+    constructor(tagName: string, props?: VRElementProps);
+}
+export default VRElement;

lib/dom/VRElement.d.ts

@@ -0,0 +1,33 @@
+"use strict";
+/*
+ * Telegram V
+ * Copyright (C) 2020 Davyd Kohut
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+class VRElement {
+    constructor(tagName, props) {
+        this.attributes = null;
+        this.listeners = null;
+        this.children = [];
+        this.tagName = tagName;
+        if (props) {
+            this.attributes = props.attributes;
+            this.listeners = props.listeners;
+            this.children = props.children;
+        }
+    }
+}
+exports.default = VRElement;

lib/dom/VRElement.js

@@ -0,0 +1,3 @@
+import VRElement, { VRElementChildren } from "./VRElement";
+declare const createElement: (tagName: string, attrs?: any, ...children: VRElementChildren) => VRElement;
+export default createElement;

lib/dom/createElement.d.ts

@@ -0,0 +1,44 @@
+"use strict";
+/*
+ * Telegram V
+ * Copyright (C) 2020 Davyd Kohut
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const VRElement_1 = __importDefault(require("./VRElement"));
+const index_1 = __importDefault(require("./index"));
+const createElement = (tagName, attrs = null, ...children) => {
+    if (tagName === index_1.default.Fragment) {
+        console.warn("Fragments are not fully supported.");
+    }
+    const attributes = {};
+    const listeners = {};
+    if (attrs) {
+        // @ts-ignore
+        for (const [k, v] of Object.entries(attrs)) {
+            if (k.startsWith("on")) {
+                listeners[k.substring(2).toLowerCase()] = v;
+            }
+            else {
+                attributes[k] = v;
+            }
+        }
+    }
+    return new VRElement_1.default(tagName, { attributes, listeners, children });
+};
+exports.default = createElement;

lib/dom/createElement.js

@@ -0,0 +1,5 @@
+declare const VRDOM: {
+    createElement: (tagName: string, attrs?: any, ...children: import("./VRElement").VRElementChildren) => import("./VRElement").default;
+    Fragment: null;
+};
+export default VRDOM;

lib/dom/index.d.ts

@@ -0,0 +1,28 @@
+"use strict";
+/*
+ * Telegram V
+ * Copyright (C) 2020 Davyd Kohut
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const createElement_1 = __importDefault(require("./createElement"));
+const VRDOM = {
+    createElement: createElement_1.default,
+    Fragment: null
+};
+exports.default = VRDOM;

lib/dom/index.js

@@ -0,0 +1 @@
+export {};

lib/index.d.ts

@@ -0,0 +1,28 @@
+"use strict";
+/*
+ * Telegram V
+ * Copyright (C) 2020 Davyd Kohut
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// WIP
+const dom_1 = __importDefault(require("./dom"));
+const div = dom_1.default.createElement("div", null, dom_1.default.createElement("ul", {
+    className: "list"
+}, dom_1.default.createElement("li", null, "a"), dom_1.default.createElement("li", null, "b"), dom_1.default.createElement("li", null, "c"), dom_1.default.createElement("li", null, "d", dom_1.default.createElement("div", null, dom_1.default.createElement("a", { href: "gogol" }, "gogol")))), dom_1.default.createElement("b", null, "123"), dom_1.default.createElement("hr", null), dom_1.default.createElement("svg", null));
+console.log("X", div);