react-json-tree

packages/react-json-tree/babel.config.esm.json

@@ -1,8 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": "defaults", "modules": false }],
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

packages/react-json-tree/babel.config.json

@@ -1,8 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": "defaults" }],
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

packages/react-json-tree/jest.config.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      { tsconfig: 'tsconfig.test.json', useESM: true },
+    ],
+  },
+};

packages/react-json-tree/jest.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  preset: 'ts-jest',
-  transform: {
-    '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],
-  },
-  transformIgnorePatterns: ['node_modules/(?!.pnpm|react-base16-styling)'],
-};

packages/react-json-tree/package.json

@@ -22,47 +22,29 @@
     "lib",
     "src"
   ],
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/types/index.d.ts",
-  "unpkg": "lib/umd/react-json-tree.umd.js",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
   "scripts": {
-    "build": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:umd",
-    "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs",
-    "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm",
-    "build:types": "tsc --emitDeclarationOnly",
-    "build:umd": "rollup -c",
+    "build": "tsc",
     "clean": "rimraf lib",
-    "test": "jest",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "lint": "eslint . --ext .ts,.tsx",
     "type-check": "tsc --noEmit",
     "prepack": "pnpm run clean && pnpm run build",
-    "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
+    "prepublish": "pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.1",
     "@types/lodash": "^4.17.0",
     "react-base16-styling": "^0.9.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.3",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.30",
     "@types/react": "^18.2.72",
     "@types/react-test-renderer": "^18.0.7",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
@@ -76,10 +58,8 @@
     "react": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "rimraf": "^5.0.5",
-    "rollup": "^4.13.0",
     "rollup-plugin-typescript2": "^0.36.0",
     "ts-jest": "^29.1.2",
-    "tslib": "^2.6.2",
     "typescript": "~5.3.3"
   },
   "peerDependencies": {

packages/react-json-tree/rollup.config.mjs

@@ -1,59 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import babel from '@rollup/plugin-babel';
-import terser from '@rollup/plugin-terser';
-
-const config = [
-  {
-    input: 'src/index.tsx',
-    output: {
-      name: 'ReactJsonTree',
-      file: 'lib/umd/react-json-tree.js',
-      format: 'umd',
-      globals: {
-        react: 'React',
-      },
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts', '.tsx'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-    ],
-    external: ['react'],
-  },
-  {
-    input: 'src/index.tsx',
-    output: {
-      name: 'ReactJsonTree',
-      file: 'lib/umd/react-json-tree.min.js',
-      format: 'umd',
-      globals: {
-        react: 'React',
-      },
-    },
-    plugins: [
-      typescript({
-        tsconfigOverride: { compilerOptions: { declaration: false } },
-      }),
-      resolve(),
-      commonjs(),
-      babel({
-        babelHelpers: 'runtime',
-        extensions: ['.ts', '.tsx'],
-        plugins: ['@babel/plugin-transform-runtime'],
-      }),
-      terser(),
-    ],
-    external: ['react'],
-  },
-];
-
-export default config;

packages/react-json-tree/src/ItemRange.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import JSONArrow from './JSONArrow';
-import type { CircularCache, CommonInternalProps } from './types';
+import JSONArrow from './JSONArrow.js';
+import type { CircularCache, CommonInternalProps } from './types.js';
 
 interface Props extends CommonInternalProps {
   data: unknown;

packages/react-json-tree/src/JSONArrayNode.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import JSONNestedNode from './JSONNestedNode';
-import type { CommonInternalProps } from './types';
+import JSONNestedNode from './JSONNestedNode.js';
+import type { CommonInternalProps } from './types.js';
 
 // Returns the "n Items" string for this node,
 // generating and caching it if it hasn't been created yet.

packages/react-json-tree/src/JSONIterableNode.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import JSONNestedNode from './JSONNestedNode';
-import type { CommonInternalProps } from './types';
+import JSONNestedNode from './JSONNestedNode.js';
+import type { CommonInternalProps } from './types.js';
 
 // Returns the "n Items" string for this node,
 // generating and caching it if it hasn't been created yet.

packages/react-json-tree/src/JSONNestedNode.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useState } from 'react';
-import JSONArrow from './JSONArrow';
-import getCollectionEntries from './getCollectionEntries';
-import JSONNode from './JSONNode';
-import ItemRange from './ItemRange';
-import type { CircularCache, CommonInternalProps } from './types';
+import JSONArrow from './JSONArrow.js';
+import getCollectionEntries from './getCollectionEntries.js';
+import JSONNode from './JSONNode.js';
+import ItemRange from './ItemRange.js';
+import type { CircularCache, CommonInternalProps } from './types.js';
 
 /**
  * Renders nested values (eg. objects, arrays, lists, etc.)

packages/react-json-tree/src/JSONNode.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import objType from './objType';
-import JSONObjectNode from './JSONObjectNode';
-import JSONArrayNode from './JSONArrayNode';
-import JSONIterableNode from './JSONIterableNode';
-import JSONValueNode from './JSONValueNode';
-import type { CommonInternalProps } from './types';
+import objType from './objType.js';
+import JSONObjectNode from './JSONObjectNode.js';
+import JSONArrayNode from './JSONArrayNode.js';
+import JSONIterableNode from './JSONIterableNode.js';
+import JSONValueNode from './JSONValueNode.js';
+import type { CommonInternalProps } from './types.js';
 
 interface Props extends CommonInternalProps {
   value: unknown;

packages/react-json-tree/src/JSONObjectNode.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import JSONNestedNode from './JSONNestedNode';
-import type { CommonInternalProps } from './types';
+import JSONNestedNode from './JSONNestedNode.js';
+import type { CommonInternalProps } from './types.js';
 
 // Returns the "n Items" string for this node,
 // generating and caching it if it hasn't been created yet.

packages/react-json-tree/src/JSONValueNode.tsx

@@ -6,7 +6,7 @@ import type {
   LabelRenderer,
   Styling,
   ValueRenderer,
-} from './types';
+} from './types.js';
 
 /**
  * Renders simple values (eg. strings, numbers, booleans, etc)

packages/react-json-tree/src/createStylingFromTheme.ts

@@ -6,7 +6,7 @@ import type {
   StylingFunction,
   Theme,
 } from 'react-base16-styling';
-import solarized from './themes/solarized';
+import solarized from './themes/solarized.js';
 
 const colorMap = (theme: Base16Theme) => ({
   BACKGROUND_COLOR: theme.base00,

packages/react-json-tree/src/getCollectionEntries.ts

@@ -1,4 +1,4 @@
-import type { SortObjectKeys } from './types';
+import type { SortObjectKeys } from './types.js';
 
 function getLength(type: string, collection: unknown) {
   if (type === 'Object') {

packages/react-json-tree/src/index.tsx

@@ -4,17 +4,17 @@
 // port by Daniele Zannotti http://www.github.com/dzannotti <dzannotti@me.com>
 
 import React, { useMemo } from 'react';
-import JSONNode from './JSONNode';
-import createStylingFromTheme from './createStylingFromTheme';
 import { invertTheme } from 'react-base16-styling';
 import type { StylingValue, Theme } from 'react-base16-styling';
+import JSONNode from './JSONNode.js';
+import createStylingFromTheme from './createStylingFromTheme.js';
 import type {
   CommonExternalProps,
   GetItemString,
   IsCustomNode,
   LabelRenderer,
   ShouldExpandNodeInitially,
-} from './types';
+} from './types.js';
 
 interface Props extends Partial<CommonExternalProps> {
   data: unknown;
@@ -86,5 +86,5 @@ export type {
   SortObjectKeys,
   Styling,
   CommonExternalProps,
-} from './types';
+} from './types.js';
 export type { StylingValue };

packages/react-json-tree/test/index.spec.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { createRenderer } from 'react-test-renderer/shallow';
+import TestRenderer from 'react-test-renderer/shallow';
 
-import { JSONTree } from '../src/index';
-import JSONNode from '../src/JSONNode';
+import { JSONTree } from '../src/index.js';
+import JSONNode from '../src/JSONNode.js';
 
 const BASIC_DATA = { a: 1, b: 'c' };
 
 function render(component: React.ReactElement) {
-  const renderer = createRenderer();
+  const renderer = TestRenderer.createRenderer();
   renderer.render(component);
   return renderer.getRenderOutput();
 }

packages/react-json-tree/test/objType.spec.ts

@@ -1,4 +1,4 @@
-import objType from '../src/objType';
+import objType from '../src/objType.js';
 
 describe('objType', () => {
   it('should determine the correct type', () => {

packages/react-json-tree/tsconfig.json

@@ -1,7 +1,7 @@
 {
-  "extends": "../../tsconfig.react.base.json",
+  "extends": "../../tsconfig.esm.react.base.json",
   "compilerOptions": {
-    "outDir": "lib/types"
+    "outDir": "lib"
   },
   "include": ["src"]
 }

packages/react-json-tree/tsconfig.test.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.react.base.json",
+  "extends": "../../tsconfig.esm.react.base.json",
   "compilerOptions": {
     "types": ["jest"]
   },

tsconfig.esm.react.base.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.esm.base.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}