Aktion for VS Code

Language support for Aktion .aktion files:

• TypeScript-based syntax highlighting — the TextMate grammar includes source.ts, so .aktion highlights exactly like TypeScript, with extra scopes for the reactive $state sigil and PascalCase component calls.
• Diagnostics — unknown components, unknown props, and enum mismatches are flagged inline (the same schema-as-truth checks the runtime enforces).
• Hover — component signatures/descriptions, keyword docs, and $state info.
• Completions — component names, prop names at the call site, $state hooks, and keywords.
• Snippets — generated from the component library.

All language features run in-process via the DOM-free aktion-runtime/language surface (getDiagnostics / getHoverInfo / getCompletions / getSnippets) — the same data the docs playground uses. No separate language server.

Running it locally (F5 debug)

The extension bundles the DOM-free aktion-runtime/language surface, so the runtime should be built first. From a fresh checkout:

1. Build the runtime (repo root)

# from the repository root
npm install
npm run build          # produces dist/language.js — the entry this extension bundles

Re-run it whenever you change anything under src/ (the language service, parser, or component library).

2. Build the extension

cd editors/vscode
npm install            # @types/vscode, esbuild, @vscode/vsce, ovsx
npm run build          # 1) generates snippets/aktion.code-snippets, 2) bundles dist/extension.js

npm run build runs two steps:

• gen-snippets — reads getSnippets() and writes snippets/aktion.code-snippets.
• esbuild.mjs — bundles src/extension.ts → dist/extension.js (CJS, Node target, vscode external). It aliases aktion-runtime/language to the repo's local build (or the TS source if you skipped step 1).

3. Launch the Extension Development Host

Open the editors/vscode folder in VS Code and press F5. The included .vscode/launch.json runs the build task and opens a second window (the dev host) with the examples/vite-compiler project loaded.

Open any .aktion file (e.g. src/app.aktion) and you should see:

• Highlighting — colored like TypeScript, with $state and component calls distinct.
• Diagnostics — type a bad prop (Card([], { junk: 1 })) → a red squiggle.
• Hover — hover Card for its signature.
• Completions — Ctrl/Cmd+Space lists components / props / $state / keywords.
• Snippets — type Card, App, Hero, … and accept.

Edit src/extension.ts, re-run npm run build (or npm run watch), and click ↻ Restart in the debug toolbar to reload the host.

Publishing to the marketplaces

Aktion users install the extension from a marketplace. The extension can be published to two: the Visual Studio Marketplace (VS Code) and Open VSX (VSCodium, Cursor, Gitpod, …). Publish to both for the widest reach.

One-time setup

1. Add an icon + final metadata. Marketplaces require/recommend a 128×128 PNG icon and good metadata. In package.json:
   • set "publisher" to your marketplace publisher id (replace "aktion"),
   • add "icon": "icon.png" (commit a 128x128 icon.png next to package.json),
   • keep repository, categories, keywords, license populated (already are).
2. Install the tooling (already in devDependencies):

   npm i -g @vscode/vsce ovsx     # or use the local devDeps via npx
   

Visual Studio Marketplace (VS Code)

1. Create a publisher. Sign in at https://marketplace.visualstudio.com/manage with a Microsoft account and create a publisher (its id goes in package.json's "publisher").
2. Create an Azure DevOps Personal Access Token (PAT) at https://dev.azure.com → User settings → Personal access tokens. Scope: Marketplace → Manage, Organization: All accessible organizations.
3. Log in and publish:

   cd editors/vscode
   npx vsce login <publisher>        # paste the PAT
   npm run build                     # ensure dist/ + snippets/ are fresh
   npm run publish                   # = vsce publish  (bumps + uploads)
   

   • Publish a specific bump: npx vsce publish minor (or patch / major / 1.2.3).
   • Or publish a token without an interactive login: npx vsce publish -p <PAT>.
4. Verify at https://marketplace.visualstudio.com/items?itemName=<publisher>.aktion-vscode. Users then find it in VS Code's Extensions view by searching "Aktion".

Open VSX (VSCodium / Cursor / Gitpod / Eclipse Theia)

1. Create an account at https://open-vsx.org, become a member of (or create) a namespace matching your publisher, and generate an access token.
2. Publish:

   cd editors/vscode
   npm run build
   npx ovsx publish -p <OPEN_VSX_TOKEN>     # = npm run publish:ovsx
   

Package a .vsix (no marketplace)

For local installs, CI artifacts, or private distribution:

cd editors/vscode
npm run package                 # = vsce package  → aktion-vscode-<version>.vsix
code --install-extension aktion-vscode-0.1.0.vsix

CI publishing (recommended)

Run the publish in CI on a tagged release so it's reproducible. Store the PAT as VSCE_PAT and the Open VSX token as OVSX_TOKEN secrets, then:

npm ci && npm run build
npx vsce publish -p "$VSCE_PAT"
npx ovsx publish -p "$OVSX_TOKEN"

vsce reads the version from package.json. Bump it (e.g. npm version patch) before each release, and keep a CHANGELOG.md — the marketplace shows it.

Troubleshooting

Deprecation warnings in the Debug Console (DEP0040 punycode, DEP0005 Buffer(), DEP0169 url.parse()) are not produced by this extension — they come from the VS Code Extension Development Host's Node/Electron runtime and other extensions, and appear for every extension project. The extension only calls the pure aktion-runtime/language functions and the vscode API. Safe to ignore; to silence them, add to .vscode/launch.json:

"env": { "NODE_OPTIONS": "--no-deprecation" }

No highlighting / features on a .aktion file — confirm the status-bar language mode (bottom-right) is Aktion; if it shows Plain Text, the extension didn't activate (press F5 from the editors/vscode folder and ensure dist/extension.js exists).