@threlte/theatre 2.1.6 → 3.0.0-next.0

package/dist/project/Project.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { IProjectConfig } from '@theatre/core';
 declare const __propDef: {
     props: {
@@ -19,7 +19,7 @@ declare const __propDef: {
 export type ProjectProps = typeof __propDef.props;
 export type ProjectEvents = typeof __propDef.events;
 export type ProjectSlots = typeof __propDef.slots;
-export default class Project extends SvelteComponentTyped<ProjectProps, ProjectEvents, ProjectSlots> {
+export default class Project extends SvelteComponent<ProjectProps, ProjectEvents, ProjectSlots> {
     get project(): import("@theatre/core").IProject;
 }
 export {};

package/dist/sequence/Sequence.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { IRafDriver } from '@theatre/core';
 import type { Autoreset, IterationCount, PlaybackDirection, PlaybackRange, SequenceAudioOptions } from './types';
 declare const __propDef: {
@@ -48,7 +48,7 @@ declare const __propDef: {
 export type SequenceProps = typeof __propDef.props;
 export type SequenceEvents = typeof __propDef.events;
 export type SequenceSlots = typeof __propDef.slots;
-export default class Sequence extends SvelteComponentTyped<SequenceProps, SequenceEvents, SequenceSlots> {
+export default class Sequence extends SvelteComponent<SequenceProps, SequenceEvents, SequenceSlots> {
     get sequence(): import("./SequenceController").SequenceController;
     get length(): number;
     get play(): (conf?: {

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/sheet/Sheet.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { IProject } from '@theatre/core';
 import { SequenceController } from '../sequence/SequenceController';
 declare const __propDef: {
@@ -21,7 +21,7 @@ declare const __propDef: {
 export type SheetProps = typeof __propDef.props;
 export type SheetEvents = typeof __propDef.events;
 export type SheetSlots = typeof __propDef.slots;
-export default class Sheet extends SvelteComponentTyped<SheetProps, SheetEvents, SheetSlots> {
+export default class Sheet extends SvelteComponent<SheetProps, SheetEvents, SheetSlots> {
     get project(): IProject;
     get sheet(): import("@theatre/core").ISheet;
     get sequence(): SequenceController;

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/sync/Sync.svelte.d.ts

@@ -30,8 +30,8 @@ type InstanceProps<Type extends any> = Partial<
                 | Parameters<MaybeInstance<Type>[K]['set']>
                 | Parameters<MaybeInstance<Type>[K]['set']>[0]
             : MaybeInstance<Type>[K] extends AnyFn
-            ? never
-            : MaybeInstance<Type>[K]
+              ? never
+              : MaybeInstance<Type>[K]
         },
     ConditionalKeys<MaybeInstance<Type>, AnyFn> | OmittedPropKeys
   >

package/dist/sheetObject/transfomers/defaults/degrees.js

@@ -1,4 +1,4 @@
-import { DEG2RAD, RAD2DEG } from 'three/src/math/MathUtils';
+import { DEG2RAD, RAD2DEG } from 'three/src/math/MathUtils.js';
 import { createTransformer } from '../createTransformer';
 import { types } from '../../../theatre';
 export const degrees = createTransformer({

package/dist/sheetObject/transfomers/defaults/euler.js

@@ -1,4 +1,4 @@
-import { DEG2RAD, RAD2DEG } from 'three/src/math/MathUtils';
+import { DEG2RAD, RAD2DEG } from 'three/src/math/MathUtils.js';
 import { createTransformer } from '../createTransformer';
 import { types } from '../../../theatre';
 export const euler = createTransformer({

package/dist/sheetObject/transfomers/getDefaultTransformer.js

@@ -1,4 +1,3 @@
-import { Color, Euler } from 'three';
 import { color } from './defaults/color';
 import { degrees } from './defaults/degrees';
 import { euler } from './defaults/euler';

package/dist/sheetObject/transform/Transform.svelte

@@ -1,9 +1,9 @@
 <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';
+import { RAD2DEG } from 'three/src/math/MathUtils.js';
 import { useStudio } from '../../studio/useStudio';
 import { getDefaultTransformer } from '../transfomers/getDefaultTransformer';
 export let label = undefined;
@@ -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/dist/studio/InnerStudio.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         hide: boolean;
@@ -13,6 +13,6 @@ declare const __propDef: {
 export type InnerStudioProps = typeof __propDef.props;
 export type InnerStudioEvents = typeof __propDef.events;
 export type InnerStudioSlots = typeof __propDef.slots;
-export default class InnerStudio extends SvelteComponentTyped<InnerStudioProps, InnerStudioEvents, InnerStudioSlots> {
+export default class InnerStudio extends SvelteComponent<InnerStudioProps, InnerStudioEvents, InnerStudioSlots> {
 }
 export {};

package/dist/studio/Studio.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         enabled?: boolean | undefined;
@@ -14,6 +14,6 @@ declare const __propDef: {
 export type StudioProps = typeof __propDef.props;
 export type StudioEvents = typeof __propDef.events;
 export type StudioSlots = typeof __propDef.slots;
-export default class Studio extends SvelteComponentTyped<StudioProps, StudioEvents, StudioSlots> {
+export default class Studio extends SvelteComponent<StudioProps, StudioEvents, StudioSlots> {
 }
 export {};

package/dist/theatre/Theatre.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { IProjectConfig } from '@theatre/core';
 declare const __propDef: {
     props: {
@@ -18,6 +18,6 @@ declare const __propDef: {
 export type TheatreProps = typeof __propDef.props;
 export type TheatreEvents = typeof __propDef.events;
 export type TheatreSlots = typeof __propDef.slots;
-export default class Theatre extends SvelteComponentTyped<TheatreProps, TheatreEvents, TheatreSlots> {
+export default class Theatre extends SvelteComponent<TheatreProps, TheatreEvents, TheatreSlots> {
 }
 export {};

package/package.json

@@ -1,41 +1,42 @@
 {
   "name": "@threlte/theatre",
-  "version": "2.1.6",
+  "version": "3.0.0-next.0",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.20.4",
-    "@sveltejs/package": "^2.1.0",
-    "@types/node": "^18.0.3",
-    "@types/three": "^0.158.3",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "@yushijinhun/three-minifier-rollup": "^0.3.1",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte": "^2.30.0",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
-    "publint": "^0.1.12",
-    "rimraf": "^5.0.1",
-    "svelte": "^4.1.1",
-    "svelte-check": "^3.4.3",
-    "svelte-preprocess": "^5.0.4",
-    "svelte2tsx": "^0.6.19",
-    "three": "^0.158.0",
-    "tslib": "^2.4.1",
-    "type-fest": "^2.13.0",
-    "typescript": "^5.0.0",
-    "vite": "^4.3.6",
-    "@threlte/core": "7.0.12",
-    "@threlte/extras": "8.2.0"
+    "@sveltejs/adapter-auto": "^3.1.1",
+    "@sveltejs/kit": "^2.4.3",
+    "@sveltejs/package": "^2.2.6",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/node": "^20.11.6",
+    "@types/three": "^0.160.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
+    "@yushijinhun/three-minifier-rollup": "^0.4.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "prettier": "^3.2.4",
+    "prettier-plugin-svelte": "^3.1.2",
+    "publint": "^0.2.7",
+    "rimraf": "^5.0.5",
+    "svelte": "^4.2.9",
+    "svelte-check": "^3.6.3",
+    "svelte-preprocess": "^5.1.3",
+    "svelte2tsx": "^0.7.0",
+    "three": "^0.160.1",
+    "tslib": "^2.6.2",
+    "type-fest": "^4.10.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "@threlte/core": "8.0.0-next.0",
+    "@threlte/extras": "9.0.0-next.0"
   },
   "peerDependencies": {
     "svelte": ">=4",
-    "three": ">=0.133",
-    "@threlte/core": ">=6.0.3",
-    "@threlte/extras": ">=5.1.0",
+    "three": ">=0.152",
+    "@threlte/core": ">=8.0.0-next.0",
+    "@threlte/extras": ">=9.0.0-next.0",
     "@theatre/core": ">=0.6",
     "@theatre/studio": ">=0.6"
   },