@threlte/flex 2.0.6 → 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

@@ -2,11 +2,11 @@
   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'
+  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()
 

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

@@ -1,4 +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,7 +1,7 @@
 <script lang="ts">
   import { loadYoga, type Yoga } from 'yoga-layout/load'
   import InnerFlex from './InnerFlex.svelte'
-  import type { FlexProps } from './types'
+  import type { FlexProps } from './types.js'
 
   let { children: innerChildren, ref = $bindable(), ...props }: FlexProps = $props()
 

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

@@ -1,4 +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

@@ -3,15 +3,15 @@
   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'
+  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,

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

@@ -1,4 +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

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,6 +1,6 @@
 {
   "name": "@threlte/flex",
-  "version": "2.0.6",
+  "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",
@@ -28,8 +28,8 @@
     "typescript": "5.9.2",
     "typescript-eslint": "^8.32.0",
     "vite": "^7.1.4",
-    "@threlte/core": "8.1.5",
-    "@threlte/extras": "9.5.4"
+    "@threlte/core": "8.3.0",
+    "@threlte/extras": "9.7.0"
   },
   "dependencies": {
     "mitt": "^3.0.1",