From e3c4581924815b9c6c695b72c291395da8fe14ff Mon Sep 17 00:00:00 2001 From: Bela Bohlender Date: Tue, 19 Mar 2024 17:01:58 +0100 Subject: [PATCH 1/3] update to yoga3.0, remove precision, switch to web defaults --- .../components-and-properties.md | 4 +- docs/tutorials/sizing.md | 4 +- examples/apfel/src/components/input.tsx | 2 +- examples/apfel/src/components/list.tsx | 8 +-- examples/apfel/vite.config.ts | 3 + examples/auth/src/App.tsx | 21 +++++-- .../auth/src/components/user-auth-form.tsx | 8 +-- examples/auth/vite.config.ts | 3 + examples/card/src/App.jsx | 22 ++++--- examples/card/vite.config.ts | 6 ++ examples/dashboard/src/App.tsx | 34 +++++----- .../dashboard/src/components/Overview.tsx | 4 +- .../dashboard/src/components/RecentSales.tsx | 12 ++-- examples/dashboard/src/components/UserNav.tsx | 2 +- examples/dashboard/vite.config.ts | 6 ++ examples/default/src/App.tsx | 21 +++++-- examples/default/src/components/accordion.tsx | 2 +- examples/default/vite.config.ts | 6 ++ examples/lucide/vite.config.ts | 6 ++ examples/market/vite.config.ts | 6 ++ examples/uikit/vite.config.ts | 5 ++ packages/kits/default/accordion.tsx | 1 + packages/kits/default/tabs.tsx | 2 +- packages/uikit/package.json | 4 +- .../uikit/scripts/flex-generate-setter.ts | 29 ++++----- packages/uikit/src/clipping.ts | 2 +- packages/uikit/src/components/fullscreen.tsx | 1 - packages/uikit/src/components/input.tsx | 14 ++--- packages/uikit/src/components/root.tsx | 18 ++---- packages/uikit/src/flex/node.ts | 50 +++++++-------- packages/uikit/src/flex/utils.ts | 13 ++-- packages/uikit/src/text/layout.ts | 2 + packages/uikit/src/text/react.tsx | 2 +- packages/uikit/src/utils.tsx | 11 ---- packages/uikit/tests/flex.spec.ts | 63 ++++++++++++------- pnpm-lock.yaml | 8 +-- 36 files changed, 230 insertions(+), 175 deletions(-) diff --git a/docs/getting-started/components-and-properties.md b/docs/getting-started/components-and-properties.md index fd1a9196..087895e4 100644 --- a/docs/getting-started/components-and-properties.md +++ b/docs/getting-started/components-and-properties.md @@ -129,7 +129,7 @@ In addition to the flexbox properties, the container has properties for styling ## Root -Every layout needs to start with a `Root` component. The `Root` component has all the properties of a `Container` component. It allows you to control the `precision` of the layout engine. A precision of `1` expresses that all values computed by the layout engines are integers, while the default precision of `0.1` allows the layout engine to measure layouts in sub-pixel values such as `10.2`. The `pixelSize` property of the `Root` component allows you to specify the relation of pixels inside the layout with the three.js units in the scene. The `anchorX` and `anchorY` properties allow you to specify where the `Root` component is anchored in relation to its position. The `sizeX` and `sizeY` properties can be used to give the layout a fixed size in three.js units. +Every layout needs to start with a `Root` component. The `Root` component has all the properties of a `Container` component. The `pixelSize` property of the `Root` component allows you to specify the relation of pixels inside the layout with the three.js units in the scene. The `anchorX` and `anchorY` properties allow you to specify where the `Root` component is anchored in relation to its position. The `sizeX` and `sizeY` properties can be used to give the layout a fixed size in three.js units. ```jsx @@ -143,7 +143,6 @@ Every layout needs to start with a `Root` component. The `Root` component has al | Property | Type | | --------- | ------------------------- | -| precision | number | | anchorX | "left", "center", "right" | | anchorY | "top", "center", "bottom" | | sizeX | number | @@ -167,7 +166,6 @@ The `Fullscreen` component wraps the `Root` component and binds its content dire | Property | Type | | ------------ | ------- | -| precision | number | | attachCamera | boolean | diff --git a/docs/tutorials/sizing.md b/docs/tutorials/sizing.md index 4fd9e474..4c518675 100644 --- a/docs/tutorials/sizing.md +++ b/docs/tutorials/sizing.md @@ -1,6 +1,6 @@ --- title: Sizing -description: How to size elements and use pixelSize, sizeX, sizeY, and precision. +description: How to size elements and use pixelSize, sizeX, and sizeY. nav: 10 --- @@ -17,6 +17,4 @@ The `pixelSize` should be set so that the default font height (`16px`) is reason The root element size is specified in three.js units using the optional `sizeX` and `sizeY` parameters. Declaring the size of elements inside the root element using parameters, such as the `width` of an image or the `fontSize` of a text element, is based on `pixel` units, which strongly relate to the `px` unit in CSS. The relation between three.js units and pixel units can be set using the `pixelSize` property. The property expresses the size of one pixel in three.js units and defaults to `0.002`. With this default, `500px` is equal to 1 three.js unit. To make interoperability between code bases and different component libraries easier, we encourage to use the intuition of pixel sizes from the web. For instance, the default text height relates to 16 pixels. If these pixel sizes appear too small or too high in the szene, the `pixelSize` should be increased or decreased respectively. - - Another property exposed by the `Root` component is the `precision`, which expresses the resolution of the units. For instance, the default `precision` of `0.1` allows the layout engine to interpret the values `0.5` and `0.4 correctly` but will misinterpret `0.45`. diff --git a/examples/apfel/src/components/input.tsx b/examples/apfel/src/components/input.tsx index 1ff7f048..f296ae3f 100644 --- a/examples/apfel/src/components/input.tsx +++ b/examples/apfel/src/components/input.tsx @@ -7,7 +7,7 @@ import { useState } from 'react' export function InputsOnCard() { const [text, setText] = useState('') return ( - + diff --git a/examples/apfel/src/components/list.tsx b/examples/apfel/src/components/list.tsx index 659ae3b1..a70e9901 100644 --- a/examples/apfel/src/components/list.tsx +++ b/examples/apfel/src/components/list.tsx @@ -8,7 +8,7 @@ export function ListsOnCard() { return ( - + Subtitle} @@ -28,7 +28,7 @@ export function ListsOnCard() { - + Subtitle} @@ -67,7 +67,7 @@ export function ListsOnCard() { - + - + + {/* @@ -48,7 +50,7 @@ export default function App() { function AuthenticationPage() { return ( - + - + diff --git a/examples/auth/vite.config.ts b/examples/auth/vite.config.ts index 030cb3c9..56ca039d 100644 --- a/examples/auth/vite.config.ts +++ b/examples/auth/vite.config.ts @@ -7,6 +7,9 @@ export default defineConfig({ plugins: [react()], optimizeDeps: { include: ['@react-three/uikit-lucide', '@react-three/uikit'], + esbuildOptions: { + target: 'esnext', + }, }, base: '/uikit/examples/auth/', resolve: { diff --git a/examples/card/src/App.jsx b/examples/card/src/App.jsx index bd17abd0..214a8921 100644 --- a/examples/card/src/App.jsx +++ b/examples/card/src/App.jsx @@ -29,7 +29,7 @@ export default function App() { - + @@ -58,7 +58,7 @@ export function CardPage() { easing.damp(translateZ, 'value', openRef.current ? 200 : 0, 0.2, delta) }) return ( - + (e.stopPropagation(), (openRef.current = !openRef.current))} cursor="pointer" + flexDirection="column" zIndexOffset={10} transformTranslateZ={translateZ} > @@ -92,7 +93,7 @@ export function CardPage() { borderBottomRadius={20} castShadow > - + VanArsdel Marketing @@ -100,19 +101,20 @@ export function CardPage() { 1 activities for you - + - - + + - + @@ -125,7 +127,7 @@ export function CardPage() { - + Push Notifications @@ -136,7 +138,7 @@ export function CardPage() { - + {notifications.map((notification, index) => ( - + {notification.title} diff --git a/examples/card/vite.config.ts b/examples/card/vite.config.ts index b18937f1..87d89d82 100644 --- a/examples/card/vite.config.ts +++ b/examples/card/vite.config.ts @@ -7,6 +7,9 @@ export default defineConfig({ plugins: [react()], optimizeDeps: { include: ['@react-three/uikit-lucide', '@react-three/uikit'], + esbuildOptions: { + target: 'esnext', + }, }, base: '/uikit/examples/card/', resolve: { @@ -15,4 +18,7 @@ export default defineConfig({ { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/uikit/src/index.ts') }, ], }, + build: { + target: 'esnext', + }, }) diff --git a/examples/dashboard/src/App.tsx b/examples/dashboard/src/App.tsx index d514a3fb..70aef7e1 100644 --- a/examples/dashboard/src/App.tsx +++ b/examples/dashboard/src/App.tsx @@ -30,7 +30,7 @@ export default function App() { - + @@ -43,7 +43,7 @@ export default function App() { export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) { return ( - + @@ -59,7 +59,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + Dashboard @@ -71,7 +71,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + Overview @@ -86,10 +86,10 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open Notifications - - + + - + @@ -98,7 +98,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + $45,231.89 @@ -107,7 +107,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + - + +2350 @@ -133,7 +133,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + - + +12,234 @@ -157,7 +157,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + - + +573 @@ -184,7 +184,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + Overview @@ -194,7 +194,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + Recent Sales @@ -203,7 +203,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open You made 265 sales this month. - + diff --git a/examples/dashboard/src/components/Overview.tsx b/examples/dashboard/src/components/Overview.tsx index 8c18c9a3..df61c195 100644 --- a/examples/dashboard/src/components/Overview.tsx +++ b/examples/dashboard/src/components/Overview.tsx @@ -73,8 +73,8 @@ export function Overview() { {data.map(({ name, total }) => ( - - + + + - + Olivia Martin @@ -29,7 +29,7 @@ export function RecentSales() { gap={0} src="/uikit/examples/dashboard/02.png" /> - + Jackson Lee @@ -43,7 +43,7 @@ export function RecentSales() { - + Isabella Nguyen @@ -57,7 +57,7 @@ export function RecentSales() { - + William Kim @@ -71,7 +71,7 @@ export function RecentSales() { - + Sofia Davis diff --git a/examples/dashboard/src/components/UserNav.tsx b/examples/dashboard/src/components/UserNav.tsx index 3c8d7df3..c972674d 100644 --- a/examples/dashboard/src/components/UserNav.tsx +++ b/examples/dashboard/src/components/UserNav.tsx @@ -70,7 +70,7 @@ export function UserNav({ open, setOpen }: { open: boolean; setOpen: (open: bool gap={17} > - + {notification.title} diff --git a/examples/dashboard/vite.config.ts b/examples/dashboard/vite.config.ts index 858bd6c0..a339cd3c 100644 --- a/examples/dashboard/vite.config.ts +++ b/examples/dashboard/vite.config.ts @@ -7,6 +7,9 @@ export default defineConfig({ plugins: [react()], optimizeDeps: { include: ['@react-three/uikit-lucide', '@react-three/uikit'], + esbuildOptions: { + target: 'esnext', + }, }, base: '/uikit/examples/dashboard/', resolve: { @@ -15,4 +18,7 @@ export default defineConfig({ { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/uikit/src/index.ts') }, ], }, + build: { + target: 'esnext', + }, }) diff --git a/examples/default/src/App.tsx b/examples/default/src/App.tsx index 27c43444..94ea3d5f 100644 --- a/examples/default/src/App.tsx +++ b/examples/default/src/App.tsx @@ -82,7 +82,13 @@ export default function App() { - + @@ -96,10 +102,15 @@ export default function App() { ))} {Object.entries(componentPages).map(([name, Component]) => ( - - - - + + ))} diff --git a/examples/default/src/components/accordion.tsx b/examples/default/src/components/accordion.tsx index ab055aad..f402b365 100644 --- a/examples/default/src/components/accordion.tsx +++ b/examples/default/src/components/accordion.tsx @@ -4,7 +4,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/ //TODO: type="single" collapsible export function AccordionDemo() { return ( - + diff --git a/examples/default/vite.config.ts b/examples/default/vite.config.ts index 2a8fe70f..7f4c5121 100644 --- a/examples/default/vite.config.ts +++ b/examples/default/vite.config.ts @@ -7,6 +7,9 @@ export default defineConfig({ plugins: [react()], optimizeDeps: { include: ['@react-three/uikit-lucide', '@react-three/uikit'], + esbuildOptions: { + target: 'esnext', + }, }, base: '/uikit/examples/default/', resolve: { @@ -15,4 +18,7 @@ export default defineConfig({ { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/uikit/src/index.ts') }, ], }, + build: { + target: 'esnext', + }, }) diff --git a/examples/lucide/vite.config.ts b/examples/lucide/vite.config.ts index d85ce5c3..c96bc1c3 100644 --- a/examples/lucide/vite.config.ts +++ b/examples/lucide/vite.config.ts @@ -7,6 +7,9 @@ export default defineConfig({ plugins: [react()], optimizeDeps: { include: ['@react-three/uikit-lucide', '@react-three/uikit'], + esbuildOptions: { + target: 'esnext', + }, }, base: '/uikit/examples/lucide/', resolve: { @@ -15,4 +18,7 @@ export default defineConfig({ { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/uikit/src/index.ts') }, ], }, + build: { + target: 'esnext', + }, }) diff --git a/examples/market/vite.config.ts b/examples/market/vite.config.ts index c90797bb..b6f7ed64 100644 --- a/examples/market/vite.config.ts +++ b/examples/market/vite.config.ts @@ -7,6 +7,9 @@ export default defineConfig({ plugins: [react()], optimizeDeps: { include: ['@react-three/uikit-lucide', '@react-three/uikit'], + esbuildOptions: { + target: 'esnext', + }, }, base: '/uikit/examples/market/', resolve: { @@ -15,4 +18,7 @@ export default defineConfig({ { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/uikit/src/index.ts') }, ], }, + build: { + target: 'esnext', + }, }) diff --git a/examples/uikit/vite.config.ts b/examples/uikit/vite.config.ts index 9a823cca..e3bab1c6 100644 --- a/examples/uikit/vite.config.ts +++ b/examples/uikit/vite.config.ts @@ -11,4 +11,9 @@ export default defineConfig({ { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/uikit/src/index.ts') }, ], }, + optimizeDeps: { + esbuildOptions: { + target: 'esnext', + }, + }, }) diff --git a/packages/kits/default/accordion.tsx b/packages/kits/default/accordion.tsx index 757750b9..024e285d 100644 --- a/packages/kits/default/accordion.tsx +++ b/packages/kits/default/accordion.tsx @@ -20,6 +20,7 @@ export function AccordionItem({ children, ...props }: ComponentPropsWithoutRef setValue(isSelected ? undefined : props.value)} borderBottom={1} {...props} diff --git a/packages/kits/default/tabs.tsx b/packages/kits/default/tabs.tsx index b0353420..30923fa0 100644 --- a/packages/kits/default/tabs.tsx +++ b/packages/kits/default/tabs.tsx @@ -36,7 +36,7 @@ export function Tabs({ } }, [uncontrolled, onValueChange, providedValue]) return ( - + {children} ) diff --git a/packages/uikit/package.json b/packages/uikit/package.json index 535e0f68..5f1c1841 100644 --- a/packages/uikit/package.json +++ b/packages/uikit/package.json @@ -28,7 +28,7 @@ "uikit": "./dist/cli/index.js" }, "scripts": { - "test": "mocha ./tests/allocation.spec.ts", + "test": "mocha ./tests/flex.spec.ts", "build": "tsc -p ./tsconfig.build.json", "generate": "node --loader ts-node/esm scripts/flex-generate-setter.ts", "check:prettier": "prettier --check src scripts tests", @@ -47,7 +47,7 @@ "commander": "^12.0.0", "ora": "^8.0.1", "prompts": "^2.4.2", - "yoga-layout": "^2.0.1", + "yoga-layout": "^3.0.2", "zod": "^3.22.4" }, "devDependencies": { diff --git a/packages/uikit/scripts/flex-generate-setter.ts b/packages/uikit/scripts/flex-generate-setter.ts index 93a208be..0598b918 100644 --- a/packages/uikit/scripts/flex-generate-setter.ts +++ b/packages/uikit/scripts/flex-generate-setter.ts @@ -1,9 +1,9 @@ import { writeFileSync } from 'fs' -import { loadYoga, Edge, Gutter, Unit, Node } from 'yoga-layout/wasm-async' +import Yoga, { Edge, Gutter, Unit, Node } from 'yoga-layout' +import { defaultYogaConfig } from '../src/flex/index.js' async function main() { - const yoga = await loadYoga() - const node = yoga.Node.create() + const node = Yoga.Node.create(defaultYogaConfig) const propertiesWithEdge = new Set(['border', 'padding', 'margin', 'position']) const propertiesWithGutter = new Set(['gap']) @@ -32,7 +32,7 @@ async function main() { Column: Gutter.Column, } - const yogaKeys = Object.entries(yoga) + const yogaKeys = Object.entries(Yoga) const kebabCaseFromSnakeCase = (str: string) => str.toLowerCase().replace(/_[a-z]/g, (letter) => `-${letter.slice(1)}`) @@ -100,11 +100,7 @@ async function main() { convertFunction = (defaultValue, setter) => { const defaultValueString = defaultValue === null || isNaN(defaultValue as any) ? 'NaN' : JSON.stringify(defaultValue) - return setter( - pointUnit - ? `convertPoint(input, precision, ${defaultValueString})${propertyName === 'margin' ? ' as number' : ''}` - : `input ?? ${defaultValueString}`, - ) + return setter(`input ?? ${defaultValueString}${propertyName === 'margin' ? ' as number' : ''}`) } } if (propertiesWithEdge.has(propertyName)) { @@ -115,7 +111,7 @@ async function main() { const edgeType = `Edge.${edgeKey}` setterFunctions.push([ edgePropertyName, - `(node: Node, precision: number, input: ${types.join(' | ')}) => + `(node: Node, input: ${types.join(' | ')}) => ${convertFunction( defaultValue, (value) => ` @@ -131,7 +127,7 @@ async function main() { const gutterType = `Gutter.${gutterKey}` setterFunctions.push([ gutterPropertyName, - `(node: Node, precision: number, input: ${types.join(' | ')}) => + `(node: Node, input: ${types.join(' | ')}) => ${convertFunction( defaultValue, (value) => ` @@ -143,7 +139,7 @@ async function main() { const defaultValue = fromYoga(propertyName, node[`get${functionName}` as 'getWidth']()) setterFunctions.push([ propertyName, - `(node: Node, precision: number, input: ${types.join(' | ')}) => + `(node: Node, input: ${types.join(' | ')}) => ${convertFunction( defaultValue, (value) => ` @@ -155,8 +151,8 @@ async function main() { writeFileSync( 'src/flex/setter.ts', - `import { Node } from "yoga-layout/wasm-async" - import type { ${Array.from(importedTypesFromYoga).join(', ')} } from "yoga-layout/wasm-async" + `import { Node } from "yoga-layout" + import type { ${Array.from(importedTypesFromYoga).join(', ')} } from "yoga-layout" function convertEnum(lut: T, input: keyof T | undefined, defaultValue: T[keyof T]): T[keyof T] { if(input == null) { return defaultValue @@ -167,10 +163,7 @@ async function main() { } return resolvedValue } - function convertPoint(input: T | undefined, precision: number, defaultValue: T): T | number { - if(typeof input === "number") { - return Math.round(input / precision) - } + function convertPoint(input: T | undefined, defaultValue: T): T | number { return input ?? defaultValue } ${Array.from(lookupTables.values()).join('\n')} diff --git a/packages/uikit/src/clipping.ts b/packages/uikit/src/clipping.ts index db8823f3..f2be635b 100644 --- a/packages/uikit/src/clipping.ts +++ b/packages/uikit/src/clipping.ts @@ -4,7 +4,7 @@ import { RefObject, createContext, useContext, useMemo } from 'react' import { Group, Matrix4, Plane, Vector3 } from 'three' import type { Vector2Tuple } from 'three' import { Inset } from './flex/node.js' -import { Overflow } from 'yoga-layout/wasm-async' +import { Overflow } from 'yoga-layout' const dotLt45deg = Math.cos((45 / 180) * Math.PI) diff --git a/packages/uikit/src/components/fullscreen.tsx b/packages/uikit/src/components/fullscreen.tsx index db7aba6b..b8611c05 100644 --- a/packages/uikit/src/components/fullscreen.tsx +++ b/packages/uikit/src/components/fullscreen.tsx @@ -11,7 +11,6 @@ export const Fullscreen = forwardRef< ComponentInternals, RootProperties & { children?: ReactNode - precision?: number attachCamera?: boolean pixelSize?: number } & EventHandlers & diff --git a/packages/uikit/src/components/input.tsx b/packages/uikit/src/components/input.tsx index 230cc31c..47c95c15 100644 --- a/packages/uikit/src/components/input.tsx +++ b/packages/uikit/src/components/input.tsx @@ -52,10 +52,10 @@ export type InputProperties = WithFocus export type InputInternals = ComponentInternals & { readonly value: string | ReadonlySignal; focus: () => void } -const cancelMap = new Map() +const cancelSet = new Set() function cancelBlur(event: PointerEvent) { - cancelMap.delete(event) + cancelSet.add(event) } export const canvasInputProps = { @@ -63,13 +63,11 @@ export const canvasInputProps = { if (!(document.activeElement instanceof HTMLElement)) { return } + if (!cancelSet.has(e.nativeEvent)) { + return + } + cancelSet.delete(e.nativeEvent) e.preventDefault() - const element = document.activeElement - const ref = setTimeout(() => { - cancelMap.delete(e.nativeEvent) - element.blur() - }) - cancelMap.set(e.nativeEvent, ref as any) }, } diff --git a/packages/uikit/src/components/root.tsx b/packages/uikit/src/components/root.tsx index ffa363e7..f4a529f7 100644 --- a/packages/uikit/src/components/root.tsx +++ b/packages/uikit/src/components/root.tsx @@ -1,6 +1,6 @@ import { ReactNode, forwardRef, useEffect, useMemo, useRef } from 'react' import { FlexNode, YogaProperties } from '../flex/node.js' -import { RootGroupProvider, alignmentXMap, alignmentYMap, useLoadYoga } from '../utils.js' +import { RootGroupProvider, alignmentXMap, alignmentYMap } from '../utils.js' import { InstancedPanelProvider, InteractionGroup, @@ -42,11 +42,9 @@ import { ElementType, patchRenderOrder, useOrderInfo } from '../order.js' import { useApplyPreferredColorSchemeProperties } from '../dark.js' import { useApplyActiveProperties } from '../active.js' -export const DEFAULT_PRECISION = 0.1 +//export const DEFAULT_PRECISION = 0.1 export const DEFAULT_PIXEL_SIZE = 0.002 -export function useRootLayout() {} - export type RootProperties = WithConditionals< WithClasses< WithAllAliases< @@ -63,7 +61,6 @@ export const Root = forwardRef< ComponentInternals, RootProperties & { children?: ReactNode - precision?: number anchorX?: keyof typeof alignmentXMap anchorY?: keyof typeof alignmentYMap pixelSize?: number @@ -82,19 +79,14 @@ export const Root = forwardRef< useEffect(() => patchRenderOrder(renderer), [renderer]) const { sizeX, sizeY } = properties - const [precision, pixelSize] = useMemo( - () => [properties.precision ?? DEFAULT_PRECISION, properties.pixelSize ?? DEFAULT_PIXEL_SIZE], - // eslint-disable-next-line react-hooks/exhaustive-deps - [], - ) - const yoga = useLoadYoga() + const pixelSize = properties.pixelSize ?? DEFAULT_PIXEL_SIZE const distanceToCameraRef = useMemo(() => ({ current: 0 }), []) const groupRef = useRef(null) const requestLayout = useDeferredRequestLayoutCalculation() const node = useMemo( - () => new FlexNode(groupRef, distanceToCameraRef, yoga, precision, pixelSize, requestLayout, undefined), + () => new FlexNode(groupRef, distanceToCameraRef, pixelSize, requestLayout, undefined), // eslint-disable-next-line react-hooks/exhaustive-deps - [requestLayout, groupRef, yoga], + [requestLayout, groupRef], ) useImmediateProperties(collection, node, flexAliasPropertyTransformation) useEffect(() => () => node.destroy(), [node]) diff --git a/packages/uikit/src/flex/node.ts b/packages/uikit/src/flex/node.ts index e67cf772..d9aba580 100644 --- a/packages/uikit/src/flex/node.ts +++ b/packages/uikit/src/flex/node.ts @@ -1,6 +1,6 @@ import { Group, Object3D, Vector2Tuple } from 'three' import { Signal, batch, computed, effect, signal } from '@preact/signals-core' -import { Edge, Node, Yoga, Overflow } from 'yoga-layout/wasm-async' +import Yoga, { Edge, ExperimentalFeature, Node, Overflow } from 'yoga-layout' import { setter } from './setter.js' import { setMeasureFunc, yogaNodeEqual } from './utils.js' import { WithImmediateProperties } from '../properties/immediate.js' @@ -8,11 +8,18 @@ import { RefObject } from 'react' import { CameraDistanceRef } from '../order.js' export type YogaProperties = { - [Key in keyof typeof setter]?: Parameters<(typeof setter)[Key]>[2] + [Key in keyof typeof setter]?: Parameters<(typeof setter)[Key]>[1] } export type Inset = [top: number, right: number, bottom: number, left: number] +export const PointScaleFactor = 100 + +export const defaultYogaConfig = Yoga.Config.create() +defaultYogaConfig.setUseWebDefaults(true) +defaultYogaConfig.setExperimentalFeatureEnabled(ExperimentalFeature.WebFlexBasis, true) +defaultYogaConfig.setPointScaleFactor(PointScaleFactor) + export class FlexNode implements WithImmediateProperties { public readonly size = signal([0, 0]) public readonly relativeCenter = signal([0, 0]) @@ -35,29 +42,24 @@ export class FlexNode implements WithImmediateProperties { constructor( private groupRef: RefObject, public cameraDistance: CameraDistanceRef, - public readonly yoga: Signal, - private precision: number, public readonly pixelSize: number, requestCalculateLayout: (node: FlexNode) => void, public readonly anyAncestorScrollable: Signal<[boolean, boolean]> | undefined, ) { this.requestCalculateLayout = () => requestCalculateLayout(this) this.unsubscribeYoga = effect(() => { - if (yoga.value == null) { - return - } this.unsubscribeYoga?.() this.unsubscribeYoga = undefined - this.yogaNode = yoga.value.Node.create() + this.yogaNode = Yoga.Node.create(defaultYogaConfig) this.active.value = true }) } setProperty(key: string, value: unknown): void { if (key === 'measureFunc') { - setMeasureFunc(this.yogaNode!, this.precision, value as any) + setMeasureFunc(this.yogaNode!, value as any) } else { - setter[key as keyof typeof setter](this.yogaNode!, this.precision, value as any) + setter[key as keyof typeof setter](this.yogaNode!, value as any) } this.requestCalculateLayout() } @@ -82,7 +84,7 @@ export class FlexNode implements WithImmediateProperties { return } this.commit() - this.yogaNode.calculateLayout() + this.yogaNode.calculateLayout(undefined, undefined) batch(() => this.updateMeasurements(undefined, undefined)) } @@ -90,8 +92,6 @@ export class FlexNode implements WithImmediateProperties { const child = new FlexNode( groupRef, this.cameraDistance, - this.yoga, - this.precision, this.pixelSize, this.requestCalculateLayout, computed(() => { @@ -191,30 +191,30 @@ export class FlexNode implements WithImmediateProperties { this.overflow.value = this.yogaNode.getOverflow() - const width = this.yogaNode.getComputedWidth() * this.precision - const height = this.yogaNode.getComputedHeight() * this.precision + const width = this.yogaNode.getComputedWidth() + const height = this.yogaNode.getComputedHeight() updateVector2Signal(this.size, width, height) parentWidth ??= width parentHeight ??= height - const x = this.yogaNode.getComputedLeft() * this.precision - const y = this.yogaNode.getComputedTop() * this.precision + const x = this.yogaNode.getComputedLeft() + const y = this.yogaNode.getComputedTop() const relativeCenterX = x + width * 0.5 - parentWidth * 0.5 const relativeCenterY = -(y + height * 0.5 - parentHeight * 0.5) updateVector2Signal(this.relativeCenter, relativeCenterX, relativeCenterY) - const paddingTop = this.yogaNode.getComputedPadding(Edge.Top) * this.precision - const paddingLeft = this.yogaNode.getComputedPadding(Edge.Left) * this.precision - const paddingRight = this.yogaNode.getComputedPadding(Edge.Right) * this.precision - const paddingBottom = this.yogaNode.getComputedPadding(Edge.Bottom) * this.precision + const paddingTop = this.yogaNode.getComputedPadding(Edge.Top) + const paddingLeft = this.yogaNode.getComputedPadding(Edge.Left) + const paddingRight = this.yogaNode.getComputedPadding(Edge.Right) + const paddingBottom = this.yogaNode.getComputedPadding(Edge.Bottom) updateInsetSignal(this.paddingInset, paddingTop, paddingRight, paddingBottom, paddingLeft) - const borderTop = this.yogaNode.getComputedBorder(Edge.Top) * this.precision - const borderRight = this.yogaNode.getComputedBorder(Edge.Right) * this.precision - const borderBottom = this.yogaNode.getComputedBorder(Edge.Bottom) * this.precision - const borderLeft = this.yogaNode.getComputedBorder(Edge.Left) * this.precision + const borderTop = this.yogaNode.getComputedBorder(Edge.Top) + const borderRight = this.yogaNode.getComputedBorder(Edge.Right) + const borderBottom = this.yogaNode.getComputedBorder(Edge.Bottom) + const borderLeft = this.yogaNode.getComputedBorder(Edge.Left) updateInsetSignal(this.borderInset, borderTop, borderRight, borderBottom, borderLeft) for (const layoutChangeListener of this.layoutChangeListeners) { diff --git a/packages/uikit/src/flex/utils.ts b/packages/uikit/src/flex/utils.ts index 8b6fbcaf..8ac7a1ab 100644 --- a/packages/uikit/src/flex/utils.ts +++ b/packages/uikit/src/flex/utils.ts @@ -1,19 +1,20 @@ -import { Node, MeasureFunction } from 'yoga-layout/wasm-async' +import { Node, MeasureFunction } from 'yoga-layout' +import { PointScaleFactor } from '.' export function yogaNodeEqual(n1: Node, n2: Node): boolean { - return (n1 as any)['L'] === (n2 as any)['L'] + return (n1 as any)['M']['O'] === (n2 as any)['M']['O'] } -export function setMeasureFunc(node: Node, precision: number, func: MeasureFunction | undefined): void { +export function setMeasureFunc(node: Node, func: MeasureFunction | undefined): void { if (func == null) { node.setMeasureFunc(null) return } node.setMeasureFunc((width, wMode, height, hMode) => { - const result = func(width * precision, wMode, height * precision, hMode) + const result = func(width, wMode, height, hMode) return { - width: Math.ceil(Math.ceil(result.width) / precision), - height: Math.ceil(Math.ceil(result.height) / precision), + width: Math.ceil(result.width * PointScaleFactor + 1) / PointScaleFactor, + height: Math.ceil(result.height * PointScaleFactor + 1) / PointScaleFactor, } }) node.markDirty() diff --git a/packages/uikit/src/text/layout.ts b/packages/uikit/src/text/layout.ts index f958596d..af9bc566 100644 --- a/packages/uikit/src/text/layout.ts +++ b/packages/uikit/src/text/layout.ts @@ -91,6 +91,8 @@ export function buildGlyphLayout( }) } + console.log(text, availableWidth, lines) + return { lines, availableHeight, diff --git a/packages/uikit/src/text/react.tsx b/packages/uikit/src/text/react.tsx index c112da46..a4b2954c 100644 --- a/packages/uikit/src/text/react.tsx +++ b/packages/uikit/src/text/react.tsx @@ -8,7 +8,7 @@ import { ClippingRect } from '../clipping.js' import { ManagerCollection, useGetBatchedProperties } from '../properties/utils.js' import { readReactive, useSignalEffect } from '../utils.js' import { loadCachedFont } from './cache.js' -import { MeasureFunction, MeasureMode } from 'yoga-layout/wasm-async' +import { MeasureFunction, MeasureMode } from 'yoga-layout' import { Font } from './font.js' import { GlyphLayout, GlyphLayoutProperties, buildGlyphLayout, measureGlyphLayout } from './layout.js' import { useFrame, useThree } from '@react-three/fiber' diff --git a/packages/uikit/src/utils.tsx b/packages/uikit/src/utils.tsx index ff402f90..a2fd4698 100644 --- a/packages/uikit/src/utils.tsx +++ b/packages/uikit/src/utils.tsx @@ -4,7 +4,6 @@ import { Vector2Tuple, BufferAttribute, Color, Group } from 'three' import { Color as ColorRepresentation } from '@react-three/fiber' import { Inset } from './flex/node.js' import { ManagerCollection, Properties } from './properties/utils.js' -import { Yoga, loadYoga } from 'yoga-layout/wasm-async' export const alignmentXMap = { left: 0.5, center: 0, right: -0.5 } export const alignmentYMap = { top: -0.5, center: 0, bottom: 0.5 } @@ -16,16 +15,6 @@ export function useSignalEffect(fn: () => (() => void) | void, deps: Array) useEffect(() => unsubscribe, [unsubscribe]) } -let yoga: Signal | undefined - -export function useLoadYoga(): Signal { - if (yoga == null) { - const result = (yoga = signal(undefined)) - loadYoga().then((value) => (result.value = value)) - } - return yoga -} - export function useResourceWithParams>( fn: (param: P, ...additional: A) => Promise, param: Signal

