Merge pull request #517 from tone-row/dev

v1.34.0

.github/workflows/benchmark.yml

@@ -8,10 +8,10 @@ jobs:
  - uses: actions/checkout@v3
  - uses: actions/setup-node@v3
  with:
- node-version: 16
+ node-version: 18
  - uses: pnpm/[email protected]
  with:
- version: 7
+ version: 8
  - name: Install Deps
  run: pnpm install
  - name: Benchmark

.github/workflows/e2e.yml

@@ -36,10 +36,10 @@ jobs:
  - name: Setup Node
  uses: actions/setup-node@v3
  with:
- node-version: 16
+ node-version: 18
  - uses: pnpm/[email protected]
  with:
- version: 7
+ version: 8
  - name: Install Playwright
  run: |
  pnpm add -g [email protected]

.github/workflows/test.yml

@@ -8,12 +8,12 @@ jobs:
  - uses: actions/checkout@v3
  - uses: actions/setup-node@v3
  with:
- node-version: 16
+ node-version: 18
  - uses: pnpm/[email protected]
  name: Install pnpm
  id: pnpm-install
  with:
- version: 7
+ version: 8
  - name: Install Dependencies
  run: pnpm install
  - name: Test

.node-version

@@ -1 +1 @@
-v16.17.0
+v18.10.0

api/jest.config.js

@@ -1,5 +1,6 @@
+/** @type {import('jest').Config} */
 module.exports = {
  transform: {
  "^.+\\.tsx?$": ["@swc/jest"],
  },
-};
+};

app/package.json

@@ -1,14 +1,14 @@
 {
  "name": "app",
- "version": "1.33.5",
+ "version": "1.34.0",
  "main": "module/module.js",
  "license": "MIT",
  "scripts": {
  "start": "concurrently -n 'react,slang' 'react-scripts start' 'yarn theme:watch'",
  "dev": "react-scripts start",
  "build": "react-scripts build",
- "test": "react-scripts test --transformIgnorePatterns \"node_modules/.pnpm/(?!react-use-localstorage)/\"",
- "test:coverage": "react-scripts test --watchAll=false --transformIgnorePatterns \"node_modules/.pnpm/(?!react-use-localstorage)/\" --coverage",
+ "test": "react-scripts test",
+ "test:coverage": "react-scripts test --watchAll=false --coverage",
  "eject": "react-scripts eject",
  "theme": "slang src/slang",
  "theme:watch": "slang src/slang -w",
@@ -81,7 +81,7 @@
  "eslint": "^8.3.0",
  "file-saver": "^2.0.5",
  "framer-motion": "^4.1.17",
- "graph-selector": "^0.9.6",
+ "graph-selector": "^0.9.7",
  "gray-matter": "^4.0.2",
  "highlight.js": "^11.7.0",
  "immer": "^9.0.16",
@@ -91,6 +91,7 @@
  "lz-string": "^1.4.4",
  "make-plural": "^7.1.0",
  "marked": "^4.1.1",
+ "monaco-editor": "^0.34.0",
  "moniker": "^0.1.2",
  "notion-to-md": "^2.5.5",
  "openai": "^3.1.0",
@@ -107,7 +108,7 @@
  "react-ga": "^3.3.0",
  "react-gtm-module": "^2.0.11",
  "react-hook-form": "^7.0.7",
- "react-icons": "^4.3.1",
+ "react-icons": "^4.9.0",
  "react-query": "^3.26.0",
  "react-router-dom": "^5.2.0",
  "react-scripts": "5.0.1",
@@ -184,9 +185,7 @@
  "jest-canvas-mock": "^2.3.1",
  "jsdom": "^20.0.3",
  "minimist": "^1.2.5",
- "monaco-editor": "^0.34.0",
  "msw": "^0.36.8",
- "node-localstorage": "^2.2.1",
  "prettier": "^2.3.1",
  "source-map-explorer": "^2.5.2",
  "tailwindcss": "^3.2.6",
@@ -201,7 +200,8 @@
  "**/?(*.)+(spec|test).[jt]s?(x)"
  ],
  "transformIgnorePatterns": [
- "node_modules/(?!(react-use-localstorage)).*\\.js$"
+ "\"node_modules/.pnpm/(?!react-use-localstorage)/\"",
+ "\"node_modules/.pnpm/(?!(monaco-editor|monaco-editor-core)/)\""
  ]
  }
 }

app/scripts/autotranslations.mjs

@@ -4,6 +4,9 @@ import { Configuration, OpenAIApi } from "openai";
 import path from "path";
 dotenv.config("./env");
 
