xmlui 0.9.83 → 0.9.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmlui",
-  "version": "0.9.83",
+  "version": "0.9.86",
   "sideEffects": false,
   "scripts": {
     "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -43,7 +43,7 @@
     "@radix-ui/react-tabs": "1.1.0",
     "@radix-ui/react-tooltip": "^1.2.4",
     "@radix-ui/react-visually-hidden": "1.0.3",
-    "@remix-run/react": "2.9.1",
+    "@remix-run/react": "2.12.1",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
     "@tanstack/react-table": "8.17.3",
@@ -93,7 +93,7 @@
     "react-popper": "2.3.0",
     "react-resizable-panels": "2.0.19",
     "react-rnd": "^10.5.2",
-    "react-router-dom": "6.23.0",
+    "react-router-dom": "6.26.2",
     "react-select": "5.7.4",
     "react-sticky-el": "^2.1.1",
     "react-textarea-autosize": "8.5.3",
@@ -137,6 +137,9 @@
     "@types/yargs": "17.0.31",
     "@typescript-eslint/eslint-plugin": "8.15.0",
     "@typescript-eslint/parser": "8.15.0",
+    "@remix-run/dev": "2.12.1",
+    "@remix-run/serve": "2.12.1",
+    "@remix-run/node": "2.12.1",
     "babel-loader": "8.2.5",
     "clean-package": "2.2.0",
     "eslint": "^8.57.0",
@@ -164,7 +167,8 @@
   },
   "files": [
     "dist",
-    "src/styles"
+    "src/styles",
+    "src/syntax"
   ],
   "bin": {
     "xmlui": "dist/scripts/bin/bootstrap.js"
@@ -205,6 +209,14 @@
         "./vite-xmlui-plugin": {
           "import": "./dist/scripts/bin/vite-xmlui-plugin.js",
           "require": "./dist/scripts/bin/vite-xmlui-plugin.js"
+        },
+        "./syntax/monaco": {
+          "import": "./dist/lib/syntax-monaco.mjs",
+          "require": "./dist/lib/syntax-monaco.mjs"
+        },
+        "./syntax/textmate": {
+          "import": "./dist/lib/syntax-textmate.mjs",
+          "require": "./dist/lib/syntax-textmate.mjs"
         }
       }
     }
