@plastic-js/plastic 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/plastic",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "src/index.js",
   "access": "public",
   "sideEffects": false,
@@ -57,9 +57,9 @@
     "@babel/core": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
     "@testing-library/jest-dom": "^6.9.1",
-    "babel-preset-plastic": "^0.1.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitejs/plugin-vue": "^6.0.7",
+    "babel-preset-plastic": "^0.1.5",
     "eslint": "^9.39.2",
     "eslint-config-janus": "^9.0.21",
     "eslint-plugin-mocha": "^11.3.0",

package/src/async.js

@@ -0,0 +1,88 @@
+import { createSignal } from './reactivity.js'
+
+const normalizeService = (service)=> {
+	if (typeof service === 'function'){
+		return service
+	}
+
+	if (service instanceof Promise){
+		return ()=> service
+	}
+
+	throw new TypeError('createAsync expects a Promise or a function returning a Promise')
+}
+
+const createAsync = (service)=> {
+	const runner = normalizeService(service)
+	const isLoading = createSignal(false)
+	const data = createSignal(undefined)
+	const error = createSignal(null)
+	let latestRunId = 0
+
+	const run = (...args)=> {
+		const runId = ++latestRunId
+		isLoading(true)
+		error(null)
+
+		let promise
+		try {
+			promise = runner(...args)
+		} catch(err){
+			error(err)
+			isLoading(false)
+			return Promise.reject(err)
+		}
+
+		if (!(promise instanceof Promise)){
+			const typeError = new TypeError('createAsync runner must return a Promise')
+			error(typeError)
+			isLoading(false)
+			return Promise.reject(typeError)
+		}
+
+		return promise
+			.then((value)=> {
+				if (runId !== latestRunId){
+					return value
+				}
+
+				data(value)
+				error(null)
+				return value
+			})
+			.catch((err)=> {
+				if (runId === latestRunId){
+					error(err)
+				}
+				throw err
+			})
+			.finally(()=> {
+				if (runId === latestRunId){
+					isLoading(false)
+				}
+			})
+	}
+
+	const cancel = ()=> {
+		if (!isLoading()){
+			return
+		}
+		latestRunId++
+		isLoading(false)
+	}
+
+	// Default behavior: trigger once on creation for immediate data fetch.
+	run().catch(()=> {})
+
+	return {
+		isLoading,
+		data,
+		error,
+		run,
+		cancel,
+	}
+}
+
+export {
+	createAsync,
+}

package/src/computation-context.js

@@ -1,3 +1,9 @@
+// Shared module-level state for the currently running computation.
+// Extracted into its own module so the two consumers can share the same
+// reference without forming a circular import between them:
+//   - the computation runner writes it before/after executing a tracked fn
+//   - the signal/state layer reads it when a signal is invoked (e.g.
+//     `signal()`) to register the running computation as a dependency
 let currentComputation = null
 
 const getCurrentComputation = ()=> currentComputation

package/src/index.js

@@ -39,6 +39,7 @@ import {
 	useSearchParams,
 } from './router.js'
 import { batch } from './reactivity.js'
+import { createAsync } from './async.js'
 import { mergeProps } from './merge-props.js'
 import { createSplitProps, splitProps } from './split-props.js'
 
