Implement reactive data binding mechanism for ldview

This commit introduces a reactive data binding system that enables automatic DOM updates when data changes, similar to modern frameworks like Vue.js.

## Core Changes

### 1. New ldreactive Library (src/ldreactive.ls)
- Independent reactive data binding library
- Uses ES6 Proxy for dependency tracking
- Supports deep object/array tracking
- Event-driven architecture (on/fire pattern)
- Batch update support
- Property exclusion mechanism

Features:
- `get()` - Get reactive proxy
- `raw()` - Get raw data without tracking
- `set(data)` - Set/update data
- `track(name, fn)` - Track dependencies
- `untrack(name)` - Stop tracking
- `watch(key, callback)` - Watch specific properties
- `batch(fn)` - Batch multiple updates

### 2. ldview Integration (src/ldview.ls)
- Seamless integration with ldreactive
- Auto-detect reactive context
- Automatic handler re-rendering on data changes
- Per-handler reactive control via `reactive: false`
- Support for all handler types (handler, text, attr, style)

Usage:
```javascript
const state = new ldview.reactive({ count: 0 });
new ldview({
  root: '#app',
  ctx: state,
  handler: {
    counter: ({node, ctx}) => node.textContent = ctx.count
  }
});
state.get().count++;  // Auto re-renders counter handler
```

### 3. Build System Updates
- Updated build script to compile ldreactive
- Generate both regular and minified versions
- Copy to web assets directory

### 4. Documentation & Tests
- REACTIVE.md - Comprehensive documentation with examples
- test-ldreactive.js/html - Standalone ldreactive tests (13 tests)
- test-integration.js/html - Integration tests (10 tests)
- All tests passing ✓

## Technical Details

- Deep property tracking (e.g., `user.profile.name`)
- Array mutation tracking (push, pop, splice, etc.)
- WeakMap-based proxy caching for performance
- Event system for change notifications
- No breaking changes to existing ldview API
- Backward compatible (reactive is opt-in)

## Browser Support
Requires ES6 Proxy support:
- Chrome 49+, Firefox 18+, Safari 10+, Edge 12+
- Not compatible with IE11

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: claude

REACTIVE.md

@@ -1,14 +1,25 @@
 #!/usr/bin/env bash
 rm -rf dist
 mkdir -p dist
+
+echo "build src/ldreactive.ls -> dist/ldreactive.js ..."
+./node_modules/.bin/lsc -cp --no-header src/ldreactive.ls > dist/ldreactive.js
+
 echo "build src/ldview.ls -> dist/index.js ..."
 ./node_modules/.bin/lsc -cp --no-header src/ldview.ls > dist/index.js
+
+echo "minifying ldreactive.js ..."
+./node_modules/.bin/uglifyjs dist/ldreactive.js -m -c > dist/ldreactive.min.js
+
 echo "minifying index.js ..."
 ./node_modules/.bin/uglifyjs dist/index.js -m -c > dist/index.min.js
+
 echo "copy ldview.pug to dist/ ..."
 cp src/ldview.pug dist/index.pug
+
 echo "copy files to web ..."
 rm -rf web/static/assets/lib/ldview/dev
 mkdir -p web/static/assets/lib/ldview/dev
 cp dist/* web/static/assets/lib/ldview/dev
+
 echo "done."

build

@@ -1,12 +1,15 @@
 (function(){
-  var setEvtHandler, ldview;
+  var setEvtHandler, ldreactive, ldview;
   setEvtHandler = function(d, k, f){
     return d.node.addEventListener(k, function(evt){
       return f(import$({
         evt: evt
       }, d));
     });
   };
+  ldreactive = (typeof module != 'undefined' && module !== null) && (typeof require != 'undefined' && require !== null)
+    ? require('./ldreactive.js')
+    : typeof window != 'undefined' && window !== null ? window.ldreactive : void 8;
   ldview = function(opt){
     var names, i$, ref$, k, v, len$, list, j$, len1$, it, res$, this$ = this;
     opt == null && (opt = {});
@@ -20,6 +23,17 @@
     if (opt.context) {
       console.warn('[ldview] `context` is deprecated. use `ctx` instead.');
     }
+    this._reactive = null;
+    this._reactiveEnabled = false;
+    if (this._ctx && ldreactive && (this._ctx instanceof ldreactive || this._ctx._isReactiveContext)) {
+      this._reactive = this._ctx;
+      this._reactiveEnabled = true;
+      this._reactive.on('change', function(key, value, oldValue, dependents){
+        if (dependents && dependents.length > 0) {
+          return this$.render(dependents);
+        }
+      });
+    }
     this.attr = opt.attr || {};
     this.style = opt.style || {};
     this.handler = opt.handler || {};
@@ -368,18 +382,24 @@
       });
     },
     _render: function(n, d, i, b, e, initOnly){
-      var c, init, handler, text, attr, style, action, ref$, k, v, f, results$ = [];
-      c = typeof this._ctx === 'function'
-        ? c = this._ctx({
-          node: this.root,
-          ctxs: this._ctxs,
-          views: this.views
-        })
-        : this._ctx;
+      var c, reactiveAllowed, init, handler, text, attr, style, action, ref$, textVal, attrVal, k, v, styleVal, f, results$ = [];
+      c = this._reactiveEnabled
+        ? this._reactive.get()
+        : typeof this._ctx === 'function'
+          ? this._ctx({
+            node: this.root,
+            ctxs: this._ctxs,
+            views: this.views
+          })
+          : this._ctx;
       d.ctx = c;
       d.context = c;
       d.ctxs = this._ctxs;
       d.views = this.views;
+      reactiveAllowed = this._reactiveEnabled;
+      if (b && typeof b.reactive !== 'undefined') {
+        reactiveAllowed = b.reactive;
+      }
       if (b) {
         if (b.view) {
           init = function(arg$){
@@ -424,19 +444,40 @@
           return Promise.resolve((d.inited || (d.inited = {}))[n]);
         }
         if (handler) {
-          handler(d);
+          if (reactiveAllowed && this._reactive) {
+            this._reactive.track(n, function(){
+              return handler(d);
+            });
+          } else {
+            handler(d);
+          }
         }
         if (text) {
-          d.node.textContent = typeof text === 'function' ? text(d) : text;
+          textVal = typeof text === 'function' ? reactiveAllowed && this._reactive
+            ? this._reactive.track(n, function(){
+              return text(d);
+            })
+            : text(d) : text;
+          d.node.textContent = textVal;
         }
         if (attr) {
-          for (k in ref$ = attr(d) || {}) {
+          attrVal = reactiveAllowed && this._reactive
+            ? this._reactive.track(n, function(){
+              return attr(d);
+            })
+            : attr(d);
+          for (k in ref$ = attrVal || {}) {
             v = ref$[k];
             d.node.setAttribute(k, v);
           }
         }
         if (style) {
-          for (k in ref$ = style(d) || {}) {
+          styleVal = reactiveAllowed && this._reactive
+            ? this._reactive.track(n, function(){
+              return style(d);
+            })
+            : style(d);
+          for (k in ref$ = styleVal || {}) {
             v = ref$[k];
             d.node.style[k] = v;
           }
@@ -614,6 +655,9 @@
     }
     return a;
   };
+  if (ldreactive) {
+    ldview.reactive = ldreactive;
+  }
   if (typeof module != 'undefined' && module !== null) {
     module.exports = ldview;
   }