upstream 0.3.1

CypherPotato · Nov 27, 2024 · cae0776 · cae0776
1 parent a23af00
commit cae0776
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 50 deletions.
diff --git a/dist/el.js b/dist/el.js
@@ -31,7 +31,7 @@
   function setAttributeClasses(element, classes) {
     var classList;
     if (Array.isArray(classes)) {
-      classList = classes;
+      classList = classes.filter((n) => n != false && n != null);
     } else if (typeof classes === "string") {
       classList = classes.split(" ");
     } else {
@@ -99,12 +99,18 @@
     for (const attr of Object.entries(attributes)) {
       const name = attr[0];
       const value = attr[1];
-      if (name == "slot" && value instanceof NodeList) {
+      if (value === false || value == null) {
+        continue;
+      } else if (name == "slot" && value instanceof NodeList) {
         continue;
       } else if (attributeMap[name]) {
         attributeMap[name](value);
       } else {
-        element.setAttribute(name, value);
+        if (value === true) {
+          element.setAttribute(name, name);
+        } else {
+          element.setAttribute(name, value);
+        }
       }
     }
   }
@@ -152,20 +158,26 @@
   }
   var el = function() {
     function setArgElement(arg, element) {
-      if (arg == null) {
+      const argType = typeof arg;
+      if (arg == null || arg == false) {
         return;
-      } else if (arg instanceof HTMLElement) {
+      } else if (arg instanceof Node) {
         element.appendChild(arg);
-      } else if (typeof arg === "string") {
+      } else if (argType === "string" || argType === "number") {
         element.appendChild(document.createTextNode(arg));
-      } else if (typeof arg === "object") {
+      } else if (argType[Symbol.iterator] === "function") {
+        for (const item of arg)
+          element.appendChild(item);
+      } else if (argType === "object") {
         setElementAttributesObj(element, arg);
+      } else {
+        console.warn("el.js: given an unknown argument type for el() constructor for element " + element.tagName + ": " + typeof arg);
       }
     }
     ;
     var result;
     if (arguments.length === 0) {
-      console.error("el() requires at least one argument");
+      console.error("el.js: el() requires at least one argument");
       result = null;
     } else if (arguments.length === 1) {
       result = createElementFromEmmet(arguments[0]);
@@ -191,6 +203,9 @@
     div.innerHTML = e.trim();
     return div.childNodes;
   };
+  el.text = function(text) {
+    return document.createTextNode(text);
+  };
   el.defineComponent = defineComponent;
   el.scanComponents = renderComponents;
   var el_default = el;

diff --git a/dist/el.min.js b/dist/el.min.js
diff --git a/index.html b/index.html
@@ -7,35 +7,11 @@
 
         <script src="/dist/el.min.js"></script>
     </head>
-    
+
     <body>
         <script>
-            el.defineComponent('counter', function (attr) {
-                var count = attr.start ?? 0;
-                var textElement = el('p', getCurrentText());
-
-                function getCurrentText() {
-                    return `Current count: ${count}`;
-                }
-
-                function increment() {
-                    count++;
-                    textElement.innerText = getCurrentText();
-                }
-
-                function decrement() {
-                    count--;
-                    textElement.innerText = getCurrentText();
-                }
-
-                return el('.counter',
-                    el('button', { onClick: increment }, 'Increment'),
-                    el('button', { onClick: decrement }, 'Decrement'),
-                    textElement);
-            });
-
-            const myCounter = el('counter', { start: 10 });
-            document.body.appendChild(myCounter);
+            el.defineComponent('my-component', attr => el("div.component",
+                ...attr.slot));
         </script>
     </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,8 +1,14 @@
 {
     "name": "@cypherpotato/el",
-    "version": "0.3.0",
+    "version": "0.3.1",
     "description": "a tiny tool to create HTMLElements on the fly",
-    "keywords": ["dom", "element", "emmet", "html", "js"],
+    "keywords": [
+        "dom",
+        "element",
+        "emmet",
+        "html",
+        "js"
+    ],
     "author": "CypherPotato",
     "repository": {
         "type": "git",

diff --git a/src/component.js b/src/component.js
@@ -7,7 +7,7 @@ export function defineComponent(tagname, render) {
     if (__elCustomComponents.length == 0) {
         document.addEventListener('DOMContentLoaded', renderComponents);
     }
-
+    
     __elCustomComponents.push({ tagname: tagname.toUpperCase(), render: render });
 }
 
@@ -17,7 +17,7 @@ export function createComponentReplacement(component, element) {
 
     const newElement = component.render(elementAttrObj);
     setElementAttributesObj(newElement, elementAttrObj);
-    
+
     return newElement;
 }
 

diff --git a/src/el.js b/src/el.js
@@ -8,9 +8,11 @@ function setAttributeClasses(element, classes) {
     var classList;
 
     if (Array.isArray(classes)) {
-        classList = classes;
+        classList = classes.filter(n => n != false && n != null);
+
     } else if (typeof classes === 'string') {
         classList = classes.split(' ');
+
     } else {
         classList = [];
     }
@@ -89,14 +91,21 @@ export function setElementAttributesObj(element, attributes) {
         const name = attr[0];
         const value = attr[1];
 
-        if (name == 'slot' && value instanceof NodeList) {
+        if (value === false || value == null) {
+            continue;
+
+        } else if (name == 'slot' && value instanceof NodeList) {
             continue;
 
         } else if (attributeMap[name]) {
             attributeMap[name](value);
 
         } else {
-            element.setAttribute(name, value);
+            if (value === true) {
+                element.setAttribute(name, name);
+            } else {
+                element.setAttribute(name, value);
+            }
         }
     }
 }
@@ -107,8 +116,10 @@ function createElementFromEmmet(emmetString) {
     var doc = document.createElement(parsed.tagName);
     if (parsed.id)
         doc.id = parsed.id;
+
     for (const className of parsed.classList)
         doc.classList.add(className);
+
     for (const [key, value] of Object.entries(parsed.attributes))
         doc.setAttribute(key, value);
 
@@ -159,23 +170,38 @@ function parseEmmetString(emmetString) {
 const el = function () {
 
     function setArgElement(arg, element) {
-        if (arg == null) {
+
+        const argType = typeof arg;
+
+        // skip false, null
+        if (arg == null || arg == false) {
             return;
 
-        } else if (arg instanceof HTMLElement) {
+            // node, HTMLElement
+        } else if (arg instanceof Node) {
             element.appendChild(arg);
-
-        } else if (typeof arg === 'string') {
-            element.appendChild(document.createTextNode(arg));
 
-        } else if (typeof arg === 'object') {
+            // strings
+        } else if (argType === 'string' || argType === 'number') {
+            element.appendChild(document.createTextNode(arg));
+
+            // arrays, NodeList, iterables
+        } else if (argType[Symbol.iterator] === 'function') {
+            for (const item of arg)
+                element.appendChild(item);
+
+            // object (attributes)
+        } else if (argType === 'object') {
             setElementAttributesObj(element, arg);
+
+        } else {
+            console.warn('el.js: given an unknown argument type for el() constructor for element ' + element.tagName + ': ' + typeof arg);
         }
     };
 
     var result;
     if (arguments.length === 0) {
-        console.error('el() requires at least one argument');
+        console.error('el.js: el() requires at least one argument');
         result = null;
 
     } else if (arguments.length === 1) {
@@ -209,6 +235,10 @@ el.raw = function (e) {
     return div.childNodes;
 };
 
+el.text = function (text) {
+    return document.createTextNode(text);
+};
+
 el.defineComponent = defineComponent;
 el.scanComponents = renderComponents;