refactor: use Vite to build instead of webpack (#8575)
* update stream.ts * https://github.com/misskey-dev/misskey/pull/7769#issuecomment-917542339 * fix lint * clean up? * add app * fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * ✌️ * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * ✌️ * clean up config * typesを戻した * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * clean up * clean up * キャッシュ対策 * Truncate push notification message * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * i18n.ts * update * ✌️ * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * URLをsw.jsに戻す * clean up * wip * wip * wip * wip * wip * wip * ✌️ * use import * fix * install rollup * use defineAsyncComponent. * fix emojilist * wip use defineAsyncComponent * popup(import -> popup(defineAsyncComponent(() => import * draggable? * fix init import * clean up * fix router * add comment * ✌️ * ✌️ * ✌️ * remove webpack * update vite * fix boot sequence * Revert "fix boot sequence" This reverts commit e893dbf37aed83bf9f12e427d98c78a7065b4a39. * revert boot import * never make two app div * ; * remove console.log * change clientEntry sequence * fix * Revert "fix" This reverts commit 12741b3d89950a31dbb1bb81477ddb27b0e9951a. * fix * add comment https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 * add log * add comment Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
parent
6ed010b192
commit
a89003b57a
@ -37,7 +37,6 @@ gulp.task('copy:client:locales', cb => {
|
|||||||
|
|
||||||
gulp.task('build:backend:script', () => {
|
gulp.task('build:backend:script', () => {
|
||||||
return gulp.src(['./packages/backend/src/server/web/boot.js', './packages/backend/src/server/web/bios.js', './packages/backend/src/server/web/cli.js'])
|
return gulp.src(['./packages/backend/src/server/web/boot.js', './packages/backend/src/server/web/bios.js', './packages/backend/src/server/web/cli.js'])
|
||||||
.pipe(replace('VERSION', JSON.stringify(meta.version)))
|
|
||||||
.pipe(replace('LANGS', JSON.stringify(Object.keys(locales))))
|
.pipe(replace('LANGS', JSON.stringify(Object.keys(locales))))
|
||||||
.pipe(terser({
|
.pipe(terser({
|
||||||
toplevel: true
|
toplevel: true
|
||||||
|
@ -25,6 +25,7 @@ const path = process.env.NODE_ENV === 'test'
|
|||||||
|
|
||||||
export default function load() {
|
export default function load() {
|
||||||
const meta = JSON.parse(fs.readFileSync(`${_dirname}/../../../../built/meta.json`, 'utf-8'));
|
const meta = JSON.parse(fs.readFileSync(`${_dirname}/../../../../built/meta.json`, 'utf-8'));
|
||||||
|
const clientManifest = JSON.parse(fs.readFileSync(`${_dirname}/../../../../built/_client_dist_/manifest.json`, 'utf-8'));
|
||||||
const config = yaml.load(fs.readFileSync(path, 'utf-8')) as Source;
|
const config = yaml.load(fs.readFileSync(path, 'utf-8')) as Source;
|
||||||
|
|
||||||
const mixin = {} as Mixin;
|
const mixin = {} as Mixin;
|
||||||
@ -45,6 +46,7 @@ export default function load() {
|
|||||||
mixin.authUrl = `${mixin.scheme}://${mixin.host}/auth`;
|
mixin.authUrl = `${mixin.scheme}://${mixin.host}/auth`;
|
||||||
mixin.driveUrl = `${mixin.scheme}://${mixin.host}/files`;
|
mixin.driveUrl = `${mixin.scheme}://${mixin.host}/files`;
|
||||||
mixin.userAgent = `Misskey/${meta.version} (${config.url})`;
|
mixin.userAgent = `Misskey/${meta.version} (${config.url})`;
|
||||||
|
mixin.clientEntry = clientManifest['src/init.ts'].file.replace(/^_client_dist_\//, '');
|
||||||
|
|
||||||
if (!config.redis.prefix) config.redis.prefix = mixin.host;
|
if (!config.redis.prefix) config.redis.prefix = mixin.host;
|
||||||
|
|
||||||
|
@ -80,6 +80,7 @@ export type Mixin = {
|
|||||||
authUrl: string;
|
authUrl: string;
|
||||||
driveUrl: string;
|
driveUrl: string;
|
||||||
userAgent: string;
|
userAgent: string;
|
||||||
|
clientEntry: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Config = Source & Mixin;
|
export type Config = Source & Mixin;
|
||||||
|
@ -58,15 +58,11 @@
|
|||||||
? `?salt=${localStorage.getItem('salt')}`
|
? `?salt=${localStorage.getItem('salt')}`
|
||||||
: '';
|
: '';
|
||||||
|
|
||||||
const script = document.createElement('script');
|
import(`/assets/${CLIENT_ENTRY}${salt}`)
|
||||||
script.setAttribute('src', `/assets/app.${v}.js${salt}`);
|
.catch(async () => {
|
||||||
script.setAttribute('async', 'true');
|
|
||||||
script.setAttribute('defer', 'true');
|
|
||||||
script.addEventListener('error', async () => {
|
|
||||||
await checkUpdate();
|
await checkUpdate();
|
||||||
renderError('APP_FETCH_FAILED');
|
renderError('APP_FETCH_FAILED');
|
||||||
});
|
})
|
||||||
document.head.appendChild(script);
|
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
//#region Theme
|
//#region Theme
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
|
|
||||||
import { dirname } from 'node:path';
|
import { dirname } from 'node:path';
|
||||||
import { fileURLToPath } from 'node:url';
|
import { fileURLToPath } from 'node:url';
|
||||||
|
import { PathOrFileDescriptor, readFileSync } from 'node:fs';
|
||||||
import ms from 'ms';
|
import ms from 'ms';
|
||||||
import Koa from 'koa';
|
import Koa from 'koa';
|
||||||
import Router from '@koa/router';
|
import Router from '@koa/router';
|
||||||
@ -73,6 +74,9 @@ app.use(views(_dirname + '/views', {
|
|||||||
extension: 'pug',
|
extension: 'pug',
|
||||||
options: {
|
options: {
|
||||||
version: config.version,
|
version: config.version,
|
||||||
|
clientEntry: () => process.env.NODE_ENV === 'production' ?
|
||||||
|
config.clientEntry :
|
||||||
|
JSON.parse(readFileSync(`${_dirname}/../../../../../built/_client_dist_/manifest.json`, 'utf-8'))['src/init.ts'].file.replace(/^_client_dist_\//, ''),
|
||||||
config,
|
config,
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
@ -50,6 +50,10 @@ html
|
|||||||
style
|
style
|
||||||
include ../style.css
|
include ../style.css
|
||||||
|
|
||||||
|
script.
|
||||||
|
var VERSION = "#{version}";
|
||||||
|
var CLIENT_ENTRY = "#{clientEntry()}";
|
||||||
|
|
||||||
script
|
script
|
||||||
include ../boot.js
|
include ../boot.js
|
||||||
|
|
||||||
|
5
packages/client/@types/theme.d.ts
vendored
Normal file
5
packages/client/@types/theme.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { Theme } from '../src/scripts/theme';
|
||||||
|
|
||||||
|
declare module '@/themes/*.json5' {
|
||||||
|
export = Theme;
|
||||||
|
}
|
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"watch": "webpack --watch",
|
"watch": "vite build --watch --mode development",
|
||||||
"build": "webpack",
|
"build": "vite build",
|
||||||
"lint": "eslint --quiet \"src/**/*.{ts,vue}\""
|
"lint": "eslint --quiet \"src/**/*.{ts,vue}\""
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
@ -12,8 +12,11 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@discordapp/twemoji": "13.1.1",
|
"@discordapp/twemoji": "13.1.1",
|
||||||
"@fortawesome/fontawesome-free": "6.1.1",
|
"@fortawesome/fontawesome-free": "6.1.1",
|
||||||
|
"@rollup/plugin-alias": "3.1.9",
|
||||||
|
"@rollup/plugin-json": "4.1.0",
|
||||||
"@syuilo/aiscript": "0.11.1",
|
"@syuilo/aiscript": "0.11.1",
|
||||||
"@typescript-eslint/parser": "5.20.0",
|
"@typescript-eslint/parser": "5.20.0",
|
||||||
|
"@vitejs/plugin-vue": "2.3.1",
|
||||||
"@vue/compiler-sfc": "3.2.33",
|
"@vue/compiler-sfc": "3.2.33",
|
||||||
"abort-controller": "3.0.0",
|
"abort-controller": "3.0.0",
|
||||||
"autobind-decorator": "2.4.0",
|
"autobind-decorator": "2.4.0",
|
||||||
@ -28,8 +31,6 @@
|
|||||||
"chartjs-plugin-zoom": "1.2.1",
|
"chartjs-plugin-zoom": "1.2.1",
|
||||||
"compare-versions": "4.1.3",
|
"compare-versions": "4.1.3",
|
||||||
"content-disposition": "0.5.4",
|
"content-disposition": "0.5.4",
|
||||||
"css-loader": "6.7.1",
|
|
||||||
"cssnano": "5.1.7",
|
|
||||||
"date-fns": "2.28.0",
|
"date-fns": "2.28.0",
|
||||||
"escape-regexp": "0.0.1",
|
"escape-regexp": "0.0.1",
|
||||||
"eslint": "8.14.0",
|
"eslint": "8.14.0",
|
||||||
@ -40,7 +41,6 @@
|
|||||||
"idb-keyval": "6.1.0",
|
"idb-keyval": "6.1.0",
|
||||||
"insert-text-at-cursor": "0.3.0",
|
"insert-text-at-cursor": "0.3.0",
|
||||||
"json5": "2.2.1",
|
"json5": "2.2.1",
|
||||||
"json5-loader": "4.0.1",
|
|
||||||
"katex": "0.15.3",
|
"katex": "0.15.3",
|
||||||
"matter-js": "0.18.0",
|
"matter-js": "0.18.0",
|
||||||
"mfm-js": "0.21.0",
|
"mfm-js": "0.21.0",
|
||||||
@ -51,8 +51,6 @@
|
|||||||
"parse5": "6.0.1",
|
"parse5": "6.0.1",
|
||||||
"photoswipe": "5.2.4",
|
"photoswipe": "5.2.4",
|
||||||
"portscanner": "2.2.0",
|
"portscanner": "2.2.0",
|
||||||
"postcss": "8.4.12",
|
|
||||||
"postcss-loader": "6.2.1",
|
|
||||||
"prismjs": "1.28.0",
|
"prismjs": "1.28.0",
|
||||||
"private-ip": "2.3.3",
|
"private-ip": "2.3.3",
|
||||||
"promise-limit": "2.7.0",
|
"promise-limit": "2.7.0",
|
||||||
@ -63,19 +61,17 @@
|
|||||||
"random-seed": "0.3.0",
|
"random-seed": "0.3.0",
|
||||||
"reflect-metadata": "0.1.13",
|
"reflect-metadata": "0.1.13",
|
||||||
"rndstr": "1.0.0",
|
"rndstr": "1.0.0",
|
||||||
|
"rollup": "2.70.2",
|
||||||
"s-age": "1.1.2",
|
"s-age": "1.1.2",
|
||||||
"sass": "1.50.1",
|
"sass": "1.50.1",
|
||||||
"sass-loader": "12.6.0",
|
|
||||||
"seedrandom": "3.0.5",
|
"seedrandom": "3.0.5",
|
||||||
"strict-event-emitter-types": "2.0.0",
|
"strict-event-emitter-types": "2.0.0",
|
||||||
"stringz": "2.1.0",
|
"stringz": "2.1.0",
|
||||||
"style-loader": "3.3.1",
|
|
||||||
"syuilo-password-strength": "0.0.1",
|
"syuilo-password-strength": "0.0.1",
|
||||||
"textarea-caret": "3.1.0",
|
"textarea-caret": "3.1.0",
|
||||||
"three": "0.139.2",
|
"three": "0.139.2",
|
||||||
"throttle-debounce": "4.0.1",
|
"throttle-debounce": "4.0.1",
|
||||||
"tinycolor2": "1.4.2",
|
"tinycolor2": "1.4.2",
|
||||||
"ts-loader": "9.2.8",
|
|
||||||
"tsc-alias": "1.5.0",
|
"tsc-alias": "1.5.0",
|
||||||
"tsconfig-paths": "3.14.1",
|
"tsconfig-paths": "3.14.1",
|
||||||
"twemoji-parser": "14.0.0",
|
"twemoji-parser": "14.0.0",
|
||||||
@ -83,15 +79,11 @@
|
|||||||
"uuid": "8.3.2",
|
"uuid": "8.3.2",
|
||||||
"v-debounce": "0.1.2",
|
"v-debounce": "0.1.2",
|
||||||
"vanilla-tilt": "1.7.2",
|
"vanilla-tilt": "1.7.2",
|
||||||
|
"vite": "2.9.6",
|
||||||
"vue": "3.2.33",
|
"vue": "3.2.33",
|
||||||
"vue-loader": "17.0.0",
|
|
||||||
"vue-prism-editor": "2.0.0-alpha.2",
|
"vue-prism-editor": "2.0.0-alpha.2",
|
||||||
"vue-router": "4.0.14",
|
"vue-router": "4.0.14",
|
||||||
"vue-style-loader": "4.1.3",
|
|
||||||
"vue-svg-loader": "0.17.0-beta.2",
|
|
||||||
"vuedraggable": "4.0.1",
|
"vuedraggable": "4.0.1",
|
||||||
"webpack": "5.72.0",
|
|
||||||
"webpack-cli": "4.9.2",
|
|
||||||
"websocket": "1.0.34",
|
"websocket": "1.0.34",
|
||||||
"ws": "8.5.0"
|
"ws": "8.5.0"
|
||||||
},
|
},
|
||||||
@ -113,8 +105,6 @@
|
|||||||
"@types/throttle-debounce": "4.0.0",
|
"@types/throttle-debounce": "4.0.0",
|
||||||
"@types/tinycolor2": "1.4.3",
|
"@types/tinycolor2": "1.4.3",
|
||||||
"@types/uuid": "8.3.4",
|
"@types/uuid": "8.3.4",
|
||||||
"@types/webpack": "5.28.0",
|
|
||||||
"@types/webpack-stream": "3.2.12",
|
|
||||||
"@types/websocket": "1.0.5",
|
"@types/websocket": "1.0.5",
|
||||||
"@types/ws": "8.5.3",
|
"@types/ws": "8.5.3",
|
||||||
"@typescript-eslint/eslint-plugin": "5.20.0",
|
"@typescript-eslint/eslint-plugin": "5.20.0",
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { del, get, set } from '@/scripts/idb-proxy';
|
import { del, get, set } from '@/scripts/idb-proxy';
|
||||||
import { reactive } from 'vue';
|
import { defineAsyncComponent, reactive } from 'vue';
|
||||||
import * as misskey from 'misskey-js';
|
import * as misskey from 'misskey-js';
|
||||||
import { apiUrl } from '@/config';
|
import { apiUrl } from '@/config';
|
||||||
import { waiting, api, popup, popupMenu, success, alert } from '@/os';
|
import { waiting, api, popup, popupMenu, success, alert } from '@/os';
|
||||||
@ -141,7 +141,7 @@ export async function openAccountMenu(opts: {
|
|||||||
onChoose?: (account: misskey.entities.UserDetailed) => void;
|
onChoose?: (account: misskey.entities.UserDetailed) => void;
|
||||||
}, ev: MouseEvent) {
|
}, ev: MouseEvent) {
|
||||||
function showSigninDialog() {
|
function showSigninDialog() {
|
||||||
popup(import('@/components/signin-dialog.vue'), {}, {
|
popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {}, {
|
||||||
done: res => {
|
done: res => {
|
||||||
addAccount(res.id, res.i);
|
addAccount(res.id, res.i);
|
||||||
success();
|
success();
|
||||||
@ -150,7 +150,7 @@ export async function openAccountMenu(opts: {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function createAccount() {
|
function createAccount() {
|
||||||
popup(import('@/components/signup-dialog.vue'), {}, {
|
popup(defineAsyncComponent(() => import('@/components/signup-dialog.vue')), {}, {
|
||||||
done: res => {
|
done: res => {
|
||||||
addAccount(res.id, res.i);
|
addAccount(res.id, res.i);
|
||||||
switchAccountWithToken(res.i);
|
switchAccountWithToken(res.i);
|
||||||
|
@ -43,20 +43,20 @@ export default defineComponent({
|
|||||||
MkSwitch,
|
MkSwitch,
|
||||||
},
|
},
|
||||||
|
|
||||||
emits: ['resolved'],
|
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
report: {
|
report: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
|
||||||
|
emits: ['resolved'],
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
forward: this.report.forwarded,
|
forward: this.report.forwarded,
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
acct,
|
acct,
|
||||||
|
@ -42,7 +42,7 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
||||||
import * as tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
|
|
||||||
withDefaults(defineProps<{
|
withDefaults(defineProps<{
|
||||||
thickness: number;
|
thickness: number;
|
||||||
|
@ -29,7 +29,9 @@ import {
|
|||||||
import 'chartjs-adapter-date-fns';
|
import 'chartjs-adapter-date-fns';
|
||||||
import { enUS } from 'date-fns/locale';
|
import { enUS } from 'date-fns/locale';
|
||||||
import zoomPlugin from 'chartjs-plugin-zoom';
|
import zoomPlugin from 'chartjs-plugin-zoom';
|
||||||
import gradient from 'chartjs-plugin-gradient';
|
// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114242002
|
||||||
|
// We can't use gradient because Vite throws a error.
|
||||||
|
//import gradient from 'chartjs-plugin-gradient';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
import MkChartTooltip from '@/components/chart-tooltip.vue';
|
import MkChartTooltip from '@/components/chart-tooltip.vue';
|
||||||
@ -50,7 +52,7 @@ Chart.register(
|
|||||||
SubTitle,
|
SubTitle,
|
||||||
Filler,
|
Filler,
|
||||||
zoomPlugin,
|
zoomPlugin,
|
||||||
gradient,
|
//gradient,
|
||||||
);
|
);
|
||||||
|
|
||||||
const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
|
const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
|
||||||
@ -221,7 +223,7 @@ export default defineComponent({
|
|||||||
borderJoinStyle: 'round',
|
borderJoinStyle: 'round',
|
||||||
borderRadius: props.bar ? 3 : undefined,
|
borderRadius: props.bar ? 3 : undefined,
|
||||||
backgroundColor: props.bar ? (x.color ? x.color : getColor(i)) : alpha(x.color ? x.color : getColor(i), 0.1),
|
backgroundColor: props.bar ? (x.color ? x.color : getColor(i)) : alpha(x.color ? x.color : getColor(i), 0.1),
|
||||||
gradient: props.bar ? undefined : {
|
/*gradient: props.bar ? undefined : {
|
||||||
backgroundColor: {
|
backgroundColor: {
|
||||||
axis: 'y',
|
axis: 'y',
|
||||||
colors: {
|
colors: {
|
||||||
@ -229,7 +231,7 @@ export default defineComponent({
|
|||||||
[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.2),
|
[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.2),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},*/
|
||||||
barPercentage: 0.9,
|
barPercentage: 0.9,
|
||||||
categoryPercentage: 0.9,
|
categoryPercentage: 0.9,
|
||||||
fill: x.type === 'area',
|
fill: x.type === 'area',
|
||||||
@ -340,7 +342,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
} : undefined,
|
} : undefined,
|
||||||
gradient,
|
//gradient,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [{
|
plugins: [{
|
||||||
|
@ -31,7 +31,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, ref } from 'vue';
|
import { computed, defineAsyncComponent, ref } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import copyToClipboard from '@/scripts/copy-to-clipboard';
|
import copyToClipboard from '@/scripts/copy-to-clipboard';
|
||||||
import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
|
import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
|
||||||
@ -133,7 +133,7 @@ function rename() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function describe() {
|
function describe() {
|
||||||
os.popup(import('@/components/media-caption.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
|
||||||
title: i18n.ts.describeFile,
|
title: i18n.ts.describeFile,
|
||||||
input: {
|
input: {
|
||||||
placeholder: i18n.ts.inputNewDescription,
|
placeholder: i18n.ts.inputNewDescription,
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, ref } from 'vue';
|
import { computed, defineAsyncComponent, ref } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
@ -230,7 +230,7 @@ function onContextmenu(ev: MouseEvent) {
|
|||||||
text: i18n.ts.openInWindow,
|
text: i18n.ts.openInWindow,
|
||||||
icon: 'fas fa-window-restore',
|
icon: 'fas fa-window-restore',
|
||||||
action: () => {
|
action: () => {
|
||||||
os.popup(import('./drive-window.vue'), {
|
os.popup(defineAsyncComponent(() => import('./drive-window.vue')), {
|
||||||
initialFolder: props.folder
|
initialFolder: props.folder
|
||||||
}, {
|
}, {
|
||||||
}, 'closed');
|
}, 'closed');
|
||||||
|
@ -61,7 +61,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<header class="_acrylic">{{ i18n.ts.emoji }}</header>
|
<header class="_acrylic">{{ i18n.ts.emoji }}</header>
|
||||||
<XSection v-for="category in categories" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
|
<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
|
import { computed, defineAsyncComponent, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@ -112,7 +112,7 @@ export default defineComponent({
|
|||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
|
|
||||||
const tooltipShowing = ref(true);
|
const tooltipShowing = ref(true);
|
||||||
os.popup(import('@/components/ui/tooltip.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/ui/tooltip.vue')), {
|
||||||
showing: tooltipShowing,
|
showing: tooltipShowing,
|
||||||
text: computed(() => {
|
text: computed(() => {
|
||||||
return props.textConverter(finalValue.value);
|
return props.textConverter(finalValue.value);
|
||||||
|
@ -38,7 +38,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject } from 'vue';
|
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject } from 'vue';
|
||||||
import * as tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import { popupMenu } from '@/os';
|
import { popupMenu } from '@/os';
|
||||||
import { url } from '@/config';
|
import { url } from '@/config';
|
||||||
import { scrollToTop } from '@/scripts/scroll';
|
import { scrollToTop } from '@/scripts/scroll';
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref } from 'vue';
|
import { defineAsyncComponent, defineComponent, ref } from 'vue';
|
||||||
import { toUnicode as decodePunycode } from 'punycode/';
|
import { toUnicode as decodePunycode } from 'punycode/';
|
||||||
import { url as local } from '@/config';
|
import { url as local } from '@/config';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
@ -50,7 +50,7 @@ export default defineComponent({
|
|||||||
const el = ref();
|
const el = ref();
|
||||||
|
|
||||||
useTooltip(el, (showing) => {
|
useTooltip(el, (showing) => {
|
||||||
os.popup(import('@/components/url-preview-popup.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/url-preview-popup.vue')), {
|
||||||
showing,
|
showing,
|
||||||
url: props.url,
|
url: props.url,
|
||||||
source: el.value,
|
source: el.value,
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { } from 'vue';
|
import { defineAsyncComponent } from 'vue';
|
||||||
import { url as local } from '@/config';
|
import { url as local } from '@/config';
|
||||||
import { useTooltip } from '@/scripts/use-tooltip';
|
import { useTooltip } from '@/scripts/use-tooltip';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
@ -26,7 +26,7 @@ const target = self ? null : '_blank';
|
|||||||
const el = $ref();
|
const el = $ref();
|
||||||
|
|
||||||
useTooltip($$(el), (showing) => {
|
useTooltip($$(el), (showing) => {
|
||||||
os.popup(import('@/components/url-preview-popup.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/url-preview-popup.vue')), {
|
||||||
showing,
|
showing,
|
||||||
url: props.url,
|
url: props.url,
|
||||||
source: el,
|
source: el,
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import * as tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import { toUnicode } from 'punycode';
|
import { toUnicode } from 'punycode';
|
||||||
import { host as localHost } from '@/config';
|
import { host as localHost } from '@/config';
|
||||||
import { $i } from '@/account';
|
import { $i } from '@/account';
|
||||||
|
@ -88,7 +88,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
async describe(file) {
|
async describe(file) {
|
||||||
os.popup(import("@/components/media-caption.vue"), {
|
os.popup(defineAsyncComponent(() => import("@/components/media-caption.vue")), {
|
||||||
title: this.$ts.describeFile,
|
title: this.$ts.describeFile,
|
||||||
input: {
|
input: {
|
||||||
placeholder: this.$ts.inputNewDescription,
|
placeholder: this.$ts.inputNewDescription,
|
||||||
|
@ -62,7 +62,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { inject, watch, nextTick, onMounted } from 'vue';
|
import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
|
||||||
import * as mfm from 'mfm-js';
|
import * as mfm from 'mfm-js';
|
||||||
import * as misskey from 'misskey-js';
|
import * as misskey from 'misskey-js';
|
||||||
import insertTextAtCursor from 'insert-text-at-cursor';
|
import insertTextAtCursor from 'insert-text-at-cursor';
|
||||||
@ -384,7 +384,7 @@ function setVisibility() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
os.popup(import('./visibility-picker.vue'), {
|
os.popup(defineAsyncComponent(() => import('./visibility-picker.vue')), {
|
||||||
currentVisibility: visibility,
|
currentVisibility: visibility,
|
||||||
currentLocalOnly: localOnly,
|
currentLocalOnly: localOnly,
|
||||||
src: visibilityButton,
|
src: visibilityButton,
|
||||||
|
@ -46,7 +46,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||||
import { toUnicode } from 'punycode/';
|
import { toUnicode } from 'punycode/';
|
||||||
import MkButton from '@/components/ui/button.vue';
|
import MkButton from '@/components/ui/button.vue';
|
||||||
import MkInput from '@/components/form/input.vue';
|
import MkInput from '@/components/form/input.vue';
|
||||||
@ -224,7 +224,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
resetPassword() {
|
resetPassword() {
|
||||||
os.popup(import('@/components/forgot-password.vue'), {}, {
|
os.popup(defineAsyncComponent(() => import('@/components/forgot-password.vue')), {}, {
|
||||||
}, 'closed');
|
}, 'closed');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -67,7 +67,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, defineAsyncComponent } from 'vue';
|
import { defineComponent, defineAsyncComponent } from 'vue';
|
||||||
const getPasswordStrength = require('syuilo-password-strength');
|
const getPasswordStrength = await import('syuilo-password-strength');
|
||||||
import { toUnicode } from 'punycode/';
|
import { toUnicode } from 'punycode/';
|
||||||
import { host, url } from '@/config';
|
import { host, url } from '@/config';
|
||||||
import MkButton from './ui/button.vue';
|
import MkButton from './ui/button.vue';
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import * as tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
|
|
||||||
const localStoragePrefix = 'ui:folder:';
|
const localStoragePrefix = 'ui:folder:';
|
||||||
|
|
||||||
|
@ -37,7 +37,7 @@ import { widgets as widgetDefs } from '@/widgets';
|
|||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
|
XDraggable: defineAsyncComponent(() => import('vuedraggable')),
|
||||||
MkSelect,
|
MkSelect,
|
||||||
MkButton,
|
MkButton,
|
||||||
},
|
},
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
// TODO: useTooltip関数使うようにしたい
|
// TODO: useTooltip関数使うようにしたい
|
||||||
// ただディレクティブ内でonUnmountedなどのcomposition api使えるのか不明
|
// ただディレクティブ内でonUnmountedなどのcomposition api使えるのか不明
|
||||||
|
|
||||||
import { Directive, ref } from 'vue';
|
import { defineAsyncComponent, Directive, ref } from 'vue';
|
||||||
import { isTouchUsing } from '@/scripts/touch';
|
import { isTouchUsing } from '@/scripts/touch';
|
||||||
import { popup, alert } from '@/os';
|
import { popup, alert } from '@/os';
|
||||||
|
|
||||||
@ -45,7 +45,7 @@ export default {
|
|||||||
if (self.text == null) return;
|
if (self.text == null) return;
|
||||||
|
|
||||||
const showing = ref(true);
|
const showing = ref(true);
|
||||||
popup(import('@/components/ui/tooltip.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/ui/tooltip.vue')), {
|
||||||
showing,
|
showing,
|
||||||
text: self.text,
|
text: self.text,
|
||||||
targetElement: el,
|
targetElement: el,
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Directive, ref } from 'vue';
|
import { defineAsyncComponent, Directive, ref } from 'vue';
|
||||||
import autobind from 'autobind-decorator';
|
import autobind from 'autobind-decorator';
|
||||||
import { popup } from '@/os';
|
import { popup } from '@/os';
|
||||||
|
|
||||||
@ -24,7 +24,7 @@ export class UserPreview {
|
|||||||
|
|
||||||
const showing = ref(true);
|
const showing = ref(true);
|
||||||
|
|
||||||
popup(import('@/components/user-preview.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/user-preview.vue')), {
|
||||||
showing,
|
showing,
|
||||||
q: this.user,
|
q: this.user,
|
||||||
source: this.el
|
source: this.el
|
||||||
|
@ -13,9 +13,9 @@ if (localStorage.getItem('accounts') != null) {
|
|||||||
}
|
}
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
import { computed, createApp, watch, markRaw, version as vueVersion } from 'vue';
|
import { computed, createApp, watch, markRaw, version as vueVersion, defineAsyncComponent } from 'vue';
|
||||||
import compareVersions from 'compare-versions';
|
import compareVersions from 'compare-versions';
|
||||||
import * as JSON5 from 'json5';
|
import JSON5 from 'json5';
|
||||||
|
|
||||||
import widgets from '@/widgets';
|
import widgets from '@/widgets';
|
||||||
import directives from '@/directives';
|
import directives from '@/directives';
|
||||||
@ -168,14 +168,14 @@ fetchInstanceMetaPromise.then(() => {
|
|||||||
initializeSw();
|
initializeSw();
|
||||||
});
|
});
|
||||||
|
|
||||||
const app = createApp(await (
|
const app = createApp(
|
||||||
window.location.search === '?zen' ? import('@/ui/zen.vue') :
|
window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
|
||||||
!$i ? import('@/ui/visitor.vue') :
|
!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
|
||||||
ui === 'deck' ? import('@/ui/deck.vue') :
|
ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
|
||||||
ui === 'desktop' ? import('@/ui/desktop.vue') :
|
ui === 'desktop' ? defineAsyncComponent(() => import('@/ui/desktop.vue')) :
|
||||||
ui === 'classic' ? import('@/ui/classic.vue') :
|
ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
|
||||||
import('@/ui/universal.vue')
|
defineAsyncComponent(() => import('@/ui/universal.vue'))
|
||||||
).then(x => x.default));
|
);
|
||||||
|
|
||||||
if (_DEV_) {
|
if (_DEV_) {
|
||||||
app.config.performance = true;
|
app.config.performance = true;
|
||||||
@ -203,8 +203,24 @@ if (splash) splash.addEventListener('transitionend', () => {
|
|||||||
splash.remove();
|
splash.remove();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
|
||||||
|
// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
|
||||||
|
const rootEl = (() => {
|
||||||
|
const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
|
||||||
|
|
||||||
|
const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
|
||||||
|
|
||||||
|
if (currentEl) {
|
||||||
|
console.warn('multiple import detected');
|
||||||
|
return currentEl;
|
||||||
|
}
|
||||||
|
|
||||||
const rootEl = document.createElement('div');
|
const rootEl = document.createElement('div');
|
||||||
|
rootEl.id = MISSKEY_MOUNT_DIV_ID;
|
||||||
document.body.appendChild(rootEl);
|
document.body.appendChild(rootEl);
|
||||||
|
return rootEl;
|
||||||
|
})();
|
||||||
|
|
||||||
app.mount(rootEl);
|
app.mount(rootEl);
|
||||||
|
|
||||||
// boot.jsのやつを解除
|
// boot.jsのやつを解除
|
||||||
@ -230,7 +246,7 @@ if (lastVersion !== version) {
|
|||||||
if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
|
if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
|
||||||
// ログインしてる場合だけ
|
// ログインしてる場合だけ
|
||||||
if ($i) {
|
if ($i) {
|
||||||
popup(import('@/components/updated.vue'), {}, {}, 'closed');
|
popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
@ -110,10 +110,6 @@ export function promiseDialog<T extends Promise<any>>(
|
|||||||
return promise;
|
return promise;
|
||||||
}
|
}
|
||||||
|
|
||||||
function isModule(x: any): x is typeof import('*.vue') {
|
|
||||||
return x.default != null;
|
|
||||||
}
|
|
||||||
|
|
||||||
let popupIdCount = 0;
|
let popupIdCount = 0;
|
||||||
export const popups = ref([]) as Ref<{
|
export const popups = ref([]) as Ref<{
|
||||||
id: any;
|
id: any;
|
||||||
@ -131,10 +127,7 @@ export function claimZIndex(priority: 'low' | 'middle' | 'high' = 'low'): number
|
|||||||
return zIndexes[priority];
|
return zIndexes[priority];
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function popup(component: Component | typeof import('*.vue') | Promise<Component | typeof import('*.vue')>, props: Record<string, any>, events = {}, disposeEvent?: string) {
|
export async function popup(component: Component, props: Record<string, any>, events = {}, disposeEvent?: string) {
|
||||||
if (component.then) component = await component;
|
|
||||||
|
|
||||||
if (isModule(component)) component = component.default;
|
|
||||||
markRaw(component);
|
markRaw(component);
|
||||||
|
|
||||||
const id = ++popupIdCount;
|
const id = ++popupIdCount;
|
||||||
@ -163,7 +156,7 @@ export async function popup(component: Component | typeof import('*.vue') | Prom
|
|||||||
|
|
||||||
export function pageWindow(path: string) {
|
export function pageWindow(path: string) {
|
||||||
const { component, props } = resolve(path);
|
const { component, props } = resolve(path);
|
||||||
popup(import('@/components/page-window.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/page-window.vue')), {
|
||||||
initialPath: path,
|
initialPath: path,
|
||||||
initialComponent: markRaw(component),
|
initialComponent: markRaw(component),
|
||||||
initialProps: props,
|
initialProps: props,
|
||||||
@ -172,7 +165,7 @@ export function pageWindow(path: string) {
|
|||||||
|
|
||||||
export function modalPageWindow(path: string) {
|
export function modalPageWindow(path: string) {
|
||||||
const { component, props } = resolve(path);
|
const { component, props } = resolve(path);
|
||||||
popup(import('@/components/modal-page-window.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/modal-page-window.vue')), {
|
||||||
initialPath: path,
|
initialPath: path,
|
||||||
initialComponent: markRaw(component),
|
initialComponent: markRaw(component),
|
||||||
initialProps: props,
|
initialProps: props,
|
||||||
@ -180,7 +173,7 @@ export function modalPageWindow(path: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function toast(message: string) {
|
export function toast(message: string) {
|
||||||
popup(import('@/components/toast.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/toast.vue')), {
|
||||||
message
|
message
|
||||||
}, {}, 'closed');
|
}, {}, 'closed');
|
||||||
}
|
}
|
||||||
@ -191,7 +184,7 @@ export function alert(props: {
|
|||||||
text?: string | null;
|
text?: string | null;
|
||||||
}): Promise<void> {
|
}): Promise<void> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
popup(import('@/components/dialog.vue'), props, {
|
popup(defineAsyncComponent(() => import('@/components/dialog.vue')), props, {
|
||||||
done: result => {
|
done: result => {
|
||||||
resolve();
|
resolve();
|
||||||
},
|
},
|
||||||
@ -205,7 +198,7 @@ export function confirm(props: {
|
|||||||
text?: string | null;
|
text?: string | null;
|
||||||
}): Promise<{ canceled: boolean }> {
|
}): Promise<{ canceled: boolean }> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
popup(import('@/components/dialog.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
|
||||||
...props,
|
...props,
|
||||||
showCancelButton: true,
|
showCancelButton: true,
|
||||||
}, {
|
}, {
|
||||||
@ -226,7 +219,7 @@ export function inputText(props: {
|
|||||||
canceled: false; result: string;
|
canceled: false; result: string;
|
||||||
}> {
|
}> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
popup(import('@/components/dialog.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
|
||||||
title: props.title,
|
title: props.title,
|
||||||
text: props.text,
|
text: props.text,
|
||||||
input: {
|
input: {
|
||||||
@ -251,7 +244,7 @@ export function inputNumber(props: {
|
|||||||
canceled: false; result: number;
|
canceled: false; result: number;
|
||||||
}> {
|
}> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
popup(import('@/components/dialog.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
|
||||||
title: props.title,
|
title: props.title,
|
||||||
text: props.text,
|
text: props.text,
|
||||||
input: {
|
input: {
|
||||||
@ -276,7 +269,7 @@ export function inputDate(props: {
|
|||||||
canceled: false; result: Date;
|
canceled: false; result: Date;
|
||||||
}> {
|
}> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
popup(import('@/components/dialog.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
|
||||||
title: props.title,
|
title: props.title,
|
||||||
text: props.text,
|
text: props.text,
|
||||||
input: {
|
input: {
|
||||||
@ -313,7 +306,7 @@ export function select<C extends any = any>(props: {
|
|||||||
canceled: false; result: C;
|
canceled: false; result: C;
|
||||||
}> {
|
}> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
popup(import('@/components/dialog.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/dialog.vue')), {
|
||||||
title: props.title,
|
title: props.title,
|
||||||
text: props.text,
|
text: props.text,
|
||||||
select: {
|
select: {
|
||||||
@ -335,7 +328,7 @@ export function success() {
|
|||||||
window.setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
showing.value = false;
|
showing.value = false;
|
||||||
}, 1000);
|
}, 1000);
|
||||||
popup(import('@/components/waiting-dialog.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), {
|
||||||
success: true,
|
success: true,
|
||||||
showing: showing
|
showing: showing
|
||||||
}, {
|
}, {
|
||||||
@ -347,7 +340,7 @@ export function success() {
|
|||||||
export function waiting() {
|
export function waiting() {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const showing = ref(true);
|
const showing = ref(true);
|
||||||
popup(import('@/components/waiting-dialog.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), {
|
||||||
success: false,
|
success: false,
|
||||||
showing: showing
|
showing: showing
|
||||||
}, {
|
}, {
|
||||||
@ -358,7 +351,7 @@ export function waiting() {
|
|||||||
|
|
||||||
export function form(title, form) {
|
export function form(title, form) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
popup(import('@/components/form-dialog.vue'), { title, form }, {
|
popup(defineAsyncComponent(() => import('@/components/form-dialog.vue')), { title, form }, {
|
||||||
done: result => {
|
done: result => {
|
||||||
resolve(result);
|
resolve(result);
|
||||||
},
|
},
|
||||||
@ -368,7 +361,7 @@ export function form(title, form) {
|
|||||||
|
|
||||||
export async function selectUser() {
|
export async function selectUser() {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
popup(import('@/components/user-select-dialog.vue'), {}, {
|
popup(defineAsyncComponent(() => import('@/components/user-select-dialog.vue')), {}, {
|
||||||
ok: user => {
|
ok: user => {
|
||||||
resolve(user);
|
resolve(user);
|
||||||
},
|
},
|
||||||
@ -378,7 +371,7 @@ export async function selectUser() {
|
|||||||
|
|
||||||
export async function selectDriveFile(multiple: boolean) {
|
export async function selectDriveFile(multiple: boolean) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
popup(import('@/components/drive-select-dialog.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), {
|
||||||
type: 'file',
|
type: 'file',
|
||||||
multiple
|
multiple
|
||||||
}, {
|
}, {
|
||||||
@ -393,7 +386,7 @@ export async function selectDriveFile(multiple: boolean) {
|
|||||||
|
|
||||||
export async function selectDriveFolder(multiple: boolean) {
|
export async function selectDriveFolder(multiple: boolean) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
popup(import('@/components/drive-select-dialog.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), {
|
||||||
type: 'folder',
|
type: 'folder',
|
||||||
multiple
|
multiple
|
||||||
}, {
|
}, {
|
||||||
@ -408,7 +401,7 @@ export async function selectDriveFolder(multiple: boolean) {
|
|||||||
|
|
||||||
export async function pickEmoji(src: HTMLElement | null, opts) {
|
export async function pickEmoji(src: HTMLElement | null, opts) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
popup(import('@/components/emoji-picker-dialog.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), {
|
||||||
src,
|
src,
|
||||||
...opts
|
...opts
|
||||||
}, {
|
}, {
|
||||||
@ -458,7 +451,7 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
|
|||||||
characterData: false,
|
characterData: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
openingEmojiPicker = await popup(import('@/components/emoji-picker-window.vue'), {
|
openingEmojiPicker = await popup(defineAsyncComponent(() => import('@/components/emoji-picker-window.vue')), {
|
||||||
src,
|
src,
|
||||||
...opts
|
...opts
|
||||||
}, {
|
}, {
|
||||||
@ -480,7 +473,7 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
|
|||||||
}) {
|
}) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let dispose;
|
let dispose;
|
||||||
popup(import('@/components/ui/popup-menu.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/ui/popup-menu.vue')), {
|
||||||
items,
|
items,
|
||||||
src,
|
src,
|
||||||
width: options?.width,
|
width: options?.width,
|
||||||
@ -501,7 +494,7 @@ export function contextMenu(items: MenuItem[] | Ref<MenuItem[]>, ev: MouseEvent)
|
|||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let dispose;
|
let dispose;
|
||||||
popup(import('@/components/ui/context-menu.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/ui/context-menu.vue')), {
|
||||||
items,
|
items,
|
||||||
ev,
|
ev,
|
||||||
}, {
|
}, {
|
||||||
|
@ -63,7 +63,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, defineComponent, ref, toRef } from 'vue';
|
import { computed, defineAsyncComponent, defineComponent, ref, toRef } from 'vue';
|
||||||
import MkButton from '@/components/ui/button.vue';
|
import MkButton from '@/components/ui/button.vue';
|
||||||
import MkInput from '@/components/form/input.vue';
|
import MkInput from '@/components/form/input.vue';
|
||||||
import MkPagination from '@/components/ui/pagination.vue';
|
import MkPagination from '@/components/ui/pagination.vue';
|
||||||
@ -130,7 +130,7 @@ const add = async (ev: MouseEvent) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const edit = (emoji) => {
|
const edit = (emoji) => {
|
||||||
os.popup(import('./emoji-edit-dialog.vue'), {
|
os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
|
||||||
emoji: emoji
|
emoji: emoji
|
||||||
}, {
|
}, {
|
||||||
done: result => {
|
done: result => {
|
||||||
|
@ -55,7 +55,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed } from 'vue';
|
import { computed, defineAsyncComponent } from 'vue';
|
||||||
import MkButton from '@/components/ui/button.vue';
|
import MkButton from '@/components/ui/button.vue';
|
||||||
import MkInput from '@/components/form/input.vue';
|
import MkInput from '@/components/form/input.vue';
|
||||||
import MkSelect from '@/components/form/select.vue';
|
import MkSelect from '@/components/form/select.vue';
|
||||||
@ -93,7 +93,7 @@ function clear() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function show(file) {
|
function show(file) {
|
||||||
os.popup(import('./file-dialog.vue'), {
|
os.popup(defineAsyncComponent(() => import('./file-dialog.vue')), {
|
||||||
fileId: file.id
|
fileId: file.id
|
||||||
}, {}, 'closed');
|
}, {}, 'closed');
|
||||||
}
|
}
|
||||||
|
@ -26,8 +26,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { defineExpose, ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import * as JSON5 from 'json5';
|
import JSON5 from 'json5';
|
||||||
import MkButton from '@/components/ui/button.vue';
|
import MkButton from '@/components/ui/button.vue';
|
||||||
import MkInput from '@/components/form/input.vue';
|
import MkInput from '@/components/form/input.vue';
|
||||||
import MkTextarea from '@/components/form/textarea.vue';
|
import MkTextarea from '@/components/form/textarea.vue';
|
||||||
|
@ -12,7 +12,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted } from 'vue';
|
import { defineAsyncComponent, onMounted } from 'vue';
|
||||||
import FormInput from '@/components/form/input.vue';
|
import FormInput from '@/components/form/input.vue';
|
||||||
import FormButton from '@/components/ui/button.vue';
|
import FormButton from '@/components/ui/button.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
@ -36,7 +36,7 @@ async function save() {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.token == null) {
|
if (props.token == null) {
|
||||||
os.popup(import('@/components/forgot-password.vue'), {}, {}, 'closed');
|
os.popup(defineAsyncComponent(() => import('@/components/forgot-password.vue')), {}, {}, 'closed');
|
||||||
router.push('/');
|
router.push('/');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||||
import FormSuspense from '@/components/form/suspense.vue';
|
import FormSuspense from '@/components/form/suspense.vue';
|
||||||
import FormButton from '@/components/ui/button.vue';
|
import FormButton from '@/components/ui/button.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
@ -78,7 +78,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
addExistingAccount() {
|
addExistingAccount() {
|
||||||
os.popup(import('@/components/signin-dialog.vue'), {}, {
|
os.popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {}, {
|
||||||
done: res => {
|
done: res => {
|
||||||
addAccount(res.id, res.i);
|
addAccount(res.id, res.i);
|
||||||
os.success();
|
os.success();
|
||||||
@ -87,7 +87,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
createAccount() {
|
createAccount() {
|
||||||
os.popup(import('@/components/signup-dialog.vue'), {}, {
|
os.popup(defineAsyncComponent(() => import('@/components/signup-dialog.vue')), {}, {
|
||||||
done: res => {
|
done: res => {
|
||||||
addAccount(res.id, res.i);
|
addAccount(res.id, res.i);
|
||||||
this.switchAccountWithToken(res.i);
|
this.switchAccountWithToken(res.i);
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||||
import FormLink from '@/components/form/link.vue';
|
import FormLink from '@/components/form/link.vue';
|
||||||
import FormButton from '@/components/ui/button.vue';
|
import FormButton from '@/components/ui/button.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
@ -34,7 +34,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
generateToken() {
|
generateToken() {
|
||||||
os.popup(import('@/components/token-generate-window.vue'), {}, {
|
os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {}, {
|
||||||
done: async result => {
|
done: async result => {
|
||||||
const { name, permissions } = result;
|
const { name, permissions } = result;
|
||||||
const { token } = await os.api('miauth/gen-token', {
|
const { token } = await os.api('miauth/gen-token', {
|
||||||
|
@ -35,7 +35,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import * as tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import FormLink from '@/components/form/link.vue';
|
import FormLink from '@/components/form/link.vue';
|
||||||
import FormSwitch from '@/components/form/switch.vue';
|
import FormSwitch from '@/components/form/switch.vue';
|
||||||
import FormSection from '@/components/form/section.vue';
|
import FormSection from '@/components/form/section.vue';
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||||
import FormButton from '@/components/ui/button.vue';
|
import FormButton from '@/components/ui/button.vue';
|
||||||
import FormLink from '@/components/form/link.vue';
|
import FormLink from '@/components/form/link.vue';
|
||||||
import FormSection from '@/components/form/section.vue';
|
import FormSection from '@/components/form/section.vue';
|
||||||
@ -52,7 +52,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
configure() {
|
configure() {
|
||||||
const includingTypes = notificationTypes.filter(x => !this.$i.mutingNotificationTypes.includes(x));
|
const includingTypes = notificationTypes.filter(x => !this.$i.mutingNotificationTypes.includes(x));
|
||||||
os.popup(import('@/components/notification-setting-window.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
|
||||||
includingTypes,
|
includingTypes,
|
||||||
showGlobalToggle: false,
|
showGlobalToggle: false,
|
||||||
}, {
|
}, {
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||||
import { AiScript, parse } from '@syuilo/aiscript';
|
import { AiScript, parse } from '@syuilo/aiscript';
|
||||||
import { serialize } from '@syuilo/aiscript/built/serializer';
|
import { serialize } from '@syuilo/aiscript/built/serializer';
|
||||||
import { v4 as uuid } from 'uuid';
|
import { v4 as uuid } from 'uuid';
|
||||||
@ -94,7 +94,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
|
const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
|
||||||
os.popup(import('@/components/token-generate-window.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {
|
||||||
title: this.$ts.tokenRequested,
|
title: this.$ts.tokenRequested,
|
||||||
information: this.$ts.pluginTokenRequestedDescription,
|
information: this.$ts.pluginTokenRequestedDescription,
|
||||||
initialName: name,
|
initialName: name,
|
||||||
|
@ -54,7 +54,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { watch } from 'vue';
|
import { defineAsyncComponent, watch } from 'vue';
|
||||||
import XDraggable from 'vuedraggable';
|
import XDraggable from 'vuedraggable';
|
||||||
import FormInput from '@/components/form/input.vue';
|
import FormInput from '@/components/form/input.vue';
|
||||||
import FormRadios from '@/components/form/radios.vue';
|
import FormRadios from '@/components/form/radios.vue';
|
||||||
@ -88,7 +88,7 @@ function remove(reaction, ev: MouseEvent) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function preview(ev: MouseEvent) {
|
function preview(ev: MouseEvent) {
|
||||||
os.popup(import('@/components/emoji-picker-dialog.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), {
|
||||||
asReactionPicker: true,
|
asReactionPicker: true,
|
||||||
src: ev.currentTarget ?? ev.target,
|
src: ev.currentTarget ?? ev.target,
|
||||||
}, {}, 'closed');
|
}, {}, 'closed');
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { } from 'vue';
|
import { } from 'vue';
|
||||||
import * as JSON5 from 'json5';
|
import JSON5 from 'json5';
|
||||||
import FormTextarea from '@/components/form/textarea.vue';
|
import FormTextarea from '@/components/form/textarea.vue';
|
||||||
import FormButton from '@/components/ui/button.vue';
|
import FormButton from '@/components/ui/button.vue';
|
||||||
import { applyTheme, validateTheme } from '@/scripts/theme';
|
import { applyTheme, validateTheme } from '@/scripts/theme';
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import * as JSON5 from 'json5';
|
import JSON5 from 'json5';
|
||||||
import FormTextarea from '@/components/form/textarea.vue';
|
import FormTextarea from '@/components/form/textarea.vue';
|
||||||
import FormSelect from '@/components/form/select.vue';
|
import FormSelect from '@/components/form/select.vue';
|
||||||
import FormInput from '@/components/form/input.vue';
|
import FormInput from '@/components/form/input.vue';
|
||||||
|
@ -87,7 +87,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineComponent, onActivated, onMounted, ref, watch } from 'vue';
|
import { computed, defineComponent, onActivated, onMounted, ref, watch } from 'vue';
|
||||||
import * as JSON5 from 'json5';
|
import JSON5 from 'json5';
|
||||||
import FormSwitch from '@/components/form/switch.vue';
|
import FormSwitch from '@/components/form/switch.vue';
|
||||||
import FormSelect from '@/components/form/select.vue';
|
import FormSelect from '@/components/form/select.vue';
|
||||||
import FormGroup from '@/components/form/group.vue';
|
import FormGroup from '@/components/form/group.vue';
|
||||||
|
@ -67,9 +67,9 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { watch } from 'vue';
|
import { watch } from 'vue';
|
||||||
import { toUnicode } from 'punycode/';
|
import { toUnicode } from 'punycode/';
|
||||||
import * as tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import { v4 as uuid} from 'uuid';
|
import { v4 as uuid} from 'uuid';
|
||||||
import * as JSON5 from 'json5';
|
import JSON5 from 'json5';
|
||||||
|
|
||||||
import FormButton from '@/components/ui/button.vue';
|
import FormButton from '@/components/ui/button.vue';
|
||||||
import FormTextarea from '@/components/form/textarea.vue';
|
import FormTextarea from '@/components/form/textarea.vue';
|
||||||
|
@ -125,7 +125,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, defineAsyncComponent, computed } from 'vue';
|
import { defineComponent, defineAsyncComponent, computed } from 'vue';
|
||||||
import * as age from 's-age';
|
import age from 's-age';
|
||||||
import XUserTimeline from './index.timeline.vue';
|
import XUserTimeline from './index.timeline.vue';
|
||||||
import XNote from '@/components/note.vue';
|
import XNote from '@/components/note.vue';
|
||||||
import MkFollowButton from '@/components/follow-button.vue';
|
import MkFollowButton from '@/components/follow-button.vue';
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { defineAsyncComponent, markRaw } from 'vue';
|
import { AsyncComponentLoader, defineAsyncComponent, markRaw } from 'vue';
|
||||||
import { createRouter, createWebHistory } from 'vue-router';
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
import MkLoading from '@/pages/_loading_.vue';
|
import MkLoading from '@/pages/_loading_.vue';
|
||||||
import MkError from '@/pages/_error_.vue';
|
import MkError from '@/pages/_error_.vue';
|
||||||
@ -6,8 +6,9 @@ import MkTimeline from '@/pages/timeline.vue';
|
|||||||
import { $i, iAmModerator } from './account';
|
import { $i, iAmModerator } from './account';
|
||||||
import { ui } from '@/config';
|
import { ui } from '@/config';
|
||||||
|
|
||||||
const page = (path: string, ui?: string) => defineAsyncComponent({
|
// pathに/が入るとrollupが解決してくれないので、() => import('*.vue')を指定すること
|
||||||
loader: ui ? () => import(`./ui/${ui}/pages/${path}.vue`) : () => import(`./pages/${path}.vue`),
|
const page = (path: string | AsyncComponentLoader<any>, uiName?: string) => defineAsyncComponent({
|
||||||
|
loader: typeof path === 'string' ? uiName ? () => import(`./ui/${ui}/pages/${path}.vue`) : () => import(`./pages/${path}.vue`) : path,
|
||||||
loadingComponent: MkLoading,
|
loadingComponent: MkLoading,
|
||||||
errorComponent: MkError,
|
errorComponent: MkError,
|
||||||
});
|
});
|
||||||
@ -17,10 +18,10 @@ let indexScrollPos = 0;
|
|||||||
const defaultRoutes = [
|
const defaultRoutes = [
|
||||||
// NOTE: MkTimelineをdynamic importするとAsyncComponentWrapperが間に入るせいでkeep-aliveのコンポーネント指定が効かなくなる
|
// NOTE: MkTimelineをdynamic importするとAsyncComponentWrapperが間に入るせいでkeep-aliveのコンポーネント指定が効かなくなる
|
||||||
{ path: '/', name: 'index', component: $i ? MkTimeline : page('welcome') },
|
{ path: '/', name: 'index', component: $i ? MkTimeline : page('welcome') },
|
||||||
{ path: '/@:acct/:page?', name: 'user', component: page('user/index'), props: route => ({ acct: route.params.acct, page: route.params.page || 'index' }) },
|
{ path: '/@:acct/:page?', name: 'user', component: page(() => import('./pages/user/index.vue')), props: route => ({ acct: route.params.acct, page: route.params.page || 'index' }) },
|
||||||
{ path: '/@:user/pages/:page', component: page('page'), props: route => ({ pageName: route.params.page, username: route.params.user }) },
|
{ path: '/@:user/pages/:page', component: page('page'), props: route => ({ pageName: route.params.page, username: route.params.user }) },
|
||||||
{ path: '/@:user/pages/:pageName/view-source', component: page('page-editor/page-editor'), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
|
{ path: '/@:user/pages/:pageName/view-source', component: page(() => import('./pages/page-editor/page-editor.vue')), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
|
||||||
{ path: '/settings/:page(.*)?', name: 'settings', component: page('settings/index'), props: route => ({ initialPage: route.params.page || null }) },
|
{ path: '/settings/:page(.*)?', name: 'settings', component: page(() => import('./pages/settings/index.vue')), props: route => ({ initialPage: route.params.page || null }) },
|
||||||
{ path: '/reset-password/:token?', component: page('reset-password'), props: route => ({ token: route.params.token }) },
|
{ path: '/reset-password/:token?', component: page('reset-password'), props: route => ({ token: route.params.token }) },
|
||||||
{ path: '/signup-complete/:code', component: page('signup-complete'), props: route => ({ code: route.params.code }) },
|
{ path: '/signup-complete/:code', component: page('signup-complete'), props: route => ({ code: route.params.code }) },
|
||||||
{ path: '/announcements', component: page('announcements') },
|
{ path: '/announcements', component: page('announcements') },
|
||||||
@ -35,12 +36,12 @@ const defaultRoutes = [
|
|||||||
{ path: '/emojis', component: page('emojis') },
|
{ path: '/emojis', component: page('emojis') },
|
||||||
{ path: '/search', component: page('search'), props: route => ({ query: route.query.q, channel: route.query.channel }) },
|
{ path: '/search', component: page('search'), props: route => ({ query: route.query.q, channel: route.query.channel }) },
|
||||||
{ path: '/pages', name: 'pages', component: page('pages') },
|
{ path: '/pages', name: 'pages', component: page('pages') },
|
||||||
{ path: '/pages/new', component: page('page-editor/page-editor') },
|
{ path: '/pages/new', component: page(() => import('./pages/page-editor/page-editor.vue')) },
|
||||||
{ path: '/pages/edit/:pageId', component: page('page-editor/page-editor'), props: route => ({ initPageId: route.params.pageId }) },
|
{ path: '/pages/edit/:pageId', component: page(() => import('./pages/page-editor/page-editor.vue')), props: route => ({ initPageId: route.params.pageId }) },
|
||||||
{ path: '/gallery', component: page('gallery/index') },
|
{ path: '/gallery', component: page(() => import('./pages/gallery/index.vue')) },
|
||||||
{ path: '/gallery/new', component: page('gallery/edit') },
|
{ path: '/gallery/new', component: page(() => import('./pages/gallery/edit.vue')) },
|
||||||
{ path: '/gallery/:postId/edit', component: page('gallery/edit'), props: route => ({ postId: route.params.postId }) },
|
{ path: '/gallery/:postId/edit', component: page(() => import('./pages/gallery/edit.vue')), props: route => ({ postId: route.params.postId }) },
|
||||||
{ path: '/gallery/:postId', component: page('gallery/post'), props: route => ({ postId: route.params.postId }) },
|
{ path: '/gallery/:postId', component: page(() => import('./pages/gallery/edit.vue')), props: route => ({ postId: route.params.postId }) },
|
||||||
{ path: '/channels', component: page('channels') },
|
{ path: '/channels', component: page('channels') },
|
||||||
{ path: '/channels/new', component: page('channel-editor') },
|
{ path: '/channels/new', component: page('channel-editor') },
|
||||||
{ path: '/channels/:channelId/edit', component: page('channel-editor'), props: true },
|
{ path: '/channels/:channelId/edit', component: page('channel-editor'), props: true },
|
||||||
@ -52,23 +53,23 @@ const defaultRoutes = [
|
|||||||
{ path: '/my/favorites', component: page('favorites') },
|
{ path: '/my/favorites', component: page('favorites') },
|
||||||
{ path: '/my/messages', component: page('messages') },
|
{ path: '/my/messages', component: page('messages') },
|
||||||
{ path: '/my/mentions', component: page('mentions') },
|
{ path: '/my/mentions', component: page('mentions') },
|
||||||
{ path: '/my/messaging', name: 'messaging', component: page('messaging/index') },
|
{ path: '/my/messaging', name: 'messaging', component: page(() => import('./pages/messaging/index.vue')) },
|
||||||
{ path: '/my/messaging/:user', component: page('messaging/messaging-room'), props: route => ({ userAcct: route.params.user }) },
|
{ path: '/my/messaging/:user', component: page(() => import('./pages/messaging/messaging-room.vue')), props: route => ({ userAcct: route.params.user }) },
|
||||||
{ path: '/my/messaging/group/:group', component: page('messaging/messaging-room'), props: route => ({ groupId: route.params.group }) },
|
{ path: '/my/messaging/group/:group', component: page(() => import('./pages/messaging/messaging-room.vue')), props: route => ({ groupId: route.params.group }) },
|
||||||
{ path: '/my/drive', name: 'drive', component: page('drive') },
|
{ path: '/my/drive', name: 'drive', component: page('drive') },
|
||||||
{ path: '/my/drive/folder/:folder', component: page('drive') },
|
{ path: '/my/drive/folder/:folder', component: page('drive') },
|
||||||
{ path: '/my/follow-requests', component: page('follow-requests') },
|
{ path: '/my/follow-requests', component: page('follow-requests') },
|
||||||
{ path: '/my/lists', component: page('my-lists/index') },
|
{ path: '/my/lists', component: page(() => import('./pages/my-lists/index.vue')) },
|
||||||
{ path: '/my/lists/:list', component: page('my-lists/list') },
|
{ path: '/my/lists/:list', component: page(() => import('./pages/my-lists/list.vue')) },
|
||||||
{ path: '/my/groups', component: page('my-groups/index') },
|
{ path: '/my/groups', component: page(() => import('./pages/my-groups/index.vue')) },
|
||||||
{ path: '/my/groups/:group', component: page('my-groups/group'), props: route => ({ groupId: route.params.group }) },
|
{ path: '/my/groups/:group', component: page(() => import('./pages/my-groups/group.vue')), props: route => ({ groupId: route.params.group }) },
|
||||||
{ path: '/my/antennas', component: page('my-antennas/index') },
|
{ path: '/my/antennas', component: page(() => import('./pages/my-antennas/index.vue')) },
|
||||||
{ path: '/my/antennas/create', component: page('my-antennas/create') },
|
{ path: '/my/antennas/create', component: page(() => import('./pages/my-antennas/create.vue')) },
|
||||||
{ path: '/my/antennas/:antennaId', component: page('my-antennas/edit'), props: true },
|
{ path: '/my/antennas/:antennaId', component: page(() => import('./pages/my-antennas/edit.vue')), props: true },
|
||||||
{ path: '/my/clips', component: page('my-clips/index') },
|
{ path: '/my/clips', component: page(() => import('./pages/my-clips/index.vue')) },
|
||||||
{ path: '/scratchpad', component: page('scratchpad') },
|
{ path: '/scratchpad', component: page('scratchpad') },
|
||||||
{ path: '/admin/:page(.*)?', component: iAmModerator ? page('admin/index') : page('not-found'), props: route => ({ initialPage: route.params.page || null }) },
|
{ path: '/admin/:page(.*)?', component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page('not-found'), props: route => ({ initialPage: route.params.page || null }) },
|
||||||
{ path: '/admin', component: iAmModerator ? page('admin/index') : page('not-found') },
|
{ path: '/admin', component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page('not-found') },
|
||||||
{ path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) },
|
{ path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) },
|
||||||
{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
|
{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
|
||||||
{ path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) },
|
{ path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) },
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { nextTick, Ref, ref } from 'vue';
|
import { nextTick, Ref, ref, defineAsyncComponent } from 'vue';
|
||||||
import * as getCaretCoordinates from 'textarea-caret';
|
import getCaretCoordinates from 'textarea-caret';
|
||||||
import { toASCII } from 'punycode/';
|
import { toASCII } from 'punycode/';
|
||||||
import { popup } from '@/os';
|
import { popup } from '@/os';
|
||||||
|
|
||||||
@ -157,7 +157,7 @@ export class Autocomplete {
|
|||||||
const _y = ref(y);
|
const _y = ref(y);
|
||||||
const _q = ref(q);
|
const _q = ref(q);
|
||||||
|
|
||||||
const { dispose } = await popup(import('@/components/autocomplete.vue'), {
|
const { dispose } = await popup(defineAsyncComponent(() => import('@/components/autocomplete.vue')), {
|
||||||
textarea: this.textarea,
|
textarea: this.textarea,
|
||||||
close: this.close,
|
close: this.close,
|
||||||
type: type,
|
type: type,
|
||||||
|
@ -8,4 +8,4 @@ export type UnicodeEmojiDef = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
|
// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
|
||||||
export const emojilist = require('../emojilist.json') as UnicodeEmojiDef[];
|
export const emojilist = (await import('../emojilist.json')).default as UnicodeEmojiDef[];
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Ref } from 'vue';
|
import { defineAsyncComponent, Ref } from 'vue';
|
||||||
import * as misskey from 'misskey-js';
|
import * as misskey from 'misskey-js';
|
||||||
import { $i } from '@/account';
|
import { $i } from '@/account';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
@ -253,7 +253,7 @@ export function getNoteMenu(props: {
|
|||||||
text: i18n.ts.reportAbuse,
|
text: i18n.ts.reportAbuse,
|
||||||
action: () => {
|
action: () => {
|
||||||
const u = appearNote.url || appearNote.uri || `${url}/notes/${appearNote.id}`;
|
const u = appearNote.url || appearNote.uri || `${url}/notes/${appearNote.id}`;
|
||||||
os.popup(import('@/components/abuse-report-window.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/abuse-report-window.vue')), {
|
||||||
user: appearNote.user,
|
user: appearNote.user,
|
||||||
initialComment: `Note: ${u}\n-----\n`
|
initialComment: `Note: ${u}\n-----\n`
|
||||||
}, {}, 'closed');
|
}, {}, 'closed');
|
||||||
|
@ -6,6 +6,7 @@ import * as os from '@/os';
|
|||||||
import { userActions } from '@/store';
|
import { userActions } from '@/store';
|
||||||
import { router } from '@/router';
|
import { router } from '@/router';
|
||||||
import { $i, iAmModerator } from '@/account';
|
import { $i, iAmModerator } from '@/account';
|
||||||
|
import { defineAsyncComponent } from 'vue';
|
||||||
|
|
||||||
export function getUserMenu(user) {
|
export function getUserMenu(user) {
|
||||||
const meId = $i ? $i.id : null;
|
const meId = $i ? $i.id : null;
|
||||||
@ -127,7 +128,7 @@ export function getUserMenu(user) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function reportAbuse() {
|
function reportAbuse() {
|
||||||
os.popup(import('@/components/abuse-report-window.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/abuse-report-window.vue')), {
|
||||||
user: user,
|
user: user,
|
||||||
}, {}, 'closed');
|
}, {}, 'closed');
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import * as tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import { Hpml } from './evaluator';
|
import { Hpml } from './evaluator';
|
||||||
import { values, utils } from '@syuilo/aiscript';
|
import { values, utils } from '@syuilo/aiscript';
|
||||||
import { Fn, HpmlScope } from '.';
|
import { Fn, HpmlScope } from '.';
|
||||||
import { Expr } from './expr';
|
import { Expr } from './expr';
|
||||||
import * as seedrandom from 'seedrandom';
|
import seedrandom from 'seedrandom';
|
||||||
|
|
||||||
/* TODO: https://www.chartjs.org/docs/latest/configuration/canvas-background.html#color
|
/* TODO: https://www.chartjs.org/docs/latest/configuration/canvas-background.html#color
|
||||||
// https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs
|
// https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Ref, ref } from 'vue';
|
import { defineAsyncComponent, Ref, ref } from 'vue';
|
||||||
import { popup } from '@/os';
|
import { popup } from '@/os';
|
||||||
|
|
||||||
class ReactionPicker {
|
class ReactionPicker {
|
||||||
@ -12,7 +12,7 @@ class ReactionPicker {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public async init() {
|
public async init() {
|
||||||
await popup(import('@/components/emoji-picker-dialog.vue'), {
|
await popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), {
|
||||||
src: this.src,
|
src: this.src,
|
||||||
asReactionPicker: true,
|
asReactionPicker: true,
|
||||||
manualShowing: this.manualShowing
|
manualShowing: this.manualShowing
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { globalEvents } from '@/events';
|
import { globalEvents } from '@/events';
|
||||||
import * as tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
|
|
||||||
export type Theme = {
|
export type Theme = {
|
||||||
id: string;
|
id: string;
|
||||||
@ -10,29 +10,29 @@ export type Theme = {
|
|||||||
props: Record<string, string>;
|
props: Record<string, string>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const lightTheme: Theme = require('@/themes/_light.json5');
|
export const lightTheme: Theme = await import('@/themes/_light.json5');
|
||||||
export const darkTheme: Theme = require('@/themes/_dark.json5');
|
export const darkTheme: Theme = await import('@/themes/_dark.json5');
|
||||||
|
|
||||||
export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
|
export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
|
||||||
|
|
||||||
export const builtinThemes = [
|
export const builtinThemes = [
|
||||||
require('@/themes/l-light.json5'),
|
await import('@/themes/l-light.json5'),
|
||||||
require('@/themes/l-coffee.json5'),
|
await import('@/themes/l-coffee.json5'),
|
||||||
require('@/themes/l-apricot.json5'),
|
await import('@/themes/l-apricot.json5'),
|
||||||
require('@/themes/l-rainy.json5'),
|
await import('@/themes/l-rainy.json5'),
|
||||||
require('@/themes/l-vivid.json5'),
|
await import('@/themes/l-vivid.json5'),
|
||||||
require('@/themes/l-cherry.json5'),
|
await import('@/themes/l-cherry.json5'),
|
||||||
require('@/themes/l-sushi.json5'),
|
await import('@/themes/l-sushi.json5'),
|
||||||
|
|
||||||
require('@/themes/d-dark.json5'),
|
await import('@/themes/d-dark.json5'),
|
||||||
require('@/themes/d-persimmon.json5'),
|
await import('@/themes/d-persimmon.json5'),
|
||||||
require('@/themes/d-astro.json5'),
|
await import('@/themes/d-astro.json5'),
|
||||||
require('@/themes/d-future.json5'),
|
await import('@/themes/d-future.json5'),
|
||||||
require('@/themes/d-botanical.json5'),
|
await import('@/themes/d-botanical.json5'),
|
||||||
require('@/themes/d-cherry.json5'),
|
await import('@/themes/d-cherry.json5'),
|
||||||
require('@/themes/d-ice.json5'),
|
await import('@/themes/d-ice.json5'),
|
||||||
require('@/themes/d-pumpkin.json5'),
|
await import('@/themes/d-pumpkin.json5'),
|
||||||
require('@/themes/d-black.json5'),
|
await import('@/themes/d-black.json5'),
|
||||||
] as Theme[];
|
] as Theme[];
|
||||||
|
|
||||||
let timeout = null;
|
let timeout = null;
|
||||||
|
@ -255,10 +255,13 @@ type Plugin = {
|
|||||||
/**
|
/**
|
||||||
* 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
|
* 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
|
||||||
*/
|
*/
|
||||||
|
import lightTheme from '@/themes/l-light.json5';
|
||||||
|
import darkTheme from '@/themes/d-dark.json5'
|
||||||
|
|
||||||
export class ColdDeviceStorage {
|
export class ColdDeviceStorage {
|
||||||
public static default = {
|
public static default = {
|
||||||
lightTheme: require('@/themes/l-light.json5') as Theme,
|
lightTheme,
|
||||||
darkTheme: require('@/themes/d-dark.json5') as Theme,
|
darkTheme,
|
||||||
syncDeviceDarkMode: true,
|
syncDeviceDarkMode: true,
|
||||||
plugins: [] as Plugin[],
|
plugins: [] as Plugin[],
|
||||||
mediaVolume: 0.5,
|
mediaVolume: 0.5,
|
||||||
|
@ -39,7 +39,7 @@ export default defineComponent({
|
|||||||
id: notification.id
|
id: notification.id
|
||||||
});
|
});
|
||||||
|
|
||||||
popup(import('@/components/notification-toast.vue'), {
|
popup(defineAsyncComponent(() => import('@/components/notification-toast.vue')), {
|
||||||
notification
|
notification
|
||||||
}, {}, 'closed');
|
}, {}, 'closed');
|
||||||
}
|
}
|
||||||
|
@ -33,7 +33,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineComponent, ref, toRef, watch } from 'vue';
|
import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
|
||||||
import { host } from '@/config';
|
import { host } from '@/config';
|
||||||
import { search } from '@/scripts/search';
|
import { search } from '@/scripts/search';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
@ -67,7 +67,7 @@ export default defineComponent({
|
|||||||
}, ev);
|
}, ev);
|
||||||
},
|
},
|
||||||
more: () => {
|
more: () => {
|
||||||
os.popup(import('@/components/launch-pad.vue'), {}, {
|
os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {}, {
|
||||||
}, 'closed');
|
}, 'closed');
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -33,7 +33,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, ref, watch } from 'vue';
|
import { computed, defineAsyncComponent, ref, watch } from 'vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { menuDef } from '@/menu';
|
import { menuDef } from '@/menu';
|
||||||
import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
|
import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
|
||||||
@ -69,7 +69,7 @@ function openAccountMenu(ev: MouseEvent) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function more(ev: MouseEvent) {
|
function more(ev: MouseEvent) {
|
||||||
os.popup(import('@/components/launch-pad.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {
|
||||||
src: ev.currentTarget ?? ev.target,
|
src: ev.currentTarget ?? ev.target,
|
||||||
}, {
|
}, {
|
||||||
}, 'closed');
|
}, 'closed');
|
||||||
|
@ -39,7 +39,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||||
import { host } from '@/config';
|
import { host } from '@/config';
|
||||||
import { search } from '@/scripts/search';
|
import { search } from '@/scripts/search';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
@ -101,7 +101,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
more(ev) {
|
more(ev) {
|
||||||
os.popup(import('@/components/launch-pad.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {
|
||||||
src: ev.currentTarget ?? ev.target,
|
src: ev.currentTarget ?? ev.target,
|
||||||
anchor: { x: 'center', y: 'bottom' },
|
anchor: { x: 'center', y: 'bottom' },
|
||||||
}, {
|
}, {
|
||||||
|
@ -41,7 +41,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||||
import { host } from '@/config';
|
import { host } from '@/config';
|
||||||
import { search } from '@/scripts/search';
|
import { search } from '@/scripts/search';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
@ -121,7 +121,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
more(ev) {
|
more(ev) {
|
||||||
os.popup(import('@/components/launch-pad.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {
|
||||||
src: ev.currentTarget ?? ev.target,
|
src: ev.currentTarget ?? ev.target,
|
||||||
}, {}, 'closed');
|
}, {}, 'closed');
|
||||||
},
|
},
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { } from 'vue';
|
import { defineAsyncComponent } from 'vue';
|
||||||
import XColumn from './column.vue';
|
import XColumn from './column.vue';
|
||||||
import XNotifications from '@/components/notifications.vue';
|
import XNotifications from '@/components/notifications.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
@ -24,7 +24,7 @@ const emit = defineEmits<{
|
|||||||
}>();
|
}>();
|
||||||
|
|
||||||
function func() {
|
function func() {
|
||||||
os.popup(import('@/components/notification-setting-window.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
|
||||||
includingTypes: props.column.includingTypes,
|
includingTypes: props.column.includingTypes,
|
||||||
}, {
|
}, {
|
||||||
done: async (res) => {
|
done: async (res) => {
|
||||||
|
@ -15,6 +15,7 @@ import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExp
|
|||||||
import MkContainer from '@/components/ui/container.vue';
|
import MkContainer from '@/components/ui/container.vue';
|
||||||
import XNotifications from '@/components/notifications.vue';
|
import XNotifications from '@/components/notifications.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
import { defineAsyncComponent } from 'vue';
|
||||||
|
|
||||||
const name = 'notifications';
|
const name = 'notifications';
|
||||||
|
|
||||||
@ -49,7 +50,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
|
|||||||
);
|
);
|
||||||
|
|
||||||
const configureNotification = () => {
|
const configureNotification = () => {
|
||||||
os.popup(import('@/components/notification-setting-window.vue'), {
|
os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), {
|
||||||
includingTypes: widgetProps.includingTypes,
|
includingTypes: widgetProps.includingTypes,
|
||||||
}, {
|
}, {
|
||||||
done: async (res) => {
|
done: async (res) => {
|
||||||
|
@ -18,6 +18,9 @@
|
|||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"useDefineForClassFields": true,
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"],
|
"@/*": ["./src/*"],
|
||||||
@ -26,6 +29,9 @@
|
|||||||
"node_modules/@types",
|
"node_modules/@types",
|
||||||
"@types",
|
"@types",
|
||||||
],
|
],
|
||||||
|
"types": [
|
||||||
|
"vite/client",
|
||||||
|
],
|
||||||
"lib": [
|
"lib": [
|
||||||
"esnext",
|
"esnext",
|
||||||
"dom"
|
"dom"
|
||||||
|
72
packages/client/vite.config.ts
Normal file
72
packages/client/vite.config.ts
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import * as fs from 'fs';
|
||||||
|
import pluginVue from '@vitejs/plugin-vue';
|
||||||
|
import pluginJson5 from './vite.json5';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
import locales from '../../locales';
|
||||||
|
import meta from '../../package.json';
|
||||||
|
|
||||||
|
const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
|
||||||
|
|
||||||
|
export default defineConfig(({ command, mode }) => {
|
||||||
|
fs.mkdirSync(__dirname + '/../../built', { recursive: true });
|
||||||
|
fs.writeFileSync(__dirname + '/../../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8');
|
||||||
|
|
||||||
|
return {
|
||||||
|
base: '/assets/',
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
pluginVue({
|
||||||
|
reactivityTransform: true,
|
||||||
|
}),
|
||||||
|
pluginJson5(),
|
||||||
|
],
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
extensions,
|
||||||
|
alias: {
|
||||||
|
'@/': __dirname + '/src/',
|
||||||
|
'/client-assets/': __dirname + '/assets/',
|
||||||
|
'/static-assets/': __dirname + '/../backend/assets/',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
define: {
|
||||||
|
_VERSION_: JSON.stringify(meta.version),
|
||||||
|
_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]) => [k, v._lang_])),
|
||||||
|
_ENV_: JSON.stringify(process.env.NODE_ENV),
|
||||||
|
_DEV_: process.env.NODE_ENV !== 'production',
|
||||||
|
_PERF_PREFIX_: JSON.stringify('Misskey:'),
|
||||||
|
_DATA_TRANSFER_DRIVE_FILE_: JSON.stringify('mk_drive_file'),
|
||||||
|
_DATA_TRANSFER_DRIVE_FOLDER_: JSON.stringify('mk_drive_folder'),
|
||||||
|
_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify('mk_deck_column'),
|
||||||
|
__VUE_OPTIONS_API__: true,
|
||||||
|
__VUE_PROD_DEVTOOLS__: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
build: {
|
||||||
|
target: [
|
||||||
|
'chrome100',
|
||||||
|
'firefox100',
|
||||||
|
'safari15',
|
||||||
|
],
|
||||||
|
manifest: 'manifest.json',
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
app: './src/init.ts',
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
manualChunks: {
|
||||||
|
vue: ['vue', 'vue-router'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
cssCodeSplit: true,
|
||||||
|
outDir: __dirname + '/../../built/_client_dist_',
|
||||||
|
assetsDir: '.',
|
||||||
|
emptyOutDir: false,
|
||||||
|
sourcemap: process.env.NODE_ENV !== 'production',
|
||||||
|
reportCompressedSize: false,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
38
packages/client/vite.json5.ts
Normal file
38
packages/client/vite.json5.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
// Original: https://github.com/rollup/plugins/tree/8835dd2aed92f408d7dc72d7cc25a9728e16face/packages/json
|
||||||
|
|
||||||
|
import JSON5 from 'json5';
|
||||||
|
import { Plugin } from 'rollup';
|
||||||
|
import { createFilter, dataToEsm } from '@rollup/pluginutils';
|
||||||
|
import { RollupJsonOptions } from '@rollup/plugin-json';
|
||||||
|
|
||||||
|
export default function json5(options: RollupJsonOptions = {}): Plugin {
|
||||||
|
const filter = createFilter(options.include, options.exclude);
|
||||||
|
const indent = 'indent' in options ? options.indent : '\t';
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: 'json5',
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-shadow
|
||||||
|
transform(json, id) {
|
||||||
|
if (id.slice(-6) !== '.json5' || !filter(id)) return null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const parsed = JSON5.parse(json);
|
||||||
|
return {
|
||||||
|
code: dataToEsm(parsed, {
|
||||||
|
preferConst: options.preferConst,
|
||||||
|
compact: options.compact,
|
||||||
|
namedExports: options.namedExports,
|
||||||
|
indent
|
||||||
|
}),
|
||||||
|
map: { mappings: '' }
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
const message = 'Could not parse JSON file';
|
||||||
|
const position = parseInt(/[\d]/.exec(err.message)[0], 10);
|
||||||
|
this.warn({ message, id, position });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
@ -1,192 +0,0 @@
|
|||||||
/**
|
|
||||||
* webpack configuration
|
|
||||||
*/
|
|
||||||
|
|
||||||
const fs = require('fs');
|
|
||||||
const webpack = require('webpack');
|
|
||||||
const { VueLoaderPlugin } = require('vue-loader');
|
|
||||||
|
|
||||||
class WebpackOnBuildPlugin {
|
|
||||||
constructor(callback) {
|
|
||||||
this.callback = callback;
|
|
||||||
}
|
|
||||||
|
|
||||||
apply(compiler) {
|
|
||||||
compiler.hooks.done.tap('WebpackOnBuildPlugin', this.callback);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const isProduction = process.env.NODE_ENV === 'production';
|
|
||||||
|
|
||||||
const locales = require('../../locales');
|
|
||||||
const meta = require('../../package.json');
|
|
||||||
|
|
||||||
const postcss = {
|
|
||||||
loader: 'postcss-loader',
|
|
||||||
options: {
|
|
||||||
postcssOptions: {
|
|
||||||
plugins: [
|
|
||||||
require('cssnano')({
|
|
||||||
preset: 'default'
|
|
||||||
})
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
entry: {
|
|
||||||
app: './src/init.ts',
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
rules: [{
|
|
||||||
test: /\.vue$/,
|
|
||||||
exclude: /node_modules/,
|
|
||||||
use: [{
|
|
||||||
loader: 'vue-loader',
|
|
||||||
options: {
|
|
||||||
cssSourceMap: false,
|
|
||||||
reactivityTransform: true,
|
|
||||||
compilerOptions: {
|
|
||||||
preserveWhitespace: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
test: /\.scss?$/,
|
|
||||||
exclude: /node_modules/,
|
|
||||||
oneOf: [{
|
|
||||||
resourceQuery: /module/,
|
|
||||||
use: [{
|
|
||||||
loader: 'vue-style-loader'
|
|
||||||
}, {
|
|
||||||
loader: 'css-loader',
|
|
||||||
options: {
|
|
||||||
modules: true,
|
|
||||||
esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
|
|
||||||
url: false,
|
|
||||||
}
|
|
||||||
}, postcss, {
|
|
||||||
loader: 'sass-loader',
|
|
||||||
options: {
|
|
||||||
implementation: require('sass'),
|
|
||||||
sassOptions: {
|
|
||||||
fiber: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
use: [{
|
|
||||||
loader: 'vue-style-loader'
|
|
||||||
}, {
|
|
||||||
loader: 'css-loader',
|
|
||||||
options: {
|
|
||||||
url: false,
|
|
||||||
esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
|
|
||||||
}
|
|
||||||
}, postcss, {
|
|
||||||
loader: 'sass-loader',
|
|
||||||
options: {
|
|
||||||
implementation: require('sass'),
|
|
||||||
sassOptions: {
|
|
||||||
fiber: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
test: /\.css$/,
|
|
||||||
oneOf: [{
|
|
||||||
resourceQuery: /module/,
|
|
||||||
use: [{
|
|
||||||
loader: 'vue-style-loader'
|
|
||||||
}, {
|
|
||||||
loader: 'css-loader',
|
|
||||||
options: {
|
|
||||||
modules: true,
|
|
||||||
esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
|
|
||||||
}
|
|
||||||
}, postcss]
|
|
||||||
}, {
|
|
||||||
use: [{
|
|
||||||
loader: 'vue-style-loader'
|
|
||||||
}, {
|
|
||||||
loader: 'css-loader',
|
|
||||||
options: {
|
|
||||||
esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
|
|
||||||
}
|
|
||||||
}, postcss]
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
test: /\.svg$/,
|
|
||||||
use: [
|
|
||||||
'vue-loader',
|
|
||||||
'vue-svg-loader',
|
|
||||||
],
|
|
||||||
}, {
|
|
||||||
test: /\.(eot|woff|woff2|svg|ttf)([?]?.*)$/,
|
|
||||||
type: 'asset/resource'
|
|
||||||
}, {
|
|
||||||
test: /\.json5$/,
|
|
||||||
loader: 'json5-loader',
|
|
||||||
options: {
|
|
||||||
esModule: false,
|
|
||||||
},
|
|
||||||
type: 'javascript/auto'
|
|
||||||
}, {
|
|
||||||
test: /\.ts$/,
|
|
||||||
exclude: /node_modules/,
|
|
||||||
use: [{
|
|
||||||
loader: 'ts-loader',
|
|
||||||
options: {
|
|
||||||
happyPackMode: true,
|
|
||||||
transpileOnly: true,
|
|
||||||
configFile: __dirname + '/tsconfig.json',
|
|
||||||
appendTsSuffixTo: [/\.vue$/]
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
new webpack.ProgressPlugin({}),
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
_VERSION_: JSON.stringify(meta.version),
|
|
||||||
_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]) => [k, v._lang_])),
|
|
||||||
_ENV_: JSON.stringify(process.env.NODE_ENV),
|
|
||||||
_DEV_: process.env.NODE_ENV !== 'production',
|
|
||||||
_PERF_PREFIX_: JSON.stringify('Misskey:'),
|
|
||||||
_DATA_TRANSFER_DRIVE_FILE_: JSON.stringify('mk_drive_file'),
|
|
||||||
_DATA_TRANSFER_DRIVE_FOLDER_: JSON.stringify('mk_drive_folder'),
|
|
||||||
_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify('mk_deck_column'),
|
|
||||||
__VUE_OPTIONS_API__: true,
|
|
||||||
__VUE_PROD_DEVTOOLS__: false,
|
|
||||||
}),
|
|
||||||
new VueLoaderPlugin(),
|
|
||||||
new WebpackOnBuildPlugin(() => {
|
|
||||||
fs.mkdirSync(__dirname + '/../../built', { recursive: true });
|
|
||||||
fs.writeFileSync(__dirname + '/../../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8');
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
output: {
|
|
||||||
path: __dirname + '/../../built/_client_dist_',
|
|
||||||
filename: `[name].${meta.version}.js`,
|
|
||||||
publicPath: `/assets/`,
|
|
||||||
pathinfo: false,
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
extensions: [
|
|
||||||
'.js', '.ts', '.json'
|
|
||||||
],
|
|
||||||
alias: {
|
|
||||||
'@': __dirname + '/src/',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
resolveLoader: {
|
|
||||||
modules: ['node_modules']
|
|
||||||
},
|
|
||||||
experiments: {
|
|
||||||
topLevelAwait: true
|
|
||||||
},
|
|
||||||
devtool: false, //'source-map',
|
|
||||||
mode: isProduction ? 'production' : 'development'
|
|
||||||
};
|
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user