Add React component for library use (#135)

* Add React component for library use

* Rename JS packages to @AquaScope scope

* Remove bug reporter for now

* Fix frontend path

README.md

@@ -194,7 +194,7 @@ Visualizing permission steps can be quite intrusive but oftentimes you may want
 
 ## Having trouble?
 
-If you want to use Aquascope but are having trouble finding the relevant information, please leave an issue or email us at <[email protected]> and <[email protected]>.
+If you want to use Aquascope but are having trouble finding the relevant information, please leave an issue or email us at <[email protected]> and <[email protected]>.
 
 ## Citation
 

crates/mdbook-aquascope/src/main.rs

@@ -11,7 +11,7 @@ use mdbook_preprocessor_utils::{
 mdbook_preprocessor_utils::asset_generator!("../js/");
 
 const FRONTEND_ASSETS: [Asset; 2] = [
-  make_asset!("aquascope-embed.iife.js"),
+  make_asset!("embed.iife.js"),
   make_asset!("style.css"),
 ];
 

crates/mdbook-aquascope/src/preprocessor.rs

@@ -186,6 +186,9 @@ impl AquascopePreprocessor {
     // TODO: make this configurable
     add_data("no-interact", "true")?;
 
+    // TODO: add a code path to enable this from config
+    // add_data("show-bug-reporter", true)?;
+
     write!(html, "></div>")?;
 
     Ok(html)

frontend/biome.json

@@ -1,8 +1,5 @@
 {
   "$schema": "https://biomejs.dev/schemas/1.8.2/schema.json",
-  "organizeImports": {
-    "enabled": true
-  },
   "javascript": {
     "formatter": {
       "arrowParentheses": "asNeeded",
@@ -11,11 +8,9 @@
     "jsxRuntime": "reactClassic"
   },
   "formatter": {
-    "enabled": true,
     "indentStyle": "space"
   },
   "linter": {
-    "enabled": true,
     "rules": {
       "recommended": true,
       "correctness": {

frontend/packages/aquascope-editor/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "aquascope-editor",
+  "name": "@aquascope/editor",
   "version": "0.1.0",
   "files": [
     "dist"
@@ -9,8 +9,11 @@
     ".": {
       "default": "./dist/lib.js"
     },
-    "./*": {
+    "./*.js": {
       "default": "./dist/*.js"
+    },
+    "./*.scss": {
+      "default": "./dist/*.scss"
     }
   },
   "type": "module",
@@ -26,14 +29,14 @@
     "@codemirror/state": "^6.1.2",
     "@codemirror/view": "^6.4.0",
     "leader-line-new": "^1.1.9",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "classnames": "^2.3.2"
   },
   "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",
+    "@vitejs/plugin-react": "^4.0.3", 
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

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

@@ -8,7 +8,7 @@ import type {
   AnalysisFacts,
   BoundariesAnnotations,
   PermissionsBoundary
-} from "../types";
+} from "../types.js";
 import {
   type PermLetter,
   flowChar,
@@ -22,7 +22,7 @@ import {
   showLoanRegion,
   showMoveRegion,
   writeChar
-} from "./misc";
+} from "./misc.js";
 
 // FIXME: the tooltips are not currently being used. The tooltips
 // provided by CM6 aren't expressive enough for what we want.

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

@@ -23,12 +23,12 @@ import type {
   MTrace,
   MUndefinedBehavior,
   MValue
-} from "../types";
+} from "../types.js";
 import {
   evenlySpaceAround,
   linecolToPosition,
   makeDecorationField
-} from "./misc";
+} from "./misc.js";
 
 const DEBUG: boolean = false;
 

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

@@ -9,15 +9,15 @@ import {
 import { Decoration, type DecorationSet, EditorView } from "@codemirror/view";
 import _ from "lodash";
 
-import type { CharPos } from "../bindings/CharPos";
+import type { CharPos } from "../bindings/CharPos.js";
 import type {
   AnalysisFacts,
   AnalysisOutput,
   CharRange,
   LoanKey,
   MoveKey,
   RefinementRegion
-} from "../types";
+} from "../types.js";
 
 // ---------
 // Constants

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

@@ -2,14 +2,14 @@ import type { Range } from "@codemirror/state";
 import type { Decoration, EditorView } from "@codemirror/view";
 import _ from "lodash";
 
-import type { AnalysisOutput, AquascopeAnnotations } from "../types";
-import { boundariesField, makeBoundaryDecorations } from "./boundaries";
+import type { AnalysisOutput, AquascopeAnnotations } from "../types.js";
+import { boundariesField, makeBoundaryDecorations } from "./boundaries.js";
 import {
   type ActionFacts,
   generateAnalysisDecorationFacts,
   loanFactsStateType
 } from "./misc";
-import { makeStepDecorations, stepField } from "./stepper";
+import { makeStepDecorations, stepField } from "./stepper.js";
 
 export interface PermissionsCfg {
   stepper?: any;

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

@@ -5,7 +5,7 @@ import _ from "lodash";
 import React, { useState } from "react";
 import ReactDOM from "react-dom/client";
 
-import type { CharPos } from "../bindings/CharPos";
+import type { CharPos } from "../bindings/CharPos.js";
 import type {
   AnalysisFacts,
   LoanKey,
@@ -15,7 +15,7 @@ import type {
   PermissionsStepTable,
   StepperAnnotations,
   ValueStep
-} from "../types";
+} from "../types.js";
 import {
   hideLoanRegion,
   hideMoveRegion,
@@ -27,7 +27,7 @@ import {
   showLoanRegion,
   showMoveRegion,
   writeChar
-} from "./misc";
+} from "./misc.js";
 
 interface PermInStep {
   step: ValueStep<boolean>;

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

@@ -2,28 +2,28 @@ import { rust } from "@codemirror/lang-rust";
 import { indentUnit } from "@codemirror/language";
 import { Compartment, EditorState, type Extension } from "@codemirror/state";
 import { EditorView, type ViewUpdate } from "@codemirror/view";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
 
-import { boundariesField } from "./editor-utils/boundaries";
+import { boundariesField } from "./editor-utils/boundaries.js";
 import {
   type InterpreterConfig,
   markerField,
   renderInterpreter
-} from "./editor-utils/interpreter";
+} from "./editor-utils/interpreter.js";
 import {
   type IconField,
   hiddenLines,
   hideLine,
   loanFactsField
-} from "./editor-utils/misc";
+} from "./editor-utils/misc.js";
 import {
   type PermissionsCfg,
   type PermissionsDecorations,
   makePermissionsDecorations,
   renderPermissions
-} from "./editor-utils/permissions";
-import { stepField } from "./editor-utils/stepper";
+} from "./editor-utils/permissions.js";
+import { stepField } from "./editor-utils/stepper.js";
 import "./styles.scss";
 import type {
   AnalysisFacts,
@@ -33,9 +33,9 @@ import type {
   CharRange,
   InterpAnnotations,
   MTrace
-} from "./types";
+} from "./types.js";
 
-export * as types from "./types";
+export * as types from "./types.js";
 
 const DEFAULT_SERVER_URL = new URL("http://127.0.0.1:8008");
 
@@ -124,11 +124,11 @@ export class Editor {
   public constructor(
     dom: HTMLDivElement,
     readonly setup: Extension,
+    code: string = defaultCodeExample,
     readonly reportStdErr: (err: BackendError) => void = err => {
       console.error("An error occurred: ");
       console.error(err);
     },
-    code: string = defaultCodeExample,
     readonly serverUrl: URL = DEFAULT_SERVER_URL,
     readonly noInteract: boolean = false,
     readonly shouldFailHtml: string = "This code does not compile!",
@@ -233,6 +233,10 @@ export class Editor {
     renderPermissions(this.view, this.permissionsDecos, cfg);
   }
 
+  public destroy() {
+    this.view.destroy();
+  }
+
   // Actions to communicate with the aquascope server
   async callBackendWithCode(
     endpoint: string,
@@ -281,7 +285,7 @@ export class Editor {
       annotations
     }: {
       response?: Result<any>;
-      config?: CommonConfig & object;
+      config?: CommonConfig & any;
       annotations?: AquascopeAnnotations;
     } = {}
   ) {
@@ -356,3 +360,34 @@ export class Editor {
     }
   }
 }
+
+export interface EditorComponentProps {
+  code: string;
+  setup?: Extension;
+  permissions?: any;
+  steps?: any;
+}
+
+export let EditorComponent = (props: EditorComponentProps) => {
+  let ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    let editor = new Editor(ref.current!, props.setup ?? [], props.code);
+    if (props.steps)
+      editor.renderOperation("interpreter", {
+        response: props.steps,
+        config: {
+          horizontal: "true"
+        }
+      });
+    if (props.permissions)
+      editor.renderOperation("permissions", {
+        response: props.permissions,
+        config: {
+          stepper: "true",
+          boundaries: "true"
+        }
+      });
+    return () => editor.destroy();
+  }, []);
+  return <div ref={ref} />;
+};

frontend/packages/aquascope-embed/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "aquascope-embed",
+  "name": "@aquascope/embed",
   "version": "0.1.0",
   "depot": {
     "platform": "browser"
@@ -14,7 +14,7 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^4.0.3",
-    "aquascope-editor": "workspace:*",
+    "@aquascope/editor": "workspace:*",
     "puppeteer": "^19.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

frontend/packages/aquascope-embed/src/main.tsx

@@ -1,5 +1,5 @@
+import { Editor, type Result, type types } from "@aquascope/editor";
 import { useFloating } from "@floating-ui/react-dom";
-import { Editor, type Result, type types } from "aquascope-editor";
 import React, { useContext, useLayoutEffect, useState } from "react";
 import ReactDOM from "react-dom/client";
 
@@ -179,6 +179,7 @@ window.initAquascopeBlocks = (root: HTMLElement) => {
     elem.classList.add(AQUASCOPE_NAME);
 
     let readOnly = elem.dataset.noInteract! === "true";
+    let showBugReporter = elem.dataset.showBugReporter! === "true";
 
     let computePermBtn: HTMLButtonElement | undefined;
     if (!readOnly) {
@@ -200,7 +201,7 @@ window.initAquascopeBlocks = (root: HTMLElement) => {
     let initialCode = maybeParseJson<string>(elem.dataset.code);
     if (!initialCode) throw new Error("Missing data-code attribute");
 
-    if (window.telemetry) {
+    if (window.telemetry && showBugReporter) {
       let extraInfo = document.createElement("div");
       elem.appendChild(extraInfo);
       ReactDOM.createRoot(extraInfo).render(
@@ -229,10 +230,10 @@ window.initAquascopeBlocks = (root: HTMLElement) => {
     let ed = new Editor(
       elem,
       setup,
+      initialCode,
       err => {
         console.error(err);
       },
-      initialCode,
       serverUrl,
       readOnly,
       shouldFailHtml,

frontend/packages/aquascope-embed/src/styles.scss

@@ -1,4 +1,4 @@
-@use "aquascope-editor/dist/styles.scss";
+@use "@aquascope/editor/dist/styles.scss";
 
 .light, .rust {
   --code-bg: #f6f7f6;

frontend/packages/aquascope-standalone/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "aquascope-standalone",
+  "name": "@aquascope/standalone",
   "version": "0.1.0",
   "depot": {
     "platform": "browser"
@@ -14,7 +14,7 @@
     "@codemirror/view": "^6.4.0",
     "@replit/codemirror-vim": "^6.0.3",
     "@vitejs/plugin-react": "^4.0.3",
-    "aquascope-editor": "workspace:*",
+    "@aquascope/editor": "workspace:*",
     "font-awesome": "^4.7.0",
     "jest-puppeteer": "^6.2.0",
     "normalize.css": "^8.0.1",

frontend/packages/aquascope-standalone/src/index.tsx

@@ -1,5 +1,5 @@
 // import { vim } from "@replit/codemirror-vim";
-import * as Ed from "aquascope-editor";
+import * as Ed from "@aquascope/editor";
 
 import { basicSetup } from "./setup";
 
@@ -67,6 +67,7 @@ window.addEventListener("load", () => {
     editor: new Ed.Editor(
       editorElement,
       basicSetup,
+      Ed.defaultCodeExample,
       (err: Ed.types.BackendError) => {
         if (err.type === "FileNotFound") {
           alert("A backend problem occurred!");
@@ -88,7 +89,6 @@ window.addEventListener("load", () => {
           console.error("an unknown error occurred:", err);
         }
       },
-      Ed.defaultCodeExample,
       new URL(SERVER_URL)
     )
   };