+// Between Calls To Avoid Rate Limiting
+const TIMEOUT = 5000;
+
 /**
  * AUTO TRANSLATIONS
  * =================
@@ -46,6 +49,8 @@ if (LOCALE) {
 let locales = fs
  .readdirSync("./src/locales/", { withFileTypes: true })
  .filter((dirent) => dirent.isDirectory())
+ // filter out "en"
+ .filter((dirent) => dirent.name !== "en")
  .map((dirent) => dirent.name);
 
 // IF IN DEBUG MODE WE'LL ONLY RUN ONE LOCALE, LOCALE FROM ENV OR DEFAULT TO DE
@@ -139,6 +144,10 @@ for (const locale of locales) {
  });
 
  translations = response.data.choices[0].text.split("\n");
+
+ retries--;
+
+ await new Promise((resolve) => setTimeout(resolve, TIMEOUT));
  }
 
  // add the translations to the final phrases

app/src/components/EditorError.tsx

@@ -1,38 +1,51 @@
 import { AnimatePresence, motion } from "framer-motion";
-import { BiErrorCircle } from "react-icons/bi";
+import { ReactNode } from "react";
+import { SiCodereview } from "react-icons/si";
 
-import { useParseError } from "../lib/useDoc";
-import { Box } from "../slang";
-import styles from "./EditorError.module.css";
+import { getParserError, ParserErrorCode } from "../lib/parserErrors";
+import { useParseErrorStore } from "../lib/useDoc";
 
+/**
+ * Displays an error over top of the text editor.
+ */
 export default function EditorError() {
- const parseError = useParseError((s) => s.error);
- const errorFromStyle = useParseError((s) => s.errorFromStyle);
- const show = parseError || errorFromStyle || "";
+ const parseError = useParseErrorStore((s) => s.error);
+ const errorFromStyle = useParseErrorStore((s) => s.errorFromStyle);
+ const parserErrorCode = useParseErrorStore((s) => s.parserErrorCode);
+ let message: ReactNode = parseError || errorFromStyle || "";
+ let description: ReactNode = "";
+ if (parserErrorCode) {
+ const parserError = getParserError(parserErrorCode as ParserErrorCode);
+ message = parserError.message;
+ description = parserError.resolution;
+ }
  return (
  <AnimatePresence>
- {show ? (
+ {message ? (
  <motion.div
- initial={{ opacity: 0 }}
- animate={{ opacity: 1 }}
+ initial={{ opacity: 0, y: -10 }}
+ animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0 }}
- transition={{ type: "spring", duration: 0.2 }}
+ transition={{ type: "spring", duration: 0.4 }}
  >
- <Box
- className={styles.EditorError}
- flow="column"
- columnGap={1}
- content="center start"
- items="center"
- p={2}
- rad={2}
- background="palette-orange-0"
- >
- <BiErrorCircle size={24} />
- <Box gap={1}>
- <span className="text-sm">{show}</span>
- </Box>
- </Box>
+ <div className="absolute bottom-2 left-2 right-2 z-10 bg-red-200/90 p-4 rounded-lg">
+ <div className="flex gap-4 items-start">
+ <SiCodereview
+ size={29}
+ className="text-red-700 min-w-[29px] mt-[-1px]"
+ />
+ <div className="grid gap-2 editor-error">
+ <h3 className="text-sm font-bold mt-[4px] text-red-700">
+ {message}
+ </h3>
+ {description ? (
+ <p className="text-xs text-red-900 opacity-80 leading-normal">
+ {description}
+ </p>
+ ) : null}
+ </div>
+ </div>
+ </div>
  </motion.div>
  ) : null}
  </AnimatePresence>

app/src/components/Graph.tsx

@@ -3,6 +3,7 @@ import coseBilkent from "cytoscape-cose-bilkent";
 import dagre from "cytoscape-dagre";
 import klay from "cytoscape-klay";
 import cytoscapeSvg from "cytoscape-svg";
+import { ParseError } from "graph-selector";
 import throttle from "lodash.throttle";
 import React, {
  memo,
@@ -17,6 +18,7 @@ import { useContextMenu } from "react-contexify";
 import { useDebouncedCallback } from "use-debounce";
 
 import { buildStylesForGraph } from "../lib/buildStylesForGraph";
+import { monacoMarkerErrorSeverity } from "../lib/constants";
 import { cytoscape } from "../lib/cytoscape";
 import { getGetSize, TGetSize } from "../lib/getGetSize";
 import { getLayout } from "../lib/getLayout";
@@ -32,9 +34,9 @@ import { getAnimationSettings } from "../lib/hooks";
 import { Parsers, universalParse, useParser } from "../lib/parsers";
 import { Theme } from "../lib/themes/constants";
 import { useContextMenuState } from "../lib/useContextMenuState";
-import { Doc, useDoc, useParseError } from "../lib/useDoc";
+import { Doc, useDoc, useParseErrorStore } from "../lib/useDoc";
+import { updateModelMarkers, useEditorStore } from "../lib/useEditorStore";
 import { useGraphStore } from "../lib/useGraphStore";
-import { useHoverLine } from "../lib/useHoverLine";
 import { Box } from "../slang";
 import { getNodePositionsFromCy } from "./getNodePositionsFromCy";
 import styles from "./Graph.module.css";
@@ -206,7 +208,7 @@ function useInitializeGraph({
  const handleMouseOut = () => {
  cyCurrent.$(".nodeHovered").removeClass("nodeHovered");
  cyCurrent.$(".edgeHovered").removeClass("edgeHovered");
- useHoverLine.setState({ line: undefined });
+ useEditorStore.setState({ hoverLineNumber: undefined });
  };
 
  cyCurrent.on("mouseover", "node", nodeHighlight);
@@ -270,16 +272,16 @@ function useInitializeGraph({
  // Hover Events that Need "this"
  function nodeHighlight(this: NodeSingular) {
  this.addClass("nodeHovered");
- useHoverLine.setState({ line: this.data().lineNumber });
+ useEditorStore.setState({ hoverLineNumber: this.data().lineNumber });
  }
  function edgeHighlight(this: EdgeSingular) {
  this.addClass("edgeHovered");
- useHoverLine.setState({ line: this.data().lineNumber });
+ useEditorStore.setState({ hoverLineNumber: this.data().lineNumber });
  }
  function unhighlight(this: NodeSingular | EdgeSingular) {
  this.removeClass("nodeHovered");
  this.removeClass("edgeHovered");
- useHoverLine.setState({ line: undefined });
+ useEditorStore.setState({ hoverLineNumber: undefined });
  }
  }, [cy, cyErrorCatcher]);
 }
@@ -344,22 +346,56 @@ function getGraphUpdater({
  // Reinitialize to avoid missing errors
  cyErrorCatcher.current.destroy();
  cyErrorCatcher.current = cytoscape();
- useParseError.setState({ error: "", errorFromStyle: "" });
+ // Reset error store
+ useParseErrorStore.setState({
+ error: "",
+ errorFromStyle: "",
+ parserErrorCode: "",
+ });
+
+ // Remove parse error markers
+ useEditorStore.setState({ markers: [] });
+ updateModelMarkers();
 
  // Update Graph Store
  useGraphStore.setState({ layout, elements });
  } catch (e) {
  cyErrorCatcher.current.destroy();
  cyErrorCatcher.current = cytoscape();
- if (isError(e)) {
- useParseError.setState({
+
+ // Check if it's a parse error and display it in the editor
+ if (isParseError(e)) {
+ useEditorStore.setState({
+ markers: [
+ {
+ startLineNumber: e.startLineNumber,
+ endLineNumber: e.endLineNumber,
+ startColumn: e.startColumn,
+ endColumn: e.endColumn,
+ message: e.message,
+ severity: monacoMarkerErrorSeverity,
+ },
+ ],
+ });
+ updateModelMarkers();
+
+ // translate the error and set it in the store
+ useParseErrorStore.setState({
+ parserErrorCode: e.code,
+ });
+ } else if (isError(e)) {
+ useParseErrorStore.setState({
  errorFromStyle: sanitizeMessage(e.message, elements),
  });
  }
  }
  }, 333);
 }
 
+function isParseError(e: unknown): e is ParseError {
+ return e instanceof Error && e.name === "ParseError";
+}
+
 function getStyleUpdater({
  cy,
  cyErrorCatcher,
@@ -386,12 +422,12 @@ function getStyleUpdater({
  // Reinitialize to avoid missing errors
  cyErrorCatcher.current.destroy();
  cyErrorCatcher.current = cytoscape();
- useParseError.setState({ errorFromStyle: "" });
+ useParseErrorStore.setState({ errorFromStyle: "" });
  } catch (e) {
  cyErrorCatcher.current.destroy();
  cyErrorCatcher.current = cytoscape();
  if (isError(e)) {
- useParseError.setState({
+ useParseErrorStore.setState({
  errorFromStyle: sanitizeStyleMessage(e.message),
  });
  }