@threlte/theatre 3.0.7 → 3.1.0

package/README.md

@@ -48,10 +48,6 @@ Contributions are what make the open source community such an amazing place to l
 - **Filing Issues** - if you have feature requestions or you think you spotted a bug, [submit an issue](https://github.com/threlte/threlte/issues/new).
 - **Contributing Code** - if you would like to drop us a PR, read the [contribution guide](https://github.com/threlte/threlte/blob/main/CONTRIBUTING.md) first.
 
-## Sponsors
-
-[![Powered by Vercel](./assets/vercel/powered-by-vercel.svg)](https://vercel.com/?utm_source=threlte&utm_campaign=oss)
-
 ---
 
 ### License

package/dist/index.d.ts

@@ -4,9 +4,9 @@ export { default as Sequence } from './sequence/Sequence.svelte';
 export { default as Sheet } from './sheet/Sheet.svelte';
 export { default as Theatre } from './theatre/Theatre.svelte';
 export { default as SheetObject } from './sheetObject/SheetObject.svelte';
-export { createTransformer } from './sheetObject/transfomers/createTransformer';
-export type { Transformer } from './sheetObject/transfomers/types';
-export { useStudio } from './studio/useStudio';
-export { useSequence } from './sequence/useSequence';
-export { createSheetObjectAction } from './sheet/createSheetObjectAction';
-export type { SequenceController } from './sequence/SequenceController';
+export { createTransformer } from './sheetObject/transfomers/createTransformer.js';
+export type { Transformer } from './sheetObject/transfomers/types.js';
+export { useStudio } from './studio/useStudio.js';
+export { useSequence } from './sequence/useSequence.js';
+export { createSheetObjectAction } from './sheet/createSheetObjectAction.js';
+export type { SequenceController } from './sequence/SequenceController.js';

package/dist/index.js

@@ -6,9 +6,9 @@ export { default as Sheet } from './sheet/Sheet.svelte';
 export { default as Theatre } from './theatre/Theatre.svelte';
 // SheetObject related things
 export { default as SheetObject } from './sheetObject/SheetObject.svelte';
-export { createTransformer } from './sheetObject/transfomers/createTransformer';
+export { createTransformer } from './sheetObject/transfomers/createTransformer.js';
 // hooks
-export { useStudio } from './studio/useStudio';
-export { useSequence } from './sequence/useSequence';
+export { useStudio } from './studio/useStudio.js';
+export { useSequence } from './sequence/useSequence.js';
 // actions
-export { createSheetObjectAction } from './sheet/createSheetObjectAction';
+export { createSheetObjectAction } from './sheet/createSheetObjectAction.js';

package/dist/project/Project.svelte

@@ -1,16 +1,37 @@
-<script lang="ts">import { globalProjects } from '../consts';
-import { getProject } from '../theatre';
-import { setContext } from 'svelte';
-let { name = 'default', config, project = $bindable(), isReady = $bindable(), children } = $props();
-project = globalProjects.get(name) ?? getProject(name, config);
-globalProjects.set(name, project);
-const syncReady = async () => {
-    await project.ready;
-    isReady = true;
-};
-syncReady();
-// CHILD CONTEXT
-setContext(`theatre-project`, project);
+<script lang="ts">
+  import { globalProjects } from '../consts.js'
+  import { getProject } from '../theatre.js'
+  import { setContext, type Snippet } from 'svelte'
+  import type { IProject, IProjectConfig } from '@theatre/core'
+
+  interface Props {
+    name?: string
+    config?: IProjectConfig | undefined
+    project?: IProject
+    isReady?: boolean
+    children?: Snippet<[{ project: IProject }]>
+  }
+
+  let {
+    name = 'default',
+    config,
+    project = $bindable(),
+    isReady = $bindable(),
+    children
+  }: Props = $props()
+
+  project = globalProjects.get(name) ?? getProject(name, config)
+  globalProjects.set(name, project)
+
+  const syncReady = async () => {
+    await project.ready
+    isReady = true
+  }
+  syncReady()
+
+  // CHILD CONTEXT
+
+  setContext(`theatre-project`, project)
 </script>
 
 {#await project.ready then}

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

@@ -1,6 +1,6 @@
 import { type Snippet } from 'svelte';
 import type { IProject, IProjectConfig } from '@theatre/core';
-declare const Project: import("svelte").Component<{
+interface Props {
     name?: string;
     config?: IProjectConfig | undefined;
     project?: IProject;
@@ -8,5 +8,7 @@ declare const Project: import("svelte").Component<{
     children?: Snippet<[{
         project: IProject;
     }]>;
-}, {}, "project" | "isReady">;
+}
+declare const Project: import("svelte").Component<Props, {}, "project" | "isReady">;
+type Project = ReturnType<typeof Project>;
 export default Project;

package/dist/sequence/Sequence.svelte

@@ -1,86 +1,117 @@
-<script lang="ts">import { getContext, onDestroy, setContext } from 'svelte';
-// Parent context
-const { sequences } = getContext('theatre-sheet');
-// Props
-let key = 'default'; // not exposed yet, will be a prop in the future
-// Theatre's native playback options
-export let rate = 1;
-export let range = undefined;
-export let iterationCount = undefined;
-export let direction = undefined;
-export let rafDriver = undefined;
-export let audio = undefined;
-// Threlte's custom playback options
-export let autoplay = false;
-export let autoreset = undefined;
-export let autopause = false;
-export let delay = 0;
-// Get the Sequence instance
-export const sequence = sequences[key];
-// autoplay logic
-if (!autoplay && delay > 0) {
+<script lang="ts">
+  import type { IRafDriver, ISequence } from '@theatre/core'
+  import { getContext, onDestroy, setContext } from 'svelte'
+  import type { SheetContext } from '../sheet/types.js'
+  import type {
+    Autoreset,
+    IterationCount,
+    PlaybackDirection,
+    PlaybackRange,
+    SequenceAudioOptions,
+    SequenceOptions
+  } from './types.js'
+
+  // Parent context
+  const { sequences } = getContext<SheetContext>('theatre-sheet')
+
+  // Props
+  let key = 'default' // not exposed yet, will be a prop in the future
+
+  // Theatre's native playback options
+  export let rate: number = 1
+  export let range: PlaybackRange = undefined
+  export let iterationCount: IterationCount = undefined
+  export let direction: PlaybackDirection = undefined
+  export let rafDriver: IRafDriver | undefined = undefined
+  export let audio: SequenceAudioOptions | undefined = undefined
+
+  // Threlte's custom playback options
+  export let autoplay: boolean = false
+  export let autoreset: Autoreset = undefined
+  export let autopause: boolean = false
+  export let delay: number = 0
+
+  // Get the Sequence instance
+  export const sequence = sequences[key]
+
+  // autoplay logic
+  if (!autoplay && delay! > 0) {
     console.warn('Sequence: delay has no effect unless the option autoplay is enabled.', {
-        sequence
-    });
-}
-let delayTimer;
-if (autoplay) {
-    delayTimer = setTimeout(() => sequence.play(), delay);
-}
-onDestroy(() => {
-    clearTimeout(delayTimer);
-});
-// autopause logic
-onDestroy(() => {
+      sequence
+    })
+  }
+
+  let delayTimer: ReturnType<typeof setTimeout>
+
+  if (autoplay) {
+    delayTimer = setTimeout(() => sequence.play(), delay)
+  }
+
+  onDestroy(() => {
+    clearTimeout(delayTimer)
+  })
+
+  // autopause logic
+  onDestroy(() => {
     if (autopause) {
-        sequence.pause();
+      sequence.pause()
     }
-});
-// autoreset logic
-if (autoreset === 'onMount' || autoreset === 'always') {
-    sequence.reset();
-}
-onDestroy(() => {
+  })
+
+  // autoreset logic
+  if (autoreset === 'onMount' || autoreset === 'always') {
+    sequence.reset()
+  }
+
+  onDestroy(() => {
     if (autoreset === 'onDestroy' || autoreset === 'always') {
-        sequence.reset();
+      sequence.reset()
     }
-});
-// config reactivity
-$: sequence.config({
+  })
+
+  // config reactivity
+  $: sequence.config({
     audio,
     rate,
     range,
     iterationCount,
     direction,
     rafDriver
-});
-// Bindings
-const { position: positionStore, playing: playingStore, length: lengthStore } = sequence;
-export let position = $positionStore;
-export let playing = $playingStore;
-export const length = $lengthStore;
-export const play = (opts) => sequence.play(opts);
-export const pause = () => sequence.pause();
-// position
-let positionChangedBy = 'user';
-positionStore.subscribe((value) => {
-    positionChangedBy = 'code';
-    position = value;
-});
-$: position,
+  })
+
+  // Bindings
+  const { position: positionStore, playing: playingStore, length: lengthStore } = sequence
+
+  export let position = $positionStore
+  export let playing = $playingStore
+  export const length = $lengthStore
+
+  export const play: ISequence['play'] = (opts?: SequenceOptions) => sequence.play(opts)
+  export const pause: ISequence['pause'] = () => sequence.pause()
+
+  // position
+  let positionChangedBy = 'user'
+  positionStore.subscribe((value) => {
+    positionChangedBy = 'code'
+    position = value
+  })
+  $: position,
     positionChangedBy === 'user' && ($positionStore = position),
-    (positionChangedBy = 'user');
-// playing
-let playingChangedBy = 'user';
-playingStore.subscribe((value) => {
-    playingChangedBy = 'code';
-    playing = value;
-});
-$: playing, playingChangedBy === 'user' && ($playingStore = playing), (playingChangedBy = 'user');
-// pass sequence to children via context
-setContext('theatre-sequence', sequence);
-// pass to parent
-sequences[key] = sequence;
+    (positionChangedBy = 'user')
+
+  // playing
+  let playingChangedBy = 'user'
+  playingStore.subscribe((value) => {
+    playingChangedBy = 'code'
+    playing = value
+  })
+  $: playing, playingChangedBy === 'user' && ($playingStore = playing), (playingChangedBy = 'user')
+
+  // pass sequence to children via context
+  setContext('theatre-sequence', sequence)
+
+  // pass to parent
+  sequences[key] = sequence
 </script>
 
 <slot

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

@@ -1,5 +1,5 @@
 import type { IRafDriver, ISequence } from '@theatre/core';
-import type { Autoreset, IterationCount, PlaybackDirection, PlaybackRange, SequenceAudioOptions } from './types';
+import type { Autoreset, IterationCount, PlaybackDirection, PlaybackRange, SequenceAudioOptions } from './types.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -29,7 +29,7 @@ declare const Sequence: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
     autoreset?: Autoreset;
     autopause?: boolean;
     delay?: number;
-    sequence?: import("./SequenceController").SequenceController;
+    sequence?: import("./SequenceController.js").SequenceController;
     position?: number;
     playing?: boolean;
     length?: number;
@@ -37,7 +37,7 @@ declare const Sequence: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
     pause?: ISequence["pause"];
 }, {
     default: {
-        sequence: import("./SequenceController").SequenceController;
+        sequence: import("./SequenceController.js").SequenceController;
         position: number;
         playing: boolean;
         play: (conf?: {
@@ -53,7 +53,7 @@ declare const Sequence: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
     [evt: string]: CustomEvent<any>;
 }, {
     default: {
-        sequence: import("./SequenceController").SequenceController;
+        sequence: import("./SequenceController.js").SequenceController;
         position: number;
         playing: boolean;
         play: (conf?: {
@@ -66,7 +66,7 @@ declare const Sequence: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
         pause: () => void;
     };
 }, {
-    sequence: import("./SequenceController").SequenceController;
+    sequence: import("./SequenceController.js").SequenceController;
     length: number;
     play: ISequence["play"];
     pause: ISequence["pause"];

package/dist/sequence/SequenceController.d.ts

@@ -1,7 +1,7 @@
 import type { ISequence } from '@theatre/core';
 import type { Readable, Subscriber, Writable } from 'svelte/store';
-import { onChange } from '../theatre';
-import type { SequenceOptions } from './types';
+import { onChange } from '../theatre.js';
+import type { SequenceOptions } from './types.js';
 /**
  * ### `SequenceController`
  *

package/dist/sequence/SequenceController.js

@@ -1,5 +1,5 @@
 import { get } from 'svelte/store';
-import { onChange, val } from '../theatre';
+import { onChange, val } from '../theatre.js';
 /**
  * ### `SequenceController`
  *

package/dist/sequence/useSequence.d.ts

@@ -1,4 +1,4 @@
-import type { SequenceController } from './SequenceController';
+import type { SequenceController } from './SequenceController.js';
 /**
  * ### `useSequence`
  *

package/dist/sheet/Sheet.svelte

@@ -1,19 +1,37 @@
-<script lang="ts">import { getContext, setContext } from 'svelte';
-import { SequenceController } from '../sequence/SequenceController';
-import { globalSheets } from '../consts';
-// parent context
-export const project = getContext('theatre-project');
-const projectName = project.address.projectId;
-let { name = 'default', sheet = $bindable(), instance = undefined, children } = $props();
-// bindings
-sheet = globalSheets.get(`${projectName}-${name}-${instance}`) ?? project.sheet(name, instance);
-// register instance logic
-globalSheets.set(`${projectName}-${name}-${instance}`, sheet);
-// init sequence store
-export const sequence = new SequenceController(sheet.sequence);
-// child context
-const sequences = { default: sequence };
-setContext('theatre-sheet', { sheet, sequences });
+<script lang="ts">
+  import type { IProject, ISheet } from '@theatre/core'
+  import { getContext, setContext, type Snippet } from 'svelte'
+  import { SequenceController } from '../sequence/SequenceController.js'
+  import { globalSheets } from '../consts.js'
+  import type { SheetContext } from './types.js'
+
+  // parent context
+  export const project = getContext('theatre-project') as IProject
+  const projectName = project.address.projectId
+
+  interface Props {
+    // props
+    name?: string
+    instance?: string | undefined
+    sheet?: ISheet
+    children?: Snippet<[{ sheet: ISheet }]>
+  }
+
+  let { name = 'default', sheet = $bindable(), instance = undefined, children }: Props = $props()
+
+  // bindings
+  sheet = globalSheets.get(`${projectName}-${name}-${instance}`) ?? project.sheet(name, instance)
+
+  // register instance logic
+  globalSheets.set(`${projectName}-${name}-${instance}`, sheet)
+
+  // init sequence store
+  export const sequence = new SequenceController(sheet.sequence)
+
+  // child context
+  const sequences = { default: sequence }
+
+  setContext<SheetContext>('theatre-sheet', { sheet, sequences })
 </script>
 
 {@render children?.({ sheet })}

package/dist/sheet/Sheet.svelte.d.ts

@@ -1,15 +1,17 @@
 import type { IProject, ISheet } from '@theatre/core';
 import { type Snippet } from 'svelte';
-import { SequenceController } from '../sequence/SequenceController';
-declare const Sheet: import("svelte").Component<{
+import { SequenceController } from '../sequence/SequenceController.js';
+interface Props {
     name?: string;
     instance?: string | undefined;
     sheet?: ISheet;
     children?: Snippet<[{
         sheet: ISheet;
     }]>;
-}, {
+}
+declare const Sheet: import("svelte").Component<Props, {
     project: IProject;
     sequence: SequenceController;
 }, "sheet">;
+type Sheet = ReturnType<typeof Sheet>;
 export default Sheet;

package/dist/sheet/types.d.ts

@@ -1,5 +1,5 @@
 import type { ISheet } from '@theatre/core';
-import type { SequenceController } from '../sequence/SequenceController';
+import type { SequenceController } from '../sequence/SequenceController.js';
 export interface SheetContext {
     sheet: ISheet;
     sequences: {