Closes #649

scriptPilot · Sep 1, 2017 · fe4e32e · fe4e32e
1 parent 8dc073b
commit fe4e32e
Show file tree

Hide file tree

Showing 16 changed files with 283 additions and 74 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,11 @@
 
 <br />
 
-## Next version
+### Version 1.13
+
+Released on 2017-09-02
+
+- [x] [#649 - Use language files for multilingual apps](https://github.com/scriptPilot/app-framework/issues/649)
 
 ### Version 1.12.1
 

diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
@@ -25,6 +25,7 @@ For any open question, feature request or bug, please use our [issue list](https
   - [Routing](docs/routing.md)
   - [Global data object](docs/data-object.md)
   - [sortObject function](docs/sort-object.md)
+  - [Language files](docs/language-files.md)
   - [Images](docs/images.md)
   - [Icon fonts](docs/icon-fonts.md)
   - [Modules and scripts](docs/modules-and-scripts.md)

diff --git a/client/app.js b/client/app.js
@@ -78,6 +78,13 @@ let easierGlobalDataObject = {
     }
   }
 }
+let easierLanguagePattern = {
+  methods: {
+    $lang (key, data = null) {
+      return this.$root.getLanguagePattern(key, data)
+    }
+  }
+}
 
 let mixins = {}
 mixins.loadConfig = {
@@ -1129,6 +1136,31 @@ mixins.manageState = {
     }
   }
 }
+mixins.languagePattern = {
+  data: {
+    languages: [],
+    languagePattern: {}
+  },
+  created () {
+    this.languages = process.env.LANGUAGES.split(',')
+    this.languages.forEach((lang) => {
+      this.languagePattern[lang] = require(process.env.APP_ROOT_FROM_SCRIPTS + 'lang/' + lang + '.json')
+    })
+  },
+  methods: {
+    getLanguagePattern (key, data) {
+      const requestedText = this.languagePattern[this.language] ? this.languagePattern[this.language][key] : undefined
+      const defaultText = this.languagePattern[this.config.defaultLanguage] ? this.languagePattern[this.config.defaultLanguage][key] : undefined
+      let text = requestedText || defaultText || (data !== null ? '{{' + key + ', ' + JSON.stringify(data) + '}}' : '{{' + key + '}}')
+      if (data !== null) {
+        for (let item in data) {
+          text = text.replace(new RegExp('\\{\\{' + item + '\\}\\}', 'g'), data[item])
+        }
+      }
+      return text
+    }
+  }
+}
 
 function initF7VueApp () {
   // Load Vue
@@ -1146,6 +1178,7 @@ function initF7VueApp () {
   vue.component('image-uploader', require('./image-uploader.vue'))
   // Use global mixins
   vue.mixin(easierGlobalDataObject)
+  vue.mixin(easierLanguagePattern)
   if (config.restoreComponentData) {
     vue.mixin(manageComponentData)
   }

diff --git a/config-scheme.json b/config-scheme.json
@@ -3,10 +3,14 @@
     "type": "string",
     "default": "My App"
   },
-  "language": {
+  "defaultLanguage": {
     "regexp": "/^[a-z]{2}$/",
     "default": "en"
   },
+  "defaultLanguageFallback": {
+    "type": "boolean",
+    "default": false
+  },
   "theme": {
     "allow": ["ios", "material", "ios-material", "material-ios"],
     "default": "material"

diff --git a/demo/config.json b/demo/config.json
@@ -1,6 +1,7 @@
 {
   "title": "App Framework",
-  "language": "en",
+  "defaultLanguage": "en",
+  "defaultLanguageFallback": false,
   "theme": "material-ios",
   "color": "indigo",
   "layout": "default",

diff --git a/demo/lang/en.json b/demo/lang/en.json
@@ -0,0 +1 @@
+{}
diff --git a/demo/pages/home.vue b/demo/pages/home.vue
@@ -75,6 +75,9 @@
           let text = this.$$(e.target).find('option[value=' + e.target.value + ']').text()
           this.$$(e.target).parent().find('.item-after').html(text)
         }.bind(this), 0)
+      },
+      testAlert () {
+        window.f7.alert(this.$lang('message', {username: 'Bugs Bunny'}), this.$lang('subject'))
       }
     }
   }

