Upgrade to Pro — share decks privately, control downloads, hide ads and more …

New Vue. New Compiler. Let's Unpack

1135c452bcb851741181b804cd184972?s=47 Rahul Kadyan
February 21, 2020

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

1135c452bcb851741181b804cd184972?s=128

Rahul Kadyan

February 21, 2020
Tweet

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>

  30. None
  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="*"

  81. None
  82. None
  83. None
  84. None
  85. None
  86. None
  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>

  95. None
  96. None
  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  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>

  115. None
  116. How does the compiler work?

  117. How does the compiler work? How you can customise it?

  118. @znck0