native-document 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/readme.md

@@ -32,6 +32,16 @@ curl -o native-document.min.js https://raw.githubusercontent.com/afrocodeur/nati
 <script src="https://cdn.jsdelivr.net/gh/afrocodeur/native-document@latest/dist/native-document.min.js"></script>
 ```
 
+```bash
+#Use degit 
+
+npx degit afrocodeur/native-document-vite my-project
+cd my-project
+npm install
+npm start
+```
+
+
 
 ### Basic Example
 

package/src/elements/content-formatter.js

@@ -2,7 +2,7 @@ import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
 
 export const Div = HtmlElementWrapper('div');
 export const Span = HtmlElementWrapper('span');
-export const Label = HtmlElementWrapper('span');
+export const Label = HtmlElementWrapper('label');
 export const P = HtmlElementWrapper('p');
 export const Paragraph = P;
 export const Strong = HtmlElementWrapper('strong');

package/src/elements/control/show-if.js

@@ -11,7 +11,7 @@ import DebugManager from "../../utils/debug-manager.js";
  * @param {string|null} comment
  * @returns {DocumentFragment}
  */
-export const ShowIf = function(condition, child, comment) {
+export const ShowIf = function(condition, child, comment = null) {
     if(!(Validator.isObservable(condition))) {
         return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
     }

package/src/wrappers/AttributesWrapper.js

@@ -1,6 +1,6 @@
 import Validator from "../utils/validator";
 import NativeDocumentError from "../errors/NativeDocumentError";
-
+import {BOOLEAN_ATTRIBUTES} from "./constants.js";
 
 /**
  *
@@ -52,6 +52,43 @@ function bindStyleAttribute(element, data) {
     }
 }
 
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {string} attributeName
+ * @param {boolean|number|Observable} value
+ */
+function bindBooleanAttribute(element, attributeName, value) {
+    element[attributeName] = Boolean(Validator.isObservable(value) ? value.val() : value);
+    if(Validator.isObservable(value)) {
+        if(['checked'].includes(attributeName)) {
+            element.addEventListener('input', () => value.set(element[attributeName]));
+        }
+        value.subscribe(newValue => {
+            element[attributeName] = Boolean(newValue);
+        });
+    }
+}
+
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {string} attributeName
+ * @param {Observable} value
+ */
+function bindAttributeWithObservable(element, attributeName, value) {
+    value.subscribe(newValue => element.setAttribute(attributeName, newValue));
+    element.setAttribute(attributeName, value.val());
+    if(attributeName === 'value') {
+        if(['checkbox', 'radio'].includes(element.type)) {
+            element.addEventListener('input', () => value.set(element.checked));
+        } else {
+            element.addEventListener('input', () => value.set(element.value));
+        }
+    }
+}
+
 /**
  *
  * @param {HTMLElement} element
@@ -65,18 +102,15 @@ export default function AttributesWrapper(element, attributes) {
         throw new NativeDocumentError('Attributes must be an object');
     }
 
-    for(let attributeName in attributes) {
+    for(let key in attributes) {
+        const attributeName = key.toLowerCase();
         const value = attributes[attributeName];
+        if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
+            bindBooleanAttribute(element, attributeName, value);
+            continue;
+        }
         if(Validator.isObservable(value)) {
-            value.subscribe(newValue => element.setAttribute(attributeName, newValue));
-            element.setAttribute(attributeName, value.val());
-            if(attributeName === 'value') {
-                if(['checkbox', 'radio'].includes(element.type)) {
-                    element.addEventListener('input', () => value.set(element.checked));
-                } else {
-                    element.addEventListener('input', () => value.set(element.value));
-                }
-            }
+            bindAttributeWithObservable(element, attributeName, value);
             continue;
         }
         if(attributeName === 'class' && Validator.isJson(value)) {

package/src/wrappers/constants.js

@@ -0,0 +1,2 @@
+
+export const BOOLEAN_ATTRIBUTES = ['checked', 'selected', 'disabled', 'readonly', 'required', 'autofocus', 'multiple', 'autocomplete', 'hidden', 'contenteditable', 'spellcheck', 'translate', 'draggable', 'async', 'defer', 'autoplay', 'controls', 'loop', 'muted', 'download', 'reversed', 'open', 'default', 'formnovalidate', 'novalidate', 'scoped', 'itemscope', 'allowfullscreen', 'allowpaymentrequest', 'playsinline'];