git0 0.2.9 → 0.2.11

package/svelte-nodegui/src/dom/svelte-elements.ts

@@ -0,0 +1,111 @@
+// import { registerElement, ElementNode } from "./basicdom";
+// import { QWidget } from "@nodegui/nodegui";
+import { registerElement } from "./nativescript-vue-next/runtime/registry";
+import { RNObject, ObjectProps } from "./svelte/RNObject";
+import StyleElement from "./svelte/StyleElement";
+import HeadElement from "./svelte/HeadElement";
+import type SvelteNodeGUIDocument from "./svelte/SvelteNodeGUIDocument";
+import type { NSVElement } from "./nativescript-vue-next/runtime/nodes";
+import { RNWindow } from "./react-nodegui/src/components/Window/RNWindow";
+
+// Dom elements that svelte expects to be able to create or use.
+// or custom additions to make life easier
+
+export function registerSvelteElements(): void {
+    registerElement<RNObject, ObjectProps>(
+        'document',
+        () => new RNObject(),
+        {
+            nodeOps: {
+                insert(child, parent: SvelteNodeGUIDocument, atIndex?: number) {
+                    if(child instanceof HeadElement){
+                        if(parent.head){
+                            if(parent.head !== child){
+                                console.warn(`document can only have one head!`);
+                            }
+                        } else {
+                            parent.head = child;
+                            child.updateStyles();
+                        }
+                        return "defer";
+                    }
+
+                    if(child.tagName === "body"){
+                        if(parent.body){
+                            if(parent.body !== child){
+                                console.warn(`document can only have one head!`);
+                            }
+                        } else {
+                            parent.body = child as NSVElement<RNObject>;
+                        }
+                        return "defer";
+                    }
+
+                    return "defer";
+                },
+                remove(child, parent: SvelteNodeGUIDocument) {
+                    if(child instanceof HeadElement){
+                        parent.setStyleSheets("");
+                        parent.head = null;
+                        return "defer";
+                    }
+
+                    if(child.tagName === "body"){
+                        parent.body = null;
+                        return "defer";
+                    }
+
+                    // child.ownerDocument = null;
+
+                    return "defer";
+                }
+            }
+        }
+    );
+    registerElement<RNObject, ObjectProps>(
+        'head',
+        () => new RNObject(),
+        {
+            nodeOps: {
+                insert(child, parent: HeadElement, atIndex?: number) {
+                    if(child instanceof StyleElement){
+                        let css: string = child.textContent;
+                        let id = child.id;
+                        const style_hash = id.replace('-style', '');
+                        //style rules are one per line as long as each selector in the rule has the style hash we are all scoped styles and can pass true to addCss
+                        const all_scoped: boolean = css.split("\n").every(r => r.split(",").every(i => i.indexOf(style_hash) >= 0));
+
+                        // console.log(`[HeadElement] ${child} #${id}; style hash: ${style_hash}; all_scoped: ${all_scoped}; had text: ${css}`);
+
+                        parent.addStyleElement(child);
+                    }
+                    return "defer";
+                },
+                remove(child, parent: HeadElement) {
+                    // console.log(`[HeadElement] remove(${child}) removing child...`);
+
+                    if(child instanceof StyleElement){
+                        parent.removeStyleElement(child);
+                    }
+                    return "defer";
+                },
+            }
+        }
+    );
+    registerElement<RNObject, ObjectProps>(
+        'style',
+        () => new RNObject()
+    );
+    registerElement<RNObject, ObjectProps>(
+        'body',
+        () => new RNObject(),
+    );
+    registerElement<RNObject, ObjectProps>(
+        'fragment',
+        () => new RNObject(),
+    );
+    registerElement<RNObject, ObjectProps>(
+        'template',
+        () => new RNObject()
+    );
+}

package/svelte-nodegui/src/index.ts

