From e592c4958517ba065d997fc20a38ed9ef9a4b15e Mon Sep 17 00:00:00 2001
From: Adam Bullmer <psycodrumfreak@gmail.com>
Date: Thu, 21 Feb 2019 23:17:22 -0600
Subject: [PATCH] Added basic support for internationalization through browser
 APIs. Closes #24

---
 README.md                                           |  8 ++++++++
 generator/index.js                                  |  4 ++--
 .../base-app/public/__locales/en/messages.json      |  6 ++++++
 generator/template/base-app/src/manifest.json       |  5 +++--
 generator/template/options/src/options/App.vue      |  9 +++++++--
 .../template/popup/src/popup/router/pages/Index.vue | 13 ++++++-------
 .../src/standalone/router/pages/Index.vue           |  7 ++++++-
 7 files changed, 38 insertions(+), 14 deletions(-)
 create mode 100644 generator/template/base-app/public/__locales/en/messages.json

diff --git a/README.md b/README.md
index 02258e7..0414a03 100644
--- a/README.md
+++ b/README.md
@@ -201,6 +201,14 @@ module.exports = {
   }
   ```
 
+## Internationalization
+
+Some boilerplate for internationalization has been added. This follows the i18n ([chrome](https://developer.chrome.com/extensions/i18n)|[WebExtention](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n)) spec.
+Provided for you is the `default_locale` option in the manifest, and a `_locales` directory.
+There is some basic usage of it in the manifest, as well as in some of the boilerplate files.
+Since this is largely an out of the box solution provided by the browsers, it is heavily encouraged to utilize it.
+If you do not want to translate your app, simply delete the `public/_locales` directory, and no longer use the `browser.i18n` methods.
+
 ## Testing
 This library is following the standard styling of vue projects, and those are really the only tests to perform.
 
diff --git a/generator/index.js b/generator/index.js
index 998df4c..aaa2bf9 100644
--- a/generator/index.js
+++ b/generator/index.js
@@ -25,7 +25,7 @@ module.exports = (api, _options) => {
   }
 
   const appRootPath = process.cwd()
-  const { name } = require(path.join(appRootPath, 'package.json'))
+  const { name, description } = require(path.join(appRootPath, 'package.json'))
   const eslintConfig = { env: { webextensions: true } }
   const pkg = {
     private: true,
@@ -57,7 +57,7 @@ module.exports = (api, _options) => {
   }
 
   api.extendPackage(pkg)
-  api.render('./template/base-app', { name, ...options })
+  api.render('./template/base-app', { name, description, ...options })
 
   if (options.components.background) {
     api.render('./template/background', { name, ...options })
diff --git a/generator/template/base-app/public/__locales/en/messages.json b/generator/template/base-app/public/__locales/en/messages.json
new file mode 100644
index 0000000..633a51f
--- /dev/null
+++ b/generator/template/base-app/public/__locales/en/messages.json
@@ -0,0 +1,6 @@
+{
+  "extName": {
+    "message": "<%- name %>",
+    "description": "<%- description %>"
+  }
+}
diff --git a/generator/template/base-app/src/manifest.json b/generator/template/base-app/src/manifest.json
index ea9e160..07a9e96 100644
--- a/generator/template/base-app/src/manifest.json
+++ b/generator/template/base-app/src/manifest.json
@@ -1,8 +1,9 @@
 {
   "manifest_version": 2,
-  "name": "<%- name %>",
+  "name": "__MSG_extName__",
   "homepage_url": "http://localhost/",
   "description": "A Vue Browser Extension",
+  "default_locale": "en",
   "icons": {
     "16": "icons/16.png",
     "48": "icons/48.png",
@@ -25,7 +26,7 @@
     <%_ if (options.components.popup) { -%>
     "default_popup": "popup/popup.html",
     <%_ } -%>
-    "default_title": "<%- name %>",
+    "default_title": "__MSG_extName__",
     "default_icon": {
       "19": "icons/19.png",
       "38": "icons/38.png"
diff --git a/generator/template/options/src/options/App.vue b/generator/template/options/src/options/App.vue
index 74268c5..f59d8e8 100644
--- a/generator/template/options/src/options/App.vue
+++ b/generator/template/options/src/options/App.vue
@@ -1,12 +1,17 @@
 <template>
   <div>
-    <p>Hello world!</p>
+    <p>{{ defaultText }}</p>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  computed: {
+    defaultText() {
+      return <%- options.api %>.i18n.getMessage('extName');
+    }
+  }
 }
 </script>
 
diff --git a/generator/template/popup/src/popup/router/pages/Index.vue b/generator/template/popup/src/popup/router/pages/Index.vue
index a8d3713..84a28ec 100644
--- a/generator/template/popup/src/popup/router/pages/Index.vue
+++ b/generator/template/popup/src/popup/router/pages/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <p>Hello world!</p>
+  <h1>{{ defaultText }}</h1>
 </template>
 
 <script>
@@ -13,12 +13,11 @@ export default {
   },
   mounted () {
     <%- options.api %>.runtime.sendMessage({})
+  },
+  computed: {
+    defaultText() {
+      return <%- options.api %>.i18n.getMessage('extName');
+    }
   }
 }
 </script>
-
-<style scoped>
-p {
-  font-size: 20px;
-}
-</style>
diff --git a/generator/template/standalone/src/standalone/router/pages/Index.vue b/generator/template/standalone/src/standalone/router/pages/Index.vue
index 8757127..9faf682 100644
--- a/generator/template/standalone/src/standalone/router/pages/Index.vue
+++ b/generator/template/standalone/src/standalone/router/pages/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <p>Hello world!</p>
+  <p>{{ defaultText }}</p>
 </template>
 
 <script>
@@ -13,6 +13,11 @@ export default {
   },
   mounted () {
     <%- options.api %>.runtime.sendMessage({});
+  },
+  computed: {
+    defaultText() {
+      return <%- options.api %>.i18n.getMessage('extName');
+    }
   }
 }
 </script>