@symbiote-native/vue 3.2.0 → 3.3.0

package/build/components/checkbox-props.d.ts

@@ -0,0 +1,3 @@
+import type { ICheckboxProps as ICoreCheckboxProps } from '@symbiote-native/components';
+import type { IViewProps } from './view-props';
+export type ICheckboxProps = ICoreCheckboxProps & Omit<IViewProps, keyof ICoreCheckboxProps>;

package/build/components/checkbox-props.js

@@ -0,0 +1 @@
+export {};

package/build/composables/define-native-view-component.d.ts

@@ -0,0 +1,3 @@
+import { type VNode } from '@vue/runtime-core';
+import type { ICreateNativeViewController } from '@symbiote-native/components';
+export declare function defineNativeViewComponent<THandle extends object>(name: string, createController: ICreateNativeViewController<THandle>): import("vue").DefineComponent<{}, () => VNode | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/composables/define-native-view-component.js

@@ -0,0 +1,23 @@
+import { defineComponent, onUnmounted } from '@vue/runtime-core';
+import { createHostNodeHolder } from '@symbiote-native/components';
+import { descriptorToVue } from '../descriptor-to-vue.js';
+import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
+// A Vue component over a package's native view: every attr is a prop of the native view, the
+// handle of its controller is exposed to a template ref
+export function defineNativeViewComponent(name, createController) {
+    return defineComponent({
+        name,
+        // Nothing may leak onto the wrapper, the attrs are the props of the native view
+        inheritAttrs: false,
+        setup(_props, { attrs, expose }) {
+            const host = createHostNodeHolder();
+            const controller = createController(host.getNode);
+            expose(controller.handle);
+            onUnmounted(() => controller.dispose?.());
+            return () => {
+                const descriptor = controller.render(normalizeVueAttrs(attrs));
+                return descriptor ? descriptorToVue(host.capture(descriptor)) : null;
+            };
+        },
+    });
+}

package/build/composables/use-event.d.ts

@@ -0,0 +1,6 @@
+import type { MaybeRef, MaybeRefOrGetter, ShallowRef } from '@vue/runtime-core';
+import type { IEventEmitterOf, IEventName, IEventPayload, IEventsMap } from '@symbiote-native/engine';
+/** Calls the listener for each event, the latest one, and stops when the owner unmounts */
+export declare function useEventListener<TEventsMap extends IEventsMap, TName extends IEventName<TEventsMap>>(emitter: MaybeRefOrGetter<IEventEmitterOf<TEventsMap>>, eventName: MaybeRefOrGetter<TName>, listener: MaybeRef<TEventsMap[TName]>): void;
+/** The payload of the last event, `initialValue` (or `null`) until the first one */
+export declare function useEvent<TEventsMap extends IEventsMap, TName extends IEventName<TEventsMap>>(emitter: MaybeRefOrGetter<IEventEmitterOf<TEventsMap>>, eventName: MaybeRefOrGetter<TName>, initialValue?: IEventPayload<TEventsMap, TName> | null): Readonly<ShallowRef<IEventPayload<TEventsMap, TName> | null>>;

package/build/composables/use-event.js

@@ -0,0 +1,22 @@
+// Vue twins of `useEvent` and `useEventListener` of the `expo` package, for any emitter
+import { shallowRef, toValue, unref, watch } from '@vue/runtime-core';
+import { bindEventListener } from '@symbiote-native/engine';
+/** Calls the listener for each event, the latest one, and stops when the owner unmounts */
+export function useEventListener(emitter, eventName, 
+// A ref, not a getter: a function here is the listener itself
+listener) {
+    watch([() => toValue(emitter), () => toValue(eventName)], ([source, name], _previous, onCleanup) => {
+        // The listener is read at each event, a new one is not a new subscription
+        onCleanup(bindEventListener(source, name, () => unref(listener)));
+    }, { immediate: true });
+}
+/** The payload of the last event, `initialValue` (or `null`) until the first one */
+export function useEvent(emitter, eventName, initialValue = null) {
+    const event = shallowRef(initialValue);
+    watch([() => toValue(emitter), () => toValue(eventName)], ([source, name], _previous, onCleanup) => {
+        onCleanup(bindEventListener(source, name, () => (next) => {
+            event.value = next;
+        }));
+    }, { immediate: true });
+    return event;
+}

package/build/descriptor-to-vue.d.ts

@@ -1,3 +1,3 @@
 import { type VNode } from '@vue/runtime-core';
 import type { IDescriptor } from '@symbiote-native/components';
-export declare function descriptorToVue(node: IDescriptor): VNode;
+export declare function descriptorToVue(node: IDescriptor, extraChildren?: readonly VNode[]): VNode;

package/build/descriptor-to-vue.js

@@ -4,10 +4,14 @@
 // renderer → engine → Fabric, exactly like a hand-written h('view'). The React
 // twin is `adapters/react/src/descriptor-to-react.ts`.
 import { h } from '@vue/runtime-core';
