npm - @uistate/examples - Versions diffs - 1.0.0 - Mend

@uistate/examples 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,40 @@
+# @uistate/examples
+Example applications and patterns for [@uistate/core](https://www.npmjs.com/package/@uistate/core).
+## Structure
+```
+eventState/          # EventState examples
+  001-counter/
+  002-counter-improved/
+  003-input-reactive/
+  004-computed-state/
+  005-conditional-rendering/
+  006-list-rendering/
+  007-form-validation/
+  008-undo-redo/
+  009-localStorage-side-effects/
+  010-decoupled-components/
+  011-async-patterns/
+  028-counter-improved-eventTest/
+  030-todo-app-with-eventTest/
+  031-todo-app-with-eventTest/
+  032-todo-app-with-eventTest/
+cssState/            # CssState examples (coming soon)
+```
+## Usage
+Each example is a standalone HTML file that can be opened directly in the browser. Examples import `@uistate/core` via CDN or local reference.
+## Install
+```bash
+npm install @uistate/examples
+```
+## License
+MIT

package/cssState/.gitkeep ADDED Viewed

File without changes

package/eventState/001-counter/README.md ADDED Viewed

@@ -0,0 +1,44 @@
+# 001 Counter - Minimal EventState Example
+The simplest possible EventState example: a counter with one button.
+## What's Here
+- `eventState.js` - ~60 lines of reactive state management
+- `index.html` - Counter UI with subscription
+## How It Works
+```javascript
+// 1. Create store
+const store = createEventState({ count: 0 });
+// 2. Subscribe to changes
+store.subscribe('count', ({ value }) => {
+  document.getElementById('count').textContent = value;
+});
+// 3. Update state
+store.set('count', store.get('count') + 1);
+```
+That's it. No framework, no build step, just reactive data.
+## Run It
+Open `index.html` in a browser. Click the `+` button to increment.
+## Key Concepts
+- **`createEventState(initial)`** - Creates a reactive store
+- **`store.get(path)`** - Read state at dot-path
+- **`store.set(path, value)`** - Write state and notify subscribers
+- **`store.subscribe(path, handler)`** - React to changes
+## Next Steps
+See `examples/009-todo-app-with-eventTest/` for a full application with:
+- Router
+- Bridges (intent → domain pattern)
+- Tests with type generation
+- Dev tools

package/eventState/001-counter/index.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>001 Counter - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
+</head>
+<body>
+  <h1>Counter: <span id="count">0</span></h1>
+  <button id="increment">+</button>
+  <script type="module">
+    import { createEventState } from '@uistate/core';
+    // Create store
+    const store = createEventState({ count: 0 });
+    // Subscribe to count changes
+    store.subscribe('count', ( value ) => {
+      document.getElementById('count').textContent = value;
+    });
+    // Increment on button click
+    document.getElementById('increment').onclick = () => {
+      const current = store.get('count');
+      store.set('count', current + 1);
+    };
+  </script>
+</body>
+</html>

package/eventState/002-counter-improved/README.md ADDED Viewed

@@ -0,0 +1,44 @@
+# 001 Counter - Minimal EventState Example
+The simplest possible EventState example: a counter with one button.
+## What's Here
+- `eventState.js` - ~60 lines of reactive state management
+- `index.html` - Counter UI with subscription
+## How It Works
+```javascript
+// 1. Create store
+const store = createEventState({ count: 0 });
+// 2. Subscribe to changes
+store.subscribe('count', ({ value }) => {
+  document.getElementById('count').textContent = value;
+});
+// 3. Update state
+store.set('count', store.get('count') + 1);
+```
+That's it. No framework, no build step, just reactive data.
+## Run It
+Open `index.html` in a browser. Click the `+` button to increment.
+## Key Concepts
+- **`createEventState(initial)`** - Creates a reactive store
+- **`store.get(path)`** - Read state at dot-path
+- **`store.set(path, value)`** - Write state and notify subscribers
+- **`store.subscribe(path, handler)`** - React to changes
+## Next Steps
+See `examples/009-todo-app-with-eventTest/` for a full application with:
+- Router
+- Bridges (intent → domain pattern)
+- Tests with type generation
+- Dev tools

package/eventState/002-counter-improved/index.html ADDED Viewed

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>002 Counter Improved - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
+</head>
+<body>
+  <h1>Counter: <span id="count">0</span></h1>
+  <button id="increment">+</button>
+  <button id="decrement">-</button>
+  <button id="double">x2</button>
+  <script type="module">
+    import { createEventState } from '@uistate/core';
+    // Create store
+    const store = createEventState({ count: 0 });
+    // Subscribe to count changes
+    store.subscribe('count', ( value ) => {
+      document.getElementById('count').textContent = value;
+    });
+    // Increment on button click
+    document.getElementById('increment').onclick = () => {
+      const current = store.get('count');
+      store.set('count', current + 1);
+    };
+    // Decrement on button click
+    document.getElementById('decrement').onclick = () => {
+      const current = store.get('count');
+      store.set('count', current - 1);
+    };
+    // Decrement on button click
+    document.getElementById('double').onclick = () => {
+      const current = store.get('count');
+      store.set('count', current * 2);
+    };
+  </script>
+</body>
+</html>

package/eventState/003-input-reactive/README.md ADDED Viewed

@@ -0,0 +1,44 @@
+# 001 Counter - Minimal EventState Example
+The simplest possible EventState example: a counter with one button.
+## What's Here
+- `eventState.js` - ~60 lines of reactive state management
+- `index.html` - Counter UI with subscription
+## How It Works
+```javascript
+// 1. Create store
+const store = createEventState({ count: 0 });
+// 2. Subscribe to changes
+store.subscribe('count', ({ value }) => {
+  document.getElementById('count').textContent = value;
+});
+// 3. Update state
+store.set('count', store.get('count') + 1);
+```
+That's it. No framework, no build step, just reactive data.
+## Run It
+Open `index.html` in a browser. Click the `+` button to increment.
+## Key Concepts
+- **`createEventState(initial)`** - Creates a reactive store
+- **`store.get(path)`** - Read state at dot-path
+- **`store.set(path, value)`** - Write state and notify subscribers
+- **`store.subscribe(path, handler)`** - React to changes
+## Next Steps
+See `examples/009-todo-app-with-eventTest/` for a full application with:
+- Router
+- Bridges (intent → domain pattern)
+- Tests with type generation
+- Dev tools

package/eventState/003-input-reactive/index.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>003 Input Reactive - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
+</head>
+<body>
+  <h1>Type something:</h1>
+  <input type="text" id="textInput" placeholder="Start typing...">
+  <p id="output"></p>
+  <script type="module">
+    import { createEventState } from '@uistate/core';
+    // Create store
+    const store = createEventState({ text: '' });
+    // Subscribe to text changes
+    store.subscribe('text', (value) => {
+      document.getElementById('output').textContent = value;
+    });
+    // Update state on input
+    document.getElementById('textInput').oninput = (e) => {
+      store.set('text', e.target.value);
+    };
+  </script>
+</body>
+</html>

package/eventState/004-computed-state/README.md ADDED Viewed

@@ -0,0 +1,45 @@
+# 004 Computed State - Derived Values
+Shows how trivial it is to create computed/derived state in EventState.
+## What's Here
+- Two inputs: `firstName` and `lastName`
+- Two computed values: `fullName` and `charCount`
+- **Zero framework magic** - just functions
+## How It Works
+```javascript
+// 1. Define a function that computes derived state
+const updateFullName = () => {
+  const first = store.get('firstName');
+  const last = store.get('lastName');
+  const fullName = `${first} ${last}`.trim();
+  document.getElementById('fullName').textContent = fullName;
+};
+// 2. Subscribe to wildcard to catch all changes
+store.subscribe('*', () => {
+  updateFullName();
+  updateCharCount();
+});
+// 3. That's it. No special API needed.
+```
+## Key Insight
+**Computed state is just a function.**
+Other frameworks need:
+- Vue: `computed()`
+- React: `useMemo()`
+- Svelte: `$:` reactive declarations
+- MobX: `@computed` decorators
+**EventState:** Just write a function and call it when state changes.
+## Run It
+Open `index.html` in a browser. Type in the inputs and watch the computed values update.

package/eventState/004-computed-state/index.html ADDED Viewed

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>004 Computed State - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
+</head>
+<body>
+  <h1>Computed State</h1>
+  <label>First Name: <input type="text" id="firstName" placeholder="Abraham"></label><br>
+  <label>Last Name: <input type="text" id="lastName" placeholder="Lincoln"></label><br>
+  <p><strong>Full Name:</strong> <span id="fullName"></span></p>
+  <p><strong>Character Count:</strong> <span id="charCount">0</span></p>
+  <script type="module">
+    import { createEventState } from '@uistate/core';
+    // Create store
+    const store = createEventState({
+      firstName: '',
+      lastName: ''
+    });
+    // Computed: full name (derived from firstName + lastName)
+    const updateFullName = () => {
+      const first = store.get('firstName');
+      const last = store.get('lastName');
+      const fullName = `${first} ${last}`.trim();
+      document.getElementById('fullName').textContent = fullName || '(empty)';
+    };
+    // Computed: character count
+    const updateCharCount = () => {
+      const first = store.get('firstName');
+      const last = store.get('lastName');
+      const total = (first + last).length;
+      document.getElementById('charCount').textContent = total;
+    };
+    // Subscribe to any state change and recompute
+    store.subscribe('*', () => {
+      updateFullName();
+      updateCharCount();
+    });
+    // Wire up inputs
+    document.getElementById('firstName').oninput = (e) => {
+      store.set('firstName', e.target.value);
+    };
+    document.getElementById('lastName').oninput = (e) => {
+      store.set('lastName', e.target.value);
+    };
+    // Initial render
+    updateFullName();
+    updateCharCount();
+  </script>
+</body>
+</html>

package/eventState/005-conditional-rendering/README.md ADDED Viewed

@@ -0,0 +1,42 @@
+# 005 Conditional Rendering - Show/Hide Elements
+Demonstrates how to conditionally render elements based on state.
+## What's Here
+- Checkbox to toggle visibility
+- Message that shows/hides based on state
+- **No `v-if` or `{#if}` needed** - just DOM manipulation
+## How It Works
+```javascript
+// 1. Store boolean state
+const store = createEventState({ isVisible: false });
+// 2. Subscribe and toggle display
+store.subscribe('isVisible', (value) => {
+  const message = document.getElementById('message');
+  message.style.display = value ? 'block' : 'none';
+});
+// 3. Update state on checkbox change
+document.getElementById('toggle').onchange = (e) => {
+  store.set('isVisible', e.target.checked);
+};
+```
+## Key Insight
+**Conditional rendering is just DOM manipulation.**
+Other frameworks need:
+- React: `{isVisible && <p>Message</p>}`
+- Vue: `v-if="isVisible"`
+- Svelte: `{#if isVisible}`
+**EventState:** Just set `style.display` in a subscriber. That's it.
+## Run It
+Open `index.html` in a browser. Check the box to reveal the message.

package/eventState/005-conditional-rendering/index.html ADDED Viewed

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>005 Conditional Rendering - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
+</head>
+<body>
+  <h1>Conditional Rendering</h1>
+  <label>
+    <input type="checkbox" id="toggle">
+    Show secret message
+  </label>
+  <p id="message" style="display: none;">You found the secret message!</p>
+  <script type="module">
+    import { createEventState } from '@uistate/core';
+    // Create store
+    const store = createEventState({ isVisible: false });
+    // Subscribe to visibility changes
+    store.subscribe('isVisible', (value) => {
+      const message = document.getElementById('message');
+      message.style.display = value ? 'block' : 'none';
+    });
+    // Toggle on checkbox change
+    document.getElementById('toggle').onchange = (e) => {
+      store.set('isVisible', e.target.checked);
+    };
+  </script>
+</body>
+</html>

package/eventState/006-list-rendering/README.md ADDED Viewed

@@ -0,0 +1,49 @@
+# 006 List Rendering - Dynamic Arrays
+Demonstrates how to render lists from array state.
+## What's Here
+- Input to add items
+- Dynamic list that updates on state change
+- **No `v-for` or `.map()` in JSX** - just `innerHTML`
+## How It Works
+```javascript
+// 1. Store array in state
+const store = createEventState({ items: [] });
+// 2. Render function
+const renderList = () => {
+  const items = store.get('items');
+  const list = document.getElementById('itemList');
+  list.innerHTML = items.map(item => `<li>${item}</li>`).join('');
+};
+// 3. Subscribe to array changes
+store.subscribe('items', renderList);
+// 4. Add items by creating new array
+const items = store.get('items');
+store.set('items', [...items, newItem]);
+```
+## Key Insight
+**List rendering is just string concatenation.**
+Other frameworks need:
+- React: `{items.map(item => <li>{item}</li>)}`
+- Vue: `v-for="item in items"`
+- Svelte: `{#each items as item}`
+**EventState:** Just use `.map()` and `innerHTML`. That's it.
+## Important
+We create a **new array** with `[...items, newItem]` instead of mutating. This ensures the subscription fires (new reference = change detected).
+## Run It
+Open `index.html` in a browser. Type items and click Add (or press Enter).

package/eventState/006-list-rendering/index.html ADDED Viewed

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>006 List Rendering - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
+</head>
+<body>
+  <h1>Shopping List</h1>
+  <input type="text" id="itemInput" placeholder="Add item...">
+  <button id="addBtn">Add</button>
+  <ul id="itemList"></ul>
+  <script type="module">
+    import { createEventState } from '@uistate/core';
+    // Create store
+    const store = createEventState({ items: [] });
+    // Render list
+    const renderList = () => {
+      const items = store.get('items');
+      const list = document.getElementById('itemList');
+      if (items.length === 0) {
+        list.innerHTML = '<li><em>No items yet</em></li>';
+      } else {
+        list.innerHTML = items.map(item => `<li>${item}</li>`).join('');
+      }
+    };
+    // Subscribe to items changes
+    store.subscribe('items', renderList);
+    // Add item
+    document.getElementById('addBtn').onclick = () => {
+      const input = document.getElementById('itemInput');
+      const value = input.value.trim();
+      if (value) {
+        const items = store.get('items');
+        store.set('items', [...items, value]);
+        input.value = '';
+      }
+    };
+    // Add on Enter key
+    document.getElementById('itemInput').onkeypress = (e) => {
+      if (e.key === 'Enter') {
+        document.getElementById('addBtn').click();
+      }
+    };
+    // Initial render
+    renderList();
+  </script>
+</body>
+</html>

package/eventState/007-form-validation/README.md ADDED Viewed

@@ -0,0 +1,52 @@
+# 007 Form Validation - Real-time Feedback
+Demonstrates form validation with multiple state paths and computed validity.
+## What's Here
+- Email and password inputs
+- Real-time validation messages
+- Submit button enabled only when form is valid
+- **No form library needed** - just state and functions
+## How It Works
+```javascript
+// 1. Store input values AND validation state
+const store = createEventState({
+  email: '',
+  password: '',
+  emailValid: false,
+  passwordValid: false
+});
+// 2. Validate on input change
+store.subscribe('email', (value) => {
+  const isValid = validateEmail(value);
+  store.set('emailValid', isValid);
+  // Show error message
+});
+// 3. Enable submit when all fields valid
+store.subscribe('emailValid', updateSubmitButton);
+store.subscribe('passwordValid', updateSubmitButton);
+```
+## Key Insight
+**Validation is just derived state.**
+- Input values are **source state**
+- Validation flags are **derived state**
+- Submit button state is **computed from derived state**
+Other frameworks need:
+- React: `useForm` hooks, validation libraries
+- Vue: `v-model` + validation plugins
+- Svelte: Stores + validation actions
+**EventState:** Just subscribe to inputs, validate, and update state. That's it.
+## Run It
+Open `index.html` in a browser. Type invalid data to see error messages. Submit button enables when both fields are valid.