From ecacd0ba937e951c68820592a1931957abcaf068 Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Tue, 23 Jan 2024 20:12:41 +0200 Subject: [PATCH] Switch CRA to Vite, upgrade and switch up dependencies --- .eslintrc.cjs | 27 + .github/FUNDING.yml | 1 - .github/workflows/ci.yml | 55 +- .gitignore | 33 +- LICENSE | 13 + index.html | 12 + package.json | 66 +- src/App.test.tsx | 9 - src/App.tsx | 14 +- src/components/ErrorWrapper.tsx | 1 - src/components/MainContentPane.tsx | 50 +- src/components/SelectDropdown.tsx | 4 +- src/components/TableView.tsx | 1 + src/components/TransformBox.tsx | 6 +- src/components/XlsxView.tsx | 2 +- src/core.tsx | 2 +- src/index.tsx | 4 +- src/markdownTable.tsx | 6 +- src/react-app-env.d.ts | 1 - src/transformers/javascript.tsx | 8 +- tsconfig.node.json | 10 + vite.config.ts | 8 + yarn.lock | 13303 ++++----------------------- 23 files changed, 2208 insertions(+), 11428 deletions(-) create mode 100644 .eslintrc.cjs delete mode 100644 .github/FUNDING.yml create mode 100644 LICENSE create mode 100644 index.html delete mode 100644 src/App.test.tsx delete mode 100644 src/react-app-env.d.ts create mode 100644 tsconfig.node.json create mode 100644 vite.config.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..dd63edc --- /dev/null +++ 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 deleted file mode 100644 index 9f9619c..0000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1 +0,0 @@ -github: [akx] diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 78d71f0..a5f8694 100644 --- 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 index 4d29575..76e5ca0 100644 --- 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 new file mode 100644 index 0000000..b43e0e7 --- /dev/null +++ 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 new file mode 100644 index 0000000..5aafa4c --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + d2d + + +
+ + + diff --git a/package.json b/package.json index 28b1267..a9cbbfd 100644 --- 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 deleted file mode 100644 index 23c181f..0000000 --- a/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; - -it("renders without crashing", () => { - const div = document.createElement("div"); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/App.tsx b/src/App.tsx index 8329a35..e79596e 100644 --- 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 index ddc8918..a780788 100644 --- a/src/components/ErrorWrapper.tsx +++ b/src/components/ErrorWrapper.tsx @@ -6,7 +6,6 @@ const defaultRenderError: ErrorRenderer = (error, errorInfo, reset) => (
Oops! An error occurred: ${error.toString()}
- {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} Try again diff --git a/src/components/MainContentPane.tsx b/src/components/MainContentPane.tsx index 21fab4a..bf0bb0f 100644 --- 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 = ({ }) => { const nSources = sources.length; const sourceBoxes = ( -
+
{sources.map((s, i) => getSourceBoxFor(s, nSources > 1 ? `Input ${i + 1}` : undefined, `input-${i}`))}
); const transformBox = ( - +
+ +
); - const destBox = ; + const destBox = +
+ +
; + switch (layout) { case MainLayout.ThreeColumns: default: return ( - + {sourceBoxes} - - {transformBox} - {destBox} - - + {transformBox} + {destBox} + ); case MainLayout.BottomCode: return ( - - + + {sourceBoxes} {destBox} - + {transformBox} - + ); case MainLayout.NoCode: return ( - + {sourceBoxes} {destBox} - + ); } }; diff --git a/src/components/SelectDropdown.tsx b/src/components/SelectDropdown.tsx index 0d741aa..90b414a 100644 --- a/src/components/SelectDropdown.tsx +++ b/src/components/SelectDropdown.tsx @@ -1,8 +1,7 @@ -import { Styleable } from "../types"; import React from "react"; import { Dropdown, DropdownItemProps } from "semantic-ui-react"; -interface SelectDropdownProps extends Styleable { +interface SelectDropdownProps { label: string; value: string; options: string[]; @@ -16,7 +15,6 @@ export const SelectDropdown: React.FC = ({ value, options, onChange, - style, nameMap, descriptionMap, }) => { diff --git a/src/components/TableView.tsx b/src/components/TableView.tsx index 1ecee62..75483df 100644 --- a/src/components/TableView.tsx +++ b/src/components/TableView.tsx @@ -37,6 +37,7 @@ function getColumns(dataArray: any[]): string[] { return columnOrder; } +// eslint-disable-next-line react/display-name const TableView = React.memo(({ data }: { data: any }) => { try { const dataArray = Array.from(data); diff --git a/src/components/TransformBox.tsx b/src/components/TransformBox.tsx index 4db234b..1cbf9c3 100644 --- a/src/components/TransformBox.tsx +++ b/src/components/TransformBox.tsx @@ -5,7 +5,7 @@ import { Setter, Styleable } from "../types"; import { Button, Menu, Message } from "semantic-ui-react"; import { SelectDropdown } from "./SelectDropdown"; import { prettyTransformNames, transformers } from "../transformers"; -import { ErrorBoundary } from "react-error-boundary"; +import { ErrorBoundary, FallbackProps } from "react-error-boundary"; export interface TransformSourceProps { transform: string; @@ -21,7 +21,7 @@ interface TransformProps extends TransformTypeProps, TransformSourceProps, Style nSources: number; } -let TOOLS_INFO = ` +const TOOLS_INFO = ` // * Lodash is available as \`_\` // ** e.g. \`_.reverse(data)\` // * Ramda is available as \`R\` @@ -66,7 +66,7 @@ export const TransformBox: React.FC = ({ /> ); const ErrorFallback = React.useCallback( - ({ error, componentStack, resetErrorBoundary }) => { + ({ error, resetErrorBoundary }: FallbackProps) => { return (

diff --git a/src/components/XlsxView.tsx b/src/components/XlsxView.tsx index c7e1171..25046bf 100644 --- a/src/components/XlsxView.tsx +++ b/src/components/XlsxView.tsx @@ -14,7 +14,7 @@ async function generateAndDownloadXlsx(data: any, extension: string) { const ExportButton = ({ label, format, data }: { label: string; format: string; data: any }) => (