Custom syntax highlighting & clickable keywords (#14)

Co-authored-by: Nico <[email protected]>

Author: FileEX

web/.gitignore

@@ -19,3 +19,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+# tmLanguage file
+src/grammars/

web/ec.config.mjs

@@ -0,0 +1,17 @@
+import fs from 'fs';
+
+export default {
+  themes: [
+    JSON.parse(fs.readFileSync('./src/themes/mtasa_lua-theme_dark.json', 'utf-8')),
+    JSON.parse(fs.readFileSync('./src/themes/mtasa_lua-theme_light.json', 'utf-8')),
+  ],
+  shiki: {
+    langs: [
+      {
+        id: 'lua',
+        scopeName: 'source.lua.mta',
+        ...JSON.parse(fs.readFileSync('./src/grammars/lua-mta.tmLanguage.json', 'utf-8')),
+      },
+    ],
+  },
+};

web/mta_highlighting/generate-lua-tmlanguage.js

@@ -0,0 +1,63 @@
+import fs from 'fs';
+import path from 'path';
+import yaml from 'js-yaml';
+import { glob } from 'glob';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const functionsDir = path.resolve(__dirname, '../../functions');
+const basePath = path.resolve(__dirname, './lua-base.tmLanguage.json');
+const outputPath = path.resolve(__dirname, '../src/grammars/lua-mta.tmLanguage.json');
+
+const mtaKeywords = ['string','bool','boolean','number','int','float','element','player','vehicle','ped','object','building'];
+
+function extractFunctionsWithScope(yamlContent) {
+  if (yamlContent.shared?.name) {
+    return [{ name: yamlContent.shared.name, scope: 'support.function.mta-shared' }];
+  } else if (yamlContent.client?.name) {
+    return [{ name: yamlContent.client.name, scope: 'support.function.mta-client' }];
+  } else if (yamlContent.server?.name) {
+    return [{ name: yamlContent.server.name, scope: 'support.function.mta-server' }];
+  }
+  return [];
+}
+
+async function generateTmLanguage() {
+  const files = await glob('**/*.yaml', { cwd: functionsDir, absolute: true });
+
+  const functionsMap = Object.fromEntries(
+    ['shared', 'server', 'client'].map(scope => [`support.function.mta-${scope}`, new Set()])
+  );
+
+  files.forEach(file => {
+    const yamlContent = yaml.load(fs.readFileSync(file, 'utf-8'));
+    console.log('Processing file:', file);
+
+    const items = Array.isArray(yamlContent) ? yamlContent : [yamlContent];
+    items.flatMap(extractFunctionsWithScope).forEach(({ name, scope }) => functionsMap[scope].add(name));
+  });
+
+  const patterns = Object.entries(functionsMap)
+    .filter(([, namesSet]) => namesSet.size > 0)
+    .map(([scope, namesSet]) => ({
+      match: `\\b(${Array.from(namesSet).join('|')})\\b`,
+      name: scope,
+    }));
+
+  if (mtaKeywords.length > 0) {
+    patterns.push({
+      match: `\\b(${mtaKeywords.join('|')})\\b`,
+      name: 'keyword.mta',
+    });
+  }
+
+  const baseGrammar = JSON.parse(fs.readFileSync(basePath, 'utf-8'));
+  baseGrammar.patterns = [...patterns, ...(baseGrammar.patterns || [])];
+
+  fs.writeFileSync(outputPath, JSON.stringify(baseGrammar, null, 2));
+  console.log(`Done!`);
+}
+
+generateTmLanguage();

web/mta_highlighting/generate-tmlanguage.cmd

@@ -0,0 +1,3 @@
+@echo off
+node generate-lua-tmlanguage.js
+pause