@@ -238,6 +250,14 @@
     "./vite-xmlui-plugin": {
       "import": "./dist/scripts/bin/vite-xmlui-plugin.js",
       "require": "./dist/scripts/bin/vite-xmlui-plugin.js"
+    },
+    "./syntax/monaco": {
+      "import": "./dist/lib/syntax-monaco.mjs",
+      "require": "./dist/lib/syntax-monaco.mjs"
+    },
+    "./syntax/textmate": {
+      "import": "./dist/lib/syntax-textmate.mjs",
+      "require": "./dist/lib/syntax-textmate.mjs"
     }
   },
   "browserslist": {

package/src/syntax/monaco/grammar.monacoLanguage.ts

@@ -0,0 +1,283 @@
+export const XmluiGrammar: any = {
+  id: "xmlui",
+  config: {
+    comments: {
+      blockComment: ["<!--", "-->"],
+    },
+    brackets: [["<", ">"]],
+    autoClosingPairs: [
+      { open: "<", close: ">" },
+      { open: "'", close: "'" },
+      { open: '"', close: '"' },
+      { open: "`", close: "`" },
+    ],
+    surroundingPairs: [
+      { open: "<", close: ">" },
+      { open: "'", close: "'" },
+      { open: '"', close: '"' },
+      { open: "`", close: "`" },
+    ],
+  },
+  language: {
+    defaultToken: "",
+    tokenPostfix: ".xmlui",
+    ignoreCase: false,
+    identifier: /[a-zA-Z$_][-\w.$]*/,
+    tokenizer: {
+      root: [
+        { include: "@commentStart" },
+        { include: "@helperTag" },
+        { include: "@componentTagStart" },
+        { include: "@escapeCharacter" },
+        { include: "@textWithBindingExpr" },
+        { include: "@entity" },
+        { include: "@cdataStart" },
+      ],
+      helperTag: [
+        { include: "@scriptTagStart" },
+        { include: "@eventTagStart" },
+        { include: "@apiTagStart" },
+        { include: "@methodTagStart" },
+        { include: "@propOrVarTagStart" },
+      ],
+      eventTagStart: [
+        [
+          /(<)((?:[a-zA-Z_][\w\.\-]*?:)?)(event)/,
+          ["delimiter.angle", "namespace", { token: "tag-event", next: "@eventTag" }],
+        ],
+      ],
+      eventTag: [
+        { include: "@commentStart" },
+        { include: "@valueAttributeScriptInsideStart" },
+        { include: "@attributeStart" },
+        [/\/>/, "delimiter.angle", "@pop"],
+        [
+          /(<\/)(event)(\s*>)/,
+          ["delimiter.angle", "tag-event", { token: "delimiter.angle", next: "@pop" }],
+        ],
+        [/>/, { token: "delimiter.angle", next: "@eventTagContent" }],
+      ],
+      eventTagContent: [
+        { include: "commentStart" },
+        { include: "componentTagStart" },
+        [
+          /[^<]/,
+          { token: "@rematch", next: "@eventTagScriptContent", nextEmbedded: "xmluiscript" },
+        ],
+        [/<\/event\s*>/, { token: "@rematch", next: "@pop" }],
+      ],
+      eventTagScriptContent: [
+        [/<\/event\s*>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
+        [/[^<]/, ""],
+      ],
+      methodTagStart: [
+        [
+          /(<)((?:[a-zA-Z_][\w\.\-]*?:)?)(method)/,
+          ["delimiter.angle", "namespace", { token: "tag-helper", next: "@methodTag" }],
+        ],
+      ],
+      methodTag: [
+        { include: "@commentStart" },
+        { include: "@valueAttributeScriptInsideStart" },
+        { include: "@attributeStart" },
+        [/\/>/, "delimiter.angle", "@pop"],
+        [
+          />/,
+          {
+            token: "delimiter.angle",
+            next: "@methodTagScriptContent",
+            nextEmbedded: "xmluiscript",
+          },
+        ],
+        [
+          /(<\/)(method)(\s*>)/,
+          ["delimiter.angle", "tag-helper", { token: "delimiter.angle", next: "@pop" }],
+        ],
+      ],
+      methodTagScriptContent: [
+        [/<\/method\s*>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
+        [/[^</]/, ""],
+      ],
+      apiTagStart: [
+        [
+          /(<)((?:[a-zA-Z_][\w\.\-]*?:)?)(api)/,
+          ["delimiter.angle", "namespace", { token: "tag-helper", next: "@apiTag" }],
+        ],
+      ],
+      apiTag: [
+        { include: "@commentStart" },
+        { include: "@valueAttributeScriptInsideStart" },
+        { include: "@attributeStart" },
+        [/\/>/, "delimiter.angle", "@pop"],
+        [
+          />/,
+          { token: "delimiter.angle", next: "@apiTagScriptContent", nextEmbedded: "xmluiscript" },
+        ],
+        [
+          /(<\/)(api)(\s*>)/,
+          ["delimiter.angle", "tag-helper", { token: "delimiter.angle", next: "@pop" }],
+        ],
+      ],
+      apiTagScriptContent: [
+        [/<\/api\s*>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
+        [/[^</]/, ""],
+      ],
+      valueAttributeScriptInsideStart: [
+        [
+          /(^|\s+)(value)(\s*=)(['\"`])/,
+          [
+            "",
+            "attribute",
+            "operators",
+            {
+              cases: {
+                "'": { token: "string", next: "@singleQuotedScript", nextEmbedded: "xmluiscript" },
+                '"': { token: "string", next: "@doubleQuotedScript", nextEmbedded: "xmluiscript" },
+                "`": {
+                  token: "string",
+                  next: "@backtickQuotedScript",
+                  nextEmbedded: "xmluiscript",
+                },
+              },
+            },
+          ],
+        ],
+      ],
+      scriptTagStart: [
+        [
+          /(<)(script\s*)(>)/,
+          [
+            "delimiter.angle",
+            "tag-script",
+            { token: "delimiter.angle", nextEmbedded: "xmluiscript", next: "@scriptTag" },
+          ],
+        ],
+        [/(<\/)(script\s*)(>)/, ["delimiter.angle", "tag-script", "delimiter.angle"]],
+      ],
+      scriptTag: [
+        [/<\/script>/, { token: "@rematch", next: "@pop", nextEmbedded: "@pop" }],
+        [/[^<]+/, ""],
+      ],
+      propOrVarTagStart: [
+        [
+          /(<\/?)((?:[a-zA-Z_][\w\.\-]*?:)?)((?:property)|(?:prop)|(?:var))/,
+          ["delimiter.angle", "namespace", { token: "tag-helper", next: "@propOrVarTag" }],
+        ],
+      ],
+      propOrVarTag: [
+        [/\/?>/, { token: "delimiter.angle", next: "@pop" }],
+        { include: "@commentStart" },
+        { include: "@attributeStart" },
+      ],
+      componentTagStart: [
+        [
+          /(\s*<\/?)((?:[a-zA-Z_][\w\.\-]*?:)?)([A-Z][\w\.\-]*)/,
+          ["delimiter.angle", "namespace", { token: "tag-component", next: "@componentTag" }],
+        ],
+      ],
+      componentTag: [
+        [/\/?>/, { token: "delimiter.angle", next: "@pop" }],
+        { include: "@commentStart" },
+        { include: "@eventHandler" },
+        { include: "@attributeStart" },
+      ],
+      eventHandler: [
+        [
+          /(^|\s+)(on[A-Z][-\w.]*)(\s*=)(['\"`])/,
+          [
+            "",
+            "attribute",
+            "operators",
+            {
+              cases: {
+                "'": { token: "string", next: "@singleQuotedScript", nextEmbedded: "xmluiscript" },
+                '"': { token: "string", next: "@doubleQuotedScript", nextEmbedded: "xmluiscript" },
+                "`": {
+                  token: "string",
+                  next: "@backtickQuotedScript",
+                  nextEmbedded: "xmluiscript",
+                },
+              },
+            },
+          ],
+        ],
+      ],
+      doubleQuotedScript: [
+        [/"/, { token: "string", next: "@pop", nextEmbedded: "@pop" }],
+        [/[^"]/, ""],
+      ],
+      singleQuotedScript: [
+        [/'/, { token: "string", next: "@pop", nextEmbedded: "@pop" }],
+        [/[^']/, ""],
+      ],
+      backtickQuotedScript: [
+        [/`/, { token: "string", next: "@pop", nextEmbedded: "@pop" }],
+        [/[^`]/, ""],
+      ],
+      attributeStart: [
+        [
+          /(^|\s+)(@identifier(?::@identifier)?)(\s*=\s*)(['\"`])/,
+          [
+            "",
+            "attribute",
+            "operators",
+            {
+              cases: {
+                "'": { token: "string", next: "@singleQuotedString" },
+                '"': { token: "string", next: "@doubleQuotedString" },
+                "`": { token: "string", next: "@backtickQuotedString" },
+              },
+            },
+          ],
+        ],
+        [
+          /(^|\s+)(@identifier(?::@identifier)?)(\s*=\s*)(@identifier)/,
+          ["", "attribute", "operators", "string"],
+        ],
+        [/(^|\s+)(@identifier(?::@identifier)?)/, ["", "attribute"]],
+      ],
+      singleQuotedString: [
+        [/'/, "string", "@pop"],
+        { include: "@textWithBindingExpr" },
+        [/[^']/, "string"],
+      ],
+      doubleQuotedString: [
+        [/"/, "string", "@pop"],
+        { include: "@textWithBindingExpr" },
+        [/[^"]/, "string"],
+      ],
+      backtickQuotedString: [
+        [/`/, "string", "@pop"],
+        { include: "@textWithBindingExpr" },
+        [/[^`]/, "string"],
+      ],
+      textWithBindingExpr: [
+        { include: "@escapeCharacter" },
+        { include: "@entity" },
+        [/{/, { token: "delimiter.curly", next: "@bindingExpr", nextEmbedded: "xmluiscript" }],
+      ],
+      bindingExpr: [
+        [/}/, { token: "delimiter.curly", next: "@pop", nextEmbedded: "@pop" }],
+        [/[^}]+/, ""],
+      ],
+      cdataStart: [
+        [
+          /(<!\[)(CDATA)(\[)/,
+          ["delimiter.angle", "tag-cdata", { token: "delimiter.angle", next: "@cdata" }],
+        ],
+      ],
+      cdata: [
+        [/]]>/, "delimiter.angle", "@pop"],
+        [/./, "string"],
+      ],
+      commentStart: [[/<!--/, "comment", "@comment"]],
+      comment: [
+        [/[^<\-]+/, "comment.content"],
+        [/-->/, { token: "comment", next: "@pop" }],
+        [/[<\-]/, "comment.content"],
+      ],
+      escapeCharacter: [[/\\S/, "string.escape"]],
+      entity: [[/&(amp|lt|gt|quot|apos|nbsp);/, "string.escape"]],
+    },
+  },
+};

package/src/syntax/monaco/index.ts

@@ -0,0 +1,4 @@
+export { XmluiGrammar as xmluiGrammar } from "./grammar.monacoLanguage";
+export { XmluiScripGrammar as xmluiScriptGrammar } from "./xmluiscript.monacoLanguage";
+export { default as xmluiThemeDark } from "./xmlui-dark";
+export { default as xmluiThemeLight } from "./xmlui-light";

package/src/syntax/monaco/xmlui-dark.ts

@@ -0,0 +1,24 @@
+const darkTheme = {
+  base: "vs-dark",
+  inherit: true,
+  rules: [
+    { token: "comment", foreground: "#9296a9" },
+    { token: "comment.content", foreground: "#9296a9", fontStyle: "italic" },
+    { token: "tag-component", foreground: "#FE6BAD" },
+    { token: "tag-event", foreground: "#80A6F8" },
+    { token: "tag-helper", foreground: "#80A6F8" },
+    { token: "attribute", foreground: "#cbd5e1" },
+    { token: "operators", foreground: "#cbd5e1" },
+    { token: "delimiter.angle", foreground: "#97A7C5" },
+    { token: "delimiter.curly", foreground: "#FFD502" },
+    { token: "string", foreground: "#7dd3fc" },
+    { token: "tag-cdata", foreground: "#5CC1F9" },
+    { token: "tag-script", foreground: "#78DBDB" },
+    { token: "string.escape", foreground: "#BAF80A" },
+  ],
+  colors: {
+    "editor.background": "#17232b",
+  },
+};
+
+export default darkTheme;

package/src/syntax/monaco/xmlui-light.ts

@@ -0,0 +1,24 @@
+const lightTheme = {
+  base: "vs",
+  inherit: true,
+  rules: [
+    { token: "comment", foreground: "#606060" },
+    { token: "comment.content", foreground: "#606060", fontStyle: "italic" },
+    { token: "tag-component", foreground: "#B33175" },
+    { token: "tag-event", foreground: "#005AE1" },
+    { token: "tag-helper", foreground: "#005AE1" },
+    { token: "attribute", foreground: "#2D2D2D" },
+    { token: "operators", foreground: "#2D2D2D" },
+    { token: "delimiter.angle", foreground: "#66748E" },
+    { token: "delimiter.curly",  foreground: "#F07100", fontStyle: "bold" },
+    { token: "string", foreground:  "#0074a9"},
+    { token: "tag-cdata", foreground: "#079CF1" },
+    { token: "tag-script", foreground: "#02A1A1" },
+    { token: "string.escape", foreground: "#708C00" },
+  ],
+  colors: {
+    "editor.foreground": "#0D458C",
+  },
+};
+
+export default lightTheme;