Switch CRA to Vite, upgrade and switch up dependencies

.eslintrc.cjs

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "off",  // TODO: fix these
+      { allowConstantExport: true },
+    ],
+    "@typescript-eslint/no-explicit-any": "off", // TODO: fix these
+    "react/prop-types": "off",
+    "react/no-unescaped-entities": "off",
+  },
+  settings: {
+    react: {
+      version: "18",
+    },
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:react/recommended",
+    "prettier",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+};

.github/workflows/ci.yml

@@ -2,30 +2,49 @@ name: CI
 
 on:
   push:
-    branches: [master]
+    branches: [ master ]
   pull_request:
-    branches: [master]
+    branches: [ master ]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
 
 jobs:
-  build:
+  lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+          node-version: "20.x"
+          cache: yarn
+      - run: yarn
+      - run: yarn lint
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: "20.x"
+          cache: yarn
       - run: yarn
-      - run: yarn build
-        env:
-          GENERATE_SOURCEMAP: "false"
-      - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@4.0.0
+      - run: yarn build --base=/d2d/
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
         with:
-          branch: gh-pages
-          folder: build
-        if: ${{ github.event_name == 'push' }}
+          path: dist
+  deploy:
+    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }}
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -1,23 +1,12 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
+*.local
+*.log*
+*.njsproj
+*.ntvs*
+*.sln
+*.suo
+*.sw?
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+.idea
+/dist*
+logs
+node_modules

LICENSE

@@ -0,0 +1,22 @@
+
+The MIT License (MIT)
+
+Copyright (c) 2016-2024 Aarni Koskela <akx@iki.fi>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>d2d</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package.json

@@ -1,73 +1,61 @@
 {
   "name": "d2d",
   "version": "0.1.0",
+  "type": "module",
   "private": true,
-  "installConfig": {
-    "pnp": false
-  },
   "homepage": "https://akx.github.io/d2d",
   "dependencies": {
+    "@plq/use-persisted-state": "^1.2.0",
+    "allotment": "^1.20.0",
     "codemirror": "^5.65.0",
     "d3-dsv": "^3.0.1",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "markdown-table": "^3.0.2",
-    "ramda": "^0.27.1",
-    "react": "^17.0.2",
+    "ramda": "^0.29.1",
+    "react": "^18.2.0",
     "react-codemirror2": "^7.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-loadable": "^5.5.0",
-    "react-scripts": "4.0.3",
     "react-semantic-toasts": "^0.6.5",
-    "react-split-pane": "^0.1.92",
     "react-table": "^6.10.3",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.0.4",
     "toml": "^3.0.0",
     "toml-patch": "^0.2.3",
-    "typescript": "4.5.4",
-    "use-persisted-state": "^0.3.3",
     "xlsx": "^0.17.4"
   },
   "devDependencies": {
     "@types/codemirror": "^5.60.5",
     "@types/d3-dsv": "^3.0.0",
-    "@types/jest": "27.4.0",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.178",
-    "@types/node": "17.0.7",
-    "@types/prettier": "^2.4.2",
-    "@types/ramda": "^0.27.62",
-    "@types/react": "17.0.38",
-    "@types/react-dom": "17.0.11",
+    "@types/node": "20.11.5",
+    "@types/prettier": "^3.0.0",
+    "@types/ramda": "^0.29.10",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
     "@types/react-loadable": "^5.5.6",
     "@types/react-table": "^6.8.9",
-    "@types/use-persisted-state": "^0.3.0",
-    "prettier": "^2.5.1"
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "prettier": "^3.2.4",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.8"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint --ext=.tsx --ext=.ts src",
-    "prettify": "prettier --write 'src/*.ts*' 'src/**/*.ts*'"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
+    "prettify": "prettier --write ."
   },
   "prettier": {
     "printWidth": 120,

src/App.tsx

@@ -1,22 +1,22 @@
 import React from "react";
 import { MainLayout } from "./types";
 import { Toolbar } from "./components/Toolbar";
-import createPersistedState from "use-persisted-state";
+import createPersistedState from "@plq/use-persisted-state";
 import { SemanticToastContainer } from "react-semantic-toasts";
 import "react-semantic-toasts/styles/react-semantic-alert.css";
 import { useSource, useTransformResult } from "./sources";
 import { MainContentPane } from "./components/MainContentPane";
+import storage from '@plq/use-persisted-state/lib/storages/local-storage';
 
-const useLayoutState = createPersistedState("d2d-layout");
-const useTransformState = createPersistedState("d2d-transform");
-const useTransformTypeState = createPersistedState("d2d-transform-type");
+
+const [usePersistedState] = createPersistedState('d2d', storage);
 
 const App: React.FC = () => {
   const [nSources, setNSources] = React.useState(1);
   const [destType, setDestType] = React.useState("json");
-  const [transform, setTransform] = useTransformState("");
-  const [transformType, setTransformType] = useTransformTypeState("javascript");
-  const [layout, setLayout] = useLayoutState(MainLayout.ThreeColumns);
+  const [transform, setTransform] = usePersistedState("transform", "");
+  const [transformType, setTransformType] = usePersistedState("transform-type", "javascript");
+  const [layout, setLayout] = usePersistedState("layout", MainLayout.ThreeColumns);
   const source1 = useSource();
   const source2 = useSource();
   const source3 = useSource();

src/components/ErrorWrapper.tsx

@@ -6,7 +6,6 @@ const defaultRenderError: ErrorRenderer = (error, errorInfo, reset) => (
   <div>
     Oops! An error occurred: ${error.toString()}
     <br />
-    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
     <a href="#" onClick={reset}>
       Try again
     </a>