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 <k.hutten@protonmail.ch>

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"

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;

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

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',

src/lang/executor.test.ts

@@ -316,32 +316,32 @@ show(mySketch)
 })
 
 describe('testing math operators', () => {
-  it('it can sum', async () => {
+  it('can sum', async () => {
     const code = ['const myVar = 1 + 2'].join('\n')
     const { root } = await exe(code)
     expect(root.myVar.value).toBe(3)
   })
-  it('it can subtract', async () => {
+  it('can subtract', async () => {
     const code = ['const myVar = 1 - 2'].join('\n')
     const { root } = await exe(code)
     expect(root.myVar.value).toBe(-1)
   })
-  it('it can multiply', async () => {
+  it('can multiply', async () => {
     const code = ['const myVar = 1 * 2'].join('\n')
     const { root } = await exe(code)
     expect(root.myVar.value).toBe(2)
   })
-  it('it can divide', async () => {
+  it('can divide', async () => {
     const code = ['const myVar = 1 / 2'].join('\n')
     const { root } = await exe(code)
     expect(root.myVar.value).toBe(0.5)
   })
-  it('it can modulus', async () => {
+  it('can modulus', async () => {
     const code = ['const myVar = 5 % 2'].join('\n')
     const { root } = await exe(code)
     expect(root.myVar.value).toBe(1)
   })
-  it('it can do multiple operations', async () => {
+  it('can do multiple operations', async () => {
     const code = ['const myVar = 1 + 2 * 3'].join('\n')
     const { root } = await exe(code)
     expect(root.myVar.value).toBe(7)
@@ -356,7 +356,7 @@ describe('testing math operators', () => {
     const { root } = await exe(code)
     expect(root.myVar.value).toBe(3)
   })
-  it('with identifier', async () => {
+  it('with lots of testing', async () => {
     const code = ['const myVar = 2 * ((2 + 3 ) / 4 + 5)'].join('\n')
     const { root } = await exe(code)
     expect(root.myVar.value).toBe(12.5)

src/lang/modifyAst.test.ts

@@ -194,7 +194,7 @@ const part001 = startSketchAt([-1.2, 4.83])
 const yo = 5 + 6
 const yo2 = hmm([identifierGuy + 5])
 show(part001)`
-  it('should move a value into a new variable', async () => {
+  it('should move a binary expression into a new variable', async () => {
     const ast = abstractSyntaxTree(lexer(code))
     const programMemory = await enginelessExecutor(ast)
     const startIndex = code.indexOf('100 + 100') + 1
@@ -222,7 +222,7 @@ show(part001)`
     expect(newCode).toContain(`const newVar = 2.8`)
     expect(newCode).toContain(`line([newVar, 0], %)`)
   })
-  it('should move a value into a new variable', async () => {
+  it('should move a callExpression into a new variable', async () => {
     const ast = abstractSyntaxTree(lexer(code))
     const programMemory = await enginelessExecutor(ast)
     const startIndex = code.indexOf('def(')
@@ -236,7 +236,7 @@ show(part001)`
     expect(newCode).toContain(`const newVar = def('yo')`)
     expect(newCode).toContain(`angledLine([newVar, 3.09], %)`)
   })
-  it('should move a value into a new variable', async () => {
+  it('should move a binary expression with call expression into a new variable', async () => {
     const ast = abstractSyntaxTree(lexer(code))
     const programMemory = await enginelessExecutor(ast)
     const startIndex = code.indexOf('jkl(') + 1
@@ -250,7 +250,7 @@ show(part001)`
     expect(newCode).toContain(`const newVar = jkl('yo') + 2`)
     expect(newCode).toContain(`angledLine([newVar, 3.09], %)`)
   })
-  it('should move a value into a new variable', async () => {
+  it('should move a identifier into a new variable', async () => {
     const ast = abstractSyntaxTree(lexer(code))
     const programMemory = await enginelessExecutor(ast)
     const startIndex = code.indexOf('identifierGuy +') + 1

src/lang/queryAst.test.ts

@@ -173,7 +173,7 @@ show(part001)`
   })
 
   describe('testing isTypeInValue', () => {
-    it('it finds the pipeSubstituion', () => {
+    it('finds the pipeSubstituion', () => {
       const val = createCallExpression('yoyo', [
         createArrayExpression([
           createLiteral(1),
@@ -201,7 +201,7 @@ describe('testing getNodePathFromSourceRange', () => {
   |> line([0.94, 2.61], %)
   |> line([-0.21, -1.4], %)
 show(part001)`
-  it('it finds the second line when cursor is put at the end', () => {
+  it('finds the second line when cursor is put at the end', () => {
     const searchLn = `line([0.94, 2.61], %)`
     const sourceIndex = code.indexOf(searchLn) + searchLn.length
     const ast = abstractSyntaxTree(lexer(code))
@@ -216,7 +216,7 @@ show(part001)`
       [1, 'index'],
     ])
   })
-  it('it finds the last line when cursor is put at the end', () => {
+  it('finds the last line when cursor is put at the end', () => {
     const searchLn = `line([-0.21, -1.4], %)`
     const sourceIndex = code.indexOf(searchLn) + searchLn.length
     const ast = abstractSyntaxTree(lexer(code))

src/lang/std/sketchConstraints.ts

@@ -1,5 +1,5 @@
 import { getAngle } from '../../lib/utils'
-import { Selection, TooTip, toolTips } from '../../useStore'
+import { TooTip, toolTips } from '../../useStore'
 import {
   Program,
   VariableDeclarator,

src/lang/std/sketchcombos.test.ts

@@ -50,7 +50,7 @@ describe('testing getConstraintType', () => {
   it('testing xLine', () => {
     expect(helper2(`xLine(5, %)`)).toBe('yRelative')
   })
-  it('testing xLine', () => {
+  it('testing yLine', () => {
     expect(helper2(`yLine(5, %)`)).toBe('xRelative')
   })
   it('testing xLineTo', () => {
@@ -197,7 +197,7 @@ const part001 = startSketchAt([0, 0])
   |> xLine(segLen('seg01', %), %) // ln-xLineTo-free should convert to xLine
   |> yLine(segLen('seg01', %), %) // ln-yLineTo-free should convert to yLine
 show(part001)`
-  it('It should transform the ast', async () => {
+  it('should transform the ast', async () => {
     const ast = abstractSyntaxTree(lexer(inputScript))
     const selectionRanges: Selections['codeBasedSelections'] = inputScript
       .split('\n')
@@ -256,7 +256,7 @@ const part001 = startSketchAt([0, 0])
   |> angledLineToX([333, myVar3], %) // select for horizontal constraint 10
   |> angledLineToY([301, myVar], %) // select for vertical constraint 10
 show(part001)`
-  it('It should transform horizontal lines the ast', async () => {
+  it('should transform horizontal lines the ast', async () => {
     const expectModifiedScript = `const myVar = 2
 const myVar2 = 12
 const myVar3 = -10
@@ -313,7 +313,7 @@ show(part001)`
     const newCode = recast(newAst)
     expect(newCode).toBe(expectModifiedScript)
   })
-  it('It should transform vertical lines the ast', async () => {
+  it('should transform vertical lines the ast', async () => {
     const expectModifiedScript = `const myVar = 2
 const myVar2 = 12
 const myVar3 = -10

src/lang/tokeniser.test.ts

@@ -318,7 +318,7 @@ const yo = 6`)
       "number       '6'        from 46  to 47",
     ])
   })
-  it('testing tokenising line comments', () => {
+  it('testing tokenising line comments by itself', () => {
     const result = stringSummaryLexer(`log('hi')
 // comment on a line by itself
 const yo=45`)

src/setupTests.ts

@@ -1,20 +1,6 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom'
-import WebSocket from 'ws';
-import 'setimmediate'
-
-class WebsocketWrapper {
-  constructor(url: string) {
-    return new WebSocket(url, {
-        headers: {
-            'Autherization': `Bearer ${process.env.KITTYCAD_TOKEN}`,
-        }
-    })
-  }
-}
+import util from 'util'
+import fetch from 'isomorphic-fetch'
 
 class MockRTCPeerConnection {
   constructor() {
@@ -51,4 +37,8 @@ class MockRTCPeerConnection {
 // @ts-ignore
 global.RTCPeerConnection = MockRTCPeerConnection
 // @ts-ignore
-global.WebSocket = WebsocketWrapper
+global.fetch = fetch
+
+// @ts-ignore
+global.TextDecoder = util.TextDecoder
+global.TextEncoder = util.TextEncoder