npm - @ape-egg/vibe - Versions diffs - 1.0.5 → 1.1.2 - Mend

@ape-egg/vibe 1.0.5 → 1.1.2

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 (35) hide show

package/CHANGELOG.md +112 -0
package/README.md +228 -23
package/compiler/bin/vibe-compile.js +109 -0
package/compiler/native/.gitkeep +0 -0
package/compiler/native/vibe-compiler-darwin-arm64 +0 -0
package/compiler/src/Cargo.lock +1885 -0
package/compiler/src/Cargo.toml +29 -0
package/compiler/src/compiler/compile.rs +1209 -0
package/compiler/src/compiler/mod.rs +5 -0
package/compiler/src/config.rs +184 -0
package/compiler/src/main.rs +284 -0
package/compiler/src/parser/element.rs +96 -0
package/compiler/src/parser/html.rs +335 -0
package/compiler/src/parser/mod.rs +8 -0
package/index.js +2 -248
package/package.json +26 -3
package/{affected.js → runtime/affected.js} +64 -4
package/runtime/cleanup.js +59 -0
package/runtime/component.js +116 -0
package/{conditionals.js → runtime/conditionals.js} +25 -11
package/{constants.js → runtime/constants.js} +23 -3
package/runtime/debug.js +91 -0
package/{hydrate.js → runtime/hydrate.js} +57 -7
package/runtime/index.js +614 -0
package/{iterate.js → runtime/iterate.js} +53 -45
package/{iteration-utils.js → runtime/iteration-utils.js} +11 -1
package/{parse.js → runtime/parse.js} +37 -7
package/runtime/state.js +52 -0
package/ROADMAP.md +0 -289
package/llms.txt +0 -279
package/state.js +0 -26
/package/{_vibe-compiled-iteration-batch.js → runtime/_vibe-compiled-iteration-batch.js} +0 -0
/package/{link.js → runtime/manifest.js} +0 -0
/package/{utils.js → runtime/utils.js} +0 -0
/package/{vibe.css → runtime/vibe.css} +0 -0

package/llms.txt DELETED Viewed

