adds transition utility to the client sdk

packages/client/src/sdk.js

@@ -7,6 +7,7 @@ import {
   builderStore,
 } from "./store"
 import { styleable } from "./utils/styleable"
+import transition from "./utils/transition"
 import { linkable } from "./utils/linkable"
 import Provider from "./components/Provider.svelte"
 import { ActionTypes } from "./constants"
@@ -19,6 +20,7 @@ export default {
   screenStore,
   builderStore,
   styleable,
+  transition,
   linkable,
   Provider,
   ActionTypes,

packages/client/src/utils/transition.js

@@ -0,0 +1,14 @@
+import { fade, blur, slide, fly } from 'svelte/transition'
+
+// Default options
+const transitions = new Map([
+  ["fade", { tn: fade, opt: {} }],
+  ["blur", { tn: blur, opt: {} }],
+  ["slide", { tn: slide, opt: {} }],
+  ["fly", { tn: fly, opt: { y: 30 } }],
+])
+	
+export default function transition(node, {type, options = {}}) {
+	const { tn, opt } = transitions.get(type) || {}
+	return tn ? tn(node, {...opt, ...options}) : fade(node, { duration: 0})
+}

packages/standard-components/manifest.json

@@ -291,6 +291,13 @@
         "type": "text",
         "label": "URL",
         "key": "url"
+      },
+      {
+        "type": "select",
+        "key": "transitionType",
+        "label": "Transition",
+        "options": ["fade", "blur", "slide", "fly"],
+        "defaultValue": ""
       }
     ]
   },

packages/standard-components/src/Image.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, transition } = getContext("sdk")
   const component = getContext("component")
 
   export let className = ""
@@ -9,6 +9,7 @@
   export let description = ""
   export let height
   export let width
+  export let transitionType = ""
 </script>
 
 <img
@@ -17,4 +18,5 @@
   class={className}
   src={url}
   alt={description}
-  use:styleable={$component.styles} />
+  use:styleable={$component.styles}
+  in:transition={{type: transitionType}} />