从0到1搭建自己的组件(vue-code-view)库(下)

0x00 前言

书接上文，本文将从源码功能方面讲解下 vue-code-view 组件核心逻辑，您可以了解以下内容：

• 动态组件的使用。
• codeMirror插件的使用。
• 单文件组件(SFC,single-file component) Parser。

0x01 CodeEditor组件

项目使用功能丰富的codeMirror实现在线代码展示编辑功能。

npm 包安装：

npm install codemirror --save

子组件 src\src\code-editor.vue 完整源码：

<template>
  <div class="code-editor">
    <textarea ref="codeContainer" />
  </div>
</template>

<script>
// 引入核心
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css"; 

// 主题 theme style
import "codemirror/theme/base16-light.css";
import "codemirror/theme/base16-dark.css";
// 语言 mode
import "codemirror/mode/vue/vue";
// 括号/标签 匹配
import "codemirror/addon/edit/matchbrackets";
import "codemirror/addon/edit/matchtags";
// 括号/标签 自动关闭
import "codemirror/addon/edit/closebrackets";
import "codemirror/addon/edit/closetag";
// 代码折叠
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/comment-fold";
// 缩进文件
import "codemirror/addon/fold/indent-fold";
// 光标行背景高亮
import "codemirror/addon/selection/active-line"; 

export default {
  name: "CodeEditor",
  props: {
    value: { type: String },
    readOnly: { type: Boolean },
    theme: { type: String },
    matchBrackets: { type: Boolean },
    lineNumbers: { type: Boolean },
    lineWrapping: { type: Boolean },
    tabSize: { type: Number },
    codeHandler: { type: Function },
  },
  data() {
    return {
      // 编辑器实例
      codeEditor: null,
      // 默认配置
      defaultOptions: {
        mode: "text/x-vue", //语法高亮   MIME-TYPE
        gutters: [
          "CodeMirror-linenumbers",
          "CodeMirror-foldgutter",
        ],
        lineNumbers: this.lineNumbers, //显示行号
        lineWrapping: this.lineWrapping || "wrap", // 长行时文字是换行  换行(wrap)/滚动(scroll)
        styleActiveLine: true, // 高亮选中行
        tabSize: this.tabSize || 2, // tab 字符的宽度
        theme: this.theme || "base16-dark", //设置主题
        autoCloseBrackets: true, // 括号自动关闭
        autoCloseTags: true, // 标签自动关闭
        matchTags: true, // 标签匹配
        matchBrackets: this.matchBrackets || true, // 括号匹配
        foldGutter: true, // 代码折叠
        readOnly: this.readOnly ? "nocursor" : false, //  boolean|string  “nocursor” 设置只读外，编辑区域还不能获得焦点。
      },
    };
  },
  watch: {
    value(value) {
      const editorValue = this.codeEditor.getValue();
      if (value !== editorValue) {
        this.codeEditor.setValue(this.value);
      }
    },
    immediate: true,
    deep: true,
  },
  mounted() {
    // 初始化
    this._initialize();
  },
  methods: {
    // 初始化
    _initialize() {
      // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
      this.codeEditor = CodeMirror.fromTextArea(
        this.$refs.codeContainer,
        this.defaultOptions
      );
      this.codeEditor.setValue(this.value);
      // 使用 prop function 替换 onChange 事件
      this.codeEditor.on("change", (item) => {
        this.codeHandler(item.getValue());
      });
    },
  },
};
</script>

插件启用功能的配置选项，同时需要引入相关的js,css 文件。

参数	说明	类型
mode	支持语言语法高亮 MIME-TYPE	string
lineNumbers	是否在编辑器左侧显示行号。	boolean
lineWrapping	在长行时文字是换行(wrap)还是滚动(scroll)，默认为滚动(scroll)。	boolean
styleActiveLine	高亮选中行	boolean
tabSize	tab 字符的宽度	number
theme	设置主题	tring
autoCloseBrackets	括号自动关闭	boolean
autoCloseTags	标签自动关闭	boolean
matchTags	标签匹配	boolean
matchBrackets	括号匹配	boolean
foldGutter	代码折叠	boolean
readOnly	是否只读。 “nocursor” 设置只读外，编辑区域还不能获得焦点。	boolean|string

组件初始化时，会自动初始化编辑器示例，同时将源码赋值给编辑器，并注册监听change事件。当编辑器的值发生改变时，会触发 onchange 事件，调用组件prop 属性 codeHandler将最新值传给父组件。

// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
this.codeEditor = CodeMirror.fromTextArea( this.$refs.codeContainer, this.defaultOptions );
this.codeEditor.setValue(this.value);
// 注册监听`change`事件
this.codeEditor.on("change", (item) => { this.codeHandler(item.getValue()); });

0x02 SFC Parser

组件的功能场景是用于简单示例代码运行展示，将源码视为 单文件组件(SFC,single-file component)的简单实例。

文件src\utils\sfcParser\parser.js 移植 vue 源码 sfc/parser.js 的 parseComponent 方法,用于实现源码解析生成组件 SFCDescriptor。

暂不支持组件和样式的动态引入，此处功能代码已经移除。

// SFCDescriptor 接口声明
export interface SFCDescriptor {
  template: SFCBlock | undefined; //
  script: SFCBlock | undefined;
  styles: SFCBlock[];
  customBlocks: SFCBlock[];
}

