Migrate to Vue3

gulpfile.ts

@@ -7,9 +7,6 @@ import * as gulp from 'gulp';
 import * as ts from 'gulp-typescript';
 import * as rimraf from 'rimraf';
 import * as rename from 'gulp-rename';
-const cleanCSS = require('gulp-clean-css');
-const sass = require('gulp-dart-sass');
-const fiber = require('fibers');
 
 const locales: { [x: string]: any } = require('./locales');
 const meta = require('./package.json');
@@ -61,13 +58,6 @@ gulp.task('cleanall', gulp.parallel('clean', cb =>
 	rimraf('./node_modules', cb)
 ));
 
-gulp.task('build:client:styles', () =>
-	gulp.src('./src/client/style.scss')
-		.pipe(sass({ fiber }))
-		.pipe(cleanCSS())
-		.pipe(gulp.dest('./built/client/assets/'))
-);
-
 gulp.task('copy:client', () =>
 		gulp.src([
 			'./assets/**/*',
@@ -87,7 +77,6 @@ gulp.task('copy:docs', () =>
 );
 
 gulp.task('build:client', gulp.parallel(
-	'build:client:styles',
 	'copy:client',
 	'copy:docs'
 ));

locales/ja-JP.yml

@@ -16,6 +16,9 @@ noNotes: "ノートはありません"
 noNotifications: "通知はありません"
 instance: "インスタンス"
 settings: "設定"
+basicSettings: "基本設定"
+otherSettings: "その他の設定"
+openInWindow: "ウィンドウで開く"
 profile: "プロフィール"
 timeline: "タイムライン"
 noAccountDescription: "自己紹介はありません"
@@ -40,6 +43,7 @@ deleteAndEditConfirm: "このノートを削除してもう一度編集します
 addToList: "リストに追加"
 sendMessage: "メッセージを送信"
 copyUsername: "ユーザー名をコピー"
+searchUser: "ユーザーを検索"
 reply: "返信"
 loadMore: "もっと見る"
 youGotNewFollower: "フォローされました"
@@ -66,8 +70,11 @@ followers: "フォロワー"
 followsYou: "フォローされています"
 createList: "リスト作成"
 manageLists: "リストの管理"
-error: "問題が発生しました"
+error: "エラー"
+somethingHappened: "問題が発生しました"
 retry: "再試行"
+pageLoadError: "ページの読み込みに失敗しました。"
+pageLoadErrorDescription: "これは通常、ネットワークまたはブラウザキャッシュが原因です。キャッシュをクリアするか、しばらく待ってから再度試してください。"
 enterListName: "リスト名を入力"
 privacy: "プライバシー"
 makeFollowManuallyApprove: "フォローを承認制にする"
@@ -106,6 +113,8 @@ unsuspendConfirm: "解凍しますか？"
 selectList: "リストを選択"
 selectAntenna: "アンテナを選択"
 selectWidget: "ウィジェットを選択"
+editWidgets: "ウィジェットを編集"
+editWidgetsExit: "編集を終了"
 customEmojis: "カスタム絵文字"
 emoji: "絵文字"
 emojiName: "絵文字名"
@@ -177,7 +186,6 @@ processing: "処理中"
 preview: "プレビュー"
 default: "デフォルト"
 noCustomEmojis: "絵文字はありません"
-customEmojisOfRemote: "リモートの絵文字"
 noJobs: "ジョブはありません"
 federating: "連合中"
 blocked: "ブロック中"
@@ -445,7 +453,7 @@ total: "合計"
 weekOverWeekChanges: "前週比"
 dayOverDayChanges: "前日比"
 appearance: "アピアランス"
-clinetSettings: "クライアント設定"
+clientSettings: "クライアント設定"
 accountSettings: "アカウント設定"
 promotion: "プロモーション"
 promote: "プロモート"
@@ -476,6 +484,8 @@ newNoteRecived: "新しいノートがあります"
 sounds: "サウンド"
 listen: "聴く"
 none: "なし"
+showInPage: "ページで表示"
+popout: "ポップアウト"
 volume: "音量"
 details: "詳細"
 chooseEmoji: "絵文字を選択"
@@ -518,7 +528,6 @@ enableInfiniteScroll: "自動でもっと見る"
 visibility: "公開範囲"
 poll: "アンケート"
 useCw: "内容を隠す"
-fixedWidgetsPosition: "ウィジェットの位置を固定する"
 enablePlayer: "プレイヤーを開く"
 disablePlayer: "プレイヤーを閉じる"
 expandTweet: "ツイートを展開する"
@@ -570,6 +579,12 @@ notificationSetting: "通知設定"
 notificationSettingDesc: "表示する通知の種別を選択してください。"
 useGlobalSetting: "グローバル設定を使う"
 useGlobalSettingDesc: "オンにすると、アカウントの通知設定が使用されます。オフにすると、個別に設定できるようになります。"
+other: "その他"
+regenerateLoginToken: "ログイントークンを再生成"
+regenerateLoginTokenDescription: "ログインに使用される内部トークンを再生成します。通常この操作を行う必要はありません。再生成すると、全てのデバイスでログアウトされます。"
+setMultipleBySeparatingWithSpace: "スペースで区切って複数設定できます。"
+fileIdOrUrl: "ファイルIDまたはURL"
+chatOpenBehavior: "チャットを開くときの動作"
 
 _serverDisconnectedBehavior:
   reload: "自動でリロード"
@@ -802,6 +817,7 @@ _widgets:
   photos: "フォト"
   digitalClock: "デジタル時計"
   federation: "連合"
+  postForm: "投稿フォーム"
 
 _cw:
   hide: "隠す"

package.json

@@ -37,11 +37,11 @@
 	"dependencies": {
 		"@babel/plugin-transform-runtime": "7.11.0",
 		"@elastic/elasticsearch": "7.8.0",
-		"@fortawesome/fontawesome-svg-core": "1.2.30",
-		"@fortawesome/free-brands-svg-icons": "5.14.0",
-		"@fortawesome/free-regular-svg-icons": "5.14.0",
-		"@fortawesome/free-solid-svg-icons": "5.14.0",
-		"@fortawesome/vue-fontawesome": "0.1.10",
+		"@fortawesome/fontawesome-svg-core": "1.2.32",
+		"@fortawesome/free-brands-svg-icons": "5.15.1",
+		"@fortawesome/free-regular-svg-icons": "5.15.1",
+		"@fortawesome/free-solid-svg-icons": "5.15.1",
+		"@fortawesome/vue-fontawesome": "3.0.0-2",
 		"@koa/cors": "3.1.0",
 		"@koa/multer": "3.0.0",
 		"@koa/router": "9.0.1",
@@ -97,19 +97,20 @@
 		"@types/speakeasy": "2.0.5",
 		"@types/tinycolor2": "1.4.2",
 		"@types/tmp": "0.2.0",
-		"@types/uuid": "8.0.0",
+		"@types/uuid": "8.3.0",
 		"@types/web-push": "3.3.0",
-		"@types/webpack": "4.41.18",
+		"@types/webpack": "4.41.22",
 		"@types/webpack-stream": "3.2.11",
 		"@types/websocket": "1.0.1",
-		"@types/ws": "7.2.6",
-		"@typescript-eslint/parser": "3.6.0",
+		"@types/ws": "7.2.7",
+		"@typescript-eslint/parser": "4.4.0",
+		"@vue/compiler-sfc": "3.0.0",
 		"abort-controller": "3.0.0",
-		"apexcharts": "3.20.0",
+		"apexcharts": "3.22.0",
 		"autobind-decorator": "2.4.0",
 		"autosize": "4.0.2",
 		"autwh": "0.1.0",
-		"aws-sdk": "2.724.0",
+		"aws-sdk": "2.770.0",
 		"bcryptjs": "2.4.3",
 		"blurhash": "1.1.3",
 		"bull": "3.18.0",
@@ -122,35 +123,33 @@
 		"content-disposition": "0.5.3",
 		"core-js": "3.6.5",
 		"crc-32": "1.2.0",
-		"css-loader": "4.2.1",
+		"css-loader": "4.3.0",
 		"cssnano": "4.1.10",
 		"dateformat": "3.0.3",
 		"deep-entries": "3.1.0",
 		"diskusage": "1.1.3",
 		"double-ended-queue": "2.1.0-0",
 		"escape-regexp": "0.0.1",
-		"eslint": "7.4.0",
-		"eslint-plugin-vue": "6.2.2",
-		"eventemitter3": "4.0.4",
+		"eslint": "7.10.0",
+		"eslint-plugin-vue": "7.0.1",
+		"eventemitter3": "4.0.7",
 		"feed": "4.2.1",
 		"fibers": "5.0.0",
-		"file-type": "14.7.1",
+		"file-type": "15.0.1",
 		"fluent-ffmpeg": "2.1.2",
 		"glob": "7.1.6",
 		"gulp": "4.0.2",
-		"gulp-clean-css": "4.3.0",
-		"gulp-dart-sass": "1.0.2",
 		"gulp-rename": "2.0.0",
 		"gulp-replace": "1.0.0",
 		"gulp-sourcemaps": "2.6.5",
-		"gulp-terser": "1.3.2",
+		"gulp-terser": "1.4.0",
 		"gulp-tslint": "8.1.4",
 		"gulp-typescript": "6.0.0-alpha.1",
 		"hard-source-webpack-plugin": "0.13.1",
 		"hcaptcha": "0.0.2",
 		"html-minifier": "4.0.0",
 		"http-proxy-agent": "4.0.1",
-		"http-signature": "1.3.4",
+		"http-signature": "1.3.5",
 		"https-proxy-agent": "5.0.0",
 		"idb-keyval": "3.2.0",
 		"insert-text-at-cursor": "0.3.0",
@@ -171,27 +170,27 @@
 		"koa-mount": "4.0.0",
 		"koa-send": "5.0.1",
 		"koa-slow": "2.1.0",
-		"koa-views": "6.3.0",
+		"koa-views": "6.3.1",
 		"langmap": "0.0.16",
 		"lookup-dns-cache": "2.1.0",
-		"markdown-it": "11.0.0",
-		"markdown-it-anchor": "5.3.0",
-		"mocha": "8.1.1",
+		"markdown-it": "11.0.1",
+		"markdown-it-anchor": "6.0.0",
+		"mocha": "8.1.3",
 		"moji": "0.5.1",
 		"ms": "2.1.2",
 		"multer": "1.4.2",
 		"nested-property": "4.0.0",
-		"node-fetch": "2.6.0",
-		"nodemailer": "6.4.11",
-		"nprogress": "0.2.0",
+		"node-fetch": "2.6.1",
+		"nodemailer": "6.4.13",
 		"object-assign-deep": "0.4.0",
 		"os-utils": "0.0.14",
+		"p-cancelable": "2.0.0",
 		"parse5": "6.0.1",
-		"parsimmon": "1.15.0",
-		"pg": "8.3.2",
-		"portal-vue": "2.1.7",
+		"parsimmon": "1.16.0",
+		"pg": "8.4.1",
 		"portscanner": "2.2.0",
-		"postcss-loader": "3.0.0",
+		"postcss": "8.1.1",
+		"postcss-loader": "4.0.3",
 		"prismjs": "1.21.0",
 		"probe-image-size": "5.0.0",
 		"promise-limit": "2.7.0",
@@ -202,7 +201,7 @@
 		"qrcode": "1.4.4",
 		"random-seed": "0.3.0",
 		"ratelimiter": "3.4.1",
-		"re2": "1.15.4",
+		"re2": "1.15.5",
 		"recaptcha-promise": "0.1.3",
 		"reconnecting-websocket": "4.4.0",
 		"redis": "3.0.2",
@@ -215,54 +214,49 @@
 		"rimraf": "3.0.2",
 		"rndstr": "1.0.0",
 		"s-age": "1.1.2",
-		"sass": "1.26.10",
-		"sass-loader": "9.0.3",
+		"sass": "1.27.0",
+		"sass-loader": "10.0.2",
 		"seedrandom": "3.0.5",
-		"sharp": "0.25.4",
+		"sharp": "0.26.1",
 		"speakeasy": "2.0.0",
 		"stringz": "2.1.0",
-		"style-loader": "1.2.1",
+		"style-loader": "1.3.0",
 		"summaly": "2.4.0",
 		"syslog-pro": "1.0.0",
-		"systeminformation": "4.26.12",
+		"systeminformation": "4.27.8",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"three": "0.117.1",
-		"tinycolor2": "1.4.1",
+		"tinycolor2": "1.4.2",
 		"tmp": "0.2.1",
-		"ts-loader": "8.0.2",
+		"ts-loader": "8.0.4",
 		"ts-node": "9.0.0",
 		"tslint": "6.1.3",
 		"tslint-sonarts": "1.9.0",
-		"typeorm": "0.2.25",
-		"typescript": "4.0.2",
+		"typeorm": "0.2.28",
+		"typescript": "4.0.3",
 		"ulid": "2.3.0",
 		"url-loader": "4.1.0",
-		"uuid": "8.3.0",
-		"v-animate-css": "0.0.3",
+		"uuid": "8.3.1",
 		"v-debounce": "0.1.2",
-		"vue": "2.6.12",
+		"vue": "3.0.1",
 		"vue-color": "2.7.1",
-		"vue-content-loading": "1.6.0",
-		"vue-cropperjs": "4.1.0",
-		"vue-i18n": "8.21.0",
-		"vue-json-pretty": "1.6.7",
-		"vue-loader": "15.9.3",
-		"vue-marquee-text-component": "1.1.1",
-		"vue-meta": "2.4.0",
+		"vue-draggable-next": "1.0.8",
+		"vue-i18n": "9.0.0-beta.4",
+		"vue-json-pretty": "1.7.0",
+		"vue-loader": "16.0.0-beta.7",
 		"vue-prism-component": "1.2.0",
 		"vue-prism-editor": "1.2.2",
-		"vue-router": "3.4.3",
+		"vue-router": "4.0.0-beta.13",
 		"vue-style-loader": "4.1.2",
 		"vue-svg-inline-loader-corejs3": "1.5.0",
 		"vue-template-compiler": "2.6.12",
-		"vuedraggable": "2.24.1",
-		"vuex": "3.5.1",
+		"vuex": "4.0.0-beta.4",
 		"vuex-persistedstate": "3.1.0",
 		"web-push": "3.4.4",
-		"webpack": "5.0.0-beta.28",
+		"webpack": "5.1.3",
 		"webpack-cli": "3.3.12",
-		"websocket": "1.0.31",
+		"websocket": "1.0.32",
 		"ws": "7.3.1",
 		"xev": "2.0.1"
 	},

src/client/.eslintrc

@@ -0,0 +1,12 @@
+{
+	"globals": {
+		"_DEV_": false,
+		"_LANGS_": false,
+		"_VERSION_": false,
+		"_ENV_": false,
+		"_PERF_PREFIX_": false,
+		"_DATA_TRANSFER_DRIVE_FILE_": false,
+		"_DATA_TRANSFER_DRIVE_FOLDER_": false,
+		"_DATA_TRANSFER_DECK_COLUMN_": false
+	}
+}

src/client/@types/global.d.ts

@@ -0,0 +1,8 @@
+declare const _LANGS_: string[];
+declare const _VERSION_: string;
+declare const _ENV_: string;
+declare const _DEV_: boolean;
+declare const _PERF_PREFIX_: string;
+declare const _DATA_TRANSFER_DRIVE_FILE_: string;
+declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
+declare const _DATA_TRANSFER_DECK_COLUMN_: string;

src/client/@types/vuex-shim.d.ts

@@ -0,0 +1,11 @@
+import { ComponentCustomProperties } from 'vue';
+import { Store } from 'vuex';
+
+declare module '@vue/runtime-core' {
+	interface State {
+	}
+
+	interface ComponentCustomProperties {
+		$store: Store<State>
+	}
+}