diff --git a/.size-snapshot.json b/.size-snapshot.json index 3c5daaf..121850e 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,21 +1,21 @@ { "index.js": { - "bundled": 14895, - "minified": 7820, - "gzipped": 2675, + "bundled": 16595, + "minified": 8974, + "gzipped": 2897, "treeshaked": { "rollup": { - "code": 126, - "import_statements": 126 + "code": 151, + "import_statements": 151 }, "webpack": { - "code": 1242 + "code": 1300 } } }, "index.cjs.js": { - "bundled": 21462, - "minified": 10644, - "gzipped": 3409 + "bundled": 24156, + "minified": 12326, + "gzipped": 3877 } } diff --git a/examples/config-overrides.js b/examples/config-overrides.js index 1de95d5..bf0d6cc 100644 --- a/examples/config-overrides.js +++ b/examples/config-overrides.js @@ -1,13 +1,26 @@ -const { override, addWebpackAlias, addWebpackPlugin } = require('customize-cra') +const { override, addWebpackAlias, addWebpackPlugin, removeModuleScopePlugin, babelInclude } = require('customize-cra') const { addReactRefresh } = require('customize-cra-react-refresh') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const path = require('path') -module.exports = override( - addReactRefresh(), - addWebpackAlias({ - three$: path.resolve('./src/utils/three.js'), - '../../../build/three.module.js': path.resolve('./src/utils/three.js'), - }), - //addWebpackPlugin(new BundleAnalyzerPlugin()) -) +module.exports = (config, env) => { + config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx'] + return override( + addReactRefresh(), + removeModuleScopePlugin(), + babelInclude([path.resolve('src'), path.resolve('../src')]), + addWebpackAlias({ + 'react-three-flex': path.resolve('../src/index'), + postprocessing: path.resolve('node_modules/postprocessing'), + react: path.resolve('node_modules/react'), + 'react-dom': path.resolve('node_modules/react-dom'), + scheduler: path.resolve('node_modules/scheduler'), + 'react-scheduler': path.resolve('node_modules/react-scheduler'), + 'react-three-fiber': path.resolve('node_modules/react-three-fiber'), + drei: path.resolve('node_modules/drei'), + three$: path.resolve('./src/utils/three.js'), + '../../../build/three.module.js': path.resolve('./src/utils/three.js'), + }), + //addWebpackPlugin(new BundleAnalyzerPlugin()) + )(config, env) +} diff --git a/examples/package.json b/examples/package.json index d5ad511..026f8f7 100644 --- a/examples/package.json +++ b/examples/package.json @@ -12,7 +12,6 @@ "react-postprocessing": "1.2.0", "react-scripts": "3.4.3", "react-three-fiber": "5.0.0-beta.12", - "react-three-flex": "0.5.2", "three": "0.120.1", "troika-three-text": "https://github.com/jmatsushita/troika-three-text", "zustand": "3.1.0" diff --git a/examples/public/yoga.wasm b/examples/public/yoga.wasm new file mode 100644 index 0000000..29f7ef2 Binary files /dev/null and b/examples/public/yoga.wasm differ diff --git a/examples/src/App.js b/examples/src/App.js index dfeda31..9dfbd1a 100755 --- a/examples/src/App.js +++ b/examples/src/App.js @@ -1,7 +1,7 @@ import * as THREE from 'three' import React, { Suspense, useEffect, useRef, useState, useCallback, useLayoutEffect } from 'react' import { Canvas, useThree, useFrame, useLoader } from 'react-three-fiber' -import { Flex, Box, useFlexSize } from 'react-three-flex' +import { Flex, Box, useFlexSize } from '../../src/index' import { useAspect } from 'drei/misc/useAspect' import { Line } from 'drei/abstractions/Line' import { Loader } from 'drei/prototyping/Loader' diff --git a/examples/src/components/Text.js b/examples/src/components/Text.js index 373f85c..9daf76f 100755 --- a/examples/src/components/Text.js +++ b/examples/src/components/Text.js @@ -1,5 +1,5 @@ import React from 'react' -import { useReflow } from 'react-three-flex' +import { useReflow } from '../../../src/index' import { Text as TextImpl } from 'drei/abstractions/Text' export default function Text({ bold = false, anchorX = 'left', anchorY = 'top', textAlign = 'left', ...props }) { diff --git a/examples/yarn.lock b/examples/yarn.lock index 79e5c4b..3366a98 100644 --- a/examples/yarn.lock +++ b/examples/yarn.lock @@ -1637,11 +1637,6 @@ dependencies: "@types/yargs-parser" "*" -"@types/yoga-layout@1.9.2": - version "1.9.2" - resolved "https://registry.yarnpkg.com/@types/yoga-layout/-/yoga-layout-1.9.2.tgz#efaf9e991a7390dc081a0b679185979a83a9639a" - integrity sha512-S9q47ByT2pPvD65IvrWp7qppVMpk9WGMbVq9wbWZOHg6tnXSD4vyhao6nOSBwwfDdV2p3Kx9evA9vI+XWTfDvw== - "@typescript-eslint/eslint-plugin@^2.10.0": version "2.34.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9" @@ -8830,13 +8825,6 @@ react-three-fiber@5.0.0-beta.12: tiny-emitter "^2.1.0" utility-types "^3.10.0" -react-three-flex@0.5.2: - version "0.5.2" - resolved "https://registry.yarnpkg.com/react-three-flex/-/react-three-flex-0.5.2.tgz#d6670f4e3f1b6f332d654010bd37f49298912e11" - integrity sha512-XciDjhZBnd1s/1LQtawg3vLBEh/Wp2yRzTKjq9tnpw9x2oxqRa2yVpn7LCxR1DPu2s/pKFUuT/TGtGqB3wCJoA== - dependencies: - yoga-layout-prebuilt "^1.9.6" - react-use-measure@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.0.1.tgz#4f23f94c832cd4512da55acb300d1915dcbf3ae8" @@ -11087,13 +11075,6 @@ yargs@^13.3.0, yargs@^13.3.2: y18n "^4.0.0" yargs-parser "^13.1.2" -yoga-layout-prebuilt@^1.9.6: - version "1.9.6" - resolved "https://registry.yarnpkg.com/yoga-layout-prebuilt/-/yoga-layout-prebuilt-1.9.6.tgz#98dde95bbf8e6e12835876e9305f1e995c4bb801" - integrity sha512-Wursw6uqLXLMjBAO4SEShuzj8+EJXhCF71/rJ7YndHTkRAYSU0GY3OghRqfAk9HPUAAFMuqp3U1Wl+01vmGRQQ== - dependencies: - "@types/yoga-layout" "1.9.2" - zustand@3.1.0, zustand@^3.0.3: version "3.1.0" resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.1.0.tgz#8b8ca50c53c9ee44a197a71930274f97d64365b6" diff --git a/package.json b/package.json index db84635..86d44be 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,8 @@ "test": "echo no tests yet" }, "dependencies": { - "yoga-layout-prebuilt": "^1.9.6" + "react-promise-suspense": "^0.3.3", + "yoga-wasm-slim": "^0.0.6" }, "devDependencies": { "@babel/core": "7.11.0", diff --git a/src/Box.tsx b/src/Box.tsx index 21758e8..9c506d9 100644 --- a/src/Box.tsx +++ b/src/Box.tsx @@ -1,9 +1,8 @@ import React, { useLayoutEffect, useRef, useMemo, useState } from 'react' import * as THREE from 'three' -import Yoga from 'yoga-layout-prebuilt' import { ReactThreeFiber, useFrame } from 'react-three-fiber' -import { setYogaProperties, rmUndefFromObj } from './util' +import { setYogaProperties, rmUndefFromObj, useYogaAsync } from './util' import { boxContext, flexContext } from './context' import { R3FlexProps } from './props' import { useReflow, useContext } from './hooks' @@ -182,26 +181,28 @@ export function Box({ wrap, ]) + const yoga = useYogaAsync('./') + const { registerBox, unregisterBox, scaleFactor } = useContext(flexContext) const { node: parent } = useContext(boxContext) const group = useRef() - const node = useMemo(() => Yoga.Node.create(), []) + const node = useMemo(() => yoga._YGNodeNew(), []) const reflow = useReflow() useLayoutEffect(() => { - setYogaProperties(node, flexProps, scaleFactor) + setYogaProperties(yoga, node, flexProps, scaleFactor) }, [flexProps, node, scaleFactor]) // Make child known to the parents yoga instance *before* it calculates layout useLayoutEffect(() => { if (!group.current || !parent) return - parent.insertChild(node, parent.getChildCount()) + yoga._YGNodeInsertChild(parent, node, yoga._YGNodeGetChildCount(parent)) registerBox(node, group.current, flexProps, centerAnchor) // Remove child on unmount return () => { - parent.removeChild(node) + yoga._YGNodeRemoveChild(parent, node) unregisterBox(node) } }, [node, parent, flexProps, centerAnchor, registerBox, unregisterBox]) @@ -215,10 +216,10 @@ export function Box({ const epsilon = 1 / scaleFactor useFrame(() => { const width = - (typeof flexProps.width === 'number' ? flexProps.width : null) || node.getComputedWidth().valueOf() / scaleFactor + (typeof flexProps.width === 'number' ? flexProps.width : null) || yoga._YGNodeLayoutGetWidth(node) / scaleFactor const height = (typeof flexProps.height === 'number' ? flexProps.height : null) || - node.getComputedHeight().valueOf() / scaleFactor + yoga._YGNodeLayoutGetHeight(node) / scaleFactor if (Math.abs(width - size[0]) > epsilon || Math.abs(height - size[1]) > epsilon) { setSize([width, height]) diff --git a/src/Flex.tsx b/src/Flex.tsx index 0f78f8b..2002f2e 100644 --- a/src/Flex.tsx +++ b/src/Flex.tsx @@ -1,9 +1,18 @@ import React, { useLayoutEffect, useMemo, useCallback, PropsWithChildren, useRef } from 'react' -import Yoga, { YogaNode } from 'yoga-layout-prebuilt' +import { YGNodeRef, CONSTANTS } from 'yoga-wasm-slim' import { Vector3, Group, Box3 } from 'three' import { useFrame, useThree, ReactThreeFiber } from 'react-three-fiber' -import { setYogaProperties, rmUndefFromObj, vectorFromObject, Axis, getDepthAxis, getFlex2DSize } from './util' +import { + setYogaProperties, + rmUndefFromObj, + vectorFromObject, + Axis, + getDepthAxis, + getFlex2DSize, + useYogaAsync, + setPropertyString, +} from './util' import { boxContext, flexContext, SharedFlexContext, SharedBoxContext } from './context' import type { R3FlexProps, FlexYogaDirection, FlexPlane } from './props' @@ -196,9 +205,9 @@ export function Flex({ ]) // Keeps track of the yoga nodes of the children and the related wrapper groups - const boxesRef = useRef<{ node: YogaNode; group: Group; flexProps: R3FlexProps; centerAnchor: boolean }[]>([]) + const boxesRef = useRef<{ node: YGNodeRef; group: Group; flexProps: R3FlexProps; centerAnchor: boolean }[]>([]) const registerBox = useCallback( - (node: YogaNode, group: Group, flexProps: R3FlexProps, centerAnchor: boolean = false) => { + (node: YGNodeRef, group: Group, flexProps: R3FlexProps, centerAnchor: boolean = false) => { const i = boxesRef.current.findIndex((b) => b.node === node) if (i !== -1) { boxesRef.current.splice(i, 1) @@ -207,17 +216,19 @@ export function Flex({ }, [] ) - const unregisterBox = useCallback((node: YogaNode) => { + const unregisterBox = useCallback((node: YGNodeRef) => { const i = boxesRef.current.findIndex((b) => b.node === node) if (i !== -1) { boxesRef.current.splice(i, 1) } }, []) + const yoga = useYogaAsync('./') + // Reference to the yoga native node - const node = useMemo(() => Yoga.Node.create(), []) + const node = useMemo(() => yoga._YGNodeNew(), []) useLayoutEffect(() => { - setYogaProperties(node, flexProps, scaleFactor) + setYogaProperties(yoga, node, flexProps, scaleFactor) }, [node, flexProps, scaleFactor]) // Mechanism for invalidating and recalculating layout @@ -241,7 +252,11 @@ export function Flex({ const depthAxis = getDepthAxis(plane) const [flexWidth, flexHeight] = getFlex2DSize(size, plane) const yogaDirection_ = - yogaDirection === 'ltr' ? Yoga.DIRECTION_LTR : yogaDirection === 'rtl' ? Yoga.DIRECTION_RTL : yogaDirection + yogaDirection === 'ltr' + ? CONSTANTS.DIRECTION_LTR + : yogaDirection === 'rtl' + ? CONSTANTS.DIRECTION_RTL + : yogaDirection // Shared context for flex and box const sharedFlexContext = useMemo( @@ -263,23 +278,16 @@ export function Flex({ function reflow() { // Recalc all the sizes boxesRef.current.forEach(({ group, node, flexProps }) => { - const scaledWidth = typeof flexProps.width === 'number' ? flexProps.width * scaleFactor : flexProps.width - const scaledHeight = typeof flexProps.height === 'number' ? flexProps.height * scaleFactor : flexProps.height - - if (scaledWidth !== undefined && scaledHeight !== undefined) { - // Forced size, no need to calculate bounding box - node.setWidth(scaledWidth) - node.setHeight(scaledHeight) - } else { + if (flexProps.width === undefined || flexProps.height === undefined) { // No size specified, calculate bounding box boundingBox.setFromObject(group).getSize(vec) - node.setWidth(scaledWidth || vec[mainAxis] * scaleFactor) - node.setHeight(scaledHeight || vec[crossAxis] * scaleFactor) + setPropertyString(yoga, node, 'Width', flexProps.width || vec[mainAxis], scaleFactor) + setPropertyString(yoga, node, 'Height', flexProps.height || vec[crossAxis], scaleFactor) } }) // Perform yoga layout calculation - node.calculateLayout(flexWidth * scaleFactor, flexHeight * scaleFactor, yogaDirection_) + yoga._YGNodeCalculateLayout(node, flexWidth * scaleFactor, flexHeight * scaleFactor, yogaDirection_) let minX = 0 let maxX = 0 @@ -288,7 +296,10 @@ export function Flex({ // Reposition after recalculation boxesRef.current.forEach(({ group, node, centerAnchor }) => { - const { left, top, width, height } = node.getComputedLayout() + const left = yoga._YGNodeLayoutGetLeft(node) + const top = yoga._YGNodeLayoutGetTop(node) + const width = yoga._YGNodeLayoutGetWidth(node) + const height = yoga._YGNodeLayoutGetHeight(node) const position = vectorFromObject({ [mainAxis]: (left + (centerAnchor ? width / 2 : 0)) / scaleFactor, [crossAxis]: -(top + (centerAnchor ? height / 2 : 0)) / scaleFactor, diff --git a/src/context.ts b/src/context.ts index b016dc2..f04f707 100644 --- a/src/context.ts +++ b/src/context.ts @@ -1,13 +1,13 @@ import { createContext } from 'react' -import { YogaNode } from 'yoga-layout-prebuilt' +import { YGNodeRef } from 'yoga-wasm-slim' import { Group } from 'three' import { R3FlexProps } from './props' export interface SharedFlexContext { scaleFactor: number requestReflow(): void - registerBox(node: YogaNode, group: Group, flexProps: R3FlexProps, centerAnchor?: boolean): void - unregisterBox(node: YogaNode): void + registerBox(node: YGNodeRef, group: Group, flexProps: R3FlexProps, centerAnchor?: boolean): void + unregisterBox(node: YGNodeRef): void } const initialSharedFlexContext: SharedFlexContext = { @@ -26,7 +26,7 @@ const initialSharedFlexContext: SharedFlexContext = { export const flexContext = createContext(initialSharedFlexContext) export interface SharedBoxContext { - node: YogaNode | null + node: YGNodeRef | null size: [number, number] } diff --git a/src/props.ts b/src/props.ts index 551735f..eff66fa 100644 --- a/src/props.ts +++ b/src/props.ts @@ -1,23 +1,13 @@ -import { YogaFlexDirection, YogaAlign, YogaJustifyContent, YogaFlexWrap, YogaDirection } from 'yoga-layout-prebuilt' - -export type FlexYogaDirection = YogaDirection | 'ltr' | 'rtl' +export type FlexYogaDirection = 'ltr' | 'rtl' export type FlexPlane = 'xy' | 'yz' | 'xz' export type Value = string | number -export type FlexDirection = YogaFlexDirection | 'row' | 'column' | 'row-reverse' | 'column-reverse' +export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse' -export type JustifyContent = - | YogaJustifyContent - | 'center' - | 'flex-end' - | 'flex-start' - | 'space-between' - | 'space-evenly' - | 'space-around' +export type JustifyContent = 'center' | 'flex-end' | 'flex-start' | 'space-between' | 'space-evenly' | 'space-around' export type Align = - | YogaAlign | 'auto' | 'baseline' | 'center' @@ -27,7 +17,7 @@ export type Align = | 'space-between' | 'stretch' -export type FlexWrap = YogaFlexWrap | 'no-wrap' | 'wrap' | 'wrap-reverse' +export type FlexWrap = 'no-wrap' | 'wrap' | 'wrap-reverse' export type R3FlexProps = Partial<{ // Align diff --git a/src/util.ts b/src/util.ts index 69b426a..7cd189c 100644 --- a/src/util.ts +++ b/src/util.ts @@ -1,93 +1,143 @@ import { Vector3 } from 'three' -import Yoga, { YogaNode } from 'yoga-layout-prebuilt' +import Yoga, { YogaApi, YGNodeRef, CONSTANTS } from 'yoga-wasm-slim' +import usePromise from 'react-promise-suspense' import { R3FlexProps, FlexPlane } from './props' +let yogaGlobalInstance: YogaApi | null = null +export function useYogaAsync(path: string): YogaApi { + return usePromise( + async (path: string) => { + if (!yogaGlobalInstance) { + const yoga = await Yoga({ locateFile: (file) => path + file }) + yogaGlobalInstance = yoga + } + return yogaGlobalInstance + }, + [path] + ) +} + export const capitalize = (s: string) => s[0].toUpperCase() + s.slice(1) export const jsxPropToYogaProp = (s: string) => s.toUpperCase().replace('-', '_') -export const setYogaProperties = (node: YogaNode, props: R3FlexProps, scaleFactor: number) => { +export function setPropertyString( + yogaInstance: YogaApi, + node: YGNodeRef, + name: string, + value: string | number, + scaleFactor: number, + ...additionalParams: any[] +) { + if (typeof value === 'number') { + ;(yogaInstance as any)[`_YGNodeStyleSet${name}`](node, ...additionalParams, value * scaleFactor) + } else if (value.endsWith('%')) { + ;(yogaInstance as any)[`_YGNodeStyleSet${name}Percent`](node, ...additionalParams, parseFloat(value)) + } else if (value === 'auto') { + ;(yogaInstance as any)[`_YGNodeStyleSet${name}Auto`](node, ...additionalParams) + } else if (value.endsWith('px')) { + ;(yogaInstance as any)[`_YGNodeStyleSet${name}`](node, ...additionalParams, parseFloat(value) * scaleFactor) + } +} + +export const setYogaProperties = (yogaInstance: YogaApi, node: YGNodeRef, props: R3FlexProps, scaleFactor: number) => { return Object.keys(props).forEach((name) => { const value = props[name as keyof R3FlexProps] - if (typeof value === 'string') { - switch (name) { - case 'flexDir': - case 'dir': - case 'flexDirection': - return node.setFlexDirection((Yoga as any)[`FLEX_DIRECTION_${jsxPropToYogaProp(value)}`]) - case 'align': - case 'alignItems': - return node.setAlignItems((Yoga as any)[`ALIGN_${jsxPropToYogaProp(value)}`]) - case 'justify': - case 'justifyContent': - return node.setJustifyContent((Yoga as any)[`JUSTIFY_${jsxPropToYogaProp(value)}`]) - case 'wrap': - case 'flexWrap': - return node.setFlexWrap((Yoga as any)[`WRAP_${jsxPropToYogaProp(value)}`]) - case 'basis': - case 'flexBasis': - return node.setFlexBasis(value) - - default: - return (node[`set${capitalize(name)}` as keyof YogaNode] as any)(value) - } - } else if (typeof value === 'number') { - const scaledValue = value * scaleFactor - switch (name) { - case 'basis': - case 'flexBasis': - return node.setFlexBasis(scaledValue) - case 'grow': - case 'flexGrow': - return node.setFlexGrow(scaledValue) - case 'shrink': - case 'flexShrink': - return node.setFlexShrink(scaledValue) - case 'align': - return node.setAlignItems(value as any) - case 'justify': - return node.setJustifyContent(value as any) - case 'flexDir': - case 'dir': - return node.setFlexDirection(value as any) - case 'wrap': - return node.setFlexWrap(value as any) - case 'padding': - case 'p': - return node.setPadding(Yoga.EDGE_ALL, scaledValue) - case 'paddingLeft': - case 'pl': - return node.setPadding(Yoga.EDGE_LEFT, scaledValue) - case 'paddingRight': - case 'pr': - return node.setPadding(Yoga.EDGE_RIGHT, scaledValue) - case 'paddingTop': - case 'pt': - return node.setPadding(Yoga.EDGE_TOP, scaledValue) - case 'paddingBottom': - case 'pb': - return node.setPadding(Yoga.EDGE_BOTTOM, scaledValue) - - case 'margin': - case 'm': - return node.setMargin(Yoga.EDGE_ALL, scaledValue) - case 'marginLeft': - case 'ml': - return node.setMargin(Yoga.EDGE_LEFT, scaledValue) - case 'marginRight': - case 'mr': - return node.setMargin(Yoga.EDGE_RIGHT, scaledValue) - case 'marginTop': - case 'mt': - return node.setMargin(Yoga.EDGE_TOP, scaledValue) - case 'marginBottom': - case 'mb': - return node.setMargin(Yoga.EDGE_BOTTOM, scaledValue) - - default: - return (node[`set${capitalize(name)}` as keyof YogaNode] as any)(scaledValue) - } + if (!value) return + + switch (name) { + case 'flexDir': + case 'dir': + case 'flexDirection': + return yogaInstance._YGNodeStyleSetFlexDirection( + node, + CONSTANTS[`FLEX_DIRECTION_${jsxPropToYogaProp(value as string)}` as keyof typeof CONSTANTS] + ) + case 'align': + case 'alignItems': + return yogaInstance._YGNodeStyleSetAlignItems( + node, + CONSTANTS[`ALIGN_${jsxPropToYogaProp(value as string)}` as keyof typeof CONSTANTS] + ) + case 'alignContent': + return yogaInstance._YGNodeStyleSetAlignContent( + node, + CONSTANTS[`ALIGN_${jsxPropToYogaProp(value as string)}` as keyof typeof CONSTANTS] + ) + case 'alignSelf': + return yogaInstance._YGNodeStyleSetAlignSelf( + node, + CONSTANTS[`ALIGN_${jsxPropToYogaProp(value as string)}` as keyof typeof CONSTANTS] + ) + case 'justify': + case 'justifyContent': + return yogaInstance._YGNodeStyleSetJustifyContent( + node, + CONSTANTS[`JUSTIFY_${jsxPropToYogaProp(value as string)}` as keyof typeof CONSTANTS] + ) + case 'wrap': + case 'flexWrap': + return yogaInstance._YGNodeStyleSetFlexWrap( + node, + CONSTANTS[`WRAP_${jsxPropToYogaProp(value as string)}` as keyof typeof CONSTANTS] + ) + + case 'basis': + case 'flexBasis': + return setPropertyString(yogaInstance, node, 'FlexBasis', value, scaleFactor) + case 'grow': + case 'flexGrow': + return setPropertyString(yogaInstance, node, 'FlexGrow', value, scaleFactor) + case 'shrink': + case 'flexShrink': + return setPropertyString(yogaInstance, node, 'FlexShrink', value, scaleFactor) + + case 'width': + return setPropertyString(yogaInstance, node, 'Width', value, scaleFactor) + case 'height': + return setPropertyString(yogaInstance, node, 'Height', value, scaleFactor) + + case 'maxHeight': + return setPropertyString(yogaInstance, node, 'MaxWidth', value, scaleFactor) + case 'maxWidth': + return setPropertyString(yogaInstance, node, 'MaxHeight', value, scaleFactor) + case 'minHeight': + return setPropertyString(yogaInstance, node, 'MinWidth', value, scaleFactor) + case 'minWidth': + return setPropertyString(yogaInstance, node, 'MinHeight', value, scaleFactor) + + case 'padding': + case 'p': + return setPropertyString(yogaInstance, node, 'Padding', value, scaleFactor, CONSTANTS.EDGE_ALL) + case 'paddingLeft': + case 'pl': + return setPropertyString(yogaInstance, node, 'Padding', value, scaleFactor, CONSTANTS.EDGE_LEFT) + case 'paddingRight': + case 'pr': + return setPropertyString(yogaInstance, node, 'Padding', value, scaleFactor, CONSTANTS.EDGE_RIGHT) + case 'paddingTop': + case 'pt': + return setPropertyString(yogaInstance, node, 'Padding', value, scaleFactor, CONSTANTS.EDGE_TOP) + case 'paddingBottom': + case 'pb': + return setPropertyString(yogaInstance, node, 'Padding', value, scaleFactor, CONSTANTS.EDGE_BOTTOM) + + case 'margin': + case 'm': + return setPropertyString(yogaInstance, node, 'Margin', value, scaleFactor, CONSTANTS.EDGE_ALL) + case 'marginLeft': + case 'ml': + return setPropertyString(yogaInstance, node, 'Margin', value, scaleFactor, CONSTANTS.EDGE_LEFT) + case 'marginRight': + case 'mr': + return setPropertyString(yogaInstance, node, 'Margin', value, scaleFactor, CONSTANTS.EDGE_RIGHT) + case 'marginTop': + case 'mt': + return setPropertyString(yogaInstance, node, 'Margin', value, scaleFactor, CONSTANTS.EDGE_TOP) + case 'marginBottom': + case 'mb': + return setPropertyString(yogaInstance, node, 'Margin', value, scaleFactor, CONSTANTS.EDGE_BOTTOM) } }) } diff --git a/yarn.lock b/yarn.lock index e528296..cee0b65 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2474,11 +2474,6 @@ dependencies: "@types/yargs-parser" "*" -"@types/yoga-layout@1.9.2": - version "1.9.2" - resolved "https://registry.yarnpkg.com/@types/yoga-layout/-/yoga-layout-1.9.2.tgz#efaf9e991a7390dc081a0b679185979a83a9639a" - integrity sha512-S9q47ByT2pPvD65IvrWp7qppVMpk9WGMbVq9wbWZOHg6tnXSD4vyhao6nOSBwwfDdV2p3Kx9evA9vI+XWTfDvw== - "@typescript-eslint/eslint-plugin@^3.7.1": version "3.10.1" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.10.1.tgz#7e061338a1383f59edc204c605899f93dc2e2c8f" @@ -9482,7 +9477,7 @@ react-popper@^1.3.7: typed-styles "^0.0.7" warning "^4.0.2" -react-promise-suspense@^0.3.2: +react-promise-suspense@^0.3.2, react-promise-suspense@^0.3.3: version "0.3.3" resolved "https://registry.yarnpkg.com/react-promise-suspense/-/react-promise-suspense-0.3.3.tgz#b085c7e0ac22b85fd3d605b1c4f181cda4310bc9" integrity sha512-OdehKsCEWYoV6pMcwxbvJH99UrbXylmXJ1QpEL9OfHaUBzcAihyfSJV8jFq325M/wW9iKc/BoiLROXxMul+MxA== @@ -11729,9 +11724,7 @@ yargs@^15.3.1: y18n "^4.0.0" yargs-parser "^18.1.2" -yoga-layout-prebuilt@^1.9.6: - version "1.9.6" - resolved "https://registry.yarnpkg.com/yoga-layout-prebuilt/-/yoga-layout-prebuilt-1.9.6.tgz#98dde95bbf8e6e12835876e9305f1e995c4bb801" - integrity sha512-Wursw6uqLXLMjBAO4SEShuzj8+EJXhCF71/rJ7YndHTkRAYSU0GY3OghRqfAk9HPUAAFMuqp3U1Wl+01vmGRQQ== - dependencies: - "@types/yoga-layout" "1.9.2" +yoga-wasm-slim@^0.0.6: + version "0.0.6" + resolved "https://registry.yarnpkg.com/yoga-wasm-slim/-/yoga-wasm-slim-0.0.6.tgz#0b1604a28f6453260c0b772d45b9d4cf5b11380d" + integrity sha512-H8vUiyp+wbmU4vHl87Jt0vaAZiyItKhheCnE4/Rku2pUQdvWfbrqU+GlB4bTbVIxZu7ZUwcex6Zcg7+KcQerOQ==