diff --git a/docs/folder-structure.md b/docs/folder-structure.md
@@ -9,6 +9,7 @@ The following project folder will be created by default:
 ```
 ├── app/                        # App source folder
 │   ├── images/                 # App images
+│   ├── lang/                   # App language files
 │   ├── pages/                  # App page components
 │   ├── app.vue                 # App main component
 │   ├── config.js               # App configuration

diff --git a/docs/language-files.md b/docs/language-files.md
@@ -0,0 +1,40 @@
+# Languages Files
+
+> This page is part of the [App Framework Documentation](../DOCUMENTATION.md)
+
+<br />
+
+Languages files provide a simple way to make your app multi-lingual.
+
+## Storage
+
+Language files should be saved in folder *app/lang*. They should be JSON files with plain key:string pairs.
+
+Example `lang/de.json`:
+
+```
+{
+  "emailSubject": "Greetings from Hamburg",
+  "emailBody": "Hello {{username}}!"
+}
+```
+
+After you added a new language file, the development server should be restarted.
+
+## Usage
+
+In templates:
+- `{{$lang('emailSubject')}}`
+- `{{$lang('emailBody', {username: 'Bugs Bunny'})`
+
+In scripts:
+- `this.$lang('emailSubject')`
+- `this.$lang('emailBody', {username: 'Bugs Bunny'})`
+
+## Default language
+
+To be configured, for example `"defaultLanguage": "en"`. This file is the master file to which all other language files are compared. If there are more keys than in the default language file, an error will be shown on any build command.
+
+## Default language fallback
+
+To be configured, by default `"defaultLanguageFallback": false`. If set to false, an error will be shown if any key is missing compared to the default language file on any build command. If set to true and a key is missing in a secondary language file, the default language is used.
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "recursive-readdir-sync": "^1.0.6",
     "semver": "^5.3.0",
     "shelljs": "^0.7.4",
+    "sort-keys-recursive": "^2.0.1",
     "standard": "^8.6.0",
     "to-ico": "^1.1.3",
     "underscore": "^1.8.3",

diff --git a/scripts/build.js b/scripts/build.js
@@ -276,60 +276,62 @@ function updatePreloader (callback) {
 
 // Run steps
 fixCode(function () {
-  cmd(__dirname, 'node update-routes', function () {
-    if (mode !== 'dev') {
-      // Update version in package.json
-      let pkg = fs.readJsonSync(abs(env.proj, 'package.json'))
-      pkg.version = ver.inc(pkg.version, mode)
-      fs.writeJsonSync(abs(env.proj, 'package.json'), pkg)
-      env.pkg.version = pkg.version
-      require.cache = {}
-    }
-    updateLicense(function () {
-      updateDocumentation(function () {
-        cmd(__dirname, 'node update-ignore-files', function () {
-          fs.emptyDir(abs(env.cache, 'build'), function (err) {
-            if (err) {
-              alert('Failed to empty build folder in cache.', 'issue')
-            } else {
-              buildWebpack(function () {
-                cmd(__dirname, 'node create-icons', function () {
-                  manageIcons(function () {
-                    copyFirebaseFiles(function () {
-                      updatePreloader(function () {
-                        // Dev build
-                        if (mode === 'dev') {
-                          alert('Development build done.')
-                        // Pruduction build
-                        } else {
-                          alert('Build folder update ongoing - please wait ...')
-                          // Empty existing build folder
-                          fs.emptyDir(abs(env.proj, 'build'), function (err) {
-                            if (err) {
-                              alert('Clean-up the existing build folder failed.', 'issue')
-                            } else {
-                              // Copy files
-                              fs.copy(abs(env.cache, 'build'), abs(env.proj, 'build'), function (err) {
-                                if (err) {
-                                  alert('Build folder update failed.', 'issue')
-                                } else {
-                                  compressImages(function () {
-                                    // Create snapshot
-                                    cmd(__dirname, 'node create-snapshot --name "build-' + env.pkg.version + '"', function () {
-                                      alert('Build process done for version ' + env.pkg.version + '.')
+  cmd(__dirname, 'node checkLanguageFiles', function () {
+    cmd(__dirname, 'node update-routes', function () {
+      if (mode !== 'dev') {
+        // Update version in package.json
+        let pkg = fs.readJsonSync(abs(env.proj, 'package.json'))
+        pkg.version = ver.inc(pkg.version, mode)
+        fs.writeJsonSync(abs(env.proj, 'package.json'), pkg)
+        env.pkg.version = pkg.version
+        require.cache = {}
+      }
+      updateLicense(function () {
+        updateDocumentation(function () {
+          cmd(__dirname, 'node update-ignore-files', function () {
+            fs.emptyDir(abs(env.cache, 'build'), function (err) {
+              if (err) {
+                alert('Failed to empty build folder in cache.', 'issue')
+              } else {
+                buildWebpack(function () {
+                  cmd(__dirname, 'node create-icons', function () {
+                    manageIcons(function () {
+                      copyFirebaseFiles(function () {
+                        updatePreloader(function () {
+                          // Dev build
+                          if (mode === 'dev') {
+                            alert('Development build done.')
+                          // Pruduction build
+                          } else {
+                            alert('Build folder update ongoing - please wait ...')
+                            // Empty existing build folder
+                            fs.emptyDir(abs(env.proj, 'build'), function (err) {
+                              if (err) {
+                                alert('Clean-up the existing build folder failed.', 'issue')
+                              } else {
+                                // Copy files
+                                fs.copy(abs(env.cache, 'build'), abs(env.proj, 'build'), function (err) {
+                                  if (err) {
+                                    alert('Build folder update failed.', 'issue')
+                                  } else {
+                                    compressImages(function () {
+                                      // Create snapshot
+                                      cmd(__dirname, 'node create-snapshot --name "build-' + env.pkg.version + '"', function () {
+                                        alert('Build process done for version ' + env.pkg.version + '.')
+                                      })
                                     })
-                                  })
-                                }
-                              })
-                            }
-                          })
-                        }
+                                  }
+                                })
+                              }
+                            })
+                          }
+                        })
                       })
                     })
                   })
                 })
-              })
-            }
+              }
+            })
           })
         })
       })

diff --git a/scripts/checkLanguageFiles.js b/scripts/checkLanguageFiles.js
@@ -0,0 +1,76 @@
+// Purpose: Check language files, compare to default language file and sort each file by keys
+
+// Load modules
+const env = require('./env')
+const alert = require('./alert')
+const found = require('./found')
+const fs = require('fs-extra')
+const path = require('path')
+const abs = require('path').resolve
+const rec = require('recursive-readdir-sync')
+const sort = require('sort-keys-recursive')
+
+// Define language folder
+const langFolder = abs(env.app, 'lang')
+
+// Check if default language file exists
+const defaultLangFile = abs(langFolder, env.cfg.defaultLanguage + '.json')
+if (!found(defaultLangFile)) {
+  alert(`Default language file lang/${env.cfg.defaultLanguage}.json not found.`, 'error')
+}
+
+// Check if all language files are valid and sort each by key
+const langPatterns = {}
+try {
+  const files = rec(langFolder)
+  files.forEach((file) => {
+    const patterns = fs.readJsonSync(file)
+    const language = path.basename(file).slice(0, -5)
+    langPatterns[language] = patterns
+    fs.writeJsonSync(file, sort(patterns), { spaces: 2 })
+  })
+} catch (err) {
+  alert('Failed to read language files.', 'issue')
+}
+
+// Check all files if they have flat key:string pairs
+for (let lang in langPatterns) {
+  let errors = 0
+  for (let key in langPatterns[lang]) {
+    if (typeof langPatterns[lang][key] !== 'string') {
+      errors++
+    }
+  }
+  if (errors > 0) {
+    alert(`Language file lang/${lang}.json should contain plain key:string pairs.`, 'error')
+  }
+}
+
+// Compare languages files to default language file
+// Loop all languages
+for (let lang in langPatterns) {
+  // It's not the default language
+  if (lang !== env.cfg.defaultLanguage) {
+    const diffs = []
+    // Loop all items of the default language
+    if (env.cfg.defaultLanguageFallback === false) {
+      for (let key in langPatterns[env.cfg.defaultLanguage]) {
+        // Missing items
+        if (langPatterns[lang][key] === undefined) {
+          diffs.push(`"${key}" is missing`)
+        }
+      }
+    }
+    // Loop all items of the second language
+    for (let key in langPatterns[lang]) {
+      // Too much items
+      if (langPatterns[env.cfg.defaultLanguage][key] === undefined) {
+        diffs.push(`"${key}" is too much`)
+      }
+    }
+    // Differences found
+    if (diffs.length > 0) {
+      alert(`Language file lang/${lang}.json is different to the default one:\n- ` + diffs.join('\n- '), 'error')
+    }
+  }
+}
diff --git a/scripts/dev.js b/scripts/dev.js
@@ -92,13 +92,15 @@ function checkFrameworkUpdates (callback) {
 alert('Development server preparation ongoing - please wait ...')
 fixCode(function () {
   checkFrameworkUpdates(function () {
-    cmd(__dirname, 'node update-routes', function () {
-      cmd(__dirname, 'node create-icons', function () {
-        cmd(__dirname, 'node firebase --database --storage --version dev', function () {
-          startServer(function () {
-            let uri = 'http://localhost:' + env.cfg.devServerPort
-            opn(uri)
-            alert('Development server startet at ' + uri + '.\n\nTo be stopped with "CTRL + C".')
+    cmd(__dirname, 'node checkLanguageFiles', function () {
+      cmd(__dirname, 'node update-routes', function () {
+        cmd(__dirname, 'node create-icons', function () {
+          cmd(__dirname, 'node firebase --database --storage --version dev', function () {
+            startServer(function () {
+              let uri = 'http://localhost:' + env.cfg.devServerPort
+              opn(uri)
+              alert('Development server startet at ' + uri + '.\n\nTo be stopped with "CTRL + C".')
+            })
           })
         })
       })