@threlte/theatre 3.0.7 → 3.1.0

package/dist/sheetObject/SheetObject.svelte

@@ -6,106 +6,139 @@
 <script
   lang="ts"
   generics="Props extends UnknownShorthandCompoundProps"
->import { useStudio } from '../studio/useStudio';
-import { currentWritable, useThrelte, watch } from '@threlte/core';
-import { getContext, onDestroy, onMount } from 'svelte';
-import Declare from './declare/Declare.svelte';
-import Sync from './sync/Sync.svelte';
-import Transform from './transform/Transform.svelte';
-import { createSheetContext } from './useSheet';
-let { key, detach = false, props, selected = $bindable(false), onchange, children } = $props();
-const { invalidate } = useThrelte();
-let aggregatedProps = { ...props };
-const { sheet } = getContext('theatre-sheet');
-const sheetObject = currentWritable(sheet.object(key, aggregatedProps, {
-    reconfigure: true
-}));
-onMount(() => {
+>
+  import { useStudio } from '../studio/useStudio.js'
+  import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core'
+  import { currentWritable, useThrelte, watch, type CurrentWritable } from '@threlte/core'
+  import { getContext, onDestroy, onMount } from 'svelte'
+  import type { SheetContext } from '../sheet/types.js'
+  import Declare from './declare/Declare.svelte'
+  import type { SheetObjectProps } from './types.js'
+  import Sync from './sync/Sync.svelte'
+  import Transform from './transform/Transform.svelte'
+  import { createSheetContext } from './useSheet.js'
+
+  let {
+    key,
+    detach = false,
+    props,
+    selected = $bindable(false),
+    onchange,
+    children
+  }: SheetObjectProps<Props> = $props()
+
+  const { invalidate } = useThrelte()
+
+  let aggregatedProps: UnknownShorthandCompoundProps = { ...props }
+
+  const { sheet } = getContext<SheetContext>('theatre-sheet')
+
+  const sheetObject: CurrentWritable<ISheetObject<Props>> = currentWritable(
+    sheet.object(key, aggregatedProps, {
+      reconfigure: true
+    }) as any
+  )
+
+  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.
-    onchange?.(sheetObject.current.value);
-});
-// This flag is used to prevent the sheet object from being created after it
-// has been detached.
-let detached = false;
-onDestroy(() => {
+    onchange?.(sheetObject.current.value)
+  })
+
+  // This flag is used to prevent the sheet object from being created after it
+  // has been detached.
+  let detached = false
+  onDestroy(() => {
     if (detach) {
-        detached = true;
-        sheet.detachObject(key);
+      detached = true
+      sheet.detachObject(key)
     }
-});
-const updateSheetObject = () => {
+  })
+
+  const updateSheetObject = () => {
     // if the sheetObject has already been detached, do nothing.
-    if (detached)
-        return;
+    if (detached) return
+
     // first, detach the sheet object.
-    sheet.detachObject(key);
+    sheet.detachObject(key)
+
     // create or reconfigure a sheet object here.
-    sheetObject.set(sheet.object(key, aggregatedProps, {
+    sheetObject.set(
+      sheet.object(key, aggregatedProps, {
         reconfigure: true
-    }));
-};
-const addProps = (props) => {
+      }) as any
+    )
+  }
+
+  const addProps = (props: UnknownShorthandCompoundProps) => {
     // add props to list of props
     aggregatedProps = {
-        ...aggregatedProps,
-        ...props
-    };
+      ...aggregatedProps,
+      ...props
+    }
     // update sheet object (create or reconfigure)
-    updateSheetObject();
-};
-const removeProps = (propNames) => {
+    updateSheetObject()
+  }
+
+  const removeProps = (propNames: string[]) => {
     // remove props from sheet object
     propNames.forEach((prop) => {
-        delete aggregatedProps[prop];
-    });
+      delete aggregatedProps[prop]
+    })
+
     // if there are no more props, detach sheet object
     if (Object.keys(aggregatedProps).length === 0) {
-        // detach sheet object
-        if (detach) {
-            sheet.detachObject(key);
-        }
+      // detach sheet object
+      if (detach) {
+        sheet.detachObject(key)
+      }
+    } else {
+      // update sheet object (reconfigure)
+      updateSheetObject()
     }
