@threlte/flex 1.0.1 → 2.0.0-next.0

package/dist/Box/Box.svelte

@@ -1,13 +1,10 @@
-<script>import { HierarchicalObject, T, createRawEventDispatcher } from '@threlte/core';
+<script>import { HierarchicalObject, T } from '@threlte/core';
 import { onDestroy } from 'svelte';
 import { Group } from 'three';
 import { useFlex } from '../Flex/context';
 import { createUseDimensionsContext } from '../hooks/useDimensions';
 import { createNodeContext } from '../nodes/context';
-export let order = undefined;
-let _class = '';
-export { _class as class };
-const dispatch = createRawEventDispatcher();
+let { order, class: _class = '', ...props } = $props();
 /**
  * Create the context for `useDimensions`
  */
@@ -24,37 +21,27 @@ onDestroy(() => {
     parentNodeContext?.removeNode(node);
 });
 // update the order of the node
-$: parentNodeContext?.updateNodeOrder(node, order);
-addNode(node, group, $$restProps);
-updateNodeProps(node, { ...classParser?.(_class, {}), ...$$restProps }, true);
-$: updateNodeProps(node, { ...classParser?.(_class, {}), ...$$restProps });
+$effect.pre(() => parentNodeContext?.updateNodeOrder(node, order));
+addNode(node, group, props);
+updateNodeProps(node, { ...classParser?.(_class, {}), ...props }, true);
+$effect.pre(() => updateNodeProps(node, { ...classParser?.(_class, {}), ...props }));
 onDestroy(() => {
     removeNode(node);
 });
