🍣

Closes #12, #227 and #58

src/web/app/desktop/mixins.js

@@ -1,41 +0,0 @@
-const riot = require('riot');
-
-module.exports = me => {
-	if (me) require('./scripts/stream')(me);
-
-	require('./scripts/user-preview');
-
-	riot.mixin('notify', {
-		notify: require('./scripts/notify')
-	});
-
-	const dialog = require('./scripts/dialog');
-
-	riot.mixin('dialog', {
-		dialog: dialog
-	});
-
-	riot.mixin('NotImplementedException', {
-		NotImplementedException: () => {
-			return dialog('<i class="fa fa-exclamation-triangle"></i>Not implemented yet', '要求された操作は実装されていません。<br>→<a href="https://github.com/syuilo/misskey" target="_blank">Misskeyの開発に参加する</a>', [{
-				text: 'OK'
-			}]);
-		}
-	});
-
-	riot.mixin('input-dialog', {
-		inputDialog: require('./scripts/input-dialog')
-	});
-
-	riot.mixin('update-avatar', {
-		updateAvatar: require('./scripts/update-avatar')
-	});
-
-	riot.mixin('update-banner', {
-		updateBanner: require('./scripts/update-banner')
-	});
-
-	riot.mixin('autocomplete', {
-		Autocomplete: require('./scripts/autocomplete')
-	});
-};

src/web/app/desktop/mixins/index.js

@@ -0,0 +1 @@
+require('./user-preview');

src/web/app/desktop/mixins/user-preview.js

