@threlte/flex 0.0.5 → 0.0.6

package/dist/Box/Box.svelte

@@ -12,8 +12,8 @@ export const contentGroup = new Group();
 group.userData.isNode = true;
 export const { node } = createNodeContext(order);
 addNode(node, group, $$restProps);
-updateNodeProps(node, { ...classParser?.(_class), ...$$restProps }, true);
-$: updateNodeProps(node, { ...classParser?.(_class), ...$$restProps });
+updateNodeProps(node, { ...classParser?.(_class, {}), ...$$restProps }, true);
+$: updateNodeProps(node, { ...classParser?.(_class, {}), ...$$restProps });
 onDestroy(() => {
     removeNode(node);
 });

package/dist/Flex/InnerFlex.svelte

@@ -120,7 +120,8 @@ const flexContext = createFlexContext({
 const { mainAxis, crossAxis, depthAxis } = flexContext;
 const { node: rootNode } = createNodeContext();
 $: rootNode.setWidth(width * scaleFactor), rootNode.setHeight(height * scaleFactor);
-$: applyNodeProps(rootNode, { ...classParser?.(_class), ...$$restProps }, scaleFactor), reflow();
+$: applyNodeProps(rootNode, { ...classParser?.(_class, {}), ...$$restProps }, scaleFactor),
+    reflow();
 $: flexContext.rootWidth.set(width), flexContext.reflow('Updated root width');
 $: flexContext.rootHeight.set(height), flexContext.reflow('Updated root height');
 $: flexContext.mainAxis.set(plane[0]), flexContext.reflow('Updated main axis');

package/dist/lib/props.d.ts

@@ -1,6 +1,6 @@
 import type { Align, FlexDirection, Justify, Node, Wrap } from 'yoga-layout';
 export type FlexPlane = 'xy' | 'yz' | 'xz';
-export type ClassParser = (className: string) => NodeProps;
+export type ClassParser = (className: string, props: NodeProps) => NodeProps;
 export type Axis = 'x' | 'y' | 'z';
 /**
  * This map provides the prop setters as well as the types for the props. The

package/dist/parsers/createClassParser.d.ts

@@ -1,8 +1,8 @@
-import type { NodeProps } from '../lib/props';
+import type { ClassParser } from '../lib/props';
 /**
  * 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
  * be used to create Tailwind-like class names that resolve to yoga-layout
  * props.
  */
-export declare const createClassParser: (callback: (className: string) => NodeProps) => (className: string) => NodeProps;
+export declare const createClassParser: (callback: ClassParser) => ClassParser;

package/dist/parsers/tailwindParser.d.ts

@@ -1,2 +1 @@
-import type { NodeProps } from '../lib/props';
-export declare const tailwindParser: (className: string) => NodeProps;
+export declare const tailwindParser: import("../lib/props").ClassParser;

package/dist/parsers/tailwindParser.js

@@ -1,6 +1,5 @@
 import { createClassParser } from './createClassParser';
-export const tailwindParser = createClassParser((string) => {
-    const styles = {};
+export const tailwindParser = createClassParser((string, props) => {
     const classes = string.split(' ').map((className) => className.trim());
     const parseNumericOrAutoOrPercentageValue = (value) => {
         if (value === 'auto') {
@@ -37,141 +36,141 @@ export const tailwindParser = createClassParser((string) => {
         // padding
         if (className.startsWith('p-')) {
             const [, value] = className.split('-');
-            styles.padding = parseNumericOrPercentageValue(value);
+            props.padding = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('px-')) {
             const [, value] = className.split('-');
-            styles.paddingLeft = parseNumericOrPercentageValue(value);
-            styles.paddingRight = parseNumericOrPercentageValue(value);
+            props.paddingLeft = parseNumericOrPercentageValue(value);
+            props.paddingRight = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('py-')) {
             const [, value] = className.split('-');
-            styles.paddingTop = parseNumericOrPercentageValue(value);
-            styles.paddingBottom = parseNumericOrPercentageValue(value);
+            props.paddingTop = parseNumericOrPercentageValue(value);
+            props.paddingBottom = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('pt-')) {
             const [, value] = className.split('-');
-            styles.paddingTop = parseNumericOrPercentageValue(value);
+            props.paddingTop = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('pr-')) {
             const [, value] = className.split('-');
-            styles.paddingRight = parseNumericOrPercentageValue(value);
+            props.paddingRight = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('pb-')) {
             const [, value] = className.split('-');
-            styles.paddingBottom = parseNumericOrPercentageValue(value);
+            props.paddingBottom = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('pl-')) {
             const [, value] = className.split('-');
-            styles.paddingLeft = parseNumericOrPercentageValue(value);
+            props.paddingLeft = parseNumericOrPercentageValue(value);
         }
         // margin
         if (className.startsWith('m-')) {
             const [, value] = className.split('-');
-            styles.margin = parseNumericOrAutoOrPercentageValue(value);
+            props.margin = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('mx-')) {
             const [, value] = className.split('-');
-            styles.marginLeft = parseNumericOrAutoOrPercentageValue(value);
-            styles.marginRight = parseNumericOrAutoOrPercentageValue(value);
+            props.marginLeft = parseNumericOrAutoOrPercentageValue(value);
+            props.marginRight = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('my-')) {
             const [, value] = className.split('-');
-            styles.marginTop = parseNumericOrAutoOrPercentageValue(value);
-            styles.marginBottom = parseNumericOrAutoOrPercentageValue(value);
+            props.marginTop = parseNumericOrAutoOrPercentageValue(value);
+            props.marginBottom = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('mt-')) {
             const [, value] = className.split('-');
-            styles.marginTop = parseNumericOrAutoOrPercentageValue(value);
+            props.marginTop = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('mr-')) {
             const [, value] = className.split('-');
-            styles.marginRight = parseNumericOrAutoOrPercentageValue(value);
+            props.marginRight = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('mb-')) {
             const [, value] = className.split('-');
-            styles.marginBottom = parseNumericOrAutoOrPercentageValue(value);
+            props.marginBottom = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('ml-')) {
             const [, value] = className.split('-');
-            styles.marginLeft = parseNumericOrAutoOrPercentageValue(value);
+            props.marginLeft = parseNumericOrAutoOrPercentageValue(value);
         }
         // width
         if (className.startsWith('w-')) {
             const [, value] = className.split('-');
-            styles.width = parseNumericOrAutoOrPercentageValue(value);
+            props.width = parseNumericOrAutoOrPercentageValue(value);
         }
         // height
         if (className.startsWith('h-')) {
             const [, value] = className.split('-');
-            styles.height = parseNumericOrAutoOrPercentageValue(value);
+            props.height = parseNumericOrAutoOrPercentageValue(value);
         }
         // flex-basis
         if (className.startsWith('basis-')) {
             const [, value] = className.split('-');
-            styles.flexBasis = parseNumericOrAutoOrPercentageValue(value);
+            props.flexBasis = parseNumericOrAutoOrPercentageValue(value);
         }
         // flex-grow
         if (className.startsWith('grow-')) {
             const [, value] = className.split('-');
-            styles.flexGrow = Number(value);
+            props.flexGrow = Number(value);
         }
         // flex-shrink
         if (className.startsWith('shrink-')) {
             const [, value] = className.split('-');
-            styles.flexShrink = Number(value);
+            props.flexShrink = Number(value);
         }
         // flex-direction
         if (className.startsWith('flex-')) {
             // first the flex direction
             switch (className) {
                 case 'flex-row':
-                    styles.flexDirection = 'Row';
+                    props.flexDirection = 'Row';
                     break;
                 case 'flex-row-reverse':
-                    styles.flexDirection = 'RowReverse';
+                    props.flexDirection = 'RowReverse';
                     break;
                 case 'flex-col':
-                    styles.flexDirection = 'Column';
+                    props.flexDirection = 'Column';
                     break;
                 case 'flex-col-reverse':
-                    styles.flexDirection = 'ColumnReverse';
+                    props.flexDirection = 'ColumnReverse';
                     break;
                 case 'flex-wrap':
-                    styles.flexWrap = 'Wrap';
+                    props.flexWrap = 'Wrap';
                     break;
                 case 'flex-wrap-reverse':
-                    styles.flexWrap = 'WrapReverse';
+                    props.flexWrap = 'WrapReverse';
                     break;
                 case 'flex-nowrap':
-                    styles.flexWrap = 'NoWrap';
+                    props.flexWrap = 'NoWrap';
                     break;
                 default:
                     // flex shorthand
                     const [, value] = className.split('-');
-                    styles.flex = Number(value);
+                    props.flex = Number(value);
             }
         }
         // justify-content
         if (className.startsWith('justify-')) {
             switch (className) {
                 case 'justify-start':
-                    styles.justifyContent = 'FlexStart';
+                    props.justifyContent = 'FlexStart';
                     break;
                 case 'justify-end':
-                    styles.justifyContent = 'FlexEnd';
+                    props.justifyContent = 'FlexEnd';
                     break;
                 case 'justify-center':
-                    styles.justifyContent = 'Center';
+                    props.justifyContent = 'Center';
                     break;
                 case 'justify-between':
-                    styles.justifyContent = 'SpaceBetween';
+                    props.justifyContent = 'SpaceBetween';
                     break;
                 case 'justify-around':
-                    styles.justifyContent = 'SpaceAround';
+                    props.justifyContent = 'SpaceAround';
                     break;
                 case 'justify-evenly':
-                    styles.justifyContent = 'SpaceEvenly';
+                    props.justifyContent = 'SpaceEvenly';
                     break;
             }
         }
@@ -179,19 +178,19 @@ export const tailwindParser = createClassParser((string) => {
         if (className.startsWith('items-')) {
             switch (className) {
                 case 'items-start':
-                    styles.alignItems = 'FlexStart';
+                    props.alignItems = 'FlexStart';
                     break;
                 case 'items-end':
-                    styles.alignItems = 'FlexEnd';
+                    props.alignItems = 'FlexEnd';
                     break;
                 case 'items-center':
-                    styles.alignItems = 'Center';
+                    props.alignItems = 'Center';
                     break;
                 case 'items-baseline':
-                    styles.alignItems = 'Baseline';
+                    props.alignItems = 'Baseline';
                     break;
                 case 'items-stretch':
-                    styles.alignItems = 'Stretch';
+                    props.alignItems = 'Stretch';
                     break;
             }
         }
@@ -199,28 +198,28 @@ export const tailwindParser = createClassParser((string) => {
         if (className.startsWith('content-')) {
             switch (className) {
                 case 'content-normal':
-                    styles.alignContent = 'Auto';
+                    props.alignContent = 'Auto';
                     break;
                 case 'content-start':
-                    styles.alignContent = 'FlexStart';
+                    props.alignContent = 'FlexStart';
                     break;
                 case 'content-end':
-                    styles.alignContent = 'FlexEnd';
+                    props.alignContent = 'FlexEnd';
                     break;
                 case 'content-center':
-                    styles.alignContent = 'Center';
+                    props.alignContent = 'Center';
                     break;
                 case 'content-between':
-                    styles.alignContent = 'SpaceBetween';
+                    props.alignContent = 'SpaceBetween';
                     break;
                 case 'content-around':
-                    styles.alignContent = 'SpaceAround';
+                    props.alignContent = 'SpaceAround';
                     break;
                 case 'content-stretch':
-                    styles.alignContent = 'Stretch';
+                    props.alignContent = 'Stretch';
                     break;
                 case 'content-baseline':
-                    styles.alignContent = 'Baseline';
+                    props.alignContent = 'Baseline';
                     break;
             }
         }
@@ -228,73 +227,73 @@ export const tailwindParser = createClassParser((string) => {
         if (className.startsWith('self-')) {
             switch (className) {
                 case 'self-auto':
-                    styles.alignSelf = 'Auto';
+                    props.alignSelf = 'Auto';
                     break;
                 case 'self-start':
-                    styles.alignSelf = 'FlexStart';
+                    props.alignSelf = 'FlexStart';
                     break;
                 case 'self-end':
-                    styles.alignSelf = 'FlexEnd';
+                    props.alignSelf = 'FlexEnd';
                     break;
                 case 'self-center':
-                    styles.alignSelf = 'Center';
+                    props.alignSelf = 'Center';
                     break;
                 case 'self-stretch':
-                    styles.alignSelf = 'Stretch';
+                    props.alignSelf = 'Stretch';
                     break;
                 case 'self-baseline':
-                    styles.alignSelf = 'Baseline';
+                    props.alignSelf = 'Baseline';
                     break;
             }
         }
         // Gaps
         if (className.startsWith('gap-x-')) {
             const [, value] = className.split('-');
-            styles.gapColumn = Number(value);
+            props.gapColumn = Number(value);
         }
         else if (className.startsWith('gap-y-')) {
             const [, value] = className.split('-');
-            styles.gapRow = Number(value);
+            props.gapRow = Number(value);
         }
         else if (className.startsWith('gap-')) {
             const [, value] = className.split('-');
-            styles.gap = Number(value);
+            props.gap = Number(value);
         }
         // Position
         if (className.startsWith('top-')) {
             const [, value] = className.split('-');
-            styles.top = parseNumericOrPercentageValue(value);
+            props.top = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('right-')) {
             const [, value] = className.split('-');
-            styles.right = parseNumericOrPercentageValue(value);
+            props.right = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('bottom-')) {
             const [, value] = className.split('-');
-            styles.bottom = parseNumericOrPercentageValue(value);
+            props.bottom = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('left-')) {
             const [, value] = className.split('-');
-            styles.left = parseNumericOrPercentageValue(value);
+            props.left = parseNumericOrPercentageValue(value);
         }
         // aspect ratio
         if (className.startsWith('aspect-')) {
             switch (className) {
                 case 'aspect-square':
-                    styles.aspectRatio = 1;
+                    props.aspectRatio = 1;
                     break;
                 case 'aspect-landscape':
-                    styles.aspectRatio = 16 / 9;
+                    props.aspectRatio = 16 / 9;
                     break;
                 case 'aspect-portrait':
-                    styles.aspectRatio = 9 / 16;
+                    props.aspectRatio = 9 / 16;
                     break;
                 default:
                     const [, value] = className.split('-');
                     const [width, height] = value.split('/');
-                    styles.aspectRatio = Number(width) / Number(height);
+                    props.aspectRatio = Number(width) / Number(height);
             }
         }
     });
-    return styles;
+    return props;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/flex",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "devDependencies": {