@@ -0,0 +1,62 @@
+import { initializeDom, NSVElement } from './dom';
+
+
+declare global {
+    export class SvelteComponent {
+        $destroy(): void;
+        constructor(options: { target?: NSVElement | Element, props?: any, anchor?: NSVElement | Element, intro?: boolean });
+        $set(props: any): void;
+    }
+}
+
+export function svelteNodeGUI(rootElement: typeof SvelteComponent, data: any): Promise<SvelteComponent> {
+    const doc = initializeDom();
+
+    return new Promise((resolve, reject) => {
+
+        let elementInstance: SvelteComponent;
+
+        const buildElement = () => {
+            elementInstance = new rootElement({
+                target: doc.body,
+                props: data || {}
+            })
+            return (doc.body.firstChild as NSVElement).nativeView;
+        }
+        
+        buildElement();
+        resolve(elementInstance);
+    });
+}
+
+// Svelte looks to see if window is undefined in order to determine if it is running on the client or in SSR.
+// window is undefined until initializeDom is called. We will set it to a temporary value here and overwrite it in intializedom.
+(global as any).window = { env: "Svelte NodeGUI" }
+
+
+export { initializeDom, DomTraceCategory, NSVElement } from "./dom";
+export {
+    ImageProps, RNImage,
+    AnimatedImageProps, RNAnimatedImage,
+    ViewProps, RNView,
+    CheckBoxProps, RNCheckBox,
+    TextProps, RNText,
+    DialProps, RNDial,
+    LineEditProps, RNLineEdit,
+    WindowProps, RNWindow,
+    ProgressBarProps, RNProgressBar,
+    ComboBoxProps, RNComboBox,
+    ButtonProps, RNButton,
+    SpinBoxProps, RNSpinBox,
+    RadioButtonProps, RNRadioButton,
+    TabProps, RNTab,
+    MenuProps, RNMenu,
+    MenuBarProps, RNMenuBar,
+    PlainTextEditProps, RNPlainTextEdit,
+    SliderProps, RNSlider,
+    SystemTrayIconProps, RNSystemTrayIcon,
+    ActionProps, RNAction,
+    BoxViewProps, RNBoxView,
+    GridViewProps, RNGridView,
+    ScrollAreaProps, RNScrollArea,
+} from "./dom/react-nodegui/src";

package/svelte-nodegui/src/svelte-nodegui.ts

