feat(Forms): implement TypeScript version of json-pointer (#4000)

I believe this is the right step for now because the dependency we’re
using is written in CJS and doesn't treeshake unused parts. Since we
rely on this pointer in the default Eufemia Context, reducing its
footprint is my main motivation.

By using the native `foreach` method and the export approach in this PR,
we can ship smaller bundle (maybe 20%). In the future, we may consider
submitting a PR to the original dependency to address this issue
directly.

PR no. 4000

packages/dnb-eufemia/package.json

@@ -113,7 +113,6 @@
     "classnames": "2.3.1",
     "core-js": "3.26.1",
     "date-fns": "2.25.0",
-    "json-pointer": "0.6.2",
     "keycode": "2.2.1",
     "prop-types": "15.7.2",
     "what-input": "5.2.10"

packages/dnb-eufemia/src/extensions/forms/DataContext/At/At.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext } from 'react'
-import pointer from 'json-pointer'
+import pointer from '../../utils/json-pointer'
 import type { ComponentProps } from '../../types'
 import Context, { ContextState } from '../Context'
 

packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/Provider.tsx

@@ -6,7 +6,7 @@ import React, {
   useEffect,
   useContext,
 } from 'react'
-import pointer, { JsonObject } from 'json-pointer'
+import pointer, { JsonObject } from '../../utils/json-pointer'
 import { ValidateFunction } from 'ajv/dist/2020'
 import {
   Ajv,
@@ -585,7 +585,7 @@ export default function Provider<Data extends JsonObject>(
   }, [])
 
   // - Shared state
