feat: migrate from cra to vite and update dependencies

sujinleeme · Dec 25, 2023 · 9931649 · 9931649
1 parent fea0ffc
commit 9931649
Show file tree

Hide file tree

Showing 16 changed files with 4,674 additions and 10,812 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/README.md b/README.md
@@ -33,14 +33,6 @@ As the initialization process is supposed to load some scripts from CDN, there i
 
 See : https://github.com/suren-atoyan/monaco-react/issues/88
 
-### Error-Message-Bar
-
-`OnValidate`
-
-In this web, there are multiple editor components and one of them has broken input, only onValidate of the last component is executed and it has the other component's markers values. The absence of the API for live model makers makes it harder to provide an alternative approach.
-
-See: https://github.com/suren-atoyan/monaco-react/issues/182
-
 ## TODO
 
 - Form integration

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,25 +2,22 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta name="description" content="Web site created using create-react-app" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+      Notice the use of  in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
@@ -40,4 +37,5 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script type="module" src="/src/index.tsx"></script>
 </html>
diff --git a/package.json b/package.json
@@ -22,26 +22,42 @@
     "url": "https://github.com/sujinleeme/react-json-editor/issues"
   },
   "homepage": "/react-json-editor/",
+  "jest": {
+    "preset": "ts-jest/presets/js-with-ts",
+    "testEnvironment": "jest-environment-jsdom",
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    },
+    "modulePaths": [
+      "<rootDir>/src"
+    ]
+  },
   "dependencies": {
-    "@fluentui/react": "^7.158.1",
-    "@monaco-editor/react": "^4.0.9",
-    "ajv": "^7.0.3",
+    "@fluentui/react": "^8.114.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "ajv": "^8.12.0",
+    "browserslist-to-esbuild": "^1.2.0",
     "dirty-json": "^0.9.2",
-    "monaco-editor": "^0.22.3",
-    "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "^4.0.2",
-    "typescript": "^4.0.3",
-    "uuid": "^8.3.2",
-    "web-vitals": "^0.2.4"
+    "monaco-editor": "^0.45.0",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3",
+    "uuid": "^9.0.1",
+    "vite": "^5.0.10",
+    "vite-tsconfig-paths": "^4.2.2",
+    "web-vitals": "^3.5.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "CI=true react-scripts test",
-    "test:coverage": "yarn test --coverage",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage .",
+    "test:debug": "jest --inspect-brk --runInBand --no-cache",
+    "preview": "vite preview",
     "format": "prettier --write src/**/*.ts{,x}",
     "lint": "tsc --noEmit && eslint src/**/*.ts{,x}",
     "predeploy": "yarn build",
@@ -67,39 +83,30 @@
       "react-app/jest"
     ]
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
-    "@testing-library/dom": "^7.29.4",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/react-hooks": "^5.0.3",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.0",
-    "@types/uuid": "^8.3.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.0",
-    "@typescript-eslint/parser": "^4.14.0",
-    "eslint": "^7.18.0",
-    "eslint-config-airbnb-typescript": "^12.0.0",
-    "eslint-config-airbnb-typescript-prettier": "^4.1.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "gh-pages": "^3.1.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.3"
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/uuid": "^9.0.7",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "eslint": "^8.56.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-airbnb-typescript-prettier": "^5.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.2",
+    "gh-pages": "^6.1.1",
+    "husky": "^8.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.0",
+    "ts-jest": "^29.1.1"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,7 +5,7 @@ import { Stack, IStackStyles, mergeStyleSets } from "@fluentui/react";
 import { AppBar } from "./components/app-bar";
 import { CommandBar } from "./components/command-bar";
 import { JSONEditor } from "./components/json-editor";
-import { SampleData } from "./components/json-editor/mock-data";
+import { SampleData } from "./components/json-editor/utils/__mocks__/mock-data";
 import { useToggle } from "./hooks";
 
 enum Editor {
@@ -54,7 +54,7 @@ const App = (): JSX.Element => {
     }
   }, [isSchemaEditorOn, isSchemaSampleDataOn, toggleSchemaSampleDataOn]);
 
-  const handleSchemaValueChange = (value: string) => setSchemaValue(value);
+  const handleSchemaValueChange = (value?: string) => setSchemaValue(value);
 
   const getSchemaValue = () =>
     isSchemaSampleDataOn && !schemaValue ? SampleData.schema : schemaValue;

diff --git a/src/assets/jsonlint/validation.ts b/src/assets/jsonlint/validation.ts
@@ -101,6 +101,6 @@ export const validateJson = ({ jsonString, schema }: ValidateJsonArgs): Validati
     return validateSchema({ schema, json });
   } catch (err) {
     // try to extract the line number from the jsonlint error message
-    return jsonString ? improveParseError(err) : undefined;
+    return jsonString ? improveParseError(err as Error) : undefined;
   }
 };
diff --git a/src/components/json-editor/json-editor.tsx b/src/components/json-editor/json-editor.tsx
@@ -32,26 +32,25 @@ interface JSONEditorProps {
   title?: string;
   path?: string;
   isSchemaSampleDataOn: boolean;
-  onChange?: (value: string) => void;
+  onChange?: (value?: string) => void;
 }
 
 interface RefObject extends Monaco.editor.ICodeEditor {
   _domElement?: HTMLElement;
 }
 