-    else {
-        // update sheet object (reconfigure)
-        updateSheetObject();
-    }
-};
-createSheetContext({
+  }
+
+  createSheetContext({
     sheetObject,
     addProps,
     removeProps
-});
-let values = $state($sheetObject?.value);
-watch(sheetObject, (sheetObject) => {
+  })
+
+  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();
-    });
-});
-// Provide a flag to indicate whether this sheet object is selected in the
-// Theatre.js studio.
-const studio = useStudio();
-watch([studio, sheetObject], ([studio, sheetObject]) => {
+      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);
-    });
-});
-// Provide a select function to select this sheet object in the Theatre.js
-// studio.
-const select = () => {
-    $studio?.setSelection([sheetObject.current]);
-};
-const deselect = () => {
+      selected = selection.includes(sheetObject)
+    })
+  })
+
+  // Provide a select function to select this sheet object in the Theatre.js
+  // studio.
+  const select = () => {
+    $studio?.setSelection([sheetObject.current])
+  }
+
+  const deselect = () => {
     if ($studio?.selection.includes(sheetObject.current)) {
-        $studio?.setSelection([]);
+      $studio?.setSelection([])
     }
-};
+  }
 </script>
 
 {@render children?.({

package/dist/sheetObject/SheetObject.svelte.d.ts

@@ -1,9 +1,16 @@
 import type { UnknownShorthandCompoundProps } from '@theatre/core';
-import type { SheetObjectProps } from './types';
+import type { SheetObjectProps } from './types.js';
+declare function $$render<Props extends UnknownShorthandCompoundProps>(): {
+    props: SheetObjectProps<Props>;
+    exports: {};
+    bindings: "selected";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<Props extends UnknownShorthandCompoundProps> {
-    props(): SheetObjectProps<Props>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<Props>>['props'];
+    events(): ReturnType<typeof $$render<Props>>['events'];
+    slots(): ReturnType<typeof $$render<Props>>['slots'];
     bindings(): "selected";
     exports(): {};
 }

package/dist/sheetObject/declare/Declare.svelte

@@ -1,21 +1,30 @@
 <script
   lang="ts"
   generics="P extends UnknownShorthandCompoundProps"
->import { watch } from '@threlte/core';
-import { onDestroy } from 'svelte';
-import { useSheet } from '../useSheet';
-let { props, children } = $props();
-const { sheetObject, addProps, removeProps } = useSheet();
-let values = $state($sheetObject?.value);
-addProps(props);
-onDestroy(() => {
-    removeProps(Object.keys(props));
-});
-watch(sheetObject, (sheetObject) => {
+>
+  import type { UnknownShorthandCompoundProps } from '@theatre/core'
+  import { watch } from '@threlte/core'
+  import { onDestroy } from 'svelte'
+  import { useSheet } from '../useSheet.js'
+  import type { DeclareProps } from './types.js'
+
+  let { props, children }: DeclareProps<P> = $props()
+
+  const { sheetObject, addProps, removeProps } = useSheet<P>()
+
+  let values = $state($sheetObject?.value)
+
+  addProps(props)
+
+  onDestroy(() => {
+    removeProps(Object.keys(props))
+  })
+
+  watch(sheetObject, (sheetObject) => {
     return sheetObject?.onValuesChange((v) => {
-        values = v;
-    });
-});
+      values = v
+    })
+  })
 </script>
 
 {@render children?.({ values })}

package/dist/sheetObject/declare/Declare.svelte.d.ts

@@ -1,9 +1,16 @@
 import type { UnknownShorthandCompoundProps } from '@theatre/core';
-import type { DeclareProps } from './types';
+import type { DeclareProps } from './types.js';
+declare function $$render<P extends UnknownShorthandCompoundProps>(): {
+    props: DeclareProps<P>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<P extends UnknownShorthandCompoundProps> {
-    props(): DeclareProps<P>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<P>>['props'];
+    events(): ReturnType<typeof $$render<P>>['events'];
+    slots(): ReturnType<typeof $$render<P>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/sheetObject/sync/Sync.svelte

@@ -1,48 +1,69 @@
 <script
   lang="ts"
   generics="Type"
->import { resolvePropertyPath, useParent, watch } from '@threlte/core';
-import { onDestroy } from 'svelte';
-import { useStudio } from '../../studio/useStudio';
-import { useSheet } from '../useSheet';
-import { getInitialValue } from './utils/getInitialValue';
-import { isComplexProp } from './utils/isComplexProp';
-import { isStringProp } from './utils/isStringProp';
-import { makeAlphanumeric } from './utils/makeAlphanumeric';
-import { parsePropLabel } from './utils/parsePropLabel';
-let { type, children, ...rest } = $props();
-const { sheetObject, addProps, removeProps } = useSheet();
-const parent = useParent();
-// serves as a map to map (custom) prop names to object target properties
-let propMappings = {};
-const initProps = () => {
-    const props = {};
+>
+  import { resolvePropertyPath, useParent, watch } from '@threlte/core'
+  import { onDestroy } from 'svelte'
+  import { useStudio } from '../../studio/useStudio.js'
+  import type { Transformer } from '../transfomers/types.js'
+  import { useSheet } from '../useSheet.js'
+  import type { AnyProp, SyncProps } from './types.js'
+  import { getInitialValue } from './utils/getInitialValue.js'
+  import { isComplexProp } from './utils/isComplexProp.js'
+  import { isStringProp } from './utils/isStringProp.js'
+  import { makeAlphanumeric } from './utils/makeAlphanumeric.js'
+  import { parsePropLabel } from './utils/parsePropLabel.js'
+
+  let { type, children, ...rest }: SyncProps<Type> = $props()
+
+  const { sheetObject, addProps, removeProps } = useSheet()
+  const parent = useParent()
+
+  // serves as a map to map (custom) prop names to object target properties
+  let propMappings = {} as Record<
+    string,
+    {
+      propertyPath: string
+      transformer: Transformer
+    }
+  >
+
+  const initProps = () => {
+    const props = {} as Record<string, any>
+
     // propertyPath is for example "position.x" or "intensity", so a property path on the parent object
-    Object.entries(rest).forEach(([propertyPath, propertyValue]) => {
-        // The prop might have a custom name, for example "intensity" might be mapped to "light-intensity"
-        const customKey = isComplexProp(propertyValue)
-            ? propertyValue.key
-            : isStringProp(propertyValue)
-                ? propertyValue
-                : undefined;
-        const key = customKey ?? makeAlphanumeric(propertyPath);
-        // get the initial value as well as the correct transformer for the property
-        const { value, transformer } = getInitialValue(propertyPath, propertyValue, $parent);
-        const label = parsePropLabel(key, propertyValue);
-        // apply the label to the value
-        value.label = label;
-        // add the prop to the propMappings map
-        propMappings[key] = {
-            propertyPath,
-            transformer
-        };
-        // add the prop to the props object
-        props[key] = value;
-    });
+    Object.entries(<Record<string, AnyProp>>rest).forEach(([propertyPath, propertyValue]) => {
+      // The prop might have a custom name, for example "intensity" might be mapped to "light-intensity"
+      const customKey = isComplexProp(propertyValue)
+        ? propertyValue.key
+        : isStringProp(propertyValue)
+          ? propertyValue
+          : undefined
+
+      const key = customKey ?? makeAlphanumeric(propertyPath)
+
+      // get the initial value as well as the correct transformer for the property
+      const { value, transformer } = getInitialValue(propertyPath, propertyValue, $parent)
+      const label = parsePropLabel(key, propertyValue)
+
+      // apply the label to the value
+      value.label = label
+
+      // add the prop to the propMappings map
+      propMappings[key] = {
+        propertyPath,
+        transformer
+      }
+
+      // add the prop to the props object
+      props[key] = value
+    })
+
     // add the props to the parent IsheetObject
-    addProps(props);
-};
-const updateProjectionMatrixKeys = [
+    addProps(props)
+  }
+
+  const updateProjectionMatrixKeys = [
     'fov',
     'near',
     'far',
@@ -52,54 +73,70 @@ const updateProjectionMatrixKeys = [
     'top',
     'bottom',
     'aspect'
-];
-watch([parent, sheetObject], ([parent, sheetObject]) => {
-    if (!parent)
-        return;
+  ]
+
+  watch([parent, sheetObject], ([parent, sheetObject]) => {
+    if (!parent) return
+
     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];
-            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, propMapping.propertyPath);
-            // use a transformer to apply value
-            const transformer = propMapping.transformer;
-            transformer.apply(target, targetKey, values[key]);
-            if (updateProjectionMatrixKeys.includes(targetKey)) {
-                target.updateProjectionMatrix?.();
-            }
-        });
-    });
-});
-initProps();
-const studio = useStudio();
-/**
- * Capture the current values of the props
- */
-export const capture = () => {
-    if (!$studio)
-        return;
-    const scrub = $studio.scrub();
-    Object.keys(sheetObject.current.value).forEach((key) => {
+      // 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];
-        if (!propMapping)
-            return;
+        const propMapping = propMappings[key]
+
+        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, propMapping.propertyPath);
-        const value = propMapping.transformer.transform(target[targetKey]).default;
-        scrub.capture(({ set }) => {
-            set(sheetObject.current.props[key], value);
-        });
-    });
-    scrub.commit();
-};
-onDestroy(() => {
-    removeProps(Object.keys(propMappings));
-});
+        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])
+
+        if (updateProjectionMatrixKeys.includes(targetKey)) {
+          target.updateProjectionMatrix?.()
+        }
+      })
+    })
+  })
+
+  initProps()
+
+  const studio = useStudio()
+
+  /**
+   * Capture the current values of the props
+   */
+  export const capture = () => {
+    if (!$studio) return
+    const scrub = $studio.scrub()
+
+    Object.keys(sheetObject.current.value).forEach((key) => {
+      // first, check if the prop is mapped in this component
+      const propMapping = propMappings[key]
+
+      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, propMapping.propertyPath)
+
+      const value = propMapping.transformer.transform(target[targetKey]).default
+
+      scrub.capture(({ set }) => {
+        set(sheetObject.current.props[key], value)
+      })
+    })
+
+    scrub.commit()
+  }
+
+  onDestroy(() => {
+    removeProps(Object.keys(propMappings))
+  })
 </script>
 
 {@render children?.({ capture })}

