@threlte/flex 2.0.5 → 2.1.0

package/README.md

@@ -50,10 +50,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/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.js'
+  import { createUseDimensionsContext } from '../hooks/useDimensions.js'
+  import type { NodeProps } from '../lib/props.js'
+  import { createNodeContext } from '../nodes/context.js'
+  import type { BoxProps } from './types.js'
+
+  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';
+import type { BoxProps } from './types.js';
 declare const Box: import("svelte").Component<BoxProps, {}, "">;
+type Box = ReturnType<typeof Box>;
 export default Box;

package/dist/Box/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { NodeProps } from '../lib/props';
+import type { NodeProps } from '../lib/props.js';
 export type BoxProps = NodeProps & {
     order?: number | undefined;
     class?: string;

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.js'
+
+  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';
+import type { FlexProps } from './types.js';
 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.js'
+  import { getDepthAxis } from '../lib/getDepthAxis.js'
+  import { getOrientedBoundingBoxSize } from '../lib/getOrientedBoundingBoxSize.js'
+  import { getRootShift } from '../lib/getRootShift.js'
+  import { applyNodeProps, type Axis, type NodeProps } from '../lib/props.js'
+  import { propsChanged } from '../lib/propsChanged.js'
+  import { createNodeContext } from '../nodes/context.js'
+  import { createFlexContext } from './context.js'
+  import type { InnerFlexProps } from './types.js'
+
+  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';
+import type { InnerFlexProps } from './types.js';
 declare const InnerFlex: import("svelte").Component<InnerFlexProps, {}, "ref">;
+type InnerFlex = ReturnType<typeof InnerFlex>;
 export default InnerFlex;

package/dist/Flex/context.d.ts

@@ -1,9 +1,9 @@
 import type { CurrentWritable } from '@threlte/core';
-import { type Emitter } from 'mitt';
+import type { Emitter } from 'mitt';
 import type { Group } from 'three';
 import type { Node } from 'yoga-layout';
 import type Yoga from 'yoga-layout';
-import type { Axis, ClassParser, NodeProps } from '../lib/props';
+import type { Axis, ClassParser, NodeProps } from '../lib/props.js';
 type FlexContextEvents = {
     'reflow:before': void;
     'reflow:after': void;

package/dist/Flex/context.js

@@ -1,4 +1,7 @@
-import mitt, {} from 'mitt';
+// We need to cast here because TypeScript with "moduleResolution": "NodeNext"
+// fails to resolve the default export otherwise.
+import mittModule from 'mitt';
+const mitt = mittModule;
 import { getContext, onDestroy, setContext } from 'svelte';
 export const flexContextName = '__threlte-flex';
 export const createFlexContext = (data) => {

package/dist/Flex/types.d.ts

@@ -3,7 +3,7 @@ import type { Snippet } from 'svelte';
 import type { Group } from 'three';
 import type Yoga from 'yoga-layout';
 import type { Direction } from 'yoga-layout';
-import type { ClassParser, FlexPlane, NodeProps } from '../lib/props';
+import type { ClassParser, FlexPlane, NodeProps } from '../lib/props.js';
 export type InnerFlexProps = NodeProps & {
     yoga: typeof Yoga;
     width?: number;

package/dist/hooks/useReflow.js

@@ -1,5 +1,5 @@
 import { getContext } from 'svelte';
-import { flexContextName } from '../Flex/context';
+import { flexContextName } from '../Flex/context.js';
 /**
  * The hook useReflow allows you to manually request a [layout
  * reflow](https://threlte.xyz/docs/reference/flex/flex#layout-reflow), for

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Box } from './Box/Box.svelte';
 export { default as Flex } from './Flex/Flex.svelte';
-export type { NodeProps } from './lib/props';
-export { createClassParser } from './parsers/createClassParser';
-export { tailwindParser } from './parsers/tailwindParser';
-export { useReflow } from './hooks/useReflow';
-export { useDimensions } from './hooks/useDimensions';
+export type { NodeProps } from './lib/props.js';
+export { createClassParser } from './parsers/createClassParser.js';
+export { tailwindParser } from './parsers/tailwindParser.js';
+export { useReflow } from './hooks/useReflow.js';
+export { useDimensions } from './hooks/useDimensions.js';

package/dist/index.js

@@ -1,8 +1,8 @@
 export { default as Box } from './Box/Box.svelte';
 export { default as Flex } from './Flex/Flex.svelte';
 // parsers
-export { createClassParser } from './parsers/createClassParser';
-export { tailwindParser } from './parsers/tailwindParser';
+export { createClassParser } from './parsers/createClassParser.js';
+export { tailwindParser } from './parsers/tailwindParser.js';
 // hooks
-export { useReflow } from './hooks/useReflow';
-export { useDimensions } from './hooks/useDimensions';
+export { useReflow } from './hooks/useReflow.js';
+export { useDimensions } from './hooks/useDimensions.js';

package/dist/lib/alignFlexProps.d.ts

@@ -1,4 +1,4 @@
-import type { NodeProps } from './props';
+import type { NodeProps } from './props.js';
 /**
  * This function will align the flex props to the web-standard.
  *

package/dist/lib/getDepthAxis.d.ts

@@ -1,2 +1,2 @@
-import type { FlexPlane } from './props';
+import type { FlexPlane } from './props.js';
 export declare function getDepthAxis(plane: FlexPlane): "x" | "y" | "z";

package/dist/lib/getFlex2DSize.d.ts

@@ -1,2 +1,2 @@
-import type { FlexPlane } from './props';
+import type { FlexPlane } from './props.js';
 export declare function getFlex2DSize(sizes: [number, number, number], plane: FlexPlane): number[];

package/dist/lib/getRootShift.js

@@ -1,4 +1,4 @@
-import { isTopLevelChildNode } from './isTopLevelChildNode';
+import { isTopLevelChildNode } from './isTopLevelChildNode.js';
 /** @returns [mainAxisShift, crossAxisShift] */
 export const getRootShift = (rootWidth, rootHeight, node) => {
     if (!isTopLevelChildNode(node)) {

package/dist/lib/props.js

@@ -1,5 +1,5 @@
 import * as Yoga from 'yoga-layout';
-import { alignFlexProps } from './alignFlexProps';
+import { alignFlexProps } from './alignFlexProps.js';
 // prettier-ignore
 /**
  * This map provides the prop setters as well as the types for the props. The
@@ -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/dist/lib/propsChanged.d.ts

@@ -1,5 +1,5 @@
 import type { Node } from 'yoga-layout';
-import type { NodeProps } from './props';
+import type { NodeProps } from './props.js';
 /**
  * Because all NodeProps are primitive types, we can make a simple comparison
  * and only request a reflow when necessary. We do that by checking the length

package/dist/nodes/context.js

@@ -1,5 +1,5 @@
 import { getContext, setContext } from 'svelte';
-import { useReflow } from '..';
+import { useReflow } from '../hooks/useReflow.js';
 export const nodeContextName = '__threlte-node';
 export const createNodeContext = (node) => {
     const reflow = useReflow();

package/dist/parsers/createClassParser.d.ts

@@ -1,4 +1,4 @@
-import type { ClassParser } from '../lib/props';
+import type { ClassParser } from '../lib/props.js';
 /**
  * This function is a type helper for creating a class parser. A class parser is
  * a function that takes a class name and returns a NodeProps object. This can

package/dist/parsers/tailwindParser.d.ts

@@ -1 +1 @@
-export declare const tailwindParser: import("../lib/props").ClassParser;
+export declare const tailwindParser: import("../lib/props.js").ClassParser;

package/dist/parsers/tailwindParser.js

@@ -1,4 +1,4 @@
-import { createClassParser } from './createClassParser';
+import { createClassParser } from './createClassParser.js';
 const parseNumericOrAutoOrPercentageValue = (value) => {
     if (value === 'auto') {
         return value;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@threlte/flex",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "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.3.0",
+    "@threlte/extras": "9.7.0"
   },
   "dependencies": {
     "mitt": "^3.0.1",