@threlte/flex 2.0.0-next.5 → 2.0.0-next.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/Flex/Flex.svelte +1 -1
  2. package/dist/lib/getRootShift.d.ts +1 -0
  3. package/dist/lib/isTopLevelChildNode.d.ts +1 -0
  4. package/dist/lib/props.d.ts +44 -34
  5. package/dist/lib/propsChanged.d.ts +1 -0
  6. package/package.json +4 -4
package/dist/Flex/Flex.svelte CHANGED
@@ -1,4 +1,4 @@
1
- <script lang="ts">import { loadYoga } from 'yoga-layout';
1
+ <script lang="ts">import { loadYoga } from 'yoga-layout/load';
2
2
  import InnerFlex from './InnerFlex.svelte';
3
3
  let { children: innerChildren, ...props } = $props();
4
4
  let yoga = $state(undefined);
package/dist/lib/getRootShift.d.ts CHANGED
@@ -1,2 +1,3 @@
1
+ import type { Node } from 'yoga-layout';
1
2
  /** @returns [mainAxisShift, crossAxisShift] */
2
3
  export declare const getRootShift: (rootWidth: number, rootHeight: number, node: Node) => number[] | readonly [number, number];
package/dist/lib/isTopLevelChildNode.d.ts CHANGED
@@ -1 +1,2 @@
1
+ import type { Node } from 'yoga-layout';
1
2
  export declare const isTopLevelChildNode: (node: Node) => boolean;
package/dist/lib/props.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { Align, FlexDirection, Justify, Node, Wrap } from 'yoga-layout';
2
+ import * as Yoga from 'yoga-layout';
2
3
  export type FlexPlane = 'xy' | 'yz' | 'xz';
3
4
  export type ClassParser = (className: string, props: NodeProps) => NodeProps;
4
5
  export type Axis = 'x' | 'y' | 'z';
@@ -10,41 +11,50 @@ export type Axis = 'x' | 'y' | 'z';
10
11
  * prevent unnecessary reflows.
11
12
  */
