@threlte/theatre 2.1.7 → 3.0.0-next.0

package/dist/sequence/SequenceController.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+/// <reference types="svelte" />
 import type { ISequence } from '@theatre/core';
 import type { Readable, Subscriber, Writable } from 'svelte/store';
 import { onChange } from '../theatre';

package/dist/sheetObject/SheetObject.svelte

@@ -4,27 +4,24 @@
 	- Potentially Providing a sheet object
 -->
 <script>import { useStudio } from '../studio/useStudio';
-import { createRawEventDispatcher, currentWritable, watch, useThrelte } from '@threlte/core';
-import { getContext, onDestroy, onMount } from 'svelte';
+import { currentWritable, watch, useThrelte } from '@threlte/core';
+import { getContext, onDestroy, onMount, setContext } from 'svelte';
 import Declare from './declare/Declare.svelte';
 import Sync from './sync/Sync.svelte';
 import Transform from './transform/Transform.svelte';
-export let key;
-export let detach = false;
-export let props = undefined;
+let { key, detach = false, props, selected = $bindable(false), ...restProps } = $props();
 const { invalidate } = useThrelte();
 let aggregatedProps = { ...props };
 const { sheet } = getContext('theatre-sheet');
 const sheetObject = currentWritable(sheet.object(key, aggregatedProps, {
     reconfigure: true
 }));
-const dispatch = createRawEventDispatcher();
 onMount(() => {
     // Because the sheet object value subscription is not running before any
     // values change, we're emitting the initial value here. Doing this in
     // onMount also means that child components which might add props to the
     // sheet object have already been mounted.
-    dispatch('change', sheetObject.current.value);
+    restProps.$$events?.change?.(sheetObject.current.value);
 });
 // This flag is used to prevent the sheet object from being created after it
 // has been detached.
@@ -72,36 +69,15 @@ const removeProps = (propNames) => {
         updateSheetObject();
     }
 };
