@symbiote-native/vue 1.0.0 → 3.0.0

package/build/runtime-helpers/index.js

@@ -6,17 +6,27 @@
 // real HTMLElement - we have no DOM, so this module supplies our OWN implementation under the
 // same export name instead of leaving `v-show` a silent no-op.
 //
-// Scope: Vue's own template directives (v-show, Teleport) and, since host-primitive lowering
-// landed, `v-model` on an ELEMENT — see vModelText below for why that stopped being out of scope.
+// Scope: Vue's own template directives (v-show, Teleport) and `v-model` on an ELEMENT — see
+// vModelText below for why that is in scope.
 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 { componentOf, propOf, 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.
 //
@@ -71,12 +81,10 @@ export function normalizeProps(props) {
 // contract reads it (`Pressable.js`: `ViewStyleProp | ((state) => ViewStyleProp)` — the callback is
 // top-level, never an array element, so `:style="[a, fn]"` is out of contract here exactly as it is
 // there, and is deliberately NOT rescued).
-// The THIRD door, and the one that decides whether the state-style split can leave the transforms
-// at all. A `:style` binding on a lowered element compiles to `_normalizeStyle(expr)` whenever the
-// compiler cannot keep it on the cheap patch-flag path — an inline arrow and a call expression both
-// do, a bare identifier does not. So `<Pressable :style="({pressed}) => …" />` loses its callback
-// here, and today nothing notices because the lowering transform rewrites that attribute into a
-// resting/active pair before Vue ever emits the helper.
+// The THIRD door. A `:style` binding compiles to `_normalizeStyle(expr)` whenever the compiler
+// cannot keep it on the cheap patch-flag path — an inline arrow and a call expression both do, a
+// bare identifier does not. So `<pressable :style="({pressed}) => …">` would lose its callback here
+// without the rescue below.
 //
 // A TOP-LEVEL function is preserved; one nested inside an array is not, and that asymmetry is the
 // contract rather than an omission. React Native types the prop
@@ -117,6 +125,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 +179,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);
@@ -175,14 +198,14 @@ function modelStateFor(el) {
 // by `patchProp` during the same patch, so anything captured earlier is either missing or stale. A
 // prop that is already OUR listener means nothing overwrote it and the app half is unchanged.
 function syncModelListener(el, state) {
-    const current = el.props.onValueChange;
+    const current = propOf(el, 'onValueChange');
     if (current === state.listener)
         return;
     state.appListener = isValueChangeListener(current) ? current : undefined;
     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` — `<switch>` included. 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`.
@@ -192,11 +215,12 @@ function syncModelListener(el, state) {
 // of carrying a copy of both.
 const SWITCH_COMPONENT = descriptorFor(SWITCH_TAG).component;
 function isSwitchNode(el) {
-    return el.component === SWITCH_COMPONENT;
+    return componentOf(el) === 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 +292,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 an 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/build/utils/normalize-attrs.js

@@ -12,9 +12,9 @@ const KEBAB_SEGMENT = /-([a-z])/g;
 function toCamel(key) {
     return key.replace(KEBAB_SEGMENT, (_match, char) => char.toUpperCase());
 }
-// The per-KEY half, for the path that never sees a whole attrs bag: a host primitive lowered to
-// its intrinsic tag by the SFC transformer reaches the renderer one patchProp call at a time,
-// with no component in between to fold the bag. Returns the key unchanged (same string identity)
+// The per-KEY half, for the path that never sees a whole attrs bag: an intrinsic tag reaches the
+// renderer one patchProp call at a time, with no component in between to fold the bag. Returns the
+// key unchanged (same string identity)
 // whenever there is nothing to convert, which is every key on the hot path.
 export function normalizeVueAttrKey(key) {
     if (!key.includes('-'))

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],
+  ),
+);