chore: Tracking down undefined value

Author: s4l4x

demo/src/sandboxes/leva-busy/src/App.tsx

@@ -48,7 +48,7 @@ function Controls() {
   const data = useControls({
     vector2d: [10, 10],
     vector3d: [10, 10, 10],
-    vector3j: vector3j([20, 20, 20]),
+    vector3j: vector3j({ value: { x: 20, y: 20, z: 20 }, lock: true }),
     curve: bezier([0.54, 0.05, 0.6, 0.98]),
     dimension: '4px',
     string: { value: 'something', optional: true, order: -2 },

packages/leva/src/components/Vector/vector-plugin.ts

@@ -145,6 +145,7 @@ export function normalizeVector<Value extends VectorType, K extends string>(
 ) {
   const { lock = false, ..._settings } = settings
   const format: Format = Array.isArray(value) ? 'array' : 'object'
+  // FIXME: This is crashing: value is undefined
   const keys = format === 'object' ? Object.keys(value) : defaultKeys
   const _value = convert(value, 'object', keys)
 

packages/plugin-vector3j/src/Vector3j.tsx

@@ -1,5 +1,5 @@
 // import { Joystick3d } from './UI/Joystick3d'
-// import type { Vector3jProps } from './vector3j-types'
+import type { Vector3jProps, Vector3dProps } from './vector3j-types'
 
 // export function Vector3j() {
 //   const { label, displayValue, onUpdate, settings } = useInputContext<Vector3jProps>()
@@ -14,54 +14,26 @@
 //   )
 // }
 
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Components, useInputContext } from 'leva/plugin'
-import DatePicker, { CalendarContainer } from 'react-datepicker'
-import 'react-datepicker/dist/react-datepicker.css'
-import { DateCalendarContainerProps, DateInputProps, DateProps } from './vector3j-types'
-import { InputContainer, StyledInput, StyledWrapper } from './StyledVector3j'
+import { InputContainer } from './StyledVector3j'
 
 const { Label, Row, Vector } = Components
 
-const DateCalendarContainer = ({ children }: DateCalendarContainerProps) => {
-  return (
-    <CalendarContainer>
-      <StyledWrapper>{children}</StyledWrapper>
-    </CalendarContainer>
-  )
-}
-
-const DateInput = forwardRef<HTMLInputElement, Partial<DateInputProps>>(({ value, onClick, onChange }, ref) => {
-  return <StyledInput ref={ref} value={value} onClick={onClick} onChange={onChange} />
-})
-
 export function Vector3j() {
-  const { label, value, onUpdate, settings } = useInputContext<DateProps>()
+  const { label, displayValue, onUpdate, settings } = useInputContext<Vector3dProps>()
+
+  console.log('Vector3j', displayValue, settings)
 
+  /* FIXME: replace true with !!settings.joystick */
+  /* FIXME: replace true with settings.joystick */
   return (
     <Row input>
       <Label>{label}</Label>
-      <InputContainer>
-        <DatePicker
-          selected={value.date}
-          onChange={onUpdate}
-          dateFormat={settings.inputFormat}
-          calendarContainer={DateCalendarContainer}
-          customInput={<DateInput />}
-        />
-      </InputContainer>
+      {/* <InputContainer withJoystick={true}> */}
+      {/* {true && <Joystick3d value={displayValue} settings={settings} onUpdate={onUpdate} />} */}
+      <Vector value={displayValue} settings={settings} onUpdate={onUpdate} />
+      {/* </InputContainer> */}
     </Row>
   )
 }
-
-/* FIXME: replace true with !!settings.joystick */
-/* FIXME: replace true with settings.joystick */
-/* 
-<Row input>
-<Label>{label}</Label>
-<InputContainer withJoystick={true}>
-  {true && <Joystick3d value={displayValue} settings={settings} onUpdate={onUpdate} />}
-  <Vector value={displayValue} settings={settings} onUpdate={onUpdate} />
-</InputContainer>
-</Row> 
-*/

packages/plugin-vector3j/src/index.ts

@@ -1,16 +1,54 @@
 import { createPlugin } from 'leva/plugin'
 // import { Vector3dSettings } from 'leva/plugin'
 // import { getVectorPlugin } from 'leva/plugin'
+import { getVectorSchema, normalizeVector, sanitizeVector, formatVector } from 'leva/plugin'
+
 import { Vector3j } from './Vector3j'
 import { sanitize, normalize, format } from './vector3j-plugin'
 
+import type { InputWithSettings } from 'leva/src/types'
+import type {
+  VectorType,
+  Format,
+  InternalVectorSettings,
+  VectorSettings,
+  VectorTypeFromValueFormatAndKeys,
+} from 'leva/src/components/Vector/vector-types'
+
 // ???
 // export * from './Vector3joy'
 
+// export const vector3j = createPlugin({
+//   sanitize,
+//   format,
+//   normalize,
+//   component: Vector3j,
+//   // ...getVectorPlugin(['x', 'y', 'z']),
+// })
+
+export function getVectorPlugin<K extends string>(defaultKeys: K[]) {
+  return {
+    schema: getVectorSchema(defaultKeys.length),
+    normalize: <Value extends VectorType>({
+      value,
+      ...settings
+    }: InputWithSettings<Value, VectorSettings<Value, K>>) => {
+      // FIXME: value is undefined???
+      console.log('normalize:', value, settings)
+      return normalizeVector(value, settings, defaultKeys)
+    },
+    format: (value: any, settings: InternalVectorSettings) => {
+      console.log('format:', value, settings)
+      return formatVector(value, settings)
+    },
+    sanitize: (value: any, settings: InternalVectorSettings, prevValue: any) => {
+      console.log('sanitize', value, settings)
+      return sanitizeVector(value, settings, prevValue)
+    },
+  }
+}
+
 export const vector3j = createPlugin({
-  sanitize,
-  format,
-  normalize,
   component: Vector3j,
-  // ...getVectorPlugin(['x', 'y', 'z']),
+  ...getVectorPlugin(['x', 'y', 'z']),
 })

packages/plugin-vector3j/src/vector3j-types.ts

@@ -26,3 +26,5 @@ export type InternalVector3dSettings = InternalVectorSettings<string, [string, s
   joystick: boolean | 'invertY'
 }
 export type Vector3jProps = LevaInputProps<Vector3d, InternalVector3dSettings, VectorObj>
+
+export type Vector3dProps = LevaInputProps<Vector3d, InternalVector3dSettings, VectorObj>