@@ -0,0 +1,159 @@
+declare namespace svelteNodeGUI.JSX {
+    /* svelte specific */
+    interface ElementClass {
+        $$prop_def: any;
+    }
+
+    interface ElementAttributesProperty {
+        $$prop_def: any; // specify the property name to use
+    }
+
+    /* I'm not sure of the type for Svelte Element, but extending ElementClass just makes the `$$prop_def` attribute become mandatory. */
+    // type SvelteElement = ElementClass;
+    type SvelteElement = {};
+    type SvelteText = string | number;
+    type SvelteChild = SvelteElement | SvelteText;
+
+    interface SvelteNodeArray extends Array<SvelteNode> {}
+    type SvelteFragment = {} | SvelteNodeArray;
+
+    type SvelteNode = SvelteChild | SvelteFragment | boolean | null | undefined; 
+
+    interface SvelteNodeGUIAttributes<
+        T extends import("@nodegui/nodegui").Component = import("@nodegui/nodegui").Component
+    > extends SvelteElement {
+        nodeRole?: string;
+        /* Unlike in React, Doesn't seem to be checked..? */
+        // children?: SvelteNode;
+    }
+    
+    /**
+     * Known issues:
+     * 1) None of the event handlers are filled in. Consequently, all event handlers provoke edit-time errors.
+     *    Of interest: `on:clicked` in HTMLX becomes `onclicked` in JSX.
+     *    Most likely, it follows a rule of `on${Lowercase<T>}` for a given event name.
+     * 
+     * 2) All attributes written in HTMLX are forced to lowercase (both at edit-time and runtime, by different
+     *    tooling). Thus, `windowTitle="Hi"` becomes `windowtitle="Hi"`.
+     * 
+     * In both cases, the latest stable TypeScript isn't expressive enough to express a remapping of types to lower case.
+     * However, once TypeScript 4.1 lands, it should be (provided they can sort out intrinsic types like Lowercase<T>).
+     * @see https://github.com/microsoft/TypeScript/pull/40336
+     * @see https://github.com/microsoft/TypeScript/pull/40580
+     * 
+     * In any case, a change coming to core would hopefully solve this.
+     * @see https://github.com/sveltejs/svelte/pull/5652
+     * 
+     * For now, particularly until Svelte tooling supports TypeScript 4.1, the best we can do to prevent frustration is
+     * fall back to any type (which we do with the final type intersection).
+     */
+    type SvelteNodeGUIProps<
+        Props extends {} = {},
+        T extends import("@nodegui/nodegui").Component = import("@nodegui/nodegui").Component
+    > = SvelteNodeGUIAttributes<T> & Props & { [name: string]: any; };
+
+    // Add empty IntrinsicAttributes to prevent fallback to the one in the JSX namespace
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IntrinsicAttributes {
+    }
+
+    interface IntrinsicElements {
+        [name: string]: { [name: string]: any };
+        image: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").ImageProps,
+            import("./dom/react-nodegui/src").RNImage
+        >;
+        animatedImage: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").AnimatedImageProps,
+            import("./dom/react-nodegui/src").RNAnimatedImage
+        >;
+        view: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").ViewProps<any>,
+            import("./dom/react-nodegui/src").RNView
+        >;
+        checkBox: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").CheckBoxProps,
+            import("./dom/react-nodegui/src").RNCheckBox
+        >;
+        text: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").TextProps,
+            import("./dom/react-nodegui/src").RNText
+        >;
+        dial: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").DialProps,
+            import("./dom/react-nodegui/src").RNDial
+        >;
+        lineEdit: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").LineEditProps,
+            import("./dom/react-nodegui/src").RNLineEdit
+        >;
+        window: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").WindowProps,
+            import("./dom/react-nodegui/src").RNWindow
+        >;
+        progressBar: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").ProgressBarProps,
+            import("./dom/react-nodegui/src").RNProgressBar
+        >;
+        comboBox: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").ComboBoxProps,
+            import("./dom/react-nodegui/src").RNComboBox
+        >;
+        button: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").ButtonProps,
+            import("./dom/react-nodegui/src").RNButton
+        >;
+        spinBox: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").SpinBoxProps,
+            import("./dom/react-nodegui/src").RNSpinBox
+        >;
+        radioButton: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").RadioButtonProps,
+            import("./dom/react-nodegui/src").RNRadioButton
+        >;
+        tab: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").TabProps,
+            import("./dom/react-nodegui/src").RNTab
+        >;
+        menu: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").MenuProps,
+            import("./dom/react-nodegui/src").RNMenu
+        >;
+        menuBar: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").MenuBarProps,
+            import("./dom/react-nodegui/src").RNMenuBar
+        >;
+        plainTextEdit: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").PlainTextEditProps,
+            import("./dom/react-nodegui/src").RNPlainTextEdit
+        >;
+        slider: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").SliderProps,
+            import("./dom/react-nodegui/src").RNSlider
+        >;
+        systemTrayIcon: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").SystemTrayIconProps,
+            import("./dom/react-nodegui/src").RNSystemTrayIcon
+        >;
+        svg: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").SvgProps,
+            import("./dom/react-nodegui/src").RNSvg
+        >;
+        action: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").ActionProps,
+            import("./dom/react-nodegui/src").RNAction
+        >;
+        boxView: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").BoxViewProps,
+            import("./dom/react-nodegui/src").RNBoxView
+        >;
+        gridView: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").GridViewProps,
+            import("./dom/react-nodegui/src").RNGridView
+        >;
+        scrollArea: SvelteNodeGUIProps<
+            import("./dom/react-nodegui/src").ScrollAreaProps,
+            import("./dom/react-nodegui/src").RNScrollArea
+        >;
+    }
+}

package/svelte-nodegui/src/transitions/bezier.ts

