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 >
    <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 = https://www.cnblogs.com/anduril/archive/2021/11/03/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 檔案，

組件初始化時，會自動初始化編輯器示例，同時將原始碼賦值給編輯器，并注冊監聽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}"  >
        ${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 >
          <renderComponent></renderComponent>
        </div>
      );
    },
  },
  // JSX 渲染函式
  render() { 
    return (
      <div ref="codeViewer">
        <div > 
          {this.renderPreview()}  
          ...
          <CodeEditor 
              codeHandler={this.handleCodeChange}
              theme={`base16-${this.theme}`}
              value=https://www.cnblogs.com/anduril/archive/2021/11/03/{this.code}
            />