zenith-language 0.2.8 → 0.3.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Zenith Build
+Copyright (c) 2026 Zenith Team
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,85 +1,45 @@
-# Zenith VS Code Extension
+# zenith-language ⚡
 
-Syntax highlighting and editor support for `.zen` files.
+VS Code extension providing world-class development support for the Zenith framework.
 
-## Features
-
-- **Syntax Highlighting** for `.zen` files
-- **HTML-first** structure recognition
-- **Embedded JavaScript** in `<script>` blocks with Zenith-specific keywords (`state`, `zenOnMount`, etc.)
-- **Embedded CSS** in `<style>` blocks
-- **Expression highlighting** for `{expression}` syntax in HTML
-- **Component recognition** for capitalized tags (e.g., `<DefaultLayout>`)
-- **Slot support** for `<slot />` elements
-- **Bracket matching** and auto-closing
-
-## Zenith-Specific Scopes
-
-| Syntax | Scope |
-|--------|-------|
-| `state count = 0` | `storage.type.state.zen` |
-| `zenOnMount(() => {})` | `support.function.lifecycle.zen` |
-| `<DefaultLayout>` | `entity.name.tag.component.zen` |
-| `<slot />` | `keyword.control.slot.zen` |
-| `{expression}` | `meta.embedded.expression.zen` |
-
-## Installation (Development)
+## Overview
 
-1. Copy this folder to your VS Code extensions directory:
-   - **macOS**: `~/.vscode/extensions/zenith-lang`
-   - **Windows**: `%USERPROFILE%\.vscode\extensions\zenith-lang`
-   - **Linux**: `~/.vscode/extensions/zenith-lang`
+`zenith-language` brings the Zenith development experience into VS Code. It provides syntax highlighting, intelligent code completion, and deep integration with the Zenith LSP to make building reactive apps a breeze.
 
-2. Restart VS Code
+## Features
 
-3. Open any `.zen` file
+- **Syntax Highlighting**: Expertly crafted TextMate grammar for `.zen` files, including embedded JavaScript, TypeScript, and CSS.
+- **IntelliSense**: Smart completions for Zenith components, hooks, and reactive state.
+- **Emmet Support**: Accelerated HTML development inside `.zen` templates.
+- **Project Scaffolding**: Integrated support for starting new projects.
+- **LSP Integration**: Leverages `@zenith/language-server` for powerful diagnostics and refactoring.
 
-## File Structure
+## Supported Extensions
 
-```
-zenith-vscode/
-├── package.json                    # Extension manifest
-├── language-configuration.json     # Brackets, comments, folding
-├── syntaxes/
-│   └── zenith.tmLanguage.json     # TextMate grammar
-└── README.md
-```
+- `.zen`
+- `.zenx`
+- `.zen.html`
 
-## Grammar Design Notes
+## Recommended Settings
 
-### HTML Base
-The grammar treats `.zen` files as HTML-first documents. Standard HTML tags are recognized and highlighted with `entity.name.tag.html.zen` scope.
+The extension automatically configures your editor for the best experience. For more details on customization, see the VS Code settings for Zenith.
 
-### Embedded Languages
-- `<script>` blocks use JavaScript/TypeScript highlighting with additional Zenith keyword recognition
-- `<style>` blocks use standard CSS highlighting
+## Development
 
-### Expression Syntax
-Single brace expressions `{...}` are recognized in HTML content and attributes. The content is highlighted as JavaScript. **Double braces `{{}}` are NOT supported** per Zenith syntax rules.
+```bash
+# Clone the repository
+git clone https://github.com/zenithbuild/zenith.git
 
-### Component Tags
-Capitalized tags like `<DefaultLayout>` are recognized as Zenith components and receive `entity.name.tag.component.zen` scope for distinct styling.
+# Navigate to language package
+cd zenith-language
 
-### Zenith Keywords
-The following Zenith-specific keywords are recognized in script blocks:
-- `state` - reactive state declaration
-- `zenOnMount` - lifecycle hook
-- `zenOnDestroy` - lifecycle hook  
-- `zenOnUpdate` - lifecycle hook
-- `zenEffect` - effect declaration
+# Install dependencies
+bun install
 
-## REDCMD Compatibility
-
-This grammar is authored following TextMate/REDCMD patterns:
-- Uses standard `begin`/`end` capture groups
-- Defines reusable patterns in `repository`
-- Uses hierarchical scope names
-- Compatible with VS Code's grammar engine
+# Build the server and compile the extension
+bun run build:all
+```
 
