@symbiote-native/vue 0.1.0

package/build/renderer.js

@@ -0,0 +1,129 @@
+// A Vue 3 custom renderer over @symbiote-native/engine. Each RendererOptions method maps onto
+// 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 (M3 / R4).
+import { createRenderer } from '@vue/runtime-core';
+import { appendChild, createAnchor, createElement, createRawText, dlog, insertBefore, removeChild, routeProp, setText, toPublicInstance, RAW_TEXT_COMPONENT, SymbioteSurface, } from '@symbiote-native/engine';
+import { descriptorFor } from '@symbiote-native/components';
+function isSurface(parent) {
+    return parent instanceof SymbioteSurface;
+}
+function isRawText(node) {
+    return node.component === RAW_TEXT_COMPONENT;
+}
+// One renderer per mounted surface: the options close over the surface so every mutation
+// can ask it to (microtask-coalesced) recommit. Vue has no resetAfterCommit; instead
+// requestCommit() collapses a burst of insert/patchProp within one tick into a single
+// completeRoot, exactly the seam the engine already exposes for reactive frameworks.
+export function createSymbioteRenderer(surface) {
+    const options = {
+        createElement(type) {
+            const descriptor = descriptorFor(type);
+            const node = createElement(descriptor.component, descriptor.isText);
+            // Graft the imperative public-instance API (measure / setNativeProps / focus / …) onto
+            // the raw node so a template/function ref to a host element exposes it exactly like
+            // React's getPublicInstance. toPublicInstance mutates in place and returns the SAME node
+            // identity, so the engine commit mirror (keyed on the raw node) still resolves it — the
+            // ref must keep holding this raw node by identity (shallowRef), never a deep ref. See the
+            // vue-adapter-reactivity skill.
+            dlog(`vue createElement ${descriptor.component} -> public instance`);
+            return toPublicInstance(node);
+        },
+        createText(text) {
+            // Vue mounts Fragment boundaries (v-for / v-if lists / multi-root) as EMPTY text
+            // nodes via hostCreateText(''), NOT comments, then inserts them into the (usually
+            // non-Text) container. A raw text outside a <Text> is invalid in Fabric, so an empty
+            // text here is never real content; it's a positional anchor. Map it to an engine
+            // anchor (skipped by the commit walk, no native view), exactly like createComment.
+            // Non-empty text is genuine RCTRawText content and must live inside a <Text>.
+            return text === '' ? createAnchor() : createRawText(text);
+        },
+        // Fragment / v-if / v-for placeholder. A real retained node so insert/nextSibling/
+        // parentNode ordering stays correct, but the engine's commit walk skips it: no
+        // native view is ever created. (wolf-tui fakes a comment with an empty text node;
+        // here an empty RCTRawText would actually paint, so an anchor is the right call.)
+        createComment() {
+            return createAnchor();
+        },
+        setText(node, text) {
+            setText(node, text);
+            surface.requestCommit();
+        },
+        setElementText(el, text) {
+            if (isSurface(el))
+                return;
+            // An RCTText carries its string as a single raw-text child. Reuse a lone existing
+            // one to avoid churn; otherwise replace all children with a fresh raw-text node.
+            const [first] = el.children;
+            if (el.children.length === 1 && first !== undefined && isRawText(first)) {
+                setText(first, text);
+            }
+            else {
+                for (const child of el.children.slice())
+                    removeChild(el, child);
+                appendChild(el, createRawText(text));
+            }
+            surface.requestCommit();
+        },
+        insert(child, parent, anchor) {
+            if (isRawText(child) && (isSurface(parent) || !parent.isText)) {
+                throw new Error(`Text string "${String(child.props.text)}" must be rendered inside a <Text>`);
+            }
+            if (isSurface(parent)) {
+                if (anchor)
+                    parent.insertBefore(child, anchor);
+                else
+                    parent.appendChild(child);
+            }
+            else if (anchor) {
+                insertBefore(parent, child, anchor);
+            }
+            else {
+                appendChild(parent, child);
+            }
+            surface.requestCommit();
+        },
+        remove(child) {
+            // A top-level node has no parent (it lives in surface.children); everything else
+            // detaches from its retained parent.
+            const parent = child.parent;
+            if (parent !== undefined)
+                removeChild(parent, child);
+            else
+                surface.removeChild(child);
+            surface.requestCommit();
+        },
+        parentNode(node) {
+            return node.parent ?? surface;
+        },
+        nextSibling(node) {
+            const siblings = node.parent !== undefined ? node.parent.children : surface.children;
+            const index = siblings.indexOf(node);
+            return index >= 0 ? (siblings[index + 1] ?? null) : null;
+        },
+        patchProp(el, key, _prev, next) {
+            if (isSurface(el))
+                return;
+            // 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): identical to
+            // the React host config, so the whole event layer is shared. `class`/`style` merge
+            // (explicit :style always winning over class-derived style, regardless of which of
+            // Vue's two independent patchProp calls lands last) is centralized in routeProp too
+            // (core/engine/src/node.ts) — every adapter gets it, not just this one.
+            routeProp(el, key, next);
+            surface.requestCommit();
+        },
+        // RN has no querySelector / scope-id / innerHTML. The first two are inert; static
+        // hoisting is meaningless without a raw-HTML host, so insertStaticContent degrades to
+        // an empty anchor pair (logged, never painting) rather than crashing Vue's contract.
+        querySelector: () => null,
+        setScopeId: () => { },
+        insertStaticContent(_content, parent, anchor) {
+            dlog('vue insertStaticContent unsupported — degrading to empty anchor');
+            const node = createAnchor();
+            options.insert(node, parent, anchor ?? null);
+            return [node, node];
+        },
+    };
+    return createRenderer(options);
+}

