Merge pull request #39 from pmndrs/feature/yoga-without-tla

yoga without tla

examples/apfel/vite.config.ts

@@ -8,9 +8,6 @@ export default defineConfig({
   plugins: [react(), basicSsl()],
   optimizeDeps: {
     include: ['@react-three/uikit-lucide', '@react-three/uikit'],
-    esbuildOptions: {
-      target: 'esnext',
-    },
   },
   base: '/uikit/examples/apfel/',
   resolve: {
@@ -19,7 +16,4 @@ export default defineConfig({
       { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/react/src/index.ts') },
     ],
   },
-  build: {
-    target: 'esnext',
-  },
 })

examples/auth/vite.config.ts

@@ -7,9 +7,6 @@ export default defineConfig({
   plugins: [react()],
   optimizeDeps: {
     include: ['@react-three/uikit-lucide', '@react-three/uikit'],
-    esbuildOptions: {
-      target: 'esnext',
-    },
   },
   base: '/uikit/examples/auth/',
   resolve: {
@@ -18,7 +15,4 @@ export default defineConfig({
       { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/react/src/index.ts') },
     ],
   },
-  build: {
-    target: 'esnext',
-  },
 })

examples/card/vite.config.ts

@@ -7,9 +7,6 @@ export default defineConfig({
   plugins: [react()],
   optimizeDeps: {
     include: ['@react-three/uikit-lucide', '@react-three/uikit'],
-    esbuildOptions: {
-      target: 'esnext',
-    },
   },
   base: '/uikit/examples/card/',
   resolve: {
@@ -18,7 +15,4 @@ export default defineConfig({
       { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/react/src/index.ts') },
     ],
   },
-  build: {
-    target: 'esnext',
-  },
 })

examples/dashboard/vite.config.ts

@@ -7,9 +7,6 @@ export default defineConfig({
   plugins: [react()],
   optimizeDeps: {
     include: ['@react-three/uikit-lucide', '@react-three/uikit'],
-    esbuildOptions: {
-      target: 'esnext',
-    },
   },
   base: '/uikit/examples/dashboard/',
   resolve: {
@@ -18,7 +15,4 @@ export default defineConfig({
       { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/react/src/index.ts') },
     ],
   },
-  build: {
-    target: 'esnext',
-  },
 })

examples/default/vite.config.ts

@@ -7,9 +7,6 @@ export default defineConfig({
   plugins: [react()],
   optimizeDeps: {
     include: ['@react-three/uikit-lucide', '@react-three/uikit'],
-    esbuildOptions: {
-      target: 'esnext',
-    },
   },
   base: '/uikit/examples/default/',
   resolve: {
@@ -18,7 +15,4 @@ export default defineConfig({
       { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/react/src/index.ts') },
     ],
   },
-  build: {
-    target: 'esnext',
-  },
 })

examples/lucide/vite.config.ts

@@ -7,9 +7,6 @@ export default defineConfig({
   plugins: [react()],
   optimizeDeps: {
     include: ['@react-three/uikit-lucide', '@react-three/uikit'],
-    esbuildOptions: {
-      target: 'esnext',
-    },
   },
   base: '/uikit/examples/lucide/',
   resolve: {
@@ -18,7 +15,4 @@ export default defineConfig({
       { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/react/src/index.ts') },
     ],
   },
-  build: {
-    target: 'esnext',
-  },
 })

examples/market/vite.config.ts

@@ -7,9 +7,6 @@ export default defineConfig({
   plugins: [react()],
   optimizeDeps: {
     include: ['@react-three/uikit-lucide', '@react-three/uikit'],
-    esbuildOptions: {
-      target: 'esnext',
-    },
   },
   base: '/uikit/examples/market/',
   resolve: {
@@ -18,7 +15,4 @@ export default defineConfig({
       { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/react/src/index.ts') },
     ],
   },
-  build: {
-    target: 'esnext',
-  },
 })

examples/uikit/vite.config.ts

@@ -15,12 +15,4 @@ export default defineConfig({
       { find: '@pmndrs/uikit', replacement: path.resolve(__dirname, '../../packages/uikit/src/index.ts') },
     ],
   },
-  optimizeDeps: {
-    esbuildOptions: {
-      target: 'esnext',
-    },
-  },
-  build: {
-    target: 'esnext',
-  },
 })

packages/uikit/package.json

@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@preact/signals-core": "^1.5.1",
-    "yoga-layout": "^3.0.2"
+    "yoga-layout": "^3.0.4"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",

packages/uikit/scripts/flex-generate-setter.ts

@@ -1,9 +1,10 @@
 import { writeFileSync } from 'fs'
-import Yoga, { Edge, Gutter, Unit, Node } from 'yoga-layout'
-import { defaultYogaConfig } from '../src/flex/config.js'
+import { Edge, Gutter, Unit, Node, loadYoga } from 'yoga-layout/load'
+import { createDefaultConfig } from '../src/flex/yoga.js'
 
 async function main() {
-  const node = Yoga.Node.create(defaultYogaConfig)
+  const Yoga = await loadYoga()
+  const node = Yoga.Node.create(createDefaultConfig(Yoga.Config))
 
   const propertiesWithEdge = new Set(['border', 'padding', 'margin', 'position'])
   const propertiesWithGutter = new Set(['gap'])
@@ -151,8 +152,8 @@ async function main() {
 
   writeFileSync(
     'src/flex/setter.ts',
-    `import { Node } from "yoga-layout"
-    import type { ${Array.from(importedTypesFromYoga).join(', ')} } from "yoga-layout"
+    `import { Node } from "yoga-layout/load"
+    import type { ${Array.from(importedTypesFromYoga).join(', ')} } from "yoga-layout/load"
     function convertEnum<T extends { [Key in string]: number }>(lut: T, input: keyof T | undefined, defaultValue: T[keyof T]): T[keyof T] {
       if(input == null) {
         return defaultValue

packages/uikit/src/clipping.ts

@@ -1,10 +1,10 @@
 import { Signal, computed } from '@preact/signals-core'
-import { Group, Matrix4, Plane, Vector3 } from 'three'
+import { Matrix4, Plane, Vector3 } from 'three'
 import type { Vector2Tuple } from 'three'
-import { FlexNodeState, Inset } from './flex/node.js'
-import { Overflow } from 'yoga-layout'
-import { Object3DRef, RootContext } from './context.js'
-import { Initializers, Subscriptions } from './utils.js'
+import { Overflow } from 'yoga-layout/load'
+import { FlexNodeState } from './flex/node.js'
+import { RootContext } from './context.js'
+import { Initializers } from './utils.js'
 
 const dotLt45deg = Math.cos((45 / 180) * Math.PI)
 

packages/uikit/src/flex/node.ts

@@ -1,12 +1,12 @@
 import { Object3D, Vector2Tuple } from 'three'
 import { Signal, batch, computed, effect, signal } from '@preact/signals-core'
-import Yoga, { Edge, MeasureFunction, Node, Overflow } from 'yoga-layout'
+import { Edge, MeasureFunction, Node, Overflow } from 'yoga-layout/load'
 import { setter } from './setter.js'
 import { Subscriptions } from '../utils.js'
 import { setupImmediateProperties } from '../properties/immediate.js'
 import { MergedProperties } from '../properties/merged.js'
 import { Object3DRef } from '../context.js'
-import { PointScaleFactor, defaultYogaConfig } from './config.js'
+import { PointScaleFactor, createYogaNode } from './yoga.js'
 
 export type YogaProperties = {
   [Key in keyof typeof setter]?: Parameters<(typeof setter)[Key]>[1]
@@ -51,12 +51,20 @@ export class FlexNode {
     private object: Object3DRef,
     subscriptions: Subscriptions,
   ) {
-    this.yogaNode = Yoga.Node.create(defaultYogaConfig)
-    this.active.value = true
-    subscriptions.push(() => {
-      this.yogaNode?.getParent()?.removeChild(this.yogaNode)
-      this.yogaNode?.free()
-    })
+    subscriptions.push(
+      effect(() => {
+        const yogaNode = createYogaNode()
+        if (yogaNode == null) {
+          return
+        }
+        this.yogaNode = yogaNode
+        this.active.value = true
+        return () => {
+          this.yogaNode?.getParent()?.removeChild(this.yogaNode)
+          this.yogaNode?.free()
+        }
+      }),
+    )
     setupImmediateProperties(
       propertiesSignal,
       this.active,

packages/uikit/src/flex/yoga.ts

@@ -0,0 +1,21 @@
+import { signal } from '@preact/signals-core'
+import { Node, Yoga, loadYoga } from 'yoga-layout/load'
+
+export const PointScaleFactor = 100
+
+export function createDefaultConfig(Config: Yoga['Config']) {
+  const config = Config.create()
+  config.setUseWebDefaults(true)
+  config.setPointScaleFactor(PointScaleFactor)
+  return config
+}
+
+const create = signal<(() => Node) | undefined>(undefined)
+loadYoga()
+  .then(({ Node, Config }) => {
+    const config = createDefaultConfig(Config)
+    create.value = () => Node.create(config)
+  })
+  .catch(console.error)
+
+export const createYogaNode = () => create.value?.()

packages/uikit/src/text/layout.ts

@@ -2,7 +2,7 @@ import { BreakallWrapper, NowrapWrapper, WordWrapper } from './wrapper/index.js'
 import { Font } from './font.js'
 import { getGlyphLayoutHeight } from './utils.js'
 import { Signal, computed } from '@preact/signals-core'
-import { MeasureFunction, MeasureMode } from 'yoga-layout'
+import { MeasureFunction, MeasureMode } from 'yoga-layout/load'
 import { MergedProperties } from '../properties/merged.js'
 import { readReactive } from '../utils.js'
 import { computedProperty } from '../internals.js'

packages/uikit/tests/flex.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from 'chai'
-import Yoga, {
+import {
   Align,
   Overflow,
   Node,
@@ -10,8 +10,12 @@ import Yoga, {
   Justify,
   PositionType,
   Unit,
-} from 'yoga-layout'
-import { YogaProperties, defaultYogaConfig, setMeasureFunc, setter } from '../src/flex/index.js'
+  loadYoga,
+  Yoga,
+  Config,
+} from 'yoga-layout/load'
+import { YogaProperties, setMeasureFunc, setter } from '../src/flex/index.js'
+import { createDefaultConfig } from '../src/flex/yoga.js'
 
 const testValues: YogaProperties = {
   alignContent: 'center',
@@ -121,15 +125,19 @@ describe('set & get properties', () => {
   let node: Node
 
   const rawValues: any = {}
+  let yoga: Yoga
+  let defaultYogaConfig: Config
 
   before(async () => {
-    node = Yoga.Node.create(defaultYogaConfig)
+    yoga = await loadYoga()
+    defaultYogaConfig = createDefaultConfig(yoga.Config)
+    node = yoga.Node.create(defaultYogaConfig)
   })
 
   it('it re-arrange children', () => {
-    const parent = Yoga.Node.create(defaultYogaConfig)
-    const child1 = Yoga.Node.create(defaultYogaConfig)
-    const child2 = Yoga.Node.create(defaultYogaConfig)
+    const parent = yoga.Node.create(defaultYogaConfig)
+    const child1 = yoga.Node.create(defaultYogaConfig)
+    const child2 = yoga.Node.create(defaultYogaConfig)
 
     parent.insertChild(child1, 0)
     parent.insertChild(child2, 1)
@@ -142,9 +150,9 @@ describe('set & get properties', () => {
   })
 
   it('it change parents', () => {
-    const child = Yoga.Node.create(defaultYogaConfig)
-    const parent1 = Yoga.Node.create(defaultYogaConfig)
-    const parent2 = Yoga.Node.create(defaultYogaConfig)
+    const child = yoga.Node.create(defaultYogaConfig)
+    const parent1 = yoga.Node.create(defaultYogaConfig)
+    const parent2 = yoga.Node.create(defaultYogaConfig)
 
     parent1.insertChild(child, 0)