@@ -0,0 +1,112 @@
+
+export interface CubicBezier {
+	x0: number
+	y0: number
+	x1: number
+	y1: number
+	x2: number
+	y2: number
+	x3: number
+	y3: number
+}
+
+// turns an intro curve into an outro curve by mirroring and flipping
+// that is a curve that starts slow from 0 then accelerates as it gets to 1
+// will become a curve that starts fast and decelerates as it gets to 1
+// eg an animation that takes 1 second to get to half opacity but only .5 to get to full opacity
+// we could create a reverse animation from full opacity to zero which would only take 0.5 seconds to get to half opacity
+// by reversing the curve used for the fade in.
+export function reverseCurve(curve: CubicBezier): CubicBezier {
+	let {
+		x0, y0, x1, y1, x2, y2, x3, y3
+	} = curve;
+
+	return {
+		x3: x3 - x0, x2: x3 - x1, x1: x3 - x2, x0: x3 - x3,
+		y3: y3 - y0, y2: y3 - y1, y1: y3 - y2, y0: y3 - y3
+	}
+}
+
+//scales a curve so that the start point is at 0,0 and the end point is at 1,1
+export function normalizeCurve(curve: CubicBezier): CubicBezier {
+	let {
+		x0, y0, x1, y1, x2, y2, x3, y3
+	} = curve;
+
+	//move x0,y0 to origin
+	let tx = x0;
+	let ty = Math.min(y0, y3);
+
+	let scale = Math.abs(x3 - x0);
+	let scaley = Math.abs(y3 - y0);
+	return {
+		x0: (x0 - tx) / scale, x1: (x1 - tx) / scale, x2: (x2 - tx) / scale, x3: (x3 - tx) / scale,
+		y0: (y0 - ty) / scaley, y1: (y1 - ty) / scaley, y2: (y2 - ty) / scaley, y3: (y3 - ty) / scaley
+	}
+}
+// this uses the bezier equation to return the value for x at t (not to be confused with time, in animations time is x, t is more like distance along the curve )
+// x(t)= x0(1−t)^3 + 3*x1*t*(1−t)^2+ 3*x2*t^2*(1−t) + x3*t^3
+function bezierXatT(curve: CubicBezier, t: number): number {
+	return curve.x0 * Math.pow(1 - t, 3) + 3 * curve.x1 * t * Math.pow(1 - t, 2) + 3 * curve.x2 * Math.pow(t, 2) * (1 - t) + curve.x3 * Math.pow(t, 3);
+}
+
+// Find with t applied to the bezier equation gives us the supplied X 
+// the same way chrome does it: iterative bisection!
+function tValueForX(curve: CubicBezier, x: number): number {
+	let t0 = 0.0;
+	let t1 = 1.0;
+	let t2 = x;
+	const epsilon = 0.0001
+	while (t0 < t1) {
+		let x2 = bezierXatT(curve, t2);
+		if (Math.abs(x2 - x) < epsilon)
+			return t2;
+		if (x > x2)
+			t0 = t2;
+		else
+			t1 = t2;
+		t2 = (t1 - t0) * 0.5 + t0;
+	}
+}
+
+// Takes a segment of a the line made by a bezier curve between x values
+// eg, if it represented an animation we could get the curve that represents half the animation (from x=0 to x=0.5)
+export function partialCurveFrom(curve: CubicBezier, xstart: number, xend: number) {
+	//Using https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm
+	let t0 = xstart ? tValueForX(curve, xstart) : 0;
+	let t1 = xend != 1 ? tValueForX(curve, xend) : 1;
+
+	let u0 = 1 - t0;
+	let u1 = 1 - t1;
+
+	let r: CubicBezier = {} as CubicBezier;
+	let c = curve;
+	r.x0 = u0 * u0 * u0 * c.x0 + (t0 * u0 * u0 + u0 * t0 * u0 + u0 * u0 * t0) * c.x1 + (t0 * t0 * u0 + u0 * t0 * t0 + t0 * u0 * t0) * c.x2 + t0 * t0 * t0 * c.x3;
+	r.y0 = u0 * u0 * u0 * c.y0 + (t0 * u0 * u0 + u0 * t0 * u0 + u0 * u0 * t0) * c.y1 + (t0 * t0 * u0 + u0 * t0 * t0 + t0 * u0 * t0) * c.y2 + t0 * t0 * t0 * c.y3;
+
+	r.x1 = u0 * u0 * u1 * c.x0 + (t0 * u0 * u1 + u0 * t0 * u1 + u0 * u0 * t1) * c.x1 + (t0 * t0 * u1 + u0 * t0 * t1 + t0 * u0 * t1) * c.x2 + t0 * t0 * t1 * c.x3;
+	r.y1 = u0 * u0 * u1 * c.y0 + (t0 * u0 * u1 + u0 * t0 * u1 + u0 * u0 * t1) * c.y1 + (t0 * t0 * u1 + u0 * t0 * t1 + t0 * u0 * t1) * c.y2 + t0 * t0 * t1 * c.y3;
+
+	r.x2 = u0 * u1 * u1 * c.x0 + (t0 * u1 * u1 + u0 * t1 * u1 + u0 * u1 * t1) * c.x1 + (t0 * t1 * u1 + u0 * t1 * t1 + t0 * u1 * t1) * c.x2 + t0 * t1 * t1 * c.x3;
+	r.y2 = u0 * u1 * u1 * c.y0 + (t0 * u1 * u1 + u0 * t1 * u1 + u0 * u1 * t1) * c.y1 + (t0 * t1 * u1 + u0 * t1 * t1 + t0 * u1 * t1) * c.y2 + t0 * t1 * t1 * c.y3;
+
+	r.x3 = u1 * u1 * u1 * c.x0 + (t1 * u1 * u1 + u1 * t1 * u1 + u1 * u1 * t1) * c.x1 + (t1 * t1 * u1 + u1 * t1 * t1 + t1 * u1 * t1) * c.x2 + t1 * t1 * t1 * c.x3;
+	r.y3 = u1 * u1 * u1 * c.y0 + (t1 * u1 * u1 + u1 * t1 * u1 + u1 * u1 * t1) * c.y1 + (t1 * t1 * u1 + u1 * t1 * t1 + t1 * u1 * t1) * c.y2 + t1 * t1 * t1 * c.y3;
+
+	return r;
+}
+
+export function animation_curve(cpx1: number, cpy1: number, cpx2: number, cpy2: number): CubicBezier {
+	return {
+		x0: 0, y0: 0,
+		x1: cpx1, y1: cpy1,
+		x2: cpx2, y2: cpy2,
+		x3: 1, y3: 1
+	}
+}
+
+export let ease_in = animation_curve(0.42, 0, 1, 1);
+export let ease_out = animation_curve(0, 0, 0.58, 1);
+export let ease_in_out = animation_curve(0.42, 0, 0.58, 1);
+export let ease = animation_curve(0.25, 0.1, 0.25, 1);
+export let linear = animation_curve(0.5, 0.5, 0.5, 0.5);