export interface SFCBlock {
  type: string;
  content: string;
  attrs: Record<string, string>;
  start?: number;
  end?: number;
  lang?: string;
  src?: string;
  scoped?: boolean;
  module?: string | boolean;
}

SFCDescriptor 包含 template、script、styles、customBlocks 四个部分，将用于示例组件的动态构建。 其中 styles是数组，可以包含多个代码块并解析； template和script 若存在多个代码块只能解析最后一个。

customBlocks是没在template的HTML代码，处理逻辑暂未包含此内容。

0x03 组件动态样式

文件src\utils\style-loader\addStylesClient.js 移植 vue-style-loader 源码 addStylesClient 方法,用于在页面DOM中动态创建组件样式。

根据 SFCDescriptor 中的 styles和组件编号，在DOM中添加对应样式内容，若新增删除 <style>，页面DOM中对应创建或移除该样式内容。若更新 <style>内容，DOM节点只更新对应块的内容，优化页面性能。

0x04 CodeViewer 组件

使用 JSX 语法实现组件核心代码。

<script>
export default {
  name: "CodeViewer",
  props: {
    theme: { type: String, default: "dark" }, //light
    source: { type: String },
  },
  data() {
    return {
      code: ``,
      dynamicComponent: {
        component: {
          template: "<div>Hello Vue.js!</div>",
        },
      },
    };
  },
  created() {
    this.viewId = `vcv-${generateId()}`;
    // 组件样式动态更新
    this.stylesUpdateHandler = addStylesClient(this.viewId, {});
  },
  mounted() {
    this._initialize();
  },
  methods: {
    // 初始化
    _initialize() {
      ...
    },
    // 生成组件
    genComponent() {
      ...
    },
    // 更新 code 内容
    handleCodeChange(val) {
      ...
    },
    // 动态组件render
    renderPreview() {
      ...
    },
  },
  computed: {
    // 源码解析为sfcDescriptor
    sfcDescriptor: function () {
      return parseComponent(this.code);
    },
  },
  watch: {
    // 监听源码内容
    code(newSource, oldSource) {
       this.genComponent();
    },
  },
  // JSX 渲染函数
  render() {
    ...
  },
};
</script>

组件初始化生成组件编号，注册方法 stylesUpdateHandler 用于样式的动态添加。

组件初始化调用 handleCodeChange 方法将传入prop source值赋值给code。

methods: {
    _initialize() {
      this.handleCodeChange(this.source);
    },
    handleCodeChange(val) {
      this.code = val;
    },
}

计算属性sfcDescriptor 调用parseComponent方法解析code内容生成组件的 sfcDescriptor。

computed: {
    // 源码解析为sfcDescriptor
    sfcDescriptor: function () {
      return parseComponent(this.code);
    },
  },

组件监听code值是否发生变化，调用genComponent方法更新组件。

 methods: {
    // 生成组件
    genComponent() {
      ...
    },
  },
  watch: {
    // 监听源码内容
    code(newSource, oldSource) {
       this.genComponent();
    },
  },

方法 genComponent将代码的sfcDescriptor 动态生成组件，更新至 dynamicComponent 用于示例呈现。同时调用 stylesUpdateHandler方法使用addStylesClient在DOM中添加实例中样式,用于示例样式渲染。

  genComponent() {
      const { template, script, styles, customBlocks, errors } = this.sfcDescriptor; 

      const templateCode = template ? template.content.trim() : ``;
      let scriptCode = script ? script.content.trim() : ``;
      const styleCodes = genStyleInjectionCode(styles, this.viewId);

      // 构建组件
      const demoComponent = {};

      // 组件 script
      if (!isEmpty(scriptCode)) {
        const componentScript = {};
        scriptCode = scriptCode.replace(
          /export\s+default/,
          "componentScript ="
        );
        eval(scriptCode);
        extend(demoComponent, componentScript);
      }

      // 组件 template
      demoComponent.template = `<section id="${this.viewId}" class="result-box" >
        ${templateCode}
      </section>`;

      // 组件 style
      this.stylesUpdateHandler(styleCodes);

      // 组件内容更新
      extend(this.dynamicComponent, {
        name: this.viewId,
        component: demoComponent,
      });
    },

JSX 渲染函数展示基于code内容动态生成的组件内容。调用 CodeEditor 组件传入源码value和主题theme，提供了 codeHandler 处理方法handleCodeChange用于获取编辑器内最新的代码。

  methods: {
    renderPreview() {
      const renderComponent = this.dynamicComponent.component;

      return (
        <div class="code-view zoom-1">
          <renderComponent></renderComponent>
        </div>
      );
    },
  },
  // JSX 渲染函数
  render() {
    return (
      <div ref="codeViewer">
        <div class="code-view-wrapper">
          {this.renderPreview()}
          ...
          <CodeEditor
              codeHandler={this.handleCodeChange}
              theme={`base16-${this.theme}`}
              value={this.code}
            />
        </div>
      </div>
    );
  },

handleCodeChange 被调用后，触发 watch =>genComponent=>render ，页面内容刷新，从而达到代码在线编辑，实时预览效果的功能。

---

完结

此组件编写是个人对于 Element 2 源码学习系列 学习实践的总结,希望会对您有所帮助!