@symbiote-native/vue 3.0.0 → 3.0.2

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/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.0",
+  "version": "3.0.2",
   "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.0",
+    "@symbiote-native/components": "3.1.0",
     "@symbiote-native/css-parser": "0.5.0"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.0.0"
+    "@symbiote-native/engine": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@symbiote-native/engine": "1.0.0",
-    "@symbiote-native/test-utils": "0.3.1"
+    "@symbiote-native/engine": "1.3.0",
+    "@symbiote-native/test-utils": "0.4.2"
   },
   "scripts": {
     "typecheck": "tsc --build",