@alexgyver/component 1.0.4 → 1.0.6

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 AlexGyver
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Component.js
+ 
+> npm i @alexgyver/component

package/component.js

@@ -1,136 +1,136 @@
-export class Sheet {
-    /**
-     * @abstract Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
-     * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
-     * @param {string} id уникальный id стиля
-     * @param {boolean} ext внешний стиль - может быть удалён по id
-     */
-    static addStyle(style, id, ext = false) {
-        if (!style || !id) return;
-        if (typeof id === 'object') id = id.constructor.name;
-
-        if (!Sheet.#internal.has(id) && !Sheet.#external.has(id)) {
-            if (typeof style === 'object') {
-                let str = '';
-                let f = 0;
-                for (const v of style) {
-                    if (f = !f) {
-                        str += v;
-                    } else {
-                        str += '{';
-                        for (const rule of v) str += rule + ';';
-                        str += '}';
-                    }
-                }
-                style = str;
-            }
-
-            if (ext) {
-                let sheet = document.createElement('style');
-                document.head.appendChild(sheet);
-                sheet.sheet.insertRule(style);
-                Sheet.#external.set(id, sheet);
-            } else {
-                if (!Sheet.#sheet) {
-                    Sheet.#sheet = document.head.appendChild(document.createElement('style')).sheet;
-                }
-                Sheet.#sheet.insertRule(style);
-                Sheet.#internal.add(id);
-            }
-        }
-    }
-
-    /**
-     * @abstract Удалить ext стиль по его id
-     * @param {string} id id стиля
-     */
-    static removeStyle(id) {
-        if (Sheet.#external.has(id)) {
-            Sheet.#external.get(id).remove();
-            Sheet.#external.delete(id);
-        }
-    }
-
-    static #sheet;
-    static #internal = new Set();
-    static #external = new Map();
-}
-
-export class Component {
-    /**
-     * @abstract Создать компонент и поместить его в переменную $root
-     * @param {string} tag html tag элемента
-     * @param {object} data параметры
-     * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
-     * @param {string|this} id уникальный id стиля
-     * @param {boolean} ext внешний стиль - может быть удалён по id
-     */
-    constructor(tag, data = {}, style = null, id = null, ext = false) {
-        data.context = this;
-        this.$root = Component.make(tag, data, style, id, ext);
-    }
-
-    /*
-        tag {string} тег html элемента (для указания в children например)
-        context {object} контекст для параметра 'var' и вызовов 'also'
-        text {string} добавить в textContent
-        html {string} добавить в innerHTML
-        class {string} добавить в className
-        also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
-        var {string} создаёт переменную $имя в указанном контексте
-        events {object} добавляет addEventListener'ы {event: handler}
-        append - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
-        style {string | object} объект в виде { padding: '0px', ... } или строка css стилей
-        children - массив DOM, Component, object, html string
-   */
-    /**
-     * @abstract Создать компонент
-     * @param {string} tag html tag элемента
-     * @param {object} data параметры
-     * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
-     * @param {string|this} id уникальный id стиля
-     * @param {boolean} ext внешний стиль - может быть удалён по id
-     */
-    static make(tag, data = {}, style = null, id = null, ext = false) {
-        Sheet.addStyle(style, id, ext);
-        if (!tag || typeof data !== 'object') return null;
-        if (data instanceof Node) return data;
-
-        const context = data.context;
-        const $el = document.createElement(tag);
-
-        for (const [key, val] of Object.entries(data)) {
-            switch (key) {
-                case 'tag':
-                case 'context':
-                    continue;
-                case 'text': $el.textContent = val; break;
-                case 'html': $el.innerHTML = val; break;
-                case 'class': $el.className = val; break;
-                case 'also': if (context) val.call(context, $el); break;
-                case 'var': if (context) context['$' + val] = $el; break;
-                case 'events': for (const [ev, handler] of Object.entries(val)) $el.addEventListener(ev, handler.bind(context)); break;
-                case 'append': if (val instanceof Element) val.append($el); break;
-                case 'style':
-                    if (typeof val === 'string') $el.style = val + ';';
-                    else for (const [skey, sval] of Object.entries(val)) $el.style[skey] = sval;
-                    break;
-                case 'children':
-                    for (const obj of val) {
-                        if (obj instanceof Node) $el.appendChild(obj);
-                        else if (obj instanceof Component) $el.appendChild(obj.$root);
-                        else if (typeof obj === 'object') {
-                            if (!obj.context) obj.context = context;
-                            let cmp = Component.make(obj.tag, obj);
-                            if (cmp) $el.appendChild(cmp);
-                        } else if (typeof obj === 'string') {
-                            $el.innerHTML += obj;
-                        }
-                    }
-                    break;
-                default: $el[key] = val; break;
-            }
-        }
-        return $el;
-    }
+export class Sheet {
+    /**
+     * Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
+     * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+     * @param {string} id уникальный id стиля
+     * @param {boolean} ext внешний стиль - может быть удалён по id
+     */
+    static addStyle(style, id, ext = false) {
+        if (!style || !id) return;
+        if (typeof id === 'object') id = id.constructor.name;
+
+        if (!Sheet.#internal.has(id) && !Sheet.#external.has(id)) {
+            if (typeof style === 'object') {
+                let str = '';
+                let f = 0;
+                for (const v of style) {
+                    if (f = !f) {
+                        str += v;
+                    } else {
+                        str += '{';
+                        for (const rule of v) str += rule + ';';
+                        str += '}';
+                    }
+                }
+                style = str;
+            }
+
+            if (ext) {
+                let sheet = document.createElement('style');
+                document.head.appendChild(sheet);
+                sheet.sheet.insertRule(style);
+                Sheet.#external.set(id, sheet);
+            } else {
+                if (!Sheet.#sheet) {
+                    Sheet.#sheet = document.head.appendChild(document.createElement('style')).sheet;
+                }
+                Sheet.#sheet.insertRule(style);
+                Sheet.#internal.add(id);
+            }
+        }
+    }
+
+    /**
+     * Удалить ext стиль по его id
+     * @param {string} id id стиля
+     */
+    static removeStyle(id) {
+        if (Sheet.#external.has(id)) {
+            Sheet.#external.get(id).remove();
+            Sheet.#external.delete(id);
+        }
+    }
+
+    static #sheet;
+    static #internal = new Set();
+    static #external = new Map();
+}
+
+export class Component {
+    /**
+     * Создать компонент и поместить его в переменную $root
+     * @param {string} tag html tag элемента
+     * @param {object} data параметры
+     * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+     * @param {string|this} id уникальный id стиля
+     * @param {boolean} ext внешний стиль - может быть удалён по id
+     */
+    constructor(tag, data = {}, style = null, id = null, ext = false) {
+        data.context = this;
+        this.$root = Component.make(tag, data, style, id, ext);
+    }
+
+    /*
+        tag {string} тег html элемента (для указания в children например)
+        context {object} контекст для параметра 'var' и вызовов 'also'
+        text {string} добавить в textContent
+        html {string} добавить в innerHTML
+        class {string} добавить в className
+        also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
+        var {string} создаёт переменную $имя в указанном контексте
+        events {object} добавляет addEventListener'ы {event: handler}
+        append - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
+        style {string | object} объект в виде { padding: '0px', ... } или строка css стилей
+        children - массив DOM, Component, object, html string
+   */
+    /**
+     * Создать компонент
+     * @param {string} tag html tag элемента
+     * @param {object} data параметры
+     * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+     * @param {string|this} id уникальный id стиля
+     * @param {boolean} ext внешний стиль - может быть удалён по id
+     */
+    static make(tag, data = {}, style = null, id = null, ext = false) {
+        Sheet.addStyle(style, id, ext);
+        if (!tag || typeof data !== 'object') return null;
+        if (data instanceof Node) return data;
+
+        const context = data.context;
+        const $el = document.createElement(tag);
+
+        for (const [key, val] of Object.entries(data)) {
+            switch (key) {
+                case 'tag':
+                case 'context':
+                    continue;
+                case 'text': $el.textContent = val; break;
+                case 'html': $el.innerHTML = val; break;
+                case 'class': $el.className = val; break;
+                case 'also': if (context) val.call(context, $el); break;
+                case 'var': if (context) context['$' + val] = $el; break;
+                case 'events': for (const [ev, handler] of Object.entries(val)) $el.addEventListener(ev, handler.bind(context)); break;
+                case 'append': if (val instanceof Element) val.append($el); break;
+                case 'style':
+                    if (typeof val === 'string') $el.style = val + ';';
+                    else for (const [skey, sval] of Object.entries(val)) $el.style[skey] = sval;
+                    break;
+                case 'children':
+                    for (const obj of val) {
+                        if (obj instanceof Node) $el.appendChild(obj);
+                        else if (obj instanceof Component) $el.appendChild(obj.$root);
+                        else if (typeof obj === 'object') {
+                            if (!obj.context) obj.context = context;
+                            let cmp = Component.make(obj.tag, obj);
+                            if (cmp) $el.appendChild(cmp);
+                        } else if (typeof obj === 'string') {
+                            $el.innerHTML += obj;
+                        }
+                    }
+                    break;
+                default: $el[key] = val; break;
+            }
+        }
+        return $el;
+    }
 }

package/example.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script type="module" src="script.js"></script>
+</head>
+
+<body>
+
+</body>
+
+</html>

package/package.json

@@ -1,20 +1,14 @@
-{
-  "name": "@alexgyver/component",
-  "version": "1.0.4",
-  "description": "Simple HTML element builder",
-  "main": "./component.js",
-  "type": "module",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/GyverLibs/Component.js.git"
-  },
-  "author": "AlexGyver <alex@alexgyver.ru>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/GyverLibs/Component.js/issues"
-  },
-  "homepage": "https://github.com/GyverLibs/Component.js#readme"
+{
+  "name": "@alexgyver/component",
+  "version": "1.0.6",
+  "description": "Simple HTML element builder",
+  "main": "./component.js",
+  "module": "./component.js",
+  "types": "./component.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GyverLibs/Component.js.git"
+  },
+  "author": "AlexGyver <alex@alexgyver.ru>",
+  "license": "MIT"
 }

