@threlte/theatre 3.1.2 → 3.2.1

package/dist/sequence/Sequence.svelte

@@ -95,9 +95,9 @@
     positionChangedBy = 'code'
     position = value
   })
-  $: position,
+  $: (position,
     positionChangedBy === 'user' && ($positionStore = position),
-    (positionChangedBy = 'user')
+    (positionChangedBy = 'user'))
 
   // playing
   let playingChangedBy = 'user'
@@ -105,7 +105,9 @@
     playingChangedBy = 'code'
     playing = value
   })
-  $: playing, playingChangedBy === 'user' && ($playingStore = playing), (playingChangedBy = 'user')
+  $: (playing,
+    playingChangedBy === 'user' && ($playingStore = playing),
+    (playingChangedBy = 'user'))
 
   // pass sequence to children via context
   setContext('theatre-sequence', sequence)

package/dist/sheetObject/SheetObject.svelte

@@ -9,7 +9,7 @@
 >
   import { useStudio } from '../studio/useStudio.js'
   import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core'
-  import { currentWritable, useThrelte, watch, type CurrentWritable } from '@threlte/core'
+  import { currentWritable, useThrelte, observe, type CurrentWritable } from '@threlte/core'
   import { getContext, onDestroy, onMount } from 'svelte'
   import type { SheetContext } from '../sheet/types.js'
   import Declare from './declare/Declare.svelte'
@@ -108,25 +108,31 @@
 
   let values = $state($sheetObject?.value)
 
-  watch(sheetObject, (sheetObject) => {
-    return sheetObject.onValuesChange((newValues) => {
-      onchange?.(newValues)
-      values = newValues
-      // this invalidation also invalidates changes catched by slotted
-      // components such as <Sync> or <Declare>.
-      invalidate()
-    })
-  })
+  observe.pre(
+    () => [sheetObject],
+    ([sheetObject]) => {
+      return sheetObject.onValuesChange((newValues) => {
+        onchange?.(newValues)
+        values = newValues
+        // this invalidation also invalidates changes catched by slotted
+        // components such as <Sync> or <Declare>.
+        invalidate()
+      })
+    }
+  )
 
   // Provide a flag to indicate whether this sheet object is selected in the
   // Theatre.js studio.
   const studio = useStudio()
 
-  watch([studio, sheetObject], ([studio, sheetObject]) => {
-    return studio?.onSelectionChange((selection) => {
-      selected = selection.includes(sheetObject)
-    })
-  })
+  observe.pre(
+    () => [studio, sheetObject],
+    ([studio, sheetObject]) => {
+      return studio?.onSelectionChange((selection) => {
+        selected = selection.includes(sheetObject)
+      })
+    }
+  )
 
   // Provide a select function to select this sheet object in the Theatre.js
   // studio.

package/dist/sheetObject/declare/Declare.svelte

@@ -3,7 +3,7 @@
   generics="P extends UnknownShorthandCompoundProps"
 >
   import type { UnknownShorthandCompoundProps } from '@theatre/core'
-  import { watch } from '@threlte/core'
+  import { observe } from '@threlte/core'
   import { onDestroy } from 'svelte'
   import { useSheet } from '../useSheet.js'
   import type { DeclareProps } from './types.js'
@@ -20,11 +20,14 @@
     removeProps(Object.keys(props))
   })
 
-  watch(sheetObject, (sheetObject) => {
-    return sheetObject?.onValuesChange((v) => {
-      values = v
-    })
-  })
+  observe.pre(
+    () => [sheetObject],
+    ([sheetObject]) => {
+      return sheetObject?.onValuesChange((v) => {
+        values = v
+      })
+    }
+  )
 </script>
 
 {@render children?.({ values })}

package/dist/sheetObject/sync/Sync.svelte

@@ -2,7 +2,7 @@
   lang="ts"
   generics="Type"
 >
-  import { resolvePropertyPath, useParent, watch } from '@threlte/core'
+  import { resolvePropertyPath, useParent, observe } from '@threlte/core'
   import { onDestroy } from 'svelte'
   import { useStudio } from '../../studio/useStudio.js'
   import type { Transformer } from '../transfomers/types.js'
@@ -75,34 +75,37 @@
     'aspect'
   ]
 