-  const sharedData = useSharedState<Data>(id)
+  const sharedData = useSharedState<Data & { clearForm?: () => void }>(id)
   const sharedAttachments = useSharedState<{
     visibleDataHandler?: VisibleDataHandler<Data>
     filterDataHandler?: FilterDataHandler<Data>
@@ -623,7 +623,8 @@ export default function Provider<Data extends JsonObject>(
       initialData &&
       sharedData.data &&
       cacheRef.current.shared === sharedData.data &&
-      internalDataRef.current === initialData
+      internalDataRef.current === initialData &&
+      typeof internalDataRef.current === 'object'
     ) {
       return {
         ...internalDataRef.current,
@@ -647,7 +648,8 @@ export default function Provider<Data extends JsonObject>(
       id &&
       sharedData.data &&
       cacheRef.current.shared !== sharedData.data &&
-      sharedData.data !== internalDataRef.current
+      sharedData.data !== internalDataRef.current &&
+      typeof internalDataRef.current === 'object'
     ) {
       cacheRef.current.shared = sharedData.data
 
@@ -1348,8 +1350,8 @@ export default function Provider<Data extends JsonObject>(
 }
 
 type FormStatusBufferProps = {
-  minimumAsyncBehaviorTime?: Props<unknown>['minimumAsyncBehaviorTime']
-  asyncSubmitTimeout?: Props<unknown>['asyncSubmitTimeout']
+  minimumAsyncBehaviorTime?: Props<JsonObject>['minimumAsyncBehaviorTime']
+  asyncSubmitTimeout?: Props<JsonObject>['asyncSubmitTimeout']
   formState: ContextState['formState']
   waitFor: boolean
   onTimeout: () => void

packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx

@@ -567,7 +567,7 @@ describe('DataContext.Provider', () => {
         })
 
         let filteredData = undefined
-        const onSubmit: OnSubmit = jest.fn((data, { filterData }) => {
+        const onSubmit = jest.fn((data, { filterData }) => {
           return (filteredData = filterData(filterDataHandler))
         })
 

packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/stories/Provider.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Field, Form, JSONSchema } from '../../..'
 import { Flex } from '../../../../../components'
 import Provider from '../Provider'
+import type { FilterData } from '../../Context'
 
 export default {
   title: 'Eufemia/Extensions/Forms/Provider',
@@ -92,13 +93,13 @@ export function Validation() {
 
 const id = 'form-with-disabled'
 
-const filterDataHandler = ({ props }) => {
+const filterDataHandler: FilterData = ({ props }) => {
   if (props.disabled === true) {
     return false
   }
 }
 
-export const FilterData = () => {
+export const FilterDataStory = () => {
   const { hasErrors } = Form.useValidation(id)
   const { data, filterData } = Form.useData(id, {
     disabled: true,
@@ -109,8 +110,8 @@ export const FilterData = () => {
   return (
     <Form.Handler
       id={id}
-      onSubmit={(data) => {
-        console.log('onSubmit', filterDataHandler(data))
+      onSubmit={(data, { filterData }) => {
+        console.log('onSubmit', filterData(filterDataHandler))
       }}
     >
       <Flex.Stack>

packages/dnb-eufemia/src/extensions/forms/Field/Indeterminate/useDependencePaths.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useMemo, useRef } from 'react'
-import pointer from 'json-pointer'
+import pointer from '../../utils/json-pointer'
 import DataContext from '../../DataContext/Context'
 import { Props } from './Indeterminate'
 

packages/dnb-eufemia/src/extensions/forms/Form/Handler/Handler.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { JsonObject } from 'json-pointer'
+import { JsonObject } from '../../utils/json-pointer'
 import DataContextProvider, {
   Props as ProviderProps,
 } from '../../DataContext/Provider'

packages/dnb-eufemia/src/extensions/forms/Form/Isolation/Isolation.tsx

@@ -6,7 +6,7 @@ import React, {
   useReducer,
   useRef,
 } from 'react'
-import pointer, { JsonObject } from 'json-pointer'
+import pointer, { JsonObject } from '../../utils/json-pointer'
 import { extendDeep } from '../../../../shared/component-helper'
 import { isAsync } from '../../../../shared/helpers/isAsync'
 import useDataValue from '../../hooks/useDataValue'
@@ -39,7 +39,10 @@ export type IsolationProviderProps<Data> = {
    * It will receive the data from the isolated context and the data from the outer context.
    * You can use this to transform the data before it is committed.
    */
-  transformOnCommit?: (isolatedData: Data, handlerData: Data) => Data
+  transformOnCommit?: (
+    isolatedData: JsonObject,
+    handlerData: JsonObject
+  ) => unknown
   /**
    * Used internally by the Form.Isolation component
    */
@@ -165,7 +168,7 @@ function IsolationProvider<Data extends JsonObject>(
           : dataOuter
 
       localDataRef.current = mountedData
-      let isolatedData = structuredClone(mountedData) as Data
+      let isolatedData = structuredClone(mountedData)
 
       if (typeof transformOnCommitProp === 'function') {
         isolatedData = transformOnCommitProp(isolatedData, outerData)

packages/dnb-eufemia/src/extensions/forms/Form/Section/Section.tsx

@@ -15,6 +15,7 @@ import type {
   FieldProps,
   OnChange,
 } from '../../types'
+import type { JsonObject } from '../../utils/json-pointer'
 
 export type OverwritePropsDefaults = {
   [key: Path]: (FieldProps & FieldBlockProps) | OverwritePropsDefaults
@@ -55,7 +56,7 @@ export type SectionProps<overwriteProps = OverwritePropsDefaults> = {
    */
   errorPrioritization?: SectionContextState['errorPrioritization']
 } & Pick<
-  DataContextProps<unknown>,
+  DataContextProps<JsonObject>,
   'data' | 'defaultData' | 'onChange' | 'translations'
 >
 

packages/dnb-eufemia/src/extensions/forms/Form/Visibility/useVisibility.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useRef } from 'react'
-import pointer from 'json-pointer'
+import pointer from '../../utils/json-pointer'
 import DataContext from '../../DataContext/Context'
 import usePath from '../../hooks/usePath'
 import { Path } from '../../types'

packages/dnb-eufemia/src/extensions/forms/Form/data-context/getData.tsx

@@ -1,4 +1,4 @@
-import pointer from 'json-pointer'
+import pointer from '../../utils/json-pointer'
 import {
   SharedStateId,
   createSharedState,

packages/dnb-eufemia/src/extensions/forms/Form/data-context/useData.tsx

@@ -5,7 +5,7 @@ import {
   useReducer,
   useRef,
 } from 'react'
-import pointer from 'json-pointer'
+import pointer, { JsonObject } from '../../utils/json-pointer'
 import {
   SharedStateId,
   useSharedState,
@@ -37,7 +37,7 @@ type UseDataReturnUpdate<Data> = <P extends Path>(
 
 export type UseDataReturnGetValue<Data> = <P extends Path>(
   path: P
-) => PathType<Data, P>
+) => PathType<Data, P> | unknown
 
 export type UseDataReturnFilterData<Data> = (
   filterDataHandler: FilterData,
@@ -70,7 +70,7 @@ type SharedAttachment<Data> = {
  * @param {Data} initialData - The initial data value (optional).
  * @returns {UseDataReturn<Data>} An object containing the data and data management functions.
  */
-export default function useData<Data>(
+export default function useData<Data = JsonObject>(
   id: SharedStateId = undefined,
   initialData: Data = undefined
 ): UseDataReturn<Data> {
@@ -122,8 +122,8 @@ export default function useData<Data>(
   const update = useCallback<UseDataReturnUpdate<Data>>(
     (path, value = undefined) => {
       const existingData = structuredClone(
-        sharedDataRef.current.data || ({} as Data)
-      )
+        sharedDataRef.current.data || {}
+      ) as Data & JsonObject
       const existingValue = pointer.has(existingData, path)
         ? pointer.get(existingData, path)
         : undefined
@@ -150,8 +150,8 @@ export default function useData<Data>(
   const remove = useCallback<UseDataReturn<Data>['remove']>(
     (path) => {
       const existingData = structuredClone(
-        sharedDataRef.current.data || ({} as Data)
-      )
+        sharedDataRef.current.data || {}
+      ) as Data & JsonObject
 
       if (pointer.has(existingData, path)) {
         // Remove existing data

packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx

@@ -7,7 +7,7 @@ import React, {
   useContext,
 } from 'react'
 import classnames from 'classnames'
-import pointer from 'json-pointer'
+import pointer from '../../utils/json-pointer'
 import { useFieldProps } from '../../hooks'
 import { makeUniqueId } from '../../../../shared/component-helper'
 import { Flex, FormStatus, HeightAnimation } from '../../../../components'

packages/dnb-eufemia/src/extensions/forms/Iterate/Count/Count.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import pointer from 'json-pointer'
+import pointer from '../../utils/json-pointer'
 import { Identifier, Path } from '../../types'
 import { useData, getData } from '../../Form'
 

packages/dnb-eufemia/src/extensions/forms/Tools/GenerateSchema.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useRef } from 'react'
-import pointer, { JsonObject } from 'json-pointer'
+import pointer, { JsonObject } from '../utils/json-pointer'
 import DataContext, { FilterData } from '../DataContext/Context'
 import { JSONSchema } from '../types'
 

packages/dnb-eufemia/src/extensions/forms/Tools/ListAllProps.tsx

@@ -1,5 +1,5 @@
 import { isValidElement, useCallback, useContext, useRef } from 'react'
-import pointer, { JsonObject } from 'json-pointer'
+import pointer, { JsonObject } from '../utils/json-pointer'
 import DataContext, { FilterData } from '../DataContext/Context'
 
 export type ListAllPropsReturn = {

packages/dnb-eufemia/src/extensions/forms/hooks/useDataValue.ts

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useRef } from 'react'
-import pointer from 'json-pointer'
+import pointer from '../utils/json-pointer'
 import { Path } from '../types'
 import DataContext, { ContextState } from '../DataContext/Context'
 import usePath from './usePath'
@@ -48,14 +48,14 @@ export default function useDataValue<Value>({
     [get, makeIteratePath]
   )
 
-  const moveValueToPath = useCallback(<T>(path: Path, value: unknown) => {
+  const moveValueToPath = useCallback(<T>(path: Path, value: T): T => {
     if (path !== '/' && isPath(path)) {
-      const obj = {} as T
+      const obj = {}
       pointer.set(obj, path, value)
-      return obj
+      return obj as T
     }
 
-    return value as T
+    return value
   }, [])
 
   const getData = useCallback(

packages/dnb-eufemia/src/extensions/forms/hooks/useExternalValue.ts

@@ -1,5 +1,5 @@
 import { useContext, useMemo } from 'react'
-import pointer from 'json-pointer'
+import pointer from '../utils/json-pointer'
 import { FieldProps, Path } from '../types'
 import DataContext from '../DataContext/Context'
 import IterateElementContext from '../Iterate/IterateItemContext'

packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts

@@ -7,7 +7,7 @@ import React, {
   useReducer,
   AriaAttributes,
 } from 'react'
-import pointer from 'json-pointer'
+import pointer from '../utils/json-pointer'
 import { ValidateFunction } from 'ajv/dist/2020'
 import { errorChanged } from '../utils'
 import { ajvErrorsToOneFormError } from '../utils/ajv'
@@ -247,7 +247,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
           ? pointer.get(schema, schemaPath)
           : schema
 
-        requiredList.push(schemaPart?.required)
+        requiredList.push(schemaPart?.['required'])
       }
 
       if (sectionPath) {
@@ -1632,7 +1632,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
         if (hasValue) {
           const sharedValue = pointer.get(sharedState.data, identifier)
           if (sharedValue) {
-            value = sharedValue
+            value = sharedValue as Value
           }
         }
       }

packages/dnb-eufemia/src/extensions/forms/types.ts

@@ -1,7 +1,7 @@
 import type { SpacingProps } from '../../components/space/types'
 import type { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema'
 import type { JSONSchemaType } from 'ajv/dist/2020'
-import { JsonObject } from 'json-pointer'
+import { JsonObject } from './utils/json-pointer'
 import { AriaAttributes } from 'react'
 import { FilterData, VisibleDataOptions } from './DataContext'
 
@@ -601,7 +601,7 @@ export type OnCommit<Data = JsonObject> = (
   | void
   | Promise<EventReturnWithStateObject | void>
 
-export type OnChange<Data = unknown> = (
+export type OnChange<Data = JsonObject> = (
   data: Data,
   additionalArgs: Pick<OnSubmitParams, 'filterData'>
 ) => OnChangeReturnType

packages/dnb-eufemia/src/extensions/forms/utils/ajv.ts

@@ -1,6 +1,6 @@
 import ajvInstance, { ErrorObject } from 'ajv/dist/2020'
 import ajvErrors from 'ajv-errors'
-import pointer from 'json-pointer'
+import pointer, { JsonObject } from './json-pointer'
 import { FormError, Path } from '../types'
 import type Ajv from 'ajv/dist/2020'
 
@@ -156,7 +156,7 @@ export function ajvErrorsToOneFormError(
  */
 export const ajvErrorsToFormErrors = (
   errors?: ErrorObject[] | null,
-  data?: Record<Path, unknown>
+  data?: JsonObject
 ): Record<string, FormError> => {
   return (errors ?? []).reduce((errors, ajvError) => {
     const path = getInstancePath(ajvError)

packages/dnb-eufemia/src/extensions/forms/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './errors'
+export * from './json-pointer'
 export { default as TestElement } from './TestElement/TestElement'

packages/dnb-eufemia/src/extensions/forms/utils/json-pointer.ts

@@ -0,0 +1,5 @@
+export * from './json-pointer/json-pointer'
+
+// For TypeScript compatibility we import and export it this way
+import * as _default from './json-pointer/export'
+export { _default as default }