@uiw/react-json-view 1.12.0 → 2.0.0-alpha.0

package/esm/store/Symbols.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { createContext, useContext, useReducer } from 'react';
+import { TriangleArrow } from '../arrow/TriangleArrow';
+import { jsx as _jsx } from "react/jsx-runtime";
+var initialState = {
+  Arrow: {
+    as: 'span',
+    style: {
+      transform: 'rotate(0deg)',
+      transition: 'all 0.3s'
+    },
+    children: /*#__PURE__*/_jsx(TriangleArrow, {})
+  },
+  Colon: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-colon-color, var(--w-rjv-color))',
+      marginLeft: 0,
+      marginRight: 2
+    },
+    className: 'w-rjv-colon',
+    children: ':'
+  },
+  Quote: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-quotes-color, #236a7c)'
+    },
+    className: 'w-rjv-quotes',
+    children: '"'
+  },
+  ValueQuote: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-quotes-string-color, #cb4b16)'
+    },
+    className: 'w-rjv-quotes',
+    children: '"'
+  },
+  BracketsLeft: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-brackets-color, #236a7c)'
+    },
+    className: 'w-rjv-brackets-start',
+    children: '['
+  },
+  BracketsRight: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-brackets-color, #236a7c)'
+    },
+    className: 'w-rjv-brackets-end',
+    children: ']'
+  },
+  BraceLeft: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-curlybraces-color, #236a7c)'
+    },
+    className: 'w-rjv-curlybraces-start',
+    children: '{'
+  },
+  BraceRight: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-curlybraces-color, #236a7c)'
+    },
+    className: 'w-rjv-curlybraces-end',
+    children: '}'
+  }
+};
+var Context = /*#__PURE__*/createContext(initialState);
+var reducer = (state, action) => _extends({}, state, action);
+export var useSymbolsStore = () => {
+  return useContext(Context);
+};
+var DispatchSymbols = /*#__PURE__*/createContext(() => {});
+DispatchSymbols.displayName = 'JVR.DispatchSymbols';
+export function useSymbols() {
+  return useReducer(reducer, initialState);
+}
+export function useSymbolsDispatch() {
+  return useContext(DispatchSymbols);
+}
+export var Symbols = _ref => {
+  var {
+    initial,
+    dispatch,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: initial,
+    children: /*#__PURE__*/_jsx(DispatchSymbols.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+};
+Symbols.displayName = 'JVR.Symbols';

package/esm/store/Types.d.ts

@@ -0,0 +1,52 @@
+import { FC, PropsWithChildren, ComponentPropsWithoutRef } from 'react';
+export type TagType = React.ElementType | keyof JSX.IntrinsicElements;
+type TypesElementProps<T extends TagType> = {
+    as?: T;
+    render?: (props: TypesElement<T>, result: {
+        type: 'type' | 'value';
+        value?: unknown;
+    }) => React.ReactNode;
+    'data-type'?: string;
+};
+export type TypesElement<T extends TagType> = TypesElementProps<T> & ComponentPropsWithoutRef<T>;
+export type InitialTypesState = {
+    displayDataTypes?: boolean;
+    Url?: TypesElement<TagType>;
+    Str?: TypesElement<TagType>;
+    Undefined?: TypesElement<TagType>;
+    Null?: TypesElement<TagType>;
+    True?: TypesElement<TagType>;
+    False?: TypesElement<TagType>;
+    Date?: TypesElement<TagType>;
+    Float?: TypesElement<TagType>;
+    Set?: TypesElement<TagType>;
+    Int?: TypesElement<TagType>;
+    Map?: TypesElement<TagType>;
+    Nan?: TypesElement<TagType>;
+    Bigint?: TypesElement<TagType>;
+};
+type Dispatch = React.Dispatch<InitialTypesState>;
+export declare const useTypesStore: () => InitialTypesState;
+export declare function useTypes(): [{
+    displayDataTypes?: boolean | undefined;
+    Url?: TypesElement<TagType> | undefined;
+    Str?: TypesElement<TagType> | undefined;
+    Undefined?: TypesElement<TagType> | undefined;
+    Null?: TypesElement<TagType> | undefined;
+    True?: TypesElement<TagType> | undefined;
+    False?: TypesElement<TagType> | undefined;
+    Date?: TypesElement<TagType> | undefined;
+    Float?: TypesElement<TagType> | undefined;
+    Set?: TypesElement<TagType> | undefined;
+    Int?: TypesElement<TagType> | undefined;
+    Map?: TypesElement<TagType> | undefined;
+    Nan?: TypesElement<TagType> | undefined;
+    Bigint?: TypesElement<TagType> | undefined;
+}, import("react").Dispatch<InitialTypesState>];
+export declare function useTypesDispatch(): Dispatch;
+interface TypesProps {
+    initial: InitialTypesState;
+    dispatch: Dispatch;
+}
+export declare const Types: FC<PropsWithChildren<TypesProps>>;
+export {};

package/esm/store/Types.js

@@ -0,0 +1,150 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { createContext, useContext, useReducer } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var initialState = {
+  Str: {
+    as: 'span',
+    'data-type': 'string',
+    style: {
+      color: 'var(--w-rjv-type-string-color, #cb4b16)'
+    },
+    className: 'w-rjv-type',
+    children: 'string'
+  },
+  Url: {
+    as: 'a',
+    style: {
+      color: 'var(--w-rjv-type-url-color, #0969da)'
+    },
+    'data-type': 'url',
+    className: 'w-rjv-type',
+    children: 'url'
+  },
+  Undefined: {
+    style: {
+      color: 'var(--w-rjv-type-undefined-color, #586e75)'
+    },
+    as: 'span',
+    'data-type': 'undefined',
+    className: 'w-rjv-type',
+    children: 'undefined'
+  },
+  Null: {
+    style: {
+      color: 'var(--w-rjv-type-null-color, #d33682)'
+    },
+    as: 'span',
+    'data-type': 'null',
+    className: 'w-rjv-type',
+    children: 'null'
+  },
+  Map: {
+    style: {
+      color: 'var(--w-rjv-type-map-color, #268bd2)'
+    },
+    as: 'span',
+    'data-type': 'map',
+    className: 'w-rjv-type',
+    children: 'Map'
+  },
+  Nan: {
+    style: {
+      color: 'var(--w-rjv-type-nan-color, #859900)'
+    },
+    as: 'span',
+    'data-type': 'nan',
+    className: 'w-rjv-type',
+    children: 'NaN'
+  },
+  Bigint: {
+    style: {
+      color: 'var(--w-rjv-type-bigint-color, #268bd2)'
+    },
+    as: 'span',
+    'data-type': 'bigint',
+    className: 'w-rjv-type',
+    children: 'bigint'
+  },
+  Int: {
+    style: {
+      color: 'var(--w-rjv-type-int-color, #268bd2)'
+    },
+    as: 'span',
+    'data-type': 'int',
+    className: 'w-rjv-type',
+    children: 'int'
+  },
+  Set: {
+    style: {
+      color: 'var(--w-rjv-type-set-color, #268bd2)'
+    },
+    as: 'span',
+    'data-type': 'set',
+    className: 'w-rjv-type',
+    children: 'Set'
+  },
+  Float: {
+    style: {
+      color: 'var(--w-rjv-type-float-color, #859900)'
+    },
+    as: 'span',
+    'data-type': 'float',
+    className: 'w-rjv-type',
+    children: 'float'
+  },
+  True: {
+    style: {
+      color: 'var(--w-rjv-type-boolean-color, #2aa198)'
+    },
+    as: 'span',
+    'data-type': 'bool',
+    className: 'w-rjv-type',
+    children: 'bool'
+  },
+  False: {
+    style: {
+      color: 'var(--w-rjv-type-boolean-color, #2aa198)'
+    },
+    as: 'span',
+    'data-type': 'bool',
+    className: 'w-rjv-type',
+    children: 'bool'
+  },
+  Date: {
+    style: {
+      color: 'var(--w-rjv-type-date-color, #268bd2)'
+    },
+    as: 'span',
+    'data-type': 'date',
+    className: 'w-rjv-type',
+    children: 'date'
+  }
+};
+var Context = /*#__PURE__*/createContext(initialState);
+var reducer = (state, action) => _extends({}, state, action);
+export var useTypesStore = () => {
+  return useContext(Context);
+};
+var DispatchTypes = /*#__PURE__*/createContext(() => {});
+DispatchTypes.displayName = 'JVR.DispatchTypes';
+export function useTypes() {
+  return useReducer(reducer, initialState);
+}
+export function useTypesDispatch() {
+  return useContext(DispatchTypes);
+}
+export var Types = _ref => {
+  var {
+    initial,
+    dispatch,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: initial,
+    children: /*#__PURE__*/_jsx(DispatchTypes.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+};
+Types.displayName = 'JVR.Types';

package/esm/store.d.ts

@@ -1,5 +1,29 @@
-export declare const store: {
-    collapse(id: string): void;
-    expand(id: string): void;
-};
-export declare function useExpandsStatus(): Record<string, boolean>;
+import React, { PropsWithChildren } from 'react';
+import { JsonViewProps } from './';
+import { type InitialTypesState } from './store/Types';
+export type BlockTagType = keyof JSX.IntrinsicElements;
+export interface InitialState<T extends object> {
+    value?: object;
+    onExpand?: JsonViewProps<object>['onExpand'];
+    onCopied?: JsonViewProps<object>['onCopied'];
+    objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
+    displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
+    shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
+    enableClipboard?: JsonViewProps<T>['enableClipboard'];
+    highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
+    collapsed?: JsonViewProps<T>['collapsed'];
+    indentWidth?: number;
+}
+export declare const initialState: InitialState<object>;
+type Dispatch = React.Dispatch<InitialState<object>>;
+export declare const Context: React.Context<InitialState<object>>;
+export declare function reducer(state: InitialState<object>, action: InitialState<object>): InitialState<object>;
+export declare const useStore: () => InitialState<object>;
+export declare const useDispatchStore: () => Dispatch;
+export interface ProviderProps {
+    initialState?: InitialState<object>;
+    initialTypes?: InitialTypesState;
+}
+export declare const Provider: React.FC<PropsWithChildren<ProviderProps>>;
+export declare function useDispatch(): Dispatch;
+export {};

package/esm/store.js

@@ -1,36 +1,70 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { useSyncExternalStore } from 'react';
-var expands = {};
-var listeners = [];
-export var store = {
-  collapse(id) {
-    expands = _extends({}, expands, {
-      [id]: false
-    });
-    emitChange();
-  },
-  expand(id) {
-    expands = _extends({}, expands, {
-      [id]: true
-    });
-    emitChange();
-  }
+import React, { createContext, useContext, useEffect, useReducer } from 'react';
+import { useShowTools, ShowTools } from './store/ShowTools';
+import { useExpands, Expands } from './store/Expands';
+import { useTypes, Types } from './store/Types';
+import { useSymbols, Symbols } from './store/Symbols';
+import { useSection, Section } from './store/Section';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var initialState = {
+  objectSortKeys: false,
+  indentWidth: 15
 };
-function getSnapshot() {
-  return expands;
+export var Context = /*#__PURE__*/createContext(initialState);
+Context.displayName = 'JVR.Context';
+var DispatchContext = /*#__PURE__*/createContext(() => {});
+DispatchContext.displayName = 'JVR.DispatchContext';
+export function reducer(state, action) {
+  return _extends({}, state, action);
 }
-function subscribe(listener) {
-  listeners = [...listeners, listener];
-  return () => {
-    listeners = listeners.filter(l => l !== listener);
-  };
-}
-function emitChange() {
-  for (var listener of listeners) {
-    listener();
-  }
+export var useStore = () => {
+  return useContext(Context);
+};
+export var useDispatchStore = () => {
+  return useContext(DispatchContext);
+};
+export var Provider = _ref => {
+  var {
+    children,
+    initialState: init,
+    initialTypes
+  } = _ref;
+  var [state, dispatch] = useReducer(reducer, Object.assign({}, initialState, init));
+  var [showTools, showToolsDispatch] = useShowTools();
+  var [expands, expandsDispatch] = useExpands();
+  var [types, typesDispatch] = useTypes();
+  var [symbols, symbolsDispatch] = useSymbols();
+  var [section, sectionDispatch] = useSection();
+  useEffect(() => dispatch(_extends({}, init)), [init]);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: state,
+    children: /*#__PURE__*/_jsx(DispatchContext.Provider, {
+      value: dispatch,
+      children: /*#__PURE__*/_jsx(ShowTools, {
+        initial: showTools,
+        dispatch: showToolsDispatch,
+        children: /*#__PURE__*/_jsx(Expands, {
+          initial: expands,
+          dispatch: expandsDispatch,
+          children: /*#__PURE__*/_jsx(Types, {
+            initial: _extends({}, types, initialTypes),
+            dispatch: typesDispatch,
+            children: /*#__PURE__*/_jsx(Symbols, {
+              initial: symbols,
+              dispatch: symbolsDispatch,
+              children: /*#__PURE__*/_jsx(Section, {
+                initial: section,
+                dispatch: sectionDispatch,
+                children: children
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+};
+export function useDispatch() {
+  return useContext(DispatchContext);
 }
-export function useExpandsStatus() {
-  var expands = useSyncExternalStore(subscribe, getSnapshot);
-  return expands;
-}
+Provider.displayName = 'JVR.Provider';

package/esm/symbol/Arrow.d.ts

@@ -0,0 +1,6 @@
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType } from '../store/Types';
+export declare const Arrow: {
+    (props: SymbolsElement<TagType>): null;
+    displayName: string;
+};

package/esm/symbol/Arrow.js

@@ -0,0 +1,10 @@
+import { useSymbolsStore } from '../store/Symbols';
+import { useSymbolsRender } from '../utils/useRender';
+export var Arrow = props => {
+  var {
+    Arrow: Comp = {}
+  } = useSymbolsStore();
+  useSymbolsRender(Comp, props, 'Arrow');
+  return null;
+};
+Arrow.displayName = 'JVR.Arrow';

package/esm/symbol/BraceLeft.d.ts

@@ -0,0 +1,6 @@
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType } from '../store/Types';
+export declare const BraceLeft: {
+    (props: SymbolsElement<TagType>): null;
+    displayName: string;
+};

package/esm/symbol/BraceLeft.js

@@ -0,0 +1,10 @@
+import { useSymbolsStore } from '../store/Symbols';
+import { useSymbolsRender } from '../utils/useRender';
+export var BraceLeft = props => {
+  var {
+    BraceLeft: Comp = {}
+  } = useSymbolsStore();
+  useSymbolsRender(Comp, props, 'BraceLeft');
+  return null;
+};
+BraceLeft.displayName = 'JVR.BraceLeft';

package/esm/symbol/BraceRight.d.ts

@@ -0,0 +1,6 @@
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType } from '../store/Types';
+export declare const BraceRight: {
+    (props: SymbolsElement<TagType>): null;
+    displayName: string;
+};

package/esm/symbol/BraceRight.js

@@ -0,0 +1,10 @@
+import { useSymbolsStore } from '../store/Symbols';
+import { useSymbolsRender } from '../utils/useRender';
+export var BraceRight = props => {
+  var {
+    BraceRight: Comp = {}
+  } = useSymbolsStore();
+  useSymbolsRender(Comp, props, 'BraceRight');
+  return null;
+};
+BraceRight.displayName = 'JVR.BraceRight';

package/esm/symbol/BracketsLeft.d.ts

@@ -0,0 +1,6 @@
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType } from '../store/Types';
+export declare const BracketsLeft: {
+    (props: SymbolsElement<TagType>): null;
+    displayName: string;
+};

package/esm/symbol/BracketsLeft.js

@@ -0,0 +1,10 @@
+import { useSymbolsStore } from '../store/Symbols';
+import { useSymbolsRender } from '../utils/useRender';
+export var BracketsLeft = props => {
+  var {
+    BracketsLeft: Comp = {}
+  } = useSymbolsStore();
+  useSymbolsRender(Comp, props, 'BracketsLeft');
+  return null;
+};
+BracketsLeft.displayName = 'JVR.BracketsLeft';

package/esm/symbol/BracketsRight.d.ts

@@ -0,0 +1,6 @@
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType } from '../store/Types';
+export declare const BracketsRight: {
+    (props: SymbolsElement<TagType>): null;
+    displayName: string;
+};

package/esm/symbol/BracketsRight.js

@@ -0,0 +1,10 @@
+import { useSymbolsStore } from '../store/Symbols';
+import { useSymbolsRender } from '../utils/useRender';
+export var BracketsRight = props => {
+  var {
+    BracketsRight: Comp = {}
+  } = useSymbolsStore();
+  useSymbolsRender(Comp, props, 'BracketsRight');
+  return null;
+};
+BracketsRight.displayName = 'JVR.BracketsRight';

package/esm/symbol/Colon.d.ts

@@ -0,0 +1,6 @@
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType } from '../store/Types';
+export declare const Colon: {
+    (props: SymbolsElement<TagType>): null;
+    displayName: string;
+};

package/esm/symbol/Colon.js

@@ -0,0 +1,10 @@
+import { useSymbolsStore } from '../store/Symbols';
+import { useSymbolsRender } from '../utils/useRender';
+export var Colon = props => {
+  var {
+    Colon: Comp = {}
+  } = useSymbolsStore();
+  useSymbolsRender(Comp, props, 'Colon');
+  return null;
+};
+Colon.displayName = 'JVR.Colon';

package/esm/symbol/Quote.d.ts

@@ -0,0 +1,6 @@
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType } from '../store/Types';
+export declare const Quote: {
+    (props: SymbolsElement<TagType>): null;
+    displayName: string;
+};

package/esm/symbol/Quote.js

@@ -0,0 +1,10 @@
+import { useSymbolsStore } from '../store/Symbols';
+import { useSymbolsRender } from '../utils/useRender';
+export var Quote = props => {
+  var {
+    Quote: Comp = {}
+  } = useSymbolsStore();
+  useSymbolsRender(Comp, props, 'Quote');
+  return null;
+};
+Quote.displayName = 'JVR.Quote';

package/esm/symbol/ValueQuote.d.ts

@@ -0,0 +1,6 @@
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType } from '../store/Types';
+export declare const ValueQuote: {
+    (props: SymbolsElement<TagType>): null;
+    displayName: string;
+};

package/esm/symbol/ValueQuote.js

@@ -0,0 +1,10 @@
+import { useSymbolsStore } from '../store/Symbols';
+import { useSymbolsRender } from '../utils/useRender';
+export var ValueQuote = props => {
+  var {
+    ValueQuote: Comp = {}
+  } = useSymbolsStore();
+  useSymbolsRender(Comp, props, 'ValueQuote');
+  return null;
+};
+ValueQuote.displayName = 'JVR.ValueQuote';

package/esm/theme/basic.js

@@ -1,6 +1,7 @@
 export var basicTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#b5bd68',
+  '--w-rjv-key-string': '#b5bd68',
   '--w-rjv-background-color': '#2E3235',
   '--w-rjv-line-color': '#292d30',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
@@ -12,6 +13,8 @@ export var basicTheme = {
   '--w-rjv-curlybraces-color': '#cc99cc',
   '--w-rjv-colon-color': '#bababa',
   '--w-rjv-brackets-color': '#808080',
+  '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
+  '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#b5bd68',
   '--w-rjv-type-int-color': '#fda331',
   '--w-rjv-type-float-color': '#fda331',

package/esm/theme/dark.js

@@ -1,6 +1,7 @@
 export var darkTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#0184a6',
+  '--w-rjv-key-string': '#0184a6',
   '--w-rjv-background-color': '#202020',
   '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
@@ -11,6 +12,8 @@ export var darkTheme = {
   '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#1896b6',
   '--w-rjv-brackets-color': '#1896b6',
+  '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
+  '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#cb4b16',
   '--w-rjv-type-int-color': '#268bd2',
   '--w-rjv-type-float-color': '#859900',

package/esm/theme/github.dark.js

@@ -1,6 +1,7 @@
 export var githubDarkTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#79c0ff',
+  '--w-rjv-key-string': '#79c0ff',
   '--w-rjv-background-color': '#0d1117',
   '--w-rjv-line-color': '#94949480',
   '--w-rjv-arrow-color': '#ccc',
@@ -12,6 +13,8 @@ export var githubDarkTheme = {
   '--w-rjv-curlybraces-color': '#8b949e',
   '--w-rjv-colon-color': '#c9d1d9',
   '--w-rjv-brackets-color': '#8b949e',
+  '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
+  '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#a5d6ff',
   '--w-rjv-type-int-color': '#79c0ff',
   '--w-rjv-type-float-color': '#79c0ff',

package/esm/theme/github.light.js

@@ -1,6 +1,7 @@
 export var githubLightTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#6f42c1',
+  '--w-rjv-key-string': '#6f42c1',
   '--w-rjv-background-color': '#ffffff',
   '--w-rjv-line-color': '#ddd',
   '--w-rjv-arrow-color': '#6e7781',
@@ -12,6 +13,8 @@ export var githubLightTheme = {
   '--w-rjv-curlybraces-color': '#6a737d',
   '--w-rjv-colon-color': '#24292e',
   '--w-rjv-brackets-color': '#6a737d',
+  '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
+  '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#032f62',
   '--w-rjv-type-int-color': '#005cc5',
   '--w-rjv-type-float-color': '#005cc5',