[Client] Stop generate scripts for each languages

Resolve #3172

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())

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",

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);

src/client/app/config.ts

@@ -1,6 +1,4 @@
-declare const _LANG_: string;
+declare const _LANGS_: string[];
-declare const _LANGS_: string;
-declare const _LOCALE_: { [key: string]: any };
 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_;

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'
-}));
+};