-const augmentConstructorArgs = (args) => {
-    return {
-        ...args,
-        props: {
-            ...args.props,
-            sheetObject,
-            addProps,
-            removeProps
-        }
-    };
-};
-const proxySyncComponent = new Proxy(Sync, {
-    construct(_target, [args]) {
-        return new Sync(augmentConstructorArgs(args));
-    }
-});
-const proxyTransformComponent = new Proxy(Transform, {
-    construct(_target, [args]) {
-        return new Transform(augmentConstructorArgs(args));
-    }
-});
-const proxyDeclareComponent = new Proxy(Declare, {
-    construct(_target, [args]) {
-        return new Declare(augmentConstructorArgs(args));
-    }
+setContext('threlte-theater-sheet-context', {
+    sheetObject,
+    addProps,
+    removeProps
 });
 let values = $sheetObject?.value;
 watch(sheetObject, (sheetObject) => {
     return sheetObject.onValuesChange((newValues) => {
-        dispatch('change', newValues);
+        restProps.$$events?.change?.(newValues);
         values = newValues;
         // this invalidation also invalidates changes catched by slotted
         // components such as <Sync> or <Declare>.
@@ -111,7 +87,6 @@ watch(sheetObject, (sheetObject) => {
 // Provide a flag to indicate whether this sheet object is selected in the
 // Theatre.js studio.
 const studio = useStudio();
-export let selected = false;
 watch([studio, sheetObject], ([studio, sheetObject]) => {
     return studio?.onSelectionChange((selection) => {
         selected = selection.includes(sheetObject);
@@ -135,7 +110,7 @@ const deselect = () => {
   {select}
   {deselect}
   sheetObject={$sheetObject}
-  Sync={proxySyncComponent}
-  Transform={proxyTransformComponent}
-  Declare={proxyDeclareComponent}
+  {Sync}
+  {Transform}
+  {Declare}
 />

package/dist/sheetObject/declare/Declare.svelte

@@ -1,19 +1,14 @@
-<script>import { watch } from '@threlte/core';
-import { onDestroy } from 'svelte';
+<script>import { watch, currentWritable } from '@threlte/core';
+import { onDestroy, getContext } from 'svelte';
 export let props;
-/** @package */
-export let sheetObject;
-/** @package */
-export let addProps;
-/** @package */
-export let removeProps;
+const { sheetObject, addProps, removeProps } = getContext('threlte-theater-sheet-context');
 let values = $sheetObject?.value;
 addProps(props);
 onDestroy(() => {
     removeProps(Object.keys(props));
 });
 watch(sheetObject, (sheetObject) => {
-    return sheetObject.onValuesChange((v) => {
+    return sheetObject?.onValuesChange((v) => {
         values = v;
     });
 });

package/dist/sheetObject/sync/Sync.svelte

@@ -1,5 +1,5 @@
 <script>import { resolvePropertyPath, useParent, watch } from '@threlte/core';
-import { onDestroy } from 'svelte';
+import { onDestroy, getContext } from 'svelte';
 import { getInitialValue } from './utils/getInitialValue';
 import { isComplexProp } from './utils/isComplexProp';
 import { makeAlphanumeric } from './utils/makeAlphanumeric';
@@ -8,12 +8,7 @@ import { isStringProp } from './utils/isStringProp';
 import { useStudio } from '../../studio/useStudio';
 // used for type hinting auto props
 export let type = undefined;
-/** @package */
-export let sheetObject;
-/** @package */
-export let addProps;
-/** @package */
-export let removeProps;
+const { sheetObject, addProps, removeProps } = getContext('threlte-theater-sheet-context');
 const parent = useParent();
 // serves as a map to map (custom) prop names to object target properties
 let propMappings = {};

package/dist/sheetObject/transform/Transform.svelte

@@ -1,7 +1,7 @@
 <script>import { types } from '../../theatre';
-import { T, watch } from '@threlte/core';
+import { T, watch, currentWritable } from '@threlte/core';
 import { TransformControls } from '@threlte/extras';
-import { onMount } from 'svelte';
+import { onMount, getContext } from 'svelte';
 import { Group } from 'three';
 import { RAD2DEG } from 'three/src/math/MathUtils.js';
 import { useStudio } from '../../studio/useStudio';
@@ -13,12 +13,7 @@ export let space = undefined;
 export let translationSnap = undefined;
 export let rotationSnap = undefined;
 export let scaleSnap = undefined;
-/** @package */
-export let sheetObject;
-/** @package */
-export let addProps;
-/** @package */
-export let removeProps;
+const { sheetObject, addProps, removeProps } = getContext('threlte-theater-sheet-context');
 let controls;
 $: if (controls) {
     if (translationSnap) {
@@ -139,13 +134,10 @@ const onMouseUp = () => {
 const groupRef = group;
 </script>
 
-<T
-  is={groupRef}
-  let:ref
->
+<T is={groupRef}>
   {#if isSelected}
     <TransformControls
-      object={ref}
+      object={groupRef}
       {mode}
       {space}
       bind:controls

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/theatre",
-  "version": "2.1.7",
+  "version": "3.0.0-next.0",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "devDependencies": {
@@ -29,14 +29,14 @@
     "type-fest": "^4.10.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "@threlte/core": "7.2.1",
-    "@threlte/extras": "8.10.1"
+    "@threlte/core": "8.0.0-next.0",
+    "@threlte/extras": "9.0.0-next.0"
   },
   "peerDependencies": {
     "svelte": ">=4",
     "three": ">=0.152",
-    "@threlte/core": ">=6.0.3",
-    "@threlte/extras": ">=5.1.0",
+    "@threlte/core": ">=8.0.0-next.0",
+    "@threlte/extras": ">=9.0.0-next.0",
     "@theatre/core": ">=0.6",
     "@theatre/studio": ">=0.6"
   },