@dxos/react-ui-syntax-highlighter 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-syntax-highlighter",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.a4bbb77",
   "description": "A syntax highlighter wrapper.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -26,25 +27,27 @@
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
     "jsonpath": "^1.1.1",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@types/react": "~19.2.0",
+    "@types/react-dom": "~19.2.0",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
-    "@dxos/storybook-utils": "0.8.4-main.84f28bd"
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77",
+    "@dxos/storybook-utils": "0.8.4-main.a4bbb77",
+    "@dxos/util": "0.8.4-main.a4bbb77"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.a4bbb77",
+    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77"
   },
   "publishConfig": {
     "access": "public"

package/src/Json/Json.stories.tsx

@@ -0,0 +1,96 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { faker } from '@dxos/random';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { Json } from './Json';
+
+faker.seed(0);
+
+const createNode = () => {
+  const data: Record<string, any> = {};
+  const keys = [...Array(faker.number.int({ min: 1, max: 5 }))].map(() => faker.lorem.word());
+  keys.forEach((key) => {
+    switch (faker.helpers.arrayElement(['object', 'string', 'number', 'boolean', 'null'])) {
+      case 'object':
+        data[key] = createNode();
+        break;
+      case 'string':
+        data[key] = faker.lorem.word();
+        break;
+      case 'number':
+        data[key] = faker.number.int();
+        break;
+      case 'boolean':
+        data[key] = faker.datatype.boolean();
+        break;
+      case 'null':
+        data[key] = null;
+        break;
+    }
+  });
+
+  return data;
+};
+
+const createData = ({ depth = 2, children = 3 } = {}): any => {
+  const createChildren = (root: any, d = 0) => {
+    if (d < depth) {
+      const num = faker.number.int({ min: 1, max: Math.round(Math.log(depth + 1 - d) * children) });
+      root.children = [...new Array(num)].map(() => {
+        return createChildren(createNode(), d + 1);
+      });
+    }
+
+    return root;
+  };
+
+  return createChildren(createNode());
+};
+
+const meta = {
+  title: 'ui/react-ui-syntax-highlighter/Json',
+  component: Json,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'column',
+  },
+} satisfies Meta<typeof Json>;
+
+export default meta;
+
+type Story = StoryObj<typeof Json>;
+
+const data = createData();
+
+export const Default: Story = {
+  args: {
+    classNames: 'text-sm',
+    data,
+  },
+};
+
+export const Filter: Story = {
+  args: {
+    classNames: 'text-sm',
+    filter: true,
+    data,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    classNames: 'text-sm',
+    filter: true,
+    data: createData({ depth: 5 }),
+    replacer: {
+      maxDepth: 3,
+      maxArrayLen: 10,
+      maxStringLen: 10,
+    },
+  },
+};

package/src/Json/Json.tsx

@@ -2,26 +2,37 @@
 // Copyright 2025 DXOS.org
 //
 
