@plastic-js/plastic 1.0.5 → 1.0.6

package/README.md

@@ -130,7 +130,15 @@ The Babel plugin rejects duplicate attribute names on the same JSX element at **
 
 ## JSX Compilation Paths
 
-The `babel-preset-plastic` reactive transform inspects every JSX element and lowers it to one of four runtime shapes. Paths are tried top-to-bottom; the first match wins. Earlier paths are strictly cheaper at runtime, so the transform always picks the most specialized form an element qualifies for.
+The `@plastic-js/babel-preset-plastic` reactive transform inspects every JSX element and lowers it to one of four runtime shapes. Paths are tried top-to-bottom; the first match wins. Earlier paths are strictly cheaper at runtime, so the transform always picks the most specialized form an element qualifies for.
+
+The plugin's decision cascade in one line:
+
+```
+if (foldable) { if (ops == 0) cloneNode else IIFE } else if (jsxStatic) ... else generic
+```
+
+Paths 1 and 2 share the same `foldable` branch in the source — they differ only by whether the template has dynamic holes (`plan.ops.length`). Paths 3 and 4 are the remaining `else if` / `else` arms.
 
 ### 1. Template clone (pure static subtree)
 
@@ -222,6 +230,30 @@ count(1)                             // logs 1
 
 Passing an existing signal returns it unchanged — double-wrapping is a no-op.
 
+##### Signal as a JSX child: prefer `{count}` over `{count()}`
+
+When a signal is used directly as a JSX child, the two forms below are **behaviorally equivalent** — both produce a reactive child that re-renders when the signal updates — but the bare-identifier form is the **recommended** style:
+
+```jsx
+const count = createSignal(0)
+
+<span>{count}</span>     // ✅ Recommended — Identifier passed through as-is (signal is itself a function)
+<span>{count()}</span>   // ⚠️ Discouraged — CallExpression that Babel must wrap as `() => count()`
+```
+
+Why they behave the same:
+
+- The `@plastic-js/babel-preset-plastic` reactive transform classifies identifiers as *static* and emits them unchanged, while call expressions are not static and get wrapped in a thunk (`() => count()`).
+- At runtime, `appendChild` detects any child whose `typeof === 'function'` and routes it through the reactive child path — creating a placeholder, subscribing to signal reads, and patching the DOM on change.
+
+Why prefer `{count}`:
+
+- One fewer function call per update (the `{count()}` form invokes the thunk, which then invokes the signal).
+- Slightly smaller compiled output (no synthesized `() => ...` wrapper).
+- Makes the "signal flows through as a reactive citizen" model explicit at the call site, instead of looking like an eager read.
+
+> This equivalence relies on `count` being a signal (a callable function). For a plain variable (`const count = 2`), `{count}` is a static value and `{count()}` would throw — they are *not* interchangeable in that case.
+
 #### `createComputed(fn)`
 
 Creates a lazily-evaluated derived value. The computation re-runs only when its signal dependencies change.
@@ -318,14 +350,14 @@ toRaw(state)    // { x: 1 }
 
 ### Installation
 
-Install Plastic together with its Babel toolchain. Plastic's JSX compiles in two stages: `@babel/preset-react` turns JSX into `jsx(...)` calls against Plastic's runtime, then `babel-preset-plastic` rewrites those calls for fine-grained reactivity (control-flow lifting, `mergeProps`, etc.).
+Install Plastic together with its Babel toolchain. Plastic's JSX compiles in two stages: `@babel/preset-react` turns JSX into `jsx(...)` calls against Plastic's runtime, then `@plastic-js/babel-preset-plastic` rewrites those calls for fine-grained reactivity (control-flow lifting, `mergeProps`, etc.).
 
 ```bash
 npm install @plastic-js/plastic
 npm install --save-dev \
     @babel/core \
     @babel/preset-react \
-    babel-preset-plastic \
+    @plastic-js/babel-preset-plastic \
     vite-plugin-babel
 ```
 