-export function descriptorToVue(node) {
+// `extraChildren` are caller vnodes (a component's slot) that go after the descriptor's own
+export function descriptorToVue(node, extraChildren = []) {
     // String type → host element (the Vue renderer's createElement → descriptorFor maps it to
     // a Fabric name); array children, since these are host elements, not slotted components.
-    return h(node.type, { ...node.props, key: node.key }, node.children.map(toChild));
+    return h(node.type, { ...node.props, key: node.key }, [
+        ...node.children.map(toChild),
+        ...extraChildren,
+    ]);
 }
 function toChild(child) {
     return typeof child === 'string' ? child : descriptorToVue(child);

package/build/index.d.ts

@@ -25,6 +25,7 @@ export { TouchableNativeFeedback } from '@symbiote-native/components';
 export type { INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, } from '@symbiote-native/components';
 export type { ITouchableNativeFeedbackProps } from './components/touchable-native-feedback-props';
 export type { IButtonProps } from './components/button-props';
+export type { ICheckboxProps } from './components/checkbox-props';
 export type { ITextInputProps } from './components/text-input/text-input-props';
 export type { ITextInputHandle, ITextInputChangeEvent, } from '@symbiote-native/components';
 export { VirtualizedList } from './components/virtualized-list';
@@ -56,7 +57,9 @@ export { useColorScheme } from './composables/use-color-scheme';
 export { useWindowDimensions } from './composables/use-window-dimensions';
 export { createPermissionHook } from './composables/create-permission-hook';
 export { createResourceHook } from './composables/create-resource-hook';
+export { defineNativeViewComponent } from './composables/define-native-view-component';
 export { createEventValueHook } from './composables/create-event-value-hook';
+export { useEvent, useEventListener } from './composables/use-event';
 export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, AccessibilityInfo, LayoutAnimation, } from '@symbiote-native/engine';
 export type { IAlertType, IAlertButtonStyle, IAlertButton, IAlertButtons, IAlertOptions, IShareContent, IShareOptions, IShareAction, IActionSheetIOSOptions, IShareActionSheetIOSOptions, IShareActionSheetError, IUrlEvent, II18nManagerConstants, IDisplayMetrics, IDisplayMetricsAndroid, IDimensionsPayload, IDimensionsSet, IDimensionsKey, IDimensionsChangeListener, IDimensionsStatic, IColorSchemeName, IColorSchemePreference, IAppStateStatus, IAppStateEvent, IKeyboardEventName, IKeyboardEvent, IKeyboardMetrics, IBackPressEventName, IBackPressHandler, IPermission, IPermissionStatus, IRationale, IAccessibilityChangeEvent, IAccessibilityChangeEventName, IAccessibilityChangeEventHandler, IAccessibilityAnnouncementFinishedEvent, IAnnounceForAccessibilityOptions, IAccessibilityEventType, ILayoutAnimationType, ILayoutAnimationProperty, ILayoutAnimationConfig, ILayoutAnimationAnim, } from '@symbiote-native/engine';
 export { Platform, StyleSheet, processColor, setColorProcessor, dlog, isDebug, } from '@symbiote-native/engine';

package/build/index.js

@@ -75,7 +75,9 @@ export { useColorScheme } from './composables/use-color-scheme.js';
 export { useWindowDimensions } from './composables/use-window-dimensions.js';
 export { createPermissionHook } from './composables/create-permission-hook.js';
 export { createResourceHook } from './composables/create-resource-hook.js';
+export { defineNativeViewComponent } from './composables/define-native-view-component.js';
 export { createEventValueHook } from './composables/create-event-value-hook.js';
+export { useEvent, useEventListener } from './composables/use-event.js';
 // Imperative runtime modules: the SAME module both adapters share, re-exported from @symbiote-native/engine.
 export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, AccessibilityInfo, LayoutAnimation, } from '@symbiote-native/engine';
 // Re-export the framework-agnostic engine surface (pure utilities + diagnostics).

package/build/jsx-runtime.d.ts

@@ -4,6 +4,7 @@ import type { IViewProps } from './components/view-props';
 import type { ITextProps } from './components/text-props';
 import type { IPressableProps } from './components/pressable-props';
 import type { IButtonProps } from './components/button-props';
+import type { ICheckboxProps } from './components/checkbox-props';
 import type { IImageProps } from './components/image-props';
 import type { IImageBackgroundProps } from './components/image-background-props';
 import type { IInputAccessoryViewProps } from './components/input-accessory-view-props';
@@ -23,6 +24,7 @@ export interface ICrossedPrimitiveProps {
     text: ITextProps;
     pressable: IPressableProps;
     button: IButtonProps;
+    checkbox: ICheckboxProps;
     image: IImageProps;
     'image-background': IImageBackgroundProps;
     'input-accessory-view': IInputAccessoryViewProps;

package/build/utils/normalize-attrs.js

@@ -9,14 +9,20 @@
 // 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;
+// The template compiler keys a native tag's `@valueChange` as `on:valueChange`, to keep its case
+const NATIVE_EVENT_PREFIX = 'on:';
+function foldNativeEventKey(key) {
+    const name = key.slice(NATIVE_EVENT_PREFIX.length);
+    return `on${name.charAt(0).toUpperCase()}${name.slice(1)}`;
+}
 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: 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.
+// The per-KEY half, for an intrinsic tag: `patchProp` hands over one key with no bag to fold
+// Returns the same string when nothing converts, which is every key on the hot path
 export function normalizeVueAttrKey(key) {
+    if (key.startsWith(NATIVE_EVENT_PREFIX))
+        return foldNativeEventKey(key);
     if (!key.includes('-'))
         return key;
     if (key.startsWith('aria-') || key.startsWith('data-'))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/vue",
-  "version": "3.2.0",
+  "version": "3.3.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.",
   "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.1.4",
-    "@symbiote-native/css-parser": "0.5.3"
+    "@symbiote-native/components": "3.2.0",
+    "@symbiote-native/css-parser": "0.5.4"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.5.0"
+    "@symbiote-native/engine": "^1.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@symbiote-native/engine": "1.5.0",
-    "@symbiote-native/test-utils": "0.4.6"
+    "@symbiote-native/engine": "1.6.0",
+    "@symbiote-native/test-utils": "0.4.7"
   },
   "scripts": {
     "typecheck": "tsc --build",