@threlte/flex 2.0.5 → 2.0.6

package/dist/Box/Box.svelte

@@ -1,70 +1,100 @@
-<script lang="ts">import { T } from '@threlte/core';
-import { onDestroy } from 'svelte';
-import { Group, Object3D } from 'three';
-import { useFlex } from '../Flex/context';
-import { createUseDimensionsContext } from '../hooks/useDimensions';
-import { createNodeContext } from '../nodes/context';
-let { order, class: _class = '', onreflow, children, ...props } = $props();
-/**
- * Create the context for `useDimensions`
- */
-const dimensionsContext = createUseDimensionsContext();
-const { scaleFactor, onEvent, addNode, removeNode, updateNodeProps, mainAxis, crossAxis, depthAxis, classParser, reflow } = useFlex();
-const group = new Group();
-group.userData.isNode = true;
-const contentGroup = new Group();
-const { yoga } = useFlex();
-const node = yoga.Node.create();
-const parentNodeContext = createNodeContext(node);
-parentNodeContext?.insertNode(node, order);
-onDestroy(() => {
-    parentNodeContext?.removeNode(node);
-});
-// update the order of the node
-$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 = $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', () => {
+<script lang="ts">
+  import { T } from '@threlte/core'
+  import { onDestroy } from 'svelte'
+  import { Group, Object3D } from 'three'
+  import { useFlex } from '../Flex/context'
+  import { createUseDimensionsContext } from '../hooks/useDimensions'
+  import type { NodeProps } from '../lib/props'
+  import { createNodeContext } from '../nodes/context'
+  import type { BoxProps } from './types'
+
+  let { order, class: _class = '', onreflow, children, ...props }: BoxProps = $props()
+
+  /**
+   * Create the context for `useDimensions`
+   */
+  const dimensionsContext = createUseDimensionsContext()
+
+  const {
+    scaleFactor,
+    onEvent,
+    addNode,
+    removeNode,
+    updateNodeProps,
+    mainAxis,
+    crossAxis,
+    depthAxis,
+    classParser,
+    reflow
+  } = useFlex()
+
+  const group = new Group()
+  group.userData.isNode = true
+  const contentGroup = new Group()
+
+  const { yoga } = useFlex()
+
+  const node = yoga.Node.create()
+
+  const parentNodeContext = createNodeContext(node)
+  parentNodeContext?.insertNode(node, order)
+  onDestroy(() => {
+    parentNodeContext?.removeNode(node)
+  })
+
+  // update the order of the node
+  $effect.pre(() => parentNodeContext?.updateNodeOrder(node, order))
+
+  addNode(node, group, props as NodeProps)
+  updateNodeProps(node, { ...classParser?.(_class, {}), ...props } as NodeProps, true)
+
+  $effect.pre(() => updateNodeProps(node, { ...classParser?.(_class, {}), ...props } as NodeProps))
+
+  onDestroy(() => {
+    removeNode(node)
+  })
+
+  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 props.width === 'number' ? props.width : node.getComputedWidth() / $scaleFactor;
+      typeof props.width === 'number' ? props.width : node.getComputedWidth() / $scaleFactor
+
     computedHeight =
-        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);
+      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)
+
     onreflow?.({
-        width: computedWidth,
-        height: computedHeight
-    });
-});
-const proxy = new Object3D();
-proxy.add = (child) => {
+      width: computedWidth,
+      height: computedHeight
+    })
+  })
+
+  const proxy = new Object3D()
+  proxy.add = (child) => {
     if (child.userData.isNode) {
-        group.add(child);
+      group.add(child)
+    } else {
+      contentGroup.add(child)
     }
-    else {
-        contentGroup.add(child);
-    }
-    return child;
-};
-proxy.remove = (child) => {
+    return child
+  }
+  proxy.remove = (child) => {
     if (child.userData.isNode) {
-        group.remove(child);
-    }
-    else {
-        contentGroup.remove(child);
+      group.remove(child)
+    } else {
+      contentGroup.remove(child)
     }
-    return child;
-};
+    return child
+  }
 </script>
 
 <T is={group}>

package/dist/Box/Box.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { BoxProps } from './types';
 declare const Box: import("svelte").Component<BoxProps, {}, "">;
+type Box = ReturnType<typeof Box>;
 export default Box;

package/dist/Flex/Flex.svelte