-  watch([parent, sheetObject], ([parent, sheetObject]) => {
-    if (!parent) return
+  observe.pre(
+    () => [parent, sheetObject],
+    ([parent, sheetObject]) => {
+      if (!parent) return
 
-    return sheetObject?.onValuesChange((values) => {
-      // Ensure that the parent is still mounted
+      return sheetObject?.onValuesChange((values) => {
+        // Ensure that the parent is still mounted
 
-      Object.keys(values).forEach((key) => {
-        // first, check if the prop is mapped in this component
-        const propMapping = propMappings[key]
+        Object.keys(values).forEach((key) => {
+          // first, check if the prop is mapped in this component
+          const propMapping = propMappings[key]
 
-        if (!propMapping) return
+          if (!propMapping) return
 
-        // we're using the addedProps map to infer the target property name from the property name on values
-        const { target, key: targetKey } = resolvePropertyPath(
-          parent as any,
-          propMapping.propertyPath
-        )
+          // we're using the addedProps map to infer the target property name from the property name on values
+          const { target, key: targetKey } = resolvePropertyPath(
+            parent as any,
+            propMapping.propertyPath
+          )
 
-        // use a transformer to apply value
-        const transformer = propMapping.transformer
-        transformer.apply(target, targetKey, values[key])
+          // use a transformer to apply value
+          const transformer = propMapping.transformer
+          transformer.apply(target, targetKey, values[key])
 
-        if (updateProjectionMatrixKeys.includes(targetKey)) {
-          target.updateProjectionMatrix?.()
-        }
+          if (updateProjectionMatrixKeys.includes(targetKey)) {
+            target.updateProjectionMatrix?.()
+          }
+        })
       })
-    })
-  })
+    }
+  )
 
   initProps()
 

package/dist/sheetObject/transform/Transform.svelte

@@ -3,7 +3,7 @@
   generics="Label extends string | undefined"
 >
   import type { IScrub } from '@theatre/studio'
-  import { T, watch } from '@threlte/core'
+  import { T, observe } from '@threlte/core'
   import { TransformControls } from '@threlte/extras'
   import { onMount } from 'svelte'
   import { Group } from 'three'
@@ -83,25 +83,28 @@
     }
   }
 
-  watch([sheetObject], ([sheetObject]) => {
-    return sheetObject?.onValuesChange((values) => {
-      let object = values
-
-      if (key) {
-        if (!values[key]) return
-        object = values[key]
-      } else {
-        if (!values.position || !values.rotation || !values.scale) return
-      }
-
-      // sanity check
-      if (!object) return
-
-      positionTransformer.apply(group, 'position', object.position)
-      rotationTransformer.apply(group, 'rotation', object.rotation)
-      scaleTransformer.apply(group, 'scale', object.scale)
-    })
-  })
+  observe.pre(
+    () => [sheetObject],
+    ([sheetObject]) => {
+      return sheetObject?.onValuesChange((values) => {
+        let object = values
+
+        if (key) {
+          if (!values[key]) return
+          object = values[key]
+        } else {
+          if (!values.position || !values.rotation || !values.scale) return
+        }
+
+        // sanity check
+        if (!object) return
+
+        positionTransformer.apply(group, 'position', object.position)
+        rotationTransformer.apply(group, 'rotation', object.rotation)
+        scaleTransformer.apply(group, 'scale', object.scale)
+      })
+    }
+  )
 
   onMount(() => {
     initTransform()
@@ -114,12 +117,15 @@
   let scrub: IScrub | undefined
   let isSelected = $state(false)
 
-  watch([studio], ([studio]) => {
-    return studio?.onSelectionChange((selection) => {
-      if (!$sheetObject) return
-      isSelected = selection.includes($sheetObject)
-    })
-  })
+  observe.pre(
+    () => [studio],
+    ([studio]) => {
+      return studio?.onSelectionChange((selection) => {
+        if (!$sheetObject) return
+        isSelected = selection.includes($sheetObject)
+      })
+    }
+  )
 
   const onMouseDown = () => {
     if (!studio.current) return

package/dist/studio/InnerStudio.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-  import { watch } from '@threlte/core'
+  import { observe } from '@threlte/core'
   import { writable } from 'svelte/store'
 
   interface Props {
@@ -25,17 +25,20 @@
     hideStore.set(hide)
   })
 
-  watch([studio, hideStore], ([studio, hide]) => {
-    if (hide) {
-      studio?.ui.hide()
-    } else {
-      studio?.ui.restore()
+  observe.pre(
+    () => [studio, hideStore],
+    ([studio, hide]) => {
+      if (hide) {
+        studio?.ui.hide()
+      } else {
+        studio?.ui.restore()
+      }
+
+      return () => {
+        studio?.ui.hide()
+      }
     }
-
-    return () => {
-      studio?.ui.hide()
-    }
-  })
+  )
 </script>
 
 {@render children?.()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/theatre",
-  "version": "3.1.2",
+  "version": "3.2.1",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "description": "Threlte Components for Theatre, an animation library with a professional motion design toolset",
@@ -16,21 +16,20 @@
     "eslint": "^9.26.0",
     "eslint-plugin-svelte": "^3.5.1",
     "globals": "^16.1.0",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
     "publint": "^0.2.7",
     "rimraf": "^6.0.1",
-    "svelte": "5.26.2",
+    "svelte": "5.53.6",
     "svelte-check": "^4.3.1",
-    "svelte2tsx": "^0.7.6",
     "three": "^0.175.0",
     "tslib": "^2.6.2",
     "type-fest": "^4.15.0",
     "typescript": "5.9.2",
     "typescript-eslint": "^8.32.0",
     "vite": "^7.1.4",
-    "@threlte/core": "8.3.0",
-    "@threlte/extras": "9.7.1"
+    "@threlte/core": "8.5.1",
+    "@threlte/extras": "9.12.1"
   },
   "peerDependencies": {
     "@theatre/core": ">=0.6",
@@ -54,7 +53,7 @@
   "homepage": "https://threlte.xyz",
   "repository": {
     "type": "git",
-    "url": "https://github.com/threlte/threlte.git",
+    "url": "https://github.com/threlte/threlte",
     "directory": "packages/theatre"
   },
   "bugs": {