@threlte/flex 0.0.2 → 0.0.4

package/dist/Box/Box.svelte

@@ -19,6 +19,12 @@ onDestroy(() => {
 });
 let computedWidth = 1;
 let computedHeight = 1;
+/**
+ * Untrack contentGroup
+ */
+const getContentGroup = () => {
+    return contentGroup;
+};
 // after the parent has been reflowed, we can use the calculated layout to set the properties of the box
 onEvent('reflow:after', () => {
     computedWidth =
@@ -29,9 +35,9 @@ onEvent('reflow:after', () => {
         typeof $$restProps.height === 'number'
             ? $$restProps.height
             : node.getComputedHeight() / $scaleFactor;
-    contentGroup.position[$mainAxis] = computedWidth / 2;
-    contentGroup.position[$crossAxis] = -computedHeight / 2;
-    contentGroup.position[$depthAxis] = 0;
+    getContentGroup().position[$mainAxis] = computedWidth / 2;
+    getContentGroup().position[$crossAxis] = -computedHeight / 2;
+    getContentGroup().position[$depthAxis] = 0;
 });
 </script>
 

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

@@ -1,62 +1,18 @@
-import { SvelteComponentTyped } from "svelte";
-import { Group } from 'three';
-declare const __propDef: {
-    props: {
-        group?: Group | undefined;
-        contentGroup?: Group | undefined;
-        node?: any;
-        alignItems?: string | number | symbol | undefined;
-        alignSelf?: string | number | symbol | undefined;
-        alignContent?: string | number | symbol | undefined;
-        justifyContent?: string | number | symbol | undefined;
-        flexDirection?: string | number | symbol | undefined;
-        flexWrap?: string | number | symbol | undefined;
-        flex?: unknown;
-        flexBasis?: unknown;
-        flexGrow?: unknown;
-        flexShrink?: unknown;
-        height?: unknown;
-        width?: unknown;
-        maxHeight?: unknown;
-        maxWidth?: unknown;
-        minHeight?: unknown;
-        minWidth?: unknown;
-        top?: unknown;
-        right?: unknown;
-        bottom?: unknown;
-        left?: unknown;
-        padding?: unknown;
-        paddingTop?: unknown;
-        paddingRight?: unknown;
-        paddingBottom?: unknown;
-        paddingLeft?: unknown;
-        margin?: unknown;
-        marginTop?: unknown;
-        marginRight?: unknown;
-        marginBottom?: unknown;
-        marginLeft?: unknown;
-        gap?: unknown;
-        gapColumn?: unknown;
-        gapRow?: unknown;
-        aspectRatio?: unknown;
-        order?: number | undefined;
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            width: number;
-            height: number;
-        };
-    };
-};
-export type BoxProps = typeof __propDef.props;
-export type BoxEvents = typeof __propDef.events;
-export type BoxSlots = typeof __propDef.slots;
-export default class Box extends SvelteComponentTyped<BoxProps, BoxEvents, BoxSlots> {
-    get group(): Group;
-    get contentGroup(): Group;
+import { SvelteComponent } from 'svelte'
+import type { NodeProps } from '../lib/props'
+
+type BoxProps = NodeProps & {
+  order?: number
+  class?: string
 }
-export {};
+
+type BoxEvents = {}
+
+type BoxSlots = {
+  default: {
+    width: number
+    height: number
+  }
+}
+
+export default class Box extends SvelteComponent<BoxProps, BoxEvents, BoxSlots> {}

package/dist/Flex/Flex.svelte

@@ -1,6 +1,6 @@
 <script>import { forwardEventHandlers } from '@threlte/core';
 import { loadYoga } from 'yoga-layout';
-import InnerFlex from './InnerFlex.svelte';
+import InnerFlex from './Innerflex.svelte';
 let yoga;
 const initialize = async () => {
     yoga = await loadYoga();

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

@@ -1,61 +1,16 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        flex?: unknown;
-        height?: number | undefined;
-        width?: number | undefined;
-        left?: unknown;
-        top?: unknown;
-        alignContent?: string | number | symbol | undefined;
-        alignItems?: string | number | symbol | undefined;
-        alignSelf?: string | number | symbol | undefined;
-        aspectRatio?: unknown;
-        bottom?: unknown;
-        direction?: string | number | symbol | undefined;
-        flexBasis?: unknown;
-        flexDirection?: string | number | symbol | undefined;
-        flexGrow?: unknown;
-        flexShrink?: unknown;
-        flexWrap?: string | number | symbol | undefined;
-        gap?: unknown;
-        justifyContent?: string | number | symbol | undefined;
-        margin?: unknown;
-        marginBottom?: unknown;
-        marginLeft?: unknown;
-        marginRight?: unknown;
-        marginTop?: unknown;
-        maxHeight?: unknown;
-        maxWidth?: unknown;
-        minHeight?: unknown;
-        minWidth?: unknown;
-        padding?: unknown;
-        paddingBottom?: unknown;
-        paddingLeft?: unknown;
-        paddingRight?: unknown;
-        paddingTop?: unknown;
-        right?: unknown;
-        class?: string | undefined;
-        plane?: import("../lib/props").FlexPlane | undefined;
-        gapColumn?: unknown;
-        gapRow?: unknown;
-        scaleFactor?: number | undefined;
-        classParser?: import("../lib/props").ClassParser | undefined;
-    };
-    slots: {
-        default: {
-            reflow: () => void;
-        };
-    };
-    events: {
-        reflow: {
-            width: number;
-            height: number;
-        };
-    };
-};
-export type FlexProps = typeof __propDef.props;
-export type FlexEvents = typeof __propDef.events;
-export type FlexSlots = typeof __propDef.slots;
-export default class Flex extends SvelteComponentTyped<FlexProps, FlexEvents, FlexSlots> {
+import { SvelteComponent } from 'svelte'
+import type { ComponentEvents, 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
+  }
 }
-export {};
+
+export default class Flex extends SvelteComponent<FlexProps, FlexEvents, FlexSlots> {}

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

@@ -1,5 +1,5 @@
-import { SvelteComponentTyped } from "svelte";
-import { type ClassParser, type FlexPlane } from '../lib/props';
+import { SvelteComponent } from "svelte";
+import type { InnerFlexEvents, InnerFlexProps, InnerFlexSlots } from './Innerflex.svelte';
 declare const __propDef: {
     props: {
         alignItems?: string | number | symbol | undefined;
@@ -37,27 +37,20 @@ declare const __propDef: {
         gapRow?: unknown;
         aspectRatio?: unknown;
         yoga: Yoga;
-        plane?: FlexPlane | undefined;
+        plane?: import("../lib/props").FlexPlane | undefined;
         direction?: string | number | symbol | undefined;
         scaleFactor?: number | undefined;
         class?: string | undefined;
-        classParser?: ClassParser | undefined;
-    };
-    slots: {
-        default: {
-            reflow: () => void;
-        };
-    };
-    events: {
-        reflow: {
-            width: number;
-            height: number;
-        };
+        classParser?: import("../lib/props").ClassParser | undefined;
     };
+    slots: InnerFlexSlots;
+    events: InnerFlexEvents;
 };
-export type InnerFlexProps = typeof __propDef.props;
-export type InnerFlexEvents = typeof __propDef.events;
-export type InnerFlexSlots = typeof __propDef.slots;
-export default class InnerFlex extends SvelteComponentTyped<InnerFlexProps, InnerFlexEvents, InnerFlexSlots> {
+type InnerFlexProps_ = typeof __propDef.props;
+export { InnerFlexProps_ as InnerFlexProps };
+type InnerFlexEvents_ = typeof __propDef.events;
+export { InnerFlexEvents_ as InnerFlexEvents };
+type InnerFlexSlots_ = typeof __propDef.slots;
+export { InnerFlexSlots_ as InnerFlexSlots };
+export default class InnerFlex extends SvelteComponent<InnerFlexProps, InnerFlexEvents, InnerFlexSlots> {
 }
-export {};

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

@@ -0,0 +1,34 @@
+import { SvelteComponent } from 'svelte'
+import type { Direction, Yoga } from 'yoga-layout'
+import type { NodeProps } from '../lib/props'
+import type { ClassParser, FlexPlane } from '../lib/props'
+
+type InnerFlexProps = NodeProps & {
+  yoga: Yoga
+  width?: number
+  height?: number
+  plane?: FlexPlane
+  direction?: keyof typeof Direction
+  scaleFactor?: number
+  class?: string
+  classParser?: ClassParser
+}
+
+type InnerFlexEvents = {
+  reflow: {
+    width: number
+    height: number
+  }
+}
+
+type InnerFlexSlots = {
+  default: {
+    reflow: () => void
+  }
+}
+
+export default class InnerFlex extends SvelteComponent<
+  InnerFlexProps,
+  InnerFlexEvents,
+  InnerFlexSlots
+> {}

package/dist/parsers/tailwindParser.js

@@ -127,19 +127,25 @@ export const tailwindParser = createClassParser((string) => {
             switch (className) {
                 case 'flex-row':
                     styles.flexDirection = 'Row';
+                    break;
                 case 'flex-row-reverse':
                     styles.flexDirection = 'RowReverse';
+                    break;
                 case 'flex-col':
                     styles.flexDirection = 'Column';
+                    break;
                 case 'flex-col-reverse':
                     styles.flexDirection = 'ColumnReverse';
-                // flex-wrap
+                    break;
                 case 'flex-wrap':
                     styles.flexWrap = 'Wrap';
+                    break;
                 case 'flex-wrap-reverse':
                     styles.flexWrap = 'WrapReverse';
+                    break;
                 case 'flex-nowrap':
                     styles.flexWrap = 'NoWrap';
+                    break;
                 default:
                     // flex shorthand
                     const [, value] = className.split('-');
@@ -151,16 +157,22 @@ export const tailwindParser = createClassParser((string) => {
             switch (className) {
                 case 'justify-start':
                     styles.justifyContent = 'FlexStart';
+                    break;
                 case 'justify-end':
                     styles.justifyContent = 'FlexEnd';
+                    break;
                 case 'justify-center':
                     styles.justifyContent = 'Center';
+                    break;
                 case 'justify-between':
                     styles.justifyContent = 'SpaceBetween';
+                    break;
                 case 'justify-around':
                     styles.justifyContent = 'SpaceAround';
+                    break;
                 case 'justify-evenly':
                     styles.justifyContent = 'SpaceEvenly';
+                    break;
             }
         }
         // align-items
@@ -168,14 +180,19 @@ export const tailwindParser = createClassParser((string) => {
             switch (className) {
                 case 'items-start':
                     styles.alignItems = 'FlexStart';
+                    break;
                 case 'items-end':
                     styles.alignItems = 'FlexEnd';
+                    break;
                 case 'items-center':
                     styles.alignItems = 'Center';
+                    break;
                 case 'items-baseline':
                     styles.alignItems = 'Baseline';
+                    break;
                 case 'items-stretch':
                     styles.alignItems = 'Stretch';
+                    break;
             }
         }
         // align-content
@@ -183,20 +200,28 @@ export const tailwindParser = createClassParser((string) => {
             switch (className) {
                 case 'content-normal':
                     styles.alignContent = 'Auto';
+                    break;
                 case 'content-start':
                     styles.alignContent = 'FlexStart';
+                    break;
                 case 'content-end':
                     styles.alignContent = 'FlexEnd';
+                    break;
                 case 'content-center':
                     styles.alignContent = 'Center';
+                    break;
                 case 'content-between':
                     styles.alignContent = 'SpaceBetween';
+                    break;
                 case 'content-around':
                     styles.alignContent = 'SpaceAround';
+                    break;
                 case 'content-stretch':
                     styles.alignContent = 'Stretch';
+                    break;
                 case 'content-baseline':
                     styles.alignContent = 'Baseline';
+                    break;
             }
         }
         // align-self
@@ -204,16 +229,22 @@ export const tailwindParser = createClassParser((string) => {
             switch (className) {
                 case 'self-auto':
                     styles.alignSelf = 'Auto';
+                    break;
                 case 'self-start':
                     styles.alignSelf = 'FlexStart';
+                    break;
                 case 'self-end':
                     styles.alignSelf = 'FlexEnd';
+                    break;
                 case 'self-center':
                     styles.alignSelf = 'Center';
+                    break;
                 case 'self-stretch':
                     styles.alignSelf = 'Stretch';
+                    break;
                 case 'self-baseline':
                     styles.alignSelf = 'Baseline';
+                    break;
             }
         }
         // Gaps
@@ -251,10 +282,13 @@ export const tailwindParser = createClassParser((string) => {
             switch (className) {
                 case 'aspect-square':
                     styles.aspectRatio = 1;
+                    break;
                 case 'aspect-landscape':
                     styles.aspectRatio = 16 / 9;
+                    break;
                 case 'aspect-portrait':
                     styles.aspectRatio = 9 / 16;
+                    break;
                 default:
                     const [, value] = className.split('-');
                     const [width, height] = value.split('/');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/flex",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "devDependencies": {
@@ -28,7 +28,7 @@
     "typescript": "^5.0.0",
     "vite": "^4.3.6",
     "@threlte/core": "6.0.8",
-    "@threlte/extras": "5.6.4"
+    "@threlte/extras": "5.7.0"
   },
   "dependencies": {
     "mitt": "^3.0.1",