feat(loader): add webpack fluent-vue-loader

Loader allows using <i18n> section in Vue single file components to colocate localization messages with rest of component Another benefit of loader is that localization messages can be loaded asynchroniosly if component is loaded asynchroniosly
fluent-vue · Jul 12, 2020 · 69e5423 · 69e5423
1 parent 5544202
commit 69e5423
Show file tree

Hide file tree

Showing 17 changed files with 6,063 additions and 96 deletions.
diff --git a/.travis.yml b/.travis.yml
diff --git a/examples/typescript/src/App.vue b/examples/typescript/src/App.vue
@@ -4,14 +4,12 @@
 
     <h4>$t method</h4>
     <div>
-      <span>
-        {{ $t('greeting', { name: 'World' }) }}
-      </span>
+      <span>{{ $t('greeting', { name: 'World' }) }}</span>
     </div>
 
     <h4>$ta method</h4>
     <div>
-     <span v-bind="$ta('greeting')">{{ $t('greeting', { name: 'World' }) }}</span>
+      <span v-bind="$ta('greeting')">{{ $t('greeting', { name: 'World' }) }}</span>
     </div>
 
     <h4>Directive</h4>
@@ -31,17 +29,23 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue'
+import Vue from 'vue'
 
-  export default Vue.extend({
-    name: 'typescript',
-    computed: {
-      t () {
-        return this.$t('user-name')
-      },
-      ta () {
-        return this.$ta('greeting')
-      }
-    }
-  })
+export default Vue.extend({
+  name: 'typescript',
+  computed: {
+    username() {
+      return this.$t('user-name')
+    },
+    greeting() {
+      return this.$ta('greeting')
+    },
+  },
+})
 </script>
+
+<style lang="scss">
+.test {
+  display: block;
+}
+</style>
diff --git a/package.json b/package.json
@@ -50,6 +50,8 @@
     "conventional-changelog-cli": "^2.0.31",
     "csstype": "^2.6.8",
     "enquirer": "^2.3.2",
+    "eslint": "^7.3.1",
+    "eslint-plugin-vue": "^6.2.2",
     "execa": "^2.0.4",
     "fs-extra": "^8.1.0",
     "jest": "^25.2.3",

diff --git a/packages/fluent-vue-loader/example/package.json b/packages/fluent-vue-loader/example/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "fluent-vue-loader-example",
+  "scripts": {
+    "build": "webpack",
+    "dev": "webpack-dev-server"
+  },
+  "devDependencies": {
+    "babel-loader": "^8.1.0",
+    "html-webpack-plugin": "^4.3.0",
+    "vue-loader": "^15.9.1",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "vue": "^2.6.11"
+  }
+}
diff --git a/packages/fluent-vue-loader/example/src/App.vue b/packages/fluent-vue-loader/example/src/App.vue
@@ -0,0 +1,35 @@
+<template>
+  <form>
+    <label>{{ $t('language') }}</label>
+    <select v-model="locale">
+      <option value="en">en</option>
+      <option value="ja">ja</option>
+    </select>
+
+    <p>{{ $t('hello') }}</p>
+  </form>
+</template>
+
+<script>
+export default {
+name: 'App',
+data () {
+return {
+locale: 'en'
+}
+},
+  created () {
+    console.log(this)
+  }
+}
+</script>
+
+<i18n locale="en">
+  language = English
+  hello = Hello
+</i18n>
+
+<i18n locale="uk">
+  language = Ukraininan
+  hello = Hello
+</i18n>
diff --git a/packages/fluent-vue-loader/example/src/index.html b/packages/fluent-vue-loader/example/src/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>
diff --git a/packages/fluent-vue-loader/example/src/index.js b/packages/fluent-vue-loader/example/src/index.js
@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import FluentVue from '../../../fluent-vue'
+import App from './App.vue'
+
+const fluent = new FluentVue({
+  locale: 'en',
+  bundles: [],
+})
+
+Vue.use(FluentVue)
+
+const app = new Vue({
+  fluent,
+  render(h) {
+    return h(App)
+  },
+})
+
+app.$mount('#app')
diff --git a/packages/fluent-vue-loader/example/webpack.config.js b/packages/fluent-vue-loader/example/webpack.config.js
@@ -0,0 +1,38 @@
+const path = require('path')
+const { VueLoaderPlugin } = require('vue-loader')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    main: path.resolve(__dirname, './src/index.js'),
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].js',
+    publicPath: '/dist/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+      },
+      {
+        resourceQuery: /blockType=i18n/,
+        type: 'javascript/auto',
+        use: [path.resolve(__dirname, '../dist/fluent-vue-loader.cjs.js')],
+      },
+    ],
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new HtmlWebpackPlugin({
+      template: 'src/index.html',
+    }),
+  ],
+}