Migrate from Graco to Depot (#96)

* Add initial support for moved values in the interpreter

* Reduce opacity of moved values

* Swap from graco to depot

* Remove http.server from CI

* Revert version bump

* Fix CI

.github/workflows/ci.yml

@@ -24,12 +24,7 @@ jobs:
           args: test --features=no-docker
       - name: Build Aquascope server
         run: cargo build -p aquascope_serve --features=no-docker
-      - name: Build standalone
-        run: cd frontend && graco build
       - name: Frontend tests
         run: |
           cargo run -p aquascope_serve --features=no-docker &
-          cd frontend/packages/aquascope-standalone/dist
-          python3 -m http.server 8000 &
-          cd ../../../
-          graco test
+          cd frontend && depot test

.github/workflows/pre-release.yml

@@ -77,11 +77,9 @@ jobs:
       - uses: actions/checkout@v3
       - name: Quick Setup
         uses: ./.github/workflows/quick-setup
-      - name: Build frontend and docs
+      - name: Build docs
         run: |
           cargo doc --lib
-          cd frontend
-          graco build
           mv ../target/doc packages/aquascope-standalone/dist/doc
       - uses: JamesIves/[email protected]
         with:

.github/workflows/quick-setup/action.yml

@@ -14,7 +14,9 @@ runs:
     - name: Gen bindings
       run: cargo make init-bindings
       shell: bash
-
+    - name: Install Depot
+      run: curl https://raw.githubusercontent.com/cognitive-engineering-lab/depot/main/scripts/install.sh | sh
+      shell: bash
     - name: Prepare frontend
-      run: npm install -g graco && cd frontend && graco prepare
+      run: cd frontend && depot build
       shell: bash

.github/workflows/setup/action.yml

@@ -22,8 +22,12 @@ runs:
         echo "$(pwd)/bin" >> ${GITHUB_PATH}
       shell: bash
 
+    - name: Install Depot
+      run: curl https://raw.githubusercontent.com/cognitive-engineering-lab/depot/main/scripts/install.sh | sh
+      shell: bash
+
     - name: Prepare frontend
-      run: npm install -g graco && cd frontend && graco prepare
+      run: cd frontend && depot build
       shell: bash
 
     - name: Install aquascope

Makefile.toml

@@ -28,7 +28,7 @@ cp crates/**/bindings/* frontend/packages/aquascope-editor/src/bindings"""
 [tasks.install-mdbook]
 dependencies = ["init-bindings"]
 script = """
-cd frontend && graco prepare && cd ..
+cd frontend && depot build && cd ..
 cargo miri setup
 cargo install --path crates/mdbook-aquascope        
 cargo install --path crates/aquascope_front

README.md

@@ -32,9 +32,9 @@ If you want to install from source, you will first need Cargo and [npm](https://
 ```sh
 git clone https://github.com/cognitive-engineering-lab/aquascope.git
 cd aquascope
-npm install -g graco
+curl https://raw.githubusercontent.com/cognitive-engineering-lab/depot/main/scripts/install.sh | sh
 cargo make init-bindings
-cd frontend && graco prepare
+cd frontend && depot build
 cargo install --path crates/aquascope_front
 cargo install --path crates/mdbook-aquascope
 ```

crates/mdbook-aquascope/src/main.rs

@@ -1,4 +1,3 @@
-#![feature(iter_intersperse)]
 #![allow(clippy::comparison_to_empty)]
 
 use std::path::Path;
@@ -9,10 +8,14 @@ use mdbook_preprocessor_utils::{
   mdbook::preprocess::PreprocessorContext, Asset, SimplePreprocessor,
 };
 
-mdbook_preprocessor_utils::asset_generator!("../dist/");
+mdbook_preprocessor_utils::asset_generator!(
+  "../../../frontend/packages/aquascope-embed/dist/"
+);
 
-const FRONTEND_ASSETS: [Asset; 2] =
-  [make_asset!("lib.js"), make_asset!("lib.css")];
+const FRONTEND_ASSETS: [Asset; 2] = [
+  make_asset!("aquascope-embed.iife.js"),
+  make_asset!("style.css"),
+];
 
 struct AquascopePreprocessorWrapper(AquascopePreprocessor);
 

frontend/.eslintrc.cjs

@@ -0,0 +1,40 @@
+module.exports = {
+  "env": {
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 13,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ],
+  "ignorePatterns": [
+    "*.d.ts"
+  ],
+  "rules": {
+    "no-empty-pattern": "off",
+    "no-undef": "off",
+    "no-unused-vars": "off",
+    "no-cond-assign": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "no-constant-condition": [
+      "error",
+      {
+        "checkLoops": false
+      }
+    ],
+    "prettier/prettier": "error"
+  }
+}

frontend/.gitignore

@@ -1,31 +1,3 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-/static/index.js
-
-# production
-/build
-/entry
-/dist
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Managed by Graco
-pnpm-workspace.yaml
-.eslintrc.cjs
-.prettierrc.cjs
+node_modules
+dist
+docs

frontend/.prettierrc.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  tabWidth: 2,
+  arrowParens: "avoid",
+  importOrder: ["<THIRD_PARTY_MODULES>", "^[./]"],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  parser: "typescript",
+  plugins: [require("@trivago/prettier-plugin-sort-imports")],
+};

frontend/package.json

@@ -1 +1,16 @@
-{}
+{
+  "private": true,
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@types/node": "^20.4.2",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.45.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.8",
+    "typedoc": "^0.24.8",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.4",
+    "vitest": "^0.33.0"
+  }
+}

frontend/packages/aquascope-editor/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  "extends": "../../.eslintrc.cjs",
+  "env": {
+    "browser": true
+  },
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/prop-types": "off",
+    "react/no-unescaped-entities": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

frontend/packages/aquascope-editor/.gitignore

@@ -1,4 +1 @@
-src/bindings
-
-# Managed by Graco
-tsconfig.json
+src/bindings

frontend/packages/aquascope-editor/package.json

@@ -1,9 +1,25 @@
 {
   "name": "aquascope-editor",
   "version": "0.1.0",
-  "private": true,
-  "type": "module",
+  "files": [
+    "dist"
+  ],
   "main": "dist/lib.js",
+  "exports": {
+    ".": {
+      "default": "./dist/lib.js"
+    },
+    "./*": {
+      "default": "./dist/*.js"
+    }
+  },
+  "type": "module",
+  "depot": {
+    "platform": "browser"
+  },
+  "typedoc": {
+    "entryPoint": "./src/lib.ts"
+  },
   "dependencies": {
     "@codemirror/lang-rust": "^6.0.1",
     "@codemirror/language": "^6.3.0",
@@ -12,16 +28,17 @@
     "leader-line-new": "^1.1.9",
     "lodash": "^4.17.21"
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
   "devDependencies": {
     "@types/lodash": "^4.14.191",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.3",
     "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
-}
+}

frontend/packages/aquascope-editor/src/editor-utils/boundaries.tsx

@@ -179,7 +179,7 @@ let PermStack = ({
   let triggerAnimation = () => {
     setAnimating(true);
     if (timer !== 0) clearTimeout(timer);
-    setTimer(setTimeout(() => setAnimating(false), 500));
+    setTimer(window.setTimeout(() => setAnimating(false), 500));
   };
 
   return (

frontend/packages/aquascope-editor/src/lib.tsx

@@ -31,9 +31,9 @@ import {
   AnalysisOutput,
   AquascopeAnnotations,
   BackendError,
+  CharRange,
   InterpAnnotations,
   MTrace,
-  CharRange,
 } from "./types";
 
 export * as types from "./types";
@@ -329,7 +329,7 @@ export class Editor {
         this.renderInterpreter(response.Ok, config as any, annotations?.interp);
       } else {
         this.reportStdErr(response!.Err);
-      }      
+      }
     } else if (operation == "permissions") {
       // The permissions analysis results are sent as an array of
       // body analyses. Each body could have analyzed successfully,

frontend/packages/aquascope-editor/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [
+    "src"
+  ],
+  "compilerOptions": {
+    "outDir": "dist"
+  }
+}

frontend/packages/aquascope-editor/vitest.config.ts

@@ -0,0 +1,17 @@
+/// <reference types="vitest" />
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig(({mode}) => ({
+  define: {
+    "process.env.NODE_ENV": JSON.stringify(mode),
+  },
+  plugins: [react()],
+  test: {
+    environment: "jsdom",
+    setupFiles: "tests/setup.ts",
+    deps: {
+      inline: [/^(?!.*vitest).*$/],
+    },
+  },
+}));

frontend/packages/aquascope-embed/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  "extends": "../../.eslintrc.cjs",
+  "env": {
+    "browser": true
+  },
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/prop-types": "off",
+    "react/no-unescaped-entities": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}