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. 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
  2. 4.
  3. 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
  4. 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
  5. 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
  6. 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!
  7. 30.
  8. 31.

    Hooking of compiler module AST Optimized AST compile optimize generate

    HTML Parser Optimizer Code Generator compiler module preTransformNode transformNode postTransformNode staticKeys genData transformCode
  9. 32.

    • An object where have pairs key-value • key: directive

    name • value: transform an AST node function `directives` option
  10. 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
  11. 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
  12. 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
  13. 37.
  14. 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
  15. 40.

    Compilation hooks is very powerful! • Vue compiler provide compilation

    hooks • It's powerful to extend the library/plugins by Vue compiler
  16. 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
  17. 44.