native-document 1.0.10 → 1.0.12

package/router.js

@@ -1,9 +1,11 @@
 
 import Router from "./src/router/Router.js";
+import {RouteParamPatterns} from "./src/router/Route.js";
 import { Link } from './src/router/link.js';
 
 
 export {
+    RouteParamPatterns,
     Router,
     Link
 }

package/src/data/MemoryManager.js

@@ -5,10 +5,15 @@ const MemoryManager = (function() {
 
     let $nexObserverId = 0;
     const $observables = new Map();
-    const $registry = new FinalizationRegistry((heldValue) => {
-        DebugManager.log('MemoryManager', '🧹 Auto-cleanup observable:', heldValue);
-        heldValue.listeners.splice(0);
-    })
+    let $registry = null;
+    try {
+        $registry = new FinalizationRegistry((heldValue) => {
+            DebugManager.log('MemoryManager', '🧹 Auto-cleanup observable:', heldValue);
+            heldValue.listeners.splice(0);
+        });
+    } catch (e) {
+        DebugManager.warn('MemoryManager', 'FinalizationRegistry not supported, observables will not be cleaned automatically');
+    }
 
     return {
         /**
@@ -24,10 +29,15 @@ const MemoryManager = (function() {
                 id: id,
                 listeners
             };
-            $registry.register(observable, heldValue);
+            if($registry) {
+                $registry.register(observable, heldValue);
+            }
             $observables.set(id, new WeakRef(observable));
             return id;
         },
+        getObservableById(id) {
+            return $observables.get(id)?.deref();
+        },
         cleanup() {
             for (const [_, weakObservableRef] of $observables) {
                 const observable = weakObservableRef.deref();

package/src/data/Observable.js

@@ -14,18 +14,31 @@ export function Observable(value) {
     return new ObservableItem(value);
 }
 
-
 Observable.computed = function(callback, dependencies = []) {
     const initialValue = callback();
     const observable = new ObservableItem(initialValue);
 
-    const updatedValue = throttle(() => observable.set(callback()), 10, { debounce: true });
+    const updatedValue = () => observable.set(callback());
 
     dependencies.forEach(dependency => dependency.subscribe(updatedValue));
 
     return observable;
 };
 
+/**
+ *
+ * @param id
+ * @returns {ObservableItem|null}
+ */
+Observable.getById = function(id) {
+    const item = MemoryManager.getObservableById(parseInt(id));
+    if(!item) {
+        throw new NativeDocumentError('Observable.getById : No observable found with id ' + id);
+    }
+    return item;
+};
+
+
 /**
  *
  * @param {ObservableItem} observable

package/src/data/ObservableChecker.js

@@ -17,6 +17,9 @@ export default function ObservableChecker($observable, $checker) {
     this.val = function() {
         return $checker && $checker($observable.val());
     };
+    this.check = function(callback) {
+        return $observable.check(() => callback(this.val()));
+    };
 
     this.set = function(value) {
         return $observable.set(value);

package/src/data/ObservableItem.js

@@ -109,4 +109,8 @@ export default function ObservableItem(value) {
         }
     })
 
+    this.toString = function() {
+        return   '{{#ObItem::(' +$memoryId+ ')}}';
+    };
+
 }

package/src/data/Store.js

@@ -11,7 +11,7 @@ export const Store = (function() {
          * @returns {ObservableItem}
          */
         use(name) {
-            const {observer: originalObserver, followers } = $stores.get(name);
+            const {observer: originalObserver, subscribers } = $stores.get(name);
             const observerFollower = Observable(originalObserver.val());
             const unSubscriber = originalObserver.subscribe(value => observerFollower.set(value));
             const updaterUnsubscriber = observerFollower.subscribe(value => originalObserver.set(value));
@@ -20,7 +20,7 @@ export const Store = (function() {
                 updaterUnsubscriber();
                 observerFollower.cleanup();
             };
-            followers.add(observerFollower);
+            subscribers.add(observerFollower);
 
             return observerFollower;
         },
@@ -39,7 +39,7 @@ export const Store = (function() {
          */
         create(name, value) {
             const observer = Observable(value);
-            $stores.set(name, { observer, followers: new Set()});
+            $stores.set(name, { observer, subscribers: new Set()});
             return observer;
         },
         /**
@@ -54,9 +54,9 @@ export const Store = (function() {
         /**
          *
          * @param {string} name
-         * @returns {{observer: ObservableItem, followers: Set}}
+         * @returns {{observer: ObservableItem, subscribers: Set}}
          */
-        getWithFollowers(name) {
+        getWithSubscribers(name) {
             return $stores.get(name);
         },
         /**
@@ -67,7 +67,7 @@ export const Store = (function() {
             const item = $stores.get(name);
             if(!item) return;
             item.observer.cleanup();
-            item.followers.forEach(follower => follower.destroy());
+            item.subscribers.forEach(follower => follower.destroy());
             item.observer.clear();
         }
     };

package/src/elements/anchor.js

@@ -10,7 +10,7 @@ const getChildAsNode = (child) => {
     if(Validator.isElement(child)) {
         return child;
     }
-    return createTextNode(String(child))
+    return createTextNode(child)
 }
 
 export default function Anchor(name) {

package/src/router/Router.js

@@ -9,7 +9,7 @@ import MemoryRouter from "./modes/MemoryRouter.js";
 import DebugManager from "../utils/debug-manager.js";
 import {RouterComponent} from "./RouterComponent.js";
 
-const DEFAULT_ROUTER_NAME = 'default';
+export const DEFAULT_ROUTER_NAME = 'default';
 
 /**
  *
@@ -209,21 +209,21 @@ Router.create = function(options, callback) {
 
     router.init(options.entry);
 
-    return {
-        mount: (container) => {
-            if(Validator.isString(container)) {
-                const mountContainer = document.querySelector(container);
-                if(!mountContainer) {
-                    throw new RouterError(`Container not found for selector: ${container}`);
-                }
-                container = mountContainer;
-            } else if(!Validator.isElement(container)) {
-                throw new RouterError('Container must be a string or an Element');
+    router.mount = function(container) {
+        if(Validator.isString(container)) {
+            const mountContainer = document.querySelector(container);
+            if(!mountContainer) {
+                throw new RouterError(`Container not found for selector: ${container}`);
             }
-
-            RouterComponent(router, container);
+            container = mountContainer;
+        } else if(!Validator.isElement(container)) {
+            throw new RouterError('Container must be a string or an Element');
         }
+
+        return RouterComponent(router, container);
     };
+
+    return router;
 };
 
 Router.get = function(name) {

package/src/router/link.js

@@ -1,20 +1,23 @@
 import Validator from "../utils/validator.js";
 import {Link as NativeLink} from "../../elements.js";
-import Router from "./Router.js";
+import Router, {DEFAULT_ROUTER_NAME} from "./Router.js";
 import RouterError from "../errors/RouterError.js";
 
 
-export function Link(attributes, children){
-    const target = attributes.to || attributes.href;
+export function Link(options, children){
+    const { to, href, ...attributes } = options;
+    const target = to || href;
     if(Validator.isString(target)) {
         const router = Router.get();
         return NativeLink({ ...attributes, href: target}, children).nd.on.prevent.click(() => {
             router.push(target);
         });
     }
-    const router = Router.get(target.router);
+    const routerName = target.router || DEFAULT_ROUTER_NAME;
+    const router = Router.get(routerName);
+    console.log(routerName)
     if(!router) {
-        throw new RouterError('Router not found "'+target.router+'" for link "'+target.name+'"');
+        throw new RouterError('Router not found "'+routerName+'" for link "'+target.name+'"');
     }
     const url = router.generateUrl(target.name, target.params, target.query);
     return NativeLink({ ...attributes, href: url }, children).nd.on.prevent.click(() => {

package/src/utils/prototypes.js

@@ -29,4 +29,17 @@ String.prototype.use = function(args) {
             return data;
         });
     }, Object.values(args));
+};
+
+String.prototype.resolveObservableTemplate = function() {
+    if(!Validator.containsObservableReference(this)) {
+        return this;
+    }
+    return this.split(/(\{\{#ObItem::\([0-9]+\)\}\})/g).filter(Boolean).map((value) => {
+        if(!Validator.containsObservableReference(value)) {
+            return value;
+        }
+        const [_, id] = value.match(/\{\{#ObItem::\(([0-9]+)\)\}\}/);
+        return Observable.getById(id);
+    });
 }

package/src/utils/validator.js

@@ -70,6 +70,11 @@ const Validator = {
 
         return children;
     },
+    /**
+     * Check if the data contains observables.
+     * @param {Array|Object} data
+     * @returns {boolean}
+     */
     containsObservables(data) {
         if(!data) {
             return false;
@@ -77,6 +82,17 @@ const Validator = {
         return Validator.isObject(data)
             && Object.values(data).some(value => Validator.isObservable(value));
     },
+    /**
+     * Check if the data contains an observable reference.
+     * @param {string} data
+     * @returns {boolean}
+     */
+    containsObservableReference(data) {
+        if(!data || typeof data !== 'string') {
+            return false;
+        }
+        return /\{\{#ObItem::\([0-9]+\)\}\}/.test(data);
+    },
     validateAttributes(attributes) {
         if (!attributes || typeof attributes !== 'object') {
             return attributes;

package/src/wrappers/AttributesWrapper.js

@@ -1,6 +1,7 @@
 import Validator from "../utils/validator";
 import NativeDocumentError from "../errors/NativeDocumentError";
 import {BOOLEAN_ATTRIBUTES} from "./constants.js";
+import {Observable} from "../data/Observable";
 
 /**
  *
@@ -124,7 +125,16 @@ export default function AttributesWrapper(element, attributes) {
 
     for(let key in attributes) {
         const attributeName = key.toLowerCase();
-        const value = attributes[attributeName];
+        let value = attributes[attributeName];
+        if(Validator.isString(value) && Validator.isFunction(value.resolveObservableTemplate)) {
+            value = value.resolveObservableTemplate();
+            if(Validator.isArray(value)) {
+                const observables = value.filter(item => Validator.isObservable(item));
+                value = Observable.computed(() => {
+                    return value.map(item => Validator.isObservable(item) ? item.val() : item).join(' ') || ' ';
+                }, observables);
+            }
+        }
         if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
             bindBooleanAttribute(element, attributeName, value);
             continue;

package/src/wrappers/HtmlElementWrapper.js

@@ -117,6 +117,9 @@ export const ElementCreator = {
         const childrenArray = Array.isArray(children) ? children : [children];
         childrenArray.forEach(child => {
             if (child === null) return;
+            if(Validator.isString(child) && Validator.isFunction(child.resolveObservableTemplate)) {
+                child = child.resolveObservableTemplate();
+            }
             if(Validator.isFunction(child)) {
                 this.processChildren(child(), parent);
                 return;
@@ -195,7 +198,7 @@ export default function HtmlElementWrapper(name, customWrapper) {
         } catch (error) {
             DebugManager.error('ElementCreation', `Error creating ${$tagName}`, error);
         }
-    }
+    };
 
     builder.hold = (children, attributes) => (() => builder(children, attributes));