@threlte/theatre 1.0.5 → 2.1.0

package/dist/sheetObject/sync/Sync.svelte

@@ -5,6 +5,7 @@ import { isComplexProp } from './utils/isComplexProp';
 import { makeAlphanumeric } from './utils/makeAlphanumeric';
 import { parsePropLabel } from './utils/parsePropLabel';
 import { isStringProp } from './utils/isStringProp';
+import { useStudio } from '../../studio/useStudio';
 // used for type hinting auto props
 export let type = undefined;
 /** @package */
@@ -76,7 +77,28 @@ watch([parent, sheetObject], ([parent, sheetObject]) => {
     });
 });
 initProps();
+const studio = useStudio();
+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>
+
+<slot {capture} />

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

@@ -54,10 +54,18 @@ type AnyProps<T> = {
   [P in keyof InstanceProps<T>]?: AnyProp
 }
 
-type AllProps<T> = AnyProps<T> & ObjectProp<T> & Record<string, AnyProp | T>
+type AllProps<T> = AnyProps<T> &
+  ObjectProp<T> &
+  Record<string, AnyProp | T> & {
+    capture?: () => void
+  }
 
 export default class Sync<T> extends SvelteComponent<
   AllProps<T>,
   Record<string, any>,
-  Record<string, any>
+  {
+    default: {
+      capture: () => void
+    }
+  }
 > {}

package/dist/studio/InnerStudio.svelte

@@ -1,22 +1,14 @@
+<script context="module">import Studio from '@theatre/studio';
+import { studio } from '../consts';
+Studio.initialize();
+studio.set(Studio);
+</script>
+
 <script>import { watch } from '@threlte/core';
-import { onMount } from 'svelte';
 import { writable } from 'svelte/store';
-import { studio } from '../consts';
 export let hide;
 const hideStore = writable(hide);
 $: hideStore.set(hide);
-let initialized = false;
-onMount(async () => {
-    if ($studio) {
-        initialized = true;
-        return;
-    }
-    const pkg = await import('@theatre/studio');
-    const Studio = pkg.default;
-    Studio.initialize();
-    studio.set(Studio);
-    initialized = true;
-});
 watch([studio, hideStore], ([studio, hide]) => {
     if (hide) {
         studio?.ui.hide();
@@ -30,6 +22,4 @@ watch([studio, hideStore], ([studio, hide]) => {
 });
 </script>
 
-{#if initialized}
-  <slot />
-{/if}
+<slot />

package/dist/studio/Studio.svelte

@@ -1,13 +1,14 @@
-<script>import InnerStudio from './InnerStudio.svelte';
-export let enabled = true;
+<script>export let enabled = true;
 export let hide = false;
 const browser = typeof window !== 'undefined';
 </script>
 
 {#if browser && enabled}
-  <InnerStudio {hide}>
-    <slot />
-  </InnerStudio>
+  {#await import('./InnerStudio.svelte') then Component}
+    <svelte:component this={Component.default} {hide}>
+      <slot />
+    </svelte:component>
+  {/await}
 {:else}
   <slot />
 {/if}

package/dist/theatre/Theatre.svelte

@@ -3,10 +3,7 @@ export let studio = {};
 export let config = undefined;
 </script>
 
-<Studio
-  enabled={studio.enabled}
-  hide={studio.hide}
->
+<Studio {...studio}>
   <Project {config}>
     <Sheet>
       <slot />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/theatre",
-  "version": "1.0.5",
+  "version": "2.1.0",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "devDependencies": {
@@ -29,13 +29,13 @@
     "typescript": "^5.0.0",
     "vite": "^4.3.6",
     "@threlte/core": "6.0.3",
-    "@threlte/extras": "5.0.5"
+    "@threlte/extras": "5.1.0"
   },
   "peerDependencies": {
     "svelte": ">=4",
     "three": ">=0.133",
     "@threlte/core": ">=6.0.3",
-    "@threlte/extras": ">=5.0.5",
+    "@threlte/extras": ">=5.1.0",
     "@theatre/core": ">=0.6",
     "@theatre/studio": ">=0.6"
   },
@@ -52,6 +52,7 @@
     "dist"
   ],
   "scripts": {
+    "dev": "vite dev",
     "package": "svelte-kit sync && svelte-package && node ./scripts/cleanupPackage.js && publint",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",