package/dist/sheetObject/sync/Sync.svelte.d.ts

@@ -1,8 +1,19 @@
-import type { SyncProps } from './types';
+import type { SyncProps } from './types.js';
+declare function $$render<Type>(): {
+    props: SyncProps<Type>;
+    exports: {
+        /**
+           * Capture the current values of the props
+           */ capture: () => void;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<Type> {
-    props(): SyncProps<Type>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<Type>>['props'];
+    events(): ReturnType<typeof $$render<Type>>['events'];
+    slots(): ReturnType<typeof $$render<Type>>['slots'];
     bindings(): "";
     exports(): {
         /**

package/dist/sheetObject/sync/types.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ConditionalKeys, Primitive } from 'type-fest';
-import type { Transformer } from '../transfomers/types';
+import type { Transformer } from '../transfomers/types.js';
 type OmittedPropKeys = 'type' | 'args' | 'attach' | 'manual' | 'makeDefault' | 'id' | 'children' | `is${string}` | 'parent' | 'uuid' | 'name';
 type AnyClass = new (...args: any) => any;
 type AnyFn = (...args: any) => any;

package/dist/sheetObject/sync/utils/getInitialValue.js

@@ -1,6 +1,6 @@
 import { resolvePropertyPath } from '@threlte/core';
-import { getDefaultTransformer } from '../../transfomers/getDefaultTransformer';
-import { isComplexProp } from './isComplexProp';
+import { getDefaultTransformer } from '../../transfomers/getDefaultTransformer.js';
+import { isComplexProp } from './isComplexProp.js';
 export const getInitialValue = (propertyPath, propertyValue, targetObject) => {
     const { target, key } = resolvePropertyPath(targetObject, propertyPath);
     const rawValue = target[key];

package/dist/sheetObject/sync/utils/isComplexProp.d.ts

@@ -1,2 +1,2 @@
-import type { AnyProp, ComplexProp } from '../types';
+import type { AnyProp, ComplexProp } from '../types.js';
 export declare const isComplexProp: (prop: AnyProp) => prop is ComplexProp;

package/dist/sheetObject/sync/utils/isStringProp.d.ts

@@ -1,2 +1,2 @@
-import type { AnyProp } from '../types';
+import type { AnyProp } from '../types.js';
 export declare const isStringProp: (prop: AnyProp) => prop is string;

package/dist/sheetObject/sync/utils/parsePropLabel.d.ts

@@ -1,2 +1,2 @@
-import type { AnyProp } from '../types';
+import type { AnyProp } from '../types.js';
 export declare const parsePropLabel: (alphaNumericKey: string, propValue: AnyProp) => string;

package/dist/sheetObject/transfomers/createTransformer.d.ts

@@ -1,2 +1,2 @@
-import type { Transformer } from './types';
+import type { Transformer } from './types.js';
 export declare const createTransformer: (transformer: Transformer) => Transformer;

package/dist/sheetObject/transfomers/defaults/color.d.ts

@@ -1 +1 @@
-export declare const color: import("../types").Transformer;
+export declare const color: import("../types.js").Transformer;

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

@@ -1,5 +1,5 @@
-import { types } from '../../../theatre';
-import { createTransformer } from '../createTransformer';
+import { types } from '../../../theatre.js';
+import { createTransformer } from '../createTransformer.js';
 import { Color, SRGBColorSpace } from 'three';
 const _color = new Color();
 export const color = createTransformer({

package/dist/sheetObject/transfomers/defaults/degrees.d.ts

@@ -1 +1 @@
-export declare const degrees: import("../types").Transformer;
+export declare const degrees: import("../types.js").Transformer;

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

@@ -1,6 +1,6 @@
 import { DEG2RAD, RAD2DEG } from 'three/src/math/MathUtils.js';
-import { createTransformer } from '../createTransformer';
-import { types } from '../../../theatre';
+import { createTransformer } from '../createTransformer.js';
+import { types } from '../../../theatre.js';
 export const degrees = createTransformer({
     transform(target) {
         return types.number(target * RAD2DEG);

package/dist/sheetObject/transfomers/defaults/euler.d.ts

@@ -1 +1 @@
-export declare const euler: import("../types").Transformer;
+export declare const euler: import("../types.js").Transformer;

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

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

package/dist/sheetObject/transfomers/defaults/generic.d.ts

@@ -1 +1 @@
-export declare const generic: import("../types").Transformer;
+export declare const generic: import("../types.js").Transformer;