Skip to content

Commit

Permalink
fix: vuejs/vue-vapor url (#122)
Browse files Browse the repository at this point in the history
  • Loading branch information
ubugeeei authored Dec 19, 2024
1 parent 163a38d commit ed79d82
Show file tree
Hide file tree
Showing 50 changed files with 1,395 additions and 1,393 deletions.
1 change: 1 addition & 0 deletions .vitepress/config/en.mts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { DefaultTheme, UserConfig } from "vitepress";

export default (): UserConfig<DefaultTheme.Config> => ({
title: "Reading vuejs/core-vapor",
titleTemplate: '| Reading vuejs/core-vapor',
description: "Reading vuejs/core-vapor",
themeConfig: {
sidebar: [
Expand Down
1 change: 1 addition & 0 deletions .vitepress/config/ja.mts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { DefaultTheme, UserConfig } from "vitepress";

export default (): UserConfig<DefaultTheme.Config> => ({
title: "vuejs/core-vapor を読む",
titleTemplate: '| vuejs/core-vapor を読む',
description: "vuejs/core-vapor を読む",
themeConfig: {
sidebar: [
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"textlint": "^14.2.0",
"textlint-rule-preset-ja-spacing": "^2.4.3",
"textlint-rule-prh": "^6.0.0",
"vitepress": "^1.3.4",
"vitepress": "^1.5.0",
"xmlhttprequest": "^1.8.0"
}
}
1,088 changes: 544 additions & 544 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

46 changes: 23 additions & 23 deletions src/compiler-overview-codegen.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,48 +10,48 @@ By understanding this, you'll have a substantial grasp of the compiler.

The implementation of codegen (generator) can be found in the following areas:

- [packages/compiler-vapor/src/generate.ts](https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts)
- [packages/compiler-vapor/src/generators](https://github.com/vuejs/core-vapor/tree/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators)
- [packages/compiler-vapor/src/generate.ts](https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts)
- [packages/compiler-vapor/src/generators](https://github.com/vuejs/vue-vapor/tree/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators)

The structure is similar to the transformer; `generate.ts` implements the `generate` function and `CodegenContext`, and the `generators` directory contains code generation functions for each node.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L99-L103
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L99-L103

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L22
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L22

As usual, let's read about `CodegenContext` as needed while following the code generation of the component.

## generate

First, let's enter the `generate` function.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L99-L103
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L99-L103

The code is appended sequentially using the `push` function obtained from `buildCodeFragment`.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L104
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L104

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/utils.ts#L30-L35
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/utils.ts#L30-L35

First, we push the signature of the render function.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L108
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L108

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L113
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L113

Then, we generate code from the IR using `genBlockContent`.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L116-L118
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L116-L118

Since the declarations of templates and import statements are done outside the render function, these are generated as `preamble` and added to the beginning of the code.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L126-L129
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L126-L129

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L136-L139
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L136-L139

This `code` becomes the final code.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L141-L148
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generate.ts#L141-L148

Now, let's read `genBlockContent`.

Expand All @@ -69,35 +69,35 @@ https://github.com/vitejs/vite-plugin-vue/blob/8d5a270408ff213648cda2a8db8f6cd63

## genBlockContent

The implementation is located in [packages/compiler-vapor/src/generators/block.ts](https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/block.ts).
The implementation is located in [packages/compiler-vapor/src/generators/block.ts](https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/block.ts).

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/block.ts#L36-L41
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/block.ts#L36-L41

We take out each child from `block.dynamic.children` and generate code.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/block.ts#L51-L53
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/block.ts#L51-L53

`block.dynamic.children` is generated in `transformChildren`, and its content directly includes `childContext.dynamic`.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/transforms/transformChildren.ts#L36
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/transforms/transformChildren.ts#L36

Looking again at what information besides flags is included:

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/ir/index.ts#L246-L252
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/ir/index.ts#L246-L252

We can see that it includes information like `id` and template index.\
Using this information, we generate code with `genChildren`.

## genChildren

`genChildren` is implemented in [packages/compiler-vapor/src/generators/template.ts](https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/template.ts).
`genChildren` is implemented in [packages/compiler-vapor/src/generators/template.ts](https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/template.ts).

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/template.ts#L18-L23
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/template.ts#L18-L23

This function generates code like `const n${id} = t${template}()`.\
In this case, it generates code like `const n0 = t0()`.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/template.ts#L29-L32
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/template.ts#L29-L32

Here, code like `nextSibling` and `firstChild`, which will appear later, is also generated. (You can skip this for now.)

Expand All @@ -108,13 +108,13 @@ Once the code for children is generated.
Next, we generate operations and effects.\
These haven't appeared yet, but they involve generating code for things like text updates and event handler registrations.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/block.ts#L55-L56
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/block.ts#L55-L56

Finally, we generate the `return` statement.

We map over `block.returns`, generate identifiers like `n${idx}`, and generate the `return` statement.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/block.ts#L58-L65
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/generators/block.ts#L58-L65

---

Expand Down
14 changes: 7 additions & 7 deletions src/compiler-overview-ir.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ We'll first look at the `IR` before proceeding to read the source code of the `t
While the `SFCDescriptor` and `AST` were essentially structured versions of the user's (web application developer's) input code, the `IR` can be thought of as the "structured version of the output code." \
The definition of `IR` can be found in `ir/index.ts`.

[packages/compiler-vapor/src/ir/index.ts](https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/ir/index.ts)
[packages/compiler-vapor/src/ir/index.ts](https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/ir/index.ts)

Recall the compiler output of the small component we read at the beginning:

Expand All @@ -34,7 +34,7 @@ We can check this by inserting logs into our local compiler.

There's a `transform` function around the following area, so let's output the `ir` after the transform.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/compile.ts#L76-L89
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/compile.ts#L76-L89

```json
{
Expand Down Expand Up @@ -178,13 +178,13 @@ First, there's a `RootIRNode` at the root. This is the root of the IR. \
This `RootIRNode` contains information such as `node`, `template`, and `block`. \
The `node` is the `RootNode` of the AST.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/ir/index.ts#L56-L64
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/ir/index.ts#L56-L64

Then, the `block` contains a `BlockIRNode`, which represents a `Block`, the unit of elements handled in Vapor.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/ir/index.ts#L63
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/ir/index.ts#L63

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/ir/index.ts#L47-L54
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-vapor/src/ir/index.ts#L47-L54

Here, let's explain a bit about `Block`.

Expand All @@ -195,7 +195,7 @@ It's similar to a `VNode` (virtual DOM node) in non-Vapor Mode.

The definition of `Block` is in `runtime-vapor`, so let's take a look.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/runtime-vapor/src/apiRender.ts#L26-L31
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/runtime-vapor/src/apiRender.ts#L26-L31

Looking at this, you can get an idea of what a `Block` is. \
A `Block` takes a Node (DOM Node), a Fragment, a Component, or an array of Blocks. \
Expand All @@ -211,7 +211,7 @@ const n0 = t0();
Here, `n0` becomes a Block, which is a Node (Element). \
We'll look at this in more detail when we explain the runtime, but let's briefly look at the `template` function.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/runtime-vapor/src/dom/template.ts#L2-L11
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/runtime-vapor/src/dom/template.ts#L2-L11

It simply inserts the template into `innerHTML` and returns its `firstChild`. \
In other words, this is just an `ElementNode`.
Expand Down
28 changes: 14 additions & 14 deletions src/compiler-overview-sfc.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,31 @@ From here, let's look at the details of each part explained earlier.

Since the parser for SFC is part of the SFC compiler, it is implemented in `compiler-sfc`.

[packages/compiler-sfc](https://github.com/vuejs/core-vapor/tree/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc)
[packages/compiler-sfc](https://github.com/vuejs/vue-vapor/tree/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc)

## SFCDescriptor

First, the object called `SFCDescriptor`, which is the result of parsing, is an object that holds information about the SFC. \
It includes the filename, template information, script information, style information, etc.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L76-L102
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L76-L102

The template, script, and style each inherit from an object called `SFCBlock`, and this `SFCBlock` contains information such as `content`, which represents its content, `attrs`, which represents attributes like lang, setup, scoped, etc., and `loc`, which indicates where in the whole SFC it is located.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L39-L47
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L39-L47

The `template` is represented by an object called `SFCTemplateBlock`, which contains the AST explained earlier.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L49-L52
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L49-L52

Similarly, the script is represented by an object called `SFCScriptBlock`. \
This includes a flag indicating whether it is setup or not, information about the modules being imported, and the AST of the script (JS, TS) that is the content of the block.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L54-L68
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L54-L68

Similarly, the style is represented by an object called `SFCStyleBlock`.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L70-L74
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L70-L74

That's roughly the outline of `SFCDescriptor`.

Expand Down Expand Up @@ -148,16 +148,16 @@ _Note: Some parts are omitted._

The implementation of the parser is the `parse` function below.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L126-L129
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L126-L129

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L104-L107
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L104-L107

The `source` contains the string of the SFC. \
It parses that string and returns an `SFCDescriptor`.

First, it parses the entire SFC using the template parser.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L162-L169
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L162-L169

The `compiler.parse` in `compiler` comes from options, and this is actually the template parser in `compiler-core`.

Expand All @@ -174,19 +174,19 @@ In other words, `compiler-core` is in a more general position rather than implem

Through this parsing process, we can get the rough structure of `template`, `script`, `style`, etc., so we then branch and perform detailed parsing for each.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L184-L185
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L184-L185

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L215
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L215

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L229
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L229

In the detailed parts, we process to generate each Block that inherits from the earlier `SFCBlock`. \
(Basically, we're just calling a formatting function called `createBlock` and doing error handling, so we'll omit the code.)

After that, we generate source maps, etc.

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L285-L302
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L285-L302

https://github.com/vuejs/core-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L377-L384
https://github.com/vuejs/vue-vapor/blob/30583b9ee1c696d3cb836f0bfd969793e57e849d/packages/compiler-sfc/src/parse.ts#L377-L384

Surprisingly, this completes the parsing process of the SFC.
Loading

0 comments on commit ed79d82

Please sign in to comment.