Sygnal for VS Code

Diagnostics, explanations, quick fixes, completions, go to definition, code lenses and a safe rename for Sygnal apps, as you type.

Sygnal's wiring mistakes fail silently at run time: an intent selector the view never renders, an action with no model entry, an EVENTS type nobody listens to, a child component's class used in the parent. This extension runs sygnal-check, Sygnal's static checker, as a language server, so these show up in the editor as soon as you write them, with the same rules and settings as the CLI and your CI.

Features

• Findings as you type, for the whole project: a change in one file can create or clear a finding in another (EVENTS, child components, Collections), and those files are updated too. Each finding names the component, the problem and the fix, and links its code to the error reference.

• Hover on a finding: what the code means, why it fails silently, and how to fix it.

• Quick fixes (Ctrl+. / Cmd+.): the checker's suggestions, such as "Change '.incc' to '.inc'" or "Add a model entry for 'SAVE'", and "Suppress SYGnnn on this line".

• Fix all: Sygnal: Fix All in File applies every mechanical fix in the file (what sygnal-check --fix does). To run it on save:

  "editor.codeActionsOnSave": { "source.fixAll.sygnal": "explicit" }
  

• Completions for the names Sygnal wires by string, which TypeScript can't complete: in DOM.click('. the view's classes (after #, its ids), in a model key the actions nothing handles yet (as a NAME: (state, data) => ... snippet), in EVENTS.select(' the EVENTS types emitted in the project, in next(' the model's actions, in <Collection from=" the state keys. Elsewhere TypeScript's completions stand alone.

• Go to definition and Find All References (F12, Shift+F12) on actions, EVENTS types, selectors, state keys and context entries: from an intent key to its model entry and back, from EVENTS.select('SAVED') to every emitter in the project, from '.save' to the element that renders it.

• Code lenses above intent keys, model keys and EVENTS selects / emits: handled by model.SAVE · STATE, EVENTS 'SAVED', triggered by intent, next from RESET, 2 emitters, or no model entry / not triggered. Click one to see its targets in a peek view. Turn them off with "sygnal.codeLens": false.

• Rename (F2) of an action, an EVENTS type, a class or id, a state key or a context entry, everywhere it is wired: intent, model, next(), reply names, emitters and selects in other files. It refuses, with the reason, when it can't find every use (a built-in, a spread in the model, a name built at run time, the same string elsewhere in the code); VS Code then offers TypeScript's rename where it has one. Mentions in test files are a separate group that opens the refactor preview, so you confirm them.

• Snippets for .jsx and .tsx files, in Sygnal's canonical forms:

  Prefix	Inserts
  sygcomp	a component: destructured view, intent, object-form model, initialState (in .tsx: Component<State, {}, {}, ActionsOf<typeof intent>> and IntentSources)
  sygeffect	a model entry with an EFFECT sink
  sygevent	a model entry that updates state and emits a global event with event()

Commands

Which sygnal-check it runs

1. Your project's own node_modules/sygnal-check, when it is version 0.4.0 or later (the first with the language server). The editor then reports exactly what your CLI and CI report. Completions, go to definition / references, code lenses and rename need 0.5.0 or later: with 0.4.0 you get the findings, hovers and quick fixes only.
2. Otherwise, the copy bundled with the extension. The status bar item shows which one is in use: hover over Sygnal for the version and where it comes from. If your project has an older sygnal-check, the extension says so once and suggests npm i -D sygnal-check@latest.

In a workspace you haven't trusted (Restricted Mode), the extension only runs its bundled copy, never code from the workspace.

The server runs on VS Code's own Node.js, so you don't need Node installed for the bundled copy.

When it runs

The extension activates in a workspace with a sygnal-check.config.json, or when you open a JavaScript or TypeScript file. It starts the server only when a workspace folder uses Sygnal: a sygnal-check.config.json, or a package.json that depends on sygnal or sygnal-check (or has a "sygnal-check" config key). Otherwise it stays idle, and starts once one of those files appears.

Each workspace folder is checked as its own project. A folder with no Sygnal components gets no findings.

Settings

By default every setting is unset (null), so the config file decides, and the editor, the CLI and CI check the same way. A setting you set overrides the config file. All of them can be set per workspace folder (.vscode/settings.json).

The config file

Put the project's settings in sygnal-check.config.json at the project root, so the CLI, CI and the editor share them:

{ "strict": true }

or in package.json:

{ "sygnal-check": { "strict": true } }

See the sygnal-check README for every key.

Other editors and agents

The server is sygnal-check lsp, a standard Language Server Protocol server on stdio, so other editors can use it too: see the docs.

Links

• Sygnal documentation
• Diagnostic codes
• Issues

License

MIT