native-document 1.0.13 → 1.0.15

package/docs/conditional-rendering.md

@@ -23,10 +23,10 @@ The `ShowIf` function renders content only when the Observable condition is trut
 const user = Observable({ name: 'Alice', isLoggedIn: false });
 
 const App = Div([
-    Button('Login').nd.on.click(() => 
+    Button('Login').nd.onClick(() => 
         user.set({ ...user.val(), isLoggedIn: true })
     ),
-    Button('Logout').nd.on.click(() => 
+    Button('Logout').nd.onClick(() => 
         user.set({ ...user.val(), isLoggedIn: false })
     ),
     
@@ -65,8 +65,8 @@ const WeatherApp = Div([
     ShowIf(isCold, Div({ class: 'cold' }, '🧥 It\'s cold! Wear a jacket.')),
     ShowIf(isHot, Div({ class: 'hot' }, '☀️ It\'s hot! Stay hydrated.')),
     Div([
-        Button('-').nd.on.click(() => --temperature.$value),
-        Button('+').nd.on.click(() => ++temperature.$value),
+        Button('-').nd.onClick(() => --temperature.$value),
+        Button('+').nd.onClick(() => ++temperature.$value),
     ])
 ]);
 ```
@@ -110,7 +110,7 @@ ShowIf(condition.check(val => !val), content)
 const isDarkMode = Observable(false);
 
 const ThemeToggle = Div([
-    Button('Toggle Theme').nd.on.click(() => isDarkMode.set(!isDarkMode.val())),
+    Button('Toggle Theme').nd.onClick(() => isDarkMode.set(!isDarkMode.val())),
     
     Switch(isDarkMode,
         Div({ class: 'dark-indicator' }, '🌙 Dark Mode'),    // when true
@@ -166,7 +166,7 @@ const gameState = Observable({
 const GameDisplay = Match(gameState.check(state => state.phase), {
     menu: () => Div({ class: 'game-menu' }, [
         H1('Welcome to the Game'),
-        Button('Start Game').nd.on.click(() => 
+        Button('Start Game').nd.onClick(() => 
             gameState.set({ ...gameState.val(), phase: 'playing' })
         )
     ]),
@@ -174,17 +174,17 @@ const GameDisplay = Match(gameState.check(state => state.phase), {
     playing: () => Div({ class: 'game-ui' }, [
         Div(['Score: ', gameState.check(s => s.score)]),
         Div(['Level: ', gameState.check(s => s.level)]),
-        Button('Pause').nd.on.click(() => 
+        Button('Pause').nd.onClick(() => 
             gameState.set({ ...gameState.val(), phase: 'paused' })
         ),
-        Button('Game Over').nd.on.click(() =>
+        Button('Game Over').nd.onClick(() =>
             gameState.set({ ...gameState.val(), phase: 'gameOver' })
         )
     ]),
     
     paused: () => Div({ class: 'game-paused' }, [
         H2('Game Paused'),
-        Button('Resume').nd.on.click(() => 
+        Button('Resume').nd.onClick(() => 
             gameState.set({ ...gameState.val(), phase: 'playing' })
         )
     ]),
@@ -192,7 +192,7 @@ const GameDisplay = Match(gameState.check(state => state.phase), {
     gameOver: () => Div({ class: 'game-over' }, [
         H2('Game Over'),
         Div(['Final Score: ', gameState.check(s => s.score)]),
-        Button('Play Again').nd.on.click(() => 
+        Button('Play Again').nd.onClick(() => 
             gameState.set({ phase: 'menu', score: 0, level: 1 })
         )
     ])
@@ -275,7 +275,7 @@ const isValidEmail = formData.email.check(e =>
 const isValidPassword = formData.password.check(p => p.length >= 8);
 
 const passwordsMatch = Observable.computed(() => {
-    const data = formData.$val();
+    const data = formData.$value;
     return data.password === data.confirmPassword && data.password.length > 0;
 }, [formData.password, formData.confirmPassword]);
 
@@ -319,8 +319,8 @@ const RegistrationForm = Div({ class: 'registration-form' }, [
     
     // Submit button
     Switch(canSubmit,
-        Button('Create Account').nd.on.click(() => {
-            console.log('Creating account...', formData.$val());
+        Button('Create Account').nd.onClick(() => {
+            console.log('Creating account...', formData.$value);
         }),
         Button({ disabled: true, class: 'disabled' }, 'Create Account')
     )
@@ -347,20 +347,20 @@ const App = Div({ class: 'app' }, [
             // Authenticated header
             () => Div({ class: 'user-menu' }, [
                 Span(['Welcome, ', appState.user.val().name]),
-                Button('Settings').nd.on.click(() => 
+                Button('Settings').nd.onClick(() => 
                     appState.currentView.set('settings')
                 ),
-                Button('Logout').nd.on.click(() => {
+                Button('Logout').nd.onClick(() => {
                     appState.user.set(null);
                     appState.currentView.set('welcome');
                 })
             ]),
             // Guest header
             Div({ class: 'auth-buttons' }, [
-                Button('Sign In').nd.on.click(() => 
+                Button('Sign In').nd.onClick(() => 
                     appState.currentView.set('login')
                 ),
-                Button('Sign Up').nd.on.click(() => 
+                Button('Sign Up').nd.onClick(() => 
                     appState.currentView.set('register')
                 )
             ])
@@ -544,12 +544,12 @@ const requestState = Observable.object({
 });
 
 const DataView = Match(requestState.status, {
-    idle: Button('Load Data').nd.on.click(loadData),
+    idle: Button('Load Data').nd.onClick(loadData),
     loading: Div({ class: 'loading' }, 'Loading...'),
     success: () => DataDisplay(requestState.data.val()),
     error: () => Div({ class: 'error' }, [
         'Error: ', requestState.error,
-        Button('Retry').nd.on.click(loadData)
+        Button('Retry').nd.onClick(loadData)
     ])
 });
 ```
@@ -621,8 +621,9 @@ const StatusContent = Match(status, {
 
 Now that you understand conditional rendering, explore these related topics:
 
-- **[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
-- **[Memory Management](docs/memory-management.md)** - Memory management
-- **[Anchor](docs/anchor.md)** - Anchor
+- **[List Rendering](list-rendering.md)** - (ForEach | ForEachArray) and dynamic lists
+- **[Routing](routing.md)** - Navigation and URL management
+- **[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/core-concepts.md

@@ -145,15 +145,15 @@ const element = Div({
 const counter = Observable(0);
 
 const button = Button('Click me')
-    .nd.on.click(() => {
+    .nd.onClick(() => {
         counter.set(counter.val() + 1);
     });
 
 // Multiple events
 const input = Input()
-    .nd.on.focus(e => console.log('Focused'))
-    .nd.on.blur(e => console.log('Blurred'))
-    .nd.on.input(e => console.log('Value:', e.target.value));
+    .nd.onFocus(e => console.log('Focused'))
+    .nd.onBlur(e => console.log('Blurred'))
+    .nd.onInput(e => console.log('Value:', e.target.value));
 
 //Or
 const input = Input()
@@ -210,7 +210,7 @@ const items = Observable.array(['Apple', 'Banana']);
 const list = ForEach(items, (item) => 
     Div([
         item,
-        Button('Remove').nd.on.click(() => {
+        Button('Remove').nd.onClick(() => {
             // User action → State change → UI update
             const index = items.val().indexOf(item);
             items.splice(index, 1);
@@ -249,7 +249,7 @@ function UserCard(user) {
     return Div({ class: 'user-card' }, [
         Div({ class: 'name' }, user.name),
         Div({ class: 'email' }, user.email),
-        Button('Edit').nd.on.click(() => {
+        Button('Edit').nd.onClick(() => {
             // Handle edit
         })
     ]);
@@ -269,9 +269,9 @@ function Counter(initialValue = 0) {
     
     return Div({ class: 'counter' }, [
         Div(['Count: ', count]),
-        Button('-').nd.on.click(() => count.set(count.val() - 1)),
-        Button('+').nd.on.click(() => count.set(count.val() + 1)),
-        Button('Reset').nd.on.click(() => count.set(initialValue))
+        Button('-').nd.onClick(() => count.set(count.val() - 1)),
+        Button('+').nd.onClick(() => count.set(count.val() + 1)),
+        Button('Reset').nd.onClick(() => count.set(initialValue))
     ]);
 }
 
@@ -314,7 +314,7 @@ function TodoForm() {
     return Div([
         Input({ placeholder: 'Enter todo...', value: text }),
         Button('Add')
-            .nd.on.click(() => {
+            .nd.onClick(() => {
                 if (isValid.val()) {
                     // Add todo logic
                     text.set('');
@@ -353,7 +353,7 @@ function TodoList() {
     return ForEach(TodoStore.todos, (todo) => 
         Div([
             todo.text,
-            Button('Delete').nd.on.click(() => {
+            Button('Delete').nd.onClick(() => {
                 TodoStore.removeTodo(todo.id);
             })
         ])
@@ -503,11 +503,12 @@ const data = Observable('');
 
 Now that you understand NativeDocument's core concepts, explore these advanced topics:
 
-- **[Observables](docs/observables.md)** - Reactive state management
-- **[Elements](docs/elements.md)** - Creating and composing UI
-- **[Conditional Rendering](docs/conditional-rendering.md)** - Dynamic content
-- **[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
-- **[Memory Management](docs/memory-management.md)** - Memory management
-- **[Anchor](docs/anchor.md)** - Anchor
+- **[Observables](observables.md)** - Reactive state management
+- **[Elements](elements.md)** - Creating and composing UI
+- **[Conditional Rendering](conditional-rendering.md)** - Dynamic content
+- **[List Rendering](list-rendering.md)** - (ForEach | ForEachArray) and dynamic lists
+- **[Routing](routing.md)** - Navigation and URL management
+- **[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/elements.md

@@ -110,21 +110,21 @@ The `.nd` (NativeDocument) API provides a fluent interface for adding functional
 
 ```javascript
 const button = Button("Click me")
-  .nd.on.click(() => {
+  .nd.onClick(() => {
     console.log("Button clicked!");
   });
 
 // With attributes and events
 const styledButton = Button({ class: "btn" }, "Click me")
-  .nd.on.click(() => {
+  .nd.onClick(() => {
     console.log("Button clicked!");
   });
 
 // Multiple events
 const input = Input({ type: "text", placeholder: "Type here..." })
-  .nd.on.focus(() => console.log("Input focused"))
-  .nd.on.blur(() => console.log("Input blurred"))
-  .nd.on.input(event => console.log("Input value:", event.target.value));
+  .nd.onFocus(() => console.log("Input focused"))
+  .nd.onBlur(() => console.log("Input blurred"))
+  .nd.onInput(event => console.log("Input value:", event.target.value));
 
 // Or
 const input = Input({ type: "text", placeholder: "Type here..." })
@@ -136,7 +136,7 @@ const input = Input({ type: "text", placeholder: "Type here..." })
 
 // Prevent default behavior
 const form = Form()
-  .nd.on.prevent.submit(event => {
+  .nd.onPreventSubmit(event => {
     console.log("Form submitted without page reload");
     // Handle form submission
   });
@@ -225,7 +225,7 @@ const app = Div([
         .nd.ref(refs, "nameInput"), // Store reference as refs.nameInput
 
     Button("Focus Input")
-        .nd.on.click(() => {
+        .nd.onClick(() => {
         refs.nameInput.focus(); // Use the reference
     })
 ]);
@@ -240,7 +240,7 @@ const incrementButton = Button({
     class: "btn btn-primary",
     type: "button"
 }, "Increment")
-    .nd.on.click(() => {
+    .nd.onClick(() => {
         count.set(count.val() + 1);
     });
 
@@ -272,7 +272,7 @@ const errors = Observable.object({
 
 // Validation function
 const validateForm = () => {
-    const data = formData.$val();
+    const data = formData.$value;
     const newErrors = {};
 
     newErrors.name = data.name.length < 2 ? "Name must be at least 2 characters" : "";
@@ -292,7 +292,7 @@ const contactForm = Form({ class: "contact-form" }, [
             type: "text",
             value: formData.name,
             placeholder: "Enter your name"
-        }).nd.on.blur(validateForm),
+        }).nd.onBlur(validateForm),
 
         ShowIf(errors.name.check(err => err !== ""),
             Span({ class: "error" }, errors.name)
@@ -306,7 +306,7 @@ const contactForm = Form({ class: "contact-form" }, [
             type: "email",
             value: formData.email,
             placeholder: "Enter your email"
-        }).nd.on.blur(validateForm),
+        }).nd.onBlur(validateForm),
 
         ShowIf(errors.email.check(err => err !== ""),
             Span({ class: "error" }, errors.email)
@@ -320,7 +320,7 @@ const contactForm = Form({ class: "contact-form" }, [
             type: "number",
             value: formData.age,
             placeholder: "Enter your age"
-        }).nd.on.blur(validateForm),
+        }).nd.onBlur(validateForm),
 
         ShowIf(errors.age.check(err => err !== ""),
             Span({ class: "error" }, errors.age)
@@ -333,9 +333,9 @@ const contactForm = Form({ class: "contact-form" }, [
         class: "btn btn-primary"
     }, "Submit")
 ])
-    .nd.on.prevent.submit(() => {
+    .nd.onPreventSubmit(() => {
         if (validateForm()) {
-            console.log("Form is valid!", formData.$val());
+            console.log("Form is valid!", formData.$value);
             // Handle successful submission
         } else {
             console.log("Form has errors");
@@ -375,9 +375,10 @@ And many more following the same naming pattern!
 
 Now that you understand NativeDocument's elements, explore these advanced topics:
 
-- **[Conditional Rendering](docs/conditional-rendering.md)** - Dynamic content
-- **[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
-- **[Memory Management](docs/memory-management.md)** - Memory management
-- **[Anchor](docs/anchor.md)** - Anchor
+- **[Conditional Rendering](conditional-rendering.md)** - Dynamic content
+- **[List Rendering](list-rendering.md)** - (ForEach | ForEachArray) and dynamic lists
+- **[Routing](routing.md)** - Navigation and URL management
+- **[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/getting-started.md

@@ -29,7 +29,7 @@ The fastest way to get started is using our CDN. Simply add this script tag to y
 
     const App = Div({ class: 'app' }, [
         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);
@@ -75,7 +75,7 @@ const count = Observable(0);
 
 const App = Div({ class: 'app' }, [
     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);
@@ -142,16 +142,16 @@ const CounterApp = Div({ class: 'counter-app' }, [
     ]),
 
     Div([
-        Button('Decrease').nd.on.click(() => {
-            count.set(count.val() - 1);
+        Button('Decrease').nd.onClick(() => {
+            count.$value--;
         }),
 
-        Button('Reset').nd.on.click(() => {
+        Button('Reset').nd.onClick(() => {
             count.set(0);
         }),
 
-        Button('Increase').nd.on.click(() => {
-            count.set(count.val() + 1);
+        Button('Increase').nd.onClick(() => {
+            count.$value++;
         })
     ])
 ]);
@@ -165,7 +165,7 @@ document.body.appendChild(CounterApp);
 1. **Imported Components**: We used `Div`, `Button`, and `H1` from `NativeDocument.elements`
 2. **Created Reactive State**: `Observable(0)` creates a reactive value that starts at 0
 3. **Built the UI**: Elements are created with attributes and children
-4. **Added Event Handlers**: `.nd.on.click()` attaches click event listeners
+4. **Added Event Handlers**: `.nd.onClick()` attaches click event listeners
 5. **Automatic Updates**: When `count` changes, the UI updates automatically
 
 ## Todo List Application
@@ -216,7 +216,7 @@ const TodoApp = Div({ class: 'todo-app' }, [
             placeholder: 'What needs to be done?',
             value: newTodo
         }),
-        Button('Add').nd.on.click(addTodo)
+        Button('Add').nd.onClick(addTodo)
     ]),
 
     // Todo list container
@@ -230,7 +230,7 @@ const TodoApp = Div({ class: 'todo-app' }, [
                     Input({
                         type: 'checkbox',
                         checked: Observable(todo.done)
-                    }).nd.on.change((e) => {
+                    }).nd.onChange((e) => {
                         const todoList = todos.val();
                         todoList[index.val()].done = e.target.checked;
                         todos.set([...todoList]);
@@ -238,7 +238,7 @@ const TodoApp = Div({ class: 'todo-app' }, [
 
                     Div(['Task: ', todo.text]),
 
-                    Button('Delete').nd.on.click(() => {
+                    Button('Delete').nd.onClick(() => {
                         todos.splice(index.val(), 1);
                     })
                 ]),
@@ -249,9 +249,9 @@ const TodoApp = Div({ class: 'todo-app' }, [
 
     // Filters
     Div({ class: 'filters' }, [
-        Button('All').nd.on.click(() => filter.set('all')),
-        Button('Active').nd.on.click(() => filter.set('active')),
-        Button('Completed').nd.on.click(() => filter.set('completed'))
+        Button('All').nd.onClick(() => filter.set('all')),
+        Button('Active').nd.onClick(() => filter.set('active')),
+        Button('Completed').nd.onClick(() => filter.set('completed'))
     ])
 
 ]);
@@ -273,8 +273,8 @@ document.body.appendChild(TodoApp);
 - Children can be strings, numbers, elements, or observables
 
 ### Event Handling
-- `.nd.on.click()` - Add click event listener
-- `.nd.on.change()` - Add change event listener
+- `.nd.onClick()` - Add click event listener
+- `.nd.onChange()` - Add change event listener
 - Event handlers receive the native event object
 
 ### Conditional Rendering
@@ -312,11 +312,11 @@ export function TodoItem(todo, onToggle, onDelete) {
         Input({
             type: 'checkbox',
             checked: todo.done
-        }).nd.on.change(onToggle),
+        }).nd.onChange(onToggle),
 
         Div(['Task: ', todo.text]),
 
-        Button('Delete').nd.on.click(onDelete)
+        Button('Delete').nd.onClick(onDelete)
     ]);
 }
 ```
@@ -350,15 +350,16 @@ NativeDocument works in all modern browsers that support:
 
 Now that you've built your first NativeDocument applications, explore these topics:
 
-- **[Core Concepts](docs/core-concepts.md)** - Understanding the fundamentals
-- **[Observables](docs/observables.md)** - Reactive state management
-- **[Elements](docs/elements.md)** - Creating and composing UI
-- **[Conditional Rendering](docs/conditional-rendering.md)** - Dynamic content
-- **[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
-- **[Memory Management](docs/memory-management.md)** - Memory management
-- **[Anchor](docs/anchor.md)** - Anchor
+- **[Core Concepts](core-concepts.md)** - Understanding the fundamentals
+- **[Observables](observables.md)** - Reactive state management
+- **[Elements](elements.md)** - Creating and composing UI
+- **[Conditional Rendering](conditional-rendering.md)** - Dynamic content
+- **[List Rendering](list-rendering.md)** - (ForEach | ForEachArray) and dynamic lists
+- **[Routing](routing.md)** - Navigation and URL management
+- **[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
 
 ## Common Issues
 

package/docs/lifecycle-events.md

@@ -98,8 +98,8 @@ document.body.appendChild(reusableComponent);
 
 Now that you understand lifecycle events, explore these related topics:
 
-- **[Memory Management](docs/memory-management.md)** - Memory management
-- **[Anchor](docs/anchor.md)** - Anchor
+- **[Memory Management](memory-management.md)** - Memory management
+- **[Anchor](anchor.md)** - Anchor