native-document 1.0.13 → 1.0.15

package/docs/routing.md

@@ -172,20 +172,20 @@ Add new entries to browser history. **Specify router name** when using multiple
 
 ```javascript
 const NavigationExample = Div([
-    Button('Go to About').nd.on.click(() => {
+    Button('Go to About').nd.onClick(() => {
         Router.push('/about'); // Uses default router
     }),
     
-    Button('Go to About (Main Router)').nd.on.click(() => {
+    Button('Go to About (Main Router)').nd.onClick(() => {
         Router.push('/about', 'main'); // Uses named router
     }),
     
-    Button('View User 123').nd.on.click(() => {
+    Button('View User 123').nd.onClick(() => {
         // Navigate in specific router
         Router.push('/users/123', 'app');
     }),
     
-    Button('Search Products').nd.on.click(() => {
+    Button('Search Products').nd.onClick(() => {
         Router.push('/search?term=laptop&category=electronics', 'main');
     })
 ]);
@@ -213,12 +213,12 @@ Navigate through browser history:
 
 ```javascript
 const HistoryControls = Div([
-    Button('Go Back').nd.on.click(() => Router.back()), // Default router
-    Button('Go Forward').nd.on.click(() => Router.forward()), // Default router
+    Button('Go Back').nd.onClick(() => Router.back()), // Default router
+    Button('Go Forward').nd.onClick(() => Router.forward()), // Default router
     
     // Navigate specific router's history
-    Button('Back in Main').nd.on.click(() => Router.back('main')),
-    Button('Forward in Admin').nd.on.click(() => Router.forward('admin'))
+    Button('Back in Main').nd.onClick(() => Router.back('main')),
+    Button('Forward in Admin').nd.onClick(() => Router.forward('admin'))
 ]);
 ```
 
@@ -245,18 +245,18 @@ const blogUrl = router.generateUrl('blog.post', { category: 'javascript', slug:
 
 ```javascript
 const navigation = Div([
-    Button('Home').nd.on.click(() => 
+    Button('Home').nd.onClick(() => 
         Router.push({ name: 'home' }) // Uses router containing this route
     ),
     
-    Button('My Profile').nd.on.click(() => 
+    Button('My Profile').nd.onClick(() => 
         Router.push({ 
             name: 'user.profile', 
             params: { id: currentUser.id } 
         }, 'main') // Specify router if needed
     ),
     
-    Button('Latest Post').nd.on.click(() => 
+    Button('Latest Post').nd.onClick(() => 
         Router.push({
             name: 'blog.post',
             params: { category: 'news', slug: 'latest-update' },
@@ -467,11 +467,11 @@ const mainRouter = Router.routers.main;
 const adminRouter = Router.routers.admin;
 
 // Cross-router navigation
-Button('Go to Admin').nd.on.click(() => {
+Button('Go to Admin').nd.onClick(() => {
     Router.push('/admin/users', 'admin'); // Specify router name
 });
 
-Button('Back to Main').nd.on.click(() => {
+Button('Back to Main').nd.onClick(() => {
     Router.push('/', 'main'); // Navigate in main router
 });
 ```
@@ -707,7 +707,7 @@ const ProductDetail = ({ params, query }) => {
             P(p.description),
             
             // Add to cart with redirect to login if needed
-            Button('Add to Cart').nd.on.click(() => {
+            Button('Add to Cart').nd.onClick(() => {
                 if (!isAuthenticated()) {
                     Router.push({
                         name: 'login',
@@ -773,22 +773,22 @@ const FormNavigation = (currentStep, formData) => {
         // Navigation buttons
         Div({ class: 'nav-buttons' }, [
             ShowIf(Observable(currentIndex > 0), 
-                Button('Previous').nd.on.click(() => {
+                Button('Previous').nd.onClick(() => {
                     const prevStep = steps[currentIndex - 1];
                     Router.push({ name: `form.${prevStep}` });
                 })
             ),
             
             ShowIf(Observable(currentIndex < steps.length - 1),
-                Button('Next').nd.on.click(() => {
+                Button('Next').nd.onClick(() => {
                     const nextStep = steps[currentIndex + 1];
                     Router.push({ name: `form.${nextStep}` });
                 })
             ),
             
             ShowIf(Observable(currentIndex === steps.length - 1),
-                Button('Submit').nd.on.click(() => {
-                    submitForm(formData.$val());
+                Button('Submit').nd.onClick(() => {
+                    submitForm(formData.$value);
                 })
             )
         ])
@@ -811,7 +811,7 @@ const FormNavigation = (currentStep, formData) => {
 
 Explore these related topics to build complete applications:
 
-- **[State Management](docs/state-management.md)** - Global state patterns
-- **[Lifecycle Events](docs/lifecycle-events.md)** - Lifecycle events
-- **[Memory Management](docs/memory-management.md)** - Memory management
-- **[Anchor](docs/anchor.md)** - Anchor
+- **[State Management](state-management.md)** - Global state patterns
+- **[Lifecycle Events](lifecycle-events.md)** - Lifecycle events
+- **[Memory Management](memory-management.md)** - Memory management
+- **[Anchor](anchor.md)** - Anchor

package/docs/state-management.md

@@ -95,7 +95,7 @@ const UserMenu = () => {
     return Nav([
         ShowIf(user.check(u => u.isLoggedIn), [
             Link({ to: '/profile' }, 'My Profile'),
-            Button('Logout').nd.on.click(() => {
+            Button('Logout').nd.onClick(() => {
                 user.set({ ...user.$value, isLoggedIn: false });
             })
         ])
@@ -126,7 +126,7 @@ Modify store state using the returned observable's methods:
 const ThemeToggle = () => {
     const theme = Store.use('theme');
     
-    return Button('Toggle Theme').nd.on.click(() => {
+    return Button('Toggle Theme').nd.onClick(() => {
         const current = theme.$value;
         theme.set(current === 'light' ? 'dark' : 'light');
     });
@@ -154,7 +154,7 @@ const LoginForm = () => {
     return Form([
         Input({ type: 'email', value: email, placeholder: 'Email' }),
         Input({ type: 'password', value: password, placeholder: 'Password' }),
-        Button('Login').nd.on.click(handleLogin)
+        Button('Login').nd.onClick(handleLogin)
     ]);
 };
 ```
@@ -187,9 +187,9 @@ const UserSettings = () => {
         Input({ 
             value: user.check(u => u.name),
             placeholder: 'Name'
-        }).nd.on.input(e => updateName(e.target.value)),
+        }).nd.onInput(e => updateName(e.target.value)),
         
-        Button('Dark Mode').nd.on.click(() => 
+        Button('Dark Mode').nd.onClick(() => 
             updatePreferences({ theme: 'dark' })
         )
     ]);
@@ -418,6 +418,6 @@ const createAppState = () => {
 
 Now that you understand state management, explore these related topics:
 
-- **[Lifecycle Events](docs/lifecycle-events.md)** - Lifecycle events
-- **[Memory Management](docs/memory-management.md)** - Memory management
-- **[Anchor](docs/anchor.md)** - Anchor
+- **[Lifecycle Events](lifecycle-events.md)** - Lifecycle events
+- **[Memory Management](memory-management.md)** - Memory management
+- **[Anchor](anchor.md)** - Anchor

package/docs/validation.md

@@ -187,7 +187,5 @@ registerUser.args(
 
 ## Next Steps
 
-- **[Advanced Features](advanced-features.md)** - Error boundaries and debugging tools
-- **[API Reference](api-reference.md)** - Complete ArgTypes and validation API
 - **[Memory Management](memory-management.md)** - Debugging memory issues with validation
 - **[Lifecycle Events](lifecycle-events.md)** - Validate lifecycle callback arguments

package/index.js

@@ -1,4 +1,5 @@
-export { default as HtmlElementWrapper, ElementCreator } from './src/wrappers/HtmlElementWrapper'
+export { default as HtmlElementWrapper } from './src/wrappers/HtmlElementWrapper'
+export { ElementCreator } from './src/wrappers/ElementCreator'
 
 import './src/utils/prototypes.js';
 
@@ -6,6 +7,10 @@ export * from './src/utils/plugins-manager';
 export * from './src/utils/args-types';
 export * from './src/utils/validator'
 export * from './src/data/Observable';
+export * from './src/data/observable-helpers/array';
+export * from './src/data/observable-helpers/batch';
+export * from './src/data/observable-helpers/object';
+export * from './src/data/observable-helpers/computed';
 export * from './src/data/Store';
 import * as elements from './elements';
 import * as router from './router';

package/package.json

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

package/readme.md

@@ -30,7 +30,7 @@ const count = Observable(0);
 const App = Div({ class: 'app' }, [
     Div([ 'Count ', count]),
     // OR Div(`Count ${count}`),
-    Button('Increment').nd.on.click(() => count.set(count.val() + 1))
+    Button('Increment').nd.onClick(() => count.set(count.val() + 1))
 ]);
 
 document.body.appendChild(App);
@@ -91,7 +91,7 @@ const TodoApp = Div({ class: 'todo-app' }, [
     Input({ placeholder: 'Add new task...', value: newTodo }),
 
     // Add button
-    Button('Add Todo').nd.on.click(() => {
+    Button('Add Todo').nd.onClick(() => {
         if (newTodo.val().trim()) {
             todos.push({ id: Date.now(), text: newTodo.val(), done: false })
             newTodo.set('')
@@ -103,7 +103,7 @@ const TodoApp = Div({ class: 'todo-app' }, [
         Div({ class: 'todo-item' }, [
             Input({ type: 'checkbox', checked: todo.done }),
             `${todo.text}`,
-            Button('Delete').nd.on.click(() => todos.splice(index.val(), 1))
+            Button('Delete').nd.onClick(() => todos.splice(index.val(), 1))
         ]), /*item key (string | callback) */(item) => item),
 
     // Empty state
@@ -158,7 +158,7 @@ const App  = function() {
             class: { 'hidden': isVisible.check(v => !v) },
             style: { opacity: isVisible.check(v => v ? 1 : 0.2) }
         }, 'Content'),
-        Button('Toggle').nd.on.click(() => isVisible.set(v => !v)),
+        Button('Toggle').nd.onClick(() => isVisible.set(v => !v)),
     ]);
 };
 
@@ -191,6 +191,7 @@ When(condition)
 - **[Observables](docs/observables.md)** - Reactive state management
 - **[Elements](docs/elements.md)** - Creating and composing UI
 - **[Conditional Rendering](docs/conditional-rendering.md)** - Dynamic content
+- **[List Rendering](docs/list-rendering.md)** - List Rendering
 - **[Routing](docs/routing.md)** - Navigation and URL management
 - **[State Management](docs/state-management.md)** - Global state patterns
 - **[Lifecycle Events](docs/lifecycle-events.md)** - Lifecycle events

package/src/data/MemoryManager.js

@@ -1,40 +1,28 @@
 import DebugManager from "../utils/debug-manager";
+import Validator from "../utils/validator";
 
 
 const MemoryManager = (function() {
 
-    let $nexObserverId = 0;
+    let $nextObserverId = 0;
     const $observables = new Map();
-    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 {
         /**
          * Register an observable and return an id.
          *
          * @param {ObservableItem} observable
-         * @param {Function[]} listeners
+         * @param {Function} getListeners
          * @returns {number}
          */
-        register(observable, listeners) {
-            const id = ++$nexObserverId;
-            const heldValue = {
-                id: id,
-                listeners
-            };
-            if($registry) {
-                $registry.register(observable, heldValue);
-            }
+        register(observable) {
+            const id = ++$nextObserverId;
             $observables.set(id, new WeakRef(observable));
             return id;
         },
+        unregister(id) {
+            $observables.delete(id);
+        },
         getObservableById(id) {
             return $observables.get(id)?.deref();
         },

package/src/data/Observable.js

@@ -2,7 +2,7 @@ import ObservableItem from './ObservableItem';
 import Validator from "../utils/validator";
 import MemoryManager from "./MemoryManager";
 import NativeDocumentError from "../errors/NativeDocumentError";
-import {throttle} from "../utils/helpers.js";
+import {debounce} from "../utils/helpers.js";
 
 /**
  *
@@ -14,45 +14,6 @@ export function Observable(value) {
     return new ObservableItem(value);
 }
 
-/**
- *
- * @param {Function} callback
- * @param {Array|Function} dependencies
- * @returns {ObservableItem}
- */
-Observable.computed = function(callback, dependencies = []) {
-    const initialValue = callback();
-    const observable = new ObservableItem(initialValue);
-    const updatedValue = () => observable.set(callback());
-
-    if(Validator.isFunction(dependencies)) {
-        if(!Validator.isObservable(dependencies.$observer)) {
-            throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
-        }
-        dependencies.$observer.subscribe(updatedValue);
-        return observable;
-    }
-
-    dependencies.forEach(dependency => dependency.subscribe(updatedValue));
-
-    return observable;
-};
-
-Observable.batch = function(callback) {
-    const $observer = Observable(0);
-    const batch = function() {
-        if(Validator.isAsyncFunction(callback)) {
-            return (callback(...arguments)).then(() => {
-                $observer.trigger();
-            }).catch(error => { throw error; });
-        }
-        callback(...arguments);
-        $observer.trigger();
-    };
-    batch.$observer = $observer;
-    return batch;
-}
-
 /**
  *
  * @param id
@@ -66,7 +27,6 @@ Observable.getById = function(id) {
     return item;
 };
 
-
 /**
  *
  * @param {ObservableItem} observable
@@ -75,144 +35,6 @@ Observable.cleanup = function(observable) {
     observable.cleanup();
 };
 
-/**
- * Get the value of an observable or an object of observables.
- * @param {ObservableItem|Object<ObservableItem>} object
- * @returns {{}|*|null}
- */
-Observable.value = function(data) {
-    if(Validator.isObservable(data)) {
-        return data.val();
-    }
-    if(Validator.isProxy(data)) {
-        return data.$val();
-    }
-    if(Validator.isArray(data)) {
-        const result = [];
-        data.forEach(item => {
-            result.push(Observable.value(item));
-        });
-        return result;
-    }
-    return data;
-}
-
-/**
- *
- * @param {Object} value
- * @returns {Proxy}
- */
-Observable.init = function(value) {
-    const data = {};
-    for(const key in value) {
-        const itemValue = value[key];
-        if(Validator.isJson(itemValue)) {
-            data[key] = Observable.init(itemValue);
-            continue;
-        }
-        else if(Validator.isArray(itemValue)) {
-            data[key] = Observable.array(itemValue);
-            continue;
-        }
-        data[key] = Observable(itemValue);
-    }
-
-    const $val = function() {
-        const result = {};
-        for(const key in data) {
-            const dataItem = data[key];
-            if(Validator.isObservable(dataItem)) {
-                result[key] = dataItem.val();
-            } else if(Validator.isProxy(dataItem)) {
-                result[key] = dataItem.$val();
-            } else {
-                result[key] = dataItem;
-            }
-        }
-        return result;
-    };
-    const $clone = function() {
-
-    };
-
-    return new Proxy(data, {
-        get(target, property) {
-            if(property === '__isProxy__') {
-                return true;
-            }
-            if(property === '$val') {
-                return $val;
-            }
-            if(property === '$clone') {
-                return $clone;
-            }
-            if(target[property] !== undefined) {
-                return target[property];
-            }
-            return undefined;
-        },
-        set(target, prop, newValue) {
-            if(target[prop] !== undefined) {
-                target[prop].set(newValue);
-            }
-        }
-    })
-};
-
-Observable.object = Observable.init;
-Observable.json = Observable.init;
-Observable.update = function($target, data) {
-    for(const key in data) {
-        const targetItem = $target[key];
-        const newValue = data[key];
-
-        if(Validator.isObservable(targetItem)) {
-            if(Validator.isArray(newValue)) {
-                Observable.update(targetItem, newValue);
-                continue;
-            }
-            targetItem.set(newValue);
-            continue;
-        }
-        if(Validator.isProxy(targetItem)) {
-            Observable.update(targetItem, newValue);
-            continue;
-        }
-        $target[key] = newValue;
-    }
-};
-/**
- *
- * @param {Array} target
- * @returns {ObservableItem}
- */
-Observable.array = function(target) {
-    if(!Array.isArray(target)) {
-        throw new NativeDocumentError('Observable.array : target must be an array');
-    }
-    const observer = Observable(target);
-
-    const methods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
-
-    methods.forEach((method) => {
-        observer[method] = function(...values) {
-            const target = observer.val();
-            const result = target[method].apply(target, arguments);
-            observer.trigger();
-            return result;
-        };
-    });
-
-    const overrideMethods = ['map', 'filter', 'reduce', 'some', 'every', 'find'];
-    overrideMethods.forEach((method) => {
-        observer[method] = function(callback) {
-            return observer.val()[method](callback);
-        };
-    })
-
-    return observer;
-};
-
 /**
  * Enable auto cleanup of observables.
  * @param {Boolean} enable
@@ -229,5 +51,5 @@ Observable.autoCleanup = function(enable = false, options = {}) {
     });
 
     setInterval(() => MemoryManager.cleanObservables(threshold), interval);
-}
+};
 

package/src/data/ObservableChecker.js

@@ -7,28 +7,33 @@
 export default function ObservableChecker($observable, $checker) {
     this.observable = $observable;
     this.checker = $checker;
+    this.unSubscriptions = [];
+}
 
-    this.subscribe = function(callback) {
-        return $observable.subscribe((value) => {
-            callback && callback($checker(value));
-        });
-    };
+ObservableChecker.prototype.subscribe = function(callback) {
+    const unSubscribe = this.observable.subscribe((value) => {
+        callback && callback(this.checker(value));
+    });
+    this.unSubscriptions.push(unSubscribe);
+    return unSubscribe;
+};
 
-    this.val = function() {
-        return $checker && $checker($observable.val());
-    };
-    this.check = function(callback) {
-        return $observable.check(() => callback(this.val()));
-    };
+ObservableChecker.prototype.check = function(callback) {
+    return this.observable.check(() => callback(this.val()));
+}
 
-    this.set = function(value) {
-        return $observable.set(value);
-    };
-    this.trigger = function() {
-        return $observable.trigger();
-    }
+ObservableChecker.prototype.val = function() {
+    return this.checker && this.checker(this.observable.val());
+}
 
-    this.cleanup = function() {
-        return $observable.cleanup();
-    }
-}
+ObservableChecker.prototype.set = function(value) {
+    return this.observable.set(value);
+};
+
+ObservableChecker.prototype.trigger = function() {
+    return this.observable.trigger();
+};
+
+ObservableChecker.prototype.cleanup = function() {
+    return this.observable.cleanup();
+};