@@ -334,7 +366,7 @@ Then wire the presets up in `vite.config.js`:
 ```js
 import { defineConfig } from 'vite'
 import babel from 'vite-plugin-babel'
-import plasticJsx from 'babel-preset-plastic'
+import plasticJsx from '@plastic-js/babel-preset-plastic'
 
 export default defineConfig({
     plugins: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/plastic",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "src/index.js",
   "access": "public",
   "sideEffects": false,
@@ -51,6 +51,7 @@
   },
   "homepage": "https://github.com/plastic-js/plastic",
   "dependencies": {
+    "@emotion/css": "^11.13.5",
     "alien-signals": "^3.2.1"
   },
   "devDependencies": {
@@ -59,7 +60,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitejs/plugin-vue": "^6.0.7",
-    "babel-preset-plastic": "^0.1.6",
+    "@plastic-js/babel-preset-plastic": "^0.1.7",
     "eslint": "^9.39.2",
     "eslint-config-janus": "^9.0.21",
     "eslint-plugin-mocha": "^11.3.0",

package/src/jsx-runtime.js

@@ -624,15 +624,6 @@ const applyRefProp = (element, ref)=> {
 	}
 }
 
-const disposeBindings = (bindings)=> {
-	;[...bindings].reverse().forEach((dispose)=> {
-		if (typeof dispose === 'function'){
-			dispose()
-		}
-	})
-	bindings.length = 0
-}
-
 // Bind a single non-event, non-special prop key to the DOM element. Each
 // individual prop runs inside its own binding effect so a signal change in
 // one prop's getter only re-writes that one attribute. For plain (non-proxy)
@@ -751,41 +742,77 @@ const bindReactiveEvent = (element, props, key)=> {
 // current key set.
 const applyProps = (element, props = {})=> {
 	const propsIsTracked = isMergedProps(props) || isTree(props)
-	const setup = ()=> {
-		const bindings = []
-		// Only register cleanup if there's an owner/computation to attach to.
-		// Allows top-level h() calls outside any component scope (e.g. tests).
-		if (currentOwner || getCurrentComputation()){
-			registerCleanup(()=> {
-				disposeBindings(bindings)
-			})
+	// Per-key disposer map. Re-runs of the outer key-tracking effect diff the
+	// previous and current key set so only added/removed keys touch the DOM;
+	// surviving keys keep their per-prop binding (which already short-circuits
+	// on prev===next inside setDomProp). Tearing down all bindings on every
+	// signal change was the cause of NO-OP attribute thrash on Zag widgets.
+	const bindings = new Map()
+
+	const createBindingForKey = (key)=> {
+		if (key === 'classList'){
+			throw new Error('classList prop is not supported. Use className instead.')
 		}
-
-		for (const key of Reflect.ownKeys(props)){
-			if (typeof key === 'symbol' || key === 'children' || key === 'key'){
-				continue
-			}
-			if (key === 'classList'){
-				throw new Error('classList prop is not supported. Use className instead.')
-			}
+		// Suppress the outer effect's computation context so inner
+		// registerCleanup calls (event listeners, ref nulling) attach to the
+		// owner rather than the outer effect's per-run cleanup list. Otherwise
+		// flushCleanups on the next outer re-run would tear down listeners for
+		// keys we intend to keep.
+		const prevComp = getCurrentComputation()
+		setCurrentComputation(null)
+		try {
 			if (key === 'ref'){
 				const ref = props[key]
 				applyRefProp(element, ref)
-				bindings.push(()=> {
+				return ()=> {
 					if (typeof ref === 'function'){
 						ref(null)
 					}
-				})
-				continue
+				}
 			}
 			if (isEventProp(key)){
-				bindings.push(bindReactiveEvent(element, props, key))
+				return bindReactiveEvent(element, props, key)
+			}
+			return bindReactiveProp(element, props, key, propsIsTracked)
+		} finally {
+			setCurrentComputation(prevComp)
+		}
+	}
+
+	const setup = ()=> {
+		const nextKeys = new Set()
+		for (const key of Reflect.ownKeys(props)){
+			if (typeof key === 'symbol' || key === 'children' || key === 'key'){
 				continue
 			}
-			bindings.push(bindReactiveProp(element, props, key, propsIsTracked))
+			nextKeys.add(key)
+		}
+
+		// Dispose bindings for keys that disappeared. Surviving keys are left
+		// alone — their inner binding effects already react to value changes.
+		for (const [key, dispose] of bindings){
+			if (nextKeys.has(key)) continue
+			if (typeof dispose === 'function') dispose()
+			bindings.delete(key)
+		}
+
+		for (const key of nextKeys){
+			if (bindings.has(key)) continue
+			bindings.set(key, createBindingForKey(key))
 		}
 	}
 
+	// Register full teardown at the owner level (not the outer effect's local
+	// cleanup list) so it fires only on real unmount.
+	if (currentOwner || getCurrentComputation()){
+		registerCleanup(()=> {
+			for (const dispose of bindings.values()){
+				if (typeof dispose === 'function') dispose()
+			}
+			bindings.clear()
+		})
+	}
+
 	// Only wrap in an outer binding effect when the proxy has dynamic keys (a
 	// function-typed spread source like `{...api()}`, or any tree proxy whose
 	// key set may grow/shrink at runtime). For static-key proxies (the common