-## Future Work
+## License
 
-- [ ] IntelliSense / LSP support
-- [ ] Snippets for common patterns
-- [ ] Go-to-definition for components
-- [ ] Hover documentation
-# zenith-language
+MIT

package/package.json

@@ -2,15 +2,15 @@
     "name": "zenith-language",
     "displayName": "Zenith Language Support",
     "description": "Syntax highlighting, IntelliSense, and editor support for Zenith Framework (.zen files)",
-    "version": "0.2.8",
+    "version": "0.3.0",
     "publisher": "ZenithBuild",
     "engines": {
         "vscode": "^1.80.0"
     },
     "main": "./out/extension.js",
     "scripts": {
-        "build:server": "cd ../packages/zenith-language-server && bun run build",
-        "compile": "esbuild src/extension.ts --bundle --outfile=out/extension.js --external:vscode --format=cjs --platform=node && cp ../packages/zenith-language-server/dist/server.js out/server.js",
+        "build:server": "cd ../zenith-language-server && bun run build",
+        "compile": "bun x esbuild src/extension.ts --bundle --outfile=out/extension.js --external:vscode --format=cjs --platform=node && cp ../zenith-language-server/dist/server.js out/server.js",
         "watch": "bun run compile -- --watch",
         "build:marketplace": "bun run build:server && bun run compile && node scripts/build.js marketplace",
         "build:openvsx": "bun run build:server && bun run compile && node scripts/build.js openvsx",

package/syntaxes/zenith.tmLanguage.json

@@ -17,6 +17,9 @@
         {
             "include": "#style-tag"
         },
+        {
+            "include": "#router-component-tag"
+        },
         {
             "include": "#component-tag"
         },
@@ -99,6 +102,9 @@
                 {
                     "include": "#lifecycle-hooks"
                 },
+                {
+                    "include": "#zenith-imports"
+                },
                 {
                     "include": "source.ts"
                 }
@@ -176,9 +182,62 @@
             }
         },
         "lifecycle-hooks": {
-            "match": "\\b(zenOnMount|zenOnDestroy|zenOnUpdate|zenEffect|onMount|onDestroy|onUpdate)\\b",
+            "match": "\\b(zenOnMount|zenOnDestroy|zenOnUpdate|zenEffect|onMount|onDestroy|onUpdate|useRoute|useRouter)\\b",
             "name": "support.function.lifecycle.zenith"
         },
