Change build system to Vite (#711)

.github/workflows/node.js.yml

@@ -26,33 +26,20 @@ jobs:
         run: git fetch --no-tags origin ${{ github.event.pull_request.base.ref }}
 
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
+          cache: 'npm'
 
-      - name: Cache node_modules
-        id: cache-node-modules
+      - name: Cache jest
         uses: actions/cache@v2
         with:
-          # If package-lock has not changed, it should be safe to restore all node_modules as they were
           path: |
-            node_modules
-            packages/*/node_modules
-          key: ${{ runner.os }}-modules-${{ hashFiles('package-lock.json') }}
-
-      - name: Cache npm
-        uses: actions/cache@v2
-        if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          # Only needed if package-lock changed and we'll do npm ci
-          # It's possible we don't want to skip this since caches are evicted after 7 days of no access
-          # If no new packages are installed for a while, the install could take longer
-          # It might not be worth it though if the install only takes another minute vs 10-15s per action to cache this
-          path: ~/.npm
-          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+            .jest-cache
+            packages/*/.jest-cache
+          key: ${{ runner.os }}-jestcache-${{ github.sha }}
           restore-keys: |
-            ${{ runner.os }}-npm-
+            ${{ runner.os }}-jestcache-
 
       - name: Cache linters
         uses: actions/cache@v2
@@ -66,44 +53,28 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-lintcache-
 
-      # Only need to install deps if package-lock changed
-      # Do this before restoring build cache since npm ci cleans node_modules
       - name: Install dependencies
-        if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: npm ci --no-audit
 
-      # This is for webpack/terser cache mainly which helps build speed
-      # Cache on pushes to main should end up using the cache from the previous commit to main
-      # PRs should hit the cache on the base branch first, then future commits hit the cache on the PR
-      # Don't skip this on node_modules hit b/c package-lock will change less often than this cache
-      # The result would be less recent build caches if it were skipped
-      - name: Cache node_modules/.cache
-        uses: actions/cache@v2
-        with:
-          path: |
-            node_modules/.cache
-            packages/*/node_modules/.cache
-          key: ${{ runner.os }}-build-cache-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-build-cache-
-
       - name: Build
         run: npm run build
 
       # Run unit tests on all files for accurate code coverage
       # Lint only changed files so linting is faster
+      # Caching with the absolute path b/c Jest will make a folder in each project
+      # Then there's caches in all package folders
       - name: Test (Pull Request)
         if: ${{ github.event_name == 'pull_request' }}
         run: |
-          npm run test:unit -- --cacheDirectory node_modules/.cache/jest
-          npm run test:lint -- --changedSince origin/${{ github.event.pull_request.base.ref }} --cacheDirectory node_modules/.cache/jest
+          npm run test:unit -- --cacheDirectory $PWD/.jest-cache
+          npm run test:lint -- --changedSince origin/${{ github.event.pull_request.base.ref }} --cacheDirectory $PWD/.jest-cache
           npm run test:golden-layout
 
       - name: Test (Push)
         if: ${{ github.event_name == 'push' }}
         run: |
-          npm run test:unit -- --cacheDirectory node_modules/.cache/jest
-          npm run test:lint -- --lastCommit --cacheDirectory node_modules/.cache/jest
+          npm run test:unit -- --cacheDirectory $PWD/.jest-cache
+          npm run test:lint -- --lastCommit --cacheDirectory $PWD/.jest-cache
           npm run test:golden-layout
 
       - name: Codecov report

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch Code Studio",
+      "request": "launch",
+      "type": "chrome",
+      "url": "http://localhost:4000",
+      "webRoot": "${workspaceFolder}",
+      "userDataDir": "${workspaceFolder}/.vscode/chrome-debug-profile"
+    }
+  ]
+}

README.md

@@ -30,6 +30,14 @@ We are still using node 16.x and npm 8.x. If you are [using nvm](https://github.
   If you want to collect coverage locally, run `npm test -- --coverage`
 
 - `npm run build`: Create a production build of all packages. Mainly used by CI when packaging up a production version of the app.
+- `npm run preview`: Runs the Vite preview server for the built code-studio, embed-grid, and embed-chart. These will open on ports 4000, 4010, and 4020.
+
+Edit `.env.local` in each package to contain the following pointing to your local DHC address. These are needed for the session websocket and for things like notebooks to be proxied correctly by Vite.
+
+```
+VITE_CORE_API_URL=http://localhost:10000/jsapi
+VITE_PROXY_URL=http://localhost:10000
+```
 
 ## Package Overview
 

jest.config.base.cjs

@@ -19,6 +19,8 @@ module.exports = {
       'node_modules',
       'monaco-editor/esm/vs/editor/editor.api.js'
     ),
+    // Handle monaco worker files
+    '\\.worker.*$': 'identity-obj-proxy',
     '^@deephaven/golden-layout$': path.join(
       __dirname,
       './packages/golden-layout/dist/goldenlayout.js'

jest.config.unit.cjs

@@ -3,7 +3,7 @@ const baseConfig = require('./jest.config.base.cjs');
 module.exports = {
   ...baseConfig,
   projects: ['<rootDir>/packages/*/jest.config.cjs'],
-  collectCoverage: true,
+  collectCoverage: process.env.CI === 'true',
   collectCoverageFrom: ['./src/**/*.{js,ts,jsx,tsx}'], // This is relative to individual project root due to how Jest handles it
   coverageDirectory: './coverage',
 };

lerna.json

@@ -1,6 +1,5 @@
 {
-  "packages": [
-    "packages/*"
-  ],
+  "packages": ["packages/*"],
+  "useWorkspaces": true,
   "version": "0.16.0"
 }