@symbiote-native/vue 1.0.0 → 2.0.0

package/build/register.js

@@ -1,35 +1,15 @@
-// Side-effect ONLY. This module exports nothing, on purpose.
+// Side-effect ONLY. Exports nothing, and must never be re-exported from the barrel.
 //
-// A lowered `<symbiote-pressable>` is an element, so the press machine lives on the engine node
-// instead of inside a component — and it gets there by `registerPressableBehavior()` having run
-// before the first node of that tag is created. The entry imports this file as a bare
-// `import './register';`.
+// The fourteen calls live once, in `@symbiote-native/components/register` — they were identical in
+// all five adapters, and each copy carried a migration ledger justifying a call against a wrapper
+// that no longer exists. What is per-adapter is only the SPELLING of the import below: every
+// `*-tag.test.*` here reaches the registry through `import './register';`, and this adapter's own
+// barrel guard pins that line.
 //
-// WHY IT CANNOT BE A RE-EXPORT, and why this file has no exports to re-export in the first place.
-// Metro turns on `inlineRequires` for production only: it moves a `require()` down to the first
-// place its binding is USED, and a barrel's `export { X } from './x'` compiles to a lazy getter. A
-// module reached only that way never evaluates unless something names X as a VALUE, so its
-// registration silently never happens — in RELEASE builds only, invisible to tsc, to vitest, and
-// even to grepping the bundle, because the code IS bundled and simply never runs. A bare
-// `import './register';` placed NEXT TO a re-export of the same specifier does not help either:
-// Babel merges the two into one dependency and the merged one stays lazy. See CLAUDE.md, "Never
-// make correctness depend on a module's load-time side effect".
-//
-// `adapters/vue/src/index.test.ts` pins the barrel against both halves of that.
-import { registerImageBehavior, registerInputAccessoryViewBehavior, registerPressableBehavior, registerSwitchBehavior, registerTextInputBehavior, } from '@symbiote-native/components';
-registerPressableBehavior();
-// Only the LOWERED tags carry this — the wrapper renders `symbiote-text-input-managed` and
-// keeps running its own lifecycle. One owner per node; see `component-names/shared.ts`.
-registerTextInputBehavior();
-// Same reason as TextInput: the wrapper renders `symbiote-switch-managed` and runs its own
-// lastNativeReport/snap-back lifecycle, so the engine's copy attaches only to the bare tag.
-registerSwitchBehavior();
-// Image owns no runtime — its behavior is a prop FOLD and nothing else, and it is registered on the
-// same `symbiote-image` the wrapper already emits rather than on a `-managed` twin. That is safe
-// only because the mapping is idempotent, which `core/components/src/behaviors/image.test.ts`
-// asserts rather than assumes; a wrapper-built node simply folds a second time and nothing moves.
-registerImageBehavior();
-// Fold-only, and it shares the wrapper's tag for the same reason Image does: the mapping has no
-// aliasing at all, so a wrapper-built node folding a second time moves nothing.
-// `core/components/src/behaviors/input-accessory-view.test.ts` asserts that rather than assuming it.
-registerInputAccessoryViewBehavior();
+// WHY A SIDE-EFFECT SUBPATH AND NOT A BARREL EXPORT. Metro turns on `inlineRequires` for PRODUCTION
+// only: it moves a `require` down to the first place its binding is used as a VALUE, and
+// `export { X } from './x'` compiles to a lazy getter. A registration reached that way never
+// evaluates in a Release build — invisible to tsc, to vitest, and to grepping the bundle. A bare
+// `import` placed NEXT TO a re-export of the same specifier does not help either: Babel merges the
+// two into one dependency and the merged dependency stays lazy.
+import '@symbiote-native/components/register';

package/build/renderer/index.js

@@ -2,7 +2,7 @@
 // the engine's tiny mutation API; the engine owns all Fabric clone-on-write, so Vue
 // drives the exact same retained tree React does: the proof the core is framework-
 // agnostic.
