@symbiote-native/vue 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @symbiote-native/vue
 
-The **Vue 3 adapter** for [SymbioteJS](../../README.md) — render real native iOS/Android views from
+The **Vue 3 adapter** for [SymbioteNative](../../README.md) — render real native iOS/Android views from
 Vue, on the *same* untouched core as React, with React Native's own renderer never in the path. It
 is a `@vue/runtime-core` `createRenderer` whose nodeOps map each mutation onto the engine's
 four-call API; `@symbiote-native/engine` does the clone-on-write commit into Fabric.
@@ -10,11 +10,25 @@ mutation-oriented framework driving the already-validated engine.
 
 <div align="center">
 
-![Vue 3 driving real native iOS views through SymbioteJS](../../assets/vue-demo.gif)
+![Vue 3 driving real native iOS views through SymbioteNative](../../assets/vue-demo.gif)
 
 </div>
 
-> New to SymbioteJS? The [root README](../../README.md) has the architecture.
+> New to SymbioteNative? The [root README](../../README.md) has the architecture.
+
+---
+
+## Install
+
+```bash
+npm install @symbiote-native/vue react-native vue
+```
+
+`react-native` and `vue` stay your app's own top-level dependencies — this package only replaces
+the JS renderer that drives them. **TSX** needs nothing beyond the install above; **SFC**
+additionally needs a Metro transformer for `.vue` files (see
+[`examples/vue-sfc`](../../examples/vue-sfc)'s `metro.config.js`), since there's no
+`create-symbiote` scaffolder yet to wire it for you.
 
 ---
 
@@ -81,9 +95,9 @@ and each adapter supplies only its lifecycle (Vue's `ref`/`watch` + the descript
 The one deliberate gap is third-party **React component** packages such as
 `@react-native-community/slider` used directly. Their body calls React hooks off the React
 dispatcher, so they run only under the React adapter — under Vue the dispatcher is null and they
-throw. SymbioteJS makes the *native view* framework-agnostic, not the library's React *component*; such
+throw. SymbioteNative makes the *native view* framework-agnostic, not the library's React *component*; such
 a view becomes reachable from Vue only through a thin wrapper over the same `createNode`-by-ViewConfig
-path SymbioteJS uses for its own primitives. `@symbiote-native/slider` (this repo's own wrapper around
+path SymbioteNative uses for its own primitives. `@symbiote-native/slider` (this repo's own wrapper around
 `@react-native-community/slider`) *does* ship a real Vue build (`@symbiote-native/slider/vue`) through
 exactly that path — it's what makes this one third-party native view usable from Vue at all; any
 *other* React-only component package stays React-adapter-only until it gets the same treatment.

package/build/bootstrap.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from '@vue/runtime-core';
+import { type IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
+export type { IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
+export type ISymbioteVueApp = {
+    mount(appName: string): void;
+};
+export declare function createApp(App: Component, options?: IBootstrapHostOptions): ISymbioteVueApp;

package/build/bootstrap.js

@@ -0,0 +1,17 @@
+// Zero-config app entry, the Vue twin of adapters/react/src/bootstrap.ts. createApp(App) stays
+// inert (matching real Vue's own semantics); mount(appName) is where the RN host seams and
+// AppRegistry actually get wired. Lives OUTSIDE the package's main barrel — see that file's
+// header for why anything importing react-native must stay there.
+import { AppRegistry as RNAppRegistry } from 'react-native';
+import { bootstrapHost } from '@symbiote-native/components/bootstrap';
+import { AppRegistry, setHostRegistrar } from './modules/app-registry';
+// Mirrors real Vue's createApp(App).mount(selector) two-step idiom.
+export function createApp(App, options = {}) {
+    return {
+        mount(appName) {
+            bootstrapHost(options);
+            setHostRegistrar(RNAppRegistry);
+            AppRegistry.registerComponent(appName, () => App);
+        },
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "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.",
+  "version": "0.2.0",
+  "description": "SymbioteNative'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",
@@ -21,6 +21,10 @@
       "types": "./build/index.d.ts",
       "default": "./build/index.js"
     },
+    "./bootstrap": {
+      "types": "./build/bootstrap.d.ts",
+      "default": "./build/bootstrap.js"
+    },
     "./runtime-helpers": {
       "types": "./build/runtime-helpers.d.ts",
       "default": "./build/runtime-helpers.js"
@@ -36,16 +40,16 @@
   },
   "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"
+    "@symbiote-native/css-parser": "0.1.1",
+    "@symbiote-native/components": "0.2.0",
+    "@symbiote-native/engine": "0.1.1"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",
     "react-native": ">=0.86"
   },
   "devDependencies": {
-    "@symbiote-native/test-utils": "0.0.0"
+    "@symbiote-native/test-utils": "0.1.1"
   },
   "scripts": {
     "typecheck": "tsc --build",

package/build/components/drawer-layout-android/index.android.d.ts

@@ -1,8 +0,0 @@
-import type { IDrawerLayoutAndroidEmits, IDrawerLayoutAndroidProps } from './shared';
-export type { IDrawerPosition, IDrawerLockMode, IKeyboardDismissMode, IDrawerState, IDrawerSlideEvent, IDrawerLayoutAndroidEmits, IDrawerLayoutAndroidProps, IDrawerLayoutAndroidHandle, } from './shared';
-export declare const DrawerLayoutAndroid: import("vue").DefineSetupFnComponent<IDrawerLayoutAndroidProps, IDrawerLayoutAndroidEmits, {}, IDrawerLayoutAndroidProps & {
-    onDrawerOpen?: (() => any) | undefined;
-    onDrawerClose?: (() => any) | undefined;
-    onDrawerSlide?: ((event: import("@symbiote/components").IDrawerSlideEvent) => any) | undefined;
-    onDrawerStateChanged?: ((state: import("@symbiote/components").IDrawerState) => any) | undefined;
-}, import("vue").PublicProps>;

package/build/components/drawer-layout-android/index.android.js

@@ -1,144 +0,0 @@
-// DrawerLayoutAndroid on Android: the real build, the Vue twin of the React adapter's
-// index.android.ts. AndroidDrawerLayout is an ordinary Fabric host node committing through the same
-// childSet as the rest of the tree (no per-library glue; shared derives the view's events from its
-// ViewConfig, so we render the RAW Fabric name 'AndroidDrawerLayout'). The platform-invariant math —
-// the host prop bag + the content/navigation wrapper styles, the slide/state event normalization,
-// the imperative open/close handle, and the view/command NAMES — lives in @symbiote/components,
-// shared verbatim with React; here Vue supplies only the lifecycle: a shallowRef holds the host node
-// (so the engine's mirror resolves it for the imperative commands), a `drawerOpened` ref gates the
-// navigation wrapper's pointerEvents, and expose() wires the imperative handle.
-//
-// Child order matches RN exactly: content FIRST, navigation SECOND ({childrenWrapper}{drawerViewWrapper}).
-// Content is the DEFAULT slot; the drawer is the `navigationView` slot (the Vue twin of React's
-// children / renderNavigationView). Inputs arrive as attrs (untyped), each narrowed with a runtime
-// guard rather than a cast. The onDrawer* handlers are wrapped (drawerOpened + normalization), so they
-// are stripped from the forwarded attrs; everything else (testID / accessibility / aria-*) folds via
-// resolveAccessibilityProps onto the host. Metro picks this file on an Android host; no Platform.OS read.
-// device-verify-pending: the AndroidDrawerLayout name + openDrawer/closeDrawer commands are
-// RN-source-confirmed, not yet exercised on a real Android host.
-import { defineComponent, h, ref, shallowRef } from '@vue/runtime-core';
-import { buildDrawerHandle, offsetFromSlide, resolveAccessibilityProps, resolveDrawerLayout, stateFromChange, } from '@symbiote/components';
-import { dlog, isSymbioteNode, } from '@symbiote/engine';
-import { View } from '../../components';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs';
-function asNumber(value) {
-    return typeof value === 'number' ? value : undefined;
-}
-function asString(value) {
-    return typeof value === 'string' ? value : undefined;
-}
-function asDrawerPosition(value) {
-    return value === 'left' || value === 'right' ? value : undefined;
-}
-function asDrawerLockMode(value) {
-    return value === 'unlocked' || value === 'locked-closed' || value === 'locked-open'
-        ? value
-        : undefined;
-}
-function asKeyboardDismissMode(value) {
-    return value === 'none' || value === 'on-drag' ? value : undefined;
-}
-function isStyleProp(value) {
-    return typeof value === 'object' && value !== null;
-}
-// The typed fields the lifecycle consumes/re-emits (resolveDrawerLayout folds the drawer* props onto
-// the host) and the onDrawer* handlers (wrapped here, never forwarded raw); everything else (testID,
-// accessibility, aria-*) forwards onto the host via passthrough.
-const HANDLED_ATTRS = [
-    'drawerWidth',
-    'drawerPosition',
-    'drawerLockMode',
-    'keyboardDismissMode',
-    'drawerBackgroundColor',
-    'statusBarBackgroundColor',
-    'style',
-    'onDrawerOpen',
-    'onDrawerClose',
-    'onDrawerSlide',
-    'onDrawerStateChanged',
-];
-function forwardAttrs(attrs) {
-    const result = {};
-    for (const key of Object.keys(attrs)) {
-        if (!HANDLED_ATTRS.includes(key))
-            result[key] = attrs[key];
-    }
-    return result;
-}
-export const DrawerLayoutAndroid = defineComponent((_props, { slots, attrs: rawAttrs, expose, emit }) => {
-    // shallowRef, NOT ref: the engine node must be held by IDENTITY. A plain ref() runs the node
-    // through Vue's toReactive(), handing back a reactive Proxy the engine's mirror (a WeakMap keyed
-    // on the raw node) can't resolve, so openDrawer/closeDrawer would silently no-op. Same rule as
-    // the Switch / ScrollView host node (see .claude/skills/vue-adapter-reactivity).
-    const nodeRef = shallowRef(null);
-    const setNodeRef = (el) => {
-        nodeRef.value = isSymbioteNode(el) ? el : null;
-    };
-    // drawerOpened gates the navigation wrapper's pointerEvents (RN _onDrawerOpen/_onDrawerClose
-    // setState): closed -> 'none' so the off-screen drawer never intercepts touches. A plain ref is
-    // fine here — it holds a boolean, not an engine node; the shallowRef rule is only for the node.
-    const drawerOpened = ref(false);
-    // The imperative handle reads the node through a LAZY getter (() => nodeRef.value), not the node
-    // captured once: it is null until the element commits. expose() makes it the value a parent ref
-    // sees — the Vue twin of React's useImperativeHandle(ref, buildDrawerHandle(…)).
-    expose(buildDrawerHandle(() => nodeRef.value));
-    return () => {
-        const attrs = normalizeVueAttrs(rawAttrs);
-        const handleDrawerOpen = () => {
-            dlog('Vue DrawerLayoutAndroid onDrawerOpen');
-            drawerOpened.value = true;
-            emit('drawerOpen');
-        };
-        const handleDrawerClose = () => {
-            dlog('Vue DrawerLayoutAndroid onDrawerClose');
-            drawerOpened.value = false;
-            emit('drawerClose');
-        };
-        const handleDrawerSlide = (event) => {
-            dlog('Vue DrawerLayoutAndroid onDrawerSlide');
-            emit('drawerSlide', { offset: offsetFromSlide(event) });
-        };
-        const handleDrawerStateChanged = (event) => {
-            emit('drawerStateChanged', stateFromChange(event));
-        };
-        const resolved = resolveDrawerLayout({
-            drawerWidth: asNumber(attrs.drawerWidth),
-            drawerPosition: asDrawerPosition(attrs.drawerPosition),
-            drawerLockMode: asDrawerLockMode(attrs.drawerLockMode),
-            keyboardDismissMode: asKeyboardDismissMode(attrs.keyboardDismissMode),
-            drawerBackgroundColor: asString(attrs.drawerBackgroundColor),
-            statusBarBackgroundColor: asString(attrs.statusBarBackgroundColor),
-            drawerOpened: drawerOpened.value,
-            style: isStyleProp(attrs.style) ? attrs.style : undefined,
-            passthrough: resolveAccessibilityProps(forwardAttrs(attrs)),
-        });
-        // RN's mainSubview: content wrapped in an absolute full-screen box (the default slot).
-        const content = h(View, { style: resolved.contentWrapperStyle }, () => slots.default !== undefined ? slots.default() : []);
-        // RN's drawerSubview: the navigation view (the `navigationView` slot) wrapped, drawerWidth-wide,
-        // painted with drawerBackgroundColor, untouchable until opened.
-        const navigation = h(View, {
-            style: resolved.navigationWrapperStyle,
-            pointerEvents: resolved.navigationPointerEvents,
-        }, () => (slots.navigationView !== undefined ? slots.navigationView() : []));
-        dlog(`Vue DrawerLayoutAndroid render width=${String(asNumber(attrs.drawerWidth))} ` +
-            `opened=${drawerOpened.value}`);
-        // Child order matches RN exactly: content FIRST, navigation SECOND.
-        return h(resolved.viewName, {
-            ...resolved.hostProps,
-            ref: setNodeRef,
-            onDrawerOpen: handleDrawerOpen,
-            onDrawerClose: handleDrawerClose,
-            onDrawerSlide: handleDrawerSlide,
-            onDrawerStateChanged: handleDrawerStateChanged,
-        }, [content, navigation]);
-    };
-}, {
-    name: 'DrawerLayoutAndroid',
-    inheritAttrs: false,
-    emits: {
-        drawerOpen: () => true,
-        drawerClose: () => true,
-        drawerSlide: (_event) => true,
-        drawerStateChanged: (_state) => true,
-    },
-});

package/build/components/drawer-layout-android/index.d.ts

@@ -1,8 +0,0 @@
-import type { IDrawerLayoutAndroidEmits, IDrawerLayoutAndroidProps } from './shared';
-export type { IDrawerPosition, IDrawerLockMode, IKeyboardDismissMode, IDrawerState, IDrawerSlideEvent, IDrawerLayoutAndroidEmits, IDrawerLayoutAndroidProps, IDrawerLayoutAndroidHandle, } from './shared';
-export declare const DrawerLayoutAndroid: import("vue").DefineSetupFnComponent<IDrawerLayoutAndroidProps, IDrawerLayoutAndroidEmits, {}, IDrawerLayoutAndroidProps & {
-    onDrawerOpen?: (() => any) | undefined;
-    onDrawerClose?: (() => any) | undefined;
-    onDrawerSlide?: ((event: import("@symbiote/components").IDrawerSlideEvent) => any) | undefined;
-    onDrawerStateChanged?: ((state: import("@symbiote/components").IDrawerState) => any) | undefined;
-}, import("vue").PublicProps>;

package/build/components/drawer-layout-android/index.js

@@ -1,36 +0,0 @@
-// DrawerLayoutAndroid: base / off-Android fallback (the Vue twin of the React adapter's index.ts).
-// AndroidDrawerLayout is Android-only, so everywhere except an Android host — where Metro picks
-// index.android.ts — we render the content (the default slot) in a plain container and drop the
-// navigation slot (RN's DrawerLayoutAndroidFallback shape). The imperative open/close are silent
-// no-ops; there is no drawer to drive. The filename is the selector; no Platform.OS read. The Vue
-// barrel imports './drawer-layout-android', which resolves here under tsx/tsc and to the .android
-// file under Metro. See ADR 0019.
-import { defineComponent, h } from '@vue/runtime-core';
-import { dlog } from '@symbiote/engine';
-import { View } from '../../components';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs';
-function isStyleProp(value) {
-    return typeof value === 'object' && value !== null;
-}
-export const DrawerLayoutAndroid = defineComponent((_props, { slots, attrs, expose }) => {
-    const handle = {
-        openDrawer: () => dlog('Vue DrawerLayoutAndroid.openDrawer no-op: off Android'),
-        closeDrawer: () => dlog('Vue DrawerLayoutAndroid.closeDrawer no-op: off Android'),
-    };
-    expose(handle);
-    return () => {
-        dlog('Vue DrawerLayoutAndroid fallback: off-Android host, rendering content only');
-        const normalized = normalizeVueAttrs(attrs);
-        const style = isStyleProp(normalized.style) ? normalized.style : undefined;
-        return h(View, { style }, () => (slots.default !== undefined ? slots.default() : []));
-    };
-}, {
-    name: 'DrawerLayoutAndroid',
-    inheritAttrs: false,
-    emits: {
-        drawerOpen: () => true,
-        drawerClose: () => true,
-        drawerSlide: (_event) => true,
-        drawerStateChanged: (_state) => true,
-    },
-});

package/build/components/drawer-layout-android/shared.d.ts

@@ -1,18 +0,0 @@
-import type { IStyleProp, IViewStyle } from '@symbiote/engine';
-import type { IAccessibilityProps, IAriaProps, IDrawerLockMode, IDrawerPosition, IDrawerSlideEvent, IDrawerState, IKeyboardDismissMode } from '@symbiote/components';
-export type { IDrawerPosition, IDrawerLockMode, IKeyboardDismissMode, IDrawerState, IDrawerSlideEvent, IDrawerLayoutAndroidHandle, } from '@symbiote/components';
-export interface IDrawerLayoutAndroidProps extends IAccessibilityProps, IAriaProps {
-    drawerWidth?: number;
-    drawerPosition?: IDrawerPosition;
-    drawerLockMode?: IDrawerLockMode;
-    keyboardDismissMode?: IKeyboardDismissMode;
-    drawerBackgroundColor?: string;
-    statusBarBackgroundColor?: string;
-    style?: IStyleProp<IViewStyle>;
-}
-export type IDrawerLayoutAndroidEmits = {
-    drawerOpen: () => boolean;
-    drawerClose: () => boolean;
-    drawerSlide: (event: IDrawerSlideEvent) => boolean;
-    drawerStateChanged: (state: IDrawerState) => boolean;
-};

package/build/components/drawer-layout-android/shared.js

@@ -1,6 +0,0 @@
-// Shared types for the Vue DrawerLayoutAndroid: the same Props/Handle contract the real Android
-// build (index.android.ts) and the off-Android fallback (index.ts) both implement. The
-// platform-agnostic enums + the imperative handle live in @symbiote/components (shared verbatim with
-// the React adapter, the single source of truth); this file adds only the Vue-facing prop surface.
-// Per ADR 0019 the filename selects the build; no Platform.OS read anywhere.
-export {};