Newfangled Package Modernizer

    @blitz/monaco-auto-import
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    monaco-auto-import

    npm version npm downloads Demo

    Easily add auto-import to the Monaco editor, with Javascript & Typescript support.

    Demo

    Example code

    import AutoImport, { regexTokeniser } from '@blitz/monaco-auto-import'
    
    const editor = monaco.editor.create(document.getElementById('demo'), {
      value: `
        PAD
        leftPad
        rightPad
      `,
      language: 'typescript'
    })
    
    const completor = new AutoImport({ monaco, editor })
    
    completor.imports.saveFiles([
      {
        path: './node_modules/left-pad/index.js',
        aliases: ['left-pad'],
        imports: regexTokeniser(`
          export const PAD = ''
          export function leftPad() {}
          export function rightPad() {}
        `)
      }
    ])

    Getting started

    Installing

    yarn add @blitz/monaco-auto-import
    # or
    npm i @blitz/monaco-auto-import --save

    Using

    Initializing a new instance

    Simply create a new Monaco editor instance and pass it to AutoImport. This will register custom completion providers for Monaco's javascript and typescript language services.

    import AutoImport from '@blitz/monaco-auto-import'
    
    const editor = monaco.editor.create(document.getElementById('demo'), {
      language: 'typescript'
    })
    
    const completor = new AutoImport({ monaco, editor })

    Providing completion items

    To make the auto-importer aware of a file with exports, simply call completor.imports.saveFile.

    completor.imports.saveFile({
      path: './src/my-app.js',
      imports: [
        {
          type: 'const',
          name: 'Testing'
        }
      ]
    })

    Tokenization

    This package includes a built-in regexTokeniser, which uses a simple Regex to extracts exports from Javascript / Typescript code

    import { regexTokeniser } from '@blitz/monaco-auto-import'
    
    const imports = regexTokeniser(`
      export const a = 1
      export class Test {}
    `)
    // [{ type: 'const', name: 'a'}, { type: 'class', name: 'Test' }]
    
    completor.imports.saveFile({
      path: './src/my-app.js',
      imports: imports
    })

    API

    imports.saveFile(file: File): void

    Saves a file to the internal store, making it available for completion

    imports.saveFiles(files: File[]): void

    Bulk-saves files to the internal store from an Array of files

    imports.getFile(path: string): File

    Fetches a file from the internal store by it's path name (or one of it's aliases).

    imports.getImports(name: string): ImportObject[]

    Returns all the imports that exactly match a given string.

    imports.addImport(path: string, name: string, type?: Expression): boolean

    Adds an import to a given file, with an optional type paramater. Returns true if the file existed

    imports.removeImport(path: string, name: string): boolean

    Removes an import from a given file. Returns true if the file existed

    Keywords

    none

    Install

    npm i @blitz/monaco-auto-import

    DownloadsWeekly Downloads

    0

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    23 MB

    Total Files

    122

    Last publish

    Collaborators

    • heygarrison
    • ggdaltoso
    • vaxinate
    • markwhitfeld
    • apai4
    • samdd
    • ericmsimons
    • stackblitz-unpkg
    • d3lm
    • kwintenp
    • samverschueren
    • _rvidal