feat: support SSR (#60)

* feat: support SSR

* updates

* fix

Author: kazupon

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
   },
   rules: {
     'object-curly-spacing': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/member-delimiter-style': 'off',

README.md

@@ -12,31 +12,102 @@
 
 This library exports the following extensions:
 
+
 ## :star: Features
-- module: `v-t` custom directive compiler module for the following:
-  - `@vue/compiler-core` (`options` at `baseCompile` function)
-  - `@vue/compiler-dom` (`options` at `compile` function)
-  - `@vue/compiler-sfc` (`compilerOptions` at `compileTemplate` function)
-  - `vue-loader` (`compilerOptions` at `options`)
+
+- Server-side rendering for `v-t` custom directive
+- Pre-Translation
+
 
 ## :cd: Installation
 
 ```sh
 $ npm i --save-dev @intlify/vue-i18n-extensions@alpha
 ```
 
+
 ## :rocket: Extensions
 
-### module: `v-t` custom directive compiler module
-This module is `v-t` custom directive module for vue compilers. You can specify it.
+### Server-side rendering for `v-t` custom directive
+
+You can use tnrasform offered with this package, to support Server-side rendering for `v-t` custom directives.
+
+In order to use this feature, you need to specify to Vue compiler option.
+The following example that use `compile` of `@vue/compiler-ssr`:
+
+```js
+import * as runtimeDom from '@vue/runtime-dom'
+import { compile } from '@vue/compiler-ssr'
+import { defineComponent, createSSRApp } from 'vue'
+import { renderToString } from '@vue/server-renderer'
+import { createI18n, useI18n } from 'vue-i18n'
+import { transformVTDirective } from '@intlify/vue-i18n-extensions'
+
+// create i18n instance
+const i18n = createI18n({
+  locale: 'ja',
+  messages: {}
+})
+
+// get transform from  `transformVTDirective` function
+const transformVT = transformVTDirective()
+
+// compile your source
+const source = `<div v-t="{ path: 'dessert', locale: 'en', plural: 2, args: { name: 'banana' } }"/>`
+const { code } = compile(source, {
+  mode: 'function',
+  directiveTransforms: { t: transformVT } // <- you need to specify to `directiveTransforms` option!
+})
+
+// render functionalization
+const render = Function('require', 'Vue', code)(require, runtimeDom)
+
+// e.g. set render function to App component
+const App = defineComponent({
+  setup() {
+    return useI18n({
+      locale: 'en',
+      inheritLocale: false,
+      messages: {
+        en: {
+          apple: 'no apples | one apple | {count} apples',
+          banana: 'no bananas | {n} banana | {n} bananas',
+          dessert: 'I eat @:{name}!'
+        }
+      }
+    })
+  },
+  ssrRender: render
+})
+
+// create SSR app
+const app = createSSRApp(App)
+
+// install vue-i18n
+app.use(i18n)
+
+console.log(await renderToString(app))
+// output -> <div>I eat 2 bananas!</div>`
+```
+
+
+### Pre-Translation with using `v-t` custom directive
+
+You can pre-translation i18n locale messsages of vue-i18n.
+
+> :warning: NOTE: Only the scope of global i18n locale messages can be pre-translated !!
 
-The following example that use `compile` function of `@vue/compiler-dom`:
+> :warning: NOTE: Currently only `v-t` custom directive is supported !!
+
+In order to use this feature, you need to specify to Vue compiler option.
+The following example that use `compile` of `@vue/compiler-dom`:
 
 ```js
 import { compile } from '@vue/compiler-dom'
 import { createI18n } from 'vue-i18n'
-import { defineTransformVT } from '@intlify/vue-i18n-extensions'
+import { transformVTDirective } from '@intlify/vue-i18n-extensions'
 
+// create i18n instance
 const i18n = createI18n({
   locale: 'ja',
   messages: {
@@ -48,23 +119,24 @@ const i18n = createI18n({
     }
   }
 })
-const transformVT = defineTransformVT(i18n)
+
+// get transform from  `transformVTDirective` function, with `i18n` option
+const transformVT = transformVTDirective({ i18n })
 
 const { code } = compile(`<p v-t="'hello'"></p>`, {
   mode: 'function',
   hoistStatic: true,
   prefixIdentifiers: true,
-  directiveTransforms: { t: transformVT }
+  directiveTransforms: { t: transformVT } // <- you need to specify to `directiveTransforms` option!
 })
-console.log(codel)
-/* output -> 'hello'
-  const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
+console.log(code)
+/*
+  output ->
+    const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
 
-  const _hoisted_1 = { textContent: "こんにちは" }
-
-  return function render(_ctx, _cache) {
-    return (_openBlock(), _createBlock("p", _hoisted_1))
-  }
+    return function render(_ctx, _cache) {
+      return (_openBlock(), _createBlock(\\"div\\", null, \\"こんにちは！\\"))
+    }
 */
 ```
 
@@ -73,7 +145,7 @@ The following configration example of `vue-loader`:
 ```js
 const { VueLoaderPlugin } = require('vue-loader')
 const { createI18n } = require('vue-i18n')
-const { defineTransformVT } = require('@intlify/vue-i18n-extensions')
+const { transformVTDirective } = require('@intlify/vue-i18n-extensions')
 
 const i18n = createI18n({
   locale: 'ja',
@@ -86,7 +158,7 @@ const i18n = createI18n({
     }
   }
 })
-const transformVT = defineTransformVT(i18n)
+const transformVT = transformVTDirective(i18n)
 
 module.exports = {
   module: {
@@ -112,6 +184,16 @@ module.exports = {
 }
 ```
 
+You can specify the transform resulting from `transformVTDirective` in the compiler options for each package offered by vue-next, and tool chains:
+
+- `@vue/compiler-core` (`options` at `baseCompile` function)
+- `@vue/compiler-dom` (`options` at `compile` function)
+- `@vue/compiler-ssr` (`options` at `compile` function)
+- `@vue/compiler-sfc` (`compilerOptions` at `compileTemplate` function)
+- `vue-loader` (`compilerOptions` at `options`)
+- `rollup-plugin-vue`
+
+
 ## :copyright: License
 
 [MIT](http://opensource.org/licenses/MIT)

e2e/example.test.js

@@ -5,5 +5,6 @@ describe(`pre-compilation`, () => {
 
   test('rendering', async () => {
     await expect(page).toMatch('こんにちは、世界！')
+    await expect(page).toMatch('hello, world!')
   })
 })

example/App.vue

@@ -1,14 +1,17 @@
 <template>
   <p v-t="'hello'"></p>
+  <p v-t="{ path: hello, locale: 'en' }"></p>
 </template>
 
 <script>
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 export default {
   name: 'App',
   setup() {
-    return useI18n()
+    const hello = ref('hello')
+    return { hello, ...useI18n() }
   }
 }
 </script>

example/webpack.config.js

@@ -3,7 +3,7 @@ const { VueLoaderPlugin } = require('vue-loader')
 const { createI18n } = require('vue-i18n')
 const en = require('./locales/en.json')
 const ja = require('./locales/ja.json')
-const { defineTransformVT } = require('../lib/index')
+const { transformVTDirective } = require('../lib/index')
 
 const i18n = createI18n({
   locale: 'ja',
@@ -12,7 +12,7 @@ const i18n = createI18n({
     ja
   }
 })
-const transformVT = defineTransformVT(i18n)
+const transformVT = transformVTDirective(i18n)
 
 module.exports = {
   mode: 'development',
@@ -56,20 +56,6 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel-loader'
       }
-      /*,
-      {
-        resourceQuery: /blockType=i18n/,
-        type: 'javascript/auto',
-        use: [
-          {
-            loader: path.resolve(__dirname, '../lib/index.js'),
-            options: {
-              preCompile: true
-            }
-          }
-        ]
-      }
-      */
     ]
   },
   plugins: [new VueLoaderPlugin()]

package.json

@@ -37,6 +37,7 @@
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
     "@vue/compiler-sfc": "^3.0.0-rc.5",
+    "@vue/compiler-ssr": "^3.0.0-rc.5",
     "@vue/runtime-dom": "^3.0.0-rc.5",
     "@vue/server-renderer": "^3.0.0-rc.5",
     "babel-loader": "^8.1.0",

src/builder.ts

@@ -0,0 +1,123 @@
+import { isNumber } from './utils'
+
+/**
+ * Content Builder options
+ *
+ * @remarks
+ * options that creating a {@link ContentBuilder}
+ *
+ * @public
+ */
+export interface ContentBuilderOptions {
+  /**
+   * Intdent level of Builder
+   */
+  indentLevel?: number
+}
+
+/**
+ * Content Builder
+ *
+ * @public
+ */
+export interface ContentBuilder {
+  /**
+   * Indent level
+   * @defaultValue 0
+   */
+  readonly indentLevel: number
+  /**
+   * Content
+   */
+  readonly content: string
+  /**
+   * Add content
+   * @param content - additional content
+   */
+  push(content: string): void
+  /**
+   * Add line break
+   */
+  newline(): void
+  /**
+   * Add content with line break
+   * @param content - additional content
+   */
+  pushline(content: string): void
+  /**
+   * Indent content
+   * @param withNewLine - whether indent to be added without new line
+   */
+  indent(withoutNewLine?: boolean): void
+  /**
+   * DeIndent content
+   * @param withoutNewLine - whether deindent to be added without new line
+   */
+  deindent(withoutNewLine?: boolean): void
+}
+
+/**
+ * Create a Content Builder
+ *
+ * @param options - Content Builder options
+ *
+ * @returns A {@link ContentBuilder} instance
+ *
+ * @public
+ */
+export function createContentBuilder(
+  options: ContentBuilderOptions = {}
+): ContentBuilder {
+  let _indentLevel =
+    options.indentLevel != null && isNumber(options.indentLevel)
+      ? options.indentLevel
+      : 0
+  let _content = ''
+
+  function push(content: string): void {
+    _content += content
+  }
+
+  function _newline(n: number) {
+    push('\n' + `  `.repeat(n))
+  }
+
+  function newline() {
+    _newline(_indentLevel)
+  }
+
+  function pushline(content: string) {
+    push(content)
+    newline()
+  }
+
+  function indent(withoutNewLine?: boolean) {
+    if (withoutNewLine) {
+      ++_indentLevel
+    } else {
+      _newline(++_indentLevel)
+    }
+  }
+
+  function deindent(withoutNewLine?: boolean) {
+    if (withoutNewLine) {
+      --_indentLevel
+    } else {
+      _newline(--_indentLevel)
+    }
+  }
+
+  return {
+    get indentLevel(): number {
+      return _indentLevel
+    },
+    get content(): string {
+      return String(_content)
+    },
+    push,
+    newline,
+    pushline,
+    indent,
+    deindent
+  }
+}