@mintjamsinc/ichigojs 0.1.6 → 0.1.8

package/README.md

@@ -16,7 +16,9 @@ A simple and intuitive reactive framework. Lightweight, fast, and user-friendly
 - 📦 **Lightweight** - Minimal bundle size
 - 🚀 **High Performance** - Efficient batched updates via microtask queue
 - 💪 **TypeScript** - Written in TypeScript with full type support
-- 🎨 **Directives** - `v-if`, `v-for`, `v-show`, `v-bind`, `v-on`, `v-model`
+- 🎨 **Directives** - `v-if`, `v-for`, `v-show`, `v-bind`, `v-on`, `v-model`, `v-resize`, `v-intersection`
+- 📐 **Resize Observer** - Monitor element size changes with `v-resize` directive
+- 👁️ **Intersection Observer** - Detect element visibility with `v-intersection` directive
 
 ## Installation
 
@@ -160,6 +162,97 @@ Event handling with modifiers:
 
 Supported modifiers: `.stop`, `.prevent`, `.capture`, `.self`, `.once`
 
+**Event Handlers with Context:**
+
+All event handlers receive the event as the first parameter and `$ctx` as the second parameter:
+
+```javascript
+methods: {
+  handleClick(event, $ctx) {
+    // event - the DOM event object
+    // $ctx.element - the DOM element
+    // $ctx.vnode - the VNode instance
+    // $ctx.userData - Proxy-free storage
+  }
+}
+```
+
+#### v-resize
+
+Monitor element size changes using ResizeObserver:
+
+```html
+<div v-resize="onResize" class="resizable-box">
+  {{ width }}px × {{ height }}px
+</div>
+```
+
+```javascript
+methods: {
+  onResize(entries, $ctx) {
+    const entry = entries[0];
+    this.width = Math.round(entry.contentRect.width);
+    this.height = Math.round(entry.contentRect.height);
+
+    // Access element through $ctx
+    console.log('Element:', $ctx.element);
+  }
+}
+```
+
+**Features:**
+- Native ResizeObserver API for efficient resize detection
+- Automatic cleanup in destroy phase
+- Access to element, VNode, and userData via `$ctx`
+
+#### v-intersection
+
+Detect element visibility using IntersectionObserver:
+
+```html
+<div v-intersection="onIntersection" class="observable-box">
+  I'm {{ isVisible ? 'VISIBLE' : 'NOT VISIBLE' }}
+</div>
+```
+
+```javascript
+methods: {
+  onIntersection(entries, $ctx) {
+    const entry = entries[0];
+    this.isVisible = entry.isIntersecting;
+    this.intersectionRatio = entry.intersectionRatio;
+
+    // Access element through $ctx
+    console.log('Element:', $ctx.element);
+  }
+}
+```
+
+**With custom options:**
+
+```html
+<div v-intersection="onIntersection"
+     :options.intersection="{threshold: 0.5, rootMargin: '0px'}">
+  Triggers at 50% visibility
+</div>
+```
+
+You can also use `:options` for generic options:
+
+```html
+<div v-intersection="onIntersection"
+     :options="{threshold: 0.5}">
+  Observable content
+</div>
+```
+
+**Features:**
+- Native IntersectionObserver API for efficient visibility detection
+- Custom threshold and rootMargin options via `:options.intersection` or `:options`
+- Automatic cleanup in destroy phase
+- Perfect for lazy loading, infinite scroll, and animation triggers
+- Access to element, VNode, and userData via `$ctx`
+
 #### Lifecycle Hooks
 
 Lifecycle hooks allow you to run code at specific stages of an element's lifecycle. Each hook receives a **lifecycle context** (`$ctx`) with access to the element, VNode, and userData storage.
@@ -182,8 +275,8 @@ Lifecycle hooks allow you to run code at specific stages of an element's lifecyc
 - `@mounted` - Called after the element is inserted into the DOM
 - `@update` - Called before the element is updated
 - `@updated` - Called after the element is updated
-- `@unmount` - Called before the element is removed from the DOM
-- `@unmounted` - Called after the element is removed from the DOM
+- `@unmount` - Called before VNode cleanup begins
+- `@unmounted` - Called after VNode cleanup is complete (element reference still available)
 
 **Lifecycle Context (`$ctx`):**
 
@@ -195,7 +288,7 @@ Every lifecycle hook receives a context object with:
 
 **userData Storage:**
 
-`$ctx.userData` is a safe space to store data associated with the element's lifecycle. It's not affected by Vue's reactive proxy system, making it perfect for storing third-party library instances.
+`$ctx.userData` is a safe space to store data associated with the element's lifecycle. It's not affected by the reactive proxy system, making it perfect for storing third-party library instances.
 
 ```javascript
 methods: {
@@ -248,19 +341,19 @@ methods: {
     };
 
     $ctx.userData.set('myResource', resource);
-    // resource.close() will be called automatically on unmount
+    // resource.close() will be called automatically during destroy phase
   }
 }
 ```
 
 **Cleanup Order:**
 
-1. `@unmount` hook fires
+1. `@unmount` hook fires (element still in DOM)
 2. `userData` auto-cleanup (close() methods called)
-3. Child nodes destroyed
+3. Child nodes destroyed recursively
 4. Dependencies unregistered
 5. Directive manager cleanup
-6. `@unmounted` hook fires
+6. `@unmounted` hook fires (element removed from DOM, but reference still available in `$ctx.element`)
 
 **Works with v-if and v-for:**