Remove virtual model approach and use Monaco's built-in tokenization
to detect when cursor is in embedded JavaScript region. With
nextEmbedded, Monaco automatically syncs model content to the JS
worker, so we can call the worker directly on the model's URI
instead of creating a separate virtual model.
Inside ${...} interpolations, the package now uses Monaco's JavaScript
language service worker for full IntelliSense:
- getCompletionsAtPosition: Property access, method completions
- getQuickInfoAtPosition: Type info and documentation on hover
- getSignatureHelpItems: Function parameter hints
This allows users to configure the context using setExtraLibs:
```typescript
monaco.languages.typescript.javascriptDefaults.setExtraLibs([{
content: `
declare const config: { debug: boolean; port: number };
declare const env: string;
`,
filePath: 'context.d.ts'
}]);
```
Then typing `config.` inside ${...} will show `debug` and `port` completions
with proper types.
The standalone package now taps into Monaco's built-in JSON language
service via monaco.languages.json.getWorker() to provide:
- Schema-aware completions (doComplete)
- JSON hover information (doHover)
- Full validation with interpolation filtering (doValidation)
- Document formatting (format)
- Document symbols/outline (findDocumentSymbols)
- Folding ranges (getFoldingRanges)
- Selection ranges (getSelectionRanges)
- Color provider (findDocumentColors, getColorPresentations)
Inside ${...} interpolations, the custom variable provider takes over
for completions and hover. All JSON diagnostics that overlap with
interpolations are automatically filtered out.
Extract the JSON interpolation language as a standalone npm package that
works with the official Monaco Editor as a peer dependency.
Features:
- Zero dependencies on monaco-editor internals
- Simple registration API: register() and getDefaults()
- Variable context for custom completions and hover
- Monarch tokenizer with nextEmbedded for JavaScript
- TypeScript types included
- ESM and CommonJS builds via tsup
Usage:
```typescript
import { register, getDefaults } from 'monaco-json-interpolation';
register();
getDefaults().setVariableContext({
getVariables: () => [{ name: 'env', value: 'prod' }]
});
```