| P, diff --git a/packages/uikit/tests/flex.spec.ts b/packages/uikit/tests/flex.spec.ts index 34910b1a..4675d706 100644 --- a/packages/uikit/tests/flex.spec.ts +++ b/packages/uikit/tests/flex.spec.ts @@ -1,9 +1,8 @@ import { expect } from 'chai' -import { +import Yoga, { Align, Overflow, Node, - Yoga, Edge, Display, FlexDirection, @@ -11,10 +10,8 @@ import { Justify, PositionType, Unit, - loadYoga, -} from 'yoga-layout/wasm-async' -import { FlexNode, YogaProperties, setMeasureFunc, setter } from '../src/flex/index.js' -import { signal } from '@preact/signals-core' +} from 'yoga-layout' +import { YogaProperties, defaultYogaConfig, setMeasureFunc, setter } from '../src/flex/index.js' const testValues: YogaProperties = { alignContent: 'center', @@ -121,22 +118,47 @@ function getRawValue(property: string, node: Node): any { } describe('set & get properties', () => { - let yoga: any let node: Node const rawValues: any = {} before(async () => { - yoga = await loadYoga().catch(console.error) - node = yoga.Node.create() + 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) + + parent.insertChild(child1, 0) + parent.insertChild(child2, 1) + + child1.getParent()?.removeChild(child1) + child2.getParent()?.removeChild(child2) + + expect(() => parent.insertChild(child1, 1)).to.not.throw + expect(() => parent.insertChild(child2, 0)).to.not.throw + }) + + it('it change parents', () => { + const child = Yoga.Node.create(defaultYogaConfig) + const parent1 = Yoga.Node.create(defaultYogaConfig) + const parent2 = Yoga.Node.create(defaultYogaConfig) + + parent1.insertChild(child, 0) + + child.getParent()?.removeChild(child) + + expect(() => parent2.insertChild(child, 0)).to.not.throw }) it('it should throw an error', () => { - expect(() => setter.alignItems(node, 1, 'centerx' as any), 'assign alignItems a unknown value').to.throw( + expect(() => setter.alignItems(node, 'centerx' as any), 'assign alignItems a unknown value').to.throw( `unexpected value centerx, expected auto, flex-start, center, flex-end, stretch, baseline, space-between, space-around`, ) - expect(() => setter.alignItems(node, 1, 1 as any), 'assign alignItems a wrong value type').to.throw( + expect(() => setter.alignItems(node, 1 as any), 'assign alignItems a wrong value type').to.throw( `unexpected value 1, expected auto, flex-start, center, flex-end, stretch, baseline, space-between, space-around`, ) }) @@ -149,7 +171,7 @@ describe('set & get properties', () => { it('it should set new values', () => { ;(Object.entries(testValues) as Array<[keyof YogaProperties, any]>).forEach(([name, value]) => - setter[name](node, 1, value), + setter[name](node, value), ) properties.forEach((property) => expect(getRawValue(property, node), `compare ${property} to expected value`).to.equal( @@ -159,20 +181,20 @@ describe('set & get properties', () => { }) it('it should reset all values', () => { - ;(Object.keys(testValues) as Array).forEach((name) => setter[name](node, 1, undefined)) + ;(Object.keys(testValues) as Array).forEach((name) => setter[name](node, undefined)) properties.forEach((property) => { expect(equal(getRawValue(property, node), rawValues[property]), `compare ${property} to the default value`).to.be .true }) }) - it('it should set value with and without precision', () => { - setter.width(node, 0.01, 1) + it('it should set value as points or precentages', () => { + setter.width(node, 10.5) expect(node.getWidth()).to.deep.equal({ unit: Unit.Point, - value: 100, + value: 10.5, }) - setter.width(node, 0.01, '50%') + setter.width(node, '50%') expect(node.getWidth()).to.deep.equal({ unit: Unit.Percent, value: 50, @@ -181,20 +203,19 @@ describe('set & get properties', () => { it('it should set and unset measure func', () => { expect(() => { - setMeasureFunc(node, 0.01, () => ({ width: 0, height: 0 })) + setMeasureFunc(node, () => ({ width: 0, height: 0 })) node.unsetMeasureFunc() }).to.not.throw() }) }) +/* describe('flex node', () => { - let yoga: any let parent: FlexNode let child1: FlexNode let child2: FlexNode before(async () => { - yoga = await loadYoga() parent = new FlexNode(signal(yoga), 0.01, 1, () => {}) child1 = parent.createChild() child2 = parent.createChild() @@ -311,7 +332,7 @@ describe('flex node', () => { expect(child1.outerBounds.value[0][1], 'child 1 top').to.equal(0) expect(child1.outerBounds.value[1][1], 'child 1 height').to.equal(0.33) }) -}) +})*/ function equal(val1: any, val2: any) { return val1 === val2 || (isNaN(val1) && isNaN(val2)) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea8306b6..94758ba7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -468,8 +468,8 @@ importers: specifier: ^2.4.2 version: 2.4.2 yoga-layout: - specifier: ^2.0.1 - version: 2.0.1 + specifier: ^3.0.2 + version: 3.0.2 zod: specifier: ^3.22.4 version: 3.22.4 @@ -7127,8 +7127,8 @@ packages: engines: {node: '>=10'} dev: true - /yoga-layout@2.0.1: - resolution: {integrity: sha512-tT/oChyDXelLo2A+UVnlW9GU7CsvFMaEnd9kVFsaiCQonFAXd3xrHhkLYu+suwwosrAEQ746xBU+HvYtm1Zs2Q==} + /yoga-layout@3.0.2: + resolution: {integrity: sha512-/QSkaNPadLnnBbKoN2Pk36bihWO9b8herZ4nkry/h51KGnKb1CliASdeTmio9wVXmzecqnrfaf9aPIb+GTwLCg==} dev: false /zod@3.22.4: From c21511d378658c586bea38c8b4f731fb78eca9d1 Mon Sep 17 00:00:00 2001 From: Bela Bohlender Date: Tue, 26 Mar 2024 17:07:38 +0100 Subject: [PATCH 2/3] fix: removing yoga nodes & demos for yoga3.0 --- examples/apfel/src/App.tsx | 37 +++++++------ examples/apfel/src/components/button.tsx | 4 +- examples/apfel/src/components/card.tsx | 2 +- examples/apfel/src/components/checkbox.tsx | 4 +- examples/apfel/src/components/input.tsx | 4 +- examples/apfel/src/components/list.tsx | 6 +- examples/apfel/src/components/loading.tsx | 4 +- examples/apfel/src/components/progress.tsx | 4 +- examples/apfel/src/components/slider.tsx | 4 +- examples/apfel/src/components/tab-bar.tsx | 2 +- examples/apfel/src/components/tabs.tsx | 4 +- examples/apfel/vite.config.ts | 3 + examples/auth/src/App.tsx | 2 +- examples/auth/vite.config.ts | 3 + examples/card/src/App.jsx | 12 ++-- examples/dashboard/src/App.tsx | 55 +++++++++++-------- .../src/components/DateRangePicker.tsx | 2 +- examples/dashboard/src/components/MainNav.tsx | 2 +- .../dashboard/src/components/Overview.tsx | 4 +- .../dashboard/src/components/RecentSales.tsx | 4 +- .../dashboard/src/components/TeamSwitcher.tsx | 4 +- examples/dashboard/src/components/UserNav.tsx | 10 ++-- examples/default/src/App.tsx | 54 +++++++++--------- examples/default/src/components/accordion.tsx | 2 +- .../default/src/components/alert-dialog.tsx | 2 +- examples/default/src/components/alert.tsx | 4 +- examples/default/src/components/avatar.tsx | 2 +- examples/default/src/components/badge.tsx | 2 +- examples/default/src/components/button.tsx | 2 +- examples/default/src/components/card.tsx | 14 ++--- examples/default/src/components/checkbox.tsx | 4 +- examples/default/src/components/dialog.tsx | 8 +-- examples/default/src/components/input.tsx | 2 +- examples/default/src/components/label.tsx | 4 +- .../default/src/components/pagination.tsx | 2 +- examples/default/src/components/progress.tsx | 2 +- .../default/src/components/radio-group.tsx | 4 +- examples/default/src/components/separator.tsx | 8 +-- examples/default/src/components/skeleton.tsx | 4 +- examples/default/src/components/slider.tsx | 2 +- examples/default/src/components/switch.tsx | 4 +- examples/default/src/components/tabs.tsx | 20 +++---- .../default/src/components/toggle-group.tsx | 2 +- examples/default/src/components/toggle.tsx | 2 +- examples/default/src/components/tooltip.tsx | 2 +- examples/market/src/App.tsx | 31 +++++------ .../market/src/components/album-artwork.tsx | 4 +- examples/market/src/components/menu.tsx | 2 +- examples/market/src/components/sidebar.tsx | 14 ++--- examples/uikit/src/App.tsx | 54 ++++++++++++++---- examples/uikit/src/index.tsx | 2 +- examples/uikit/vite.config.ts | 3 + packages/kits/apfel/button.tsx | 2 +- packages/kits/apfel/input.tsx | 4 +- packages/kits/apfel/loading.tsx | 1 + packages/kits/apfel/tabs.tsx | 1 + packages/kits/default/alert-dialog.tsx | 1 + packages/kits/default/alert.tsx | 10 +++- packages/kits/default/card.tsx | 2 +- packages/kits/default/dialog.tsx | 1 + packages/kits/default/radio-group.tsx | 2 +- packages/kits/default/slider.tsx | 1 + packages/kits/default/tabs.tsx | 1 + packages/uikit/src/components/root.tsx | 1 - packages/uikit/src/flex/node.ts | 17 ++++-- packages/uikit/src/flex/utils.ts | 2 +- packages/uikit/src/text/layout.ts | 2 - 67 files changed, 276 insertions(+), 210 deletions(-) diff --git a/examples/apfel/src/App.tsx b/examples/apfel/src/App.tsx index 71698e53..2b6f9242 100644 --- a/examples/apfel/src/App.tsx +++ b/examples/apfel/src/App.tsx @@ -2,21 +2,21 @@ import { Canvas } from '@react-three/fiber' import { Fullscreen, Text, Container } from '@react-three/uikit' import { Copy } from '@react-three/uikit-lucide' import { XWebPointers, noEvents } from '@coconut-xr/xinteraction/react' -import { Card } from '@/card' -import { Button } from '@/button' -import { Tabs, TabsButton } from '@/tabs' -import { Defaults } from '@/theme' +import { Card } from '@/card.js' +import { Button } from '@/button.js' +import { Tabs, TabsButton } from '@/tabs.js' +import { Defaults } from '@/theme.js' import { useState } from 'react' -import { TextOnCard } from './components/card' -import { CheckboxOnCard } from './components/checkbox' -import { ButtonsOnCard } from './components/button' -import { ListsOnCard } from './components/list' -import { SlidersOnCard } from './components/slider' -import { TabsOnCard } from './components/tabs' -import { TabBarWithText } from './components/tab-bar' -import { ProgressBarsOnCard } from './components/progress' -import { LoadingSpinnersOnCard } from './components/loading' -import { InputsOnCard } from './components/input' +import { TextOnCard } from './components/card.js' +import { CheckboxOnCard } from './components/checkbox.js' +import { ButtonsOnCard } from './components/button.js' +import { ListsOnCard } from './components/list.js' +import { SlidersOnCard } from './components/slider.js' +import { TabsOnCard } from './components/tabs.js' +import { TabBarWithText } from './components/tab-bar.js' +import { ProgressBarsOnCard } from './components/progress.js' +import { LoadingSpinnersOnCard } from './components/loading.js' +import { InputsOnCard } from './components/input.js' const componentPages = { card: TextOnCard, @@ -59,14 +59,15 @@ export default function App() { overflow="scroll" scrollbarColor="black" backgroundColor="white" + flexDirection="column" gap={32} paddingX={32} alignItems="center" padding={32} > - + - + {Object.keys(componentPages).map((name) => ( @@ -78,11 +79,11 @@ export default function App() { - + - + npx uikit component add apfel {component} diff --git a/examples/apfel/src/components/button.tsx b/examples/apfel/src/components/button.tsx index fd5e25d6..e0af9caf 100644 --- a/examples/apfel/src/components/button.tsx +++ b/examples/apfel/src/components/button.tsx @@ -1,6 +1,6 @@ import { Container, Text } from '@react-three/uikit' -import { Card } from '@/card' -import { Button } from '@/button' +import { Card } from '@/card.js' +import { Button } from '@/button.js' import { BoxSelect } from '@react-three/uikit-lucide' export function ButtonsOnCard() { diff --git a/examples/apfel/src/components/card.tsx b/examples/apfel/src/components/card.tsx index 1a57168d..7e14d908 100644 --- a/examples/apfel/src/components/card.tsx +++ b/examples/apfel/src/components/card.tsx @@ -1,5 +1,5 @@ import { Text } from '@react-three/uikit' -import { Card } from '@/card' +import { Card } from '@/card.js' export function TextOnCard() { return ( diff --git a/examples/apfel/src/components/checkbox.tsx b/examples/apfel/src/components/checkbox.tsx index 5df94b90..465325e1 100644 --- a/examples/apfel/src/components/checkbox.tsx +++ b/examples/apfel/src/components/checkbox.tsx @@ -1,5 +1,5 @@ -import { Card } from '@/card' -import { Checkbox } from '@/checkbox' +import { Card } from '@/card.js' +import { Checkbox } from '@/checkbox.js' export function CheckboxOnCard() { return ( diff --git a/examples/apfel/src/components/input.tsx b/examples/apfel/src/components/input.tsx index f296ae3f..4cfc0a09 100644 --- a/examples/apfel/src/components/input.tsx +++ b/examples/apfel/src/components/input.tsx @@ -1,5 +1,5 @@ -import { Card } from '@/card' -import { Input } from '@/input' +import { Card } from '@/card.js' +import { Input } from '@/input.js' import { Container } from '@react-three/uikit' import { BoxSelect } from '@react-three/uikit-lucide' import { useState } from 'react' diff --git a/examples/apfel/src/components/list.tsx b/examples/apfel/src/components/list.tsx index a70e9901..5eda95fe 100644 --- a/examples/apfel/src/components/list.tsx +++ b/examples/apfel/src/components/list.tsx @@ -1,8 +1,8 @@ import { Text, Container } from '@react-three/uikit' import { BoxSelect, ChevronRight, Info } from '@react-three/uikit-lucide' -import { Card } from '@/card' -import { List, ListItem } from '@/list' -import { Button } from '@/button' +import { Card } from '@/card.js' +import { List, ListItem } from '@/list.js' +import { Button } from '@/button.js' export function ListsOnCard() { return ( diff --git a/examples/apfel/src/components/loading.tsx b/examples/apfel/src/components/loading.tsx index bc2fcd46..5bb09772 100644 --- a/examples/apfel/src/components/loading.tsx +++ b/examples/apfel/src/components/loading.tsx @@ -1,5 +1,5 @@ -import { Card } from '@/card' -import { Loading } from '@/loading' +import { Card } from '@/card.js' +import { Loading } from '@/loading.js' export function LoadingSpinnersOnCard() { return ( diff --git a/examples/apfel/src/components/progress.tsx b/examples/apfel/src/components/progress.tsx index 6c130e3e..c6096eed 100644 --- a/examples/apfel/src/components/progress.tsx +++ b/examples/apfel/src/components/progress.tsx @@ -1,5 +1,5 @@ -import { Card } from '@/card' -import { Progress } from '@/progress' +import { Card } from '@/card.js' +import { Progress } from '@/progress.js' export function ProgressBarsOnCard() { return ( diff --git a/examples/apfel/src/components/slider.tsx b/examples/apfel/src/components/slider.tsx index 2502dadc..a8f74342 100644 --- a/examples/apfel/src/components/slider.tsx +++ b/examples/apfel/src/components/slider.tsx @@ -1,7 +1,7 @@ import { Container } from '@react-three/uikit' import { BoxSelect } from '@react-three/uikit-lucide' -import { Card } from '@/card' -import { Slider } from '@/slider' +import { Card } from '@/card.js' +import { Slider } from '@/slider.js' export function SlidersOnCard() { return ( diff --git a/examples/apfel/src/components/tab-bar.tsx b/examples/apfel/src/components/tab-bar.tsx index b9c4c5e4..494d3bf4 100644 --- a/examples/apfel/src/components/tab-bar.tsx +++ b/examples/apfel/src/components/tab-bar.tsx @@ -1,6 +1,6 @@ import { Text } from '@react-three/uikit' import { BoxSelect } from '@react-three/uikit-lucide' -import { TabBar, TabBarItem } from '@/tab-bar' +import { TabBar, TabBarItem } from '@/tab-bar.js' export function TabBarWithText() { return ( diff --git a/examples/apfel/src/components/tabs.tsx b/examples/apfel/src/components/tabs.tsx index 8e6265dd..93be79a0 100644 --- a/examples/apfel/src/components/tabs.tsx +++ b/examples/apfel/src/components/tabs.tsx @@ -1,7 +1,7 @@ import { Text } from '@react-three/uikit' import { BoxSelect } from '@react-three/uikit-lucide' -import { Card } from '@/card' -import { Tabs, TabsButton } from '@/tabs' +import { Card } from '@/card.js' +import { Tabs, TabsButton } from '@/tabs.js' export function TabsOnCard() { return ( diff --git a/examples/apfel/vite.config.ts b/examples/apfel/vite.config.ts index bf166408..adccc4d7 100644 --- a/examples/apfel/vite.config.ts +++ b/examples/apfel/vite.config.ts @@ -19,4 +19,7 @@ export default defineConfig({ { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/uikit/src/index.ts') }, ], }, + build: { + target: 'esnext', + }, }) diff --git a/examples/auth/src/App.tsx b/examples/auth/src/App.tsx index d9ea10d1..5778728f 100644 --- a/examples/auth/src/App.tsx +++ b/examples/auth/src/App.tsx @@ -10,7 +10,7 @@ import { } from '@react-three/uikit' import { Defaults, colors } from '@/theme.js' import { Button } from '@/button.js' -import { UserAuthForm } from './components/user-auth-form' +import { UserAuthForm } from './components/user-auth-form.js' import { Perf } from 'r3f-perf' setPreferredColorScheme('light') diff --git a/examples/auth/vite.config.ts b/examples/auth/vite.config.ts index 56ca039d..085b206a 100644 --- a/examples/auth/vite.config.ts +++ b/examples/auth/vite.config.ts @@ -18,4 +18,7 @@ export default defineConfig({ { find: '@react-three/uikit', replacement: path.resolve(__dirname, '../../packages/uikit/src/index.ts') }, ], }, + build: { + target: 'esnext', + }, }) diff --git a/examples/card/src/App.jsx b/examples/card/src/App.jsx index 214a8921..74c4d36e 100644 --- a/examples/card/src/App.jsx +++ b/examples/card/src/App.jsx @@ -2,15 +2,15 @@ import { Environment, MeshPortalMaterial, PerspectiveCamera } from '@react-three import { Canvas, extend, useFrame } from '@react-three/fiber' import { Root, Container, Text, setPreferredColorScheme, Content, Fullscreen } from '@react-three/uikit' import { BellRing, Check } from '@react-three/uikit-lucide' -import { Defaults, colors } from '@/theme' -import { Avatar } from '@/avatar' -import { Button } from '@/button' -import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/card' -import { Switch } from '@/switch' +import { Defaults, colors } from '@/theme.js' +import { Avatar } from '@/avatar.js' +import { Button } from '@/button.js' +import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/card.js' +import { Switch } from '@/switch.js' import { useMemo, useRef } from 'react' import { signal } from '@preact/signals-core' import { geometry, easing } from 'maath' -import { Floating, Physical } from './components/Simulation' +import { Floating, Physical } from './components/Simulation.js' extend(geometry) setPreferredColorScheme('light') diff --git a/examples/dashboard/src/App.tsx b/examples/dashboard/src/App.tsx index 34c67a29..8a4ec4b9 100644 --- a/examples/dashboard/src/App.tsx +++ b/examples/dashboard/src/App.tsx @@ -3,18 +3,18 @@ import { Canvas } from '@react-three/fiber' import { Container, Fullscreen, Text, setPreferredColorScheme } from '@react-three/uikit' import { Activity, CreditCard, DollarSign, Users } from '@react-three/uikit-lucide' -import { Defaults, colors } from '@/theme' -import { Button } from '@/button' -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/card' -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/tabs' -import { DialogAnchor } from '@/dialog' +import { Defaults, colors } from '@/theme.js' +import { Button } from '@/button.js' +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/card.js' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/tabs.js' +import { DialogAnchor } from '@/dialog.js' import { noEvents, XWebPointers } from '@coconut-xr/xinteraction/react' -import { CalendarDateRangePicker } from './components/DateRangePicker' -import { MainNav } from './components/MainNav' -import { Overview } from './components/Overview' -import { RecentSales } from './components/RecentSales' -import { TeamSwitcher } from './components/TeamSwitcher' -import { UserNav } from './components/UserNav' +import { CalendarDateRangePicker } from './components/DateRangePicker.js' +import { MainNav } from './components/MainNav.js' +import { Overview } from './components/Overview.js' +import { RecentSales } from './components/RecentSales.js' +import { TeamSwitcher } from './components/TeamSwitcher.js' +import { UserNav } from './components/UserNav.js' setPreferredColorScheme('light') @@ -44,8 +44,8 @@ export default function App() { export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) { return ( - - + + @@ -62,7 +62,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + Dashboard @@ -88,11 +88,17 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open Notifications - - + + - + Total Revenue @@ -100,7 +106,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + $45,231.89 @@ -115,6 +121,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open alignItems="center" justifyContent="space-between" paddingBottom={8} + flexShrink={0} gap={0} > @@ -124,7 +131,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + +2350 @@ -142,6 +149,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open justifyContent="space-between" paddingBottom={2} gap={0} + flexShrink={0} > @@ -150,7 +158,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + +12,234 @@ -166,6 +174,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open justifyContent="space-between" paddingBottom={2} gap={0} + flexShrink={0} > @@ -174,7 +183,7 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + +573 @@ -185,14 +194,14 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open - + Overview - + diff --git a/examples/dashboard/src/components/DateRangePicker.tsx b/examples/dashboard/src/components/DateRangePicker.tsx index 3c9ff943..d49e75ff 100644 --- a/examples/dashboard/src/components/DateRangePicker.tsx +++ b/examples/dashboard/src/components/DateRangePicker.tsx @@ -1,6 +1,6 @@ import { Text } from '@react-three/uikit' import { Calendar } from '@react-three/uikit-lucide' -import { Button } from '@/button' +import { Button } from '@/button.js' export function CalendarDateRangePicker() { return ( diff --git a/examples/dashboard/src/components/MainNav.tsx b/examples/dashboard/src/components/MainNav.tsx index 31f61057..1c0c6f49 100644 --- a/examples/dashboard/src/components/MainNav.tsx +++ b/examples/dashboard/src/components/MainNav.tsx @@ -1,6 +1,6 @@ import { ComponentPropsWithoutRef } from 'react' import { Container, Text } from '@react-three/uikit' -import { colors } from '@/theme' +import { colors } from '@/theme.js' export function MainNav(props: Omit, 'children'>) { return ( diff --git a/examples/dashboard/src/components/Overview.tsx b/examples/dashboard/src/components/Overview.tsx index df61c195..b2c9fb11 100644 --- a/examples/dashboard/src/components/Overview.tsx +++ b/examples/dashboard/src/components/Overview.tsx @@ -1,5 +1,5 @@ import { Container, Text } from '@react-three/uikit' -import { colors } from '@/theme' +import { colors } from '@/theme.js' const data = [ { @@ -58,7 +58,7 @@ const yAxisLabels = ['$6000', '$4500', '$3000', '$1500', '$0'] export function Overview() { return ( - + {Object.keys(componentPages).map((name) => ( - + {name[0].toUpperCase()} {name.slice(1)} diff --git a/examples/default/src/components/accordion.tsx b/examples/default/src/components/accordion.tsx index f402b365..9f5d39b1 100644 --- a/examples/default/src/components/accordion.tsx +++ b/examples/default/src/components/accordion.tsx @@ -1,5 +1,5 @@ import { Text, Container } from '@react-three/uikit' -import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/accordion' +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/accordion.js' //TODO: type="single" collapsible export function AccordionDemo() { diff --git a/examples/default/src/components/alert-dialog.tsx b/examples/default/src/components/alert-dialog.tsx index 9fee4431..a89866fd 100644 --- a/examples/default/src/components/alert-dialog.tsx +++ b/examples/default/src/components/alert-dialog.tsx @@ -1,5 +1,5 @@ import { Text } from '@react-three/uikit' -import { Button } from '@/button' +import { Button } from '@/button.js' import { AlertDialog, AlertDialogAction, diff --git a/examples/default/src/components/alert.tsx b/examples/default/src/components/alert.tsx index 0c8cf1b8..1c0a57ee 100644 --- a/examples/default/src/components/alert.tsx +++ b/examples/default/src/components/alert.tsx @@ -1,10 +1,10 @@ import { Text } from '@react-three/uikit' import { Terminal } from '@react-three/uikit-lucide' -import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@/alert' +import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@/alert.js' export function AlertDemo() { return ( - + diff --git a/examples/default/src/components/avatar.tsx b/examples/default/src/components/avatar.tsx index cdf5acc5..a3f364dd 100644 --- a/examples/default/src/components/avatar.tsx +++ b/examples/default/src/components/avatar.tsx @@ -1,5 +1,5 @@ import { Container } from '@react-three/uikit' -import { Avatar } from '@/avatar' +import { Avatar } from '@/avatar.js' export function AvatarDemo() { return ( diff --git a/examples/default/src/components/badge.tsx b/examples/default/src/components/badge.tsx index aed02b34..6469a384 100644 --- a/examples/default/src/components/badge.tsx +++ b/examples/default/src/components/badge.tsx @@ -1,5 +1,5 @@ import { Text } from '@react-three/uikit' -import { Badge } from '@/badge' +import { Badge } from '@/badge.js' export function BadgeDemo() { return ( diff --git a/examples/default/src/components/button.tsx b/examples/default/src/components/button.tsx index d965150a..6e78516c 100644 --- a/examples/default/src/components/button.tsx +++ b/examples/default/src/components/button.tsx @@ -1,5 +1,5 @@ import { ChevronRight } from '@react-three/uikit-lucide' -import { Button } from '@/button' +import { Button } from '@/button.js' export function ButtonDemo() { return ( diff --git a/examples/default/src/components/card.tsx b/examples/default/src/components/card.tsx index 5c880203..e91a1dfd 100644 --- a/examples/default/src/components/card.tsx +++ b/examples/default/src/components/card.tsx @@ -1,9 +1,9 @@ import { Text, Container } from '@react-three/uikit' import { BellRing, Check } from '@react-three/uikit-lucide' -import { colors } from '@/theme' -import { Button } from '@/button' -import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/card' -import { Switch } from '@/switch' +import { colors } from '@/theme.js' +import { Button } from '@/button.js' +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/card.js' +import { Switch } from '@/switch.js' const notifications = [ { @@ -34,7 +34,7 @@ export function CardDemo() { - + Push Notifications @@ -44,7 +44,7 @@ export function CardDemo() { - + {notifications.map((notification, index) => ( - + {notification.title} diff --git a/examples/default/src/components/checkbox.tsx b/examples/default/src/components/checkbox.tsx index c54811a4..751ddf5e 100644 --- a/examples/default/src/components/checkbox.tsx +++ b/examples/default/src/components/checkbox.tsx @@ -1,6 +1,6 @@ import { Text, Container } from '@react-three/uikit' -import { Checkbox } from '@/checkbox' -import { Label } from '@/label' +import { Checkbox } from '@/checkbox.js' +import { Label } from '@/label.js' export function CheckboxDemo() { return ( diff --git a/examples/default/src/components/dialog.tsx b/examples/default/src/components/dialog.tsx index 6ad197c3..00d6a591 100644 --- a/examples/default/src/components/dialog.tsx +++ b/examples/default/src/components/dialog.tsx @@ -1,6 +1,6 @@ import { Text, Container } from '@react-three/uikit' -import { Button } from '@/button' -import { Label } from '@/label' +import { Button } from '@/button.js' +import { Label } from '@/label.js' import { Dialog, DialogContent, @@ -9,7 +9,7 @@ import { DialogHeader, DialogTitle, DialogTrigger, -} from '@/dialog' +} from '@/dialog.js' export function DialogDemo() { return ( @@ -28,7 +28,7 @@ export function DialogDemo() { Make changes to your profile here. Click save when you're done. - +