@symbiote-native/vue 3.0.4 → 3.2.0

package/build/composables/create-event-value-hook.d.ts

@@ -0,0 +1,3 @@
+import { type ShallowRef } from '@vue/runtime-core';
+import type { IEventValueSource } from '@symbiote-native/engine';
+export declare function createEventValueHook<TSource extends IEventValueSource<TValue, TEvent>, TValue, TEvent extends string = string>(event: TEvent, getValue: (source: TSource) => TValue): (getSource: () => TSource) => ShallowRef<TValue>;

package/build/composables/create-event-value-hook.js

@@ -0,0 +1,16 @@
+// Every `useXStatus`-style composable (`useAudioPlayerStatus`, `useAudioPlaylistStatus`, ...)
+// binds this to its own event name + initial-value getter instead of repeating the watch wiring
+import { shallowRef, watch } from '@vue/runtime-core';
+export function createEventValueHook(event, getValue) {
+    return function useEventValue(getSource) {
+        const value = shallowRef(getValue(getSource()));
+        watch(getSource, (source, _previous, onCleanup) => {
+            value.value = getValue(source);
+            const subscription = source.addListener(event, next => {
+                value.value = next;
+            });
+            onCleanup(() => subscription.remove());
+        }, { immediate: true });
+        return value;
+    };
+}

package/build/composables/create-permission-hook.d.ts

@@ -0,0 +1,3 @@
+import { type Ref } from '@vue/runtime-core';
+import { type IPermissionHookBehavior, type IPermissionHookMethods } from '@symbiote-native/engine';
+export declare function createPermissionHook<TPermission, TOptions extends object>(methods: IPermissionHookMethods<TPermission, TOptions>): (behavior?: IPermissionHookBehavior, methodOptions?: TOptions) => [Ref<TPermission | null>, () => Promise<TPermission>, () => Promise<TPermission>];

package/build/composables/create-permission-hook.js

@@ -0,0 +1,22 @@
+// Every Expo-wrapper package's own permission composable (`useCameraPermissions`,
+// `useCalendarPermissions`, `useRemindersPermissions`, ...) binds this factory to its `methods`
+import { onMounted, shallowRef } from '@vue/runtime-core';
+import { createPermissionApi, fetchInitialPermission, } from '@symbiote-native/engine';
+export function createPermissionHook(methods) {
+    return function usePermission(behavior, methodOptions) {
+        const status = shallowRef(null);
+        const api = createPermissionApi(methods, value => {
+            status.value = value;
+        });
+        onMounted(() => {
+            fetchInitialPermission(methods, behavior, methodOptions, response => {
+                status.value = response;
+            });
+        });
+        return [
+            status,
+            () => api.request(methodOptions),
+            () => api.get(methodOptions),
+        ];
+    };
+}

package/build/composables/create-resource-hook.d.ts

@@ -0,0 +1,7 @@
+import { type ComputedRef } from '@vue/runtime-core';
+export type IResourceHookController<TArgs extends unknown[], TResource> = {
+    resolve: (...args: TArgs) => TResource;
+    flushDispose: () => void;
+    dispose: () => void;
+};
+export declare function createResourceHook<TArgs extends unknown[], TResource>(createController: () => IResourceHookController<TArgs, TResource>): (getArgs: () => TArgs) => ComputedRef<TResource>;

package/build/composables/create-resource-hook.js

@@ -0,0 +1,14 @@
+// Every `useReleasingSharedObject`-style composable (`useAudioPlayer`, `useImageManipulator`, ...)
+// binds this to its own `createXController()` instead of repeating the computed/watch wiring
+import { computed, onUnmounted, watch, } from '@vue/runtime-core';
+export function createResourceHook(createController) {
+    return function useResource(getArgs) {
+        const controller = createController();
+        const resource = computed(() => controller.resolve(...getArgs()));
+        watch(resource, () => {
+            controller.flushDispose();
+        });
+        onUnmounted(() => controller.dispose());
+        return resource;
+    };
+}

