Migrate from CRA to Vite (#170)

* Basic CRA to Vite conversion * Restore ESLint support * Remove semicolons from vite config * Add vite client types to tsconfig * Migrate to Vitest for testing (not working on Mac) * some test progress (#175) * some test progress * something maybe working * remove local lib * small clean up * tweaks * fix dependency * clean up deps * remove vitest import * vitest config is needed even though we're not using vitest * more tweaks to vite config --------- Co-authored-by: Kurt Hutten <[email protected]>
KittyCAD · Jul 20, 2023 · b89faa4 · b89faa4 · vercel · Jul 20, 2023
1 parent 1666e17
commit b89faa4
Show file tree

Hide file tree

Showing 22 changed files with 2,601 additions and 6,433 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,12 @@
+{
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "rules": {
+      "semi": [
+        "error",
+        "never"
+      ]
+    }
+}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -13,9 +13,8 @@ jobs:
         with:
           node-version: '16.x'
       - run: yarn install
-      - run: yarn build:wasm:ci
+      - run: yarn build:wasm
       - run: yarn simpleserver:ci
-      - run: npm pkg delete type
       - run: yarn test:nowatch
       - run: yarn test:cov
       - run: yarn test:rust
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-env"],
+}
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,25 +2,25 @@
 <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" />
+    <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`.
     -->
@@ -39,5 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  preset: 'ts-jest/presets/js-with-ts',
+  transform: {
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    "^.+\\.(js|jsx)$": "babel-jest",
+  },
+  transformIgnorePatterns: [
+    "//node_modules/(?!(allotment|@tauri-apps/api)/)",
+  ],
+  moduleNameMapper: {
+    '^allotment$': 'allotment/dist/legacy',
+  },
+  setupFilesAfterEnv: ['./src/setupTests.ts'],
+}
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
+    "@types/jest": "^29.5.3",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -25,62 +25,42 @@
     "react-hot-toast": "^2.4.1",
     "react-json-view": "^1.21.3",
     "react-modal-promise": "^1.0.2",
-    "react-router-dom": "^6.14.1",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^6.14.2",
     "sketch-helpers": "^0.0.3",
     "swr": "^2.0.4",
     "toml": "^3.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.4.2",
     "util": "^0.12.5",
     "uuid": "^9.0.0",
-    "wasm-pack": "^0.11.1",
+    "wasm-pack": "^0.12.1",
     "web-vitals": "^2.1.0",
     "zustand": "^4.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && source \"$HOME/.cargo/env\" && curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y && yarn build:wasm:ci && react-scripts build",
-    "build:local": "react-scripts build",
-    "build:both": "react-scripts build",
-    "build:both:local": "yarn build:wasm && react-scripts build",
-    "test": "react-scripts test",
-    "test:nowatch": "react-scripts test --watchAll=false --forceExit",
+    "start": "vite",
+    "build": "curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && source \"$HOME/.cargo/env\" && curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y && yarn build:wasm && vite build",
+    "build:local": "vite build",
+    "build:both": "vite build",
+    "build:both:local": "yarn build:wasm && vite build",
+    "test": "jest",
+    "test:nowatch": "jest --watchAll=false --forceExit",
     "test:rust": "(cd src/wasm-lib && cargo test && cargo clippy)",
-    "test:cov": "react-scripts test --watchAll=false --coverage=true --forceExit",
+    "test:cov": "jest --watchAll=false --coverage=true --forceExit",
     "simpleserver:ci": "http-server ./public --cors -p 3000 &",
     "simpleserver": "http-server ./public --cors -p 3000",
-    "eject": "react-scripts eject",
     "fmt": "prettier --write ./src/**/*.{ts,tsx,js} && prettier --write ./src/**/**/*.{ts,tsx,js}",
-    "remove-importmeta": "sed -i '' 's/import.meta.url//g' \"./src/wasm-lib/pkg/wasm_lib.js\"",
-    "remove-importmeta:ci": "sed -i 's/import.meta.url//g' \"./src/wasm-lib/pkg/wasm_lib.js\"",
-    "add-missing-import": "echo \"import util from 'util'; if (typeof window !== 'undefined' && !window.TextEncoder) { window.TextEncoder = util.TextEncoder; window.TextDecoder = util.TextDecoder}\" | cat - ./src/wasm-lib/pkg/wasm_lib.js > temp && mv temp ./src/wasm-lib/pkg/wasm_lib.js",
-    "build:wasm:ci": "mkdir src/wasm-lib/pkg; cd src/wasm-lib && wasm-pack build --target web --out-dir pkg && cd ../../ && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn remove-importmeta:ci && yarn add-missing-import && yarn fmt",
-    "build:wasm": "mkdir src/wasm-lib/pkg; cd src/wasm-lib && wasm-pack build --target web --out-dir pkg && cd ../../ && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn remove-importmeta && yarn add-missing-import && yarn fmt"
-  },
-  "jest": {
-    "transformIgnorePatterns": [
-      "node_modules/(?!(three|allotment|@tauri-apps/api)/)"
-    ]
+    "build:wasm": "yarn wasm-prep && (cd src/wasm-lib && wasm-pack build --target web --out-dir pkg) && cp src/wasm-lib/pkg/wasm_lib_bg.wasm public && yarn fmt && yarn remove-importmeta",
+    "remove-importmeta": "sed -i 's/import.meta.url//g' \"./src/wasm-lib/pkg/wasm_lib.js\"; sed -i '' 's/import.meta.url//g' \"./src/wasm-lib/pkg/wasm_lib.js\" || echo \"sed for both mac and linux\"",
+    "wasm-prep": "rm -rf src/wasm-lib/pkg && mkdir src/wasm-lib/pkg",
+    "lint": "eslint --fix src"
   },
   "prettier": {
     "trailingComma": "es5",
     "tabWidth": 2,
     "semi": false,
     "singleQuote": true
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "rules": {
-      "semi": [
-        "error",
-        "never"
-      ]
-    }
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -94,16 +74,28 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.22.9",
     "@tauri-apps/cli": "^1.3.1",
     "@types/crypto-js": "^4.1.1",
+    "@types/isomorphic-fetch": "^0.0.36",
     "@types/uuid": "^9.0.1",
     "@types/ws": "^8.5.5",
+    "@vitejs/plugin-react": "^4.0.3",
     "autoprefixer": "^10.4.13",
+    "babel-jest": "^29.6.1",
+    "eslint": "^8.44.0",
+    "eslint-config-react-app": "^7.0.1",
+    "isomorphic-fetch": "^3.0.0",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
     "postcss": "^8.4.19",
     "prettier": "^2.8.0",
     "setimmediate": "^1.0.5",
     "tailwindcss": "^3.2.4",
-    "ws": "^8.13.0",
+    "ts-jest": "^29.1.1",
+    "vite": "^4.4.3",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-tsconfig-paths": "^4.2.0",
     "yarn": "^1.22.19"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -49,6 +49,7 @@ export function App() {
     setIsStreamReady,
     isStreamReady,
     token,
+    formatCode,
   } = useStore((s) => ({
     editorView: s.editorView,
     setEditorView: s.setEditorView,
@@ -74,7 +75,8 @@ export function App() {
     setMediaStream: s.setMediaStream,
     isStreamReady: s.isStreamReady,
     setIsStreamReady: s.setIsStreamReady,
-    token: s.token
+    token: s.token,
+    formatCode: s.formatCode,
   }))
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = (value: string, viewUpdate: ViewUpdate) => {
@@ -262,13 +264,13 @@ export function App() {
           <SetToken />
           <div className="h-full flex flex-col items-start">
             <PanelHeader title="Editor" />
-            {/* <button
-              disabled={!shouldFormat}
+            <button
+              // disabled={!shouldFormat}
               onClick={formatCode}
-              className={`${!shouldFormat && 'text-gray-300'}`}
+              // className={`${!shouldFormat && 'text-gray-300'}`}
             >
               format
-            </button> */}
+            </button>
             <div
               className="bg-red h-full w-full overflow-auto"
               id="code-mirror-override"

diff --git a/src/index.css b/src/index.css
@@ -1,9 +1,9 @@
+@import '../node_modules/allotment/dist/style.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import '../node_modules/allotment/dist/style.css';
-@import './colors.css';
 
 body {
   margin: 0;

diff --git a/src/lang/abstractSyntaxTree.test.ts b/src/lang/abstractSyntaxTree.test.ts
@@ -29,7 +29,7 @@ describe('findClosingBrace', () => {
 })
 
 describe('testing AST', () => {
-  test('test 5 + 6', () => {
+  test('5 + 6', () => {
     const tokens = lexer('5 +6')
     const result = abstractSyntaxTree(tokens)
     delete (result as any).nonCodeMeta
@@ -66,7 +66,7 @@ describe('testing AST', () => {
       ],
     })
   })
-  test('test const myVar = 5', () => {
+  test('const myVar = 5', () => {
     const tokens = lexer('const myVar = 5')
     const { body } = abstractSyntaxTree(tokens)
     expect(body).toEqual([
@@ -98,7 +98,7 @@ describe('testing AST', () => {
       },
     ])
   })
-  test('test multi-line', () => {
+  test('multi-line', () => {
     const code = `const myVar = 5
 const newVar = myVar + 1
 `
@@ -171,7 +171,7 @@ const newVar = myVar + 1
       },
     ])
   })
-  test('test using std function "log"', () => {
+  test('using std function "log"', () => {
     const code = `log(5, "hello", aIdentifier)`
     const tokens = lexer(code)
     const { body } = abstractSyntaxTree(tokens)
@@ -1392,7 +1392,7 @@ describe('testing pipe operator special', () => {
 })
 
 describe('nests binary expressions correctly', () => {
-  it('it works with the simple case', () => {
+  it('works with the simple case', () => {
     const code = `const yo = 1 + 2`
     const { body } = abstractSyntaxTree(lexer(code))
     expect(body[0]).toEqual({
@@ -1435,7 +1435,7 @@ describe('nests binary expressions correctly', () => {
       ],
     })
   })
-  it('it should nest according to precedence with multiply first', () => {
+  it('should nest according to precedence with multiply first', () => {
     // should be binExp { binExp { lit-1 * lit-2 } + lit}
     const code = `const yo = 1 * 2 + 3`
     const { body } = abstractSyntaxTree(lexer(code))
@@ -1492,7 +1492,7 @@ describe('nests binary expressions correctly', () => {
       ],
     })
   })
-  it('it should nest according to precedence with sum first', () => {
+  it('should nest according to precedence with sum first', () => {
     // should be binExp { lit-1 + binExp { lit-2 * lit-3 } }
     const code = `const yo = 1 + 2 * 3`
     const { body } = abstractSyntaxTree(lexer(code))
@@ -1549,7 +1549,7 @@ describe('nests binary expressions correctly', () => {
       ],
     })
   })
-  it('it should nest properly with two opperators of equal precedence', () => {
+  it('should nest properly with two opperators of equal precedence', () => {
     const code = `const yo = 1 + 2 - 3`
     const { body } = abstractSyntaxTree(lexer(code))
     expect((body[0] as any).declarations[0].init).toEqual({
@@ -1586,7 +1586,7 @@ describe('nests binary expressions correctly', () => {
       },
     })
   })
-  it('it should nest properly with two opperators of equal (but higher) precedence', () => {
+  it('should nest properly with two opperators of equal (but higher) precedence', () => {
     const code = `const yo = 1 * 2 / 3`
     const { body } = abstractSyntaxTree(lexer(code))
     expect((body[0] as any).declarations[0].init).toEqual({
@@ -1623,7 +1623,7 @@ describe('nests binary expressions correctly', () => {
       },
     })
   })
-  it('it should nest properly with longer example', () => {
+  it('should nest properly with longer example', () => {
     const code = `const yo = 1 + 2 * (3 - 4) / 5 + 6`
     const { body } = abstractSyntaxTree(lexer(code))
     const init = (body[0] as any).declarations[0].init

diff --git a/src/lang/astMathExpressions.test.ts b/src/lang/astMathExpressions.test.ts
@@ -53,7 +53,7 @@ describe('parseExpression', () => {
       },
     })
   })
-  it('parses a more complex expression with parentheses with more ', () => {
+  it('parses a more complex expression with parentheses with more', () => {
     const result = parseExpression(lexer('1 * ( 2 + 3 ) / 4'))
     expect(result).toEqual({
       type: 'BinaryExpression',
@@ -78,7 +78,7 @@ describe('parseExpression', () => {
       right: { type: 'Literal', value: 4, raw: '4', start: 16, end: 17 },
     })
   })
-  it('same as last one but with a 1 + at the start ', () => {
+  it('same as last one but with a 1 + at the start', () => {
     const result = parseExpression(lexer('1 + ( 2 + 3 ) / 4'))
     expect(result).toEqual({
       type: 'BinaryExpression',
@@ -103,7 +103,7 @@ describe('parseExpression', () => {
       },
     })
   })
-  it('nested braces ', () => {
+  it('nested braces', () => {
     const result = parseExpression(lexer('1 * (( 2 + 3 ) / 4 + 5 )'))
     expect(result).toEqual({
       type: 'BinaryExpression',
@@ -141,7 +141,7 @@ describe('parseExpression', () => {
       },
     })
   })
-  it('multiple braces around the same thing ', () => {
+  it('multiple braces around the same thing', () => {
     const result = parseExpression(lexer('1 * ((( 2 + 3 )))'))
     expect(result).toEqual({
       type: 'BinaryExpression',