@liip/esbuild-plugin-ast-vue

esbuild-plugin-ast-vue

A plugin to generate an AST representation of your .vue files. The plugin use Acorn to produce an estree compliant AST object. You can then apply transformations by providing a visitor object. In order to also parse your .js dependencies imported in your scripts, you should probably use the @liip/esbuild-plugin-ast in conjunction with this plugin since esbuild does not allow plugin composition.

Installation

npm i -D @liip/esbuild-plugin-ast-vue @liip/esbuild-plugin-ast

Usage

import { astParser } from '@liip/esbuild-plugin-ast';
import { astParserVue } from '@liip/esbuild-plugin-ast-vue';

...

await esbuild.context({
  ...
  plugins: [astParserVue(vueParserOptions), astParser(parserOptions)],
  ...
});

...

Options

You can configure the way the plugin works by setting different options.

interface AstParserVueOptions extends AstParserOptions {
  scriptNamespace?: string;
  templateVisitor: AstParserOptions['visitor'];
  templateOptions?: Pick<
    SFCTemplateCompileOptions,
    | 'compiler'
    | 'preprocessLang'
    | 'preprocessOptions'
    | 'compilerOptions'
    | 'transformAssetUrls'
  >;
  scriptOptions?: Pick<SFCScriptCompileOptions, 'babelParserPlugins'>;
  styleOptions?: Pick<
    SFCAsyncStyleCompileOptions,
    | 'modulesOptions'
    | 'preprocessLang'
    | 'preprocessOptions'
    | 'postcssOptions'
    | 'postcssPlugins'
  >;
}

scriptNamespace

A string namespace used to tell @liip/esbuild-plugin-ast to parse .js dependencies from your .vue files. This is required since esbuild does not allow plugin composition. This namespace should also be provided to astParser in order to work correctly.

visitor

An ESTraverse.Visitor object used to apply AST transformations. Check the Estraverse documentation form more information on the available API.

templateVisitor

An ESTraverse.Visitor object used to apply AST transformations to the JavaScript produce by the template interpretation. Check the Estraverse documentation form more information on the available API.

templateOptions

Template options passed to the underlying SFCCompiler. See the compileTemplate.ts implementation for more details

scriptOptions

Script options passed to the underlying SFCCompiler. See the compileScript.ts implementation for more details

styleOptions

Style options passed to the underlying SFCCompiler. See the compileStyle.ts implementation for more details