package/svelte-nodegui/src/transitions/index.ts

@@ -0,0 +1,227 @@
+// import { CubicBezierAnimationCurve, Pair } from "@nativescript/core/ui/animation";
+// import { AnimationCurve } from "@nativescript/core/ui/enums";
+// import { Animation, AnimationDefinition, Color, View } from "@nativescript/core";
+
+import { ease_in, ease_out, ease, linear, ease_in_out, animation_curve, normalizeCurve, partialCurveFrom, reverseCurve, CubicBezier } from "./bezier"
+// import * as easings from './easing'
+import { NSVElement } from "../dom";
+import { warn } from "../dom/shared/Logger";
+import { NodeWidget, QWidgetSignals } from "@nodegui/nodegui";
+import type { NativeView } from "../dom/nativescript-vue-next/runtime/nodes";
+
+
+enum AnimationDirection { Unknown, In, Out }
+
+
+export interface NativeAnimationDefinition {
+    // opacity?: number;
+    // backgroundColor?: Color;
+    // translate?: Pair;
+    // scale?: Pair;
+    // rotate?: number;
+}
+
+
+export function asSvelteTransition<T extends NativeView = NativeView>(node: NSVElement<T>, delay: number = 0, duration: number = 300, curve: string, nativeAnimationProps: (t: number) => NativeAnimationDefinition) {
+
+    let svelteAnim: any = {
+        delay: delay,
+        duration: duration,
+    }
+
+    let svelteCurve: CubicBezier;
+
+    // if (typeof curve == "string") {
+    //     switch (curve) {
+    //         case AnimationCurve.ease: svelteCurve = ease; break;
+    //         case AnimationCurve.easeIn: svelteCurve = ease_in; break;
+    //         case AnimationCurve.easeOut: svelteCurve = ease_out; break;
+    //         case AnimationCurve.easeInOut: svelteCurve = ease_in_out; break;
+    //         case AnimationCurve.linear: svelteCurve = linear; break;
+    //         default:
+    //             console.warn("Unsupported nativescript animation name, reverting to linear")
+    //             svelteCurve = linear;
+    //     }
+    // }
+
+    warn("Stubbing animation as linear")
+    svelteCurve = linear;
+
+    // if (curve instanceof CubicBezierAnimationCurve) {
+    //     //convert to our bezier format
+    //     svelteCurve = animation_curve(curve.x1, curve.y1, curve.x2, curve.y2);
+    // }
+
+    //default to linear
+    if (!curve) {
+        svelteCurve = linear
+    }
+
+    let direction = AnimationDirection.Unknown
+    let animation: Animation = null;
+    let last_t = -1;
+
+    const cancelNativeAnimation = () => {
+        // if (animation && animation.isPlaying) {
+        //     //  console.log("cancelling animation on ", node);
+        //     let oldanimation = animation;
+        //     animation = null;
+        //     oldanimation.cancel();
+        // }
+        // animation = null;
+    }
+
+    //Tick is our hook into sveltes transition system. We want to detect a forward or backward animation,
+    //determine the end value, and do a single native animation for the entire duration.
+    //the spanner in the works is that there is a transistion type (in_out) that can stop mid animation and play in reverse
+    //we need to do some math to generate a curve that can apply to the shortened time that mirrors the intro that has already played.
+
+
+    // we note the following svelte behaviour:
+    // "in" animations always get an explicit tick(0, 1) even before any delay.
+    // "out" animations have no such quality, therefore we can expect that if we have not been initialized, and get a t=0 we are an Intro
+
+    svelteAnim.tick = (t: number) => {
+
+        // //when you cancel an animation, it appears to set the values back to the start. we use this to reapply them at the given time.
+        // function applyAnimAtTime(time: number) {
+        //     let animDef = nativeAnimationProps(time);
+        //     if (typeof animDef.opacity !== 'undefined') node.nativeView.opacity = animDef.opacity;
+        //     if (typeof animDef.backgroundColor != 'undefined') node.nativeView.backgroundColor = animDef.backgroundColor;
+        //     if (typeof animDef.rotate != 'undefined') node.nativeView.rotate = animDef.rotate;
+        //     if (typeof animDef.scale != 'undefined') {
+        //         node.nativeView.scaleX = animDef.scale.x;
+        //         node.nativeView.scaleY = animDef.scale.y;
+        //     }
+        //     if (typeof animDef.translate != 'undefined') {
+        //         node.nativeView.translateX = animDef.translate.x;
+        //         node.nativeView.translateY = animDef.translate.y;
+        //     }
+        // }
+
+        // //our first frame! are we an in or out
+        // if (direction == AnimationDirection.Unknown) {
+        //     //intro: do an initialize
+        //     if (t === 0) {
+        //         applyAnimAtTime(0);
+        //         direction = AnimationDirection.In
+        //         last_t = 0;
+        //         //   console.log("forward animation detected!", node);
+        //         //don't start our full animation yet since this is just the init frame, and there will be a delay. so wait for next frame
+        //         return;
+        //     } else {
+        //         //we must be an outro since all intros get a t==0
+        //         //  console.log("reverse animation detected!", node);
+        //         direction = AnimationDirection.Out
+        //         last_t = t;
+        //     }
+        // }
+
+        // //have we changed direction?
+        // if (direction == AnimationDirection.In && last_t > t) {
+        //     // console.log("animation changed direction (In -> Out)", t, node);
+        //     direction = AnimationDirection.Out
+        //     cancelNativeAnimation();
+        //     applyAnimAtTime(t);
+        // }
+        // if (direction == AnimationDirection.Out && last_t < t) {
+        //     //    console.log("animation changed direction (Out -> In)", t, node);
+        //     direction = AnimationDirection.In
+        //     cancelNativeAnimation();
+        //     applyAnimAtTime(t);
+        // }
+        // last_t = t;
+
+        // if (!animation) {
+        //     //create a new animation that will cover us from now to either t=duration or t=0
+        //     let target_t = (direction == AnimationDirection.In) ? 1 : 0;
+        //     let animProps = nativeAnimationProps(target_t)
+        //     let nsAnimation: AnimationDefinition = { ...animProps }
+        //     nsAnimation.delay = 0;
+        //     if (direction == AnimationDirection.Out) {
+        //         //we need to play in reverse, and we might not be playing the whole thing
+        //         let forwardCurve = t == 1 ? svelteCurve : partialCurveFrom(svelteCurve, 0, t)
+        //         let finalCurve = normalizeCurve(reverseCurve(forwardCurve));
+        //         nsAnimation.curve = AnimationCurve.cubicBezier(finalCurve.x1, finalCurve.y1, finalCurve.x2, finalCurve.y2);
+        //         nsAnimation.duration = t * duration;
+        //     } else {
+        //         //we might be starting from halfway (intro->outro-intro again)
+        //         let forwardCurve = t == 0 ? svelteCurve : partialCurveFrom(svelteCurve, t, 1)
+        //         let finalCurve = normalizeCurve(forwardCurve);
+        //         nsAnimation.curve = AnimationCurve.cubicBezier(finalCurve.x1, finalCurve.y1, finalCurve.x2, finalCurve.y2);
+        //         nsAnimation.duration = (1 - t) * duration;
+        //     }
+        //     //console.log("animation created", t, (direction == AnimationDirection.In) ? "Intro" : "Outro", nsAnimation, node);
+        //     // kick it off
+        //     animation = node.nativeView.createAnimation(nsAnimation);
+        //     animation.play();
+        // }
+    }
+
+    return svelteAnim;
+}
+
+/* ported from svelte transitions */
+
+export function fade<T extends NativeView = NativeView>(node: NSVElement<T>, {
+    delay = 0,
+    duration = 400
+}) {
+    const o = (node.nativeView as any).opacity;
+    return asSvelteTransition(node, delay, duration, "linear",
+        (t) => ({
+            opacity: 1
+        })
+    );
+}
+
+export function fly<T extends NativeView = NativeView>(node: NSVElement<T>, {
+    delay = 0,
+    duration = 400,
+    easing = "linear",
+    x = 0,
+    y = 0
+}) {
+    // const opacity = node.nativeView.opacity;
+    // const translateX = node.nativeView.translateX;
+    // const translateY = node.nativeView.translateY;
+
+    return asSvelteTransition(node, delay, duration, easing,
+        (t) => ({
+            opacity: 1,
+            translate: {
+                x: 0,
+                y: 0
+            }
+        })
+    );
+}
+
+export function slide<T extends NativeView = NativeView>(node: NSVElement<T>, {
+    delay = 0,
+    duration = 400,
+    easing = "linear"
+}) {
+
+    // const height = node.nativeView.effectiveHeight;
+    // const scaleX = node.nativeView.scaleX;
+    // const scaleY = node.nativeView.scaleY;
+    // const translateX = node.nativeView.translateX;
+    // const translateY = node.nativeView.translateY;
+
+    return asSvelteTransition(node, delay, duration, easing,
+        t => ({
+            scale: {
+                x: 1,
+                y: 1
+            },
+            translate: {
+                x: 0,
+                y: 0
+            }
+        })
+    );
+}
+
+
+// export { easings }