package/build/runtime-helpers.d.ts

@@ -0,0 +1,28 @@
+export * from '@vue/runtime-core';
+import { type ObjectDirective } from '@vue/runtime-core';
+import { type ISymbioteNode } from '@symbiote-native/engine';
+export declare const vShow: ObjectDirective<ISymbioteNode, boolean>;
+export declare const Teleport: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    to: {
+        type: null;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: null;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    to: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/runtime-helpers.js

@@ -0,0 +1,68 @@
+// Metro rewrites every compiled `from 'vue'` import to point HERE instead of at bare
+// `@vue/runtime-core` (see examples/*/metro-vue-transformer.js). Most of the compiler's injected
+// helpers (ref, computed, withDirectives, openBlock, …) already live in runtime-core untouched —
+// re-exported below. But two Vue template directives compile to a runtime-helper import that
+// ONLY exists in `@vue/runtime-dom` (vShow, vModelText, vModelCheckbox, vModelSelect), written
+// directly against a real HTMLElement (el.style.display, el.value, addEventListener). We have no
+// DOM, so those don't exist for us — rewriting straight to runtime-core leaves `v-show` either
+// failing at import time or silently resolving to `undefined` (a no-op directive). This module is
+// the interception point: it supplies our OWN implementation under the same export name, so the
+// compiler's import keeps resolving and the directive actually does something.
+//
+// See the vue-adapter-directives skill for the full rationale and scope (what this does and does
+// NOT cover — native-element v-model is a separate, out-of-scope case).
+export * from '@vue/runtime-core';
+import { defineComponent, h, Teleport as VueTeleport, } from '@vue/runtime-core';
+import { isSymbioteNode, setNativeProps, whenCommitted, } from '@symbiote-native/engine';
+// setNativeProps merges a partial `style` object onto the node's current one (never clobbering
+// other declarative style fields) and re-commits via the node's OWN tracked rootTag — no
+// SymbioteSurface reference needed here, which a directive hook has no access to anyway.
+//
+// whenCommitted, not a direct call: Vue's `mounted` hook fires synchronously during the patch
+// pass, but this renderer coalesces the actual Fabric commit onto a microtask
+// (surface.requestCommit()), so the node may have no committed tag yet — the same async-commit
+// race TextInput's autoFocus guards against (see vue-adapter-reactivity). A bare setNativeProps
+// here would silently no-op with no retry on the very first mount.
+const pendingShowCommits = new WeakMap();
+function applyShow(el, value) {
+    pendingShowCommits.get(el)?.();
+    const cancel = whenCommitted(el, () => setNativeProps(el, { style: { display: value ? undefined : 'none' } }));
+    pendingShowCommits.set(el, cancel);
+}
+export const vShow = {
+    mounted: (el, { value }) => applyShow(el, value),
+    updated: (el, { value }) => applyShow(el, value),
+    // Drop a still-pending first-commit wait if the element unmounts before it ever lands.
+    unmounted: el => pendingShowCommits.get(el)?.(),
+};
+// Teleport's `to` in the DOM world is usually a CSS-selector string ('body', '#modal-root'); we
+// have no querySelector (renderer.ts stubs it to null, same as insertStaticContent), so `to` here
+// must be an already-mounted host node — e.g. a ref to a persistent "overlay host" View rendered
+// once near the app root — not a selector string. This wrapper shadows runtime-core's own
+// `Teleport` (which the SFC compiler imports from 'vue' like vShow) purely to validate `to` BEFORE
+// handing it to the real Teleport: a wrong value (string, plain object, an unrendered/reactive-
+// wrapped node) throws immediately here instead of silently corrupting the retained tree deep
+// inside insert/remove — the "don't let a dev accidentally break everything" case this exists for.
+// Scope: same-surface targets only (see the React createPortal twin, create-portal.ts) — Vue's own
+// Teleport internals (disabled toggling, move-on-update) work unmodified once `to` resolves to a
+// real ISymbioteNode, since insert/remove/parentNode/nextSibling are already fully generic.
+export const Teleport = defineComponent({
+    name: 'Teleport',
+    inheritAttrs: false,
+    props: {
+        to: { type: null, default: null },
+        disabled: { type: Boolean, default: false },
+    },
+    setup(props, { slots }) {
+        return () => {
+            const { to } = props;
+            if (typeof to === 'string') {
+                throw new Error(`Teleport target must be a host node ref, not a CSS-selector string ("${to}") — symbiote has no querySelector. Pass a ref to an already-rendered element instead (e.g. <View ref="overlayHost" />, then :to="overlayHost").`);
+            }
+            if (to != null && !isSymbioteNode(to)) {
+                throw new Error('Teleport target is not a real host node — did you forget `.value` on a ref, or pass something symbiote never rendered?');
+            }
+            return h(VueTeleport, { to, disabled: props.disabled }, slots);
+        };
+    },
+});

package/build/utils/component-helpers.d.ts

@@ -0,0 +1,2 @@
+import type { ObjectEmitsOptions, SetupContext, SlotsType } from '@vue/runtime-core';
+export type ICtx<E extends ObjectEmitsOptions = ObjectEmitsOptions, S extends Record<string, any> = Record<string, any>, SS = SetupContext<E | {}, SlotsType<S>>> = SS;

package/build/utils/component-helpers.js

@@ -0,0 +1,13 @@
+// Generic-component typing helpers for the Vue adapter.
+//
+// Vue's `defineComponent` has no overload for a GENERIC setup function with separate runtime
+// options, so a component generic over an item type (the list family) cannot type its emit payloads
+// off that generic the normal way. The escape hatch (the symbiote port of pd-web-kit's pattern): a
+// generic setup FUNCTION `<T,>(props: IProps<T>, ctx: ICtx<IEmits<T>>) => render`, plus the runtime
+// options passed as a second arg cast through `as unknown as undefined` (the cast is sanctioned ONLY
+// here — it is the only way to express a generic component in plain TS; see CLAUDE.md no-`as` rule).
+//
+// `ICtx` is a thin wrapper over Vue's SetupContext that lets the generic emits type E flow through,
+// so `emit('viewableItemsChanged', info)` types `info` as `IViewableItemsChangedInfo<T>` and the
+// consumer's `@viewable-items-changed` payload is `T`, never `unknown`.
+export {};

package/build/utils/model-binding.d.ts

@@ -0,0 +1,4 @@
+export declare function resolveModelValue<T>(attrs: Record<string, unknown>, isValid: (value: unknown) => value is T): T | undefined;
+type IModelUpdateEmit<T> = ((event: 'update:modelValue', value: T) => void) & ((event: 'update:value', value: T) => void);
+export declare function emitModelUpdate<T>(emit: IModelUpdateEmit<T>, value: T): void;
+export {};

package/build/utils/model-binding.js

@@ -0,0 +1,17 @@
+// v-model support for controlled-value components (TextInput, Switch, Slider, …). Vue's bare
+// `v-model="x"` compiles to prop `modelValue` + emit `update:modelValue`; named `v-model:value="x"`
+// compiles to prop `value` + emit `update:value`. These are independent compiler targets, not
+// alternatives, so a component accepts either input and fires both update events rather than
+// picking one. The RN-parity `value` prop/emit pair is untouched either way. See the
+// vue-adapter-events skill (Rule 6) for the read-every-site gotcha this exists to solve.
+export function resolveModelValue(attrs, isValid) {
+    if (isValid(attrs.modelValue))
+        return attrs.modelValue;
+    if (isValid(attrs.value))
+        return attrs.value;
+    return undefined;
+}
+export function emitModelUpdate(emit, value) {
+    emit('update:modelValue', value);
+    emit('update:value', value);
+}

package/build/utils/normalize-attrs.d.ts

@@ -0,0 +1 @@
+export declare function normalizeVueAttrs(attrs: Record<string, unknown>): Record<string, unknown>;

package/build/utils/normalize-attrs.js

@@ -0,0 +1,30 @@
+// Vue does NOT camelCase $attrs: a template `:content-container-style` arrives in attrs keyed
+// 'content-container-style', but symbiote's prop contract is RN-camelCase (contentContainerStyle)
+// and idiomatic Vue templates use kebab-case. Reading `attrs.contentContainerStyle` then misses,
+// so a consumed prop is silently dropped (lost padding) and a non-consumed one leaks to Fabric
+// (Android `JS Functions are not convertible to dynamic` when a VNode-valued prop forwards). So
+// every adapter component normalizes its incoming attrs kebab→camel at entry.
+//
+// Two prefixes MUST stay kebab: `aria-*` (resolveAccessibilityProps reads 'aria-label' literally)
+// and `data-*`. Event keys are already `onXxx` (Vue folds `@value-change` → onValueChange, no
+// dash) so they pass through untouched.
+const KEBAB_SEGMENT = /-([a-z])/g;
+function toCamel(key) {
+    return key.replace(KEBAB_SEGMENT, (_match, char) => char.toUpperCase());
+}
+export function normalizeVueAttrs(attrs) {
+    let changed = false;
+    const out = {};
+    for (const key of Object.keys(attrs)) {
+        if (key.includes('-') && !key.startsWith('aria-') && !key.startsWith('data-')) {
+            out[toCamel(key)] = attrs[key];
+            changed = true;
+        }
+        else {
+            out[key] = attrs[key];
+        }
+    }
+    // Return the original object when nothing converted (the already-camel / TSX path): avoids a
+    // per-render allocation and keeps attrs identity stable.
+    return changed ? out : attrs;
+}

package/build/utils/slots-to-render-props.d.ts

@@ -0,0 +1,4 @@
+import { type Component, type VNode } from '@vue/runtime-core';
+type ISlotFn<Props extends Record<string, unknown>> = (props: Props) => VNode[] | VNode;
+export declare function componentFromSlot<Props extends Record<string, unknown>>(slot: ISlotFn<Props> | undefined): Component | undefined;
+export {};

package/build/utils/slots-to-render-props.js

@@ -0,0 +1,18 @@
+// Bridges Vue scoped slots to the render-function / render-component surface the shared list
+// windowing layer (@symbiote-native/components) expects. The Vue-facing list API is slots
+// (#item / #separator / #header / #footer / #empty / #sectionHeader / #sectionFooter /
+// #sectionSeparator) — the idiomatic Vue surface; React's twin is the renderItem /
+// ItemSeparatorComponent prop family. This is the ONE place that translation lives, so a list's
+// own body reads a single source (its slots), never a renderItem prop. Vue-only lifecycle glue,
+// so it belongs in the adapter (adapters_stay_thin): the shared windowing math is untouched.
+import {} from '@vue/runtime-core';
+// A component-style renderer (ItemSeparatorComponent / SectionSeparatorComponent) is invoked by the
+// list as h(component, props). Expose the slot as a functional component so its scope props reach
+// the slot body. The cell renderer (#item) and the scopeless chrome slots (#header / #footer /
+// #empty) need no wrapper — a slot fn is already a valid render fn / functional component.
+export function componentFromSlot(slot) {
+    if (slot === undefined)
+        return undefined;
+    const fromSlot = (props) => slot(props);
+    return fromSlot;
+}

package/metro-css-parser.cjs

@@ -0,0 +1,12 @@
+// Re-exports @symbiote-native/css-parser verbatim from INSIDE this package, so a consuming app's own
+// require('@symbiote-native/vue/metro-css-parser') resolves css-parser relative to THIS file's
+// location (adapters/vue/node_modules, where css-parser IS a real dependency — see
+// package.json), not relative to the app's own node_modules, which does not and should not
+// need to declare @symbiote-native/css-parser itself. Node resolves each require() relative to the
+// requiring FILE's own location, so this indirection is what actually removes the extra install
+// step, not pnpm hoisting (which does not propagate this transitively across workspace packages
+// the way a flat classic node_modules would). .cjs, not .js: this package is "type": "module",
+// and Metro's babelTransformerPath loading expects a require()-able module. Used by
+// examples/vue-sfc/metro-vue-transformer.js for BOTH its inline <style> block compilation and
+// standalone .css/.module.css file imports. See the symbiote-sfc-style-compiler skill.
+module.exports = require('@symbiote-native/css-parser');

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@symbiote-native/vue",
+  "version": "0.1.0",
+  "description": "SymbioteJS's Vue adapter — a @vue/runtime-core createRenderer driving real native iOS/Android views through the same engine as the React adapter.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "adapters/vue"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/adapters/vue#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "type": "module",
+  "main": "./build/index.js",
+  "module": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    },
+    "./runtime-helpers": {
+      "types": "./build/runtime-helpers.d.ts",
+      "default": "./build/runtime-helpers.js"
+    },
+    "./metro-css-parser": "./metro-css-parser.cjs"
+  },
+  "files": [
+    "build",
+    "metro-css-parser.cjs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@vue/runtime-core": "^3.5.13",
+    "@symbiote-native/css-parser": "0.1.0",
+    "@symbiote-native/engine": "0.1.0",
+    "@symbiote-native/components": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.5.0",
+    "react-native": ">=0.86"
+  },
+  "devDependencies": {
+    "@symbiote-native/test-utils": "0.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --build",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
+}