Switch CRA to Vite, upgrade and switch up dependencies

akx · Jan 23, 2024 · ecacd0b · ecacd0b
1 parent 81e9d1c
commit ecacd0b
Show file tree

Hide file tree

Showing 23 changed files with 2,208 additions and 11,428 deletions.
diff --git a/.eslintrc.cjs b/.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"],
+};
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
diff --git a/.github/workflows/ci.yml b/.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
diff --git a/.gitignore b/.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
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,13 @@
+        DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 
+                    Version 2, December 2004 
+
+ Copyright (C) 2021-2023 various contributors
+
+ Everyone is permitted to copy and distribute verbatim or modified 
+ copies of this license document, and changing it is allowed as long 
+ as the name is changed. 
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.
diff --git a/index.html b/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>
diff --git a/package.json b/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,

diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/App.tsx b/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();

diff --git a/src/components/ErrorWrapper.tsx b/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>

diff --git a/src/components/MainContentPane.tsx b/src/components/MainContentPane.tsx
@@ -3,7 +3,9 @@ import { getSourceBoxFor, SourceInfo } from "../sources";
 import { TransformBox, TransformSourceProps, TransformTypeProps } from "./TransformBox";
 import { DestBox } from "./DestBox";
 import { MainLayout, TransformResult } from "../types";
-import SplitPane from "react-split-pane";
+import { Allotment } from "allotment";
+import "allotment/dist/style.css";
+
 
 interface MainContentPaneProps extends TransformTypeProps, TransformSourceProps {
   sources: SourceInfo[];
@@ -24,48 +26,52 @@ export const MainContentPane: React.FC<MainContentPaneProps> = ({
 }) => {
   const nSources = sources.length;
   const sourceBoxes = (
-    <div style={{ display: "flex", flex: 1, flexDirection: "column" }}>
+    <div style={{ display: "flex", flex: 1, flexDirection: "column", width: "100%", height: "100%" }}>
       {sources.map((s, i) => getSourceBoxFor(s, nSources > 1 ? `Input ${i + 1}` : undefined, `input-${i}`))}
     </div>
   );
   const transformBox = (
-    <TransformBox
-      transform={transform}
-      transformType={transformType}
-      onChangeTransform={onChangeTransform}
-      onChangeTransformType={onChangeTransformType}
-      nSources={nSources}
-    />
+    <div style={{ display: "flex", width: "100%", height: "100%" }}>
+      <TransformBox
+        transform={transform}
+        transformType={transformType}
+        onChangeTransform={onChangeTransform}
+        onChangeTransformType={onChangeTransformType}
+        nSources={nSources}
+      />
+    </div>
   );
-  const destBox = <DestBox destType={destType} result={result} />;
+  const destBox =
+    <div style={{ display: "flex", width: "100%", height: "100%" }}>
+      <DestBox destType={destType} result={result} />
+    </div>;
+
   switch (layout) {
     case MainLayout.ThreeColumns:
     default:
       return (
-        <SplitPane split="vertical" defaultSize="35%" pane1Style={{ overflow: "hidden" }}>
+        <Allotment key={MainLayout.ThreeColumns}>
           {sourceBoxes}
-          <SplitPane split="vertical" defaultSize="40%">
-            {transformBox}
-            {destBox}
-          </SplitPane>
-        </SplitPane>
+          {transformBox}
+          {destBox}
+        </Allotment>
       );
     case MainLayout.BottomCode:
       return (
-        <SplitPane split="horizontal" defaultSize="80%">
-          <SplitPane split="vertical" defaultSize="50%">
+        <Allotment vertical key={MainLayout.BottomCode}>
+          <Allotment>
             {sourceBoxes}
             {destBox}
-          </SplitPane>
+          </Allotment>
           {transformBox}
-        </SplitPane>
+        </Allotment>
       );
     case MainLayout.NoCode:
       return (
-        <SplitPane split="vertical" defaultSize="50%" pane1Style={{ overflow: "hidden" }}>
+        <Allotment key={MainLayout.NoCode}>
           {sourceBoxes}
           {destBox}
-        </SplitPane>
+        </Allotment>
       );
   }
 };