@@ -80,6 +81,7 @@ export {
 	createContext,
 	useContext,
 	batch,
+	createAsync,
 	mergeProps,
 	splitProps,
 	createSplitProps,

package/src/jsx-runtime.js

@@ -1,12 +1,13 @@
 import {
 	batch, createComputed, createSignal, createTree, effect, isComputed, isSignal, isTree, runUntracked, toRaw,
 } from './reactivity.js'
+import { getActiveSub, setActiveSub } from 'alien-signals'
 import {
 	flattenChildren, isEventProp, normalizeTextNodeValue, toClassMap, toClassTokens,
 } from './utils.js'
 import { getCurrentComputation, setCurrentComputation } from './computation-context.js'
 import { createControlFlow } from './control-flow.js'
-import { isMergedProps, mergeProps } from './merge-props.js'
+import { hasMergedPropsStaticKeys, isMergedProps, mergeProps } from './merge-props.js'
 
 const Fragment = Symbol('Fragment')
 const OWNER = Symbol('owner')
@@ -21,32 +22,32 @@ const CONTEXT_ID = Symbol('context-id')
 
 const getCurrentOwner = ()=> currentOwner
 
+// Owner fields are lazily allocated. Most components register nothing
+// (no onMount, no context, no refs), so paying for a Set + Map + 4 arrays
+// per component dominated mount cost. Allocate each collection only on first
+// use. Readers must tolerate `undefined`.
 const createOwner = (parent = null)=> {
 	const owner = {
 		parent,
-		children: new Set(),
-		cleanups: [],
-		effects: [],
-		contexts: new Map(),
-		refs: [],
-		mounts: [],
+		children: undefined,
+		cleanups: undefined,
+		effects: undefined,
+		contexts: undefined,
+		refs: undefined,
+		mounts: undefined,
 		mounted: false,
 	}
 	if (parent){
-		parent.children.add(owner)
+		(parent.children ??= new Set()).add(owner)
 	}
 	return owner
 }
 
 const runOwnerMounts = (owner)=> {
 	runUntracked(()=> {
-		owner.children.forEach(child=> runOwnerMounts(child))
-		owner.refs.forEach((fn)=> {
-			fn()
-		})
-		owner.mounts.forEach((fn)=> {
-			fn()
-		})
+		owner.children?.forEach(child=> runOwnerMounts(child))
+		owner.refs?.forEach((fn)=> { fn() })
+		owner.mounts?.forEach((fn)=> { fn() })
 		owner.mounted = true
 	})
 }
@@ -87,29 +88,33 @@ const mountOwnedSubtree = (node)=> {
 
 const disposeOwner = (owner)=> {
 	if (owner.parent){
-		owner.parent.children.delete(owner)
+		owner.parent.children?.delete(owner)
 	}
 
 	// Dispose all child owners recursively
-	owner.children.forEach(child=> disposeOwner(child))
-	owner.children.clear()
+	if (owner.children){
+		owner.children.forEach(child=> disposeOwner(child))
+		owner.children.clear()
+	}
 
 	// Stop owner-bound effects for this scope during unmount.
-	;[...owner.effects].reverse().forEach((stop)=> {
-		if (typeof stop === 'function'){
-			stop()
+	if (owner.effects){
+		for (let i = owner.effects.length - 1; i >= 0; i -= 1){
+			const stop = owner.effects[i]
+			if (typeof stop === 'function') stop()
 		}
-	})
-	owner.effects.length = 0
+		owner.effects.length = 0
+	}
 
-	;[...owner.cleanups].reverse().forEach((cleanup)=> {
-		if (typeof cleanup === 'function'){
-			cleanup()
+	if (owner.cleanups){
+		for (let i = owner.cleanups.length - 1; i >= 0; i -= 1){
+			const cleanup = owner.cleanups[i]
+			if (typeof cleanup === 'function') cleanup()
 		}
-	})
-	owner.cleanups.length = 0
-	owner.refs.length = 0
-	owner.mounts.length = 0
+		owner.cleanups.length = 0
+	}
+	if (owner.refs) owner.refs.length = 0
+	if (owner.mounts) owner.mounts.length = 0
 }
 
 const flushCleanups = (list)=> {
@@ -151,8 +156,8 @@ const createBindingEffect = (runner)=> {
 		return stop
 	}
 	// Register effect and its disposal in the owner
-	owner.effects.push(stop)
-	owner.cleanups.push(()=> {
+	(owner.effects ??= []).push(stop)
+	;(owner.cleanups ??= []).push(()=> {
 		// Run remaining local cleanups, untracked to avoid accidental dependency registration
 		flushCleanups(local)
 	})
@@ -168,7 +173,7 @@ const registerCleanup = (fn)=> {
 	if (currentComputation){
 		currentComputation.cleanups.push(fn)
 	} else {
-		currentOwner.cleanups.push(fn)
+		(currentOwner.cleanups ??= []).push(fn)
 	}
 }
 
@@ -177,14 +182,14 @@ const onMount = (fn)=> {
 	if (!currentOwner){
 		throw new Error('onMount must be called within a component scope')
 	}
-	currentOwner.mounts.push(fn)
+	(currentOwner.mounts ??= []).push(fn)
 }
 
 const onUnmount = (fn)=> {
 	if (!currentOwner){
 		throw new Error('onUnmount must be called within a component scope')
 	}
-	currentOwner.cleanups.push(fn)
+	(currentOwner.cleanups ??= []).push(fn)
 }
 
 const createContext = (defaultValue)=> {
@@ -198,7 +203,7 @@ const createContext = (defaultValue)=> {
 			throw new Error('Context Provider must be rendered within a component scope')
 		}
 
-		currentOwner.contexts.set(context[CONTEXT_ID], value)
+		(currentOwner.contexts ??= new Map()).set(context[CONTEXT_ID], value)
 
 		if (typeof children === 'function'){
 			return children()
@@ -221,7 +226,7 @@ const useContext = (context)=> {
 
 	let owner = currentOwner
 	while (owner){
-		if (owner.contexts.has(context[CONTEXT_ID])){
+		if (owner.contexts?.has(context[CONTEXT_ID])){
 			return owner.contexts.get(context[CONTEXT_ID])
 		}
 		owner = owner.parent
@@ -331,8 +336,21 @@ const materializeComponentDescriptor = (descriptor)=> {
 		componentProps = mergeProps(componentProps, { children: kids })
 	}
 
-	const result = runUntracked(()=> runWithOwner(owner, ()=> descriptor.tag(componentProps)))
-	const normalized = runUntracked(()=> renderInOwner(owner, result))
+	// Fuse the owner swap and untracked context into one try/finally. Inlining
+	// avoids the runUntracked closure + extra try/finally per component, which
+	// shows up in profile (3000 components × these wrappers was a meaningful
+	// share of mount time).
+	const prevOwner = currentOwner
+	const prevSub = getActiveSub()
+	currentOwner = owner
+	setActiveSub(undefined)
+	let normalized
+	try {
+		normalized = node2Element(descriptor.tag(componentProps))
+	} finally {
+		currentOwner = prevOwner
+		setActiveSub(prevSub)
+	}
 
 	if (normalized instanceof Node){
 		normalized[OWNER] = owner
@@ -594,7 +612,7 @@ const applyRefProp = (element, ref)=> {
 	const owner = currentOwner
 	
 	if (owner && !owner.mounted) {
-		owner.refs.push(() => assignRef(element))
+		(owner.refs ??= []).push(() => assignRef(element))
 	} else {
 		assignRef(element)
 	}
@@ -623,6 +641,41 @@ const disposeBindings = (bindings)=> {
 // zero-arg accessor thunks (used widely by ark-plastic / zag adapters) are
 // unwrapped before being applied to the DOM.
 const bindReactiveProp = (element, props, key)=> {
+	const rawValue = props[key]
+
+	// Static (non-reactive) fast path: write the prop directly with no binding
+	// effect. Most JSX props in real apps are static (className='row', id=...,
+	// type='button' etc.) — building an effect for each one was the biggest
+	// per-component cost in mount benchmarks.
+	if (!isReactive(rawValue)){
+		let prevStyleValue
+		if (key === 'className' || key === 'class'){
+			applyClassProp(element, rawValue)
+		} else if (key === 'style'){
+			prevStyleValue = applyStyleProp(element, rawValue, undefined)
+		} else {
+			const domKey = JSX_PROP_MAP[key] ?? key
+			setDomProp(element, domKey, rawValue)
+		}
+
+		return ()=> {
+			if (key === 'className' || key === 'class'){
+				element.removeAttribute('class')
+				return
+			}
+			if (key === 'style'){
+				if (prevStyleValue && typeof prevStyleValue === 'object'){
+					Object.keys(prevStyleValue).forEach(prop=> clearStyleKey(element, prop))
+				} else if (typeof prevStyleValue === 'string'){
+					element.style.cssText = ''
+				}
+				return
+			}
+			const domKey = JSX_PROP_MAP[key] ?? key
+			clearDomProp(element, domKey)
+		}
+	}
+
 	let prevStyleValue
 	const stop = createBindingEffect(()=> {
 		const value = resolveReactiveValue(props[key])
@@ -694,11 +747,15 @@ const bindReactiveEvent = (element, props, key)=> {
 // keys later we tear down the previous bindings and rebuild them from the
 // current key set.
 const applyProps = (element, props = {})=> {
-	createBindingEffect(()=> {
+	const setup = ()=> {
 		const bindings = []
-		registerCleanup(()=> {
-			disposeBindings(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)
+			})
+		}
 
 		for (const key of Reflect.ownKeys(props)){
 			if (typeof key === 'symbol' || key === 'children' || key === 'key'){
@@ -723,40 +780,68 @@ const applyProps = (element, props = {})=> {
 			}
 			bindings.push(bindReactiveProp(element, props, key))
 		}
-	})
+	}
+
+	// Only wrap in an outer binding effect when the proxy has dynamic keys (a
+	// function-typed spread source like `{...api()}`). For static-key proxies
+	// (the common babel reactive transform output with no spreads), and for
+	// plain object props, keys never change — skip the outer effect to avoid
+	// one owner-effect allocation per element.
+	if (isMergedProps(props) && !hasMergedPropsStaticKeys(props)){
+		createBindingEffect(setup)
+	} else {
+		setup()
+	}
 	return element
 }
 
 // Normalize any JSX return value into a DOM node that can be appended safely.
+// Dispatch is organized as a `typeof` switch so the engine can lower it to a
+// jump table, and the most frequent shapes are handled first:
+//   - 'string'/'number': text children like `["item ", i]` (hottest in lists)
+//   - 'object' → Node: the Element returned from a component body
+//   - 'object' → descriptor: child components in an array
+// Within the 'object' arm we use `node.nodeType != null` instead of
+// `instanceof Node`, since a property read is cheaper than walking the
+// prototype chain, and we read the descriptor symbol directly to skip the
+// redundant `typeof === 'object'` check inside isComponentDescriptor.
 const node2Element = (node)=> {
-	if (node === null || node === undefined){
-		return createPlaceholder()
-	}
-	if (isComponentDescriptor(node)){
-		return materializeComponentDescriptor(node)
-	}
-	if (isReactivePrimitive(node)){
-		return createReactiveTextNode(node)
-	}
-	if (typeof node === 'function'){
-		return createReactiveChildNode(node)
-	}
-	if (typeof node === 'string' || typeof node === 'number'){
-		return document.createTextNode(String(node))
-	}
-	if (node instanceof Node){
-		flushPendingDescriptors(node)
-		return node
-	}
-	if (Array.isArray(node)){
-		const fragment = document.createDocumentFragment()
-		appendChildren(fragment, node)
-		// Do NOT flush here — the caller (appendChild) will transfer any pending
-		// descriptors to the real parent element before draining the fragment, so
-		// flushPendingDescriptors runs later with the correct owner active.
-		return fragment
+	switch (typeof node){
+		case 'string':
+		case 'number':
+			return document.createTextNode(String(node))
+		case 'function':
+			// Signals and computeds are functions too (alien-signals binds an
+			// operator function) — they render as reactive text nodes, while a
+			// plain function child is a thunk that returns dynamic content.
+			if (isReactivePrimitive(node)) return createReactiveTextNode(node)
+			return createReactiveChildNode(node)
+		case 'undefined':
+			return createPlaceholder()
+		case 'object': {
+			if (node === null) return createPlaceholder()
+			// Real DOM node returned from h()/jsx() — by far the most common
+			// 'object' case during initial mount.
+			if (node.nodeType != null){
+				flushPendingDescriptors(node)
+				return node
+			}
+			if (node[COMPONENT_DESCRIPTOR] === true){
+				return materializeComponentDescriptor(node)
+			}
+			if (Array.isArray(node)){
+				const fragment = document.createDocumentFragment()
+				appendChildren(fragment, node)
+				// Do NOT flush here — the caller (appendChild) will transfer any pending
+				// descriptors to the real parent element before draining the fragment, so
+				// flushPendingDescriptors runs later with the correct owner active.
+				return fragment
+			}
+			return createPlaceholder()
+		}
+		default:
+			return createPlaceholder()
 	}
-	return createPlaceholder()
 }
 
 const materializeNode = node=> node2Element(node)
@@ -956,10 +1041,212 @@ const jsx = (tag, props, key)=> {
 	return h(tag, mergeProps(props, { key }))
 }
 const jsxs = jsx
+
+// Static fast path counterpart to applyProps: writes a single literal value
+// straight to the DOM with no isReactive check, no binding-effect wrapper, and
+// no JSX_PROP_MAP miss for the hot keys. Used exclusively by jsxStatic, which
+// the babel reactive transform emits when every attribute value is provably a
+// scalar literal (string/number/boolean/null) — so there is nothing to track,
+// nothing to dispose, and the prop never changes after initial mount.
+const applyStaticProp = (element, key, value)=> {
+	if (key === 'className' || key === 'class'){
+		applyClassProp(element, value)
+		return
+	}
+	if (key === 'style'){
+		applyStyleProp(element, value, undefined)
+		return
+	}
+	setDomProp(element, JSX_PROP_MAP[key] ?? key, value)
+}
+
+// jsxStatic — emitted by the babel reactive transform when ALL of these hold:
+//   - tag is a lowercase intrinsic string (no components, no Dynamic)
+//   - at least one attribute, none of them spread
+//   - every attribute value is a scalar literal (string/number/boolean/null)
+//
+// Under those conditions there are no reactive props, no event handlers, no
+// refs, no merged-props proxy — applyProps' entire dispatch machinery
+// (createBindingEffect / isMergedProps / Reflect.ownKeys / bindReactiveProp /
+// isReactive) is pure overhead. We bypass it and write each prop directly.
+// Children pass through unchanged: babel emits the same child expressions it
+// would for jsx(), so dynamic children still arrive as thunks/descriptors and
+// are routed through appendChild's existing reactive/defer paths.
+const jsxStatic = (tag, props, child)=> {
+	const element = SVG_TAGS.has(tag)
+		? document.createElementNS('http://www.w3.org/2000/svg', tag)
+		: document.createElement(tag)
+	for (const key in props){
+		// Defensive: skip framework-reserved keys in case the babel transform
+		// ever emits them here. `children` shouldn't appear (it's the third
+		// arg), and `key` is consumed by the reconciler upstream.
+		if (key === 'children' || key === 'key') continue
+		applyStaticProp(element, key, props[key])
+	}
+	if (child !== undefined){
+		// Babel emits the third arg as a single value when there is one child
+		// and an array when there are several — mirror jsx() / jsxs() shape.
+		if (Array.isArray(child)){
+			appendChildren(element, child)
+		} else {
+			appendChild(element, child)
+		}
+	}
+	return element
+}
 // jsxDEV is the development-mode variant used by automatic JSX transforms; the extra
 // debug arguments (isStaticChildren, source, self) are unused at runtime.
 const jsxDEV = (tag, props, key) => jsx(tag, props, key)
 
+// ============ DOM template cloning (Solid-style) ============
+// Three helpers the babel reactive transform can emit when it identifies a
+// statically-shaped JSX subtree. They let the framework skip per-element
+// createElement/applyProps/appendChild for the static skeleton and only do
+// runtime work for the dynamic holes that babel can't fold into the template.
+//
+// Emission shape from babel:
+//   const _tmpl$ = /*#__PURE__*/ template('<div class="row"><span>item </span></div>')
+//   const Row = ({i}) => {
+//     const _el = _tmpl$.cloneNode(true)
+//     const _span = _el.firstChild
+//     insert(_span, () => i, null)   // dynamic text appended at end of span
+//     return _el
+//   }
+// Static props go into the template string itself; dynamic props use setProp;
+// dynamic children use insert. There is no separate clone helper — babel emits
+// `_tmpl$.cloneNode(true)` directly.
+
+// Parse `html` into a detached template and return the first child of its
+// content. Babel emits ONE module-level `template()` call per unique static
+// shape, so the parse cost is amortized across every instance — only the
+// per-instance `cloneNode(true)` remains hot.
+//
+// SVG note: an `<svg>` element parsed via innerHTML of an HTMLTemplateElement
+// correctly inherits the SVG namespace, but standalone SVG children (`<circle>`
+// at the root) do not — pass isSVG=true to wrap-then-unwrap so the namespace
+// resolves on every node.
+const template = (html, isSVG = false)=> {
+	const t = document.createElement('template')
+	if (isSVG){
+		t.innerHTML = `<svg>${html}</svg>`
+		const svgRoot = t.content.firstChild
+		// Unwrap so the caller's first cloneNode points at the real root.
+		return svgRoot.firstChild ?? svgRoot
+	}
+	t.innerHTML = html
+	return t.content.firstChild
+}
+
+// Recursively resolve `value` (which may be a thunk, signal, descriptor, node,
+// primitive, or array) into a flat list of Nodes ready to insert. Mirrors what
+// node2Element does but flattens arrays in place instead of producing a
+// DocumentFragment, since insert() needs direct control over each Node so the
+// next reactive run can remove exactly the nodes it inserted.
+const resolveChildToNodes = (value, out)=> {
+	let v = value
+	// Walk through plain thunks (NOT signals/computeds — those resolve to a
+	// reactive text node so the framework can update .data in place).
+	let steps = 0
+	while (typeof v === 'function' && !isReactivePrimitive(v) && steps < MAX_REACTIVE_RESOLVE_STEPS){
+		v = v()
+		steps += 1
+	}
+	if (v == null || v === true || v === false) return
+	if (v instanceof Node){
+		out.push(v)
+		return
+	}
+	if (Array.isArray(v)){
+		for (const item of v) resolveChildToNodes(item, out)
+		return
+	}
+	if (isComponentDescriptor(v)){
+		out.push(materializeComponentDescriptor(v))
+		return
+	}
+	if (isReactivePrimitive(v)){
+		out.push(createReactiveTextNode(v))
+		return
+	}
+	out.push(document.createTextNode(String(v)))
+}
+
+// Insert dynamic content into `parent` immediately before `marker` (or at the
+// end when marker is null). Static accessors run once; functions/signals wrap
+// in a binding effect so the slot updates whenever the source changes.
+//
+// Single-text-node fast path: when both the previous and next render produce a
+// single text/string/number, mutate the existing text node's `.data` instead
+// of swapping nodes. This matches Solid's behavior and avoids DOM thrash for
+// the common `{count()}` shape.
+const insert = (parent, accessor, marker = null)=> {
+	if (typeof accessor !== 'function'){
+		const nodes = []
+		resolveChildToNodes(accessor, nodes)
+		for (const n of nodes) parent.insertBefore(n, marker)
+		return
+	}
+	let current = []
+	createBindingEffect(()=> {
+		const next = accessor()
+
+		// Fast path: single existing text node + scalar next value → in-place data update.
+		if (current.length === 1 && current[0].nodeType === 3
+			&& (typeof next === 'string' || typeof next === 'number')){
+			const str = String(next)
+			if (current[0].data !== str) current[0].data = str
+			return
+		}
+
+		const nodes = []
+		resolveChildToNodes(next, nodes)
+
+		// Naive diff: remove current, insert next. Adequate for single-slot
+		// inserts; keyed list reconciliation is handled separately by <Loop>.
+		for (const n of current){
+			if (n.parentNode === parent) parent.removeChild(n)
+		}
+		for (const n of nodes) parent.insertBefore(n, marker)
+
+		// Mount any owners attached to inserted subtrees (component roots inside
+		// the inserted nodes register their owner on the DOM node — runOwnerMounts
+		// must fire once they're connected).
+		if (parent.isConnected){
+			for (const n of nodes) mountOwnedSubtree(n)
+		}
+
+		current = nodes
+	})
+}
+
+// Apply a single prop (static or reactive) to an element. Static values write
+// once; function/signal values wrap in a binding effect that re-applies on
+// change. Class and style go through the existing helpers so the
+// merge/diff semantics stay identical to the JSX path.
+const setProp = (element, key, accessor)=> {
+	if (typeof accessor !== 'function' || isReactivePrimitive(accessor)){
+		// Reactive primitives (signal/computed) also go through the effect path
+		// so the prop stays in sync — handled in the else branch below.
+		if (!isReactive(accessor)){
+			applyStaticProp(element, key, accessor)
+			return
+		}
+	}
+	let prevStyle
+	createBindingEffect(()=> {
+		const v = resolveReactiveValue(accessor)
+		if (key === 'className' || key === 'class'){
+			applyClassProp(element, v)
+			return
+		}
+		if (key === 'style'){
+			prevStyle = applyStyleProp(element, v, prevStyle)
+			return
+		}
+		setDomProp(element, JSX_PROP_MAP[key] ?? key, v)
+	})
+}
+
 // Render by appending the normalized root node into the target container.
 // Returns a disposer function that cleans up all effects and listeners.
 const renderApp = (container, node)=> {
@@ -995,6 +1282,13 @@ export {
 	jsx,
 	jsxDEV,
 	jsxs,
+	jsxStatic,
+	// DOM template cloning helpers (babel reactive transform emits these for
+	// statically-shaped JSX subtrees — they let cloned templates skip the
+	// per-element jsx()/applyProps machinery)
+	template,
+	insert,
+	setProp,
 	onMount,
 	onUnmount,
 	createContext,

package/src/merge-props.js

@@ -218,11 +218,30 @@ const readOnlyTrap = ()=> {
 }
 
 const IS_MERGED_PROPS = Symbol('mergeProps')
+const HAS_STATIC_KEYS = Symbol('mergeProps.staticKeys')
 
 export const mergeProps = (...sources)=> {
+	// Fast path: a single plain-object source is structurally equivalent to the
+	// object itself for prop access (no class/className aliasing across sources,
+	// no style merging, no spread thunks). Babel reactive transform wraps every
+	// JSX in `mergeProps({...})` even with no spreads, so this short-circuit
+	// eliminates one Proxy allocation per element on the typical render path.
+	if (sources.length === 1 && sources[0] != null && typeof sources[0] === 'object' && isPlainObject(sources[0])){
+		return sources[0]
+	}
+
+	// When no source is a function-typed spread (`{...api()}`), the key set is
+	// fixed at construction time — applyProps can skip its outer key-tracking
+	// effect entirely. This is the common case under the babel reactive transform
+	// which wraps every JSX in mergeProps even when there are no spreads.
+	let hasStaticKeys = true
+	for (let i = 0; i < sources.length; i += 1){
+		if (typeof sources[i] === 'function'){ hasStaticKeys = false; break }
+	}
 	return new Proxy({}, {
 		get: (_, key)=> {
 			if (key === IS_MERGED_PROPS) return true
+			if (key === HAS_STATIC_KEYS) return hasStaticKeys
 			return resolveKey(sources, key)
 		},
 		has: (_, key)=> hasKey(sources, key),
@@ -243,3 +262,4 @@ export const mergeProps = (...sources)=> {
 }
 
 export const isMergedProps = (value)=> value != null && typeof value === 'object' && value[IS_MERGED_PROPS] === true
+export const hasMergedPropsStaticKeys = (value)=> value != null && typeof value === 'object' && value[HAS_STATIC_KEYS] === true

package/src/reactivity.js

@@ -353,9 +353,19 @@ const tree = (obj)=> {
 // Internal binding effects/computations create their own active subscribers,
 // so suppressing the outer one here only affects bare signal reads in the
 // component body.
+// Fast path: when no subscriber is currently active (the typical case during
+// initial mount from `renderApp`, outside any enclosing effect), the
+// swap-to-undefined and restore are both no-ops. Skip the try/finally and the
+// swap entirely — this is invoked once per component, so eliminating the
+// instrumentation here removes measurable per-component overhead during mount.
+//
+// Slow path: a single `setActiveSub(undefined)` swap returns the previous
+// subscriber in one call, saving the separate `getActiveSub()` read.
 const runUntracked = (fn)=> {
-	const prevSub = getActiveSub()
-	setActiveSub(undefined)
+	if (getActiveSub() === undefined){
+		return fn()
+	}
+	const prevSub = setActiveSub(undefined)
 	try {
 		return fn()
 	} finally {