@@ -1,11 +1,17 @@
-<script lang="ts">import { loadYoga } from 'yoga-layout/load';
-import InnerFlex from './InnerFlex.svelte';
-let { children: innerChildren, ref = $bindable(), ...props } = $props();
-let yoga = $state();
-const initialize = async () => {
-    yoga = await loadYoga();
-};
-initialize();
+<script lang="ts">
+  import { loadYoga, type Yoga } from 'yoga-layout/load'
+  import InnerFlex from './InnerFlex.svelte'
+  import type { FlexProps } from './types'
+
+  let { children: innerChildren, ref = $bindable(), ...props }: FlexProps = $props()
+
+  let yoga = $state<Yoga>()
+
+  const initialize = async () => {
+    yoga = await loadYoga()
+  }
+
+  initialize()
 </script>
 
 {#if yoga}

package/dist/Flex/Flex.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { FlexProps } from './types';
 declare const Flex: import("svelte").Component<FlexProps, {}, "ref">;
+type Flex = ReturnType<typeof Flex>;
 export default Flex;

package/dist/Flex/InnerFlex.svelte

@@ -1,153 +1,202 @@
-<script lang="ts">import { T, currentWritable, useTask } from '@threlte/core';
-import { onDestroy } from 'svelte';
-import { Box3, Group, Vector3 } from 'three';
-import { Direction } from 'yoga-layout';
-import { createUseDimensionsContext } from '../hooks/useDimensions';
-import { getDepthAxis } from '../lib/getDepthAxis';
-import { getOrientedBoundingBoxSize } from '../lib/getOrientedBoundingBoxSize';
-import { getRootShift } from '../lib/getRootShift';
-import { applyNodeProps } from '../lib/props';
-import { propsChanged } from '../lib/propsChanged';
-import { createNodeContext } from '../nodes/context';
-import { createFlexContext } from './context';
-let { yoga, width = 1, height = 1, plane = 'xy', direction = 'LTR', scaleFactor = 1000, classParser, class: _class = '', reflowStage, ref = $bindable(), onreflow, children, ...props } = $props();
-ref = new Group();
-ref.userData.isNode = true;
-const boundingBox = new Box3();
-const vec3 = new Vector3();
-/**
- * Create the context for `useDimensions`
- */
-const { width: computedWidth, height: computedHeight } = createUseDimensionsContext();
-/**
- * Reflowing inside useTask automatically batches reflows to 1 per frame.
- */
-const { start: reflow, stop } = useTask(Symbol('threlte-flex-reflow'), () => {
-    flexContext.emit('reflow:before');
-    for (const { node, group, props } of flexContext.nodes.values()) {
-        const scaledWidth = typeof props.width === 'number' ? props.width * scaleFactor : props.width;
-        const scaledHeight = typeof props.height === 'number' ? props.height * scaleFactor : props.height;
+<script lang="ts">
+  import { T, currentWritable, useTask } from '@threlte/core'
+  import { onDestroy } from 'svelte'
+  import { Box3, Group, Vector3 } from 'three'
+  import { Direction } from 'yoga-layout'
+  import { createUseDimensionsContext } from '../hooks/useDimensions'
+  import { getDepthAxis } from '../lib/getDepthAxis'
+  import { getOrientedBoundingBoxSize } from '../lib/getOrientedBoundingBoxSize'
+  import { getRootShift } from '../lib/getRootShift'
+  import { applyNodeProps, type Axis, type NodeProps } from '../lib/props'
+  import { propsChanged } from '../lib/propsChanged'
+  import { createNodeContext } from '../nodes/context'
+  import { createFlexContext } from './context'
+  import type { InnerFlexProps } from './types'
+
+  let {
+    yoga,
+    width = 1,
+    height = 1,
+    plane = 'xy',
+    direction = 'LTR',
+    scaleFactor = 1000,
+    classParser,
+    class: _class = '',
+    reflowStage,
+    ref = $bindable(),
+    onreflow,
+    children,
+    ...props
+  }: InnerFlexProps = $props()
+
+  ref = new Group()
+  ref.userData.isNode = true
+
+  const boundingBox = new Box3()
+  const vec3 = new Vector3()
+
+  /**
+   * Create the context for `useDimensions`
+   */
+  const { width: computedWidth, height: computedHeight } = createUseDimensionsContext()
+
+  /**
+   * Reflowing inside useTask automatically batches reflows to 1 per frame.
+   */
+  const { start: reflow, stop } = useTask(
+    Symbol('threlte-flex-reflow'),
+    () => {
+      flexContext.emit('reflow:before')
+
+      for (const { node, group, props } of flexContext.nodes.values()) {
+        const scaledWidth =
+          typeof props.width === 'number' ? props.width * scaleFactor : props.width
+        const scaledHeight =
+          typeof props.height === 'number' ? props.height * scaleFactor : props.height
+
         if (scaledWidth !== undefined && scaledHeight !== undefined) {
-            // Forced size, no need to calculate bounding box
-            node.setWidth(scaledWidth);
-            node.setHeight(scaledHeight);
-        }
-        else if (node.getChildCount() === 0) {
-            // No size specified, calculate size
-            if (ref) {
-                getOrientedBoundingBoxSize(group, ref, boundingBox, vec3);
-            }
-            else {
-                // ref is missing for some reason, let's just use usual bounding box
-                boundingBox.setFromObject(group).getSize(vec3);
-            }
-            node.setWidth(scaledWidth || vec3[$mainAxis] * scaleFactor);
-            node.setHeight(scaledHeight || vec3[$crossAxis] * scaleFactor);
+          // Forced size, no need to calculate bounding box
+          node.setWidth(scaledWidth)
+          node.setHeight(scaledHeight)
+        } else if (node.getChildCount() === 0) {
+          // No size specified, calculate size
+          if (ref) {
+            getOrientedBoundingBoxSize(group, ref, boundingBox, vec3)
+          } else {
+            // ref is missing for some reason, let's just use usual bounding box
+            boundingBox.setFromObject(group).getSize(vec3)
+          }
+
+          node.setWidth(scaledWidth || vec3[$mainAxis] * scaleFactor)
+          node.setHeight(scaledHeight || vec3[$crossAxis] * scaleFactor)
         }
-    }
-    rootNode.calculateLayout(width * scaleFactor, height * scaleFactor, Direction[direction]);
-    const rootWidth = rootNode.getComputedWidth();
-    const rootHeight = rootNode.getComputedHeight();
-    let minX = 0;
-    let maxX = 0;
-    let minY = 0;
-    let maxY = 0;
-    // Reposition after recalculation
-    for (const { node, group } of flexContext.nodes.values()) {
-        const { left, top, width, height } = node.getComputedLayout();
-        const [mainAxisShift, crossAxisShift] = getRootShift(rootWidth, rootHeight, node);
-        group.position[$mainAxis] = (mainAxisShift + left) / scaleFactor;
-        group.position[$crossAxis] = -(crossAxisShift + top) / scaleFactor;
-        group.position[$depthAxis] = 0;
-        minX = Math.min(minX, left);
-        minY = Math.min(minY, top);
-        maxX = Math.max(maxX, left + width);
-        maxY = Math.max(maxY, top + height);
-    }
-    flexContext.emit('reflow:after');
-    computedWidth.set((maxX - minX) / scaleFactor);
-    computedHeight.set((maxY - minY) / scaleFactor);
-    onreflow?.({
+      }
+
+      rootNode.calculateLayout(width * scaleFactor, height * scaleFactor, Direction[direction])
+
+      const rootWidth = rootNode.getComputedWidth()
+      const rootHeight = rootNode.getComputedHeight()
+
+      let minX = 0
+      let maxX = 0
+      let minY = 0
+      let maxY = 0
+
+      // Reposition after recalculation
+      for (const { node, group } of flexContext.nodes.values()) {
+        const { left, top, width, height } = node.getComputedLayout()
+        const [mainAxisShift, crossAxisShift] = getRootShift(rootWidth, rootHeight, node)
+
+        group.position[$mainAxis] = (mainAxisShift + left) / scaleFactor
+        group.position[$crossAxis] = -(crossAxisShift + top) / scaleFactor
+        group.position[$depthAxis] = 0
+
+        minX = Math.min(minX, left)
+        minY = Math.min(minY, top)
+        maxX = Math.max(maxX, left + width)
+        maxY = Math.max(maxY, top + height)
+      }
+
+      flexContext.emit('reflow:after')
+
+      computedWidth.set((maxX - minX) / scaleFactor)
+      computedHeight.set((maxY - minY) / scaleFactor)
+
+      onreflow?.({
         width: computedWidth.current,
         height: computedHeight.current
-    });
-    stop();
-}, {
-    stage: reflowStage,
-    autoStart: false
-});
-const flexContext = createFlexContext({
+      })
+
+      stop()
+    },
+    {
+      stage: reflowStage,
+      autoStart: false
+    }
+  )
+
+  const flexContext = createFlexContext({
     yoga,
     nodes: new Map(),
     addNode(node, group, props) {
-        flexContext.nodes.set(node, { node, group, props });
-        reflow();
+      flexContext.nodes.set(node, { node, group, props })
+      reflow()
     },
     updateNodeProps(node, props, force = false) {
-        const nodeData = flexContext.nodes.get(node);
-        // Updating the props can be forced and is done so on the initial call.
-        if (force || propsChanged(node, props)) {
-            applyNodeProps(node, props, scaleFactor);
-            reflow();
-            if (nodeData)
-                nodeData.props = props;
-        }
+      const nodeData = flexContext.nodes.get(node)
+
+      // Updating the props can be forced and is done so on the initial call.
+      if (force || propsChanged(node, props)) {
+        applyNodeProps(node, props, scaleFactor)
+        reflow()
+        if (nodeData) nodeData.props = props
+      }
     },
     removeNode(node) {
-        flexContext.nodes.delete(node);
-        reflow();
+      flexContext.nodes.delete(node)
+      reflow()
     },
     rootWidth: currentWritable(width),
     rootHeight: currentWritable(height),
     scaleFactor: currentWritable(scaleFactor ?? 1000),
-    mainAxis: currentWritable(plane[0]),
-    crossAxis: currentWritable(plane[1]),
+    mainAxis: currentWritable(plane[0] as Axis),
+    crossAxis: currentWritable(plane[1] as Axis),
     depthAxis: currentWritable(getDepthAxis(plane)),
     rootGroup: ref,
     reflow,
     classParser
-});
-const rootNode = yoga.Node.create();
-createNodeContext(rootNode);
-const { mainAxis, crossAxis, depthAxis } = flexContext;
-$effect.pre(() => {
-    rootNode.setWidth(width * scaleFactor);
-    rootNode.setHeight(height * scaleFactor);
-});
-flexContext.updateNodeProps(rootNode, { ...classParser?.(_class, {}), ...props }, true);
-$effect.pre(() => {
+  })
+
+  const rootNode = yoga.Node.create()
+  createNodeContext(rootNode)
+
+  const { mainAxis, crossAxis, depthAxis } = flexContext
+
+  $effect.pre(() => {
+    rootNode.setWidth(width * scaleFactor)
+    rootNode.setHeight(height * scaleFactor)
+  })
+
+  flexContext.updateNodeProps(
+    rootNode,
+    { ...classParser?.(_class, {}), ...props } as NodeProps,
+    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();
-});
+      ...classParser?.(_class, {}),
+      ...props
+    } as NodeProps)
+  })
+  $effect.pre(() => {
+    flexContext.rootWidth.set(width)
+    flexContext.reflow()
+  })
+  $effect.pre(() => {
+    flexContext.rootHeight.set(height)
+    flexContext.reflow()
+  })
+  $effect.pre(() => {
+    flexContext.mainAxis.set(plane[0] as Axis)
+    flexContext.reflow()
+  })
+  $effect.pre(() => {
+    flexContext.crossAxis.set(plane[1] as Axis)
+    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={ref}>

package/dist/Flex/InnerFlex.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { InnerFlexProps } from './types';
 declare const InnerFlex: import("svelte").Component<InnerFlexProps, {}, "ref">;
+type InnerFlex = ReturnType<typeof InnerFlex>;
 export default InnerFlex;

package/dist/lib/props.js

@@ -58,8 +58,16 @@ const applyScaleFactor = (prop, scaleFactor) => {
     return prop;
 };
 export const applyNodeProps = (node, props, scaleFactor) => {
-    return Object.entries(alignFlexProps(props)).forEach(([key, value]) => {
-        const scaledValue = applyScaleFactor(value, scaleFactor);
-        propSetter[key]?.(scaledValue, node);
-    });
+    const alignedProps = alignFlexProps(props);
+    for (const key in alignedProps) {
+        // limit to the known keys of propSetter
+        if (!(key in propSetter))
+            continue;
+        const k = key;
+        const prop = alignedProps[k];
+        if (prop === undefined)
+            continue;
+        const scaled = applyScaleFactor(prop, scaleFactor);
+        propSetter[k](scaled, node);
+    }
 };

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@threlte/flex",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "description": "Components to easily use the flexbox spec with Threlte",
   "devDependencies": {
     "@eslint/js": "^9.26.0",
-    "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.7.7",
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.37.0",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@types/node": "^20.12.7",
+    "@sveltejs/vite-plugin-svelte": "^6.1.4",
+    "@types/node": "^20.19.4",
     "@types/three": "^0.175.0",
     "@yushijinhun/three-minifier-rollup": "^0.4.0",
     "eslint": "^9.26.0",
@@ -19,18 +19,17 @@
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
     "publint": "^0.2.7",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.0.1",
     "svelte": "5.26.2",
-    "svelte-check": "^4.1.7",
-    "svelte-preprocess": "^5.1.3",
+    "svelte-check": "^4.3.1",
     "svelte2tsx": "^0.7.6",
     "three": "^0.175.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.6.3",
+    "typescript": "5.9.2",
     "typescript-eslint": "^8.32.0",
-    "vite": "^5.2.8",
-    "@threlte/core": "8.1.4",
-    "@threlte/extras": "9.4.4"
+    "vite": "^7.1.4",
+    "@threlte/core": "8.1.5",
+    "@threlte/extras": "9.5.4"
   },
   "dependencies": {
     "mitt": "^3.0.1",