Merge pull request #185 from syuilo/define-plugin

Define plugin

gulpfile.ts

@@ -159,7 +159,7 @@ gulp.task('build:client:scripts', () => new Promise(async (ok) => {
 	const StringReplacePlugin = require('string-replace-webpack-plugin');
 
 	/* webpack options */
-	const pack = {
+	const pack: Webpack.Configuration = {
 		entry: {
 			'client': './src/web/app/client/script.js',
 			'desktop': './src/web/app/desktop/script.js',
@@ -168,27 +168,18 @@ gulp.task('build:client:scripts', () => new Promise(async (ok) => {
 			'auth': './src/web/app/auth/script.js'
 		},
 		module: {
-			preLoaders: [
+			rules: [
 				{
-					test: /\.(tag|js|styl)$/,
+					enforce: 'pre',
+					test: /\.tag$/,
 					exclude: /node_modules/,
 					loader: StringReplacePlugin.replace({
 						replacements: [
-							{	pattern: /VERSION/g, replacement: () => `'${commit ? commit.hash : 'null'}'` },
 							{ pattern: /\$theme\-color\-foreground/g, replacement: () => '#fff' },
 							{ pattern: /\$theme\-color/g, replacement: () => config.themeColor },
-							{ pattern: /CONFIG\.theme\-color/g, replacement: () => `'${config.themeColor}'` },
-							{ pattern: /CONFIG\.themeColor/g, replacement: () => `'${config.themeColor}'` },
-							{ pattern: /CONFIG\.api\.url/g, replacement: () => `'${config.api_url}'` },
-							{ pattern: /CONFIG\.urls\.about/g, replacement: () => `'${config.about_url}'` },
-							{ pattern: /CONFIG\.urls\.dev/g, replacement: () => `'${config.dev_url}'` },
-							{ pattern: /CONFIG\.url/g, replacement: () => `'${config.url}'` },
-							{ pattern: /CONFIG\.host/g, replacement: () => `'${config.host}'` },
-							{ pattern: /CONFIG\.recaptcha\.siteKey/g, replacement: () => `'${config.recaptcha.siteKey}'` },
-						]})
+						]
+					})
 				},
-			],
-			loaders: [
 				{
 					test: /\.tag$/,
 					exclude: /node_modules/,
@@ -208,12 +199,37 @@ gulp.task('build:client:scripts', () => new Promise(async (ok) => {
 				},
 				{
 					test: /\.styl$/,
-					loaders: ['style', 'css', 'stylus']
+					exclude: /node_modules/,
+					use: [
+						{
+							loader: 'style-loader'
+						},
+						{
+							loader: 'css-loader'
+						},
+						{
+							loader: 'stylus-loader'
+						}
+					]
 				}
 			]
 		},
 		plugins: [
-			new StringReplacePlugin()
+			new Webpack.DefinePlugin({
+				VERSION: JSON.stringify(commit ? commit.hash : null),
+				CONFIG: {
+					themeColor: JSON.stringify(config.themeColor),
+					apiUrl: JSON.stringify(config.api_url),
+					aboutUrl: JSON.stringify(config.about_url),
+					devUrl: JSON.stringify(config.dev_url),
+					host: JSON.stringify(config.host),
+					url: JSON.stringify(config.url),
+					recaptcha: {
+						siteKey: JSON.stringify(config.recaptcha.siteKey),
+					}
+				}
+			}),
+			new StringReplacePlugin(),
 		],
 		output: {
 			filename: '[name]/script.js'
@@ -226,7 +242,7 @@ gulp.task('build:client:scripts', () => new Promise(async (ok) => {
 		//pack.plugins.push(new Webpack.optimize.UglifyJsPlugin())
 	}
 
-	let stream = webpack(pack);
+	let stream = webpack(pack, Webpack);
 
 	// TODO: remove this block
 	if (isProduction) {

src/web/app/boot.js

@@ -17,6 +17,11 @@ require('./common/tags');
 
 document.domain = CONFIG.host;
 
+// Set global configration
+riot.mixin({
+	CONFIG: CONFIG
+});
+
 // ↓ iOS待ちPolyfill (SEE: http://caniuse.com/#feat=fetch)
 require('whatwg-fetch');
 
@@ -109,7 +114,7 @@ function fetchme(token, cb) {
 	}
 
 	// Fetch user
-	fetch(CONFIG.api.url + '/i', {
+	fetch(CONFIG.apiUrl + '/i', {
 		method: 'POST',
 		body: JSON.stringify({
 			i: token

src/web/app/common/scripts/api.js

@@ -24,7 +24,7 @@ module.exports = (i, endpoint, data = {}) => {
 
 	return new Promise((resolve, reject) => {
 		// Send request
-		fetch(endpoint.indexOf('://') > -1 ? endpoint : `${CONFIG.api.url}/${endpoint}`, {
+		fetch(endpoint.indexOf('://') > -1 ? endpoint : `${CONFIG.apiUrl}/${endpoint}`, {
 			method: 'POST',
 			body: JSON.stringify(data),
 			credentials: endpoint === 'signin' ? 'include' : 'omit'

src/web/app/common/scripts/messaging-stream.js

@@ -12,7 +12,7 @@ class Connection {
 		this.event = riot.observable();
 		this.me = me;
 
-		const host = CONFIG.api.url.replace('http', 'ws');
+		const host = CONFIG.apiUrl.replace('http', 'ws');
 		this.socket = new ReconnectingWebSocket(`${host}/messaging?i=${me.token}&otherparty=${otherparty}`);
 		this.socket.addEventListener('open', this.onOpen);
 		this.socket.addEventListener('message', this.onMessage);

src/web/app/common/scripts/stream.js

@@ -5,7 +5,7 @@ module.exports = me => {
 	let state = 'initializing';
 	const stateEv = riot.observable();
 	const event = riot.observable();
-	const host = CONFIG.api.url.replace('http', 'ws');
+	const host = CONFIG.apiUrl.replace('http', 'ws');
 	const socket = new ReconnectingWebSocket(`${host}?i=${me.token}`);
 
 	socket.onopen = () => {

src/web/app/common/tags/introduction.tag

@@ -3,7 +3,7 @@
 		<h1>Misskeyとは？</h1><p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p>
 <p>Twitter, Facebook, LINE, Google+ などを<del>パクって</del><i>参考にして</i>います。</p>
 <p>無料で誰でも利用でき、広告は一切掲載していません。</p>
-<p><a href={ CONFIG.urls.about } target="_blank">もっと知りたい方はこちら</a></p>
+<p><a href={ CONFIG.aboutUrl } target="_blank">もっと知りたい方はこちら</a></p>
 	</article>
 	<style>
 		:scope

src/web/app/common/tags/signup.tag

@@ -34,7 +34,7 @@
 		</label>
 		<label class="agree-tou">
 			<input name="agree-tou" type="checkbox" autocomplete="off" required="required"/>
-			<p><a href={ CONFIG.urls.about + '/tou' } target="_blank">利用規約</a>に同意する</p>
+			<p><a href={ CONFIG.aboutUrl + '/tou' } target="_blank">利用規約</a>に同意する</p>
 		</label>
 		<button onclick={ onsubmit }>アカウント作成</button>
 	</form>

src/web/app/common/tags/twitter-setting.tag

@@ -1,10 +1,10 @@
 <mk-twitter-setting>
-	<p>お使いのTwitterアカウントをお使いのMisskeyアカウントに接続しておくと、プロフィールでTwitterアカウント情報が表示されるようになったり、Twitterを用いた便利なサインインを利用できるようになります。<a href={ CONFIG.urls.about + '/link-to-twitter' } target="_blank">詳細...</a></p>
+	<p>お使いのTwitterアカウントをお使いのMisskeyアカウントに接続しておくと、プロフィールでTwitterアカウント情報が表示されるようになったり、Twitterを用いた便利なサインインを利用できるようになります。<a href={ CONFIG.aboutUrl + '/link-to-twitter' } target="_blank">詳細...</a></p>
 	<p class="account" if={ I.twitter } title={ 'Twitter ID: ' + I.twitter.user_id }>次のTwitterアカウントに接続されています: <a href={ 'https://twitter.com/' + I.twitter.screen_name } target="_blank">@{ I.twitter.screen_name }</a></p>
 	<p>
-		<a href={ CONFIG.api.url + '/connect/twitter' } target="_blank">{ I.twitter ? '再接続する' : 'Twitterと接続する' }</a>
+		<a href={ CONFIG.apiUrl + '/connect/twitter' } target="_blank">{ I.twitter ? '再接続する' : 'Twitterと接続する' }</a>
 		<span if={ I.twitter }> or </span>
-		<a href={ CONFIG.api.url + '/disconnect/twitter' } target="_blank" if={ I.twitter }>切断する</a>
+		<a href={ CONFIG.apiUrl + '/disconnect/twitter' } target="_blank" if={ I.twitter }>切断する</a>
 	</p>
 	<p class="id" if={ I.twitter }>Twitter ID: { I.twitter.user_id }</p>
 	<style>

src/web/app/common/tags/uploader.tag

@@ -171,7 +171,7 @@
 				data.append \folder_id folder
 
 			xhr = new XMLHttpRequest!
-			xhr.open \POST CONFIG.api.url + '/drive/files/create' true
+			xhr.open \POST CONFIG.apiUrl + '/drive/files/create' true
 			xhr.onload = (e) ~>
 				drive-file = JSON.parse e.target.response
 

src/web/app/desktop/scripts/update-avatar.js

@@ -43,7 +43,7 @@ module.exports = (I, cb, file = null) => {
 		if (folder) data.append('folder_id', folder.id);
 	
 		const xhr = new XMLHttpRequest();
-		xhr.open('POST', CONFIG.api.url + '/drive/files/create', true);
+		xhr.open('POST', CONFIG.apiUrl + '/drive/files/create', true);
 		xhr.onload = e => {
 			const file = JSON.parse(e.target.response);
 			progress.close();

src/web/app/desktop/scripts/update-banner.js

@@ -43,7 +43,7 @@ module.exports = (I, cb, file = null) => {
 		if (folder) data.append('folder_id', folder.id);
 	
 		const xhr = new XMLHttpRequest();
-		xhr.open('POST', CONFIG.api.url + '/drive/files/create', true);
+		xhr.open('POST', CONFIG.apiUrl + '/drive/files/create', true);
 		xhr.onload = e => {
 			const file = JSON.parse(e.target.response);
 			progress.close();

src/web/app/desktop/tags/home-widgets/nav.tag

@@ -1,4 +1,4 @@
-<mk-nav-home-widget><a href={ CONFIG.urls.about }>Misskeyについて</a><i>・</i><a href={ CONFIG.urls.about + '/status' }>ステータス</a><i>・</i><a href="https://github.com/syuilo/misskey">リポジトリ</a><i>・</i><a href={ CONFIG.urls.dev }>開発者</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <i class="fa fa-twitter"></i></a>
+<mk-nav-home-widget><a href={ CONFIG.aboutUrl }>Misskeyについて</a><i>・</i><a href={ CONFIG.aboutUrl + '/status' }>ステータス</a><i>・</i><a href="https://github.com/syuilo/misskey">リポジトリ</a><i>・</i><a href={ CONFIG.devUrl }>開発者</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <i class="fa fa-twitter"></i></a>
 	<style>
 		:scope
 			display block

src/web/app/desktop/tags/pages/entrance/signin.tag

@@ -1,4 +1,4 @@
-<mk-entrance-signin><a class="help" href={ CONFIG.urls.about + '/help' } title="お困りですか？"><i class="fa fa-question"></i></a>
+<mk-entrance-signin><a class="help" href={ CONFIG.aboutUrl + '/help' } title="お困りですか？"><i class="fa fa-question"></i></a>
 	<div class="form">
 		<h1><img if={ user } src={ user.avatar_url + '?thumbnail&size=32' }/>
 			<p>{ user ? user.name : 'アカウント' }</p>

src/web/app/mobile/tags/ui-nav.tag

@@ -21,7 +21,7 @@
 				<li class="settings"><a href="/i/settings"><i class="icon fa fa-cog"></i>設定<i class="angle fa fa-angle-right"></i></a></li>
 			</ul>
 		</div>
-		<p class="about" href={ CONFIG.urls.about }><a>Misskeyについて</a></p>
+		<p class="about" href={ CONFIG.aboutUrl }><a>Misskeyについて</a></p>
 	</div>
 	<style>
 		:scope