Nuvsha VS Code Extension

Developer tooling for the Nuvsha framework.

Overview

This is the Nuvsha language extension release package. It is not publicly published yet, but nuvsha-0.1.0.vsix can be installed in VS Code now.

Features (Current Status)

• [x] Extension architecture and foundation (Phase 17.1)
• [x] .nuv language registration & file association (Phase 17.2)
• [x] Syntax highlighting (Phase 17.3)
• [x] Code snippets (Phase 17.4)
• [x] Real application testing (Phase 17.5)
• [x] Compiler diagnostics and Quick Fixes
• [x] Natural autocomplete and snippets
• [x] Go to Definition and Auto Imports
• [x] Hover documentation and Document Symbols
• [x] Bundled Nuvsha N file icon and VSIX packaging (Phase 17.10)

Install the release VSIX

1. In VS Code, open the Extensions view.
2. Select the ... menu, then Install from VSIX....
3. Choose nuvsha-0.1.0.vsix from this folder.
4. Open a Nuvsha project or create a file named App.nuv.

VS Code recognizes the .nuv extension as Nuvsha. Its Explorer, Open Editors, and file UI use the bundled Nuvsha N icon whenever the active file icon theme allows language default icons. The extension does not install or select a user icon theme and never changes icons for .js, .ts, .json, .html, .css, .md, or .png files.

The icon is declared through the official contributes.languages[].icon mechanism and is stored inside the VSIX at extension/images/. VS Code file icon themes retain precedence, so a theme that explicitly supplies an icon for .nuv (or disables language icons) can intentionally override it.

Phase 17.3 — Syntax Highlighting

What is Syntax Highlighting?

Syntax highlighting colors the words in your .nuv files so that code is easy to read. Tags, attributes, strings, comments, and JavaScript expressions each get distinct colors according to your VS Code theme.

How the Nuvsha Grammar Works

The grammar is stored in:

syntaxes/nuvsha.tmLanguage.json

It is a standard TextMate grammar that defines patterns and scopes:

• HTML tags: <div class="app">, </button>
• Component tags: <Card title={title} />, <Button>...</Button>
• Script logic: <script> ... </script> with full JavaScript highlighting
• Interpolation expressions: {name}, {count + 1}, {user.name}, {items.length}
• Conditionals: {if condition}, {else if condition}, {else}, {/if}
• Loops: {for item of items}, {/for}
• Async blocks: {async data = fetch()}, {loading}, {error}, {/async}
• Events: onclick="count++", onclick={handleClick}
• Two-way bindings: bind={accepted}, bind={username}
• Comments: <!-- HTML comment -->

Example .nuv Code

<script>
  import Card from "./components/Card.nuv"

  count = 0
  name = "Alex"

  addItem = () => {
    count++
  }
</script>

<div class="container">
  <h1>Hello, {name}!</h1>

  <Card title="Counter">
    <p>Current count: {count}</p>
    <button onclick="count++">Increment</button>
  </Card>

  {if count > 0}
    <p>Count is positive!</p>
  {else}
    <p>Count is zero.</p>
  {/if}
</div>

Phase 17.4 — Code Snippets

What are Code Snippets?

Snippets are ready-to-use code templates. When working in any .nuv file, simply type a short prefix (e.g. nvcomp, nvif, nvfor) and press Tab or Enter to insert the complete, correctly formatted Nuvsha code.

Supported Snippet Categories

The extension includes 41 snippets in snippets/nuvsha.json:

• Component Starter: nvcomp (full component), nvscript, nvimport
• Conditionals: nvif, nvifelse, nvelseif, nvelse
• Loops: nvfor ({for item of items})
• Expressions & Slots: nvexpr ({variable}), nvchildren ({children})
• Components & Props: nvcomponent (<Card title={title} />), nvcomponent-children
• Events: nvclick (onclick="count++"), nvclickfn, nvbutton, nvevent
• Form Binding: nvbind (bind={variable}), nvinput, nvcheckbox, nvselect, nvtextarea, nvform
• Async & Data: nvasync ({async data = fetch()} ... {loading} ... {error}), nvdata (data(...)), nvform-primitive (form(...))
• Routing: nvrouter (<Router routes={routes} />), nvroutes
• HTML Elements: nvdiv, nvsection, nvmain, nvheader, nvfooter, nvnav, nvarticle, nvh1, nvh2, nvh3, nvp, nva, nvimg, nvul

For the complete guide and full reference of all 41 snippets with templates and examples, see docs/snippets.md.

How to Test Manually (Extension Development Host)

1. Open this nuvsha-vscode folder in VS Code.
2. Press F5 on your keyboard (or click Run and Debug -> Run Nuvsha Extension).
3. A new VS Code window will open with the extension active (this is the Extension Development Host).
4. Create or open any .nuv file (e.g. test/fixtures/syntax-showcase.nuv).
5. Type nvcomp and press Tab: verify a complete component is inserted!
6. Type nvif and press Tab: verify the {if condition} ... {/if} block is inserted!
7. Type nvfor and press Tab: verify the {for item of items} ... {/for} loop is inserted!

Phase 17.5 — Real Application Testing

The extension was thoroughly verified against nuvsha-master-test/, the comprehensive 21-component/page Nuvsha application:

• Language recognition: Confirmed across App.nuv, components, and pages.
• Syntax highlighting: Verified on real code (scripts, components, props, conditions, loops, binds, events, async).
• Snippets: Tested for valid compilation with the Nuvsha compiler.
• Application health: nuvsha-master-test builds in <600ms and serves cleanly on Vite dev server.

For the full test walkthrough and checklist, see docs/real-app-testing.md.

Running Tests

Run the automated test suite with:

npm test

All tests validate grammar syntax, regex pattern compilation, all 41 snippet definitions, and real application integration.

For the final release check, run from the repository root:

npm test
npm --prefix nuvsha-vscode test
npm run master-test:build
npx --yes @vscode/vsce package --cwd nuvsha-vscode --out nuvsha-vscode/nuvsha-0.1.0.vsix

Then inspect the archive with tar -tf nuvsha-vscode/nuvsha-0.1.0.vsix and confirm that both extension/images/nuvsha-file-icon-*.svg files are present. For a clean install test, use VS Code's Install from VSIX... command in a profile or extensions directory that does not already have Nuvsha installed.

Publishing later

The package is ready for publishing once a Marketplace publisher account is configured for nuvsha-team. Authenticate with the Marketplace publishing tooling, verify the publisher name and repository URL, then publish this same tested VSIX/version. Publishing is intentionally not performed by this repository; until then, install the generated VSIX directly.