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' }]
});
```
