proposal: passing parent to the onAdd fn

[lawvs]

I suggest passing the parent value to the onAdd callback, this can reduce the workload of developers parsing the path.

/**
 * @param path path to the parent target where the value will be added
 */
type JsonViewerOnAdd = (path: Path) => void;

type JsonViewerProps<T = unknown> = {
  // ...
  onAdd?: JsonViewerOnAdd;
}

/**
 * @param path path to the parent target where the value will be added
+ * @param parent The value of the parent, a new value will be added to it
 */
- type JsonViewerOnAdd = (path: Path) => void;
+ type JsonViewerOnAdd = <U = unknown>(path: Path, parent: U) => void;

If you agree with this proposal, I would be pleased to submit a PR.

Related code

json-viewer/src/components/DataKeyPair.tsx

Lines 255 to 263 in 8d97593

	{enableAdd && (
	<IconBox
	onClick={event => {
	event.preventDefault()
	onAdd?.(path)
	}}
	>
	<AddBoxIcon sx={{ fontSize: '.8rem' }} />
	</IconBox>

[pionxzh]

I agree that it would be easier for developers to process it in some cases, but this change would make the API inconsistent. Instead, how about we provide a utility function getPathValue(obj, paths) that takes an object and a path array and returns the value at that path. This way, you can use it in any API to get the value at the path.

[lawvs]

I agree that it would be easier for developers to process it in some cases, but this change would make the API inconsistent. Instead, how about we provide a utility function getPathValue(obj, paths) that takes an object and a path array and returns the value at that path. This way, you can use it in any API to get the value at the path.

Good idea, additionally I suggest adding a getter to handle the user's custom objects.

// TODO fix types
function getPathValue<T = object, R = object>(
  obj: T,
  path: Path,
  getter: (obj: T, key: string | number) => unknown = (obj, key) =>
    (obj as any)[key],
) {
  return path.reduce(
    (acc, key) => getter(acc, key) as any,
    obj,
  ) as unknown as R;
}

[pionxzh]

ah ye, it would be better to have an optional getter to handle special data types. Then, this getter should also accept cases like return null or something to indicate that nothing being handled... not sure what kind of API shape would be better.

[pionxzh]

This is my draft api design.

interface CustomHandler {
  is: (value: unknown, path: Path) => boolean
  handler: (value: unknown, key: (string | number)) => unknown
}

function defaultHandler (value: unknown, key: (string | number)): unknown {
  ...
}

export function getPathValue<T = any> (
  obj: T,
  path: Path,
  customHandlers: CustomHandler[] = []
): unknown {
  try {
    return path.reduce((acc, key, index) => {
      if (acc === null || acc === undefined) {
        console.error('Invalid path or value encountered at path', path.slice(0, index))
        throw new Error('Invalid path or value encountered')
      }

      for (const handler of customHandlers) {
        if (handler.is(acc, key)) {
          return handler.handler(acc, key)
        }
      }
      return defaultHandler(acc, key)
    }, obj)
  } catch (error) {
    console.error(error)
    return null // or throw error?
  }
}

[pionxzh]

I will try to work on this tmr. Let me know If you agree with the draft. You can also send a PR if you want 🙏