vscode-constela 0.1.3

package/.vscodeignore

@@ -0,0 +1,21 @@
+# Source files (bundled into dist/)
+src/
+scripts/
+*.ts
+tsconfig.json
+
+# Development files
+node_modules/
+.gitignore
+*.map
+
+# Test files
+**/*.test.ts
+**/__tests__/
+
+# Editor/IDE
+.vscode/
+.idea/
+
+# Build artifacts not needed
+*.tsbuildinfo

package/CHANGELOG.md

@@ -0,0 +1,61 @@
+# Changelog
+
+All notable changes to the Constela extension will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.3] - 2025-01-24
+
+### Fixed
+
+- Corrected homepage URL to https://constela.dev/
+- Corrected repository URLs in package metadata
+
+## [0.1.1] - 2025-01-24
+
+### Added
+
+- README documentation for Marketplace
+- CHANGELOG for version history
+
+## [0.1.0] - 2025-01-24
+
+### Added
+
+- **Syntax Highlighting** - TextMate grammar for Constela DSL keywords
+  - Expression types (`lit`, `state`, `var`, `bin`, `not`, `cond`, `get`, `concat`, etc.)
+  - Action steps (`set`, `update`, `fetch`, `navigate`, `delay`, `interval`, etc.)
+  - View nodes (`element`, `text`, `if`, `each`, `component`, `slot`, etc.)
+  - Top-level sections (`state`, `actions`, `view`, `components`, `route`, etc.)
+
+- **Language Server** - Full LSP implementation
+  - Real-time validation using Constela compiler
+  - JSON parse error detection
+  - Semantic error reporting with suggestions
+
+- **Auto-completion**
+  - Expression type completions
+  - Action step completions
+  - View node completions
+  - State field name completions
+  - Action name completions
+  - Component name completions
+
+- **Hover Documentation**
+  - Expression type signatures and descriptions
+  - Action step usage documentation
+  - View node structure information
+
+- **Go to Definition**
+  - Navigate to state field definitions
+  - Navigate to action definitions
+  - Navigate to component definitions
+
+- **JSON Schema Validation**
+  - Basic schema validation for `.constela.json` files
+
+### Technical
+
+- Bundled language server with all dependencies (no external npm packages required)
+- Self-contained `.vsix` package (~160 KB)

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Constela
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,118 @@
+# Constela for Visual Studio Code
+
+Language support for [Constela](https://constela.dev) - a constrained UI DSL that compiles to minimal runtime JavaScript.
+
+## Features
+
+### Syntax Highlighting
+
+Full syntax highlighting for `.constela.json` files with semantic coloring for:
+
+- Expression types (`lit`, `state`, `var`, `bin`, `cond`, etc.)
+- Action steps (`set`, `fetch`, `navigate`, `delay`, etc.)
+- View nodes (`element`, `text`, `if`, `each`, `component`, etc.)
+- State definitions, actions, components, and more
+
+### IntelliSense
+
+Smart auto-completion for:
+
+- **Expression types** - Complete list of available expressions
+- **Action steps** - All action types with descriptions
+- **View nodes** - Element, text, conditional, loop nodes
+- **State references** - Your defined state fields
+- **Action references** - Your defined actions
+- **Component references** - Your defined components
+
+### Real-time Validation
+
+Errors are displayed as you type, powered by the Constela compiler:
+
+- JSON syntax errors
+- Missing required fields
+- Invalid references (undefined state, actions, components)
+- Type mismatches
+
+### Hover Information
+
+Hover over keywords to see documentation:
+
+- Expression signatures and descriptions
+- Action step usage examples
+- View node structure
+
+### Go to Definition
+
+Navigate to definitions with `Ctrl+Click` (or `Cmd+Click` on macOS):
+
+- Jump to state field definitions
+- Jump to action definitions
+- Jump to component definitions
+
+## Requirements
+
+- Visual Studio Code 1.85.0 or higher
+
+## Extension Settings
+
+This extension contributes the following settings:
+
+- `constela.trace.server`: Traces communication between VS Code and the language server (`off`, `messages`, `verbose`)
+- `constela.validation.enable`: Enable/disable validation of Constela files
+
+## File Association
+
+The extension automatically activates for files matching:
+
+- `*.constela.json`
+
+## Quick Start
+
+1. Create a new file with `.constela.json` extension
+2. Start with the basic structure:
+
+```json
+{
+  "version": "1.0",
+  "state": {
+    "count": { "type": "number", "initial": 0 }
+  },
+  "actions": [
+    {
+      "name": "increment",
+      "steps": [
+        { "do": "update", "name": "count", "with": "increment" }
+      ]
+    }
+  ],
+  "view": {
+    "node": "element",
+    "tag": "button",
+    "props": {
+      "onClick": { "action": "increment" }
+    },
+    "children": [
+      {
+        "node": "text",
+        "content": { "expr": "state", "name": "count" }
+      }
+    ]
+  }
+}
+```
+
+3. Enjoy syntax highlighting, auto-completion, and validation!
+
+## Learn More
+
+- [Constela Website](https://constela.dev/)
+- [GitHub Repository](https://github.com/yuuichieguchi/constela)
+- [Examples](https://github.com/yuuichieguchi/constela/tree/main/examples)
+
+## Issues
+
+Found a bug or have a feature request? Please open an issue on [GitHub](https://github.com/yuuichieguchi/constela/issues).
+
+## License
+
+MIT

package/icons/constela-dark.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect x="4" y="4" width="24" height="24" rx="4" fill="#1a1a1a" stroke="#333" stroke-width="1"/>
+  <text x="16" y="21" text-anchor="middle" font-family="monospace" font-size="14" font-weight="bold" fill="#4fc3f7">C</text>
+</svg>

package/icons/constela-light.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect x="4" y="4" width="24" height="24" rx="4" fill="#f0f0f0" stroke="#ccc" stroke-width="1"/>
+  <text x="16" y="21" text-anchor="middle" font-family="monospace" font-size="14" font-weight="bold" fill="#0288d1">C</text>
+</svg>

package/language-configuration.json

@@ -0,0 +1,27 @@
+{
+  "comments": {},
+  "brackets": [
+    ["{", "}"],
+    ["[", "]"]
+  ],
+  "autoClosingPairs": [
+    { "open": "{", "close": "}" },
+    { "open": "[", "close": "]" },
+    { "open": "\"", "close": "\"" }
+  ],
+  "surroundingPairs": [
+    { "open": "{", "close": "}" },
+    { "open": "[", "close": "]" },
+    { "open": "\"", "close": "\"" }
+  ],
+  "folding": {
+    "markers": {
+      "start": "^\\s*\\{",
+      "end": "^\\s*\\}"
+    }
+  },
+  "indentationRules": {
+    "increaseIndentPattern": "^.*\\{[^}]*$",
+    "decreaseIndentPattern": "^\\s*\\}"
+  }
+}

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "vscode-constela",
+  "displayName": "Constela",
+  "description": "Language support for Constela DSL - syntax highlighting, auto-completion, and error checking",
+  "version": "0.1.3",
+  "publisher": "constela",
+  "icon": "icons/constela-icon.png",
+  "engines": {
+    "vscode": "^1.85.0"
+  },
+  "categories": [
+    "Programming Languages",
+    "Linters"
+  ],
+  "keywords": [
+    "constela",
+    "dsl",
+    "ui",
+    "json"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yuuichieguchi/constela"
+  },
+  "homepage": "https://constela.dev/",
+  "bugs": {
+    "url": "https://github.com/yuuichieguchi/constela/issues"
+  },
+  "main": "./dist/extension.js",
+  "activationEvents": [
+    "onLanguage:constela",
+    "workspaceContains:**/*.constela.json"
+  ],
+  "contributes": {
+    "languages": [
+      {
+        "id": "constela",
+        "aliases": [
+          "Constela",
+          "constela"
+        ],
+        "extensions": [
+          ".constela.json"
+        ],
+        "configuration": "./language-configuration.json",
+        "icon": {
+          "light": "./icons/constela-light.svg",
+          "dark": "./icons/constela-dark.svg"
+        }
+      }
+    ],
+    "grammars": [
+      {
+        "language": "constela",
+        "scopeName": "source.constela",
+        "path": "./syntaxes/constela.tmLanguage.json"
+      }
+    ],
+    "configuration": {
+      "type": "object",
+      "title": "Constela",
+      "properties": {
+        "constela.trace.server": {
+          "type": "string",
+          "enum": [
+            "off",
+            "messages",
+            "verbose"
+          ],
+          "default": "off",
+          "description": "Traces the communication between VS Code and the Constela language server."
+        },
+        "constela.validation.enable": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable/disable validation of Constela files."
+        }
+      }
+    },
+    "jsonValidation": [
+      {
+        "fileMatch": "*.constela.json",
+        "url": "./schemas/program.schema.json"
+      }
+    ]
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@types/vscode": "^1.85.0",
+    "@vscode/vsce": "^2.22.0",
+    "esbuild": "^0.24.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vscode-languageclient": "^9.0.1",
+    "@constela/language-server": "0.1.1"
+  },
+  "license": "MIT",
+  "scripts": {
+    "vscode:prepublish": "pnpm run build",
+    "build": "node scripts/build.mjs",
+    "watch": "tsup src/extension.ts --format cjs --external vscode --watch",
+    "package": "vsce package --no-dependencies",
+    "type-check": "tsc --noEmit"
+  }
+}

package/schemas/program.schema.json

@@ -0,0 +1,161 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://constela.dev/schemas/program.schema.json",
+  "title": "Constela Program",
+  "description": "Schema for Constela DSL programs",
+  "type": "object",
+  "required": ["version", "view"],
+  "properties": {
+    "version": {
+      "type": "string",
+      "const": "1.0",
+      "description": "Constela version"
+    },
+    "state": {
+      "type": "object",
+      "description": "State fields",
+      "additionalProperties": {
+        "$ref": "#/definitions/stateField"
+      }
+    },
+    "actions": {
+      "type": "array",
+      "description": "Action definitions",
+      "items": {
+        "$ref": "#/definitions/actionDef"
+      }
+    },
+    "view": {
+      "$ref": "#/definitions/viewNode",
+      "description": "Root view node"
+    },
+    "components": {
+      "type": "object",
+      "description": "Component definitions",
+      "additionalProperties": {
+        "$ref": "#/definitions/componentDef"
+      }
+    },
+    "route": {
+      "$ref": "#/definitions/routeDef",
+      "description": "Route definition"
+    },
+    "imports": {
+      "type": "object",
+      "description": "External module imports",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "data": {
+      "type": "object",
+      "description": "Build-time data sources",
+      "additionalProperties": {
+        "$ref": "#/definitions/dataSource"
+      }
+    },
+    "styles": {
+      "type": "object",
+      "description": "Style presets",
+      "additionalProperties": {
+        "$ref": "#/definitions/stylePreset"
+      }
+    },
+    "lifecycle": {
+      "type": "object",
+      "description": "Lifecycle hooks",
+      "properties": {
+        "onMount": { "type": "string" },
+        "onUnmount": { "type": "string" },
+        "onRouteEnter": { "type": "string" },
+        "onRouteLeave": { "type": "string" }
+      }
+    }
+  },
+  "definitions": {
+    "stateField": {
+      "oneOf": [
+        { "type": "object", "properties": { "type": { "const": "number" }, "initial": { "type": "number" } }, "required": ["type"] },
+        { "type": "object", "properties": { "type": { "const": "string" }, "initial": { "type": "string" } }, "required": ["type"] },
+        { "type": "object", "properties": { "type": { "const": "boolean" }, "initial": { "type": "boolean" } }, "required": ["type"] },
+        { "type": "object", "properties": { "type": { "const": "list" }, "initial": { "type": "array" } }, "required": ["type"] },
+        { "type": "object", "properties": { "type": { "const": "object" }, "initial": { "type": "object" } }, "required": ["type"] }
+      ]
+    },
+    "actionDef": {
+      "type": "object",
+      "required": ["name", "steps"],
+      "properties": {
+        "name": { "type": "string" },
+        "params": { "type": "array", "items": { "type": "string" } },
+        "steps": { "type": "array", "items": { "$ref": "#/definitions/actionStep" } }
+      }
+    },
+    "actionStep": {
+      "type": "object",
+      "required": ["do"],
+      "properties": {
+        "do": {
+          "type": "string",
+          "enum": ["set", "update", "setPath", "fetch", "navigate", "storage", "clipboard", "delay", "interval", "clearTimer", "focus", "dom", "if", "call", "import", "subscribe", "dispose", "send", "close"]
+        }
+      }
+    },
+    "viewNode": {
+      "type": "object",
+      "required": ["node"],
+      "properties": {
+        "node": {
+          "type": "string",
+          "enum": ["element", "text", "if", "each", "component", "slot", "markdown", "code", "portal"]
+        }
+      }
+    },
+    "componentDef": {
+      "type": "object",
+      "required": ["view"],
+      "properties": {
+        "params": { "type": "array", "items": { "type": "string" } },
+        "state": { "type": "object" },
+        "actions": { "type": "array" },
+        "view": { "$ref": "#/definitions/viewNode" }
+      }
+    },
+    "routeDef": {
+      "type": "object",
+      "properties": {
+        "pattern": { "type": "string" },
+        "params": { "type": "array", "items": { "type": "string" } },
+        "layout": { "type": "string" },
+        "title": { "type": "string" }
+      }
+    },
+    "dataSource": {
+      "type": "object",
+      "required": ["type"],
+      "properties": {
+        "type": {
+          "type": "string",
+          "enum": ["glob", "file", "api", "mdx", "yaml", "csv"]
+        }
+      }
+    },
+    "stylePreset": {
+      "type": "object",
+      "properties": {
+        "base": { "type": "object" },
+        "variants": { "type": "object" }
+      }
+    },
+    "expr": {
+      "type": "object",
+      "required": ["expr"],
+      "properties": {
+        "expr": {
+          "type": "string",
+          "enum": ["lit", "state", "var", "bin", "not", "cond", "get", "concat", "route", "import", "data", "ref", "index", "style", "param", "validity"]
+        }
+      }
+    }
+  }
+}

package/scripts/build.mjs

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+/**
+ * Build script for vscode-constela extension
+ *
+ * This script:
+ * 1. Runs codegen to generate completion/hover data from AST types
+ * 2. Bundles the language server with all dependencies
+ * 3. Bundles the extension client with all dependencies
+ *
+ * All code is bundled into self-contained files so the .vsix works standalone.
+ */
+
+import * as esbuild from 'esbuild';
+import { mkdirSync, rmSync, existsSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const rootDir = join(__dirname, '..');
+const packagesDir = join(rootDir, '..');
+const distDir = join(rootDir, 'dist');
+
+// Paths to language server source
+const languageServerDir = join(rootDir, '..', 'constela-language-server');
+const languageServerEntry = join(languageServerDir, 'src', 'index.ts');
+
+console.log('🔨 Building Constela VSCode Extension...\n');
+
+// Step 1: Run codegen to generate completion/hover data
+console.log('1. Running codegen...');
+execSync('pnpm --filter @constela/codegen generate', {
+  cwd: packagesDir,
+  stdio: 'inherit',
+});
+
+// Step 2: Clean dist directory
+console.log('2. Cleaning dist directory...');
+if (existsSync(distDir)) {
+  rmSync(distDir, { recursive: true });
+}
+mkdirSync(distDir, { recursive: true });
+
+// Step 3: Bundle the language server with all dependencies
+console.log('3. Bundling language server...');
+await esbuild.build({
+  entryPoints: [languageServerEntry],
+  bundle: true,
+  outfile: join(distDir, 'server', 'index.js'),
+  format: 'cjs',
+  platform: 'node',
+  target: 'node20',
+  sourcemap: false,
+  minify: true,
+  external: [],
+  // Ensure all workspace dependencies are bundled
+  packages: 'bundle',
+});
+
+// Step 4: Bundle the extension client
+console.log('4. Bundling extension client...');
+await esbuild.build({
+  entryPoints: [join(rootDir, 'src', 'extension.ts')],
+  bundle: true,
+  outfile: join(distDir, 'extension.js'),
+  format: 'cjs',
+  platform: 'node',
+  target: 'node20',
+  sourcemap: false,
+  minify: true,
+  external: ['vscode'],
+  // Ensure all dependencies are bundled
+  packages: 'bundle',
+});
+
+console.log('\n✅ Build complete!');
+console.log(`   Extension: ${join(distDir, 'extension.js')}`);
+console.log(`   Server: ${join(distDir, 'server', 'index.js')}`);

package/src/extension.ts

@@ -0,0 +1,55 @@
+import * as path from 'path';
+import { workspace, ExtensionContext, window } from 'vscode';
+import {
+  LanguageClient,
+  LanguageClientOptions,
+  ServerOptions,
+  TransportKind,
+} from 'vscode-languageclient/node';
+
+let client: LanguageClient | undefined;
+
+export function activate(context: ExtensionContext): void {
+  // Server is bundled inside the extension's dist/server directory
+  const serverModule = context.asAbsolutePath(
+    path.join('dist', 'server', 'index.js')
+  );
+
+  const debugOptions = { execArgv: ['--nolazy', '--inspect=6009'] };
+
+  const serverOptions: ServerOptions = {
+    run: { module: serverModule, transport: TransportKind.ipc },
+    debug: {
+      module: serverModule,
+      transport: TransportKind.ipc,
+      options: debugOptions,
+    },
+  };
+
+  const clientOptions: LanguageClientOptions = {
+    documentSelector: [
+      { scheme: 'file', language: 'constela' },
+      { scheme: 'file', pattern: '**/*.constela.json' },
+    ],
+    synchronize: {
+      fileEvents: workspace.createFileSystemWatcher('**/*.constela.json'),
+    },
+    outputChannel: window.createOutputChannel('Constela'),
+  };
+
+  client = new LanguageClient(
+    'constelaLanguageServer',
+    'Constela Language Server',
+    serverOptions,
+    clientOptions
+  );
+
+  client.start();
+}
+
+export function deactivate(): Thenable<void> | undefined {
+  if (!client) {
+    return undefined;
+  }
+  return client.stop();
+}

package/syntaxes/constela.tmLanguage.json

@@ -0,0 +1,296 @@
+{
+  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+  "name": "Constela",
+  "scopeName": "source.constela",
+  "patterns": [
+    {
+      "include": "#value"
+    }
+  ],
+  "repository": {
+    "value": {
+      "patterns": [
+        {
+          "include": "#string"
+        },
+        {
+          "include": "#number"
+        },
+        {
+          "include": "#constant"
+        },
+        {
+          "include": "#object"
+        },
+        {
+          "include": "#array"
+        }
+      ]
+    },
+    "object": {
+      "begin": "\\{",
+      "end": "\\}",
+      "beginCaptures": {
+        "0": {
+          "name": "punctuation.definition.object.begin.constela"
+        }
+      },
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.definition.object.end.constela"
+        }
+      },
+      "patterns": [
+        {
+          "include": "#object-member"
+        },
+        {
+          "include": "#value"
+        }
+      ]
+    },
+    "object-member": {
+      "patterns": [
+        {
+          "include": "#version-key"
+        },
+        {
+          "include": "#expr-key"
+        },
+        {
+          "include": "#do-key"
+        },
+        {
+          "include": "#node-key"
+        },
+        {
+          "include": "#state-key"
+        },
+        {
+          "include": "#actions-key"
+        },
+        {
+          "include": "#view-key"
+        },
+        {
+          "include": "#components-key"
+        },
+        {
+          "include": "#route-key"
+        },
+        {
+          "include": "#imports-key"
+        },
+        {
+          "include": "#data-key"
+        },
+        {
+          "include": "#styles-key"
+        },
+        {
+          "include": "#lifecycle-key"
+        },
+        {
+          "include": "#property-key"
+        }
+      ]
+    },
+    "version-key": {
+      "match": "\"(version)\"\\s*:",
+      "captures": {
+        "1": {
+          "name": "keyword.control.constela"
+        }
+      }
+    },
+    "expr-key": {
+      "match": "\"(expr)\"\\s*:\\s*\"(bin|call|concat|cond|data|get|import|index|lambda|lit|not|param|ref|route|state|style|validity|var)\"",
+      "captures": {
+        "1": {
+          "name": "keyword.control.constela"
+        },
+        "2": {
+          "name": "entity.name.type.constela"
+        }
+      }
+    },
+    "do-key": {
+      "match": "\"(do)\"\\s*:\\s*\"(call|clearTimer|clipboard|close|delay|dispose|dom|fetch|focus|if|import|interval|navigate|send|set|setPath|storage|subscribe|update)\"",
+      "captures": {
+        "1": {
+          "name": "keyword.control.constela"
+        },
+        "2": {
+          "name": "entity.name.function.constela"
+        }
+      }
+    },
+    "node-key": {
+      "match": "\"(kind)\"\\s*:\\s*\"(code|component|each|element|if|markdown|portal|slot|text)\"",
+      "captures": {
+        "1": {
+          "name": "keyword.control.constela"
+        },
+        "2": {
+          "name": "entity.name.tag.constela"
+        }
+      }
+    },
+    "state-key": {
+      "match": "\"(state)\"\\s*:",
+      "captures": {
+        "1": {
+          "name": "storage.type.constela"
+        }
+      }
+    },
+    "actions-key": {
+      "match": "\"(actions)\"\\s*:",
+      "captures": {
+        "1": {
+          "name": "storage.type.constela"
+        }
+      }
+    },
+    "view-key": {
+      "match": "\"(view)\"\\s*:",
+      "captures": {
+        "1": {
+          "name": "storage.type.constela"
+        }
+      }
+    },
+    "components-key": {
+      "match": "\"(components)\"\\s*:",
+      "captures": {
+        "1": {
+          "name": "storage.type.constela"
+        }
+      }
+    },
+    "route-key": {
+      "match": "\"(route)\"\\s*:",
+      "captures": {
+        "1": {
+          "name": "storage.type.constela"
+        }
+      }
+    },
+    "imports-key": {
+      "match": "\"(imports)\"\\s*:",
+      "captures": {
+        "1": {
+          "name": "storage.type.constela"
+        }
+      }
+    },
+    "data-key": {
+      "match": "\"(data)\"\\s*:",
+      "captures": {
+        "1": {
+          "name": "storage.type.constela"
+        }
+      }
+    },
+    "styles-key": {
+      "match": "\"(styles)\"\\s*:",
+      "captures": {
+        "1": {
+          "name": "storage.type.constela"
+        }
+      }
+    },
+    "lifecycle-key": {
+      "match": "\"(lifecycle|onMount|onUnmount|onRouteEnter|onRouteLeave)\"\\s*:",
+      "captures": {
+        "1": {
+          "name": "support.function.constela"
+        }
+      }
+    },
+    "property-key": {
+      "patterns": [
+        {
+          "match": "\"(name|value|op|left|right|if|then|else|cond|base|path|parts|part|items|as|template|tag|props|children|on|ref|content|language|target|method|url|body|headers|result|onSuccess|onError|action|key|steps|ms|timerId|subscriptionId|connectionId|from|with|args|params|pattern|layout|title)\"\\s*:",
+          "captures": {
+            "1": {
+              "name": "variable.other.property.constela"
+            }
+          }
+        },
+        {
+          "match": "\"([a-zA-Z_][a-zA-Z0-9_]*)\"\\s*:",
+          "captures": {
+            "1": {
+              "name": "variable.other.member.constela"
+            }
+          }
+        }
+      ]
+    },
+    "array": {
+      "begin": "\\[",
+      "end": "\\]",
+      "beginCaptures": {
+        "0": {
+          "name": "punctuation.definition.array.begin.constela"
+        }
+      },
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.definition.array.end.constela"
+        }
+      },
+      "patterns": [
+        {
+          "include": "#value"
+        }
+      ]
+    },
+    "string": {
+      "patterns": [
+        {
+          "name": "string.quoted.double.constela",
+          "begin": "\"",
+          "end": "\"",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.begin.constela"
+            }
+          },
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.end.constela"
+            }
+          },
+          "patterns": [
+            {
+              "name": "constant.character.escape.constela",
+              "match": "\\\\."
+            }
+          ]
+        }
+      ]
+    },
+    "number": {
+      "name": "constant.numeric.constela",
+      "match": "-?(?:0|[1-9]\\d*)(?:\\.\\d+)?(?:[eE][+-]?\\d+)?"
+    },
+    "constant": {
+      "patterns": [
+        {
+          "name": "constant.language.boolean.true.constela",
+          "match": "\\btrue\\b"
+        },
+        {
+          "name": "constant.language.boolean.false.constela",
+          "match": "\\bfalse\\b"
+        },
+        {
+          "name": "constant.language.null.constela",
+          "match": "\\bnull\\b"
+        }
+      ]
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "lib": ["ES2022"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "sourceMap": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}