Milestone - July (七月) - 2022

[Bistard]

Folder Structure (2022.05.31)

├─base     # 基础代码
│  ├─browser       # 通用UI元件
│  │  ├─basic          # 基础UI元件
│  │  ├─icon
│  │  └─secondary      # 复合UI元件
│  ├─common        # 公用接口
│  ├─electron      # electron相关接口
│  └─node          # nodeJS相关接口
├─code     # 主入口
│  ├─browser       # 渲染模块主入口
│  │  ├─service
│  │  └─workbench     # UI框架
│  ├─common
│  │  ├─model
│  │  └─service
│  ├─electron-main # electron主入口
│  ├─platform
│  └─styles
├─editor   # 编辑器代码
│  ├─common
│  ├─styles
│  ├─model
│  ├─view
│  └─viewModel
└─styles   # css文件

Iteration Plan

Common Codes

• 🚳event - Emitter memory leak optimization.
• number - Numbers namespace.

Editor

• marked - used as the lexer.

Workbench

• event - Replaces all the old emitters-related codes with the new emitter.

Issues

• Sash - Fix [UI][Misposition when dragging Sash] #60
• Sash - Fix [UI][minimum x value of the sash is incorrect] #119
• Sash - fix [UI][delayed render of views while dragging sash] #120
• 🐳SplitView - Resizing will render a flash of blank.

Benchmark & Optimization

• 🐄markdown-tokenizer - marked, markdown-it, and our own tokenizer.

Code Review

• vscode - How does the Monaco editor achieve two-way data binding between View and ViewModel.
• marked - Source code reading (tokenizer & lexer).
• vscode - How vscode renders lines (How vscode get a ViewLineData for each line) (high-level)

[Bistard]

Part3: How markdown-it parses the text (timeline):

1. MarkdownIt.prototype.parse(src: string)

It has a parameter env will be omitted in the section.

The fucntion will parse the given text into tokens. It does two things here:

• var state = new this.core.State(src, this) - StateCore class

  This can be interrupted as a Context (上下文). The constructor is:

  function StateCore(src, md) {
  this.src = src;
  this.tokens = [];
  this.inlineMode = false; // default to false
  this.md = md; // link to parser instance
  }

• this.core.process(state)
  The real parsing process.

2. Core class

Before calling process, the constructor of Core will push total 7 rules (functions) into an array for later processing purpose. They are

• normalize
• block
• inline
• linkify
• repalcements
• smartquotes
• text_join
  During Core.process(state), it will simply iterate each rule and invoke these functions in order.

3 normalize - parsing step 1

Simply replace all the \r\n to \n.

4 block - parsing step 2

This is the main step of parsing, to generate tokens into blocks first. It only consists by a if statement:

if (state.inlineMode) {
    token          = new state.Token('inline', '', 0);
    token.content  = state.src;
    token.map      = [ 0, 1 ];
    token.children = [];
    state.tokens.push(token);
  } else {
    state.md.block.parse(state.src, state.md, state.tokens);

At the beginning, state.inlineMode is false, we reach the line state.md.block.parse(), which is essentially calling MarkdownIt.block.parse(), or, ParserBlock.parse().

4.1 ParserBlock()

The constructor is:

this.ruler = new Ruler();
for (var i = 0; i < _rules.length; i++) {
this.ruler.push(_rules[i][0], _rules[i][1], { alt: (_rules[i][2] || []).slice() });
}

A Ruler is just a simple array of rules for block parsing.

4.1.1 ParserBlock.parse(src, md, outTokens)

It consists by two steps:

• state = new this.State(src, md, outTokens)
  • This is also a context concept but only be used during the block parsing step. the State prototype is StateBlock.
• this.tokenize(state, state.line, state.lineMax)
  • Actual tokenization.

4.1.1.1 StateBlock

The constructor will iterate all the characters in the given text and stores each line start index, line end index,

4.1.2 ParserBlock.tokenize()