@symbiote-native/vue 3.0.1 → 3.0.3

package/README.md

@@ -20,20 +20,79 @@ mutation-oriented framework driving the already-validated engine.
 
 ## Install
 
+```bash
+npx @symbiote-native/cli new my-app --framework vue --vue-flavor sfc   # or --vue-flavor tsx
+```
+
+One command, nothing to wire by hand: scaffolds the Metro config (the SFC transformer, or the TSX
+Babel plugin below), the entry seam below, and `@symbiote-native/vue`/`react-native`/`vue` as your
+app's own dependencies.
+
+<details>
+<summary>Manual install (no generator — an existing app, or you want to wire it yourself)</summary>
+
 ```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`) — `npx @symbiote-native/cli new`
-wires this for a new app; an existing app still needs it copied in by hand.
+the JS renderer that drives them. **SFC** additionally needs a Metro transformer for `.vue` files
+— see [`examples/vue-sfc`](../../examples/vue-sfc)'s `metro.config.js`.
+
+**TSX** needs one more Babel plugin beyond the install above, or a dev-mode Vue warning can crash
+the mount to a blank screen. RN's dev React-JSX transform tags every `JSXElement` with `__self`/
+`__source` (inert under React); `@vue/babel-plugin-jsx` copies them verbatim into the vnode's
+props, and at module scope `__self`'s `this` is the Hermes global `HostObject` — the first Vue dev
+warning that formats that prop for a component trace throws reading `Symbol.toStringTag` off it,
+unwinding the whole mount. Strip both attributes on `JSXOpeningElement` exit, after Babel's
+`__self`/`__source` plugins add them but before `@vue/babel-plugin-jsx` reads them (see
+[`examples/vue-tsx`](../../examples/vue-tsx)'s `babel.config.js`, `stripReactJsxDevAttrs`) — SFC
+doesn't need this, since its compiler never sees RN's React-JSX transform at all.
+
+</details>
 
 ---
 
 ## Use it
 
+The app is ordinary Vue. The primitives are TAGS — `<view>`, `<text>`, `<pressable>` — so there is
+nothing to import for them at all; both Vue compilers resolve them as elements and the renderer
+maps each to its Fabric view. Styling is a CSS class (a plain `.css` file in TSX, an SFC's own
+`<style>` block otherwise) — the convention every example app here follows. A tap→increment
+counter, authored in TSX:
+
+```jsx
+import { ref } from '@vue/runtime-core';
+import './App.css';
+
+export default {
+  setup() {
+    const count = ref(0);
+    return () => (
+      <safe-area-view class="screen">
+        <text>Taps: {count.value}</text>
+        <pressable onPress={() => count.value++}>
+          <text>Tap me</text>
+        </pressable>
+      </safe-area-view>
+    );
+  },
+};
+```
+
+```css
+/* App.css */
+.screen {
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+```
+
+<details>
+<summary>Native entry point (index.js) — already scaffolded by <code>npx @symbiote-native/cli new --framework vue</code></summary>
+
 The zero-config entry mirrors real Vue's own `createApp(App).mount(...)` idiom and wires the same
 RN-backed host seams React's `registerApp` does — this is what
 [`examples/vue-tsx`](../../examples/vue-tsx) and [`examples/vue-sfc`](../../examples/vue-sfc)
@@ -41,6 +100,11 @@ actually use:
 
 ```js
 // index.js
+
+// Registers host behaviors (Image, Pressable, Switch, ...) that /bootstrap alone doesn't
+// reach; deleting this breaks them silently (Metro's production inlineRequires makes a
+// side-effect-only barrel import go lazy, see register.ts).
+import '@symbiote-native/vue';
 import { createApp } from '@symbiote-native/vue/bootstrap';
 import App from './App';
 import { name as appName } from './app.json';
@@ -66,27 +130,7 @@ RNAppRegistry.registerRunnable(appName, ({ rootTag }) => {
 });
 ```
 
-The app is ordinary Vue. The primitives are TAGS — `<view>`, `<text>`, `<pressable>` — so there is
-nothing to import for them at all; both Vue compilers resolve them as elements and the renderer
-maps each to its Fabric view. A tap→increment counter, authored in TSX:
-
-```jsx
-import { ref } from '@vue/runtime-core';
-
-export default {
-  setup() {
-    const count = ref(0);
-    return () => (
-      <view style={{ padding: 24 }}>
-        <text>Taps: {count.value}</text>
-        <pressable onPress={() => count.value++}>
-          <text>Tap me</text>
-        </pressable>
-      </view>
-    );
-  },
-};
-```
+</details>
 
 ### Two example apps
 
@@ -101,9 +145,9 @@ the demo above is the first one running on the iOS simulator:
 
 ## Parity — and the one gap
 
-Both adapters reach the same primitives, runtime modules, `Animated` on both drivers, gestures,
-accessibility, and the `VirtualizedList` family, verified on-device on iOS and Android. That
-parity is **structural, not hand-copied**: the
+Vue reaches the same primitives, runtime modules, `Animated` on both drivers, gestures,
+accessibility, and the `VirtualizedList` family as React, Svelte, Solid, and Angular, verified
+on-device on iOS and Android. That parity is **structural, not hand-copied**: the
 component logic (state machines + render functions) is written **once** in `@symbiote-native/components`,
 and each adapter supplies only its lifecycle (Vue's `ref`/`watch` + the descriptor→`h()` bridge).
 

package/build/components/flat-list/index.js

@@ -10,8 +10,8 @@
 // $attrs onto the inner VirtualizedList. The inner list still GATES RefreshControl + viewability
 // on callback presence, so each emit bridge is wired ONLY when the consumer actually listens.
 import { defineComponent, getCurrentInstance, h, shallowRef, } from '@vue/runtime-core';
-import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, rowKeyExtractor, } from '@symbiote-native/components';
-import { dlog, resolveClassName, } from '@symbiote-native/engine';
+import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, removeClippedSubviewsOrDefault, rowKeyExtractor, } from '@symbiote-native/components';
+import { Platform, dlog, resolveClassName, } from '@symbiote-native/engine';
 import { VirtualizedList } from '../virtualized-list/index.js';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 // VirtualizedList's generic construct signature can't be resolved by h()'s overloads, so drive
