@alexgyver/component 1.4.0 → 1.4.1

package/Component.js

@@ -19,28 +19,10 @@ export class EL {
      * @param {object} data параметры
      * @param {Boolean} svg SVG
      * @returns {Node}
-     * @params
-     * tag {string} - тег html элемента. Если 'svg' - включится режим SVG на детей
-     * context {object} - объект для параметра '$', прокидывается в детей
-     * parent - {Element} добавить созданный элемент к указанному элементу
-     * text {string} - добавить в textContent
-     * html {string} - добавить в innerHTML
-     * class {string | Array} - добавить в className
-     * style/style_r {string | object} - объект в виде { padding: '0px', ... } или строка css стилей. _r - заменить имеющиеся
-     * push {array} - добавить к указанному массиву
-     * $ {string} - создать переменную $имя в указанном объекте
-     * events {object} - добавить addEventListener'ы {event: e => {}}
-     * click, change, input, mousewheel - добавление события без events
-     * children/children_r - дети, массив {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
-     * child/child_r - ребенок {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
-     * attrs {object} - добавить аттрибуты (как setAttribute())
-     * props {object} - добавить свойства (как el[prop])
-     * also {function} - вызвать с текущим элементом: also(el) { console.log(el); }
-     * всё остальное будет добавлено как property
      */
     static make(tag, data = {}, svg = false) {
-        if (!tag || typeof data !== 'object') return null;
         if (data instanceof Node) return data;
+        if (!tag) tag = 'div';
         if (tag == 'svg') svg = true;
         return EL.config(svg ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag), data, svg);
     }
@@ -61,57 +43,138 @@ export class EL {
             el.forEach(e => EL.config(e, data, svg));
             return null;
         }
-        if (!(el instanceof Node) || (typeof data !== 'object')) return el;
+        if (!(el instanceof Node) || (typeof data !== 'object')) {
+            return el;
+        }
 
         let ctx = data.context;
-        EL.context = (ctx === null) ? null : (ctx ? ctx : EL.context);
-        ctx = EL.context;
-
-        let addChild = (obj) => {
-            if (!obj) return;
-            if (obj instanceof Node) el.appendChild(obj);
-            else if (obj instanceof EL) el.appendChild(obj.$root);
-            else if (typeof obj === 'string') el.innerHTML += obj;
-            else if (typeof obj === 'object') {
-                let cmp = EL.make(obj.tag ?? 'div', obj, svg || obj.tag == 'svg');
-                if (cmp) el.appendChild(cmp);
+        if (ctx === undefined) ctx = EL.context;
+        else EL.context = ctx;
+
+        const addChild = (obj) => {
+            if (obj) {
+                if (obj instanceof Node) el.appendChild(obj);
+                else if (obj instanceof EL) el.appendChild(obj.$root);
+                else if (typeof obj === 'string') el.insertAdjacentHTML('beforeend', obj);
+                else if (typeof obj === 'object') {
+                    let cmp = EL.make(obj.tag, obj, svg || obj.tag == 'svg');
+                    if (cmp) el.appendChild(cmp);
+                }
             }
         }
 
+        const getClasses = (cls) => {
+            if (Array.isArray(cls)) return cls;
+            if (typeof cls === 'string') return cls.split(/\s+/);
+            if (typeof cls === 'object') return Object.keys(cls).filter(k => cls[k]);
+            return [];
+        }
+
+        const mount = () => {
+            if (el.isConnected) {
+                el._mounted = true;
+                data.onMount(el);
+            } else requestAnimationFrame(mount);
+        }
+
         for (const [key, val] of Object.entries(data)) {
             switch (key) {
-                case 'text': el.textContent = (val == null) ? '' : (val + ''); continue;
-                case 'html': el.innerHTML = (val == null) ? '' : (val + ''); continue;
+                case 'text': el.textContent = (val == null) ? '' : String(val); continue;   // == - null + undef
+                case 'html': el.innerHTML = (val == null) ? '' : String(val); continue;
                 case 'tag':
                 case 'context':
                 case 'get':
                 case 'also':
+                case 'onConfig':
+                case 'onMount':
                     continue;
             }
-            if (!val) continue;
+
+            if (val === undefined || val === null) continue;
 
             switch (key) {
-                case 'class': (Array.isArray(val) ? val : val.split(' ')).map(c => c && el.classList.add(c)); break;
-                case 'push': val.push(el); break;
-                case '$': case 'var': if (ctx) ctx['$' + val] = el; break;
-                case 'events': for (let ev in val) el.addEventListener(ev, ctx ? val[ev].bind(ctx) : val[ev]); break;
-                case 'click': case 'change': case 'input': case 'mousewheel': el.addEventListener(key, ctx ? val.bind(ctx) : val); break;
-                case 'parent': val.appendChild(el); break;
-                case 'attrs': for (let attr in val) el.setAttribute(attr, val[attr]); break;
-                case 'props': for (let prop in val) el[prop] = val[prop]; break;
-                case 'child_r': EL.clear(el); // fall
-                case 'child': addChild(val); break;
-                case 'children_r': EL.clear(el); // fall
-                case 'children': for (let obj of val) addChild(obj); break;
-                case 'style_r': el.style.cssText = ''; // fall
+                case 'push':
+                    val.push(el);
+                    break;
+
+                case '$':
+                case 'var':
+                    if (ctx) ctx['$' + val] = el;
+                    break;
+
+                case 'events':
+                    for (let ev in val) el.addEventListener(ev, ctx ? val[ev].bind(ctx) : val[ev]);
+                    break;
+
+                case 'click':
+                case 'change':
+                case 'input':
+                case 'mousewheel':
+                    el.addEventListener(key, ctx ? val.bind(ctx) : val);
+                    break;
+
+                case 'parent':
+                    val.appendChild(el);
+                    break;
+
+                case 'attrs':
+                    for (let attr in val) el.setAttribute(attr, val[attr]);
+                    break;
+
+                case 'props':
+                    for (let prop in val) el[prop] = val[prop];
+                    break;
+
+                case 'data':
+                    for (let key in val) el.dataset[key] = val[key];
+                    break;
+
+                case 'child_r':
+                    EL.clear(el);
+                // fall
+                case 'child':
+                    addChild(val);
+                    break;
+
+                case 'children_r':
+                    EL.clear(el);
+                // fall
+                case 'children':
+                    for (let obj of val) addChild(obj);
+                    break;
+
+                case 'animate': {
+                    const { duration = 300, easing = 'ease', ...styles } = val;
+                    el.style.transition = Object.keys(styles).map(st => `${st} ${duration}ms ${easing}`).join(', ');
+                    requestAnimationFrame(() => { for (let st in styles) el.style[st] = styles[st]; });
+                } break;
+
+                case 'style_r':
+                    el.style.cssText = '';
+                // fall
                 case 'style':
-                    if (typeof val === 'string') el.style.cssText += val + ';';
-                    else for (let st in val) if (val[st]) el.style[st] = val[st];
+                    if (typeof val === 'string') {
+                        el.style.cssText += val + ';';
+                    } else for (let st in val) {
+                        if (val[st]) el.style[st] = val[st];
+                    }
+                    break;
+
+                case 'class_r':
+                    el.className = '';
+                // fall
+                case 'class':
+                    getClasses(val).forEach(c => c && el.classList.add(c));
+                    break;
+
+                default: el[key] = val;
                     break;
-                default: el[key] = val; break;
             }
         }
-        if (data.also && ctx) data.also.call(ctx, el);
+
+        if (data.also) ctx ? data.also.call(ctx, el) : data.also(el);
+        if (data.onMount && !el._mounted) mount();
+        if (data.onConfig) data.onConfig(el);
         return el;
     }
     static configIn(ctx, el, data, svg = false) {
@@ -124,7 +187,7 @@ export class EL {
      * @param {HTMLElement} el 
      */
     static clear(el) {
-        while (el.firstChild) el.removeChild(el.lastChild);
+        while (el.firstChild) el.removeChild(el.firstChild);
     }
 
     /**
@@ -172,6 +235,25 @@ export class EL {
 // legacy
 export const Component = EL;
 
+//#region State
+export class State {
+    constructor(init = {}) {
+        this.data = init;
+        this.subs = new Set();
+    }
+    set(key, value) {
+        this.data[key] = value;
+        this.subs.forEach(fn => fn(this.data));
+    }
+    get(key) {
+        return this.data[key];
+    }
+    subscribe(fn) {
+        this.subs.add(fn);
+        return () => this.subs.delete(fn);
+    }
+}
+
 //#region SVG
 export class SVG {
     static make = (tag, data) => EL.make(tag, data, true);

package/README.md

@@ -4,7 +4,36 @@
 > npm i @alexgyver/component
 
 ## Дока
-### Component
+### EL
+Параметры для конфига:
+
+- `context` - объект, в контексте которого будут созданы некоторые параметры
+- `$` - текст, добавляет созданный элемент в контекст с именем $значение
+- `events` - объект с событиями вида `{eventName: handlerFunc}`, привязываются к контексту, если указан
+- `click`, `change`, `input`, `mousewheel` - события, указывается обработчик. Короткая форма подключения этих событий
+- `also` - функция, будет вызвана с созданным элементом, в контексте, если он указан
+- `text` - текст, добавится в textContent, нулевые значения - очистить
+- `html` - текст, добавится в innerHTML, нулевые значения - очистить
+- `tag` - HTML тег (для child-объектов)
+- `push` - массив, добавляет созданный элемент в указанный массив
+- `parent` - Node элемент, к которому добавить созданный элемент как child
+- `attrs` - объект с аттрибутами для установки через setAttribute
+- `props` - объект со свойствами, будут добавлены просто как el[prop] = val
+- `data` - объект с датасетами вида `{name: value}`, будут добавлены как аттрибуты data-name = value
+- `child`, `child_r` - объект конфига, добавится как ребёнок к созданному элементу. Нужно указать tag, без указания будет div
+- `children`, `children_r` - массив объектов конфига, добавятся как дети к созданному элементу. Нужно указать tag, без указания будет div
+- `animate` - объект стилей `{styleName: value}`, может содержать параметры анимации duration и easing
+- `style`, `style_r` - стили. Принимает:
+  - Строки CSS стилей
+  - Объект вида `{styleName: value}`
+- `class`, `class_r` - установка классов в classList, версия с `_r` - заменить классы. Принимает:
+  - Строки вида `newClass active`
+  - Массивы вида `['newClass', 'active']`, причём можно по условию: `['newClass', isActive && 'active']`
+  - Объекты вида `{newClass: true, active: false}` - true значение добавляет класс
+- `onConfig` - функция, вызовется при настройке через функцию config
+- `onMount` - функция, вызовется при присоединении к DOM
+- Другие значения будут добавлены как свойства
+
 ```js
 /**
  * Создать компонент и поместить его в переменную $root
@@ -18,22 +47,6 @@ EL(tag, data = {}, svg = false);
  * @param {string} tag html tag элемента
  * @param {object} data параметры
  * @returns {Node}
- * tag {string} - тег html элемента. Если 'svg' - включится режим SVG на детей
- * context {object} - контекст для параметра 'var' и вызовов, прокидывается в детей. Если указан явно как null - прерывает проброс
- * parent - {Element} добавляет компонент к указанному элементу
- * text {string} - добавить в textContent
- * html {string} - добавить в innerHTML
- * class {string | Array} - добавить в className
- * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
- * push {array} - добавить к указанному массиву
- * var | $ {string} - создаёт переменную $имя в указанном контексте
- * events {object} - добавляет addEventListener'ы {event: e => {}}
- * children/children_r - массив {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
- * child/child_r - {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
- * attrs {object} - добавить аттрибуты (через setAttribute)
- * props {object} - добавить свойства (как el[prop])
- * also {function} - вызвать с текущим компонентом: also(el) { console.log(el); }
- * всё остальное будет добавлено как property
  */
 EL.make(tag, data = {});
 
@@ -118,8 +131,9 @@ StyledComponent(tag, data = {}, style = null, id = null, ext = false);
 StyledComponent.make(tag, data = {}, style = null, id = null, ext = false);
 ```
 
-## Пример
+## Примеры
 Создаст контейнер с двумя вложенными блоками текста и прикрепит к body
+
 ```js
 EL.make('div', {
     parent: document.body,
@@ -143,6 +157,46 @@ EL.make('div', {
 });
 ```
 
+Простой элемент с текстом и классами
+
+```js
+const box = new EL('div', {
+    text: 'Привет, мир!',
+    class: ['box', 'highlight'],
+    style: { padding: '10px', color: 'white', backgroundColor: 'blue' },
+    click() { console.log('Box кликнут!'); },
+    $: 'myBox'  // создаёт ctx.$myBox
+});
+
+document.body.appendChild(box.$root);
+console.log(box.$root);         // сам DOM-элемент
+console.log(EL.context.$myBox); // доступ через контекст
+```
+
+Полная замена классов и стилей
+
+```js
+EL.config(someElement, {
+    text: 'Обновлённый блок',
+    class_r: ['newClass', 'active'], // полностью заменяет классы
+    style_r: { color: 'red', fontWeight: 'bold' } // сброс и новые стили
+});
+```
+
+Вложенные дети и массив children
+
+```cpp
+EL.make('div', {
+    parent: document.body,
+    class: 'parent',
+    children: [
+        { tag: 'p', text: 'Первый ребёнок', class: 'child' },
+        { tag: 'p', text: 'Второй ребёнок', class: ['child', 'second'] },
+        'Просто текстовый узел'
+    ]
+});
+```
+
 Гораздо интереснее использовать в классе и передавать контекст. Параметр `$` создаст переменную с элементом с указанным именем + префикс `$`:
 
 ```js
@@ -166,6 +220,25 @@ let btn = new Button('kek');
 btn.$button; // элемент кнопки
 ```
 
+Использование контекста для $ и событий
+
+```js
+class MyComponent extends EL {
+    constructor() {
+        super('div', {
+            class: 'comp',
+            $: 'root',
+            children: [
+                { tag: 'button', text: 'Нажми меня', click() { console.log(this.$root); } }
+            ]
+        });
+    }
+}
+
+const comp = new MyComponent();
+document.body.appendChild(comp.$root);
+```
+
 Некоторые трюки
 
 ```js
@@ -194,3 +267,47 @@ EL.make('div', {
     class: ['some', 'class', foo && 'plus_me'], // добавить plus_me если foo - true
 });
 ```
+
+
+Создание SVG
+
+```js
+const svg = SVG.svg({ width: 200, height: 200 }, {
+    children: [
+        SVG.rect(10, 10, 50, 50, 5, 5, { fill: 'green' }),
+        SVG.circle(100, 100, 40, { fill: 'red' }),
+        SVG.line(0, 0, 200, 200, { stroke: 'blue', 'stroke-width': 2 })
+    ]
+});
+```
+
+Shadow DOM со стилями
+
+```js
+const shadowHost = EL.makeShadow('div', {
+    child: { tag: 'p', text: 'Текст внутри Shadow DOM', class: 'shadow-text' }
+}, `
+    .shadow-text { color: purple; font-weight: bold; }
+`);
+
+document.body.appendChild(shadowHost);
+```
+
+
+Прочее
+
+```js
+const state = new State({ count: 0 });
+
+let d = EL.make('div', {
+    text: state.get('count'),
+    also: el => state.subscribe(d => el.textContent = d.count),
+    style: { width: '100px', height: '50px', background: 'red' },
+    animate: { width: '200px', background: 'blue', duration: 500 },
+    onConfig: el => console.log('update'),
+    onMount: el => console.log('mount'),
+});
+
+setInterval(() => state.set('count', state.get('count') + 1), 1000);
+setTimeout(() => { document.body.appendChild(d) }, 2000);
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgyver/component",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Simple HTML&SVG element builder",
   "main": "./Component.js",
   "module": "./Component.js",