-import { createRenderer } from '@vue/runtime-core';
+import { callWithErrorHandling, createRenderer, ErrorCodes, markRaw, } from '@vue/runtime-core';
 import { appendChild, createAnchor, createElement, createRawText, dlog, insertBefore, removeChild, routeProp, setProp, setText, toPublicInstance, RAW_TEXT_COMPONENT, SymbioteSurface, } from '@symbiote-native/engine';
 import { descriptorFor } from '@symbiote-native/components';
 import { normalizeVueAttrKey } from '../utils/normalize-attrs.js';
@@ -15,7 +15,7 @@ function isRawText(node) {
 // RN's Text.js applies two defaults on the way to native (core/components/src/text-props.ts:
 // ellipsizeMode 'tail', allowFontScaling true unless literally false). The Vue <Text> wrapper
 // folded them with resolveTextProps; a template that the SFC transformer lowered to the
-// intrinsic `symbiote-text` has no wrapper, so the renderer seeds them instead. Without this a
+// intrinsic `text` has no wrapper, so the renderer seeds them instead. Without this a
 // numberOfLines={1} line clips mid-word with no ellipsis — device-observed, and silent.
 const TEXT_DEFAULTS = new Map([
     ['ellipsizeMode', 'tail'],
@@ -31,13 +31,51 @@ function seedTextDefaults(node) {
 // id="x">` reached Fabric with an unknown `id` and no `nativeID`, silently and on device only.
 // It lives in the renderer rather than in a transform because that covers all four Vue paths at
 // once — lowered SFC, lowered TSX, the component wrapper, and a hand-written
-// `h('symbiote-view', { id })` no compiler ever sees.
+// `h('view', { id })` no compiler ever sees.
 //
 // Caveat, and it matches what Solid's compile-time rename already does: with BOTH `id` and
 // `nativeID` on one element the last patchProp wins, where upstream gives `id` priority
 // unconditionally. Honouring that needs per-node state to remember an `id` arrived; no example or
 // test sets both, so the state is not worth carrying.
 const PROP_ALIASES = new Map([['id', 'nativeID']]);
+// RN-style event prop naming ('onPress', 'onValueChange', ...), the same convention JSX itself
+// uses to separate an event from a plain value prop — good enough to decide whether to wrap,
+// without duplicating routeProp's own ViewConfig-derived event lists here.
+const EVENT_PROP_NAME = /^on[A-Z]/;
+// A native event (a Fabric touch, a responder gesture) invokes a Pressable/TextInput/etc.
+// listener straight out of the engine's own event dispatch (core/engine/src/dispatch.ts,
+// core/components/src/behaviors/pressable.ts's `dispatch`), entirely outside anything Vue ever
+// wraps — no render, no watcher, no lifecycle hook sits between the native event and the app's
+// callback. So a throw inside `onPress={throwNow}` was a genuinely UNCAUGHT JS exception: it
+// skipped `onErrorCaptured`, skipped `app.config.errorHandler`, skipped even this adapter's own
+// default reporter (render.ts's `reportToHost`) and reached Hermes's own top-level handler
+// directly — the raw, component-stack-less redbox this was device-reported as, not the "vue
+// render (...)" framed one `reportToHost` produces. Real Vue DOM has the identical seam
+// (`patchEvent`'s `createInvoker`) for the identical reason: a DOM event is native too.
+//
+// Wrapping here, at `patchProp`, needs the OWNING instance — and `getCurrentInstance()` cannot
+// supply it: Vue resets `currentRenderingInstance` at the END of `renderComponentRoot`, BEFORE
+// the subsequent `patch()` call that actually reaches `mountElement`/`patchProp`, so by the time
+// this runs it always reads null (measured via a real thrown press listener — `handleError` never
+// found the `onErrorCaptured` ancestor because `if (instance)` was false). Real Vue DOM does not
+// use `getCurrentInstance()` for this either: `hostPatchProp` is called with an explicit 6th
+// argument, `parentComponent`, threaded down through `patch`/`mountElement` from the component
+// whose render produced the vnode — the same instance the DOM renderer's own `patchEvent` passes
+// to `callWithAsyncErrorHandling`. That parameter, not the global pointer, is the correct capture.
+//
+// `callWithErrorHandling` (the SYNC form, not `callWithAsyncErrorHandling`) is deliberate: a
+// responder-negotiation callback (`onStartShouldSetResponder`, ...) returns a boolean the engine
+// reads synchronously, and the sync form is the one that returns the call's result directly
+// rather than folding it into promise-handling for the multi-hook case.
+function wrapListenerForErrorHandling(listener, instance) {
+    const wrapper = (...args) => callWithErrorHandling(listener, instance, ErrorCodes.NATIVE_EVENT_HANDLER, args);
+    // Some listeners are marker-carrying functions, not plain callbacks — Animated.event's
+    // __getHandler() (core/engine/src/animated/event.ts) hands back exactly this shape,
+    // `Object.assign((...) => {...}, { __getEvent: () => this })`, and the engine's native-driver
+    // attach path reads `__getEvent` off the prop value it was given. A fresh closure with none of
+    // the original's own properties silently breaks that — carry them forward.
+    return Object.assign(wrapper, listener);
+}
 // An explicit `undefined` must NOT clear one of those defaults: RN treats a missing prop and an
 // explicit undefined alike, and only a literal `false` opts out of allowFontScaling. Reached
 // only when a value is already undefined, so it costs nothing on the hot path.
@@ -53,7 +91,7 @@ export function createSymbioteRenderer(surface) {
         createElement(type) {
             const descriptor = descriptorFor(type);
             // `type` as the third argument, not just `descriptor.component`: the behavior registry is
-            // keyed by the INTRINSIC TAG (`symbiote-pressable`), while a node only ever carries the
+            // keyed by the INTRINSIC TAG (`pressable`), while a node only ever carries the
             // resolved Fabric name (`RCTView`). This is the one place that still holds both, so a
             // lowered primitive whose machine lives on the engine node can be matched at all.
             const node = createElement(descriptor.component, descriptor.isText, type);
@@ -69,7 +107,16 @@ export function createSymbioteRenderer(surface) {
             // one benchmark press — and a literal is built at the call site before dlog can decide
             // anything (see core/engine/src/debug.ts).
             dlog(() => `vue createElement ${descriptor.component} -> public instance`);
-            return toPublicInstance(node);
+            // markRaw is load-bearing, not an optimization: useTemplateRef()'s return value is
+            // `readonly(shallowRef(null))` (runtime-core.cjs.js), and Vue's readonly() wraps ANY
+            // `.value` whose Object.prototype.toString reads "[object Object]" — true of a plain class
+            // instance, unlike a real DOM Element, which fails that check for free. Unmarked, a node
+            // reached through useTemplateRef() (not a plain ref()/shallowRef(), both of which skip the
+            // wrap) came back as a deep-readonly Proxy: reads worked, so `committedOf`/`whenCommitted`
+            // saw a "committed" node, but `setNativeProps`'s `node.props.style = …` silently no-op'd
+            // with a dev-only "Set operation… target is readonly" warning — device-reported 2026-09-11
+            // as "flash the right chip" doing nothing on press.
+            return markRaw(toPublicInstance(node));
         },
         createText(text) {
             // Vue mounts Fragment boundaries (v-for / v-if lists / multi-root) as EMPTY text
@@ -150,7 +197,7 @@ export function createSymbioteRenderer(surface) {
             const index = siblings.indexOf(node);
             return index >= 0 ? (siblings[index + 1] ?? null) : null;
         },
-        patchProp(el, key, _prev, next) {
+        patchProp(el, key, _prev, next, _namespace, parentComponent) {
             if (isSurface(el))
                 return;
             // Kebab -> camel happens HERE, not only inside a component wrapper: the SFC transformer
@@ -159,11 +206,15 @@ export function createSymbioteRenderer(surface) {
             // path, which already normalized.
             const normalized = normalizeVueAttrKey(key);
             const name = PROP_ALIASES.get(normalized) ?? normalized;
+            const value = next === undefined ? textDefaultFor(el, name) : next;
+            const routed = EVENT_PROP_NAME.test(name) && typeof value === 'function'
+                ? wrapListenerForErrorHandling(value, parentComponent ?? null)
+                : value;
             // routeProp makes the prop-vs-event decision from the node's ViewConfig (onPress on a
             // View becomes a listener; onTintColor on a Switch stays a prop), shared with React. The
             // class/style merge (explicit :style always winning, regardless of which of Vue's two
             // independent patchProp calls lands last) is centralized there too (core/engine/src/node.ts).
-            routeProp(el, name, next === undefined ? textDefaultFor(el, name) : next);
+            routeProp(el, name, routed);
             surface.requestCommit();
         },
         // RN has no querySelector / scope-id / innerHTML. The first two are inert; static

package/build/runtime-helpers/index.d.ts

@@ -1,7 +1,6 @@
 export * from '@vue/runtime-core';
 import { type ObjectDirective } from '@vue/runtime-core';
 import { type ISymbioteNode } from '@symbiote-native/engine';
-export { Teleport, type ITeleportTarget } from '../create-portal';
 export declare function normalizeProps(props: Record<string, unknown> | null | undefined): Record<string, unknown> | null;
 export declare function normalizeStyle(value: unknown): unknown;
 export declare function mergeProps(...args: Record<string, unknown>[]): Record<string, unknown>;
@@ -28,6 +27,16 @@ type IEventHandler<TEvent> = ((event: TEvent, ...args: never[]) => unknown) & {
  * typed as required, matching upstream Vue's own declaration — its runtime-only `!fn` guard below
  * (for a compiler-generated call site that could pass a falsy handler) isn't reflected in the
  * type there either.
+ *
+ * `@press.self` on a LOWERED element reaches this, and both halves were measured 2026-09-11 rather
+ * than assumed — the question arose because a modifier on a COMPONENT takes Vue's own event path
+ * and only an element emits the helper. `<pressable @press.self>` compiles to
+ * `_withModifiers(fn, ["self"])` imported `from "@symbiote-native/vue/runtime-helpers"` (the Metro
+ * transformer retargets every compiled `from 'vue'`), so the compiler-emitted call lands here and
+ * not on @vue/runtime-dom's. And `ISymbioteEvent` (`core/engine/src/node.ts`) declares `target`,
+ * `currentTarget` and `stopPropagation` as REQUIRED fields with the DOM semantics these guards
+ * read, so `.self` genuinely filters a bubbled press instead of degenerating to
+ * `undefined !== undefined`.
  */
 export declare function withModifiers<TEvent extends IModifierGuardableEvent>(fn: IEventHandler<TEvent>, modifiers: readonly IEventModifier[]): IEventHandler<TEvent>;
 type IKeyedEvent = {

package/build/runtime-helpers/index.js

@@ -12,11 +12,21 @@ export * from '@vue/runtime-core';
 import { getCurrentInstance, mergeProps as baseMergeProps, normalizeClass, normalizeStyle as baseNormalizeStyle, warn, } from '@vue/runtime-core';
 import { requestCommitFor, setNativeProps, setProp, whenCommitted, } from '@symbiote-native/engine';
 import { descriptorFor, SWITCH_TAG } from '@symbiote-native/components';
-// Shadows runtime-core's own Teleport for every compiled `from 'vue'` import (see the header):
-// same component, plus a runtime guard on `to`. Lives in ../create-portal so the adapter's portal
-// sits where every other adapter's does; re-exported here because THIS is the module Metro
-// rewrites `vue` to, and an `export *` alone would resolve `Teleport` to the unguarded original.
-export { Teleport } from '../create-portal/index.js';
+// Do NOT shadow runtime-core's own Teleport here, however tempting the guarded ../create-portal
+// wrapper looks (same reasoning that shadowed it in the first place, and it is wrong for this
+// file specifically). @vue/compiler-sfc recognises the literal tag name "Teleport" as one of
+// Vue's CORE built-ins at compile time — regardless of which value the name resolves to at
+// runtime — and compiles its children as a raw array with a PROPS-only patchFlag (`dynamicProps:
+// ["to"]`), never the DYNAMIC_SLOTS-flagged shape a real user component gets. Substituting a real
+// `defineComponent` under that name makes it go through Vue's ordinary component update path
+// (shouldUpdateComponent), which — for a PROPS-only patchFlag — checks ONLY the props named in
+// `dynamicProps` and never re-renders on a children/slot change at all. Confirmed by reproducing
+// through the real compiler (compileSfc) + a live mount: the wrapper's render() fires once at
+// mount and never again, so a Teleport whose content is gated by v-if (the ordinary "toast"/
+// "modal" shape) silently stops updating the moment `to` itself stays the same. `export *` above
+// already re-exports the real, unwrapped Teleport for this path — leave it there. The guarded
+// wrapper (../create-portal) is still exported from the adapter's main barrel for anyone who
+// constructs the vnode by hand (`h(Teleport, ...)`, e.g. in TSX), where no such codegen applies.
 // Shadows @vue/shared's own `normalizeProps` for every compiled `from 'vue'` import, for ONE
 // divergence: a FUNCTION-valued `style` survives it.
 //
@@ -117,6 +127,14 @@ export const vShow = {
     // Drop a still-pending first-commit wait if the element unmounts before it ever lands.
     unmounted: el => pendingShowCommits.get(el)?.(),
 };
+function textFromChangeEvent(event) {
+    const text = Reflect.get(event, 'text');
+    return typeof text === 'string' ? text : undefined;
+}
+function valueFromChangeEvent(event) {
+    const value = Reflect.get(event, 'value');
+    return typeof value === 'boolean' ? value : undefined;
+}
 const modelStates = new WeakMap();
 // Runtime guards, not casts: both slots are read out of untyped bags — `vnode.props` and
 // `node.props` are `Record<string, unknown>` — and `typeof x === 'function'` alone narrows to the
@@ -163,9 +181,16 @@ function modelStateFor(el) {
         appListener: undefined,
         trim: false,
         number: false,
-        listener: (text, event) => {
-            state.appListener?.(text, event);
-            state.assign?.(applyModelModifiers(state, text));
+        listener: event => {
+            state.appListener?.(event);
+            const text = textFromChangeEvent(event);
+            if (text !== undefined) {
+                state.assign?.(applyModelModifiers(state, text));
+                return;
+            }
+            const value = valueFromChangeEvent(event);
+            if (value !== undefined)
+                state.assign?.(value);
         },
     };
     modelStates.set(el, state);
@@ -182,7 +207,7 @@ function syncModelListener(el, state) {
     setProp(el, 'onValueChange', state.listener);
 }
 // Vue's compiler picks the directive by ELEMENT, and for anything it does not recognise as a DOM
-// input it emits `vModelText` — including a lowered `<symbiote-switch>`. Stringifying there is what
+// input it emits `vModelText` — including a lowered `<switch>`. Stringifying there is what
 // upstream must do (a DOM input's value IS a string) and what we must not: the Switch behavior
 // reads `props.value === true`, so `String(true)` pins the control OFF and no tap can move it.
 // Device-confirmed on `examples/vue-sfc` 2026-09-02, both switches on `CanaryScreen`.
@@ -195,8 +220,9 @@ function isSwitchNode(el) {
     return el.component === SWITCH_COMPONENT;
 }
 function syncModelValue(el, value) {
-    // The READ half needs no branch: the behavior calls `onValueChange(value, event)` for both
-    // primitives, and `applyModelModifiers` passes a non-string through untouched.
+    // The READ half needs no branch: the behavior calls `onValueChange(event)` for both primitives
+    // with `text`/`value` carried on the event, and `applyModelModifiers` passes a non-string through
+    // untouched.
     if (isSwitchNode(el)) {
         setProp(el, 'value', value === true);
         requestCommitFor(el);
@@ -268,6 +294,16 @@ const MODIFIER_GUARDS = {
  * typed as required, matching upstream Vue's own declaration — its runtime-only `!fn` guard below
  * (for a compiler-generated call site that could pass a falsy handler) isn't reflected in the
  * type there either.
+ *
+ * `@press.self` on a LOWERED element reaches this, and both halves were measured 2026-09-11 rather
+ * than assumed — the question arose because a modifier on a COMPONENT takes Vue's own event path
+ * and only an element emits the helper. `<pressable @press.self>` compiles to
+ * `_withModifiers(fn, ["self"])` imported `from "@symbiote-native/vue/runtime-helpers"` (the Metro
+ * transformer retargets every compiled `from 'vue'`), so the compiler-emitted call lands here and
+ * not on @vue/runtime-dom's. And `ISymbioteEvent` (`core/engine/src/node.ts`) declares `target`,
+ * `currentTarget` and `stopPropagation` as REQUIRED fields with the DOM semantics these guards
+ * read, so `.self` genuinely filters a bubbled press instead of degenerating to
+ * `undefined !== undefined`.
  */
 export function withModifiers(fn, modifiers) {
     if (!fn)

package/intrinsic-tags.cjs

@@ -0,0 +1,52 @@
+// Every tag both Vue compilers must treat as an ELEMENT rather than as a component to resolve.
+//
+// Vue decides element-vs-component in two unrelated places — `@vue/compiler-sfc`'s
+// `isCustomElement` and `@vue/babel-plugin-jsx`'s option of the same name — so the answer has to
+// come from one set or the two paths drift. That drift is not loud: a tag Vue takes for a component
+// compiles to `resolveComponent("text-input")` with its children as a slot the element path never
+// reads, which renders a blank subtree with no error.
+//
+// DERIVED, never enumerated. Until 2026-09-07 this was the prefix test `tag.startsWith('symbiote-')`
+// in ./babel-jsx.cjs — correct while every intrinsic carried that marker, and answering FALSE for
+// every tag since the prefix was dropped (`core/components/src/component-names/shared.ts` says why
+// it went). What hid it is the tag alphabet: `view` / `text` / `image` / `switch` are real SVG
+// element names, so both compilers resolve those four as elements with no configuration at all, and
+// only the hyphenated half degraded.
+//
+// SCOPE, stated because it is smaller than `ISymbioteIntrinsic`. That union also holds
+// `scroll-view`, `modal`, `activity-indicator` and the rest, but it is a TypeScript type and these
+// consumers are Babel/Metro plugins that run before TS exists. `HOST_PRIMITIVES` is the only
+// runtime-readable table reachable from here, so a hand-written `<scroll-view>` still resolves as a
+// component. Closing that needs a CJS intrinsic table in `core/components`.
+//
+// WHAT THAT GAP COSTS, measured 2026-09-11 rather than reasoned, because the first guess was that
+// the tag simply would not work. It works: `resolveComponent` falls back to the tag STRING, and
+// `normalizeChildren` then unwraps the `withCtx` default slot for an element shapeFlag, so
+// `<scroll-view><text>hi</text></scroll-view>` committed `RCTView > RCTScrollView > RCTText >
+// RCTRawText`. What it costs is a dev-mode `[Vue warn]: Failed to resolve component: scroll-view`
+// on every such element plus the component codegen path (a slot closure per element) instead of
+// `_createElementBlock`. That is a divergence from every other tag, so `ScrollView`,
+// `TouchableOpacity` and `TouchableHighlight` stay COMPONENTS on Vue until their
+// `HOST_PRIMITIVES` entries land — and `intrinsic-elements.ts` already types all three as valid
+// markup off `ISymbioteIntrinsic`, so vue-tsc accepts what the runtime compiler warns about.
+//
+// The tell that the three are still wrapped rather than merely unlisted: `src/register.ts` does
+// NOT call their behaviors, because a registered behavior plus a surviving wrapper is two owners
+// on one node. Those two facts move together or not at all.
+//
+// .cjs, and its own file rather than a copy in each consumer: two transforms carrying one
+// derivation is the drift the shared spec exists to prevent.
+
+const {
+  HOST_PRIMITIVES,
+} = require('@symbiote-native/components/host-primitives');
+
+// BOTH tags a spec entry can emit. A primitive with an `intrinsicWhen` selects between two native
+// views by one prop, so its second intrinsic is as hand-writable as its first.
+module.exports = new Set(
+  Object.values(HOST_PRIMITIVES).flatMap(entry =>
+    entry.intrinsicWhen === undefined
+      ? [entry.intrinsic]
+      : [entry.intrinsic, entry.intrinsicWhen.intrinsic],
+  ),
+);