bitwrench 2.0.32 → 2.1.0

package/docs/tutorial-bwserve.md

@@ -25,7 +25,7 @@ import bwserve from 'bitwrench/bwserve';
 var app = bwserve.create({ port: 7902, title: 'My Dashboard' });
 
 app.page('/', function(client) {
-  client.render('#app', { t: 'h1', c: 'Hello from the server!' });
+  client.mount('#app', { t: 'h1', c: 'Hello from the server!' });
 });
 
 app.listen();
@@ -49,14 +49,14 @@ app.page('/', function(client) {
   var count = 0;
 
   // Render initial UI
-  client.render('#app', {
+  client.mount('#app', {
     t: 'div', c: [
       { t: 'h1', c: 'Counter' },
       { t: 'div', a: { id: 'count', style: 'font-size: 3rem; text-align: center' }, c: '0' },
       { t: 'div', a: { style: 'text-align: center; margin-top: 1rem' }, c: [
-        { t: 'button', a: { 'data-bw-action': 'decrement', class: 'bw-btn bw-btn-secondary' }, c: '-1' },
-        { t: 'button', a: { 'data-bw-action': 'increment', class: 'bw-btn bw-btn-primary', style: 'margin-left: 0.5rem' }, c: '+1' },
-        { t: 'button', a: { 'data-bw-action': 'reset', class: 'bw-btn', style: 'margin-left: 0.5rem' }, c: 'Reset' }
+        { t: 'button', a: { class: 'bw_act_decrement bw_bccl_btn bw_secondary' }, c: '-1' },
+        { t: 'button', a: { class: 'bw_act_increment bw_bccl_btn bw_primary', style: 'margin-left: 0.5rem' }, c: '+1' },
+        { t: 'button', a: { class: 'bw_act_reset bw_bccl_btn', style: 'margin-left: 0.5rem' }, c: 'Reset' }
       ]}
     ]
   });
@@ -64,25 +64,25 @@ app.page('/', function(client) {
   // Handle button clicks
   client.on('increment', function() {
     count++;
-    client.patch('count', String(count));
+    client.patch('count', { text: String(count) });
   });
 
   client.on('decrement', function() {
     count--;
-    client.patch('count', String(count));
+    client.patch('count', { text: String(count) });
   });
 
   client.on('reset', function() {
     count = 0;
-    client.patch('count', '0');
+    client.patch('count', { text: '0' });
   });
 });
 ```
 
 Key concepts:
-- `data-bw-action="increment"` on the button tells the client to POST `{action: "increment"}` when clicked
+- `class: 'bw_act_increment'` on the button tells the client to POST `{action: "increment"}` when clicked
 - `client.on('increment', fn)` registers a server-side handler for that action
-- `client.patch('count', '0')` sends an SSE message that updates the element with `id="count"`
+- `client.patch('count', { text: '0' })` sends an SSE message that updates the element with `id="count"` using a discriminated fields object
 
 ## Step 3: Add live metrics
 
@@ -101,15 +101,15 @@ app.page('/', function(client) {
     t: 'div', a: { style: 'margin-top: 2rem' }, c: [
       { t: 'h2', c: 'Live Metrics' },
       { t: 'div', a: { style: 'display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem' }, c: [
-        { t: 'div', a: { class: 'bw-card' }, c: [
+        { t: 'div', a: { class: 'bw_bccl_card' }, c: [
           { t: 'div', a: { style: 'color: #666; font-size: 0.85rem' }, c: 'Uptime' },
           { t: 'div', a: { id: 'uptime', style: 'font-size: 1.5rem; font-weight: 700' }, c: '0s' }
         ]},
-        { t: 'div', a: { class: 'bw-card' }, c: [
+        { t: 'div', a: { class: 'bw_bccl_card' }, c: [
           { t: 'div', a: { style: 'color: #666; font-size: 0.85rem' }, c: 'Memory' },
           { t: 'div', a: { id: 'memory', style: 'font-size: 1.5rem; font-weight: 700' }, c: '--' }
         ]},
-        { t: 'div', a: { class: 'bw-card' }, c: [
+        { t: 'div', a: { class: 'bw_bccl_card' }, c: [
           { t: 'div', a: { style: 'color: #666; font-size: 0.85rem' }, c: 'Requests' },
           { t: 'div', a: { id: 'requests', style: 'font-size: 1.5rem; font-weight: 700' }, c: '0' }
         ]}
@@ -123,16 +123,16 @@ app.page('/', function(client) {
     var mem = Math.round(process.memoryUsage().heapUsed / 1024 / 1024);
 
     client.batch(
-      { type: 'patch', target: 'uptime', content: uptime + 's' },
-      { type: 'patch', target: 'memory', content: mem + ' MB' },
-      { type: 'patch', target: 'requests', content: String(requestCount) }
+      { type: 'patch', ref: 'uptime', text: uptime + 's', v: 1 },
+      { type: 'patch', ref: 'memory', text: mem + ' MB', v: 1 },
+      { type: 'patch', ref: 'requests', text: String(requestCount), v: 1 }
     );
   }, 2000);
 
   // Track actions as requests
-  client.on('increment', function() { count++; requestCount++; client.patch('count', String(count)); });
-  client.on('decrement', function() { count--; requestCount++; client.patch('count', String(count)); });
-  client.on('reset',     function() { count = 0; requestCount++; client.patch('count', '0'); });
+  client.on('increment', function() { count++; requestCount++; client.patch('count', { text: String(count) }); });
+  client.on('decrement', function() { count--; requestCount++; client.patch('count', { text: String(count) }); });
+  client.on('reset',     function() { count = 0; requestCount++; client.patch('count', { text: '0' }); });
 
   // Clean up when client disconnects
   client.on('disconnect', function() {
@@ -169,7 +169,7 @@ Append a scrolling log that records every action:
   // In each handler:
   client.on('increment', function() {
     count++; requestCount++;
-    client.patch('count', String(count));
+    client.patch('count', { text: String(count) });
     logEvent('increment → ' + count);
   });
 ```
@@ -194,7 +194,7 @@ Add a second page:
 
 ```javascript
 app.page('/settings', function(client) {
-  client.render('#app', {
+  client.mount('#app', {
     t: 'div', c: [
       { t: 'h1', c: 'Settings' },
       { t: 'a', a: { href: '/' }, c: 'Back to Dashboard' },
@@ -215,37 +215,38 @@ Browser                              Server (Node.js)
   |  <── HTML shell (bitwrench + SSE)    |
   |                                      |
   |  GET /events/:id (SSE)               |
-  |  <── {type:'replace', target:'#app', |
-  |       node: {t:'div', c:[...]}}      |
+  |  <── {type:'mount', ref:'#app',      |
+  |       taco: {t:'div', c:[...]},      |
+  |       v:1}                           |
   |                                      |
   |  User clicks [+1] button             |
   |  POST /action/:id                    |
   |  {action:'increment', data:{}}  ──>  |
   |                                      |  count++
   |  <── {type:'patch',                  |
-  |       target:'count',                |
-  |       content:'1'}                   |
+  |       ref:'count',                   |
+  |       text:'1', v:1}                 |
   |                                      |
   |  (every 2s)                          |
   |  <── {type:'batch', ops:[            |
-  |       {type:'patch',target:'uptime'} |
-  |       {type:'patch',target:'memory'} |
-  |      ]}                              |
+  |       {type:'patch',ref:'uptime'}    |
+  |       {type:'patch',ref:'memory'}    |
+  |      ], v:1}                         |
 ```
 
 ## Protocol messages
 
 | Type | Method | What it does |
 |------|--------|-------------|
-| `replace` | `client.render(target, taco)` | Replace element content with TACO |
-| `patch` | `client.patch(id, text, attrs)` | Update text/attributes of element |
-| `append` | `client.append(target, taco)` | Add child element |
-| `remove` | `client.remove(target)` | Remove element from DOM |
+| `mount` | `client.mount(ref, taco)` | Mount TACO tree into element |
+| `patch` | `client.patch(ref, fields)` | Update element via discriminated fields (`text`, `attrs`, `css`, etc.) |
+| `append` | `client.append(ref, taco)` | Add child element |
+| `remove` | `client.remove(ref)` | Remove element from DOM |
 | `batch` | `client.batch(op1, op2, ...)` | Multiple ops in one frame |
 | `message` | `client.message(level, text)` | Show notification |
-| `call` | `client.call(name, ...args)` | Invoke registered or built-in function |
-| `exec` | `client.exec(code)` | Run arbitrary JS (requires `allowExec`) |
-| `register` | `client.register(name, body)` | Send named function to client |
+| `call` | `client.call(name, ...args)` | Invoke built-in client-side function |
+
+All messages are stamped `v: 1`.
 
 ### Screenshots
 
@@ -256,7 +257,7 @@ The server can capture what the browser is displaying:
 var app = create({ port: 7902, allowScreenshot: true });
 
 app.page('/', function(client) {
-  client.render('#app', myDashboard);
+  client.mount('#app', myDashboard);
 
   client.on('capture', async function() {
     // Capture the full page as PNG

package/docs/tutorial-embedded.md

@@ -45,11 +45,11 @@ Copy the embedded C headers into your project:
 ```
 my_project/
   my_project.ino
-  bitwrench.h      ← from embedded_c/
-  bwserve.h        ← from embedded_c/
+  bitwrench.h      <- from embedded_c/
+  bwserve.h        <- from embedded_c/
   data/
-    index.html                 ← the dashboard page
-    bitwrench.umd.min.js.gz   ← gzip -k dist/bitwrench.umd.min.js
+    index.html                 <- the dashboard page
+    bitwrench.umd.min.js.gz   <- gzip -k dist/bitwrench.umd.min.js
 ```
 
 ### With PlatformIO
@@ -64,7 +64,7 @@ data/
   bitwrench.umd.min.js.gz
 ```
 
-Store the gzipped file on flash (~40KB instead of ~150KB). ESPAsyncWebServer
+Store the gzipped file on flash (~45KB instead of ~169KB). ESPAsyncWebServer
 serves `.gz` files transparently -- the browser decompresses automatically.
 
 ## Step 2: Write the Arduino sketch
@@ -206,20 +206,9 @@ Create `data/index.html`:
       if (raw.charAt(0) === 'r') raw = raw.slice(1).replace(/'/g, '"');
       try { var msg = JSON.parse(raw); } catch(x) { return; }
 
-      if (msg.type === 'batch') {
-        msg.ops.forEach(applyOp);
-      } else {
-        applyOp(msg);
-      }
+      bw.apply(msg);
     };
 
-    function applyOp(op) {
-      if (op.type === 'patch') {
-        var el = document.getElementById(op.target);
-        if (el) el.textContent = op.content;
-      }
-    }
-
     function sendCmd(cmd) {
       fetch('/api/command', {
         method: 'POST',
@@ -232,7 +221,7 @@ Create `data/index.html`:
 </html>
 ```
 
-This page is ~2KB. With bitwrench.umd.min.js.gz (~40KB), the total SPIFFS usage is ~42KB out of 1.5MB available. ESPAsyncWebServer serves `.gz` files transparently -- the browser decompresses automatically.
+This page is ~2KB. With bitwrench.umd.min.js.gz (~45KB), the total SPIFFS usage is ~47KB out of 1.5MB available. ESPAsyncWebServer serves `.gz` files transparently -- the browser decompresses automatically.
 
 ## Step 4: Upload and test
 
@@ -261,8 +250,8 @@ Same protocol, same macros, simulated sensors. Copy the pattern to your real ske
 | Item | Size |
 |------|------|
 | Dashboard HTML | ~2 KB |
-| bitwrench.umd.min.js.gz | ~40 KB |
-| **Total SPIFFS** | **~42 KB** |
+| bitwrench.umd.min.js.gz | ~45 KB |
+| **Total SPIFFS** | **~47 KB** |
 | ESP32 SPIFFS partition | 1.5 MB |
 | Free heap (runtime) | ~240 KB |
 | SSE frame per update | ~200 bytes |
@@ -274,7 +263,7 @@ serves `.gz` files transparently for the matching uncompressed filename.
 
 The C macros produce strings like:
 ```
-r{'type':'patch','target':'val-temp','content':'23.5 C'}
+r{'v':1,'type':'patch','ref':'val-temp','text':'23.5 C'}
 ```
 
 The `r` prefix tells the browser parser to convert single quotes to double quotes before `JSON.parse()`. This avoids escaping double quotes in C string literals — a major ergonomic win.

package/docs/tutorial-website.md

@@ -94,7 +94,7 @@ var features = bw.makeFeatureGrid({
   features: [
     { icon: 'bolt',   title: 'Fast',      desc: 'No build step, no virtual DOM. Just objects and functions.' },
     { icon: 'shield', title: 'Reliable',   desc: '100% test coverage. Works in IE11 through modern browsers.' },
-    { icon: 'code',   title: 'Simple',     desc: 'One file, ~40KB gzipped. Zero dependencies. Learn in an afternoon.' }
+    { icon: 'code',   title: 'Simple',     desc: 'One file, ~45KB gzipped. Zero dependencies. Learn in an afternoon.' }
   ]
 });
 ```
@@ -219,7 +219,7 @@ Use `bw.css()` for page-specific styles:
 
 ```javascript
 bw.injectCSS(bw.css({
-  '.brand .bw-hero': {
+  '.brand .bw_bccl_hero': {
     'text-align': 'center',
     'background': 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)',
     'color': '#fff',

package/package.json

@@ -1,14 +1,23 @@
 {
 	"name": "bitwrench",
-	"version": "2.0.32",
-	"description": "A library for javascript UI functions.",
+	"version": "2.1.0",
+	"description": "Zero-dependency JavaScript UI library. Describe UI as plain objects (TACO), render to DOM or HTML strings. Theming, components, pub/sub, server-driven UI (bwserve). No build step.",
 	"main": "./dist/bitwrench.umd.js",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/deftio/bitwrench.git"
 	},
 	"keywords": [
-		"javascript DOM UI utitlities"
+		"javascript",
+		"UI",
+		"DOM",
+		"utilities",
+		"components",
+		"theming",
+		"SSE",
+		"server-driven-ui",
+		"no-build",
+		"embedded"
 	],
 	"author": "manu a. chatterjee <deftio@deftio.com> (https://deftio.com/)",
 	"license": "BSD-2-Clause",
@@ -38,9 +47,24 @@
 			"default": "./dist/bitwrench-bccl.umd.js"
 		},
 		"./bwserve": {
+			"types": "./dist/bwserve.d.ts",
 			"import": "./dist/bwserve.esm.js",
 			"require": "./dist/bwserve.cjs.js"
 		},
+		"./util-css": {
+			"import": "./dist/bitwrench-util-css.esm.js",
+			"require": "./dist/bitwrench-util-css.cjs.js",
+			"default": "./dist/bitwrench-util-css.umd.js"
+		},
+		"./code-edit": {
+			"import": "./dist/bitwrench-code-edit.esm.js",
+			"require": "./dist/bitwrench-code-edit.cjs.js",
+			"default": "./dist/bitwrench-code-edit.umd.js"
+		},
+		"./debug": {
+			"require": "./dist/bitwrench-debug.js",
+			"default": "./dist/bitwrench-debug.js"
+		},
 		"./mcp": {
 			"import": "./src/mcp/server.js"
 		}
@@ -97,17 +121,20 @@
 		"uglifyjs": "^2.4.11"
 	},
 	"scripts": {
+		"prepare": "cp tools/hooks/pre-push .git/hooks/pre-push 2>/dev/null && chmod +x .git/hooks/pre-push 2>/dev/null || true",
 		"generate-version": "node tools/generate-version.cjs",
 		"prebuild": "npm run generate-version && npm run lint",
 		"build": "rollup --config && npm run build:css && npm run build:types && npm run build:metrics && npm run build:builds",
-		"build:types": "cp src/bitwrench.d.ts dist/bitwrench.d.ts",
+		"build:types": "cp src/bitwrench.d.ts dist/bitwrench.d.ts && cp src/bwserve.d.ts dist/bwserve.d.ts",
 		"build:css": "node src/generate-css.js",
 		"build:readme": "node tools/build-readme.js",
 		"build:watch": "rollup --config --watch",
 		"update_rm": "echo 'DEPRECATED: use build:index instead'",
 		"cleanbuild": "npm run clean && npm run build && npm run build:generated",
 		"oldtest": "./node_modules/mocha/bin/mocha test/bitwrench_test.js --reporter spec",
-		"test": "c8 --reporter=text --reporter=json-summary mocha ./test/bitwrench_ci.js ./test/bitwrench_test_coverage.js ./test/bitwrench_test_pubsub.js ./test/bitwrench_test_theme.js ./test/bitwrench_test_nodemap.js ./test/bitwrench_test_components.js ./test/bitwrench_test_coverage_gaps.js ./test/bitwrench_test_bwserve.js ./test/bitwrench_test_attach.js ./test/bitwrench_test_serve.js ./test/bitwrench_test_code_edit.js ./test/bitwrench_test_html_page.js ./test/bitwrench_test_util_css.js ./test/bitwrench_test_handle.js ./test/bitwrench_test_debug.js ./test/bitwrench_test_router.js ./test/bitwrench_test_mcp_transport.js ./test/bitwrench_test_mcp_server.js ./test/bitwrench_test_mcp_tools.js ./test/bitwrench_test_mcp_knowledge.js ./test/bitwrench_test_mcp_live.js ./test/bitwrench_test_new_apis.js -r jsdom-global/register --exit",
+		"test": "c8 --reporter=text --reporter=json-summary mocha ./test/bitwrench_ci.js ./test/bitwrench_test_coverage.js ./test/bitwrench_test_pubsub.js ./test/bitwrench_test_theme.js ./test/bitwrench_test_nodemap.js ./test/bitwrench_test_components.js ./test/bitwrench_test_coverage_gaps.js ./test/bitwrench_test_code_edit.js ./test/bitwrench_test_html_page.js ./test/bitwrench_test_util_css.js ./test/bitwrench_test_handle.js ./test/bitwrench_test_debug.js ./test/bitwrench_test_router.js ./test/bitwrench_test_new_apis.js ./test/bitwrench_test_mcp_transport.js ./test/bitwrench_test_mcp_server.js ./test/bitwrench_test_mcp_tools.js ./test/bitwrench_test_mcp_knowledge.js ./test/bitwrench_test_mcp_live.js ./test/bitwrench_test_bwserve.js ./test/bitwrench_test_attach.js ./test/bitwrench_test_serve.js -r jsdom-global/register --exit && npm run test:bundles",
+		"posttest": "node tools/drift-lint.js",
+		"test:bundles": "mocha ./test/bitwrench_test_bundles.js -r jsdom-global/register --exit",
 		"test:bwserve": "mocha ./test/bitwrench_test_bwserve.js -r jsdom-global/register",
 		"test:attach": "mocha ./test/bitwrench_test_attach.js -r jsdom-global/register",
 		"test:serve": "mocha ./test/bitwrench_test_serve.js -r jsdom-global/register --exit",
@@ -117,7 +144,9 @@
 		"test:all-unit": "c8 --reporter=text mocha './test/bitwrench_test*.js' -r jsdom-global/",
 		"testkarma": "./node_modules/karma/bin/karma start karma.conf.js",
 		"clean": "rm -rf dist/* bitwrench*.tgz",
-		"lint": "./node_modules/.bin/eslint src/bitwrench.js",
+		"lint": "./node_modules/.bin/eslint src/",
+		"lint:drift": "node tools/drift-lint.js",
+		"postbuild": "npm run lint:drift",
 		"serve": "node server.js",
 		"dev": "npm run build && npm run serve",
 		"instrument-bw": "echo 'deprecated: use c8 instead'",
@@ -131,7 +160,9 @@
 		"test:html-page": "mocha ./test/bitwrench_test_html_page.js -r jsdom-global/register",
 		"test:mcp": "mocha ./test/bitwrench_test_mcp_transport.js ./test/bitwrench_test_mcp_server.js ./test/bitwrench_test_mcp_tools.js ./test/bitwrench_test_mcp_knowledge.js -r jsdom-global/register --exit",
 		"test:mcp:e2e": "mocha ./test/bitwrench_test_mcp_e2e.js --exit --timeout 15000",
+		"test:spec21": "mocha \"dev/test_v2.1/*.spec.js\" -r jsdom-global/register --exit",
 		"test:e2e": "playwright test",
+		"test:e2e:docker": "bash tools/e2e-docker.sh",
 		"test:e2e:headed": "playwright test --headed",
 		"test:e2e:debug": "playwright test --debug",
 		"test:examples": "playwright test tests/examples.spec.js",
@@ -145,7 +176,7 @@
 		"release": "node tools/release.js",
 		"start-release": "node tools/start-release.js"
 	},
-	"homepage": "https://deftio.github.com/bitwrench/pages",
+	"homepage": "https://deftio.github.io/bitwrench/pages",
 	"overrides": {
 		"mocha": {
 			"serialize-javascript": "^7.0.3",