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

State of Vue I18n

38bee248082f6071230de65e9d74a944?s=47 kazupon
February 27, 2021

State of Vue I18n

38bee248082f6071230de65e9d74a944?s=128

kazupon

February 27, 2021
Tweet

Transcript

  1. State of Vue I18n kazupon

  2. KAZUPON Vue.js Core Team Member Vue.js Japan User Group Organizer

    Creator of Vue I18n & Intlify @kazu_pon kazupon
  3. Working at Plaid,inc. One of the largest SaaS Company in

    Japan i18n of product `KARTE`
  4. Vue I18n

  5. What’s Vue I18n? • Internationalization for Vue.js plugin • Features

    • Translation • Pluralization • Datetime Format • Number Format • Translation per SFC • … and more!
  6. Official Tooling • Bundler middleware • webpack: @intlify/vue-i18n-loader • rollup:

    @intlify/rollup-plugin-vue-i18n • vite: @intlify/vite-plugin-vue-i18n
  7. Official Tooling • Vue CLI Plugin • @intlify/vue-cli-plugin-i18n $ vue

    add i18n Scaffolding Setup
  8. Official Tooling • ESLint Plugin • @intlify/eslint-plugin-vue-i18n

  9. Official Tooling • Vue Jest Processor • vue-i18n-jest • Vue

    I18n Extensions • @intlify/vue-i18n-extensions • Vue I18n Locale Message Tools • vue-i18n-locale-message • Intlify CLI • @intlify/cli
  10. Third Party Tooling • Nuxt I18n • Babel Edit •

    i18n Ally • IntlliJ IDEA Plugin • vue-i18n-extract
  11. Vue I18n stats • NPM (Feb 2021) • over 180

    releases • 34 Million downloads (total) • Used from over 15,000 packages • JSDelivr • 4 Million downloads / month
  12. Vue I18n stats • Used from over 5,200 Vue /

    Nuxt Apps (Feb, 2021) Vue Telescope
  13. Vue I18n Histories 2015 2016 2014 2017 2018 2019 2020

    Feb Vue v0.8 Oct Vue v1 Sep Vue v2 Sep Vue v3 May Vue I18n v0 Jan Vue I18n v1 June Vue I18n v2 Apr Vue I18n v3 May Vue I18n v4 Feb Vue I18n v5 Apr Vue I18n v6 May Vue I18n v7 June Vue I18n v8 Initial Release! Vue v1 Support! Vue v2 Support! Add many features! - i18n custom block - Datetime Format - Number Format - Component Interpolation - Custom format - SSR - TypeScript type definitions - … and more
  14. Vue I18n Current • Current Version • v8.22.4 • Stable

    version for Vue 2
  15. Vue I18n has been growing!

  16. … Today

  17. Finally

  18. Vue I18n v9 has been released!! 🎉 🎉 🎉

  19. Vue I18n v9

  20. V9 Development • Dec 20, 2019 • Released Vue 3

    initial alpha version • Jan 6, 2020 • Started Vue I18n v9 development repo: https://github.com/intlify/vue-i18n-next vue-i18n-next over 600 commits, 9 related tooling development • Feb, 2021 • Released Vue I18n v9!
  21. Full scratch implementation • The Why • Maintenance and enhancement

    has becoming very difficult … • By re-designing and re-writing, Vue I18n could get solidify foundation as an i18n library.
  22. Layered modules

  23. Layered modules • Structured with Monorepo packages vue-i18n @intlify/core @intlify/core-base

    @intlify/message- compiler @intlify/message- resolver @intlify/runtime Entry layer Core layer Utility layer
  24. Layered modules • Better maintainability • More bundle size shavable

    • More extensible • Expose APIs per package • Low-level i18n APIs: @intlify/core-base • Compiler APIs: @intlify/message-compiler
  25. Hybrid APIs

  26. Hybrid APIs • Composition API • Optimized for Vue 3

    Composition API • Legacy API • Almost Compatible v8.x API • Based on Low Level i18n API (@intlify/core-base) Low Level i18n API Composition API Legacy API
  27. Hybrid APIs • Example Composition API Legacy API

  28. Message Compiler

  29. Message Compiler • Compiler for Vue I18n Message Format •

    Scanner • Tokenizer • Parser • Transformer • Generator • Generate Message Function from Message
  30. Message Compiler • Compile Process ‘Hi, {name} !’ Tokenizer H

    i , { n a m e } ! Scanner scan & tokenize Hi, { name } ! Tokens Parser Hi, { name } ! syntax analysis type: text value: ‘Hi,’ type: named key: ‘name’ type: text value: ‘ !’ type: message items: […] AST Transformer type: text value: ‘Hi,’ type: named key: ‘name’ type: text value: ‘ !’ type: message items: […] walk & transform Pre-processed AST Generator walk & generate type: text value: ‘Hi,’ type: named key: ‘name’ type: text value: ‘ !’ type: message items: […] Message "function __msg__ (ctx) { … return _normalize([ \\"hi \\”, _interpolate(_named(\\”name\\")), \\” !\\" ]) }" Message Function
  31. Message Compiler • Can detect syntax errors at compilation •

    Report User-friendly error
  32. Message Compiler • Source-map Support

  33. Message Compiler • Expose Compiler API • Use-cases • Linter:

    @intlify/eslint-plugin-vue-i18n • CLI: @intlfiy/cli • … and depends on your idea!
  34. Pre-Compilation

  35. Pre-Compilation • Pre-compile locale messages by using official bundler middleware

    (e.g. @intlify/vue-i18n-loader) Pre-Compile yaml javascript
  36. Pre-Compilation • Improve App performance with reduce locale messages compilation

    costs String Case Pre-Compilation Case Reduce locale messages compilation costs!
  37. Vue DevTools Integration

  38. Vue Devtools Integration • Extend Component Inspector Local Scope Custom

    tag
  39. Vue Devtools Integration • i18n Resource Inspector Listed Scopes Inspect

    Selected Scope
  40. Vue Devtools Integration • Vue I18n Timeline • Events -

    missing - fallback - message-resolve - message-compilation - message-evaluation - compile-error
  41. Bundle Size Optimization

  42. Bundle Size Optimization • Vue I18n v9 different builds •

    global build: vue-i18n(.runtime).global(.prod).js • esm-browser build: vue-i18n(.runtime).esm-browser(.prod).js • esm-bundler build: vue-i18n(.runtime).esm-bundler.js • cjs build: vue-i18n.cjs(.prod).js
  43. Bundle Size Optimization • Runtime + Message Compiler vs. Runtime

    only • Runtime + Message Compiler (Default) vue-i18n.esm-bundler.js • Runtime Only vue-i18n.runtime.esm-bundler.js You can reduce message complier size!
  44. Bundle Size Optimization • Feature Flags • `__VUE_I18N_FULL_INSTALL__` • `true`

    (default): Vue I18n APIs + built-in components + directive • `false`: Vue I18n APIs • `__VUE_I18N_LEGACY_API__` • `true` (default): Legacy API + Composition API • `false`: Composition API
  45. Bundle Size Optimization • Case: vite-vue-i18n-starter `vendor.xxxx.js` • No Optimization

    (Full install / Full API / Runtime + Message Compiler) 27.83 KB • Full Optimization: (Composition API / Runtime) 22.00 KB Reduce bundle size about 20% with Tree-Shaking!
  46. New Toolings

  47. New Toolings • Vite Plugin • @intlify/vite-plugin-vue-i18n • Setup Vue

    3 Composition API + Vue I18n Composition API • Intlify CLI • @intlify/cli • `compile` command Locale messages pre-compilation
  48. Next Milestone “Beetle” Plan

  49. Message Format Syntax • Enhancement Syntax like ICU message format

    NOTE: This current syntax is still unstable
  50. Main Packages Improvement • vue-i18n • Type inference for TypeScript

    • Custom formatter • @intlify/core-base • Low level i18n APIs improvement • @intlify/message-resolver • pluggable resolver support
  51. Tooling Improvement • Bundler middleware • Monorepo management • ESLint

    Plugin • JSON / YAML parser performance • Vue I18n Processor • vue-jest@v5 support • Intlify CLI • Port from vue-i18n-locale-message
  52. … And • Provide IE 11 Compatibility Build • Move

    kazupon/vue-i18n repo to intlify org • vue-i18n-next codes to intlify/vue-i18n repo
  53. None
  54. https://intilfy.dev Intlify is a project that aims to improve Developer

    Experience in software internationalization. We will aim to improve the Developer Experience of internationalization by providing libraries, frameworks, and tools that break down barriers to internationalization. Mission “ ”
  55. • Vue I18n is part of Intlify project. • We'll

    be working on solving i18n problem while also working on the Vue ecosystem. • As Vue I18n is growing, Intlify project member wanted. • If you are interested in intlify, please ask me.
  56. Thanks! https://github.com/sponsors/kazupon