@@ -1,279 +0,0 @@
-# Vibe - Complete Documentation
-> Runtime-first reactivity. No virtual DOM. No build step.
-## Overview
-Vibe is a lightweight reactive library that uses Proxy-based state and MutationObserver for fine-grained DOM updates. It works directly in the browser with zero compilation required.
-**Key characteristics:**
-- Proxy-based reactive state (`window.$`)
-- Surgical DOM updates (only affected elements re-render)
-- MutationObserver for dynamic element tracking
-- Works with vanilla HTML - no special file format
-## Installation
-```bash
-npm install @ape-egg/vibe
-```
-## Quick Start
-```html
-<script type="module">
-  import state from "@ape-egg/vibe";
-  window.$ = state({ name: "World", count: 0 });
-</script>
-<h1>Hello, @[name]!</h1>
-<button onclick="$.count++">Clicked @[count] times</button>
-```
-## Core Syntax
-### Reactive Bindings
-Use `@[property]` syntax anywhere in HTML or CSS:
-```html
-<!-- Text content -->
-<div>@[firstName]</div>
-<!-- Expressions -->
-<div>@[firstName + ' ' + lastName]</div>
-<div>@[count * 2]</div>
-<!-- Attributes -->
-<input value="@[inputValue]">
-<button disabled="@[isLoading]">Submit</button>
-<!-- CSS -->
-<style>
-  .box { background: @[themeColor]; }
-</style>
-```
-⚠️ **Important**: Bindings are evaluated using `new Function()`. Do not bind untrusted user input.
-### State Access
-State is accessed globally via `window.$`:
-```javascript
-// Read
-console.log($.firstName);
-// Write (triggers re-render)
-$.firstName = "John";
-// Increment
-$.count++;
-```
-## Control Flow
-### Iteration
-```html
-<!-- each items as item -->
-  <li>@[item]</li>
-<!-- /each -->
-```
-With index:
-```html
-<!-- each items as item, index -->
-  <li>@[index]: @[item]</li>
-<!-- /each -->
-```
-### Nested Iteration
-Use dot paths for nested arrays:
-```html
-<!-- each categories as category -->
-  <h2>@[category.name]</h2>
-  <!-- each category.items as item -->
-    <span>@[item.name]</span>
-  <!-- /each -->
-<!-- /each -->
-```
-### Conditionals
-```html
-<!-- if isLoggedIn -->
-  <span>Welcome, @[username]!</span>
-<!-- else -->
-  <span>Please log in</span>
-<!-- /if -->
-```
-Conditionals can be nested inside iterations and vice versa.
-## Special Attributes
-### Dehydrate
-Skip reactive processing for an element and its children:
-```html
-<code dehydrate>@[this] displays literally, not parsed</code>
-```
-Use cases:
-- Displaying `@[...]` syntax in documentation
-- Static content that shouldn't be reactive
-- Performance optimization for large static sections
-### Boolean Attributes
-Attributes not in the value whitelist are removed when falsy:
-```html
-<button disabled="@[isLoading]">Submit</button>
-<!-- When isLoading is false, disabled attribute is removed entirely -->
-```
-## Events
-Use standard inline event handlers:
-```html
-<button onclick="$.count++">Increment</button>
-<input oninput="$.text = this.value">
-<form onsubmit="event.preventDefault(); handleSubmit()">
-```
-## Styling
-### CSS Bindings
-Reactive values work inside `<style>` tags:
-```html
-<style>
-  .box {
-    background: @[backgroundColor];
-    color: @[textColor];
-    width: @[width]px;
-  }
-</style>
-```
-### Preventing FOUC
-Hide content until hydration completes:
-```html
-<body style="visibility: hidden;">
-```
-Or use the included CSS:
-```html
-<link rel="stylesheet" href="@ape-egg/vibe/vibe.css">
-<body vibe>
-```
-## Dynamic Elements
-Elements added via JavaScript are automatically hydrated through MutationObserver:
-```javascript
-const div = document.createElement('div');
-div.innerHTML = '<span>Hello, @[name]!</span>';
-document.body.appendChild(div);
-// Automatically becomes reactive
-```
-## API Reference
-### `state(initialState, afterUpdate?)`
-Creates reactive state and initializes the framework.
-```javascript
-import state from "@ape-egg/vibe";
-window.$ = state(
-  { count: 0, user: { name: "Alice" } },
-  (newState, oldState) => {
-    console.log("State updated:", newState);
-  }
-);
-```
-**Parameters:**
-- `initialState` - Object containing initial state values
-- `afterUpdate` - Optional callback after each state change (receives read-only snapshots)
-**Returns:** Proxy object for reactive state access
-## Scoped Variables
-Inside `<!-- each -->` blocks, these variables are available:
-- `item` (or custom name) - current array element
-- `index` (or custom name) - current index
-- Parent state remains accessible via `$`
-```html
-<!-- each users as user, i -->
-  <div>@[i]: @[user.name] (total: @[users.length])</div>
-<!-- /each -->
-```
-## Architecture
-Vibe consists of these core modules:
-- **state.js** - Proxy-based reactive state container
-- **parse.js** - DOM parser that finds `@[...]` bindings
-- **link.js** - Maps elements to parsed tree nodes
-- **hydrate.js** - Updates DOM with current state values
-- **affected.js** - Determines which elements need updating
-- **iterate.js** - Array rendering with efficient diffing
-- **conditionals.js** - Conditional block rendering
-## How It Works
-```
-1. state() initializes the Proxy and framework
-2. parse.js scans DOM for @[...], <!-- each -->, <!-- if -->
-3. link.js maps elements to the parsed tree
-4. hydrate.js replaces bindings with values
-5. iterate.js renders <!-- each --> loops
-6. conditionals.js renders <!-- if --> blocks
-7. MutationObserver watches for new elements
-8. On state change: affected.js finds changed elements → hydrate.js updates them
-```
-## Current Limitations
-- **Top-level reactivity only**: `$.nested.prop = value` doesn't trigger updates (must replace parent object)
-- **No computed values**: Derived state must be calculated manually
-- **No two-way binding sugar**: Must wire input events manually
-- **Expression security**: `new Function()` evaluation - don't bind untrusted input
-## Best Practices
-1. **Initialize state before DOM**: Place `<script>` in `<head>` or before reactive elements
-2. **Use dehydrate for docs**: When showing `@[...]` syntax examples
-3. **Prevent FOUC**: Use `visibility: hidden` on body until hydration
-4. **Keep expressions simple**: Complex logic belongs in JavaScript, not templates
-5. **Replace objects for deep updates**: `$.user = { ...$.user, name: "New" }`
-## Browser Support
-Modern browsers with:
-- Proxy (ES6)
-- MutationObserver
-- ES Modules
-## Resources
-- **Homepage**: https://vibe.korte.kim
-- **npm**: https://www.npmjs.com/package/@ape-egg/vibe

package/state.js DELETED Viewed

@@ -1,26 +0,0 @@
-export default (state, rerender) =>
-  new Proxy(state, {
-    set(obj, prop, value) {
-      const ref = Reflect.set(...arguments);
-      rerender({
-        [prop]: value,
-      });
-      // console.info("state change", { obj, prop, value });
-      return ref;
-    },
-    get(target, prop) {
-      // if (typeof target[prop] === 'function') {
-      //   const inputString = target[prop].toString();
-      //   const regex = /\$\.\w+/g;
-      //   let match;
-      //   while ((match = regex.exec(inputString))) {
-      //     const varName = match[0].split('.')[1];
-      //     console.log(varName, state[varName]);
-      //   }
-      //   console.log(arguments)
-      // }
-      return Reflect.get(...arguments);
-    },
-  });

/package/{_vibe-compiled-iteration-batch.js → runtime/_vibe-compiled-iteration-batch.js} RENAMED Viewed

File without changes

/package/{link.js → runtime/manifest.js} RENAMED Viewed

File without changes

/package/{utils.js → runtime/utils.js} RENAMED Viewed

File without changes

/package/{vibe.css → runtime/vibe.css} RENAMED Viewed

File without changes