From fab389e6241acf5eb0500e17972b90e8785199dd Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 12 Nov 2018 05:03:12 +0900
Subject: [PATCH] [Client] Stop generate scripts for each languages
Resolve #3172
---
gulpfile.ts | 8 ++++++++
package.json | 1 +
src/client/app/boot.js | 20 ++++++++++++--------
src/client/app/config.ts | 8 +++-----
webpack.config.ts | 8 +++-----
5 files changed, 27 insertions(+), 18 deletions(-)
diff --git a/gulpfile.ts b/gulpfile.ts
index 2b420f5fe8..7aa582abf9 100644
--- a/gulpfile.ts
+++ b/gulpfile.ts
@@ -5,6 +5,7 @@
import * as gulp from 'gulp';
import * as gutil from 'gulp-util';
import * as ts from 'gulp-typescript';
+const yaml = require('gulp-yaml');
const sourcemaps = require('gulp-sourcemaps');
import tslint from 'gulp-tslint';
const cssnano = require('gulp-cssnano');
@@ -39,6 +40,7 @@ gulp.task('build', [
'build:ts',
'build:copy',
'build:client',
+ 'locales',
'doc'
]);
@@ -192,6 +194,12 @@ gulp.task('build:client:pug', [
.pipe(gulp.dest('./built/client/app/'))
);
+gulp.task('locales', () =>
+ gulp.src('./locales/*.yml')
+ .pipe(yaml({ schema: 'DEFAULT_SAFE_SCHEMA' }))
+ .pipe(gulp.dest('./built/client/assets/locales/'))
+);
+
gulp.task('doc', () =>
gulp.src('./src/docs/**/*.styl')
.pipe(stylus())
diff --git a/package.json b/package.json
index 19b04debff..7732157192 100644
--- a/package.json
+++ b/package.json
@@ -129,6 +129,7 @@
"gulp-typescript": "4.0.2",
"gulp-uglify": "3.0.1",
"gulp-util": "3.0.8",
+ "gulp-yaml": "2.0.2",
"hard-source-webpack-plugin": "0.12.0",
"html-minifier": "3.5.21",
"http-signature": "1.2.0",
diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 0d5eefaea9..59278ff23c 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -3,15 +3,9 @@
* (ENTRY POINT)
*/
-/**
- * ドメインに基づいて適切なスクリプトを読み込みます。
- * ユーザーの言語およびモバイル端末か否かも考慮します。
- * webpackは介さないためrequireやimportは使えません。
- */
-
'use strict';
-(function() {
+(async function() {
// キャッシュ削除要求があれば従う
if (localStorage.getItem('shouldFlush') == 'true') {
refresh();
@@ -67,8 +61,18 @@
langs.includes(settings.device.lang)) {
lang = settings.device.lang;
}
+
+ window.lang = lang;
//#endregion
+ let locale = localStorage.getItem('locale');
+ if (locale == null) {
+ const locale = await fetch(`/assets/locales/${lang}.json`)
+ .then(response => response.json());
+
+ localStorage.setItem('locale', JSON.stringify(locale));
+ }
+
// Detect the user agent
const ua = navigator.userAgent.toLowerCase();
const isMobile = /mobile|iphone|ipad|android/.test(ua);
@@ -106,7 +110,7 @@
// Note: 'async' make it possible to load the script asyncly.
// 'defer' make it possible to run the script when the dom loaded.
const script = document.createElement('script');
- script.setAttribute('src', `/assets/${app}.${ver}.${lang}.js${salt}`);
+ script.setAttribute('src', `/assets/${app}.${ver}.js${salt}`);
script.setAttribute('async', 'true');
script.setAttribute('defer', 'true');
head.appendChild(script);
diff --git a/src/client/app/config.ts b/src/client/app/config.ts
index 637d643d8d..0374ff0f95 100644
--- a/src/client/app/config.ts
+++ b/src/client/app/config.ts
@@ -1,6 +1,4 @@
-declare const _LANG_: string;
-declare const _LANGS_: string;
-declare const _LOCALE_: { [key: string]: any };
+declare const _LANGS_: string[];
declare const _THEME_COLOR_: string;
declare const _COPYRIGHT_: string;
declare const _VERSION_: string;
@@ -15,9 +13,9 @@ export const hostname = address.hostname;
export const url = address.origin;
export const apiUrl = url + '/api';
export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + '/streaming';
-export const lang = _LANG_;
+export const lang = window.lang;
export const langs = _LANGS_;
-export const locale = _LOCALE_;
+export const locale = JSON.parse(localStorage.getItem('locale'));
export const themeColor = _THEME_COLOR_;
export const copyright = _COPYRIGHT_;
export const version = _VERSION_;
diff --git a/webpack.config.ts b/webpack.config.ts
index d924d2b5ff..b0d1a0d40f 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -30,7 +30,7 @@ const postcss = {
},
};
-module.exports = Object.keys(locales).map(lang => ({
+module.exports = {
entry: {
desktop: './src/client/app/desktop/script.ts',
mobile: './src/client/app/mobile/script.ts',
@@ -116,9 +116,7 @@ module.exports = Object.keys(locales).map(lang => ({
_VERSION_: JSON.stringify(meta.version),
_CLIENT_VERSION_: JSON.stringify(version),
_CODENAME_: JSON.stringify(codename),
- _LANG_: JSON.stringify(lang),
_LANGS_: JSON.stringify(Object.keys(locales).map(l => [l, locales[l].meta.lang])),
- _LOCALE_: JSON.stringify(locales[lang]),
_ENV_: JSON.stringify(process.env.NODE_ENV)
}),
new webpack.DefinePlugin({
@@ -134,7 +132,7 @@ module.exports = Object.keys(locales).map(lang => ({
],
output: {
path: __dirname + '/built/client/assets',
- filename: `[name].${version}.${lang}.js`,
+ filename: `[name].${version}.js`,
publicPath: `/assets/`
},
resolve: {
@@ -151,4 +149,4 @@ module.exports = Object.keys(locales).map(lang => ({
cache: true,
devtool: false, //'source-map',
mode: isProduction ? 'production' : 'development'
-}));
+};