@@ -81,7 +81,12 @@ export const FlatList = defineComponent((props, { attrs, expose, emit, slots, })
             footer: slots.footer,
             empty: slots.empty,
         };
-        const forwarded = normalizeVueAttrs(attrs);
+        const normalizedAttrs = normalizeVueAttrs(attrs);
+        // FlatList.js always sends it, defaulted per platform.
+        const forwarded = {
+            ...normalizedAttrs,
+            removeClippedSubviews: removeClippedSubviewsOrDefault(normalizedAttrs.removeClippedSubviews, Platform.OS),
+        };
         dlog(`Vue FlatList over ${data.length} items, ${numColumns} column(s)`);
         const endReached = listens('onEndReached')
             ? (info) => emit('endReached', info)

package/build/components/modal/index.js

@@ -11,8 +11,8 @@
 // events (onShow/onDismiss/onRequestClose/onOrientationChange) are real ViewConfig DirectEvents,
 // so, unlike Switch's pure-JS onValueChange, they forward to the host raw via passthrough.
 import { defineComponent, h, ref, watch } from '@vue/runtime-core';
-import { createInitialModalState, modalReducer, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
-import { dlog, } from '@symbiote-native/engine';
+import { createInitialModalState, isModalVisible, modalReducer, modalVisibilityAction, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
+import { dlog, Platform, } from '@symbiote-native/engine';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 function asBoolean(value) {
     return typeof value === 'boolean' ? value : undefined;
@@ -79,16 +79,23 @@ function forwardAttrs(attrs) {
     return result;
 }
 export const Modal = defineComponent((_props, { attrs: rawAttrs, slots, emit }) => {
-    const state = ref(createInitialModalState(rawAttrs.visible === true));
-    // POST-flush so the transition fires AFTER the render that used the OLD state: on visible→hidden
-    // the node renders once more (state.isRendered still true → the keep-alive frame), then this
-    // drops it and the next render unmounts. flush:'pre' would unmount immediately, killing the
-    // keep-alive. The reducer is identity-stable, so a no-op transition triggers no extra render.
-    watch(() => rawAttrs.visible === true, isVisible => {
-        state.value = modalReducer(state.value, isVisible ? { type: 'show' } : { type: 'hide' });
+    const state = ref(createInitialModalState(isModalVisible(rawAttrs.visible)));
+    // Arms the iOS keep-alive on show; a hide is left to the native dismiss (state/modal.ts). The
+    // reducer is identity-stable, so a no-op transition triggers no extra render.
+    watch(() => isModalVisible(rawAttrs.visible), isVisible => {
+        const action = modalVisibilityAction(isVisible);
+        if (action !== undefined)
+            state.value = modalReducer(state.value, action);
     }, { flush: 'post' });
+    // Modal.js: onDismiss is iOS-only — it drops the keep-alive, then tells the app.
+    const handleDismiss = () => {
+        if (Platform.OS !== 'ios')
+            return;
+        state.value = modalReducer(state.value, { type: 'hide' });
+        emit('dismiss');
+    };
     return () => {
-        const isVisible = rawAttrs.visible === true;
+        const isVisible = isModalVisible(rawAttrs.visible);
         if (!shouldRenderModal(isVisible, state.value)) {
             dlog('Modal hidden -> no node committed');
             return null;
@@ -118,7 +125,7 @@ export const Modal = defineComponent((_props, { attrs: rawAttrs, slots, emit })
             ...root.props,
             key: root.key,
             onShow: () => emit('show'),
-            onDismiss: () => emit('dismiss'),
+            onDismiss: handleDismiss,
             onRequestClose: () => emit('requestClose'),
             onOrientationChange: (event) => emit('orientationChange', event),
         }, [

package/build/components/virtualized-list/index.d.ts

@@ -39,6 +39,8 @@ export interface IVirtualizedListProps<ItemT> {
     scrollEventThrottle?: number;
     keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
     keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    removeClippedSubviews?: boolean;
+    nestedScrollEnabled?: boolean;
     style?: IStyleProp<IViewStyle>;
     contentContainerStyle?: IStyleProp<IViewStyle>;
     [key: string]: unknown;

package/build/components/virtualized-list/index.js

@@ -562,8 +562,9 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         const resolvedContentContainerStyle = p.horizontal
             ? [p.contentContainerStyle, { width: m.total }]
             : p.contentContainerStyle;
+        // VirtualizedList.js: `[inversionStyle, style]` — the app's style can override the flip.
         const resolvedStyle = p.inverted
-            ? [p.style, p.horizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE]
+            ? [p.horizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE, p.style]
             : p.style;
         // `horizontal` is NOT in the bag: the axis is the TAG (`horizontal-scroll-view`), so passing
         // it would be redundant at best and a contradiction the behavior has to warn about at worst.
@@ -578,6 +579,9 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         // The raw scroll-lifecycle callbacks (onScrollBeginDrag/…) and scrollEventThrottle are NOT in
         // PROP_KEYS, so they already ride through via ...p.forwarded. The keyboard props come from
         // typed props (PROP_KEYS), so re-set them explicitly here (only when provided).
+        // VirtualizedList.js:1111 — Android moves the scrollbar back after the `scale: -1` flip.
+        if (p.inverted)
+            scrollProps.isInvertedVirtualizedList = true;
         if (p.keyboardShouldPersistTaps !== undefined) {
             scrollProps.keyboardShouldPersistTaps = p.keyboardShouldPersistTaps;
         }

package/build/components/virtualized-section-list/index.d.ts

@@ -35,6 +35,8 @@ export interface IVirtualizedSectionListProps<ItemT> {
     scrollEventThrottle?: number;
     keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
     keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    removeClippedSubviews?: boolean;
+    nestedScrollEnabled?: boolean;
     style?: IStyleProp<IViewStyle>;
     contentContainerStyle?: IStyleProp<IViewStyle>;
     [key: string]: unknown;

package/build/renderer/index.js

@@ -3,7 +3,7 @@
 // drives the exact same retained tree React does: the proof the core is framework-
 // agnostic.
 import { callWithErrorHandling, createRenderer, ErrorCodes, markRaw, } from '@vue/runtime-core';
-import { appendChild, createAnchor, createElement, createRawText, childrenOf, dlog, insertBefore, isRawTextNode, isTextContainer, nextSiblingOf, parentOf, removeChild, routeProp, setProp, setText, textOf, toPublicInstance, SymbioteSurface, } from '@symbiote-native/engine';
+import { appendChild, createAnchor, createElement, createRawText, childrenOf, dlog, insertBefore, isRawTextNode, isTextContainer, nextSiblingOf, parentOf, removeChild, routeProp, setText, textOf, toPublicInstance, SymbioteSurface, } from '@symbiote-native/engine';
 import { descriptorFor } from '@symbiote-native/components';
 import { normalizeVueAttrKey } from '../utils/normalize-attrs.js';
 function isSurface(parent) {

package/metro-vue-transformer.cjs

@@ -16,8 +16,12 @@ const {
   parseCache,
   compileScript,
   registerTS,
+  babelParse,
 } = require('@vue/compiler-sfc');
-const { createCompoundExpression } = require('@vue/compiler-core');
+const {
+  createCompoundExpression,
+  createSimpleExpression,
+} = require('@vue/compiler-core');
 
 // A bare-specifier type import (`import type { X } from '@symbiote-native/navigation/vue'`) needs
 // real node_modules resolution to turn the specifier into a file path - compileScript's own `fs`
@@ -146,6 +150,51 @@ function trimReflowedTextNodeTransform(node) {
 // Shared with ./babel-jsx.cjs: Vue's two compilers must give one answer to element-vs-component.
 const INTRINSIC_TAGS = require('./intrinsic-tags.cjs');
 
+const SYMBIOTE_SOURCE_PREFIX = '@symbiote-native/';
+
+// Local names the file imports from any `@symbiote-native/*` package (`FlatList`, `Animated`).
+function symbioteImportsOf(descriptor) {
+  const locals = new Set();
+  for (const block of [descriptor.script, descriptor.scriptSetup]) {
+    if (block == null) continue;
+    const plugins = block.lang === 'ts' || block.lang === 'tsx' ? ['typescript'] : [];
+    const program = babelParse(block.content, { sourceType: 'module', plugins }).program;
+    for (const statement of program.body) {
+      if (
+        statement.type !== 'ImportDeclaration' ||
+        !statement.source.value.startsWith(SYMBIOTE_SOURCE_PREFIX)
+      )
+        continue;
+      for (const specifier of statement.specifiers) locals.add(specifier.local.name);
+    }
+  }
+  return locals;
+}
+
+// Vue casts a bare attribute to `true` only for a prop declared Boolean. Our tags and components
+// declare none, so `nested-scroll-enabled` reached Android as "" and the ViewManager threw
+// `String cannot be cast to Boolean`. The app's own components keep Vue's semantics.
+function createBareBooleanNodeTransform(symbioteLocals) {
+  const isOurs = tag =>
+    INTRINSIC_TAGS.has(tag) || symbioteLocals.has(tag.split('.')[0]);
+  return function bareBooleanNodeTransform(node) {
+    if (node.type !== 1 /* NodeTypes.ELEMENT */ || !isOurs(node.tag)) return;
+    node.props = node.props.map(prop =>
+      prop.type === 6 /* NodeTypes.ATTRIBUTE */ && prop.value === undefined
+        ? {
+            type: 7 /* NodeTypes.DIRECTIVE */,
+            name: 'bind',
+            rawName: `:${prop.name}`,
+            arg: createSimpleExpression(prop.name, true, prop.loc),
+            exp: createSimpleExpression('true', false, prop.loc, 3 /* CAN_STRINGIFY */),
+            modifiers: [],
+            loc: prop.loc,
+          }
+        : prop,
+    );
+  };
+}
+
 
 // A short, stable id per file, used as the SFC scope id regardless of whether the file has
 // scoped styles - built on css-parser's shared hashFilePath so the algorithm isn't duplicated
@@ -307,7 +356,10 @@ async function compileSfc(src, filename) {
 
   // Scoped-class rewriting is skipped entirely (not even passed to the compiler) when nothing in
   // this file is scoped, so a .vue with only unscoped/no styles adds no runtime cost.
-  const nodeTransforms = [trimReflowedTextNodeTransform];
+  const nodeTransforms = [
+    trimReflowedTextNodeTransform,
+    createBareBooleanNodeTransform(symbioteImportsOf(descriptor)),
+  ];
   if (scopedClassNames.size > 0)
     nodeTransforms.push(createScopeClassNodeTransform(scopedClassNames));
   // UNCONDITIONAL, and covering EVERY intrinsic rather than the ones this file happens to import.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/vue",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "SymbioteNative's Vue adapter — a @vue/runtime-core createRenderer driving real native iOS/Android views through the same engine as the React adapter.",
   "license": "MIT",
   "repository": {
@@ -70,18 +70,18 @@
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/runtime-core": "^3.5.13",
     "typescript": "~6.0.0",
-    "@symbiote-native/components": "3.0.1",
-    "@symbiote-native/css-parser": "0.5.0"
+    "@symbiote-native/components": "3.1.1",
+    "@symbiote-native/css-parser": "0.5.1"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.2.0"
+    "@symbiote-native/engine": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@symbiote-native/engine": "1.2.0",
-    "@symbiote-native/test-utils": "0.4.1"
+    "@symbiote-native/engine": "1.3.0",
+    "@symbiote-native/test-utils": "0.4.3"
   },
   "scripts": {
     "typecheck": "tsc --build",