native-document 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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/data/Observable.js

@@ -66,7 +66,6 @@ Observable.init = function(value) {
     for(const key in value) {
         const itemValue = value[key];
         if(Validator.isJson(itemValue)) {
-            console.log(itemValue)
             data[key] = Observable.init(itemValue);
             continue;
         }

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/router/Router.js

@@ -174,7 +174,6 @@ export default function Router($options = {}) {
         $currentState.query = query;
         $currentState.path = path;
 
-        console.log($currentState.query)
         const middlewares = [...route.middlewares(), trigger];
         let currentIndex = 0;
         const request = { ...$currentState };
@@ -195,7 +194,7 @@ Router.routers = {};
 
 /**
  *
- * @param {{mode: 'memory'|'history'|'hash', name:string, entry: string}} options
+ * @param {{mode: 'memory'|'history'|'hash', name?:string, entry?: string}} options
  * @param {Function} callback
  * @param {Element} container
  */

package/src/router/RouterComponent.js

@@ -19,12 +19,10 @@ export function RouterComponent(router, container) {
         const { route, params, query, path } = state;
         if($cache.has(path)) {
             const cacheNode = $cache.get(path);
-            console.log(cacheNode);
             updateContainer(cacheNode);
             return;
         }
-        const Component = route.component()
-        console.log({ params, query })
+        const Component = route.component();
         const node = Component({ params, query });
         $cache.set(path, node);
         updateContainer(node);

package/src/utils/debug-manager.js

@@ -1,8 +1,5 @@
-// Build configuration
-const isProd = process.env.NODE_ENV === 'production';
-
 const DebugManager = {
-    enabled: !isProd,
+    enabled: false,
 
     enable() {
         this.enabled = true;
@@ -13,7 +10,7 @@ const DebugManager = {
         this.enabled = false;
     },
 
-    log: isProd ? () => {} : function(category, message, data) {
+    log(category, message, data) {
         if (!this.enabled) return;
         console.group(`🔍 [${category}] ${message}`);
         if (data) console.log(data);
@@ -21,12 +18,12 @@ const DebugManager = {
         console.groupEnd();
     },
 
-    warn: isProd ? () => {} : function(category, message, data) {
+    warn(category, message, data) {
         if (!this.enabled) return;
         console.warn(`⚠️ [${category}] ${message}`, data);
     },
 
-    error: isProd ? () => {} : function(category, message, error) {
+    error(category, message, error) {
         console.error(`❌ [${category}] ${message}`, error);
     }
 };

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,40 @@ 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)) {
+        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
@@ -62,22 +96,18 @@ export default function AttributesWrapper(element, attributes) {
     Validator.validateAttributes(attributes);
 
     if(!Validator.isObject(attributes)) {
-        console.log(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'];