@threlte/flex 2.0.0-next.0 → 2.0.0-next.10

package/dist/Box/Box.svelte

@@ -1,10 +1,10 @@
-<script>import { HierarchicalObject, T } from '@threlte/core';
+<script lang="ts">import { T } from '@threlte/core';
 import { onDestroy } from 'svelte';
-import { Group } from 'three';
+import { Group, Object3D } from 'three';
 import { useFlex } from '../Flex/context';
 import { createUseDimensionsContext } from '../hooks/useDimensions';
 import { createNodeContext } from '../nodes/context';
-let { order, class: _class = '', ...props } = $props();
+let { order, class: _class = '', onreflow, children, ...props } = $props();
 /**
  * Create the context for `useDimensions`
  */
@@ -41,36 +41,39 @@ onEvent('reflow:after', () => {
     contentGroup.position[$depthAxis] = 0;
     dimensionsContext.width.set(computedWidth);
     dimensionsContext.height.set(computedHeight);
-    props.$$events?.reflow?.({
+    onreflow?.({
         width: computedWidth,
         height: computedHeight
     });
 });
+const proxy = new Object3D();
+proxy.add = (child) => {
+    if (child.userData.isNode) {
+        group.add(child);
+    }
+    else {
+        contentGroup.add(child);
+    }
+    return child;
+};
+proxy.remove = (child) => {
+    if (child.userData.isNode) {
+        group.remove(child);
+    }
+    else {
+        contentGroup.remove(child);
+    }
+    return child;
+};
 </script>
 
 <T is={group}>
   <T is={contentGroup} />
 </T>
 
-<HierarchicalObject
-  onChildMount={(child) => {
-    if (child.userData.isNode) {
-      group.add(child)
-    } else {
-      contentGroup.add(child)
-    }
-  }}
-  onChildDestroy={(child) => {
-    if (child.userData.isNode) {
-      group.remove(child)
-    } else {
-      contentGroup.remove(child)
-    }
-  }}
+<T
+  is={proxy}
+  attach={false}
 >
-  <slot
-    {reflow}
-    width={computedWidth}
-    height={computedHeight}
-  />
-</HierarchicalObject>
+  {@render children?.({ reflow, width: computedWidth, height: computedHeight })}
+</T>

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

@@ -1,24 +1,21 @@
-import { SvelteComponent } from 'svelte'
+import { SvelteComponent, type Snippet } from 'svelte'
 import type { NodeProps } from '../lib/props'
 
 type BoxProps = NodeProps & {
   order?: number | undefined
   class?: string
-}
 
-type BoxEvents = {
-  reflow: {
-    width: number
-    height: number
-  }
-}
+  children?: Snippet<
+    [
+      {
+        reflow: () => void
+        width: number
+        height: number
+      }
+    ]
+  >
 
-type BoxSlots = {
-  default: {
-    reflow: () => void
-    width: number
-    height: number
-  }
+  onreflow?: (event: { width: number; height: number }) => void
 }
 
-export default class Box extends SvelteComponent<BoxProps, BoxEvents, BoxSlots> {}
+export default class Box extends SvelteComponent<BoxProps> {}

package/dist/Flex/Flex.svelte

@@ -1,6 +1,6 @@
-<script>import { loadYoga } from 'yoga-layout';
+<script lang="ts">import { loadYoga } from 'yoga-layout/load';
 import InnerFlex from './InnerFlex.svelte';
-let { ...props } = $props();
+let { children: innerChildren, ...props } = $props();
 let yoga = $state(undefined);
 const initialize = async () => {
     yoga = await loadYoga();
@@ -12,14 +12,9 @@ initialize();
   <InnerFlex
     {yoga}
     {...props}
-    let:reflow
-    let:width
-    let:height
   >
-    <slot
-      {reflow}
-      {width}
-      {height}
-    />
+    {#snippet children({ reflow, width, height })}
+      {@render innerChildren?.({ reflow, width, height })}
+    {/snippet}
   </InnerFlex>
 {/if}

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

@@ -1,18 +1,7 @@
 import { SvelteComponent } from 'svelte'
-import type { ComponentEvents, ComponentProps } from 'svelte'
+import type { ComponentProps } from 'svelte'
 import type InnerFlex from './InnerFlex.svelte'
 
 type FlexProps = Omit<ComponentProps<InnerFlex>, 'yoga'>
 
-type FlexEvents = ComponentEvents<InnerFlex>
-
-// Currently, there's no svelte helper to get the slots of a component.
-type FlexSlots = {
-  default: {
-    reflow: () => void
-    width: number
-    height: number
-  }
-}
-
-export default class Flex extends SvelteComponent<FlexProps, FlexEvents, FlexSlots> {}
+export default class Flex extends SvelteComponent<FlexProps> {}

package/dist/Flex/InnerFlex.svelte

@@ -1,4 +1,4 @@
-<script>import { T, currentWritable, useTask } from '@threlte/core';
+<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';
@@ -10,7 +10,7 @@ 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(), ...props } = $props();
+let { yoga, width = 1, height = 1, plane = 'xy', direction = 'LTR', scaleFactor = 1000, classParser, class: _class = '', reflowStage, ref = $bindable(), onreflow, children, ...props } = $props();
 $inspect(yoga);
 ref = new Group();
 ref.userData.isNode = true;
@@ -21,7 +21,7 @@ const vec3 = new Vector3();
  */
 const { width: computedWidth, height: computedHeight } = createUseDimensionsContext();
 /**
- * Reflowing inside useFrame automatically batches reflows to 1 per frame.
+ * Reflowing inside useTask automatically batches reflows to 1 per frame.
  */
 const { start: reflow, stop } = useTask(Symbol('threlte-flex-reflow'), () => {
     flexContext.emit('reflow:before');
@@ -68,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);
-    props.$$events?.reflow?.({
+    onreflow?.({
         width: computedWidth.current,
         height: computedHeight.current
     });
@@ -151,9 +151,9 @@ onDestroy(() => {
 </script>
 
 <T is={ref}>
-  <slot
-    {reflow}
-    width={$computedWidth}
-    height={$computedHeight}
-  />
+  {@render children?.({
+    reflow,
+    width: $computedWidth,
+    height: $computedHeight
+  })}
 </T>

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

@@ -1,7 +1,8 @@
 import type { Stage } from '@threlte/core'
-import { SvelteComponent } from 'svelte'
+import { SvelteComponent, type Snippet } from 'svelte'
 import type { Direction, Yoga } from 'yoga-layout'
 import type { ClassParser, FlexPlane, NodeProps } from '../lib/props'
+import type { Group } from 'three'
 
 type InnerFlexProps = NodeProps & {
   yoga: Yoga
@@ -13,25 +14,19 @@ type InnerFlexProps = NodeProps & {
   class?: string
   classParser?: ClassParser
   reflowStage?: Stage
-}
+  ref?: Group
 
-type InnerFlexEvents = {
-  reflow: {
-    width: number
-    height: number
-  }
-}
+  children?: Snippet<
+    [
+      {
+        reflow: () => void
+        width: number
+        height: number
+      }
+    ]
+  >
 
-type InnerFlexSlots = {
-  default: {
-    reflow: () => void
-    width: number
-    height: number
-  }
+  onreflow?: (event: { width: number; height: number }) => void
 }
 
-export default class InnerFlex extends SvelteComponent<
-  InnerFlexProps,
-  InnerFlexEvents,
-  InnerFlexSlots
-> {}
+export default class InnerFlex extends SvelteComponent<InnerFlexProps> {}

package/dist/Flex/context.d.ts

@@ -9,7 +9,7 @@ type FlexContextEvents = {
 };
 type FlexContextNode = {
     node: Node;
-    group: THREE.Group;
+    group: Group;
     props: NodeProps;
 };
 export type FlexContextData = {

package/dist/lib/getRootShift.d.ts

@@ -1,2 +1,3 @@
+import type { Node } from 'yoga-layout';
 /** @returns [mainAxisShift, crossAxisShift] */
 export declare const getRootShift: (rootWidth: number, rootHeight: number, node: Node) => number[] | readonly [number, number];

package/dist/lib/isTopLevelChildNode.d.ts

@@ -1 +1,2 @@
+import type { Node } from 'yoga-layout';
 export declare const isTopLevelChildNode: (node: Node) => boolean;

package/dist/lib/props.d.ts

@@ -1,4 +1,5 @@
 import type { Align, FlexDirection, Justify, Node, Wrap } from 'yoga-layout';
+import * as Yoga from 'yoga-layout';
 export type FlexPlane = 'xy' | 'yz' | 'xz';
 export type ClassParser = (className: string, props: NodeProps) => NodeProps;
 export type Axis = 'x' | 'y' | 'z';
@@ -10,41 +11,50 @@ export type Axis = 'x' | 'y' | 'z';
  * prevent unnecessary reflows.
  */
 export declare const propSetter: {
-    alignItems: (align: keyof typeof Align, node: Node) => any;
-    alignSelf: (align: keyof typeof Align, node: Node) => any;
-    alignContent: (align: keyof typeof Align, node: Node) => any;
-    justifyContent: (justify: keyof typeof Justify, node: Node) => any;
-    flexDirection: (dir: keyof typeof FlexDirection, node: Node) => any;
-    flexWrap: (wrap: keyof typeof Wrap, node: Node) => any;
-    flex: (flex: Parameters<Node['setFlex']>[0], node: Node) => any;
-    flexBasis: (basis: Parameters<Node['setFlexBasis']>[0], node: Node) => any;
-    flexGrow: (grow: Parameters<Node['setFlexGrow']>[0], node: Node) => any;
-    flexShrink: (shrink: Parameters<Node['setFlexShrink']>[0], node: Node) => any;
-    height: (height: Parameters<Node['setHeight']>[0], node: Node) => any;
-    width: (width: Parameters<Node['setWidth']>[0], node: Node) => any;
-    maxHeight: (maxHeight: Parameters<Node['setMaxHeight']>[0], node: Node) => any;
-    maxWidth: (maxWidth: Parameters<Node['setMaxWidth']>[0], node: Node) => any;
-    minHeight: (minHeight: Parameters<Node['setMinHeight']>[0], node: Node) => any;
-    minWidth: (minWidth: Parameters<Node['setMinWidth']>[0], node: Node) => any;
+    alignItems: (align: keyof typeof Align, node: Node) => void;
+    alignSelf: (align: keyof typeof Align, node: Node) => void;
+    alignContent: (align: keyof typeof Align, node: Node) => void;
+    justifyContent: (justify: keyof typeof Justify, node: Node) => void;
+    flexDirection: (dir: keyof typeof FlexDirection, node: Node) => void;
+    flexWrap: (wrap: keyof typeof Wrap, node: Node) => void;
+    flex: (flex: Parameters<Node['setFlex']>[0], node: Node) => void;
+    flexBasis: (basis: Parameters<Node['setFlexBasis']>[0], node: Node) => void;
+    flexGrow: (grow: Parameters<Node['setFlexGrow']>[0], node: Node) => void;
+    flexShrink: (shrink: Parameters<Node['setFlexShrink']>[0], node: Node) => void;
+    height: (height: Parameters<Node['setHeight']>[0], node: Node) => void;
+    width: (width: Parameters<Node['setWidth']>[0], node: Node) => void;
+    maxHeight: (maxHeight: Parameters<Node['setMaxHeight']>[0], node: Node) => void;
+    maxWidth: (maxWidth: Parameters<Node['setMaxWidth']>[0], node: Node) => void;
+    minHeight: (minHeight: Parameters<Node['setMinHeight']>[0], node: Node) => void;
+    minWidth: (minWidth: Parameters<Node['setMinWidth']>[0], node: Node) => void;
     /** As of now, this won't work since the bounding box is still computed by nodes marked as absolutely positioned  */
-    top: (top: Parameters<Node['setPosition']>[1], node: Node) => any;
-    right: (right: Parameters<Node['setPosition']>[1], node: Node) => any;
-    bottom: (bottom: Parameters<Node['setPosition']>[1], node: Node) => any;
-    left: (left: Parameters<Node['setPosition']>[1], node: Node) => any;
-    padding: (padding: Parameters<Node['setPadding']>[1], node: Node) => any;
-    paddingTop: (paddingTop: Parameters<Node['setPadding']>[1], node: Node) => any;
-    paddingRight: (paddingRight: Parameters<Node['setPadding']>[1], node: Node) => any;
-    paddingBottom: (paddingBottom: Parameters<Node['setPadding']>[1], node: Node) => any;
-    paddingLeft: (paddingLeft: Parameters<Node['setPadding']>[1], node: Node) => any;
-    margin: (margin: Parameters<Node['setMargin']>[1], node: Node) => any;
-    marginTop: (marginTop: Parameters<Node['setMargin']>[1], node: Node) => any;
-    marginRight: (marginRight: Parameters<Node['setMargin']>[1], node: Node) => any;
-    marginBottom: (marginBottom: Parameters<Node['setMargin']>[1], node: Node) => any;
-    marginLeft: (marginLeft: Parameters<Node['setMargin']>[1], node: Node) => any;
-    gap: (gap: Parameters<Node['setGap']>[1], node: Node) => any;
-    gapColumn: (gapColumn: Parameters<Node['setGap']>[1], node: Node) => any;
-    gapRow: (gapRow: Parameters<Node['setGap']>[1], node: Node) => any;
-    aspectRatio: (aspectRatio: Parameters<Node['setAspectRatio']>[0], node: Node) => any;
+    top: (top: Parameters<Node['setPosition']>[1], node: Node) => void;
+    right: (right: Parameters<Node['setPosition']>[1], node: Node) => void;
+    bottom: (bottom: Parameters<Node['setPosition']>[1], node: Node) => void;
+    left: (left: Parameters<Node['setPosition']>[1], node: Node) => void;
+    padding: (padding: Parameters<Node['setPadding']>[1], node: Node) => void;
+    paddingTop: (paddingTop: Parameters<Node['setPadding']>[1], node: Node) => void;
+    paddingRight: (paddingRight: Parameters<Node['setPadding']>[1], node: Node) => void;
+    paddingBottom: (paddingBottom: Parameters<Node['setPadding']>[1], node: Node) => void;
+    paddingLeft: (paddingLeft: Parameters<Node['setPadding']>[1], node: Node) => void;
+    margin: (margin: Parameters<Node['setMargin']>[1], node: Node) => void;
+    marginTop: (marginTop: Parameters<Node['setMargin']>[1], node: Node) => void;
+    marginRight: (marginRight: Parameters<Node['setMargin']>[1], node: Node) => void;
+    marginBottom: (marginBottom: Parameters<Node['setMargin']>[1], node: Node) => void;
+    marginLeft: (marginLeft: Parameters<Node['setMargin']>[1], node: Node) => void;
+    gap: (gap: Parameters<Node['setGap']>[1], node: Node) => {
+        unit: Yoga.Unit;
+        value: number;
+    };
+    gapColumn: (gapColumn: Parameters<Node['setGap']>[1], node: Node) => {
+        unit: Yoga.Unit;
+        value: number;
+    };
+    gapRow: (gapRow: Parameters<Node['setGap']>[1], node: Node) => {
+        unit: Yoga.Unit;
+        value: number;
+    };
+    aspectRatio: (aspectRatio: Parameters<Node['setAspectRatio']>[0], node: Node) => void;
 };
 export type NodeProps = {
     [Key in keyof typeof propSetter]?: Parameters<(typeof propSetter)[Key]>[0];

package/dist/lib/propsChanged.d.ts

@@ -1,3 +1,4 @@
+import type { Node } from 'yoga-layout';
 import type { NodeProps } from './props';
 /**
  * Because all NodeProps are primitive types, we can make a simple comparison

package/package.json

@@ -1,45 +1,63 @@
 {
   "name": "@threlte/flex",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.10",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
+  "description": "Components to easily use the flexbox spec with Threlte",
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.4.3",
-    "@sveltejs/package": "^2.2.6",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/node": "^20.11.6",
-    "@types/three": "^0.160.0",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@sveltejs/adapter-auto": "^3.2.0",
+    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@types/node": "^20.12.7",
+    "@types/three": "^0.169.0",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
     "@yushijinhun/three-minifier-rollup": "^0.4.0",
-    "eslint": "^8.56.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.35.1",
-    "prettier": "^3.2.4",
-    "prettier-plugin-svelte": "^3.1.2",
+    "eslint-plugin-svelte": "^2.36.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
     "publint": "^0.2.7",
     "rimraf": "^5.0.5",
-    "svelte": "^4.2.9",
-    "svelte-check": "^3.6.3",
+    "svelte": "^5.1.6",
+    "svelte-check": "^3.6.9",
     "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.7.0",
-    "three": "^0.160.1",
+    "svelte2tsx": "^0.7.6",
+    "three": "^0.169.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "@threlte/core": "8.0.0-next.0",
-    "@threlte/extras": "9.0.0-next.0"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "@threlte/core": "8.0.0-next.23",
+    "@threlte/extras": "9.0.0-next.32"
   },
   "dependencies": {
     "mitt": "^3.0.1",
-    "yoga-layout": "^2.0.1"
+    "yoga-layout": "^3.1.0"
   },
   "peerDependencies": {
-    "svelte": ">=4",
-    "three": ">=0.152"
+    "svelte": ">=5",
+    "three": ">=0.155"
   },
   "type": "module",
+  "keywords": [
+    "flex",
+    "threlte",
+    "svelte",
+    "three",
+    "three.js",
+    "3d"
+  ],
+  "homepage": "https://threlte.xyz",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/threlte/threlte.git",
+    "directory": "packages/flex"
+  },
+  "bugs": {
+    "url": "https://github.com/threlte/threlte/issues"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -56,8 +74,8 @@
     "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",
-    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
-    "format": "prettier --write --plugin-search-dir=. .",
+    "lint": "prettier --check .",
+    "format": "prettier --write .",
     "cleanup": "rimraf node_modules .svelte-kit dist"
   }
 }