san-sfc-compiler

Lower level utilities for compiling .san single file components

fork from vuejs/component-compiler-utils

API

parseSFC

描述：解析 .san 文件源码

使用：

parseSFC({
  source: '<div><p>{{ helloworld }}</p></div>',
  filename: 'test.san',
});

// 选项
export interface ParseOptions {
  source: string;
  filename?: string;
  sourceRoot?: string;
  needMap?: boolean;
}

方法 / 属性：

| 方法 / 属性 | 描述 | 类型 | | ----------- | ----------------------------- | ------- | | source | 源码 | string | | filename | 文件名 | string | | sourceRoot | sourcemap 选项 | string | | needMap | sourcemap 开关（template 没有 | boolean |

返回：

export interface SFCDescriptor {
  template: SFCBlock | null;
  script: SFCBlock | null;
  styles: SFCBlock[];
  customBlocks: SFCBlock[];
}

其中 SFCBlock 类型为这样：

{
    type!: string;
    content!: string;
    attrs!: Record<string, string | true>;
    start!: number;
    end!: number;
    lang?: string;
    src?: string;
    scoped?: true;
    module?: string | true;
}

content 就是标签内容了。

compileTemplate

描述：编译模板代码，即 <template> 标签中包含的部分

使用：

const result = compileTemplate({
  source: '<div><img src="../images/profile.png" /></div>',
  filename: 'example.san',
  transformAssetUrls: true,
});

方法 / 属性：

| 方法 / 属性 | 描述 | 类型 | | ------------------ | ---------------------------- | ---------------------- | | source | 源码 | string | | filename | 文件名 | string | | id | 一般用在 scoped css 时 | string | | scoped | scoped css 开关 | boolean | | transformAssetUrls | 将 url 转换为 require | boolean | | compileANode | 编译为 anode / apack | 'aNode'/'aPack'/'none' | | preprocessLang | 预处理语言，pugjs 等 | string | | preprocessOptions | 预处理的选项，传递给预处理器 | object |

返回：

{
    code: '<div><img src="require(../images/profile.png);"></div>',
    source: '<div><img src="../images/profile.png" /></div>'
}

compileStyle / compileStyleAsync

描述：编译样式代码，即 <style> 标签中包含的部分

使用：

const style = parseSFC({
  source: `<style lang="less">@red: rgb(255, 0, 0);\n.color { color: @red; }\n</style>`,
  filename: 'test.san',
}).styles[0] as any;

const result = compileStyle({
  id: 'test',
  filename: 'test.san',
  source: style.content,
  scoped: true,
  map: style.map,
  preprocessLang: style.lang,
});

方法 / 属性：

| 方法 / 属性 | 描述 | 类型 | | ----------------- | --------------------------------------- | ------- | | source | 源码 | string | | filename | 文件名 | string | | id | 添加 scoped css id | string | | scoped | scoped css 开关 | boolean | | modules | css modules 开关 | boolean | | mute | 去除 postcss 控制台信息，默认为 true | boolean | | preprocessLang | 预处理语言，less sass 等 | string | | preprocessOptions | 预处理的选项，传递给预处理器 | object | | postcssOptions | postcss 的选项，直接传递给它 | object | | postcssPlugins | postcss 的插件，直接传递给它 | object | | map | sourcemap 的 map，如 less => css 的映射 | object |

返回：

{
  code: '.color[test] {\n  color: #ff0000;\n}\n' // 转换后的代码,
  source: '.color {\n  color: #ff0000;\n}\n' // 源码,
  rawResult: LazyResult // postcss 异步结果,
  map: outMap && outMap.toJSON() // 经过两步转换的 sourcemap,
  errors,
  cssHashMap: {} // css modules 编译结果
}

compileScript

描述：直接使用 ts 的 transpile 方法

export const compileScript = (source: string, config: CompilerOptions) => {
  return typescrtipt.transpile(source, config);
};

如果不清楚，可以参考 test 目录下的测试文件

LICENSE

Copyright (c) Baidu Inc. All rights reserved.

This source code is licensed under the MIT license.