+        "zenith-imports": {
+            "match": "(['\"])(zenith(?:/[a-zA-Z-]+)?|zenith:[a-zA-Z-]+)\\1",
+            "captures": {
+                "0": {
+                    "name": "string.quoted.module.zenith"
+                },
+                "2": {
+                    "name": "support.module.zenith"
+                }
+            }
+        },
+        "router-component-tag": {
+            "patterns": [
+                {
+                    "begin": "(<)(ZenLink)(?=\\s|/?>)",
+                    "beginCaptures": {
+                        "1": {
+                            "name": "punctuation.definition.tag.begin.html.zenith"
+                        },
+                        "2": {
+                            "name": "entity.name.tag.component.router.zenith support.class.component.zenith"
+                        }
+                    },
+                    "end": "(/?>)",
+                    "endCaptures": {
+                        "1": {
+                            "name": "punctuation.definition.tag.end.html.zenith"
+                        }
+                    },
+                    "name": "meta.tag.component.router.start.zenith",
+                    "patterns": [
+                        {
+                            "include": "#tag-attributes"
+                        }
+                    ]
+                },
+                {
+                    "match": "(</)(\\s*)(ZenLink)(\\s*)(>)",
+                    "captures": {
+                        "1": {
+                            "name": "punctuation.definition.tag.begin.html.zenith"
+                        },
+                        "3": {
+                            "name": "entity.name.tag.component.router.zenith support.class.component.zenith"
+                        },
+                        "5": {
+                            "name": "punctuation.definition.tag.end.html.zenith"
+                        }
+                    },
+                    "name": "meta.tag.component.router.end.zenith"
+                }
+            ]
+        },
         "component-tag": {
             "patterns": [
                 {
@@ -281,13 +340,19 @@
         "tag-attributes": {
             "patterns": [
                 {
-                    "include": "#attribute-expression"
+                    "include": "#attribute-directive"
                 },
                 {
-                    "include": "#attribute-event-handler"
+                    "include": "#attribute-at-event"
                 },
                 {
-                    "include": "#attribute-bind"
+                    "include": "#attribute-reactive-bind"
+                },
+                {
+                    "include": "#attribute-expression"
+                },
+                {
+                    "include": "#attribute-event-handler"
                 },
                 {
                     "include": "#attribute-quoted"
@@ -297,16 +362,76 @@
                 }
             ]
         },
-        "attribute-expression": {
-            "begin": "([a-zA-Z_:][a-zA-Z0-9_:-]*)\\s*(=)\\s*(\\{)",
+        "attribute-directive": {
+            "begin": "(zen:(?:if|for|effect|show))\\s*(=)\\s*",
             "beginCaptures": {
                 "1": {
-                    "name": "entity.other.attribute-name.html.zenith"
+                    "name": "keyword.control.directive.zenith"
                 },
                 "2": {
                     "name": "punctuation.separator.key-value.html.zenith"
+                }
+            },
+            "end": "(?<=[\"'])|(?=\\s|/?>)",
+            "name": "meta.attribute.directive.zenith",
+            "patterns": [
+                {
+                    "begin": "\"",
+                    "beginCaptures": {
+                        "0": {
+                            "name": "punctuation.definition.string.begin.html.zenith"
+                        }
+                    },
+                    "end": "\"",
+                    "endCaptures": {
+                        "0": {
+                            "name": "punctuation.definition.string.end.html.zenith"
+                        }
+                    },
+                    "name": "string.quoted.double.html.zenith",
+                    "contentName": "source.ts.embedded.zenith",
+                    "patterns": [
+                        {
+                            "include": "source.ts"
+                        }
+                    ]
+                },
+                {
+                    "begin": "'",
+                    "beginCaptures": {
+                        "0": {
+                            "name": "punctuation.definition.string.begin.html.zenith"
+                        }
+                    },
+                    "end": "'",
+                    "endCaptures": {
+                        "0": {
+                            "name": "punctuation.definition.string.end.html.zenith"
+                        }
+                    },
+                    "name": "string.quoted.single.html.zenith",
+                    "contentName": "source.ts.embedded.zenith",
+                    "patterns": [
+                        {
+                            "include": "source.ts"
+                        }
+                    ]
+                }
+            ]
+        },
+        "attribute-at-event": {
+            "begin": "(@)([a-zA-Z][a-zA-Z0-9]*)\\s*(=)\\s*(\\{)",
+            "beginCaptures": {
+                "1": {
+                    "name": "punctuation.definition.event.zenith"
+                },
+                "2": {
+                    "name": "entity.other.attribute-name.event.zenith"
                 },
                 "3": {
+                    "name": "punctuation.separator.key-value.html.zenith"
+                },
+                "4": {
                     "name": "punctuation.section.embedded.begin.zenith"
                 }
             },
@@ -316,7 +441,7 @@
                     "name": "punctuation.section.embedded.end.zenith"
                 }
             },
-            "name": "meta.attribute.expression.zenith",
+            "name": "meta.attribute.event.zenith",
             "contentName": "source.ts.embedded.zenith",
             "patterns": [
                 {
@@ -324,11 +449,91 @@
                 }
             ]
         },
-        "attribute-event-handler": {
-            "begin": "(on[A-Z][a-zA-Z]*|onclick|onchange|onsubmit|oninput|onkeydown|onkeyup|onmouseenter|onmouseleave)\\s*(=)\\s*(\\{)",
+        "attribute-reactive-bind": {
+            "begin": "(:)([a-zA-Z_][a-zA-Z0-9_-]*)\\s*(=)\\s*",
             "beginCaptures": {
                 "1": {
-                    "name": "entity.other.attribute-name.event.html.zenith"
+                    "name": "punctuation.definition.reactive-bind.zenith"
+                },
+                "2": {
+                    "name": "entity.other.attribute-name.reactive.zenith"
+                },
+                "3": {
+                    "name": "punctuation.separator.key-value.html.zenith"
+                }
+            },
+            "end": "(?<=[\"'\\}])|(?=\\s|/?>)",
+            "name": "meta.attribute.reactive-bind.zenith",
+            "patterns": [
+                {
+                    "begin": "\\{",
+                    "beginCaptures": {
+                        "0": {
+                            "name": "punctuation.section.embedded.begin.zenith"
+                        }
+                    },
+                    "end": "\\}",
+                    "endCaptures": {
+                        "0": {
+                            "name": "punctuation.section.embedded.end.zenith"
+                        }
+                    },
+                    "contentName": "source.ts.embedded.zenith",
+                    "patterns": [
+                        {
+                            "include": "source.ts"
+                        }
+                    ]
+                },
+                {
+                    "begin": "\"",
+                    "beginCaptures": {
+                        "0": {
+                            "name": "punctuation.definition.string.begin.html.zenith"
+                        }
+                    },
+                    "end": "\"",
+                    "endCaptures": {
+                        "0": {
+                            "name": "punctuation.definition.string.end.html.zenith"
+                        }
+                    },
+                    "name": "string.quoted.double.html.zenith",
+                    "contentName": "source.ts.embedded.zenith",
+                    "patterns": [
+                        {
+                            "include": "source.ts"
+                        }
+                    ]
+                },
+                {
+                    "begin": "'",
+                    "beginCaptures": {
+                        "0": {
+                            "name": "punctuation.definition.string.begin.html.zenith"
+                        }
+                    },
+                    "end": "'",
+                    "endCaptures": {
+                        "0": {
+                            "name": "punctuation.definition.string.end.html.zenith"
+                        }
+                    },
+                    "name": "string.quoted.single.html.zenith",
+                    "contentName": "source.ts.embedded.zenith",
+                    "patterns": [
+                        {
+                            "include": "source.ts"
+                        }
+                    ]
+                }
+            ]
+        },
+        "attribute-expression": {
+            "begin": "([a-zA-Z_][a-zA-Z0-9_:-]*)\\s*(=)\\s*(\\{)",
+            "beginCaptures": {
+                "1": {
+                    "name": "entity.other.attribute-name.html.zenith"
                 },
                 "2": {
                     "name": "punctuation.separator.key-value.html.zenith"
@@ -343,7 +548,7 @@
                     "name": "punctuation.section.embedded.end.zenith"
                 }
             },
-            "name": "meta.attribute.event-handler.zenith",
+            "name": "meta.attribute.expression.zenith",
             "contentName": "source.ts.embedded.zenith",
             "patterns": [
                 {
@@ -351,30 +556,32 @@
                 }
             ]
         },
-        "attribute-bind": {
-            "begin": "(:)([a-zA-Z_][a-zA-Z0-9_-]*)\\s*(=)\\s*(\")",
+        "attribute-event-handler": {
+            "begin": "(on[A-Z][a-zA-Z]*|onclick|onchange|onsubmit|oninput|onkeydown|onkeyup|onmouseenter|onmouseleave)\\s*(=)\\s*(\\{)",
             "beginCaptures": {
                 "1": {
-                    "name": "punctuation.definition.attribute-shorthand.bind.zenith"
+                    "name": "entity.other.attribute-name.event.html.zenith"
                 },
                 "2": {
-                    "name": "entity.other.attribute-name.html.zenith"
-                },
-                "3": {
                     "name": "punctuation.separator.key-value.html.zenith"
                 },
-                "4": {
-                    "name": "punctuation.definition.string.begin.html.zenith"
+                "3": {
+                    "name": "punctuation.section.embedded.begin.zenith"
                 }
             },
-            "end": "(\")",
+            "end": "(\\})",
             "endCaptures": {
                 "1": {
-                    "name": "punctuation.definition.string.end.html.zenith"
+                    "name": "punctuation.section.embedded.end.zenith"
                 }
             },
-            "name": "meta.attribute.bind.zenith",
-            "contentName": "string.quoted.double.html.zenith"
+            "name": "meta.attribute.event-handler.zenith",
+            "contentName": "source.ts.embedded.zenith",
+            "patterns": [
+                {
+                    "include": "source.ts"
+                }
+            ]
         },
         "attribute-quoted": {
             "begin": "([a-zA-Z_:][a-zA-Z0-9_:-]*)\\s*(=)\\s*",

package/zenith-language/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto