@symbiote-native/vue 3.0.4 → 3.1.0

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';

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';

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.1.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/components": "3.1.3",
     "@symbiote-native/css-parser": "0.5.2"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.3.1"
+    "@symbiote-native/engine": "^1.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@symbiote-native/engine": "1.3.1",
-    "@symbiote-native/test-utils": "0.4.4"
+    "@symbiote-native/engine": "1.4.0",
+    "@symbiote-native/test-utils": "0.4.5"
   },
   "scripts": {
     "typecheck": "tsc --build",