update lezer syntax for tests

typescript/baml-schema-wasm-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gloo-ai/baml-schema-wasm-web",
-  "version": "0.1.0",
+  "version": "0.1.4",
   "description": "The WASM package for baml-fmt",
   "main": "./dist/baml_schema_build.js",
   "scripts": {

typescript/codemirror-lang-baml/README.md

@@ -0,0 +1,77 @@
+## test this in lezer-playground.vercel.app
+
+Add this to the end of the grammar:
+@detectDelim
+@external propSource jsonHighlighting from "./highlight"
+
+The highlighting stuff (udpate this with the new highlighter file)
+
+```
+import { styleTags, tags as t } from "@lezer/highlight";
+
+export const jsonHighlighting = styleTags({
+ // String: t.string,
+	"ClassDecl": t.keyword,
+	"ClassDecl/IdentifierDecl": t.name,
+	"TestDecl/IdentifierDecl": t.name,
+	"ClassField/IdentifierDecl": t.propertyName,
+	"SimpleTypeExpr/IdentifierDecl": t.name,
+	PromptExpr: t.string,
+	"FieldAttribute/...": t.annotation,
+	"FieldAttribute/LiteralDecl": t.string,
+	"EnumDecl/IdentifierDecl": t.name,
+	"EnumDecl": t.keyword,
+	"BlockAttribute/...": t.annotation,
+	"BlockAttribute/LiteralDecl": t.string,
+	"EnumValueDecl/IdentifierDecl": t.propertyName,
+	"MultilineComment": t.comment,
+	"FunctionDecl": t.keyword,
+	"IdentifierDecl": t.name,
+
+	//IdentifierDecl: t.variable,
+  Number: t.number,
+  "True False": t.bool,
+  PropertyName: t.propertyName,
+  Null: t.null,
+  ",": t.separator,
+  "[ ]": t.squareBracket,
+  "{ }": t.brace,
+});
+
+// A very dim/dull syntax highlighting so you have something to look at, but also to trigger you to write your own ;)
+// Also shows that you can use `export let extension = [...]`, to add extensions to the "demo text" editor.
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+const syntax_colors = syntaxHighlighting(
+  HighlightStyle.define(
+    [
+			      { tag: t.brace, color: "#a8a8a8" },
+			      { tag: t.annotation, color: "#a8a8a8" },
+
+      { tag: t.name, color: "#a8a8a8" },
+      { tag: t.propertyName, color: "#966a6a" },
+      { tag: t.comment, color: "#4b4949" },
+      { tag: t.atom, color: "#a25496" },
+
+      { tag: t.literal, color: "#7b87b8" },
+      { tag: t.unit, color: "#7b87b8" },
+      { tag: t.null, color: "#7b87b8" },
+
+      { tag: t.keyword, color: "#585858" },
+      { tag: t.punctuation, color: "#585858" },
+      { tag: t.derefOperator, color: "#585858" },
+      { tag: t.special(t.brace), fontWeight: 700 },
+
+      { tag: t.operator, color: "white" },
+      { tag: t.self, color: "white" },
+      { tag: t.function(t.punctuation), color: "white" },
+      { tag: t.special(t.logicOperator), color: "white", fontWeight: "bold" },
+      { tag: t.moduleKeyword, color: "white", fontWeight: "bold" },
+      { tag: t.controlKeyword, color: "white", fontWeight: "bold" },
+      { tag: t.controlOperator, color: "white", fontWeight: "bold" },
+    ],
+    { all: { color: "#585858" } }
+  )
+);
+
+export let extensions = [syntax_colors];
+```

typescript/codemirror-lang-baml/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@baml/codemirror-lang",
-  "version": "0.1.0",
+  "name": "@boundaryml/baml-lezer",
+  "version": "0.1.3",
   "description": "BAML language support for CodeMirror",
   "scripts": {
     "test": "mocha test/test.js",

typescript/codemirror-lang-baml/src/index.ts

@@ -67,7 +67,7 @@ export const BAMLLanguage = LRLanguage.define({
 
         'FieldAttribute/@': t.attributeName,
         'FieldAttribute/IdentifierDecl': t.attributeName,
-        'BlockAttribute/@@': t.attributeName,
+        BlockAttribute: t.attributeName,
         'BlockAttribute/IdentifierDecl': t.attributeName,
 
         'SimpleTypeExpr/IdentifierDecl': t.typeName,

typescript/codemirror-lang-baml/src/syntax.grammar

@@ -51,7 +51,7 @@ ClientDecl {
 }
 
 TestDecl {
-  "test" IdentifierDecl "{" TupleValue* "}" 
+  "test" IdentifierDecl "{" (BlockAttribute | TupleValue)* "}" 
 }
 
 LiteralDecl { NumericLiteral | QuotedString | UnquotedString }

typescript/fiddle-frontend/app/[project_id]/_components/CodeMirrorEditor.tsx

@@ -2,7 +2,7 @@
 import { EditorFile } from '@/app/actions'
 import { BAML_DIR } from '@/lib/constants'
 import type { BAMLProject } from '@/lib/exampleProjects'
-import { BAML, theme } from '@baml/codemirror-lang'
+import { BAML, theme } from '@boundaryml/baml-lezer'
 import type { ParserDatabase } from '@baml/common'
 import {
   availableFunctionsAtom,
@@ -238,7 +238,7 @@ export const CodeMirrorEditor = ({ project }: { project: BAMLProject }) => {
         />
         <div className='absolute bottom-3 pl-8  inset-x-0 right-[10px] h-[20px] p-2'>
           {numErrors.errors > 0 && (
-            <div className='w-full p-1 px-5 text-xs text-white bg-red-500 rounded-md'>
+            <div className='p-1 px-5 w-full text-xs text-white bg-red-500 rounded-md'>
               {numErrors.errors} {numErrors.errors === 1 ? 'error' : 'errors'}
             </div>
           )}

typescript/fiddle-frontend/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@baml/codemirror-lang": "workspace:*",
+    "@boundaryml/baml-lezer": "workspace:*",
     "@baml/common": "workspace:*",
     "@baml/playground-common": "workspace:*",
     "@codemirror/autocomplete": "^6.15.0",

typescript/playground-common/package.json

@@ -60,7 +60,7 @@
     "vite-plugin-wasm": "^3.3.0"
   },
   "dependencies": {
-    "@baml/codemirror-lang": "workspace:*",
+    "@boundaryml/baml-lezer": "workspace:*",
     "@baml/common": "workspace:^",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-python": "^6.1.6",

typescript/playground-common/src/shared/CodeMirrorViewer.tsx

@@ -1,13 +1,13 @@
 'use client'
 import React from 'react'
-import { BAML, theme } from '@baml/codemirror-lang'
+import { BAML, theme } from '@boundaryml/baml-lezer'
 import { python } from '@codemirror/lang-python'
 import { javascript } from '@codemirror/lang-javascript'
 
 import CodeMirror, { EditorView } from '@uiw/react-codemirror'
 
 export const CodeMirrorViewer = ({ fileContent, lang }: { fileContent: string; lang: string }) => {
-  let extensions = [EditorView.lineWrapping]
+  const extensions = [EditorView.lineWrapping]
 
   if (lang === 'python') {
     extensions.push(python())