fix: allow multiple grmr with same dir name

.changeset/tiny-mails-live.md

@@ -0,0 +1,5 @@
+---
+"treeground": patch
+---
+
+fix: allow multiple grmr with same dir name

package.json

@@ -44,8 +44,10 @@
  "@solidjs/router": "^0.14.3",
  "@solidjs/start": "^1.0.6",
  "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+ "@types/md5": "^2.3.5",
  "autoprefixer": "^10.4.20",
  "chokidar": "^3.6.0",
+ "md5": "^2.3.0",
  "monaco-editor-core": "^0.51.0",
  "postcss": "^8.4.45",
  "prettier": "^3.3.3",

src/components/Editor.tsx

@@ -3,7 +3,7 @@ import * as monaco from "monaco-editor-core";
 import { BundledLanguage, createHighlighter } from "shiki";
 import { Accessor, Component, Setter, createEffect, untrack } from "solid-js";
 
-import { getBaseName } from "~/utils";
+import { getGrmrUniqueName } from "~/utils";
 
 interface Props {
  editor: Accessor<monaco.editor.IStandaloneCodeEditor | null>;
@@ -36,18 +36,21 @@ const Editor: Component<Props> = (props) => {
  monaco.languages.register({ id: selectedHighlighter });
  shikiToMonaco(highlighter, monaco);
 
- let grammarName = getBaseName(selectedGrammar);
+ let grmrUniqueName = getGrmrUniqueName(selectedGrammar);
 
  const editor = monaco.editor.create(ref, {
- value: localStorage.getItem(`treeground.${grammarName}`) || "",
+ value: localStorage.getItem(`treeground.${grmrUniqueName}`) || "",
  language: selectedHighlighter,
  theme: "dark-plus",
  automaticLayout: true,
  occurrencesHighlight: "off",
  });
  editor.onDidChangeModelContent(() => {
  untrack(() => props.parse(editor.getValue()));
- localStorage.setItem(`treeground.${grammarName}`, editor.getValue());
+ localStorage.setItem(
+ `treeground.${grmrUniqueName}`,
+ editor.getValue(),
+ );
  });
  editor.onDidChangeCursorPosition((e) => {
  let selection = editor.getSelection();

src/components/TreeGround.tsx

@@ -17,7 +17,7 @@ import Nav from "~/components/Nav";
 import Tools from "~/components/Tools";
 import Tree from "~/components/Tree";
 
-import { getBaseName, sendMsgToServer } from "~/utils";
+import { getGrmrUniqueName, sendMsgToServer } from "~/utils";
 
 type Modal = "Add" | "Tools" | null;
 
@@ -53,7 +53,7 @@ function App() {
  grammars().find((grammar) => grammar.folder === selectedGrammar())
  ?.highlighter || "text",
  );
- const [parsers, setParsers] = createSignal<{ [key: string]: Parser }>({});
+ const [parsers, setParsers] = createSignal<{ [grammar: string]: Parser }>({});
 
  onMount(async () => {
  const socket = new WebSocket(`ws://${location.host}/tg`);
@@ -71,7 +71,7 @@ function App() {
  loadParser(message.grammar).then(() => {
  let selectedGrmr = selectedGrammar();
  if (selectedGrmr) {
- if (getBaseName(selectedGrmr) === message.grammar) {
+ if (selectedGrmr === message.grammar) {
  parse(editor()?.getValue() || "");
  }
  }
@@ -80,24 +80,25 @@ function App() {
  });
  const selectedGrmr = selectedGrammar();
  if (selectedGrmr) {
- loadParser(getBaseName(selectedGrmr));
+ loadParser(selectedGrmr);
  }
  });
 
  const loadParser = async (grammar: string) => {
  const parser = new Parser();
- parser.setLanguage(await Parser.Language.load(`/${grammar}.wasm`));
+ parser.setLanguage(
+ await Parser.Language.load(`/${getGrmrUniqueName(grammar)}.wasm`),
+ );
  setParsers((prev) => ({ ...prev, [grammar]: parser }));
  };
 
  const parse = async (content: string) => {
  const selectedGrmr = selectedGrammar();
  if (selectedGrmr) {
- const grammar = getBaseName(selectedGrmr);
- let parser = parsers()[getBaseName(grammar)];
+ let parser = parsers()[selectedGrmr];
  if (!parser) {
- await loadParser(getBaseName(grammar));
- parser = parsers()[getBaseName(grammar)];
+ await loadParser(selectedGrmr);
+ parser = parsers()[selectedGrmr];
  }
  setTree(parser.parse(content));
  }

src/middleware.ts

@@ -9,7 +9,9 @@ export default createMiddleware({
  onRequest: [
  (event) => {
  let url = new URL(event.request.url);
- if (url.pathname.match(/^(\/)tree-sitter(-[a-zA-Z]+)?(\.wasm)$/)) {
+ if (
+ url.pathname.match(/^(\/)tree-sitter(-[a-zA-Z]+.[a-z0-9]{6})?(\.wasm)$/)
+ ) {
  let fileName = url.pathname.split("/").pop();
  if (fileName) {
  let location = path.join(wasmDir, fileName);

src/utils.ts

@@ -1,5 +1,6 @@
 import fs from "fs";
 import https from "https";
+import md5 from "md5";
 
 export const sendMsgToServer = (ws: WebSocket, message: ClientMessage) => {
  return ws.send(JSON.stringify(message));
@@ -40,6 +41,10 @@ export const getBaseName = (path: string) => {
  return parts[parts.length - 1];
 };
 
+export const getGrmrUniqueName = (grammar: string) => {
+ return `${getBaseName(grammar)}.${md5(grammar).slice(0, 6)}`;
+};
+
 export const aTryCatch = async <T>(
  fn: () => Promise<T>,
 ): Promise<[T | null, unknown | null]> => {

src/websocket.ts

@@ -8,7 +8,12 @@ import { partyHandler } from "vinxi/party";
 import yoctoSpinner from "yocto-spinner";
 import zlib from "zlib";
 
-import { aTryCatch, createExec, downloadFile } from "./utils";
+import {
+ aTryCatch,
+ createExec,
+ downloadFile,
+ getGrmrUniqueName,
+} from "./utils";
 
 let grammars: string[] = [];
 
@@ -47,7 +52,7 @@ export default partyHandler({
  .then((output) => {
  const message: ServerMessage = {
  type: "load",
- grammar: path.basename(folder),
+ grammar: folder,
  };
  party.broadcast(JSON.stringify(message));
  })
@@ -309,7 +314,7 @@ async function buildWasm(folder: string) {
  if (!fs.existsSync(outFolder)) {
  fs.mkdirSync(outFolder);
  }
- let output = path.join(outFolder, `${path.basename(folder)}.wasm`);
+ let output = path.join(outFolder, `${getGrmrUniqueName(folder)}.wasm`);
  const localDir = path.join(os.homedir(), ".local");
  const emsdk = path.join(localDir, "emsdk");
  var commands = [`cd ${folder}`, "tree-sitter generate"];