@alexgyver/component 1.2.9 → 1.3.0

package/Component.js

@@ -89,8 +89,9 @@ export class Component {
                 case 'parent': if (val) 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': case 'children_r': el.replaceChildren();
+                case 'child_r': el.replaceChildren(); // fall
                 case 'child': addChild(val); break;
+                case 'children_r': el.replaceChildren(); // fall
                 case 'children': for (const obj of val) addChild(obj); break;
                 case 'style':
                     if (typeof val === 'string') el.style.cssText += (val + ';');
@@ -222,6 +223,19 @@ export class StyledComponent extends Component {
     }
 }
 
+export class SVG {
+    static svg = (attrs = {}, props = {}) => SVG._make('svg', attrs, props);
+    static rect = (x, y, w, h, rx, ry, attrs = {}, props = {}) => SVG._make('rect', { ...attrs, x: x, y: y, width: w, height: h, rx: rx, ry: ry }, props);
+    static circle = (x, y, r, attrs = {}, props = {}) => SVG._make('circle', { ...attrs, cx: x, cy: y, r: r }, props);
+    static line = (x1, y1, x2, y2, attrs = {}, props = {}) => SVG._make('line', { ...attrs, x1: x1, y1: y1, x2: x2, y2: y2 }, props);
+    static polyline = (points, attrs = {}, props = {}) => SVG._make('polyline', { ...attrs, points: points }, props);
+    static polygon = (points, attrs = {}, props = {}) => SVG._make('polygon', { ...attrs, points: points }, props);
+    static path = (d, attrs = {}, props = {}) => SVG._make('path', { ...attrs, d: d }, props);
+    static text = (text, x, y, attrs = {}, props = {}) => SVG._make('text', { ...attrs, x: x, y: y }, { ...props, text: text });
+
+    static _make = (tag, attrs = {}, props = {}) => Component.makeSVG(tag, { attrs: { ...attrs }, ...props });
+}
+
 export async function waitRender(elm, cb = null, ctx = window) {
     return new Promise(res => {
         let e = elm;

package/README.md

@@ -1,5 +1,5 @@
 # Component.js
-Библиотека для создания и настройки DOM элементов как JS объектов
+Библиотека для создания и настройки DOM/SVG элементов как JS объектов
 
 > npm i @alexgyver/component
 
@@ -66,6 +66,18 @@ Component.makeArray(arr);
 Component.makeArraySVG(arr);
 ```
 
+### SVG
+```js
+SVG.svg(attrs = {}, props = {});
+SVG.rect(x, y, w, h, rx, ry, attrs = {}, props = {});
+SVG.circle(x, y, r, attrs = {}, props = {});
+SVG.line(x1, y1, x2, y2, attrs = {}, props = {});
+SVG.polyline(points, attrs = {}, props = {});
+SVG.polygon(points, attrs = {}, props = {});
+SVG.path(d, attrs = {}, props = {});
+SVG.text(text, x, y, attrs = {}, props = {});
+```
+
 ### Sheet
 ```js
 /**

package/package.json

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