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

package/dist/Box/Box.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">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 lang="ts">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

@@ -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

@@ -0,0 +1,39 @@
+import type { CurrentWritable } from '@threlte/core';
+import { type Emitter } from 'mitt';
+import type { Group } from 'three';
+import type { Node, Yoga } from 'yoga-layout';
+import type { Axis, ClassParser, NodeProps } from '../lib/props';
+type FlexContextEvents = {
+    'reflow:before': void;
+    'reflow:after': void;
+};
+type FlexContextNode = {
+    node: Node;
+    group: Group;
+    props: NodeProps;
+};
+export type FlexContextData = {
+    yoga: Yoga;
+    nodes: Map<Node, FlexContextNode>;
+    addNode: (node: Node, group: Group, props: NodeProps) => void;
+    updateNodeProps: (node: Node, props: NodeProps, force?: boolean) => void;
+    removeNode: (node: Node) => void;
+    scaleFactor: CurrentWritable<number>;
+    mainAxis: CurrentWritable<Axis>;
+    crossAxis: CurrentWritable<Axis>;
+    depthAxis: CurrentWritable<Axis>;
+    rootGroup: Group;
+    rootWidth: CurrentWritable<number>;
+    rootHeight: CurrentWritable<number>;
+    reflow: () => void;
+    classParser?: ClassParser;
+};
+export type FlexContext = FlexContextData & Emitter<FlexContextEvents> & {
+    onEvent: <Type extends keyof FlexContextEvents>(type: Type, callback: (payload: FlexContextEvents[Type]) => void) => void;
+};
+export declare const flexContextName = "__threlte-flex";
+export declare const createFlexContext: (data: FlexContextData) => FlexContextData & Emitter<FlexContextEvents> & {
+    onEvent: <Type extends keyof FlexContextEvents>(type: Type, callback: (payload: FlexContextEvents[Type]) => void) => void;
+};
+export declare const useFlex: () => FlexContext;
+export {};

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,15 +1,16 @@
 {
   "name": "@threlte/flex",
-  "version": "2.0.0-next.1",
+  "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.2.0",
-    "@sveltejs/kit": "^2.5.5",
-    "@sveltejs/package": "^2.3.1",
+    "@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.163.0",
+    "@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",
@@ -20,26 +21,43 @@
     "prettier-plugin-svelte": "^3.2.2",
     "publint": "^0.2.7",
     "rimraf": "^5.0.5",
-    "svelte": "^5.0.0-next.95",
+    "svelte": "^5.1.6",
     "svelte-check": "^3.6.9",
     "svelte-preprocess": "^5.1.3",
     "svelte2tsx": "^0.7.6",
-    "three": "^0.163.0",
+    "three": "^0.169.0",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
     "vite": "^5.2.8",
-    "@threlte/core": "8.0.0-next.2",
-    "@threlte/extras": "9.0.0-next.2"
+    "@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": ">=5",
-    "three": ">=0.152"
+    "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"
   }
 }