package/script.js

@@ -0,0 +1,106 @@
+import { Component, Sheet } from "./component.js";
+
+// кнопка наследует, стили добавляются отдельно
+class Button extends Component {
+    constructor(text, handler) {
+
+        super('button', {
+            text: text,
+            class: 'btn',
+            style: 'border-radius: 5px',
+            events: {
+                click: handler,
+            },
+            also(el) {
+                // console.log('123');
+            }
+        });
+
+        Sheet.addStyle([
+            '.btn', [
+                'background: red',
+                'color: white'
+            ]
+        ], this, true);   // this превратится в Button
+    }
+}
+
+// инпут сразу добавляет стили
+class Input extends Component {
+    constructor(text) {
+        super('input',
+            {
+                type: 'text',
+                value: text,
+                class: 'inp',
+            },
+            [
+                '.inp', [
+                    'background: blue'
+                ]
+            ],
+            'Input'
+        );
+    }
+}
+
+class Num {
+    constructor(text) {
+        return new Component('input',
+            {
+                type: 'number',
+                value: text,
+                class: 'num',
+            },
+            [
+                '.num', [
+                    'background: green',
+                    'margin-left: 10px',
+                ]
+            ],
+            'Num'
+        );
+    }
+}
+
+// функция вернёт элемент
+function Checkbox(name) {
+    return Component.make('div',
+        {
+            children: [
+                {
+                    tag: 'input',
+                    type: 'checkbox'
+                },
+                `<label class=check>${name}</label>`,
+            ]
+        },
+        '.check {font-size: 20px;}',
+        'Checkbox'
+    );
+}
+
+function Container(children) {
+    return Component.make('div',
+        {
+            children: children,
+        });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    Component.make('h1', {
+        text: 'Hello!',
+        append: document.body,
+    });
+
+    let b = new Button('b1', () => console.log(123));
+
+    let cont = Container([b, new Button('b2', () => console.log('hello')), new Input('hello'), new Num('123')]);
+    document.body.appendChild(cont);
+
+    document.body.appendChild(Checkbox('kek'));
+    document.body.appendChild(Checkbox('pek'));
+
+    // Sheet.removeStyle('Button');
+    // Sheet.removeStyle('Checkbox');
+});