12
13
  export declare const propSetter: {
13
- alignItems: (align: keyof typeof Align, node: Node) => any;
14
- alignSelf: (align: keyof typeof Align, node: Node) => any;
15
- alignContent: (align: keyof typeof Align, node: Node) => any;
16
- justifyContent: (justify: keyof typeof Justify, node: Node) => any;
17
- flexDirection: (dir: keyof typeof FlexDirection, node: Node) => any;
18
- flexWrap: (wrap: keyof typeof Wrap, node: Node) => any;
19
- flex: (flex: Parameters<Node['setFlex']>[0], node: Node) => any;
20
- flexBasis: (basis: Parameters<Node['setFlexBasis']>[0], node: Node) => any;
21
- flexGrow: (grow: Parameters<Node['setFlexGrow']>[0], node: Node) => any;
22
- flexShrink: (shrink: Parameters<Node['setFlexShrink']>[0], node: Node) => any;
23
- height: (height: Parameters<Node['setHeight']>[0], node: Node) => any;
24
- width: (width: Parameters<Node['setWidth']>[0], node: Node) => any;
25
- maxHeight: (maxHeight: Parameters<Node['setMaxHeight']>[0], node: Node) => any;
26
- maxWidth: (maxWidth: Parameters<Node['setMaxWidth']>[0], node: Node) => any;
27
- minHeight: (minHeight: Parameters<Node['setMinHeight']>[0], node: Node) => any;
28
- minWidth: (minWidth: Parameters<Node['setMinWidth']>[0], node: Node) => any;
14
+ alignItems: (align: keyof typeof Align, node: Node) => void;
15
+ alignSelf: (align: keyof typeof Align, node: Node) => void;
16
+ alignContent: (align: keyof typeof Align, node: Node) => void;
17
+ justifyContent: (justify: keyof typeof Justify, node: Node) => void;
18
+ flexDirection: (dir: keyof typeof FlexDirection, node: Node) => void;
19
+ flexWrap: (wrap: keyof typeof Wrap, node: Node) => void;
20
+ flex: (flex: Parameters<Node['setFlex']>[0], node: Node) => void;
21
+ flexBasis: (basis: Parameters<Node['setFlexBasis']>[0], node: Node) => void;
22
+ flexGrow: (grow: Parameters<Node['setFlexGrow']>[0], node: Node) => void;
23
+ flexShrink: (shrink: Parameters<Node['setFlexShrink']>[0], node: Node) => void;
24
+ height: (height: Parameters<Node['setHeight']>[0], node: Node) => void;
25
+ width: (width: Parameters<Node['setWidth']>[0], node: Node) => void;
26
+ maxHeight: (maxHeight: Parameters<Node['setMaxHeight']>[0], node: Node) => void;
27
+ maxWidth: (maxWidth: Parameters<Node['setMaxWidth']>[0], node: Node) => void;
28
+ minHeight: (minHeight: Parameters<Node['setMinHeight']>[0], node: Node) => void;
29
+ minWidth: (minWidth: Parameters<Node['setMinWidth']>[0], node: Node) => void;
29
30
  /** As of now, this won't work since the bounding box is still computed by nodes marked as absolutely positioned */
30
- top: (top: Parameters<Node['setPosition']>[1], node: Node) => any;
31
- right: (right: Parameters<Node['setPosition']>[1], node: Node) => any;
32
- bottom: (bottom: Parameters<Node['setPosition']>[1], node: Node) => any;
33
- left: (left: Parameters<Node['setPosition']>[1], node: Node) => any;
34
- padding: (padding: Parameters<Node['setPadding']>[1], node: Node) => any;
35
- paddingTop: (paddingTop: Parameters<Node['setPadding']>[1], node: Node) => any;
36
- paddingRight: (paddingRight: Parameters<Node['setPadding']>[1], node: Node) => any;
37
- paddingBottom: (paddingBottom: Parameters<Node['setPadding']>[1], node: Node) => any;
38
- paddingLeft: (paddingLeft: Parameters<Node['setPadding']>[1], node: Node) => any;
39
- margin: (margin: Parameters<Node['setMargin']>[1], node: Node) => any;
40
- marginTop: (marginTop: Parameters<Node['setMargin']>[1], node: Node) => any;
41
- marginRight: (marginRight: Parameters<Node['setMargin']>[1], node: Node) => any;
42
- marginBottom: (marginBottom: Parameters<Node['setMargin']>[1], node: Node) => any;
43
- marginLeft: (marginLeft: Parameters<Node['setMargin']>[1], node: Node) => any;
44
- gap: (gap: Parameters<Node['setGap']>[1], node: Node) => any;
45
- gapColumn: (gapColumn: Parameters<Node['setGap']>[1], node: Node) => any;
46
- gapRow: (gapRow: Parameters<Node['setGap']>[1], node: Node) => any;
47
- aspectRatio: (aspectRatio: Parameters<Node['setAspectRatio']>[0], node: Node) => any;
31
+ top: (top: Parameters<Node['setPosition']>[1], node: Node) => void;
32
+ right: (right: Parameters<Node['setPosition']>[1], node: Node) => void;
33
+ bottom: (bottom: Parameters<Node['setPosition']>[1], node: Node) => void;
34
+ left: (left: Parameters<Node['setPosition']>[1], node: Node) => void;
35
+ padding: (padding: Parameters<Node['setPadding']>[1], node: Node) => void;
36
+ paddingTop: (paddingTop: Parameters<Node['setPadding']>[1], node: Node) => void;
37
+ paddingRight: (paddingRight: Parameters<Node['setPadding']>[1], node: Node) => void;
38
+ paddingBottom: (paddingBottom: Parameters<Node['setPadding']>[1], node: Node) => void;
39
+ paddingLeft: (paddingLeft: Parameters<Node['setPadding']>[1], node: Node) => void;
40
+ margin: (margin: Parameters<Node['setMargin']>[1], node: Node) => void;
41
+ marginTop: (marginTop: Parameters<Node['setMargin']>[1], node: Node) => void;
42
+ marginRight: (marginRight: Parameters<Node['setMargin']>[1], node: Node) => void;
43
+ marginBottom: (marginBottom: Parameters<Node['setMargin']>[1], node: Node) => void;
44
+ marginLeft: (marginLeft: Parameters<Node['setMargin']>[1], node: Node) => void;
45
+ gap: (gap: Parameters<Node['setGap']>[1], node: Node) => {
46
+ unit: Yoga.Unit;
47
+ value: number;
48
+ };
49
+ gapColumn: (gapColumn: Parameters<Node['setGap']>[1], node: Node) => {
50
+ unit: Yoga.Unit;
51
+ value: number;
52
+ };
53
+ gapRow: (gapRow: Parameters<Node['setGap']>[1], node: Node) => {
54
+ unit: Yoga.Unit;
55
+ value: number;
56
+ };
57
+ aspectRatio: (aspectRatio: Parameters<Node['setAspectRatio']>[0], node: Node) => void;
48
58
  };
49
59
  export type NodeProps = {
50
60
  [Key in keyof typeof propSetter]?: Parameters<(typeof propSetter)[Key]>[0];
package/dist/lib/propsChanged.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { Node } from 'yoga-layout';
1
2
  import type { NodeProps } from './props';
2
3
  /**
3
4
  * Because all NodeProps are primitive types, we can make a simple comparison
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threlte/flex",
3
- "version": "2.0.0-next.5",
3
+ "version": "2.0.0-next.6",
4
4
  "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
5
5
  "license": "MIT",
6
6
  "description": "Components to easily use the flexbox spec with Threlte",
@@ -29,12 +29,12 @@
29
29
  "tslib": "^2.6.2",
30
30
  "typescript": "^5.4.5",
31
31
  "vite": "^5.2.8",
32
- "@threlte/core": "8.0.0-next.12",
33
- "@threlte/extras": "9.0.0-next.17"
32
+ "@threlte/core": "8.0.0-next.16",
33
+ "@threlte/extras": "9.0.0-next.22"
34
34
  },
35
35
  "dependencies": {
36
36
  "mitt": "^3.0.1",
37
- "yoga-layout": "^2.0.1"
37
+ "yoga-layout": "^3.1.0"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "svelte": ">=5",