New Vue. New Compiler. Let's Unpack

It's a compiler talk. Wait! Let me tell you something before you walk away, the compilation of Vue template may appear some dark-art, but when you look under the hood, it is a series of simple coordinated steps. In this talk, we would dive deep into the simple steps and how they coordinate to build the compilation process.

Overview:

— Steps in Vue compilation - The Vue compiler
— The template compiler
— The parser and what goes into writing a parser?
— The optimizer and what can be optimized?
— The code generator
— Augmenting the template compiler
— Augmenting the Vue compiler - Use cases for compiler augmentation

Transcript

1. Let’s Unbox New Vue. New Compiler. New Vue. New Compiler.
2. Template Compiler SFC Compiler
3. Template Compiler
4. Template Compiler
5. Template Compiler
6. Template Compiler @vue/compiler-core @vue/compiler-dom
7. Template Compiler @vue/compiler-core @vue/compiler-dom @vue/compiler-ssr
8. Template Compiler SFC Compiler
9. SFC Compiler
10. Single File Component Compiler
11. SFC Compiler
12. SFC Compiler @vue/compiler-sfc vue-loader rollup-pluign-vue
13. SFC Compiler @vue/compiler-sfc vue-loader rollup-pluign-vue
14. Template Compiler SFC Compiler
15. Why should you care?
16. Escape Hatch in Unit Test data-test="*"
17. Escape Hatch in Unit Test data-test="*"
18. Escape Hatch in Unit Test data-test="*"
19. Escape Hatch in Unit Test data-test="*"
20. Escape Hatch in Unit Test Template Compiler data-test="*"
21. Escape Hatch in Unit Test data-test="*"
22. Head Meta in SSR <title>My Page</title>
23. Head Meta in SSR <title>My Page</title>
24. Head Meta in SSR <title>My Page</title>
25. Head Meta in SSR <title>My Page</title>
26. Head Meta in SSR <title>My Page</title>
27. Head Meta in SSR <title>My Page</title>
28. Head Meta in SSR <title>My Page</title> SFC Compiler
29. Head Meta in SSR <title>My Page</title>
31. Template Compiler
32. Parser Codegen Transformations Template Compiler
33. Parser
34. Parser
35. Parser
36. Parser
37. Parser
38. Parser
39. Parser
40. Parser
41. Parser
42. Parser
43. Parser
44. Parser
45. Parser
46. Parser
47. Parser
48. Parser
49. Parser
50. Parser
51. Parser
52. Parser @vue/compiler-core
53. Parser
54. Parser Codegen Transformations Template Compiler
55. Transformations
56. Transformations codegenAST = ƒ(parseAST)
57. Transformations
58. Transformations
59. Transformations
60. Transformations
61. Transformations
62. Transformations
63. Transformations
64. Transformations
65. Transformations
66. Transformations
67. Transformations
68. Parser Codegen Transformations Template Compiler
69. Codegen
70. Parser Codegen Transformations Template Compiler
71. Parser Codegen Transformations Template Compiler
72. Parser Codegen Transformations Template Compiler
73. Parser Codegen Transformations Template Compiler
74. Parser Codegen Transformations Template Compiler
75. Parser Codegen Transformations Template Compiler
76. Parser Codegen Transformations Template Compiler
77. Why should you care?
78. Escape Hatch in Unit Test data-test="*"
79. Escape Hatch in Unit Test data-test="*"
80. Escape Hatch in Unit Test data-test="*"
87. Escape Hatch in Unit Test data-test="*"
88. Escape Hatch in Unit Test data-test="*"
89. Escape Hatch in Unit Test data-test="*"
90. Escape Hatch in Unit Test data-test="*"
91. Head Meta in SSR <title>My Page</title>
92. Head Meta in SSR <title>My Page</title>
93. Head Meta in SSR <title>My Page</title>
94. Head Meta in SSR <title>My Page</title>
110. Head Meta in SSR <title>My Page</title>
111. Head Meta in SSR <title>My Page</title>
112. Head Meta in SSR <title>My Page</title>
113. Head Meta in SSR <title>My Page</title>
114. Head Meta in SSR <title>My Page</title>
116. How does the compiler work?
117. How does the compiler work? How you can customise it?
118. @znck0