-let computedWidth = 1;
-let computedHeight = 1;
-/**
- * Untrack contentGroup
- */
-const getContentGroup = () => {
-    return contentGroup;
-};
+let computedWidth = $state(1);
+let computedHeight = $state(1);
 // after the parent has been reflowed, we can use the calculated layout to set the properties of the box
 onEvent('reflow:after', () => {
     computedWidth =
-        typeof $$restProps.width === 'number'
-            ? $$restProps.width
-            : node.getComputedWidth() / $scaleFactor;
+        typeof props.width === 'number' ? props.width : node.getComputedWidth() / $scaleFactor;
     computedHeight =
-        typeof $$restProps.height === 'number'
-            ? $$restProps.height
-            : node.getComputedHeight() / $scaleFactor;
-    getContentGroup().position[$mainAxis] = computedWidth / 2;
-    getContentGroup().position[$crossAxis] = -computedHeight / 2;
-    getContentGroup().position[$depthAxis] = 0;
+        typeof props.height === 'number' ? props.height : node.getComputedHeight() / $scaleFactor;
+    contentGroup.position[$mainAxis] = computedWidth / 2;
+    contentGroup.position[$crossAxis] = -computedHeight / 2;
+    contentGroup.position[$depthAxis] = 0;
     dimensionsContext.width.set(computedWidth);
     dimensionsContext.height.set(computedHeight);
-    dispatch('reflow', {
+    props.$$events?.reflow?.({
         width: computedWidth,
         height: computedHeight
     });

package/dist/Flex/Flex.svelte

@@ -1,19 +1,17 @@
-<script>import { forwardEventHandlers } from '@threlte/core';
-import { loadYoga } from 'yoga-layout';
+<script>import { loadYoga } from 'yoga-layout';
 import InnerFlex from './InnerFlex.svelte';
-let yoga;
+let { ...props } = $props();
+let yoga = $state(undefined);
 const initialize = async () => {
     yoga = await loadYoga();
 };
 initialize();
-const component = forwardEventHandlers();
 </script>
 
 {#if yoga}
   <InnerFlex
     {yoga}
-    {...$$restProps}
-    bind:this={$component}
+    {...props}
     let:reflow
     let:width
     let:height

package/dist/Flex/InnerFlex.svelte

@@ -1,4 +1,4 @@
-<script>import { T, createRawEventDispatcher, currentWritable, useTask } from '@threlte/core';
+<script>import { T, currentWritable, useTask } from '@threlte/core';
 import { onDestroy } from 'svelte';
 import { Box3, Group, Vector3 } from 'three';
 import { Direction } from 'yoga-layout';
@@ -10,19 +10,10 @@ import { applyNodeProps } from '../lib/props';
 import { propsChanged } from '../lib/propsChanged';
 import { createNodeContext } from '../nodes/context';
 import { createFlexContext } from './context';
-export let yoga;
-export let width = 1;
-export let height = 1;
-export let plane = 'xy';
-export let direction = 'LTR';
-export let scaleFactor = 1000;
-export let classParser = undefined;
-let _class = '';
-export { _class as class };
-export let reflowStage = undefined;
-const dispatch = createRawEventDispatcher();
-const rootGroup = new Group();
-rootGroup.userData.isNode = true;
+let { yoga, width = 1, height = 1, plane = 'xy', direction = 'LTR', scaleFactor = 1000, classParser, class: _class = '', reflowStage, ref = $bindable(), ...props } = $props();
+$inspect(yoga);
+ref = new Group();
+ref.userData.isNode = true;
 const boundingBox = new Box3();
 const vec3 = new Vector3();
 /**
@@ -44,11 +35,11 @@ const { start: reflow, stop } = useTask(Symbol('threlte-flex-reflow'), () => {
         }
         else if (node.getChildCount() === 0) {
             // No size specified, calculate size
-            if (rootGroup) {
-                getOrientedBoundingBoxSize(group, rootGroup, boundingBox, vec3);
+            if (ref) {
+                getOrientedBoundingBoxSize(group, ref, boundingBox, vec3);
             }
             else {
-                // rootGroup ref is missing for some reason, let's just use usual bounding box
+                // ref is missing for some reason, let's just use usual bounding box
                 boundingBox.setFromObject(group).getSize(vec3);
             }
             node.setWidth(scaledWidth || vec3[$mainAxis] * scaleFactor);
@@ -77,7 +68,7 @@ const { start: reflow, stop } = useTask(Symbol('threlte-flex-reflow'), () => {
     flexContext.emit('reflow:after');
     computedWidth.set((maxX - minX) / scaleFactor);
     computedHeight.set((maxY - minY) / scaleFactor);
-    dispatch('reflow', {
+    props.$$events?.reflow?.({
         width: computedWidth.current,
         height: computedHeight.current
     });
@@ -113,30 +104,53 @@ const flexContext = createFlexContext({
     mainAxis: currentWritable(plane[0]),
     crossAxis: currentWritable(plane[1]),
     depthAxis: currentWritable(getDepthAxis(plane)),
-    rootGroup: rootGroup,
+    rootGroup: ref,
     reflow,
     classParser
 });
 const rootNode = yoga.Node.create();
 createNodeContext(rootNode);
 const { mainAxis, crossAxis, depthAxis } = flexContext;
-$: rootNode.setWidth(width * scaleFactor), rootNode.setHeight(height * scaleFactor);
-// prettier-ignore
-flexContext.updateNodeProps(rootNode, { ...classParser?.(_class, {}), ...$$restProps }, true);
-// prettier-ignore
-$: flexContext.updateNodeProps(rootNode, { ...classParser?.(_class, {}), ...$$restProps });
-$: flexContext.rootWidth.set(width), flexContext.reflow();
-$: flexContext.rootHeight.set(height), flexContext.reflow();
-$: flexContext.mainAxis.set(plane[0]), flexContext.reflow();
-$: flexContext.crossAxis.set(plane[1]), flexContext.reflow();
-$: flexContext.depthAxis.set(getDepthAxis(plane)), flexContext.reflow();
-$: flexContext.scaleFactor.set(scaleFactor), flexContext.reflow();
+$effect.pre(() => {
+    rootNode.setWidth(width * scaleFactor), rootNode.setHeight(height * scaleFactor);
+});
+flexContext.updateNodeProps(rootNode, { ...classParser?.(_class, {}), ...props }, true);
+$effect.pre(() => {
+    flexContext.updateNodeProps(rootNode, {
+        ...classParser?.(_class, {}),
+        ...props
+    });
+});
+$effect.pre(() => {
+    flexContext.rootWidth.set(width);
+    flexContext.reflow();
+});
+$effect.pre(() => {
+    flexContext.rootHeight.set(height);
+    flexContext.reflow();
+});
+$effect.pre(() => {
+    flexContext.mainAxis.set(plane[0]);
+    flexContext.reflow();
+});
+$effect.pre(() => {
+    flexContext.crossAxis.set(plane[1]);
+    flexContext.reflow();
+});
+$effect.pre(() => {
+    flexContext.depthAxis.set(getDepthAxis(plane));
+    flexContext.reflow();
+});
+$effect.pre(() => {
+    flexContext.scaleFactor.set(scaleFactor);
+    flexContext.reflow();
+});
 onDestroy(() => {
     rootNode.free();
 });
 </script>
 
-<T is={rootGroup}>
+<T is={ref}>
   <slot
     {reflow}
     width={$computedWidth}

package/dist/lib/props.js

@@ -60,6 +60,6 @@ const applyScaleFactor = (prop, scaleFactor) => {
 export const applyNodeProps = (node, props, scaleFactor) => {
     return Object.entries(alignFlexProps(props)).forEach(([key, value]) => {
         const scaledValue = applyScaleFactor(value, scaleFactor);
-        propSetter[key](scaledValue, node);
+        propSetter[key]?.(scaledValue, node);
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/flex",
-  "version": "1.0.1",
+  "version": "2.0.0-next.0",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "devDependencies": {
@@ -28,8 +28,8 @@
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "@threlte/core": "7.0.12",
-    "@threlte/extras": "8.5.0"
+    "@threlte/core": "8.0.0-next.0",
+    "@threlte/extras": "9.0.0-next.0"
   },
   "dependencies": {
     "mitt": "^3.0.1",
@@ -37,7 +37,7 @@
   },
   "peerDependencies": {
     "svelte": ">=4",
-    "three": ">=0.133"
+    "three": ">=0.152"
   },
   "type": "module",
   "exports": {