Merge pull request #54 from tone-row/fix/comment-highlighting

Fix comment highlighting

.github/workflows/test.yml

@@ -6,22 +6,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: Install Node.js
-        uses: actions/setup-node@v3
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
         with:
-          node-version: 16.17.0
-      - uses: pnpm/[email protected]
-        with:
-          version: 8.4.0
-          run_install: true
+          bun-version: latest
+      - name: Install Dependencies
+        run: bun install --frozen-lockfile
       - name: Lint
-        run: pnpm -F graph-selector lint:ci
+        run: bun --filter graph-selector lint:ci
       - name: Run Tests
-        run: pnpm test
-      # - name: Upload Coverage
-      #   uses: codecov/codecov-action@v2
-      #   with:
-      #     root_dir: ./graph-selector # optional (default = .)
-      #     fail_ci_if_error: false # optional (default = false)
-      #     verbose: true # optional (default = false)
-      #     token: ${{ secrets.CODECOV_TOKEN }} # optional
+        run: bun --filter graph-selector test

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-pnpm test && node_modules/.bin/lint-staged
+bun test && node_modules/.bin/lint-staged

.node-version

@@ -1 +1 @@
-v18.10.0
+v20.11.1

examples/.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "typescript.tsdk": "../node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
+  "typescript.tsdk": "../node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
 }

examples/app/playground/page.tsx