@@ -1,4 +1,4 @@
-const riot = require('riot');
+import * as riot from 'riot';
 
 riot.mixin('user-preview', {
 	init: function() {

src/web/app/desktop/router.js

@@ -2,11 +2,11 @@
  * Desktop App Router
  */
 
-const riot = require('riot');
+import * as riot from 'riot';
 const route = require('page');
 let page = null;
 
-module.exports = me => {
+export default me => {
 	route('/',              index);
 	route('/i>mentions',    mentions);
 	route('/post::post',    post);

src/web/app/desktop/script.js

@@ -6,11 +6,11 @@
 import './style.styl';
 
 require('./tags');
-const riot = require('riot');
-const boot = require('../boot');
-const mixins = require('./mixins');
-const route = require('./router');
-const fuckAdBlock = require('./scripts/fuck-ad-block');
+require('./mixins');
+import * as riot from 'riot';
+import boot from '../boot';
+import route from './router';
+import fuckAdBlock from './scripts/fuck-ad-block';
 
 /**
  * Boot
@@ -31,9 +31,6 @@ boot(me => {
 		}
 	}
 
-	// Register mixins
-	mixins(me);
-
 	// Start routing
 	route(me);
 });

src/web/app/desktop/scripts/autocomplete.js

@@ -1,5 +1,5 @@
 const getCaretCoordinates = require('textarea-caret');
-const riot = require('riot');
+import * as riot from 'riot';
 
 /**
  * オートコンプリートを管理するクラス。
@@ -127,4 +127,4 @@ class Autocomplete {
 	}
 }
 
-module.exports = Autocomplete;
+export default Autocomplete;

src/web/app/desktop/scripts/dialog.js

@@ -1,6 +1,6 @@
-const riot = require('riot');
+import * as riot from 'riot';
 
-module.exports = (title, text, buttons, canThrough, onThrough) => {
+export default (title, text, buttons, canThrough, onThrough) => {
 	const dialog = document.body.appendChild(document.createElement('mk-dialog'));
 	const controller = riot.observable();
 	riot.mount(dialog, {

src/web/app/desktop/scripts/fuck-ad-block.js

@@ -1,7 +1,7 @@
 require('fuckadblock');
 const dialog = require('./dialog');
 
-module.exports = () => {
+export default () => {
 	if (fuckAdBlock === undefined) {
 		adBlockDetected();
 	} else {

src/web/app/desktop/scripts/input-dialog.js

@@ -1,6 +1,6 @@
-const riot = require('riot');
+import * as riot from 'riot';
 
-module.exports = (title, placeholder, defaultValue, onOk, onCancel) => {
+export default (title, placeholder, defaultValue, onOk, onCancel) => {
 	const dialog = document.body.appendChild(document.createElement('mk-input-dialog'));
 	return riot.mount(dialog, {
 		title: title,

src/web/app/desktop/scripts/not-implemented-exception.js

@@ -0,0 +1,8 @@
+import dialog from './dialog';
+
+export default () => {
+	dialog('<i class="fa fa-exclamation-triangle"></i>Not implemented yet',
+		'要求された操作は実装されていません。<br>→<a href="https://github.com/syuilo/misskey" target="_blank">Misskeyの開発に参加する</a>', [{
+		text: 'OK'
+	}]);
+};

src/web/app/desktop/scripts/notify.js

@@ -1,6 +1,6 @@
-const riot = require('riot');
+import * as riot from 'riot';
 
-module.exports = message => {
+export default message => {
 	const notification = document.body.appendChild(document.createElement('mk-ui-notification'));
 	riot.mount(notification, {
 		message: message

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

@@ -1,6 +1,5 @@
 const stream = require('../../common/scripts/stream');
 const getPostSummary = require('../../common/scripts/get-post-summary');
-const riot = require('riot');
 
 module.exports = me => {
 	const s = stream(me);
@@ -37,9 +36,5 @@ module.exports = me => {
 		setTimeout(n.close.bind(n), 6000);
 	});
 
-	riot.mixin('stream', {
-		stream: s.event,
-		getStreamState: s.getState,
-		streamStateEv: s.stateEv
-	});
+	return s;
 };

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

@@ -1,9 +1,9 @@
-const riot = require('riot');
-const CONFIG = require('../../common/scripts/config');
-const dialog = require('./dialog');
-const api = require('../../common/scripts/api');
+import * as riot from 'riot';
+import CONFIG from '../../common/scripts/config';
+import dialog from './dialog';
+import api from '../../common/scripts/api';
 
-module.exports = (I, cb, file = null) => {
+export default (I, cb, file = null) => {
 	const fileSelected = file => {
 		const cropper = riot.mount(document.body.appendChild(document.createElement('mk-crop-window')), {
 			file: file,

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

@@ -1,9 +1,9 @@
-const riot = require('riot');
-const CONFIG = require('../../common/scripts/config');
-const dialog = require('./dialog');
-const api = require('../../common/scripts/api');
+import * as riot from 'riot';
+import CONFIG from '../../common/scripts/config';
+import dialog from './dialog';
+import api from '../../common/scripts/api';
 
-module.exports = (I, cb, file = null) => {
+export default (I, cb, file = null) => {
 	const fileSelected = file => {
 		const cropper = riot.mount(document.body.appendChild(document.createElement('mk-crop-window')), {
 			file: file,

src/web/app/desktop/tags/analog-clock.tag

@@ -72,7 +72,7 @@
 				const length = Math.min(canvW, canvH) / 4;
 				const uv = new Vec2(Math.sin(angle), -Math.cos(angle));
 				ctx.beginPath();
-				ctx.strokeStyle = CONFIG.themeColor;
+				ctx.strokeStyle = THEME_COLOR;
 				ctx.lineWidth = 2;
 				ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5);
 				ctx.lineTo(canvW / 2 + uv.x * length,     canvH / 2 + uv.y * length);

src/web/app/desktop/tags/autocomplete-suggestion.tag

@@ -80,7 +80,7 @@
 
 	</style>
 	<script>
-		const contains = require('../../common/scripts/contains');
+		import contains from '../../common/scripts/contains';
 
 		this.mixin('api');
 

src/web/app/desktop/tags/big-follow-button.tag

@@ -70,12 +70,16 @@
 
 	</style>
 	<script>
+		import isPromise from '../../common/scripts/is-promise';
+
+		this.mixin('i');
 		this.mixin('api');
-		this.mixin('is-promise');
 		this.mixin('stream');
 
+		const stream = this.stream.event;
+
 		this.user = null;
-		this.userPromise = this.isPromise(this.opts.user)
+		this.userPromise = isPromise(this.opts.user)
 			? this.opts.user
 			: Promise.resolve(this.opts.user);
 		this.init = true;
@@ -87,14 +91,14 @@
 					init: false,
 					user: user
 				});
-				this.stream.on('follow', this.onStreamFollow);
-				this.stream.on('unfollow', this.onStreamUnfollow);
+				stream.on('follow', this.onStreamFollow);
+				stream.on('unfollow', this.onStreamUnfollow);
 			});
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('follow', this.onStreamFollow);
-			this.stream.off('unfollow', this.onStreamUnfollow);
+			stream.off('follow', this.onStreamFollow);
+			stream.off('unfollow', this.onStreamUnfollow);
 		});
 
 		this.onStreamFollow = user => {

src/web/app/desktop/tags/contextmenu.tag

@@ -95,7 +95,7 @@
 
 	</style>
 	<script>
-		const contains = require('../../common/scripts/contains');
+		import contains from '../../common/scripts/contains';
 
 		this.root.addEventListener('contextmenu', e => {
 			e.preventDefault();

src/web/app/desktop/tags/crop-window.tag

@@ -158,7 +158,7 @@
 
 	</style>
 	<script>
-		this.mixin('cropper');
+		const Cropper = require('cropperjs');
 
 		this.image = this.opts.file;
 		this.title = this.opts.title;
@@ -167,7 +167,7 @@
 
 		this.on('mount', () => {
 			this.img = this.refs.window.refs.img;
-			this.cropper = new this.Cropper(this.img, {
+			this.cropper = new Cropper(this.img, {
 				aspectRatio: this.aspectRatio,
 				highlight: false,
 				viewMode: 1

src/web/app/desktop/tags/donation.tag

@@ -47,8 +47,8 @@
 
 	</style>
 	<script>
-		this.mixin('api');
 		this.mixin('i');
+		this.mixin('api');
 
 		this.close = e => {
 			e.preventDefault();

src/web/app/desktop/tags/drive/browser.tag

@@ -238,13 +238,16 @@
 
 	</style>
 	<script>
-		const contains = require('../../../common/scripts/contains');
+		import contains from '../../../common/scripts/contains';
+		import dialog from '../../scripts/dialog';
+		import inputDialog from '../../scripts/input-dialog';
 
+		this.mixin('i');
 		this.mixin('api');
-		this.mixin('dialog');
-		this.mixin('input-dialog');
 		this.mixin('stream');
 
+		const stream = this.stream.event;
+
 		this.files = [];
 		this.folders = [];
 		this.hierarchyFolders = [];
@@ -276,10 +279,10 @@
 				});
 			});
 
-			this.stream.on('drive_file_created', this.onStreamDriveFileCreated);
-			this.stream.on('drive_file_updated', this.onStreamDriveFileUpdated);
-			this.stream.on('drive_folder_created', this.onStreamDriveFolderCreated);
-			this.stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated);
+			stream.on('drive_file_created', this.onStreamDriveFileCreated);
+			stream.on('drive_file_updated', this.onStreamDriveFileUpdated);
+			stream.on('drive_folder_created', this.onStreamDriveFolderCreated);
+			stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated);
 
 			// Riotのバグでnullを渡しても""になる
 			// https://github.com/riot/riot/issues/2080
@@ -292,10 +295,10 @@
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('drive_file_created', this.onStreamDriveFileCreated);
-			this.stream.off('drive_file_updated', this.onStreamDriveFileUpdated);
-			this.stream.off('drive_folder_created', this.onStreamDriveFolderCreated);
-			this.stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated);
+			stream.off('drive_file_created', this.onStreamDriveFileCreated);
+			stream.off('drive_file_updated', this.onStreamDriveFileUpdated);
+			stream.off('drive_folder_created', this.onStreamDriveFolderCreated);
+			stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated);
 		});
 
 		this.onStreamDriveFileCreated = file => {
@@ -445,7 +448,7 @@
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.dialog('<i class="fa fa-exclamation-triangle"></i>操作を完了できません',
+							dialog('<i class="fa fa-exclamation-triangle"></i>操作を完了できません',
 								'移動先のフォルダーは、移動するフォルダーのサブフォルダーです。', [{
 								text: 'OK'
 							}]);
@@ -479,13 +482,13 @@
 		};
 
 		this.urlUpload = () => {
-			this.inputDialog('URLアップロード', 'アップロードしたいファイルのURL', null, url => {
+			inputDialog('URLアップロード', 'アップロードしたいファイルのURL', null, url => {
 				this.api('drive/files/upload_from_url', {
 					url: url,
 					folder_id: this.folder ? this.folder.id : undefined
 				});
 
-				this.dialog('<i class="fa fa-check"></i>アップロードをリクエストしました',
+				dialog('<i class="fa fa-check"></i>アップロードをリクエストしました',
 					'アップロードが完了するまで時間がかかる場合があります。', [{
 					text: 'OK'
 				}]);
@@ -493,7 +496,7 @@
 		};
 
 		this.createFolder = () => {
-			this.inputDialog('フォルダー作成', 'フォルダー名', null, name => {
+			inputDialog('フォルダー作成', 'フォルダー名', null, name => {
 				this.api('drive/folders/create', {
 					name: name,
 					folder_id: this.folder ? this.folder.id : undefined

src/web/app/desktop/tags/drive/file-contextmenu.tag

@@ -35,15 +35,14 @@
 		</ul>
 	</mk-contextmenu>
 	<script>
-		const copyToClipboard = require('../../../common/scripts/copy-to-clipboard');
+		import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
+		import dialog from '../../scripts/dialog';
+		import inputDialog from '../../scripts/input-dialog';
+		import updateAvatar from '../../scripts/update-avatar';
+		import NotImplementedException from '../../scripts/not-implemented-exception';
 
-		this.mixin('api');
 		this.mixin('i');
-		this.mixin('update-avatar');
-		this.mixin('update-banner');
-		this.mixin('dialog');
-		this.mixin('input-dialog');
-		this.mixin('NotImplementedException');
+		this.mixin('api');
 
 		this.browser = this.opts.browser;
 		this.file = this.opts.file;
@@ -85,16 +84,16 @@
 
 		this.setAvatar = () => {
 			this.refs.ctx.close();
-			this.updateAvatar(this.I, null, this.file);
+			updateAvatar(this.I, null, this.file);
 		};
 
 		this.setBanner = () => {
 			this.refs.ctx.close();
-			this.updateBanner(this.I, null, this.file);
+			updateBanner(this.I, null, this.file);
 		};
 
 		this.addApp = () => {
-			this.NotImplementedException();
+			NotImplementedException();
 		};
 	</script>
 </mk-drive-browser-file-contextmenu>

src/web/app/desktop/tags/drive/file.tag

@@ -144,13 +144,13 @@
 
 	</style>
 	<script>
-		this.bytesToSize = require('../../../common/scripts/bytes-to-size');
+		import bytesToSize from '../../../common/scripts/bytes-to-size';
 
 		this.mixin('i');
 
 		this.file = this.opts.file;
 		this.browser = this.parent;
-		this.title = `${this.file.name}\n${this.file.type} ${this.bytesToSize(this.file.datasize)}`;
+		this.title = `${this.file.name}\n${this.file.type} ${bytesToSize(this.file.datasize)}`;
 		this.isContextmenuShowing = false;
 		this.isSelected = this.browser.selectedFiles.some(f => f.id == this.file.id);
 

src/web/app/desktop/tags/drive/folder-contextmenu.tag

@@ -18,8 +18,9 @@
 		</ul>
 	</mk-contextmenu>
 	<script>
+		import inputDialog from '../../scripts/input-dialog';
+
 		this.mixin('api');
-		this.mixin('input-dialog');
 
 		this.browser = this.opts.browser;
 		this.folder = this.opts.folder;
@@ -51,7 +52,7 @@
 		this.rename = () => {
 			this.refs.ctx.close();
 
-			this.inputDialog('フォルダ名の変更', '新しいフォルダ名を入力してください', this.folder.name, name => {
+			inputDialog('フォルダ名の変更', '新しいフォルダ名を入力してください', this.folder.name, name => {
 				this.api('drive/folders/update', {
 					folder_id: this.folder.id,
 					name: name

src/web/app/desktop/tags/drive/folder.tag

@@ -50,8 +50,9 @@
 
 	</style>
 	<script>
+		import dialog from '../../scripts/dialog';
+
 		this.mixin('api');
-		this.mixin('dialog');
 
 		this.folder = this.opts.folder;
 		this.browser = this.parent;
@@ -144,7 +145,7 @@
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.dialog('<i class="fa fa-exclamation-triangle"></i>操作を完了できません',
+							dialog('<i class="fa fa-exclamation-triangle"></i>操作を完了できません',
 								'移動先のフォルダーは、移動するフォルダーのサブフォルダーです。', [{
 								text: 'OK'
 							}]);

src/web/app/desktop/tags/follow-button.tag

@@ -67,12 +67,16 @@
 
 	</style>
 	<script>
+		import isPromise from '../../common/scripts/is-promise';
+
+		this.mixin('i');
 		this.mixin('api');
-		this.mixin('is-promise');
 		this.mixin('stream');
 
+		const stream = this.stream.event;
+
 		this.user = null;
-		this.userPromise = this.isPromise(this.opts.user)
+		this.userPromise = isPromise(this.opts.user)
 			? this.opts.user
 			: Promise.resolve(this.opts.user);
 		this.init = true;
@@ -84,14 +88,14 @@
 					init: false,
 					user: user
 				});
-				this.stream.on('follow', this.onStreamFollow);
-				this.stream.on('unfollow', this.onStreamUnfollow);
+				stream.on('follow', this.onStreamFollow);
+				stream.on('unfollow', this.onStreamUnfollow);
 			});
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('follow', this.onStreamFollow);
-			this.stream.off('unfollow', this.onStreamUnfollow);
+			stream.off('follow', this.onStreamFollow);
+			stream.off('unfollow', this.onStreamUnfollow);
 		});
 
 		this.onStreamFollow = user => {

src/web/app/desktop/tags/home-widgets/photo-stream.tag

@@ -57,14 +57,17 @@
 
 	</style>
 	<script>
+		this.mixin('i');
 		this.mixin('api');
 		this.mixin('stream');
 
+		const stream = this.stream.event;
+
 		this.images = [];
 		this.initializing = true;
 
 		this.on('mount', () => {
-			this.stream.on('drive_file_created', this.onStreamDriveFileCreated);
+			stream.on('drive_file_created', this.onStreamDriveFileCreated);
 
 			this.api('drive/stream', {
 				type: 'image/*',
@@ -78,7 +81,7 @@
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('drive_file_created', this.onStreamDriveFileCreated);
+			stream.off('drive_file_created', this.onStreamDriveFileCreated);
 		});
 
 		this.onStreamDriveFileCreated = file => {

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

@@ -41,17 +41,19 @@
 
 	</style>
 	<script>
+		import inputDialog from '../../scripts/input-dialog';
+		import updateAvatar from '../../scripts/update-avatar';
+		import updateBanner from '../../scripts/update-banner';
+
 		this.mixin('i');
 		this.mixin('user-preview');
-		this.mixin('update-avatar');
-		this.mixin('update-banner');
 
 		this.setAvatar = () => {
-			this.updateAvatar(this.I);
+			updateAvatar(this.I);
 		};
 
 		this.setBanner = () => {
-			this.updateBanner(this.I);
+			updateBanner(this.I);
 		};
 	</script>
 </mk-profile-home-widget>

src/web/app/desktop/tags/home-widgets/rss-reader.tag

@@ -65,7 +65,6 @@
 	</style>
 	<script>
 		this.mixin('api');
-		this.mixin('NotImplementedException');
 
 		this.url = 'http://news.yahoo.co.jp/pickup/rss.xml';
 		this.items = [];
@@ -81,7 +80,7 @@
 		});
 
 		this.fetch = () => {
-			this.api(CONFIG.url + '/api:rss', {
+			this.api('/api:rss', {
 				url: this.url
 			}).then(feed => {
 				this.update({
@@ -92,7 +91,6 @@
 		};
 
 		this.settings = () => {
-			this.NotImplementedException();
 		};
 	</script>
 </mk-rss-reader-home-widget>

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

@@ -36,15 +36,17 @@
 		this.mixin('api');
 		this.mixin('stream');
 
+		const stream = this.stream.event;
+
 		this.isLoading = true;
 		this.isEmpty = false;
 		this.moreLoading = false;
 		this.noFollowing = this.I.following_count == 0;
 
 		this.on('mount', () => {
-			this.stream.on('post', this.onStreamPost);
-			this.stream.on('follow', this.onStreamFollow);
-			this.stream.on('unfollow', this.onStreamUnfollow);
+			stream.on('post', this.onStreamPost);
+			stream.on('follow', this.onStreamFollow);
+			stream.on('unfollow', this.onStreamUnfollow);
 
 			document.addEventListener('keydown', this.onDocumentKeydown);
 			window.addEventListener('scroll', this.onScroll);
@@ -53,9 +55,9 @@
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('post', this.onStreamPost);
-			this.stream.off('follow', this.onStreamFollow);
-			this.stream.off('unfollow', this.onStreamUnfollow);
+			stream.off('post', this.onStreamPost);
+			stream.off('follow', this.onStreamFollow);
+			stream.off('unfollow', this.onStreamUnfollow);
 
 			document.removeEventListener('keydown', this.onDocumentKeydown);
 			window.removeEventListener('scroll', this.onScroll);

src/web/app/desktop/tags/notifications.tag

@@ -177,10 +177,15 @@
 
 	</style>
 	<script>
+		import getPostSummary from '../../common/scripts/get-post-summary';
+		this.getPostSummary = getPostSummary;
+
+		this.mixin('i');
 		this.mixin('api');
-		this.mixin('stream');
 		this.mixin('user-preview');
-		this.mixin('get-post-summary');
+		this.mixin('stream');
+
+		const stream = this.stream.event;
 
 		this.notifications = [];
 		this.loading = true;
@@ -193,11 +198,11 @@
 				});
 			});
 
-			this.stream.on('notification', this.onNotification);
+			stream.on('notification', this.onNotification);
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('notification', this.onNotification);
+			stream.off('notification', this.onNotification);
 		});
 
 		this.onNotification = notification => {

src/web/app/desktop/tags/pages/home.tag

@@ -7,11 +7,14 @@
 			display block
 	</style>
 	<script>
+		import Progress from '../../../common/scripts/loading';
+		import getPostSummary from '../../../common/scripts/get-post-summary';
+
 		this.mixin('i');
 		this.mixin('api');
-		this.mixin('ui-progress');
 		this.mixin('stream');
-		this.mixin('get-post-summary');
+
+		const stream = this.stream.event;
 
 		this.unreadCount = 0;
 
@@ -19,23 +22,23 @@
 
 		this.on('mount', () => {
 			this.refs.ui.refs.home.on('loaded', () => {
-				this.Progress.done();
+				Progress.done();
 			});
 			document.title = 'Misskey';
-			this.Progress.start();
-			this.stream.on('post', this.onStreamPost);
+			Progress.start();
+			stream.on('post', this.onStreamPost);
 			document.addEventListener('visibilitychange', this.windowOnVisibilitychange, false);
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('post', this.onStreamPost);
+			stream.off('post', this.onStreamPost);
 			document.removeEventListener('visibilitychange', this.windowOnVisibilitychange);
 		});
 
 		this.onStreamPost = post => {
 			if (document.hidden && post.user_id != this.I.id) {
 				this.unreadCount++;
-				document.title = `(${this.unreadCount}) ${this.getPostSummary(post)}`;
+				document.title = `(${this.unreadCount}) ${getPostSummary(post)}`;
 			}
 		};
 

src/web/app/desktop/tags/pages/post.tag

@@ -16,19 +16,19 @@
 
 	</style>
 	<script>
-		this.mixin('ui-progress');
+		import Progress from '../../../common/scripts/loading';
 
 		this.post = this.opts.post;
 
 		this.on('mount', () => {
-			this.Progress.start();
+			Progress.start();
 
 			this.refs.ui.refs.detail.on('post-fetched', () => {
-				this.Progress.set(0.5);
+				Progress.set(0.5);
 			});
 
 			this.refs.ui.refs.detail.on('loaded', () => {
-				this.Progress.done();
+				Progress.done();
 			});
 		});
 	</script>

src/web/app/desktop/tags/pages/search.tag

@@ -7,13 +7,13 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui-progress');
+		import Progress from '../../../common/scripts/loading';
 
 		this.on('mount', () => {
-			this.Progress.start();
+			Progress.start();
 
 			this.refs.ui.refs.search.on('loaded', () => {
-				this.Progress.done();
+				Progress.done();
 			});
 		});
 	</script>

src/web/app/desktop/tags/pages/user.tag

@@ -7,20 +7,20 @@
 			display block
 	</style>
 	<script>
-		this.mixin('ui-progress');
+		import Progress from '../../../common/scripts/loading';
 
 		this.user = this.opts.user;
 
 		this.on('mount', () => {
-			this.Progress.start();
+			Progress.start();
 
 			this.refs.ui.refs.user.on('user-fetched', user => {
-				this.Progress.set(0.5);
+				Progress.set(0.5);
 				document.title = user.name + ' | Misskey'
 			});
 
 			this.refs.ui.refs.user.on('loaded', () => {
-				this.Progress.done();
+				Progress.done();
 			});
 		});
 	</script>

src/web/app/desktop/tags/post-detail-sub.tag

@@ -115,8 +115,10 @@
 	</style>
 	<script>
 		this.mixin('api');
-		this.mixin('text');
-		this.mixin('date-stringify');
+
+		import compile from '../../common/scripts/text-compiler';
+
+		this.dateStringify = require('../../common/scripts/date-stringify');
 		this.mixin('user-preview');
 
 		this.post = this.opts.post;
@@ -124,9 +126,9 @@
 
 		this.on('mount', () => {
 			if (this.post.text) {
-				const tokens = this.analyze(this.post.text);
+				const tokens = this.post.ast;
 
-				this.refs.text.innerHTML = this.compile(tokens);
+				this.refs.text.innerHTML = compile(tokens);
 
 				this.refs.text.children.forEach(e => {
 					if (e.tagName == 'MK-URL') riot.mount(e);

src/web/app/desktop/tags/post-detail.tag

@@ -340,9 +340,11 @@
 	</style>
 	<script>
 		this.mixin('api');
-		this.mixin('text');
+
+		import compile from '../../common/scripts/text-compiler';
+
 		this.mixin('user-preview');
-		this.mixin('date-stringify');
+		this.dateStringify = require('../../common/scripts/date-stringify');
 		this.mixin('NotImplementedException');
 
 		this.fetching = true;
@@ -367,9 +369,9 @@
 				this.trigger('loaded');
 
 				if (this.p.text) {
-					const tokens = this.analyze(this.p.text);
+					const tokens = this.p.ast;
 
-					this.refs.text.innerHTML = this.compile(tokens);
+					this.refs.text.innerHTML = compile(tokens);
 
 					this.refs.text.children.forEach(e => {
 						if (e.tagName == 'MK-URL') riot.mount(e);

src/web/app/desktop/tags/post-form.tag

@@ -306,11 +306,11 @@
 
 	</style>
 	<script>
-		const getCat = require('../../common/scripts/get-cat');
+		import getCat from '../../common/scripts/get-cat';
+		import notify from '../scripts/notify';
+		import Autocomplete from '../scripts/autocomplete';
 
 		this.mixin('api');
-		this.mixin('notify');
-		this.mixin('autocomplete');
 
 		this.wait = false;
 		this.uploadings = [];
@@ -355,7 +355,7 @@
 				this.trigger('change-uploading-files', uploads);
 			});
 
-			this.autocomplete = new this.Autocomplete(this.refs.text);
+			this.autocomplete = new Autocomplete(this.refs.text);
 			this.autocomplete.attach();
 
 			// 書きかけの投稿を復元
@@ -488,13 +488,13 @@
 				this.clear();
 				this.removeDraft();
 				this.trigger('post');
-				this.notify(this.repost
+				notify(this.repost
 					? 'Repostしました！'
 					: this.inReplyToPost
 						? '返信しました！'
 						: '投稿しました！');
 			}).catch(err => {
-				this.notify(this.repost
+				notify(this.repost
 					? 'Repostできませんでした'
 					: this.inReplyToPost
 						? '返信できませんでした'

src/web/app/desktop/tags/post-preview.tag

@@ -83,11 +83,12 @@
 
 	</style>
 	<script>
-		this.mixin('date-stringify');
+		import dateStringify from '../../common/scripts/date-stringify';
+
 		this.mixin('user-preview');
 
 		this.post = this.opts.post;
 
-		this.title = this.dateStringify(this.post.created_at);
+		this.title = dateStringify(this.post.created_at);
 	</script>
 </mk-post-preview>

src/web/app/desktop/tags/repost-form.tag

@@ -85,8 +85,9 @@
 
 	</style>
 	<script>
+		import notify from '../scripts/notify';
+
 		this.mixin('api');
-		this.mixin('notify');
 
 		this.wait = false;
 		this.quote = false;
@@ -101,9 +102,9 @@
 				repost_id: this.opts.post.id
 			}).then(data => {
 				this.trigger('posted');
-				this.notify('Repostしました！');
+				notify('Repostしました！');
 			}).catch(err => {
-				this.notify('Repostできませんでした');
+				notify('Repostできませんでした');
 			}).then(() => {
 				this.update({
 					wait: false

src/web/app/desktop/tags/set-avatar-suggestion.tag

@@ -31,11 +31,12 @@
 
 	</style>
 	<script>
+		import updateAvatar from '../scripts/update-avatar';
+
 		this.mixin('i');
-		this.mixin('update-avatar');
 
 		this.set = () => {
-			this.updateAvatar(this.I);
+			updateAvatar(this.I);
 		};
 
 		this.close = e => {

src/web/app/desktop/tags/set-banner-suggestion.tag

@@ -31,11 +31,12 @@
 
 	</style>
 	<script>
+		import updateBanner from '../scripts/update-banner';
+
 		this.mixin('i');
-		this.mixin('update-banner');
 
 		this.set = () => {
-			this.updateBanner(this.I);
+			updateBanner(this.I);
 		};
 
 		this.close = e => {

src/web/app/desktop/tags/settings.tag

@@ -188,11 +188,11 @@
 
 	</style>
 	<script>
+		import updateAvatar from '../scripts/update-avatar';
+		import notify from '../scripts/notify';
+
 		this.mixin('i');
 		this.mixin('api');
-		this.mixin('notify');
-		this.mixin('dialog');
-		this.mixin('update-avatar');
 
 		this.page = 'account';
 
@@ -201,7 +201,7 @@
 		};
 
 		this.avatar = () => {
-			this.updateAvatar(this.I);
+			updateAvatar(this.I);
 		};
 
 		this.updateAccount = () => {
@@ -211,7 +211,7 @@
 				description: this.refs.accountDescription.value || undefined,
 				birthday: this.refs.accountBirthday.value || undefined
 			}).then(() => {
-				this.notify('プロフィールを更新しました');
+				notify('プロフィールを更新しました');
 			});
 		};
 

src/web/app/desktop/tags/sub-post-content.tag

@@ -34,15 +34,16 @@
 
 	</style>
 	<script>
-		this.mixin('text');
+		import compile from '../../common/scripts/text-compiler';
+
 		this.mixin('user-preview');
 
 		this.post = this.opts.post;
 
 		this.on('mount', () => {
 			if (this.post.text) {
-				const tokens = this.analyze(this.post.text);
-				this.refs.text.innerHTML = this.compile(tokens, false);
+				const tokens = this.post.ast;
+				this.refs.text.innerHTML = compile(tokens, false);
 
 				this.refs.text.children.forEach(e => {
 					if (e.tagName == 'MK-URL') riot.mount(e);

src/web/app/desktop/tags/timeline-post-sub.tag

@@ -97,10 +97,11 @@
 
 	</style>
 	<script>
-		this.mixin('date-stringify');
+		import dateStringify from '../../common/scripts/date-stringify';
+
 		this.mixin('user-preview');
 
 		this.post = this.opts.post;
-		this.title = this.dateStringify(this.post.created_at);
+		this.title = dateStringify(this.post.created_at);
 	</script>
 </mk-timeline-post-sub>

src/web/app/desktop/tags/timeline-post.tag

@@ -55,7 +55,7 @@
 				<button class={ liked: p.is_liked } onclick={ like } title="善哉"><i class="fa fa-thumbs-o-up"></i>
 					<p class="count" if={ p.likes_count > 0 }>{ p.likes_count }</p>
 				</button>
-				<button onclick={ NotImplementedException }>
+				<button>
 					<i class="fa fa-ellipsis-h"></i>
 				</button>
 				<button onclick={ toggleDetail } title="詳細">
@@ -327,26 +327,26 @@
 
 	</style>
 	<script>
+		import compile from '../../common/scripts/text-compiler';
+		import dateStringify from '../../common/scripts/date-stringify';
+
 		this.mixin('api');
-		this.mixin('text');
-		this.mixin('date-stringify');
 		this.mixin('user-preview');
-		this.mixin('NotImplementedException');
 
 		this.post = this.opts.post;
 		this.isRepost = this.post.repost && this.post.text == null && this.post.media_ids == null && this.post.poll == null;
 		this.p = this.isRepost ? this.post.repost : this.post;
 
-		this.title = this.dateStringify(this.p.created_at);
+		this.title = dateStringify(this.p.created_at);
 
 		this.url = `/${this.p.user.username}/${this.p.id}`;
 		this.isDetailOpened = false;
 
 		this.on('mount', () => {
 			if (this.p.text) {
-				const tokens = this.analyze(this.p.text);
+				const tokens = this.p.ast;
 
-				this.refs.text.innerHTML = this.refs.text.innerHTML.replace('<p class="dummy"></p>', this.compile(tokens));
+				this.refs.text.innerHTML = this.refs.text.innerHTML.replace('<p class="dummy"></p>', compile(tokens));
 
 				this.refs.text.children.forEach(e => {
 					if (e.tagName == 'MK-URL') riot.mount(e);

src/web/app/desktop/tags/ui-header-account.tag

@@ -159,10 +159,10 @@
 
 	</style>
 	<script>
-		const contains = require('../../common/scripts/contains');
+		import contains from '../../common/scripts/contains';
+		import signout from '../../common/scripts/signout';
 
 		this.mixin('i');
-		this.mixin('signout');
 
 		this.isOpen = false;
 

src/web/app/desktop/tags/ui-header-nav.tag

@@ -99,11 +99,13 @@
 		this.mixin('api');
 		this.mixin('stream');
 
+		const stream = this.stream.event;
+
 		this.page = this.opts.page;
 
 		this.on('mount', () => {
-			this.stream.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
-			this.stream.on('unread_messaging_message', this.onUnreadMessagingMessage);
+			stream.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
+			stream.on('unread_messaging_message', this.onUnreadMessagingMessage);
 
 			// Fetch count of unread messaging messages
 			this.api('messaging/unread').then(res => {
@@ -116,8 +118,8 @@
 		});
 
 		this.on('unmount', () => {
-			this.stream.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
-			this.stream.off('unread_messaging_message', this.onUnreadMessagingMessage);
+			stream.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
+			stream.off('unread_messaging_message', this.onUnreadMessagingMessage);
 		});
 
 		this.onReadAllMessagingMessages = () => {

src/web/app/desktop/tags/ui-header-notifications.tag

@@ -75,7 +75,7 @@
 
 	</style>
 	<script>
-		const contains = require('../../common/scripts/contains');
+		import contains from '../../common/scripts/contains';
 
 		this.isOpen = false;
 

src/web/app/desktop/tags/user-header.tag

@@ -5,8 +5,10 @@
 		<p class="username">@{ user.username }</p>
 		<p class="location" if={ user.profile.location }><i class="fa fa-map-marker"></i>{ user.profile.location }</p>
 	</div>
-	<footer><a href={ '/' + user.username }>投稿</a><a href={ '/' + user.username + '/media' }>メディア</a><a href={ '/' + user.username + '/graphs' }>グラフ</a>
-		<button onclick={ NotImplementedException }><i class="fa fa-ellipsis-h"></i></button>
+	<footer>
+		<a href={ '/' + user.username }>投稿</a>
+		<a href={ '/' + user.username + '/media' }>メディア</a>
+		<a href={ '/' + user.username + '/graphs' }>グラフ</a>
 	</footer>
 	<style>
 		:scope
@@ -104,9 +106,9 @@
 
 	</style>
 	<script>
+		import updateBanner from '../scripts/update-banner';
+
 		this.mixin('i');
-		this.mixin('update-banner');
-		this.mixin('NotImplementedException');
 
 		this.user = this.opts.user;
 
@@ -136,7 +138,7 @@
 		this.onUpdateBanner = () => {
 			if (!this.SIGNIN || this.I.id != this.user.id) return;
 
-			this.updateBanner(this.I, i => {
+			updateBanner(this.I, i => {
 				this.user.banner_url = i.banner_url;
 				this.update();
 			});

src/web/app/desktop/tags/user-photos.tag

@@ -57,13 +57,14 @@
 
 	</style>
 	<script>
+		import isPromise from '../../common/scripts/is-promise';
+
 		this.mixin('api');
-		this.mixin('is-promise');
 
 		this.images = [];
 		this.initializing = true;
 		this.user = null;
-		this.userPromise = this.isPromise(this.opts.user)
+		this.userPromise = isPromise(this.opts.user)
 			? this.opts.user
 			: Promise.resolve(this.opts.user);
 

src/web/app/desktop/tags/user-timeline.tag

@@ -48,12 +48,12 @@
 
 	</style>
 	<script>
+		import isPromise from '../../common/scripts/is-promise';
+
 		this.mixin('api');
-		this.mixin('is-promise');
-		this.mixin('get-post-summary');
 
 		this.user = null;
-		this.userPromise = this.isPromise(this.opts.user)
+		this.userPromise = isPromise(this.opts.user)
 			? this.opts.user
 			: Promise.resolve(this.opts.user);
 		this.isLoading = true;

src/web/app/desktop/tags/window.tag

@@ -173,7 +173,7 @@
 
 	</style>
 	<script>
-		const contains = require('../../common/scripts/contains');
+		import contains from '../../common/scripts/contains';
 
 		this.minHeight = 40;
 		this.minWidth = 200;