@threlte/flex 2.0.0-next.9 → 2.0.1

package/README.md

@@ -33,13 +33,7 @@ Check out our **[documentation](https://threlte.xyz)** and our **[Discord commun
 
 ### Installation
 
-For a quick interactive setup of a fresh Threlte project, run:
-
-```sh
-npm create threlte my-project
-```
-
-Alternatively you can check out the full [installation instructions](https://threlte.xyz/docs/learn/getting-started/installation).
+Check out the [installation instructions](https://threlte.xyz/docs/learn/getting-started/installation).
 
 ### Tutorial
 

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

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

package/dist/Box/types.d.ts

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

package/dist/Box/types.js

@@ -0,0 +1 @@
+import {} from 'svelte';

package/dist/Flex/Flex.svelte

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

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

@@ -1,7 +1,3 @@
-import { SvelteComponent } from 'svelte'
-import type { ComponentProps } from 'svelte'
-import type InnerFlex from './InnerFlex.svelte'
-
-type FlexProps = Omit<ComponentProps<InnerFlex>, 'yoga'>
-
-export default class Flex extends SvelteComponent<FlexProps> {}
+import type { FlexProps } from './types';
+declare const Flex: import("svelte").Component<FlexProps, {}, "ref">;
+export default Flex;

package/dist/Flex/InnerFlex.svelte

@@ -11,7 +11,6 @@ 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();
-$inspect(yoga);
 ref = new Group();
 ref.userData.isNode = true;
 const boundingBox = new Box3();

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

@@ -1,32 +1,3 @@
-import type { Stage } from '@threlte/core'
-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
-  width?: number
-  height?: number
-  plane?: FlexPlane
-  direction?: keyof typeof Direction
-  scaleFactor?: number
-  class?: string
-  classParser?: ClassParser
-  reflowStage?: Stage
-  ref?: Group
-
-  children?: Snippet<
-    [
-      {
-        reflow: () => void
-        width: number
-        height: number
-      }
-    ]
-  >
-
-  onreflow?: (event: { width: number; height: number }) => void
-}
-
-export default class InnerFlex extends SvelteComponent<InnerFlexProps> {}
+import type { InnerFlexProps } from './types';
+declare const InnerFlex: import("svelte").Component<InnerFlexProps, {}, "ref">;
+export default InnerFlex;

package/dist/Flex/context.d.ts

@@ -1,7 +1,8 @@
 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 { Node } from 'yoga-layout';
+import type Yoga from 'yoga-layout';
 import type { Axis, ClassParser, NodeProps } from '../lib/props';
 type FlexContextEvents = {
     'reflow:before': void;
@@ -13,7 +14,7 @@ type FlexContextNode = {
     props: NodeProps;
 };
 export type FlexContextData = {
-    yoga: Yoga;
+    yoga: typeof Yoga;
     nodes: Map<Node, FlexContextNode>;
     addNode: (node: Node, group: Group, props: NodeProps) => void;
     updateNodeProps: (node: Node, props: NodeProps, force?: boolean) => void;

package/dist/Flex/context.js

@@ -1,4 +1,4 @@
-import mitt from 'mitt';
+import mitt, {} from 'mitt';
 import { getContext, onDestroy, setContext } from 'svelte';
 export const flexContextName = '__threlte-flex';
 export const createFlexContext = (data) => {

package/dist/Flex/types.d.ts

@@ -0,0 +1,30 @@
+import type { Stage } from '@threlte/core';
+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';
+export type InnerFlexProps = NodeProps & {
+    yoga: typeof Yoga;
+    width?: number;
+    height?: number;
+    plane?: FlexPlane;
+    direction?: keyof typeof Direction;
+    scaleFactor?: number;
+    class?: string;
+    classParser?: ClassParser;
+    reflowStage?: Stage;
+    ref?: Group;
+    children?: Snippet<[
+        {
+            reflow: () => void;
+            width: number;
+            height: number;
+        }
+    ]>;
+    onreflow?: (event: {
+        width: number;
+        height: number;
+    }) => void;
+};
+export type FlexProps = Omit<InnerFlexProps, 'yoga'>;

package/dist/Flex/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/props.d.ts

@@ -17,44 +17,44 @@ export declare const propSetter: {
     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;
+    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) => 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) => {
+    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) => {
+    gapColumn: (gapColumn: Parameters<Node["setGap"]>[1], node: Node) => {
         unit: Yoga.Unit;
         value: number;
     };
-    gapRow: (gapRow: Parameters<Node['setGap']>[1], node: Node) => {
+    gapRow: (gapRow: Parameters<Node["setGap"]>[1], node: Node) => {
         unit: Yoga.Unit;
         value: number;
     };
-    aspectRatio: (aspectRatio: Parameters<Node['setAspectRatio']>[0], node: Node) => void;
+    aspectRatio: (aspectRatio: Parameters<Node["setAspectRatio"]>[0], node: Node) => void;
 };
 export type NodeProps = {
     [Key in keyof typeof propSetter]?: Parameters<(typeof propSetter)[Key]>[0];

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@threlte/flex",
-  "version": "2.0.0-next.9",
+  "version": "2.0.1",
   "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.7.2",
-    "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.7.7",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/node": "^20.12.7",
-    "@types/three": "^0.169.0",
+    "@types/three": "^0.175.0",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
     "@yushijinhun/three-minifier-rollup": "^0.4.0",
@@ -21,20 +21,20 @@
     "prettier-plugin-svelte": "^3.2.2",
     "publint": "^0.2.7",
     "rimraf": "^5.0.5",
-    "svelte": "^5.0.5",
+    "svelte": "^5.26.2",
     "svelte-check": "^3.6.9",
     "svelte-preprocess": "^5.1.3",
     "svelte2tsx": "^0.7.6",
-    "three": "^0.169.0",
+    "three": "^0.175.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.3",
     "vite": "^5.2.8",
-    "@threlte/core": "8.0.0-next.21",
-    "@threlte/extras": "9.0.0-next.28"
+    "@threlte/core": "8.0.2",
+    "@threlte/extras": "9.1.2"
   },
   "dependencies": {
     "mitt": "^3.0.1",
-    "yoga-layout": "^3.1.0"
+    "yoga-layout": "^3.2.1"
   },
   "peerDependencies": {
     "svelte": ">=5",