package/build/create-transition/index.d.ts

@@ -0,0 +1,27 @@
+import { type VNode } from '@vue/runtime-core';
+export interface ITransitionProps {
+    duration?: number;
+    appear?: boolean;
+}
+export declare const Transition: import("vue").DefineComponent<{
+    duration: number;
+    appear: boolean;
+}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    duration: number;
+    appear: boolean;
+}> & Readonly<{}>, {
+    duration: number;
+    appear: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const TransitionGroup: import("vue").DefineComponent<{
+    duration: number;
+    appear: boolean;
+}, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    duration: number;
+    appear: boolean;
+}> & Readonly<{}>, {
+    duration: number;
+    appear: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/create-transition/index.js

@@ -0,0 +1,84 @@
+// Vue's own <Transition>/<TransitionGroup> live in @vue/runtime-dom (CSS class
+// toggling), unreachable through this adapter's runtime-core-only "vue" import.
+// Wires BaseTransition's (runtime-core) enter/leave hooks to Animated instead.
+import { BaseTransition, defineComponent, Fragment, getCurrentInstance, getTransitionRawChildren, h, resolveTransitionHooks, setTransitionHooks, useTransitionState, } from '@vue/runtime-core';
+import { AnimatedValue, isSymbioteNode, propOf, requestCommitFor, routeProp, timing, } from '@symbiote-native/engine';
+const DEFAULT_DURATION_MS = 300;
+const opacityOf = new WeakMap();
+// routeProp, not setProp/setNativeProps: an AnimatedNode is only recognized and kept
+// subscribed to per-frame updates through routeProp's own resolution
+// (core/engine/src/animated/host-binding.ts).
+function animatedOpacity(el, initial) {
+    const value = new AnimatedValue(initial);
+    opacityOf.set(el, value);
+    const style = propOf(el, 'style');
+    routeProp(el, 'style', {
+        ...(typeof style === 'object' && style !== null ? style : {}),
+        opacity: value,
+    });
+    requestCommitFor(el);
+    return value;
+}
+function fadeTo(el, toValue, duration, done) {
+    const value = opacityOf.get(el) ?? animatedOpacity(el, toValue === 1 ? 0 : 1);
+    timing(value, { toValue, duration }).start(({ finished }) => {
+        if (finished)
+            done();
+    });
+}
+// This project's native equivalent of Vue's CSS transition classes. Named per-`name`
+// enter/leave effects are not implemented (see the gap-list for that decision).
+function fadeHooks(duration) {
+    return {
+        onBeforeEnter: el => {
+            if (isSymbioteNode(el))
+                animatedOpacity(el, 0);
+        },
+        onEnter: (el, done) => {
+            if (isSymbioteNode(el))
+                fadeTo(el, 1, duration, done);
+            else
+                done();
+        },
+        onLeave: (el, done) => {
+            if (isSymbioteNode(el))
+                fadeTo(el, 0, duration, done);
+            else
+                done();
+        },
+    };
+}
+export const Transition = defineComponent({
+    name: 'Transition',
+    props: {
+        duration: { type: Number, default: DEFAULT_DURATION_MS },
+        appear: { type: Boolean, default: false },
+    },
+    setup(props, { slots }) {
+        return () => h(BaseTransition, { appear: props.appear, ...fadeHooks(props.duration) }, slots);
+    },
+});
+// The move/reorder FLIP animation Vue's own TransitionGroup does over
+// offsetLeft/offsetTop is DOM-measurement-specific and not implemented here.
+export const TransitionGroup = defineComponent({
+    name: 'TransitionGroup',
+    props: {
+        duration: { type: Number, default: DEFAULT_DURATION_MS },
+        appear: { type: Boolean, default: false },
+    },
+    setup(props, { slots }) {
+        const instance = getCurrentInstance();
+        const state = useTransitionState();
+        return () => {
+            const children = slots.default
+                ? getTransitionRawChildren(slots.default())
+                : [];
+            for (const child of children) {
+                if (child.key == null || !instance)
+                    continue;
+                setTransitionHooks(child, resolveTransitionHooks(child, { appear: props.appear, ...fadeHooks(props.duration) }, state, instance));
+            }
+            return h(Fragment, null, children);
+        };
+    },
+});

package/build/index.d.ts

@@ -4,6 +4,7 @@ export { mount, unmount, setAppConfigurator } from './render';
 export type { IAppConfigurator } from './render';
 export { Teleport, type ITeleportTarget } from './create-portal';
 export { createTunnel, type ITunnel } from './create-tunnel';
+export { Transition, TransitionGroup, type ITransitionProps, } from './create-transition';
 export type { IViewProps } from './components/view-props';
 export type { ITextProps } from './components/text-props';
 export type { ISymbioteIntrinsicTag, ISymbioteHostAttributes, } from './intrinsic-elements';
@@ -53,6 +54,9 @@ export { AppRegistry, setHostRegistrar } from './modules/app-registry';
 export type { IComponentProvider, IAppParameters, IRunnable, IHostRegistrar, IWrapperComponentProvider, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from './modules/app-registry';
 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 { createEventValueHook } from './composables/create-event-value-hook';
 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

@@ -36,6 +36,10 @@ export { mount, unmount, setAppConfigurator } from './render.js';
 // into an <Out/> the destination has to render. See create-portal/index.ts.
 export { Teleport } from './create-portal/index.js';
 export { createTunnel } from './create-tunnel/index.js';
+// Vue's own Transition/TransitionGroup are runtime-dom-only (CSS class toggling) and
+// would otherwise come from the wildcard above as unusable DOM stubs. These fade over
+// the engine's Animated graph instead. See create-transition/index.ts.
+export { Transition, TransitionGroup, } from './create-transition/index.js';
 // IHostInstance is the raw engine node (Vue host refs fall through to it; imperative methods
 // live on each component's expose() handle).
 export { findNodeHandle } from './host-instance/index.js';
@@ -69,6 +73,9 @@ export { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';
 // Vue composables over the core device-state modules.
 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 { createEventValueHook } from './composables/create-event-value-hook.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/runtime-helpers/index.d.ts

@@ -1,4 +1,5 @@
 export * from '@vue/runtime-core';
+export { Transition, TransitionGroup } from '../create-transition';
 import { type ObjectDirective } from '@vue/runtime-core';
 import { type ISymbioteNode } from '@symbiote-native/engine';
 export declare function normalizeProps(props: Record<string, unknown> | null | undefined): Record<string, unknown> | null;

package/build/runtime-helpers/index.js

@@ -9,6 +9,7 @@
 // Scope: Vue's own template directives (v-show, Teleport) and `v-model` on an ELEMENT — see
 // vModelText below for why that is in scope.
 export * from '@vue/runtime-core';
+export { Transition, TransitionGroup } from '../create-transition/index.js';
 import { getCurrentInstance, mergeProps as baseMergeProps, normalizeClass, normalizeStyle as baseNormalizeStyle, warn, } from '@vue/runtime-core';
 import { componentOf, propOf, requestCommitFor, setNativeProps, setProp, whenCommitted, } from '@symbiote-native/engine';
 import { descriptorFor, SWITCH_TAG } from '@symbiote-native/components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/vue",
-  "version": "3.0.4",
+  "version": "3.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.",
   "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.2",
-    "@symbiote-native/css-parser": "0.5.2"
+    "@symbiote-native/components": "3.1.4",
+    "@symbiote-native/css-parser": "0.5.3"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.3.1"
+    "@symbiote-native/engine": "^1.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@symbiote-native/engine": "1.3.1",
-    "@symbiote-native/test-utils": "0.4.4"
+    "@symbiote-native/engine": "1.5.0",
+    "@symbiote-native/test-utils": "0.4.6"
   },
   "scripts": {
     "typecheck": "tsc --build",