-export const JSONEditor: React.FC<JSONEditorProps> = ({
+export const JSONEditor = ({
   defaultValue,
   schemaValue,
   title,
   path = "",
   isSchemaSampleDataOn,
   onChange,
-}): JSX.Element => {
+}: JSONEditorProps) => {
   const monaco = useMonaco();
   const [errors, setErrors] = useState<string[]>([]);
   const [isAutoPrettifyOn, toggleAutoPrettifyOn] = useToggle(false);
-
-  const [isValidJson, setIsValidJson] = useState<boolean>(false);
+  const [isValidJson, setIsValidJson] = useState(false);
   const editorRef = useRef<RefObject | null>(null);
 
   const updateEditorLayout = useCallback(() => {
@@ -94,14 +93,14 @@ export const JSONEditor: React.FC<JSONEditorProps> = ({
   }, [schemaValue, monaco]);
 
   const handleEditorPrettify = useCallback(() => {
-    editorRef.current?.getAction("editor.action.formatDocument").run();
+    editorRef.current?.getAction("editor.action.formatDocument")?.run();
   }, []);
 
   const handleEditorUpdateValue = useCallback((value?: string) => {
     const editor = editorRef.current;
     if (!editor) return;
     editor.setValue(value || "");
-    value && editor.getAction("editor.action.formatDocument").run();
+    value && editor?.getAction("editor.action.formatDocument")?.run();
   }, []);
 
   const handleClearClick = () => editorRef.current?.setValue("");
@@ -174,7 +173,7 @@ export const JSONEditor: React.FC<JSONEditorProps> = ({
   };
 
   const handleEditorChange = useCallback(
-    (value) => {
+    (value: string | undefined) => {
       isAutoPrettifyOn && handleEditorPrettify();
       onChange && onChange(value);
     },

diff --git a/src/components/json-editor/mock-data.ts → .../json-editor/utils/__mocks__/mock-data.ts b/src/components/json-editor/mock-data.ts → .../json-editor/utils/__mocks__/mock-data.ts
diff --git a/.../json-editor/utils/__test__/file.test.tsx → ...json-editor/utils/__tests__/file.test.tsx b/.../json-editor/utils/__test__/file.test.tsx → ...json-editor/utils/__tests__/file.test.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { render } from "@testing-library/react";
 
-import { validFormattedJsonInput } from "../../mock-data";
+import { validFormattedJsonInput } from "../__mocks__/mock-data";
 import { downloadJsonFile } from "../file";
 
 interface MockButtonProps {

diff --git a/...editor/utils/__test__/json-string.test.ts → ...ditor/utils/__tests__/json-string.test.ts b/...editor/utils/__test__/json-string.test.ts → ...ditor/utils/__tests__/json-string.test.ts
@@ -2,7 +2,7 @@ import {
   invalidFormattedJsonInput,
   validFormattedJsonInput,
   validMinifiedJsonInput,
-} from "../../mock-data";
+} from "../__mocks__/mock-data";
 import { minifyJsonString, prettifyJsonString } from "../json-string";
 
 describe("minifyJsonString", () => {

diff --git a/src/components/json-editor/utils/file.tsx b/src/components/json-editor/utils/file.tsx
@@ -1,16 +1,20 @@
 import { v4 as uuid } from "uuid";
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+declare global {
+  interface Navigator {
+    msSaveOrOpenBlob: (blobOrBase64: Blob | string, filename: string) => void
+  }
+}
+
 export const downloadJsonFile = async (jsonString: string) => {
   const fileName = uuid();
   // Set the HREF to a Blob representation of the data to be downloaded
   const blob = new Blob([jsonString], { type: "application/json" });
-  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+  if (window.navigator && window.navigator.msSaveOrOpenBlob ) {
     // for IE
     window.navigator.msSaveOrOpenBlob(blob, fileName);
   } else {
     // for Non-IE (chrome, firefox etc.)
-
     try {
       // create an invisible A element
       const link = document.createElement("a");

diff --git a/src/hooks/__test__/use-toggle.test.ts b/src/hooks/__test__/use-toggle.test.ts
@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { renderHook, act } from '@testing-library/react'
 
 import { useToggle } from "../use-toggle";
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,19 +1,14 @@
-import React from "react";
+import { createRoot } from 'react-dom/client'
 
 import { initializeIcons } from "@fluentui/react/lib/Icons";
-import ReactDOM from "react-dom";
 
 import "./index.css";
 
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
-ReactDOM.render(
-  // <React.StrictMode>
-  <App />,
-  // </React.StrictMode>,
-  document.getElementById("root")
-);
+createRoot(document.getElementById('root')!).render(<App />)
+
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

diff --git a/vite-env.d.ts b/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/vite.config.mts b/vite.config.mts
@@ -0,0 +1,19 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import viteTsconfigPaths from "vite-tsconfig-paths";
+import browserslistToEsbuild from 'browserslist-to-esbuild'
+
+export default defineConfig({
+  // depending on your application, base can also be "/"
+  base: "",
+  plugins: [react(), viteTsconfigPaths()],
+  build: {
+    target: browserslistToEsbuild(),
+  },
+  server: {
+    // this ensures that the browser opens upon server start
+    open: true,
+    // this sets a default port to 3000
+    port: 3000,
+  },
+});