@vue/component-compiler-utils
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.0 • Public • Published

    @vue/component-compiler-utils Build Status

    Lower level utilities for compiling Vue single file components

    This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue single file components into JavaScript. It is used in vue-loader version 15 and above.

    The API surface is intentionally minimal - the goal is to reuse as much as possible while being as flexible as possible.

    Why isn't vue-template-compiler a peerDependency?

    Since this package is more often used as a low-level utility, it is usually a transitive dependency in an actual Vue project. It is therefore the responsibility of the higher-level package (e.g. vue-loader) to inject vue-template-compiler via options when calling the parse and compileTemplate methods.

    Not listing it as a peer depedency also allows tooling authors to use a non-default template compiler instead of vue-template-compiler without having to include it just to fullfil the peer dep requirement.

    API

    parse(ParseOptions): SFCDescriptor

    Parse raw single file component source into a descriptor with source maps. The actual compiler (vue-template-compiler) must be passed in via the compiler option so that the specific version used can be determined by the end user.

    interface ParseOptions {
      source: string
      filename?: string
      compiler: VueTemplateCompiler
      // https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilerparsecomponentfile-options
      // default: { pad: 'line' }
      compilerParseOptions?: VueTemplateCompilerParseOptions
      sourceRoot?: string
      needMap?: boolean
    }
    
    interface SFCDescriptor {
      template: SFCBlock | null
      script: SFCBlock | null
      styles: SFCBlock[]
      customBlocks: SFCCustomBlock[]
    }
    
    interface SFCCustomBlock {
      type: string
      content: string
      attrs: { [key: string]: string | true }
      start: number
      end: number
      map?: RawSourceMap
    }
    
    interface SFCBlock extends SFCCustomBlock {
      lang?: string
      src?: string
      scoped?: boolean
      module?: string | boolean
    }

    compileTemplate(TemplateCompileOptions): TemplateCompileResults

    Takes raw template source and compile it into JavaScript code. The actual compiler (vue-template-compiler) must be passed in via the compiler option so that the specific version used can be determined by the end user.

    It can also optionally perform pre-processing for any templating engine supported by consolidate.

    interface TemplateCompileOptions {
      source: string
      filename: string
    
      compiler: VueTemplateCompiler
      // https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilercompiletemplate-options
      // default: {}
      compilerOptions?: VueTemplateCompilerOptions
    
      // Template preprocessor
      preprocessLang?: string
      preprocessOptions?: any
    
      // Transform asset urls found in the template into `require()` calls
      // This is off by default. If set to true, the default value is
      // {
      //   audio: 'src',
      //   video: ['src', 'poster'],
      //   source: 'src',
      //   img: 'src',
      //   image: ['xlink:href', 'href'],
      //   use: ['xlink:href', 'href']
      // }
      transformAssetUrls?: AssetURLOptions | boolean
    
      // For vue-template-es2015-compiler, which is a fork of Buble
      transpileOptions?: any
    
      isProduction?: boolean  // default: false
      isFunctional?: boolean  // default: false
      optimizeSSR?: boolean   // default: false
    
      // Whether prettify compiled render function or not (development only)
      // default: true
      prettify?: boolean
    }
    
    interface TemplateCompileResult {
      ast: Object | undefined
      code: string
      source: string
      tips: string[]
      errors: string[]
    }
    
    interface AssetURLOptions {
      [name: string]: string | string[]
    }

    Handling the Output

    The resulting JavaScript code will look like this:

    var render = function (h) { /* ... */}
    var staticRenderFns = [function (h) { /* ... */}, function (h) { /* ... */}]

    It does NOT assume any module system. It is your responsibility to handle the exports, if needed.

    compileStyle(StyleCompileOptions)

    Take input raw CSS and applies scoped CSS transform. It does NOT handle pre-processors. If the component doesn't use scoped CSS then this step can be skipped.

    interface StyleCompileOptions {
      source: string
      filename: string
      id: string
      map?: any
      scoped?: boolean
      trim?: boolean
      preprocessLang?: string
      preprocessOptions?: any
      postcssOptions?: any
      postcssPlugins?: any[]
    }
    
    interface StyleCompileResults {
      code: string
      map: any | void
      rawResult: LazyResult | void // raw lazy result from PostCSS
      errors: string[]
    }

    compileStyleAsync(StyleCompileOptions)

    Same as compileStyle(StyleCompileOptions) but it returns a Promise resolving to StyleCompileResults. It can be used with async postcss plugins.

    Install

    npm i @vue/component-compiler-utils

    DownloadsWeekly Downloads

    2,081,189

    Version

    3.3.0

    License

    MIT

    Unpacked Size

    65.8 kB

    Total Files

    35

    Last publish

    Collaborators

    • znck
    • yyx990803
    • michalsnik
    • eddyerburgh
    • ktsn
    • nickmessing
    • akryum
    • mysticatea
    • soda
    • liximomo
    • dobromir-hristov
    • lmiller1990
    • linusborg
    • antfu
    • pikax
    • amour1688
    • posva
    • kiaking
    • afontcu