Vue.js Extend with Compiler

38bee248082f6071230de65e9d74a944?s=47 kazupon
September 15, 2017

Vue.js Extend with Compiler

38bee248082f6071230de65e9d74a944?s=128

kazupon

September 15, 2017
Tweet

Transcript

  1. Vue.js Extend with Compiler ToKyotoJS 2017-09-15 @kazupon

  2. Who are you ?

  3. kazupon Vue.js Core Team Vue.js japan users group organizer vue-i18n,

    vue docs maintainer storybook vue support member CUUSOO SYSTEM CTO @kazu_pon kazupon
  4. [PR]

  5. 2017-10-04

  6. Vue.js v-meetup #5 https://vuejs-meetup.connpass.com/event/65442/

  7. Nuxt.js at Genba Specials! 1.0 coming soon !? Nuxt.js!! Nuxt.js!!

  8. We are hiring!! 
 Let’s building Open Innovation Platform!! http://www.cuusoo.co.jp

  9. Introduction

  10. Vue 2.x Rendering Engine Virtual DOM

  11. • Declarative • Template Flexible Rendering Intuitive, Designer friendly !!

  12. • Imperative • render function + hyperscript Flexible Rendering Programmatic,

    Powerful !!
  13. • (Declarative + Imperative ) / 2 ? • JSX

    Flexible Rendering
  14. However, Sometimes, we would like to …

  15. • e.g.
 Pre-Translation of i18n Extend with compiler! I’d like

    to Improve Performance !!
  16. Today: Speaking

  17. How to extend with compiler

  18. Overall flow

  19. Overall flow Compilation Phase Rendering Phase

  20. Hookable Compilation Phase AST Optimized AST About detail of Compilation

    Phase, See the bellow https://speakerdeck.com/kazupon/vue-dot-js-2-dot-0-server-side-rendering#23 Tokyo Node Festival 2016 : “Vue.js 2.0 αʔόαΠυϨϯμϦϯά” ({JS}) ({JS}) ({JS}) compile optimize generate Hooks Hooks Optimize Keys HTML Parser Optimizer Code Generator
  21. How to compile with yourself

  22. • Vue.compile • vue-template-compiler
 Provide API or package

  23. • Full build only, Core built-in
 https://unpkg.com/vue • Generate render,

    staticRenderFns function Vue.compile
  24. • Full build only, Core built-in
 https://unpkg.com/vue • Generate render,

    staticRenderFns function Vue.compile Damn…
  25. • Vue Compiler Package
 https://www.npmjs.com/package/vue-template-compiler • No Vue Runtime, Vue

    Compiler only! • Need to install NPM vue-template-compiler npm install -D vue-template-compiler
  26. • Provide some APIs • compiler.compile(template, [options]) • compiler.compileToFunctions(template) •

    compiler.ssrCompile(template, [options]) • compiler.ssrCompileToFunction(template) • compiler.parseComponent(file, [options]) vue-template-compiler
  27. • Provide some APIs • compiler.compile(template, [options]) • compiler.compileToFunctions(template) •

    compiler.ssrCompile(template, [options]) • compiler.ssrCompileToFunction(template) • compiler.parseComponent(file, [options]) vue-template-compiler Bravo!
  28. Compiler options

  29. • modules • directives • preserveWhitespace We can specify the

    following options
  30. • An array of compiler module • compiler module type:

    `ModuleOptions` `modules` option
  31. Hooking of compiler module AST Optimized AST compile optimize generate

    HTML Parser Optimizer Code Generator compiler module preTransformNode transformNode postTransformNode staticKeys genData transformCode
  32. • An object where have pairs key-value • key: directive

    name • value: transform an AST node function `directives` option
  33. Hooking of directive AST Optimized AST compile optimize generate HTML

    Parser Optimizer directive1 directiveX directives Code Generator directive2 Call directive hooks before genData hooks
  34. Compilation Examples

  35. • Vue core (for web)
 https://github.com/vuejs/vue/tree/dev/src/platforms/web/compiler/modules • Weex (for native)


    https://github.com/vuejs/vue/tree/dev/src/platforms/weex/compiler/modules • vue-loader (assets <img>,<image> in-line)
 https://github.com/vuejs/vue-loader/tree/master/lib/template-compiler/ modules • vue-18n-extensions (pre-translation)
 https://github.com/kazupon/vue-i18n-extensions
 compiler module
  36. • Vue core (for web)
 https://github.com/vuejs/vue/tree/dev/src/platforms/web/compiler/directives • Weex (for native)


    https://github.com/vuejs/vue/tree/dev/src/platforms/weex/compiler/directives directive
  37. Tips

  38. • Vue official bundler libs(Internal used with it) • vue-loader

    : compilerModules • rollup-plugin-vue: compilerOptions Alternative: vue-template-compiler https://vuejs.github.io/rollup-plugin-vue/#/en/2.3/?id=template
  39. Conclusion

  40. Compilation hooks is very powerful! • Vue compiler provide compilation

    hooks • It's powerful to extend the library/plugins by Vue compiler
  41. Please well consider • However, In about Apps, don’t abuse

    • Your apps breaks down easily in order to depenpent vue compiler • If you’d like to use it, Please well consider
  42. One more thing …

  43. Maybe, Vue compiler evolve?

  44. Thanks!