-// TODO(burdon): Move to jsonpath-plus.
+// TODO(burdon): Use to jsonpath-plus.
 import jp from 'jsonpath';
 import React, { useEffect, useState } from 'react';
 
 import { Input, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
 
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 
-export type JsonProps = ThemedClassName<{ data?: any; testId?: string }>;
+const defaultClassNames = '!m-0 grow overflow-y-auto';
 
-export const Json = ({ data, classNames, testId }: JsonProps) => {
+export type JsonProps = ThemedClassName<{
+  data?: any;
+  filter?: boolean;
+  replacer?: CreateReplacerProps;
+  testId?: string;
+}>;
+
+export const Json = ({ filter, ...params }: JsonProps) => {
+  if (filter) {
+    return <JsonFilter {...params} />;
+  }
+
+  const { classNames, data, replacer, testId } = params;
   return (
-    <SyntaxHighlighter language='json' classNames={['w-full', classNames]} data-testid={testId}>
-      {JSON.stringify(data, null, 2)}
+    <SyntaxHighlighter language='json' classNames={[defaultClassNames, classNames]} data-testid={testId}>
+      {JSON.stringify(data, replacer && createReplacer(replacer), 2)}
     </SyntaxHighlighter>
   );
 };
 
-export const JsonFilter = ({ data: initialData, classNames, testId }: JsonProps) => {
+export const JsonFilter = ({ classNames, data: initialData, replacer, testId }: JsonProps) => {
   const [data, setData] = useState(initialData);
   const [text, setText] = useState('');
   const [error, setError] = useState<Error | null>(null);
@@ -43,16 +54,77 @@ export const JsonFilter = ({ data: initialData, classNames, testId }: JsonProps)
     <div className='flex flex-col grow overflow-hidden'>
       <Input.Root validationValence={error ? 'error' : 'success'}>
         <Input.TextInput
-          classNames={mx('p-1 px-2 font-mono', error && 'border-red-500')}
+          classNames={['p-1 px-2 font-mono', error && 'border-red-500']}
           variant='subdued'
           value={text}
           onChange={(event) => setText(event.target.value)}
           placeholder='JSONPath (e.g., $.graph.nodes)'
         />
       </Input.Root>
-      <SyntaxHighlighter language='json' classNames={mx('grow overflow-y-auto', classNames)} data-testid={testId}>
-        {JSON.stringify(data, null, 2)}
+      <SyntaxHighlighter language='json' classNames={[defaultClassNames, classNames]} data-testid={testId}>
+        {JSON.stringify(data, replacer && createReplacer(replacer), 2)}
       </SyntaxHighlighter>
     </div>
   );
 };
+
+export type CreateReplacerProps = {
+  omit?: string[];
+  parse?: string[];
+  maxDepth?: number;
+  maxArrayLen?: number;
+  maxStringLen?: number;
+};
+
+export type JsonReplacer = (this: any, key: string, value: any) => any;
+
+export const createReplacer = ({
+  omit,
+  parse,
+  maxDepth,
+  maxArrayLen,
+  maxStringLen,
+}: CreateReplacerProps): JsonReplacer => {
+  let currentDepth = 0;
+  const depthMap = new WeakMap<object, number>();
+
+  return function (this: any, key: string, value: any) {
+    // Track depth.
+    if (key === '') {
+      currentDepth = 0;
+    } else if (this && typeof this === 'object') {
+      const parentDepth = depthMap.get(this) ?? 0;
+      currentDepth = parentDepth + 1;
+    }
+
+    // Store depth for this object.
+    if (value && typeof value === 'object') {
+      depthMap.set(value, currentDepth);
+
+      // Check max depth.
+      if (maxDepth != null && currentDepth >= maxDepth) {
+        return Array.isArray(value) ? `[{ length: ${value.length} }]` : `{ keys: ${Object.keys(value).length} }`;
+      }
+    }
+
+    // Apply other filters.
+    if (omit?.includes(key)) {
+      return undefined;
+    }
+    if (parse?.includes(key) && typeof value === 'string') {
+      try {
+        return JSON.parse(value);
+      } catch {
+        return value;
+      }
+    }
+    if (maxArrayLen != null && Array.isArray(value) && value.length > maxArrayLen) {
+      return `[length: ${value.length}]`;
+    }
+    if (maxStringLen != null && typeof value === 'string' && value.length > maxStringLen) {
+      return value.slice(0, maxStringLen) + '...';
+    }
+
+    return value;
+  };
+};

package/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx

@@ -2,19 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { trim } from '@dxos/util';
 
 import { SyntaxHighlighter } from './SyntaxHighlighter';
 
-const meta: Meta<typeof SyntaxHighlighter> = {
+const meta = {
   title: 'ui/react-ui-syntax-highlighter/SyntaxHighlighter',
   component: SyntaxHighlighter,
   decorators: [withTheme],
-};
+} satisfies Meta<typeof SyntaxHighlighter>;
 
 export default meta;
 
@@ -30,8 +29,14 @@ export const Default: Story = {
 
 export const Typescript: Story = {
   args: {
-    language: 'ts',
-    children: 'const x = 100;',
+    language: 'tsx',
+    children: trim`
+      import React from 'react'
+      
+      const Test = () => {
+        return <div>Test</div>
+      }
+    `,
   },
 };
 

package/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -3,13 +3,9 @@
 //
 
 import React from 'react';
-import { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';
-// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.
-// Lightweight version will load specific language parsers asynchronously.
-// eslint-disable-next-line no-restricted-imports
-import NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';
-// eslint-disable-next-line no-restricted-imports
-import { github as light, a11yDark as dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';
+import NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';
+import { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
@@ -17,33 +13,50 @@ import { mx } from '@dxos/react-ui-theme';
 const zeroWidthSpace = '\u200b';
 
 export type SyntaxHighlighterProps = ThemedClassName<
-  NativeSyntaxHighlighterProps & {
+  NaturalSyntaxHighlighterProps & {
     fallback?: string;
   }
 >;
 
-light.hljs.background = '';
-dark.hljs.background = '';
-
 /**
+ * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.
+ * The lightweight version will load specific language parsers asynchronously.
+ *
  * https://github.com/react-syntax-highlighter/react-syntax-highlighter
+ * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html
  */
 export const SyntaxHighlighter = ({
   classNames,
   children,
+  language = 'text',
   fallback = zeroWidthSpace,
   ...props
 }: SyntaxHighlighterProps) => {
   const { themeMode } = useThemeContext();
 
   return (
-    <NativeSyntaxHighlighter
-      className={mx('w-full p-0 font-thin overflow-auto scrollbar-thin !text-baseText', classNames)}
-      style={themeMode === 'dark' ? dark : light}
-      {...props}
-    >
-      {/* Non-empty fallback prevents collapse. */}
-      {children || fallback}
-    </NativeSyntaxHighlighter>
+    <div className={mx('is-full p-1 overflow-hidden font-thin text-baseText', classNames)}>
+      <NativeSyntaxHighlighter
+        className='is-full overflow-auto scrollbar-thin'
+        language={languages[language as keyof typeof languages] || language}
+        style={themeMode === 'dark' ? dark : light}
+        customStyle={{
+          background: 'unset',
+          border: 'none',
+          boxShadow: 'none',
+          padding: 0,
+          margin: 0,
+        }}
+        {...props}
+      >
+        {/* Non-empty fallback prevents collapse. */}
+        {children || fallback}
+      </NativeSyntaxHighlighter>
+    </div>
   );
 };
+
+const languages = {
+  js: 'javascript',
+  ts: 'typescript',
+};