@@ -1,4 +1,3 @@
-import { Editor } from "@/components/Editor";
 import { PlaygroundState } from "@/components/PlaygroundState";
 
 export default function Page() {

examples/components/Editor.tsx

@@ -17,7 +17,7 @@ export function Editor({
     <div className="h-64">
       <E
         className="editor"
-        theme={highlight.defaultTheme}
+        theme={highlight.defaultThemeDark}
         beforeMount={highlight.registerHighlighter}
         defaultLanguage={highlight.languageId}
         options={{
@@ -38,6 +38,9 @@ export function Editor({
             highlightActiveIndentation: false,
             highlightActiveBracketPair: false,
           },
+          // @ts-ignore
+          "bracketPairColorization.enabled": false,
+          matchBrackets: "always",
           minimap: {
             enabled: false,
           },

examples/components/PlaygroundState.tsx

@@ -4,8 +4,18 @@ import { useMemo, useState } from "react";
 import { parse } from "graph-selector";
 import { Editor } from "./Editor";
 
+const defaultCode = `Hello World
+ this: goes to this .color_red[n=15]
+ (goes to this)
+  fun {
+    wow
+  } /*
+tesing a multiline comment
+*/
+does it work // not really`;
+
 export function PlaygroundState() {
-  const [value, setValue] = useState("Hello World");
+  const [value, setValue] = useState(defaultCode);
   const graph = useMemo(() => {
     try {
       return parse(value);

graph-selector/package.json

@@ -1,23 +1,27 @@
 {
   "name": "graph-selector",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Parse indented text (flowchart.fun syntax) into a graph",
   "source": "src/graph-selector.ts",
-  "main": "dist/graph-selector.js",
-  "umd:main": "dist/graph-selector.umd.js",
-  "module": "dist/graph-selector.mjs",
+  "main": "./dist/graph-selector.cjs",
+  "module": "./dist/graph-selector.mjs",
+  "types": "./dist/graph-selector.d.cts",
   "exports": {
-    "types": "./dist/graph-selector.d.ts",
-    "require": "./dist/graph-selector.js",
-    "default": "./dist/graph-selector.modern.mjs"
+    "require": {
+      "types": "./dist/graph-selector.d.cts",
+      "default": "./dist/graph-selector.cjs"
+    },
+    "import": {
+      "types": "./dist/graph-selector.d.mts",
+      "default": "./dist/graph-selector.mjs"
+    }
   },
-  "types": "dist/graph-selector.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rm -rf dist && microbundle",
-    "dev": "microbundle watch",
+    "build": "pkgroll",
+    "dev": "pkgroll --watch",
     "test": "vitest",
     "test:ci": "vitest run",
     "test:coverage": "vitest --coverage",
@@ -31,23 +35,23 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@types/strip-comments": "^2.0.2",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-no-lookahead-lookbehind-regexp": "^0.3.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "microbundle": "^0.15.1",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2",
     "vitest": "^0.34.5"
   },
   "dependencies": {
+    "@types/strip-comments": "^2.0.2",
     "@tone-row/strip-comments": "^2.0.6",
     "@types/cytoscape": "^3.19.11",
     "html-entities": "^2.4.0",
     "monaco-editor": "^0.43.0",
+    "pkgroll": "^2.4.1",
     "strip-comments": "^2.0.1"
   },
   "browserslist": [

graph-selector/src/highlight.ts

@@ -3,21 +3,14 @@ import { parse } from "./parse";
 export const languageId = "graphselector";
 export const defaultTheme = "graphselector-theme";
 export const defaultThemeDark = "graphselector-theme-dark";
-enum Tokens {
-  edgeFeatures = "edgeFeatures",
-  nodeOrPointer = "nodeOrPointer",
-  pointer = "pointer",
-}
-export const colors: { [key in Tokens]: { light: string; dark: string } } = {
-  nodeOrPointer: { light: "#202020", dark: "#d4d4d4" },
-  edgeFeatures: { light: "#5c6fff", dark: "#5c6fff" },
-  pointer: { light: "#00c722", dark: "#00c722" },
-};
 
-export const languageTokens = {
-  edgeFeatures: "edgeFeatures",
-  nodeOrPointer: "nodeOrPointer",
-  pointer: "pointer",
+export const colors: Record<string, { light: string; dark: string }> = {
+  string: { light: "#251d1d", dark: "#fffcff" },
+  attribute: { light: "#8252eb", dark: "#9e81ef" },
+  variable: { light: "#00c722", dark: "#00c722" },
+  comment: { light: "#808080", dark: "#808080" },
+  type: { light: "#4750f3", dark: "#7f96ff" },
+  "delimiter.curly": { light: "#251d1d", dark: "#fffcff" },
 };
 
 export function registerHighlighter(monaco: typeof Monaco) {
@@ -49,28 +42,27 @@ export function registerHighlighter(monaco: typeof Monaco) {
     defaultToken: "invalid",
     tokenizer: {
       root: [
-        [/^\s+[^\n]*$/, "@rematch", "edge"],
-        [/^[^\n]*$/, "@rematch", "noEdge"],
-      ],
-      edge: [
-        [/^.*[^\\]: .*\S+.*/, "@rematch", "edgeFeatures"],
-        [/.*/, "@rematch", Tokens.nodeOrPointer], // should be invalid
-      ],
-      noEdge: [[/.*/, "@rematch", Tokens.nodeOrPointer]],
-      edgeFeatures: [
-        [/^.*[^\\]: /, Tokens.edgeFeatures],
-        [/.*\S+.*$/, "@rematch", Tokens.nodeOrPointer],
-      ],
-      nodeOrPointer: [
-        // whitespace
-        [/\s+/, Tokens.nodeOrPointer],
-        [/\(/, Tokens.pointer, "@pointer"],
-        [/.*$/, Tokens.nodeOrPointer, "@popall"],
+        // \/\/ single-line comment...
+        [/\/\/.*/, "comment"],
+        [/\/\*/, "comment", "@comment"],
+        // \w+:
+        [/\s+(\w|\s)*\w:/, "type"],
+        // (.*)
+        [/\(.*\)/, "variable"],
+        // .color_blue
+        [/\.\w+/, "attribute"],
+        // [x] or [y=12] or [z="hello"]
+        [/\[\w+=\w+\]|\[\w+\]|\["[^"]*"|'[^']*']/, "attribute"],
+        // a '{' or '}'
+        [/\{|\}/, "delimiter.curly"],
+        // every other word is string
+        [/\b\w+\b/, "string"],
       ],
-      pointer: [
-        [/\)$/, Tokens.pointer, "@popall"],
-        [/\)/, Tokens.pointer, "@pop"],
-        [/[^\(\)]+/, Tokens.pointer],
+      comment: [
+        [/[^\/*]+/, "comment"],
+        [/\/\*/, "comment", "@push"], // nested comment
+        ["\\*/", "comment", "@pop"],
+        [/[\/*]/, "comment"],
       ],
     },
   });
@@ -115,20 +107,24 @@ export function registerHighlighter(monaco: typeof Monaco) {
   monaco.editor.defineTheme(defaultTheme, {
     base: "vs",
     inherit: false,
-    colors: {},
-    rules: Object.entries(languageTokens).map(([token, value]) => ({
-      token: value,
-      foreground: colors[token as Tokens].light,
+    // colors: {},
+    rules: Object.entries(colors).map(([token, value]) => ({
+      token,
+      foreground: value.light,
     })),
+    // Define bracket colors
+    colors: {},
   });
 
   monaco.editor.defineTheme(defaultThemeDark, {
     base: "vs-dark",
     inherit: false,
-    colors: {},
-    rules: Object.entries(languageTokens).map(([token, value]) => ({
-      token: value,
-      foreground: colors[token as Tokens].dark,
+    // colors: {},
+    rules: Object.entries(colors).map(([token, value]) => ({
+      token,
+      foreground: value.dark,
     })),
+    // Define bracket colors
+    colors: {},
   });
 }

graph-selector/src/parse.ts

@@ -32,7 +32,7 @@ export function parse(text: string): Graph {
   let lines = strip(text, { preserveNewlines: true }).split(/\n/g);
 
   // unescape backslashes in newlines
-  lines = lines.map((line) => line.replace(/\\n/g, "\n"));
+  lines = lines.map((line: string) => line.replace(/\\n/g, "\n"));
 
   // start line number count
   let lineNumber = 0;

package.json

@@ -5,26 +5,29 @@
   "main": "index.js",
   "private": true,
   "scripts": {
-    "build": "turbo run build",
-    "dev": "turbo run dev",
-    "test": "turbo run test:ci",
-    "test:coverage": "pnpm --parallel test:coverage",
-    "test:watch": "pnpm --parallel test:watch",
-    "lint": "pnpm -F graph-selector lint",
+    "build": "bun --filter graph-selector build; bun --filter examples build",
+    "dev": "bun --filter '*' dev",
+    "test": "bun --filter '*' test",
+    "test:watch": "bun --filter '*' test:watch",
+    "lint": "bun --filter graph-selector lint",
     "prepare": "husky install",
-    "browsers": "pnpm up -r caniuse-lite --workspace graph-selector"
+    "browsers": "bun --filter graph-selector up -r caniuse-lite"
   },
+  "workspaces": [
+    "graph-selector",
+    "examples"
+  ],
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "husky": "^8.0.0",
-    "lint-staged": "^13.0.3",
-    "turbo": "^1.9.3"
+    "lint-staged": "^13.0.3"
   },
+  "packageManager": "[email protected]",
   "lint-staged": {
     "graph-selector/**/*.{js,ts}": [
-      "pnpm -F graph-selector lint:staged"
+      "bun --filter graph-selector lint:staged"
     ]
   }
 }