wip

src/web/app/auth/tags/form.tag

@@ -11,7 +11,7 @@
 		<section>
 			<h2>このアプリは次の権限を要求しています:</h2>
 			<ul>
-				<virtual each={ p in app.permission }>
+				<template each={ p in app.permission }>
 					<li v-if="p == 'account-read'">アカウントの情報を見る。</li>
 					<li v-if="p == 'account-write'">アカウントの情報を操作する。</li>
 					<li v-if="p == 'post-write'">投稿する。</li>
@@ -21,7 +21,7 @@
 					<li v-if="p == 'drive-write'">ドライブを操作する。</li>
 					<li v-if="p == 'notification-read'">通知を見る。</li>
 					<li v-if="p == 'notification-write'">通知を操作する。</li>
-				</virtual>
+				</template>
 			</ul>
 		</section>
 	</div>

src/web/app/ch/tags/channel.tag

@@ -18,9 +18,9 @@
 			<p v-if="postsFetching">読み込み中<mk-ellipsis/></p>
 			<div v-if="!postsFetching">
 				<p v-if="posts == null || posts.length == 0">まだ投稿がありません</p>
-				<virtual v-if="posts != null">
+				<template v-if="posts != null">
 					<mk-channel-post each={ post in posts.slice().reverse() } post={ post } form={ parent.refs.form }/>
-				</virtual>
+				</template>
 			</div>
 		</div>
 		<hr>
@@ -174,11 +174,11 @@
 		<a v-if="post.reply">&gt;&gt;{ post.reply.index }</a>
 		{ post.text }
 		<div class="media" v-if="post.media">
-			<virtual each={ file in post.media }>
+			<template each={ file in post.media }>
 				<a href={ file.url } target="_blank">
 					<img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/>
 				</a>
-			</virtual>
+			</template>
 		</div>
 	</div>
 	<style lang="stylus" scoped>
@@ -247,7 +247,7 @@
 		<button @click="selectFile">%fa:upload%%i18n:ch.tags.mk-channel-form.upload%</button>
 		<button @click="drive">%fa:cloud%%i18n:ch.tags.mk-channel-form.drive%</button>
 		<button :class="{ wait: wait }" ref="submit" disabled={ wait || (refs.text.value.length == 0) } @click="post">
-			<virtual v-if="!wait">%fa:paper-plane%</virtual>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.post%' }<mk-ellipsis v-if="wait"/>
+			<template v-if="!wait">%fa:paper-plane%</template>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.post%' }<mk-ellipsis v-if="wait"/>
 		</button>
 	</div>
 	<mk-uploader ref="uploader"/>

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

@@ -98,9 +98,9 @@
 <mk-troubleshooter>
 	<h1>%fa:wrench%%i18n:common.tags.mk-error.troubleshooter.title%</h1>
 	<div>
-		<p data-wip={ network == null }><virtual v-if="network != null"><virtual v-if="network">%fa:check%</virtual><virtual v-if="!network">%fa:times%</virtual></virtual>{ network == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-network%' : '%i18n:common.tags.mk-error.troubleshooter.network%' }<mk-ellipsis v-if="network == null"/></p>
+		<p data-wip={ network == null }><template v-if="network != null"><template v-if="network">%fa:check%</template><template v-if="!network">%fa:times%</template></template>{ network == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-network%' : '%i18n:common.tags.mk-error.troubleshooter.network%' }<mk-ellipsis v-if="network == null"/></p>
-		<p v-if="network == true" data-wip={ internet == null }><virtual v-if="internet != null"><virtual v-if="internet">%fa:check%</virtual><virtual v-if="!internet">%fa:times%</virtual></virtual>{ internet == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-internet%' : '%i18n:common.tags.mk-error.troubleshooter.internet%' }<mk-ellipsis v-if="internet == null"/></p>
+		<p v-if="network == true" data-wip={ internet == null }><template v-if="internet != null"><template v-if="internet">%fa:check%</template><template v-if="!internet">%fa:times%</template></template>{ internet == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-internet%' : '%i18n:common.tags.mk-error.troubleshooter.internet%' }<mk-ellipsis v-if="internet == null"/></p>
-		<p v-if="internet == true" data-wip={ server == null }><virtual v-if="server != null"><virtual v-if="server">%fa:check%</virtual><virtual v-if="!server">%fa:times%</virtual></virtual>{ server == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-server%' : '%i18n:common.tags.mk-error.troubleshooter.server%' }<mk-ellipsis v-if="server == null"/></p>
+		<p v-if="internet == true" data-wip={ server == null }><template v-if="server != null"><template v-if="server">%fa:check%</template><template v-if="!server">%fa:times%</template></template>{ server == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-server%' : '%i18n:common.tags.mk-error.troubleshooter.server%' }<mk-ellipsis v-if="server == null"/></p>
 	</div>
 	<p v-if="!end">%i18n:common.tags.mk-error.troubleshooter.finding%<mk-ellipsis/></p>
 	<p v-if="network === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-network%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-network-desc%</p>

src/web/app/common/tags/file-type-icon.tag

@@ -1,5 +1,5 @@
 <mk-file-type-icon>
-	<virtual v-if="kind == 'image'">%fa:file-image%</virtual>
+	<template v-if="kind == 'image'">%fa:file-image%</template>
 	<style lang="stylus" scoped>
 		:scope
 			display inline

src/web/app/common/tags/messaging/form.tag

@@ -3,7 +3,7 @@
 	<div class="files"></div>
 	<mk-uploader ref="uploader"/>
 	<button class="send" @click="send" disabled={ sending } title="%i18n:common.send%">
-		<virtual v-if="!sending">%fa:paper-plane%</virtual><virtual v-if="sending">%fa:spinner .spin%</virtual>
+		<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
 	</button>
 	<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
 		%fa:upload%

src/web/app/common/tags/messaging/index.tag

@@ -15,7 +15,7 @@
 		</div>
 	</div>
 	<div class="history" v-if="history.length > 0">
-		<virtual each={ history }>
+		<template each={ history }>
 			<a class="user" data-is-me={ is_me } data-is-read={ is_read } @click="_click">
 				<div>
 					<img class="avatar" src={ (is_me ? recipient.avatar_url : user.avatar_url) + '?thumbnail&size=64' } alt=""/>
@@ -29,7 +29,7 @@
 					</div>
 				</div>
 			</a>
-		</virtual>
+		</template>
 	</div>
 	<p class="no-history" v-if="!fetching && history.length == 0">%i18n:common.tags.mk-messaging.no-history%</p>
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>

src/web/app/common/tags/messaging/message.tag

@@ -15,7 +15,7 @@
 			</div>
 		</div>
 		<footer>
-			<mk-time time={ message.created_at }/><virtual v-if="message.is_edited">%fa:pencil-alt%</virtual>
+			<mk-time time={ message.created_at }/><template v-if="message.is_edited">%fa:pencil-alt%</template>
 		</footer>
 	</div>
 	<style lang="stylus" scoped>

src/web/app/common/tags/messaging/room.tag

@@ -4,12 +4,12 @@
 		<p class="empty" v-if="!init && messages.length == 0">%fa:info-circle%%i18n:common.tags.mk-messaging-room.empty%</p>
 		<p class="no-history" v-if="!init && messages.length > 0 && !moreMessagesIsInStock">%fa:flag%%i18n:common.tags.mk-messaging-room.no-history%</p>
 		<button class="more { fetching: fetchingMoreMessages }" v-if="moreMessagesIsInStock" @click="fetchMoreMessages" disabled={ fetchingMoreMessages }>
-			<virtual v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</virtual>{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }
+			<template v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</template>{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }
 		</button>
-		<virtual each={ message, i in messages }>
+		<template each={ message, i in messages }>
 			<mk-messaging-message message={ message }/>
 			<p class="date" v-if="i != messages.length - 1 && message._date != messages[i + 1]._date"><span>{ messages[i + 1]._datetext }</span></p>
-		</virtual>
+		</template>
 	</div>
 	<footer>
 		<div ref="notifications"></div>

src/web/app/common/tags/poll.vue

@@ -1,12 +1,12 @@
 <template>
 <div :data-is-voted="isVoted">
 	<ul>
-		<li v-for="choice in poll.choices" @click="vote.bind(choice.id)" :class="{ voted: choice.voted }" title={ !parent.isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', text) : '' }>
+		<li v-for="choice in poll.choices" :key="choice.id" @click="vote.bind(choice.id)" :class="{ voted: choice.voted }" :title="!choice.isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', choice.text) : ''">
-			<div class="backdrop" style={ 'width:' + (parent.result ? (votes / parent.total * 100) : 0) + '%' }></div>
+			<div class="backdrop" :style="{ 'width:' + (result ? (choice.votes / total * 100) : 0) + '%' }"></div>
 			<span>
-				<virtual v-if="is_voted">%fa:check%</virtual>
+				<template v-if="is_voted">%fa:check%</template>
-				{ text }
+				{{ text }}
-				<span class="votes" v-if="parent.result">({ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', votes) })</span>
+				<span class="votes" v-if="parent.result">({{ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', votes) }})</span>
 			</span>
 		</li>
 	</ul>

src/web/app/common/tags/signin-history.tag

@@ -43,8 +43,8 @@
 
 <mk-signin-record>
 	<header @click="toggle">
-		<virtual v-if="rec.success">%fa:check%</virtual>
+		<template v-if="rec.success">%fa:check%</template>
-		<virtual v-if="!rec.success">%fa:times%</virtual>
+		<template v-if="!rec.success">%fa:times%</template>
 		<span class="ip">{ rec.ip }</span>
 		<mk-time time={ rec.created_at }/>
 	</header>

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

@@ -29,7 +29,7 @@
 			<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.password-not-matched%</p>
 		</label>
 		<label class="recaptcha">
-			<p class="caption"><virtual v-if="recaptchaed">%fa:toggle-on%</virtual><virtual v-if="!recaptchaed">%fa:toggle-off%</virtual>%i18n:common.tags.mk-signup.recaptcha%</p>
+			<p class="caption"><template v-if="recaptchaed">%fa:toggle-on%</template><template v-if="!recaptchaed">%fa:toggle-off%</template>%i18n:common.tags.mk-signup.recaptcha%</p>
 			<div v-if="recaptcha" class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" data-sitekey={ recaptcha.site_key }></div>
 		</label>
 		<label class="agree-tou">

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

@@ -2,7 +2,7 @@
 	<button :class="{ wait: wait, follow: !user.is_following, unfollow: user.is_following }" v-if="!init" @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
 		<span v-if="!wait && user.is_following">%fa:minus%フォロー解除</span>
 		<span v-if="!wait && !user.is_following">%fa:plus%フォロー</span>
-		<virtual v-if="wait">%fa:spinner .pulse .fw%</virtual>
+		<template v-if="wait">%fa:spinner .pulse .fw%</template>
 	</button>
 	<div class="init" v-if="init">%fa:spinner .pulse .fw%</div>
 	<style lang="stylus" scoped>

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

@@ -4,9 +4,9 @@
 		<header ref="header"></header>
 		<div class="body" ref="body"></div>
 		<div class="buttons">
-			<virtual each={ opts.buttons }>
+			<template each={ opts.buttons }>
 				<button @click="_onclick">{ text }</button>
-			</virtual>
+			</template>
 		</div>
 	</div>
 	<style lang="stylus" scoped>

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

@@ -2,10 +2,10 @@
 	<nav>
 		<div class="path" oncontextmenu={ pathOncontextmenu }>
 			<mk-drive-browser-nav-folder :class="{ current: folder == null }" folder={ null }/>
-			<virtual each={ folder in hierarchyFolders }>
+			<template each={ folder in hierarchyFolders }>
 				<span class="separator">%fa:angle-right%</span>
 				<mk-drive-browser-nav-folder folder={ folder }/>
-			</virtual>
+			</template>
 			<span class="separator" v-if="folder != null">%fa:angle-right%</span>
 			<span class="folder current" v-if="folder != null">{ folder.name }</span>
 		</div>
@@ -15,17 +15,17 @@
 		<div class="selection" ref="selection"></div>
 		<div class="contents" ref="contents">
 			<div class="folders" ref="foldersContainer" v-if="folders.length > 0">
-				<virtual each={ folder in folders }>
+				<template each={ folder in folders }>
 					<mk-drive-browser-folder class="folder" folder={ folder }/>
-				</virtual>
+				</template>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" each={ Array(10).fill(16) }></div>
 				<button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
 			</div>
 			<div class="files" ref="filesContainer" v-if="files.length > 0">
-				<virtual each={ file in files }>
+				<template each={ file in files }>
 					<mk-drive-browser-file class="file" file={ file }/>
-				</virtual>
+				</template>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" each={ Array(10).fill(16) }></div>
 				<button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button>

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

@@ -1,5 +1,5 @@
 <mk-drive-browser-folder data-is-contextmenu-showing={ isContextmenuShowing.toString() } data-draghover={ draghover.toString() } @click="onclick" onmouseover={ onmouseover } onmouseout={ onmouseout } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu } draggable="true" ondragstart={ ondragstart } ondragend={ ondragend } title={ title }>
-	<p class="name"><virtual v-if="hover">%fa:R folder-open .fw%</virtual><virtual v-if="!hover">%fa:R folder .fw%</virtual>{ folder.name }</p>
+	<p class="name"><template v-if="hover">%fa:R folder-open .fw%</template><template v-if="!hover">%fa:R folder .fw%</template>{ folder.name }</p>
 	<style lang="stylus" scoped>
 		:scope
 			display block

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

@@ -1,5 +1,5 @@
 <mk-drive-browser-nav-folder data-draghover={ draghover } @click="onclick" ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop }>
-	<virtual v-if="folder == null">%fa:cloud%</virtual><span>{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }</span>
+	<template v-if="folder == null">%fa:cloud%</template><span>{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }</span>
 	<style lang="stylus" scoped>
 		:scope
 			&[data-draghover]

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

@@ -1,8 +1,8 @@
 <mk-follow-button>
 	<button :class="{ wait: wait, follow: !user.is_following, unfollow: user.is_following }" v-if="!init" @click="onclick" disabled={ wait } title={ user.is_following ? 'フォロー解除' : 'フォローする' }>
-		<virtual v-if="!wait && user.is_following">%fa:minus%</virtual>
+		<template v-if="!wait && user.is_following">%fa:minus%</template>
-		<virtual v-if="!wait && !user.is_following">%fa:plus%</virtual>
+		<template v-if="!wait && !user.is_following">%fa:plus%</template>
-		<virtual v-if="wait">%fa:spinner .pulse .fw%</virtual>
+		<template v-if="wait">%fa:spinner .pulse .fw%</template>
 	</button>
 	<div class="init" v-if="init">%fa:spinner .pulse .fw%</div>
 	<style lang="stylus" scoped>

src/web/app/desktop/tags/home-widgets/access-log.tag

@@ -1,7 +1,7 @@
 <mk-access-log-home-widget>
-	<virtual v-if="data.design == 0">
+	<template v-if="data.design == 0">
 		<p class="title">%fa:server%%i18n:desktop.tags.mk-access-log-home-widget.title%</p>
-	</virtual>
+	</template>
 	<div ref="log">
 		<p each={ requests }>
 			<span class="ip" style="color:{ fg }; background:{ bg }">{ ip }</span>

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

@@ -12,7 +12,7 @@
 	<h1 v-if="!fetching">{
 		broadcasts.length == 0 ? '%i18n:desktop.tags.mk-broadcast-home-widget.no-broadcasts%' : broadcasts[i].title
 	}</h1>
-	<p v-if="!fetching"><mk-raw v-if="broadcasts.length != 0" content={ broadcasts[i].text }/><virtual v-if="broadcasts.length == 0">%i18n:desktop.tags.mk-broadcast-home-widget.have-a-nice-day%</virtual></p>
+	<p v-if="!fetching"><mk-raw v-if="broadcasts.length != 0" content={ broadcasts[i].text }/><template v-if="broadcasts.length == 0">%i18n:desktop.tags.mk-broadcast-home-widget.have-a-nice-day%</template></p>
 	<a v-if="broadcasts.length > 1" @click="next">%i18n:desktop.tags.mk-broadcast-home-widget.next% &gt;&gt;</a>
 	<style lang="stylus" scoped>
 		:scope

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

@@ -1,10 +1,10 @@
 <mk-channel-home-widget>
-	<virtual v-if="!data.compact">
+	<template v-if="!data.compact">
 		<p class="title">%fa:tv%{
 			channel ? channel.title : '%i18n:desktop.tags.mk-channel-home-widget.title%'
 		}</p>
 		<button @click="settings" title="%i18n:desktop.tags.mk-channel-home-widget.settings%">%fa:cog%</button>
-	</virtual>
+	</template>
 	<p class="get-started" v-if="this.data.channel == null">%i18n:desktop.tags.mk-channel-home-widget.get-started%</p>
 	<mk-channel ref="channel" show={ this.data.channel }/>
 	<style lang="stylus" scoped>
@@ -200,11 +200,11 @@
 		<a v-if="post.reply">&gt;&gt;{ post.reply.index }</a>
 		{ post.text }
 		<div class="media" v-if="post.media">
-			<virtual each={ file in post.media }>
+			<template each={ file in post.media }>
 				<a href={ file.url } target="_blank">
 					<img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/>
 				</a>
-			</virtual>
+			</template>
 		</div>
 	</div>
 	<style lang="stylus" scoped>

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

@@ -6,8 +6,8 @@
 	<p class="empty" v-if="isEmpty">%fa:R comments%<span v-if="mode == 'all'">あなた宛ての投稿はありません。</span><span v-if="mode == 'following'">あなたがフォローしているユーザーからの言及はありません。</span></p>
 	<mk-timeline ref="timeline">
 		<yield to="footer">
-			<virtual v-if="!parent.moreLoading">%fa:moon%</virtual>
+			<template v-if="!parent.moreLoading">%fa:moon%</template>
-			<virtual v-if="parent.moreLoading">%fa:spinner .pulse .fw%</virtual>
+			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
 		</yield/>
 	</mk-timeline>
 	<style lang="stylus" scoped>

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

@@ -1,7 +1,7 @@
 <mk-messaging-home-widget>
-	<virtual v-if="data.design == 0">
+	<template v-if="data.design == 0">
 		<p class="title">%fa:comments%%i18n:desktop.tags.mk-messaging-home-widget.title%</p>
-	</virtual>
+	</template>
 	<mk-messaging ref="index" compact={ true }/>
 	<style lang="stylus" scoped>
 		:scope

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

@@ -1,8 +1,8 @@
 <mk-notifications-home-widget>
-	<virtual v-if="!data.compact">
+	<template v-if="!data.compact">
 		<p class="title">%fa:R bell%%i18n:desktop.tags.mk-notifications-home-widget.title%</p>
 		<button @click="settings" title="%i18n:desktop.tags.mk-notifications-home-widget.settings%">%fa:cog%</button>
-	</virtual>
+	</template>
 	<mk-notifications/>
 	<style lang="stylus" scoped>
 		:scope

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

@@ -1,12 +1,12 @@
 <mk-photo-stream-home-widget data-melt={ data.design == 2 }>
-	<virtual v-if="data.design == 0">
+	<template v-if="data.design == 0">
 		<p class="title">%fa:camera%%i18n:desktop.tags.mk-photo-stream-home-widget.title%</p>
-	</virtual>
+	</template>
 	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<div class="stream" v-if="!initializing && images.length > 0">
-		<virtual each={ image in images }>
+		<template each={ image in images }>
 			<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
-		</virtual>
+		</template>
 	</div>
 	<p class="empty" v-if="!initializing && images.length == 0">%i18n:desktop.tags.mk-photo-stream-home-widget.no-photos%</p>
 	<style lang="stylus" scoped>

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

@@ -1,12 +1,12 @@
 <mk-post-form-home-widget>
 	<mk-post-form v-if="place == 'main'"/>
-	<virtual v-if="place != 'main'">
+	<template v-if="place != 'main'">
-		<virtual v-if="data.design == 0">
+		<template v-if="data.design == 0">
 			<p class="title">%fa:pencil-alt%%i18n:desktop.tags.mk-post-form-home-widget.title%</p>
-		</virtual>
+		</template>
 		<textarea disabled={ posting } ref="text" onkeydown={ onkeydown } placeholder="%i18n:desktop.tags.mk-post-form-home-widget.placeholder%"></textarea>
 		<button @click="post" disabled={ posting }>%i18n:desktop.tags.mk-post-form-home-widget.post%</button>
-	</virtual>
+	</template>
 	<style lang="stylus" scoped>
 		:scope
 			display block

src/web/app/desktop/tags/home-widgets/recommended-polls.tag

@@ -1,8 +1,8 @@
 <mk-recommended-polls-home-widget>
-	<virtual v-if="!data.compact">
+	<template v-if="!data.compact">
 		<p class="title">%fa:chart-pie%%i18n:desktop.tags.mk-recommended-polls-home-widget.title%</p>
 		<button @click="fetch" title="%i18n:desktop.tags.mk-recommended-polls-home-widget.refresh%">%fa:sync%</button>
-	</virtual>
+	</template>
 	<div class="poll" v-if="!loading && poll != null">
 		<p v-if="poll.text"><a href="/{ poll.user.username }/{ poll.id }">{ poll.text }</a></p>
 		<p v-if="!poll.text"><a href="/{ poll.user.username }/{ poll.id }">%fa:link%</a></p>

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

@@ -1,10 +1,10 @@
 <mk-rss-reader-home-widget>
-	<virtual v-if="!data.compact">
+	<template v-if="!data.compact">
 		<p class="title">%fa:rss-square%RSS</p>
 		<button @click="settings" title="設定">%fa:cog%</button>
-	</virtual>
+	</template>
 	<div class="feed" v-if="!initializing">
-		<virtual each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></virtual>
+		<template each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></template>
 	</div>
 	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<style lang="stylus" scoped>

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

@@ -1,8 +1,8 @@
 <mk-server-home-widget data-melt={ data.design == 2 }>
-	<virtual v-if="data.design == 0">
+	<template v-if="data.design == 0">
 		<p class="title">%fa:server%%i18n:desktop.tags.mk-server-home-widget.title%</p>
 		<button @click="toggle" title="%i18n:desktop.tags.mk-server-home-widget.toggle%">%fa:sort%</button>
-	</virtual>
+	</template>
 	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<mk-server-home-widget-cpu-and-memory-usage v-if="!initializing" show={ data.view == 0 } connection={ connection }/>
 	<mk-server-home-widget-cpu v-if="!initializing" show={ data.view == 1 } connection={ connection } meta={ meta }/>

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

@@ -6,8 +6,8 @@
 	<p class="empty" v-if="isEmpty && !isLoading">%fa:R comments%自分の投稿や、自分がフォローしているユーザーの投稿が表示されます。</p>
 	<mk-timeline ref="timeline" hide={ isLoading }>
 		<yield to="footer">
-			<virtual v-if="!parent.moreLoading">%fa:moon%</virtual>
+			<template v-if="!parent.moreLoading">%fa:moon%</template>
-			<virtual v-if="parent.moreLoading">%fa:spinner .pulse .fw%</virtual>
+			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
 		</yield/>
 	</mk-timeline>
 	<style lang="stylus" scoped>

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

@@ -1,8 +1,8 @@
 <mk-trends-home-widget>
-	<virtual v-if="!data.compact">
+	<template v-if="!data.compact">
 		<p class="title">%fa:fire%%i18n:desktop.tags.mk-trends-home-widget.title%</p>
 		<button @click="fetch" title="%i18n:desktop.tags.mk-trends-home-widget.refresh%">%fa:sync%</button>
-	</virtual>
+	</template>
 	<div class="post" v-if="!loading && post != null">
 		<p class="text"><a href="/{ post.user.username }/{ post.id }">{ post.text }</a></p>
 		<p class="author">―<a href="/{ post.user.username }">@{ post.user.username }</a></p>

src/web/app/desktop/tags/home-widgets/user-recommendation.tag

@@ -1,8 +1,8 @@
 <mk-user-recommendation-home-widget>
-	<virtual v-if="!data.compact">
+	<template v-if="!data.compact">
 		<p class="title">%fa:users%%i18n:desktop.tags.mk-user-recommendation-home-widget.title%</p>
 		<button @click="refresh" title="%i18n:desktop.tags.mk-user-recommendation-home-widget.refresh%">%fa:sync%</button>
-	</virtual>
+	</template>
 	<div class="user" v-if="!loading && users.length != 0" each={ _user in users }>
 		<a class="avatar-anchor" href={ '/' + _user.username }>
 			<img class="avatar" src={ _user.avatar_url + '?thumbnail&size=42' } alt="" data-user-preview={ _user.id }/>

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

@@ -1,7 +1,7 @@
 <mk-images>
-	<virtual each={ image in images }>
+	<template each={ image in images }>
 		<mk-images-image image={ image }/>
-	</virtual>
+	</template>
 	<style lang="stylus" scoped>
 		:scope
 			display grid

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

@@ -1,9 +1,9 @@
 <mk-notifications>
 	<div class="notifications" v-if="notifications.length != 0">
-		<virtual each={ notification, i in notifications }>
+		<template each={ notification, i in notifications }>
 			<div class="notification { notification.type }">
 				<mk-time time={ notification.created_at }/>
-				<virtual v-if="notification.type == 'reaction'">
+				<template v-if="notification.type == 'reaction'">
 					<a class="avatar-anchor" href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>
 						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
@@ -13,8 +13,8 @@
 							%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
 						</a>
 					</div>
-				</virtual>
+				</template>
-				<virtual v-if="notification.type == 'repost'">
+				<template v-if="notification.type == 'repost'">
 					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
@@ -24,8 +24,8 @@
 							%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%
 						</a>
 					</div>
-				</virtual>
+				</template>
-				<virtual v-if="notification.type == 'quote'">
+				<template v-if="notification.type == 'quote'">
 					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
@@ -33,16 +33,16 @@
 						<p>%fa:quote-left%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
 						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
-				</virtual>
+				</template>
-				<virtual v-if="notification.type == 'follow'">
+				<template v-if="notification.type == 'follow'">
 					<a class="avatar-anchor" href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>
 						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
 					<div class="text">
 						<p>%fa:user-plus%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
 					</div>
-				</virtual>
+				</template>
-				<virtual v-if="notification.type == 'reply'">
+				<template v-if="notification.type == 'reply'">
 					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
@@ -50,8 +50,8 @@
 						<p>%fa:reply%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
 						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
-				</virtual>
+				</template>
-				<virtual v-if="notification.type == 'mention'">
+				<template v-if="notification.type == 'mention'">
 					<a class="avatar-anchor" href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
 						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
@@ -59,8 +59,8 @@
 						<p>%fa:at%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
 						<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
-				</virtual>
+				</template>
-				<virtual v-if="notification.type == 'poll_vote'">
+				<template v-if="notification.type == 'poll_vote'">
 					<a class="avatar-anchor" href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>
 						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
 					</a>
@@ -70,16 +70,16 @@
 							%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
 						</a>
 					</div>
-				</virtual>
+				</template>
 			</div>
 			<p class="date" v-if="i != notifications.length - 1 && notification._date != notifications[i + 1]._date">
 				<span>%fa:angle-up%{ notification._datetext }</span>
 				<span>%fa:angle-down%{ notifications[i + 1]._datetext }</span>
 			</p>
-		</virtual>
+		</template>
 	</div>
 	<button class="more { fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" disabled={ fetchingMoreNotifications }>
-		<virtual v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</virtual>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
+		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
 	</button>
 	<p class="empty" v-if="notifications.length == 0 && !loading">ありません！</p>
 	<p class="loading" v-if="loading">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>

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

@@ -1,13 +1,13 @@
 <mk-post-detail title={ title }>
 	<div class="main">
 		<button class="read-more" v-if="p.reply && p.reply.reply_id && context == null" title="会話をもっと読み込む" @click="loadContext" disabled={ contextFetching }>
-			<virtual v-if="!contextFetching">%fa:ellipsis-v%</virtual>
+			<template v-if="!contextFetching">%fa:ellipsis-v%</template>
-			<virtual v-if="contextFetching">%fa:spinner .pulse%</virtual>
+			<template v-if="contextFetching">%fa:spinner .pulse%</template>
 		</button>
 		<div class="context">
-			<virtual each={ post in context }>
+			<template each={ post in context }>
 				<mk-post-detail-sub post={ post }/>
-			</virtual>
+			</template>
 		</div>
 		<div class="reply-to" v-if="p.reply">
 			<mk-post-detail-sub post={ p.reply }/>
@@ -58,9 +58,9 @@
 			</footer>
 		</article>
 		<div class="replies" v-if="!compact">
-			<virtual each={ post in replies }>
+			<template each={ post in replies }>
 				<mk-post-detail-sub post={ post }/>
-			</virtual>
+			</template>
 		</div>
 	</div>
 	<style lang="stylus" scoped>

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

@@ -1,15 +1,15 @@
 <mk-repost-form>
 	<mk-post-preview post={ opts.post }/>
-	<virtual v-if="!quote">
+	<template v-if="!quote">
 		<footer>
 			<a class="quote" v-if="!quote" @click="onquote">%i18n:desktop.tags.mk-repost-form.quote%</a>
 			<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-repost-form.cancel%</button>
 			<button class="ok" @click="ok" disabled={ wait }>{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }</button>
 		</footer>
-	</virtual>
+	</template>
-	<virtual v-if="quote">
+	<template v-if="quote">
 		<mk-post-form ref="form" repost={ opts.post }/>
-	</virtual>
+	</template>
 	<style lang="stylus" scoped>
 		:scope
 

src/web/app/desktop/tags/search-posts.tag

@@ -5,8 +5,8 @@
 	<p class="empty" v-if="isEmpty">%fa:search%「{ query }」に関する投稿は見つかりませんでした。</p>
 	<mk-timeline ref="timeline">
 		<yield to="footer">
-			<virtual v-if="!parent.moreLoading">%fa:moon%</virtual>
+			<template v-if="!parent.moreLoading">%fa:moon%</template>
-			<virtual v-if="parent.moreLoading">%fa:spinner .pulse .fw%</virtual>
+			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
 		</yield/>
 	</mk-timeline>
 	<style lang="stylus" scoped>

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

@@ -266,10 +266,10 @@
 	<p>%i18n:desktop.tags.mk-2fa-setting.intro%<a href="%i18n:desktop.tags.mk-2fa-setting.url%" target="_blank">%i18n:desktop.tags.mk-2fa-setting.detail%</a></p>
 	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
 	<p v-if="!data && !I.two_factor_enabled"><button @click="register" class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
-	<virtual v-if="I.two_factor_enabled">
+	<template v-if="I.two_factor_enabled">
 		<p>%i18n:desktop.tags.mk-2fa-setting.already-registered%</p>
 		<button @click="unregister" class="ui">%i18n:desktop.tags.mk-2fa-setting.unregister%</button>
-	</virtual>
+	</template>
 	<div v-if="data">
 		<ol>
 			<li>%i18n:desktop.tags.mk-2fa-setting.authenticator% <a href="https://support.google.com/accounts/answer/1066447" target="_blank">%i18n:desktop.tags.mk-2fa-setting.howtoinstall%</a></li>

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

@@ -1,8 +1,8 @@
 <mk-timeline>
-	<virtual each={ post, i in posts }>
+	<template each={ post, i in posts }>
 		<mk-timeline-post post={ post }/>
 		<p class="date" v-if="i != posts.length - 1 && post._date != posts[i + 1]._date"><span>%fa:angle-up%{ post._datetext }</span><span>%fa:angle-down%{ posts[i + 1]._datetext }</span></p>
-	</virtual>
+	</template>
 	<footer data-yield="footer">
 		<yield from="footer"/>
 	</footer>
@@ -142,8 +142,8 @@
 					%fa:ellipsis-h%
 				</button>
 				<button @click="toggleDetail" title="%i18n:desktop.tags.mk-timeline-post.detail">
-					<virtual v-if="!isDetailOpened">%fa:caret-down%</virtual>
+					<template v-if="!isDetailOpened">%fa:caret-down%</template>
-					<virtual v-if="isDetailOpened">%fa:caret-up%</virtual>
+					<template v-if="isDetailOpened">%fa:caret-up%</template>
 				</button>
 			</footer>
 		</div>

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

@@ -230,7 +230,7 @@
 
 <mk-ui-header-notifications>
 	<button data-active={ isOpen } @click="toggle" title="%i18n:desktop.tags.mk-ui-header-notifications.title%">
-		%fa:R bell%<virtual v-if="hasUnreadNotifications">%fa:circle%</virtual>
+		%fa:R bell%<template v-if="hasUnreadNotifications">%fa:circle%</template>
 	</button>
 	<div class="notifications" v-if="isOpen">
 		<mk-notifications/>
@@ -392,7 +392,7 @@
 
 <mk-ui-header-nav>
 	<ul>
-		<virtual v-if="SIGNIN">
+		<template v-if="SIGNIN">
 			<li class="home { active: page == 'home' }">
 				<a href={ _URL_ }>
 					%fa:home%
@@ -403,10 +403,10 @@
 				<a @click="messaging">
 					%fa:comments%
 					<p>%i18n:desktop.tags.mk-ui-header-nav.messaging%</p>
-					<virtual v-if="hasUnreadMessagingMessages">%fa:circle%</virtual>
+					<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>
 				</a>
 			</li>
-		</virtual>
+		</template>
 		<li class="ch">
 			<a href={ _CH_URL_ } target="_blank">
 				%fa:tv%
@@ -630,7 +630,7 @@
 
 <mk-ui-header-account>
 	<button class="header" data-active={ isOpen.toString() } @click="toggle">
-		<span class="username">{ I.username }<virtual v-if="!isOpen">%fa:angle-down%</virtual><virtual v-if="isOpen">%fa:angle-up%</virtual></span>
+		<span class="username">{ I.username }<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
 		<img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 	</button>
 	<div class="menu" v-if="isOpen">

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

@@ -1,5 +1,5 @@
 <mk-user-preview>
-	<virtual v-if="user != null">
+	<template v-if="user != null">
 		<div class="banner" style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=512)' : '' }></div><a class="avatar" href={ '/' + user.username } target="_blank"><img src={ user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
 		<div class="title">
 			<p class="name">{ user.name }</p>
@@ -18,7 +18,7 @@
 			</div>
 		</div>
 		<mk-follow-button v-if="SIGNIN && user.id != I.id" user={ userPromise }/>
-	</virtual>
+	</template>
 	<style lang="stylus" scoped>
 		:scope
 			display block

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

@@ -8,8 +8,8 @@
 	<p class="empty" v-if="isEmpty">%fa:R comments%このユーザーはまだ何も投稿していないようです。</p>
 	<mk-timeline ref="timeline">
 		<yield to="footer">
-			<virtual v-if="!parent.moreLoading">%fa:moon%</virtual>
+			<template v-if="!parent.moreLoading">%fa:moon%</template>
-			<virtual v-if="parent.moreLoading">%fa:spinner .pulse .fw%</virtual>
+			<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
 		</yield/>
 	</mk-timeline>
 	<style lang="stylus" scoped>

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

@@ -357,9 +357,9 @@
 	<p class="title">%fa:camera%%i18n:desktop.tags.mk-user.photos.title%</p>
 	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.photos.loading%<mk-ellipsis/></p>
 	<div class="stream" v-if="!initializing && images.length > 0">
-		<virtual each={ image in images }>
+		<template each={ image in images }>
 			<div class="img" style={ 'background-image: url(' + image.url + '?thumbnail&size=256)' }></div>
-		</virtual>
+		</template>
 	</div>
 	<p class="empty" v-if="!initializing && images.length == 0">%i18n:desktop.tags.mk-user.photos.no-photos%</p>
 	<style lang="stylus" scoped>
@@ -563,9 +563,9 @@
 	<p class="title">%fa:users%%i18n:desktop.tags.mk-user.followers-you-know.title%</p>
 	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:desktop.tags.mk-user.followers-you-know.loading%<mk-ellipsis/></p>
 	<div v-if="!initializing && users.length > 0">
-	<virtual each={ user in users }>
+	<template each={ user in users }>
 		<a href={ '/' + user.username }><img src={ user.avatar_url + '?thumbnail&size=64' } alt={ user.name }/></a>
-	</virtual>
+	</template>
 	</div>
 	<p class="empty" v-if="!initializing && users.length == 0">%i18n:desktop.tags.mk-user.followers-you-know.no-users%</p>
 	<style lang="stylus" scoped>

src/web/app/desktop/tags/widgets/activity.tag

@@ -1,8 +1,8 @@
 <mk-activity-widget data-melt={ design == 2 }>
-	<virtual v-if="design == 0">
+	<template v-if="design == 0">
 		<p class="title">%fa:chart-bar%%i18n:desktop.tags.mk-activity-widget.title%</p>
 		<button @click="toggle" title="%i18n:desktop.tags.mk-activity-widget.toggle%">%fa:sort%</button>
-	</virtual>
+	</template>
 	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<mk-activity-widget-calender v-if="!initializing && view == 0" data={ [].concat(activity) }/>
 	<mk-activity-widget-chart v-if="!initializing && view == 1" data={ [].concat(activity) }/>

src/web/app/desktop/tags/widgets/calendar.tag

@@ -1,9 +1,9 @@
 <mk-calendar-widget data-melt={ opts.design == 4 || opts.design == 5 }>
-	<virtual v-if="opts.design == 0 || opts.design == 1">
+	<template v-if="opts.design == 0 || opts.design == 1">
 		<button @click="prev" title="%i18n:desktop.tags.mk-calendar-widget.prev%">%fa:chevron-circle-left%</button>
 		<p class="title">{ '%i18n:desktop.tags.mk-calendar-widget.title%'.replace('{1}', year).replace('{2}', month) }</p>
 		<button @click="next" title="%i18n:desktop.tags.mk-calendar-widget.next%">%fa:chevron-circle-right%</button>
-	</virtual>
+	</template>
 
 	<div class="calendar">
 		<div class="weekday" v-if="opts.design == 0 || opts.design == 2 || opts.design == 4} each={ day, i in Array(7).fill(0)"

src/web/app/dev/tags/pages/apps.tag

@@ -2,13 +2,13 @@
 	<h1>アプリを管理</h1><a href="/app/new">アプリ作成</a>
 	<div class="apps">
 		<p v-if="fetching">読み込み中</p>
-		<virtual v-if="!fetching">
+		<template v-if="!fetching">
 			<p v-if="apps.length == 0">アプリなし</p>
 			<ul v-if="apps.length > 0">
 				<li each={ app in apps }><a href={ '/app/' + app.id }>
 						<p class="name">{ app.name }</p></a></li>
 			</ul>
-		</virtual>
+		</template>
 	</div>
 	<style lang="stylus" scoped>
 		:scope

src/web/app/mobile/tags/drive.tag

@@ -1,39 +1,39 @@
 <mk-drive>
 	<nav ref="nav">
 		<a @click="goRoot" href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</a>
-		<virtual each={ folder in hierarchyFolders }>
+		<template each={ folder in hierarchyFolders }>
 			<span>%fa:angle-right%</span>
 			<a @click="move" href="/i/drive/folder/{ folder.id }">{ folder.name }</a>
-		</virtual>
+		</template>
-		<virtual v-if="folder != null">
+		<template v-if="folder != null">
 			<span>%fa:angle-right%</span>
 			<p>{ folder.name }</p>
-		</virtual>
+		</template>
-		<virtual v-if="file != null">
+		<template v-if="file != null">
 			<span>%fa:angle-right%</span>
 			<p>{ file.name }</p>
-		</virtual>
+		</template>
 	</nav>
 	<mk-uploader ref="uploader"/>
 	<div class="browser { fetching: fetching }" v-if="file == null">
 		<div class="info" v-if="info">
 			<p v-if="folder == null">{ (info.usage / info.capacity * 100).toFixed(1) }% %i18n:mobile.tags.mk-drive.used%</p>
 			<p v-if="folder != null && (folder.folders_count > 0 || folder.files_count > 0)">
-				<virtual v-if="folder.folders_count > 0">{ folder.folders_count } %i18n:mobile.tags.mk-drive.folder-count%</virtual>
+				<template v-if="folder.folders_count > 0">{ folder.folders_count } %i18n:mobile.tags.mk-drive.folder-count%</template>
-				<virtual v-if="folder.folders_count > 0 && folder.files_count > 0">%i18n:mobile.tags.mk-drive.count-separator%</virtual>
+				<template v-if="folder.folders_count > 0 && folder.files_count > 0">%i18n:mobile.tags.mk-drive.count-separator%</template>
-				<virtual v-if="folder.files_count > 0">{ folder.files_count } %i18n:mobile.tags.mk-drive.file-count%</virtual>
+				<template v-if="folder.files_count > 0">{ folder.files_count } %i18n:mobile.tags.mk-drive.file-count%</template>
 			</p>
 		</div>
 		<div class="folders" v-if="folders.length > 0">
-			<virtual each={ folder in folders }>
+			<template each={ folder in folders }>
 				<mk-drive-folder folder={ folder }/>
-			</virtual>
+			</template>
 			<p v-if="moreFolders">%i18n:mobile.tags.mk-drive.load-more%</p>
 		</div>
 		<div class="files" v-if="files.length > 0">
-			<virtual each={ file in files }>
+			<template each={ file in files }>
 				<mk-drive-file file={ file }/>
-			</virtual>
+			</template>
 			<button class="more" v-if="moreFiles" @click="fetchMoreFiles">
 				{ fetchingMoreFiles ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-drive.load-more%' }
 			</button>

src/web/app/mobile/tags/drive/file-viewer.tag

@@ -6,7 +6,7 @@
 			title={ file.name }
 			onload={ onImageLoaded }
 			style="background-color:rgb({ file.properties.average_color.join(',') })">
-		<virtual v-if="kind != 'image'">%fa:file%</virtual>
+		<template v-if="kind != 'image'">%fa:file%</template>
 		<footer v-if="kind == 'image' && file.properties && file.properties.width && file.properties.height">
 			<span class="size">
 				<span class="width">{ file.properties.width }</span>

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

@@ -1,8 +1,8 @@
 <mk-follow-button>
 	<button :class="{ wait: wait, follow: !user.is_following, unfollow: user.is_following }" v-if="!init" @click="onclick" disabled={ wait }>
-		<virtual v-if="!wait && user.is_following">%fa:minus%</virtual>
+		<template v-if="!wait && user.is_following">%fa:minus%</template>
-		<virtual v-if="!wait && !user.is_following">%fa:plus%</virtual>
+		<template v-if="!wait && !user.is_following">%fa:plus%</template>
-		<virtual v-if="wait">%fa:spinner .pulse .fw%</virtual>{ user.is_following ? '%i18n:mobile.tags.mk-follow-button.unfollow%' : '%i18n:mobile.tags.mk-follow-button.follow%' }
+		<template v-if="wait">%fa:spinner .pulse .fw%</template>{ user.is_following ? '%i18n:mobile.tags.mk-follow-button.unfollow%' : '%i18n:mobile.tags.mk-follow-button.follow%' }
 	</button>
 	<div class="init" v-if="init">%fa:spinner .pulse .fw%</div>
 	<style lang="stylus" scoped>

src/web/app/mobile/tags/images.tag

@@ -1,7 +1,7 @@
 <mk-images>
-	<virtual each={ image in images }>
+	<template each={ image in images }>
 		<mk-images-image image={ image }/>
-	</virtual>
+	</template>
 	<style lang="stylus" scoped>
 		:scope
 			display grid

src/web/app/mobile/tags/init-following.tag

@@ -1,9 +1,9 @@
 <mk-init-following>
 	<p class="title">気になるユーザーをフォロー:</p>
 	<div class="users" v-if="!fetching && users.length > 0">
-		<virtual each={ users }>
+		<template each={ users }>
 			<mk-user-card user={ this } />
-		</virtual>
+		</template>
 	</div>
 	<p class="empty" v-if="!fetching && users.length == 0">おすすめのユーザーは見つかりませんでした。</p>
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>

src/web/app/mobile/tags/notification-preview.tag

@@ -1,52 +1,52 @@
 <mk-notification-preview :class="{ notification.type }">
-	<virtual v-if="notification.type == 'reaction'">
+	<template v-if="notification.type == 'reaction'">
 		<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><mk-reaction-icon reaction={ notification.reaction }/>{ notification.user.name }</p>
 			<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%</p>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'repost'">
+	<template v-if="notification.type == 'repost'">
 		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p>%fa:retweet%{ notification.post.user.name }</p>
 			<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%</p>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'quote'">
+	<template v-if="notification.type == 'quote'">
 		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p>%fa:quote-left%{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'follow'">
+	<template v-if="notification.type == 'follow'">
 		<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p>%fa:user-plus%{ notification.user.name }</p>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'reply'">
+	<template v-if="notification.type == 'reply'">
 		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p>%fa:reply%{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'mention'">
+	<template v-if="notification.type == 'mention'">
 		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p>%fa:at%{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'poll_vote'">
+	<template v-if="notification.type == 'poll_vote'">
 		<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p>%fa:chart-pie%{ notification.user.name }</p>
 			<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%</p>
 		</div>
-	</virtual>
+	</template>
 	<style lang="stylus" scoped>
 		:scope
 			display block

src/web/app/mobile/tags/notification.tag

@@ -1,6 +1,6 @@
 <mk-notification :class="{ notification.type }">
 	<mk-time time={ notification.created_at }/>
-	<virtual v-if="notification.type == 'reaction'">
+	<template v-if="notification.type == 'reaction'">
 		<a class="avatar-anchor" href={ '/' + notification.user.username }>
 			<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		</a>
@@ -13,8 +13,8 @@
 				%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
 			</a>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'repost'">
+	<template v-if="notification.type == 'repost'">
 		<a class="avatar-anchor" href={ '/' + notification.post.user.username }>
 			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		</a>
@@ -27,8 +27,8 @@
 				%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%
 			</a>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'quote'">
+	<template v-if="notification.type == 'quote'">
 		<a class="avatar-anchor" href={ '/' + notification.post.user.username }>
 			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		</a>
@@ -39,8 +39,8 @@
 			</p>
 			<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'follow'">
+	<template v-if="notification.type == 'follow'">
 		<a class="avatar-anchor" href={ '/' + notification.user.username }>
 			<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		</a>
@@ -50,8 +50,8 @@
 				<a href={ '/' + notification.user.username }>{ notification.user.name }</a>
 			</p>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'reply'">
+	<template v-if="notification.type == 'reply'">
 		<a class="avatar-anchor" href={ '/' + notification.post.user.username }>
 			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		</a>
@@ -62,8 +62,8 @@
 			</p>
 			<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'mention'">
+	<template v-if="notification.type == 'mention'">
 		<a class="avatar-anchor" href={ '/' + notification.post.user.username }>
 			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		</a>
@@ -74,8 +74,8 @@
 			</p>
 			<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 		</div>
-	</virtual>
+	</template>
-	<virtual v-if="notification.type == 'poll_vote'">
+	<template v-if="notification.type == 'poll_vote'">
 		<a class="avatar-anchor" href={ '/' + notification.user.username }>
 			<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		</a>
@@ -88,7 +88,7 @@
 				%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
 			</a>
 		</div>
-	</virtual>
+	</template>
 	<style lang="stylus" scoped>
 		:scope
 			display block

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

@@ -1,12 +1,12 @@
 <mk-notifications>
 	<div class="notifications" v-if="notifications.length != 0">
-		<virtual each={ notification, i in notifications }>
+		<template each={ notification, i in notifications }>
 			<mk-notification notification={ notification }/>
 			<p class="date" v-if="i != notifications.length - 1 && notification._date != notifications[i + 1]._date"><span>%fa:angle-up%{ notification._datetext }</span><span>%fa:angle-down%{ notifications[i + 1]._datetext }</span></p>
-		</virtual>
+		</template>
 	</div>
 	<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" disabled={ fetchingMoreNotifications }>
-		<virtual v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</virtual>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
+		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
 	</button>
 	<p class="empty" v-if="notifications.length == 0 && !loading">%i18n:mobile.tags.mk-notifications.empty%</p>
 	<p class="loading" v-if="loading">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>

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

@@ -1,12 +1,12 @@
 <mk-post-detail>
 	<button class="read-more" v-if="p.reply && p.reply.reply_id && context == null" @click="loadContext" disabled={ loadingContext }>
-		<virtual v-if="!contextFetching">%fa:ellipsis-v%</virtual>
+		<template v-if="!contextFetching">%fa:ellipsis-v%</template>
-		<virtual v-if="contextFetching">%fa:spinner .pulse%</virtual>
+		<template v-if="contextFetching">%fa:spinner .pulse%</template>
 	</button>
 	<div class="context">
-		<virtual each={ post in context }>
+		<template each={ post in context }>
 			<mk-post-detail-sub post={ post }/>
-		</virtual>
+		</template>
 	</div>
 	<div class="reply-to" v-if="p.reply">
 		<mk-post-detail-sub post={ p.reply }/>
@@ -58,9 +58,9 @@
 		</footer>
 	</article>
 	<div class="replies" v-if="!compact">
-		<virtual each={ post in replies }>
+		<template each={ post in replies }>
 			<mk-post-detail-sub post={ post }/>
-		</virtual>
+		</template>
 	</div>
 	<style lang="stylus" scoped>
 		:scope

src/web/app/mobile/tags/timeline.tag

@@ -5,13 +5,13 @@
 	<div class="empty" v-if="!init && posts.length == 0">
 		%fa:R comments%{ opts.empty || '%i18n:mobile.tags.mk-timeline.empty%' }
 	</div>
-	<virtual each={ post, i in posts }>
+	<template each={ post, i in posts }>
 		<mk-timeline-post post={ post }/>
 		<p class="date" v-if="i != posts.length - 1 && post._date != posts[i + 1]._date">
 			<span>%fa:angle-up%{ post._datetext }</span>
 			<span>%fa:angle-down%{ posts[i + 1]._datetext }</span>
 		</p>
-	</virtual>
+	</template>
 	<footer v-if="!init">
 		<button v-if="canFetchMore" @click="more" disabled={ fetching }>
 			<span v-if="!fetching">%i18n:mobile.tags.mk-timeline.load-more%</span>

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

@@ -53,7 +53,7 @@
 		<div class="backdrop"></div>
 		<div class="content">
 			<button class="nav" @click="parent.toggleDrawer">%fa:bars%</button>
-			<virtual v-if="hasUnreadNotifications || hasUnreadMessagingMessages">%fa:circle%</virtual>
+			<template v-if="hasUnreadNotifications || hasUnreadMessagingMessages">%fa:circle%</template>
 			<h1 ref="title">Misskey</h1>
 			<button v-if="func" @click="func"><mk-raw content={ funcIcon }/></button>
 		</div>
@@ -234,8 +234,8 @@
 		<div class="links">
 			<ul>
 				<li><a href="/">%fa:home%%i18n:mobile.tags.mk-ui-nav.home%%fa:angle-right%</a></li>
-				<li><a href="/i/notifications">%fa:R bell%%i18n:mobile.tags.mk-ui-nav.notifications%<virtual v-if="hasUnreadNotifications">%fa:circle%</virtual>%fa:angle-right%</a></li>
+				<li><a href="/i/notifications">%fa:R bell%%i18n:mobile.tags.mk-ui-nav.notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</a></li>
-				<li><a href="/i/messaging">%fa:R comments%%i18n:mobile.tags.mk-ui-nav.messaging%<virtual v-if="hasUnreadMessagingMessages">%fa:circle%</virtual>%fa:angle-right%</a></li>
+				<li><a href="/i/messaging">%fa:R comments%%i18n:mobile.tags.mk-ui-nav.messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</a></li>
 			</ul>
 			<ul>
 				<li><a href={ _CH_URL_ } target="_blank">%fa:tv%%i18n:mobile.tags.mk-ui-nav.ch%%fa:angle-right%</a></li>

src/web/app/mobile/tags/user.tag

@@ -309,9 +309,9 @@
 <mk-user-overview-posts>
 	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-posts.loading%<mk-ellipsis/></p>
 	<div v-if="!initializing && posts.length > 0">
-		<virtual each={ posts }>
+		<template each={ posts }>
 			<mk-user-overview-posts-post-card post={ this }/>
-		</virtual>
+		</template>
 	</div>
 	<p class="empty" v-if="!initializing && posts.length == 0">%i18n:mobile.tags.mk-user-overview-posts.no-posts%</p>
 	<style lang="stylus" scoped>
@@ -438,9 +438,9 @@
 <mk-user-overview-photos>
 	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-photos.loading%<mk-ellipsis/></p>
 	<div class="stream" v-if="!initializing && images.length > 0">
-		<virtual each={ image in images }>
+		<template each={ image in images }>
 			<a class="img" style={ 'background-image: url(' + image.media.url + '?thumbnail&size=256)' } href={ '/' + image.post.user.username + '/' + image.post.id }></a>
-		</virtual>
+		</template>
 	</div>
 	<p class="empty" v-if="!initializing && images.length == 0">%i18n:mobile.tags.mk-user-overview-photos.no-photos%</p>
 	<style lang="stylus" scoped>
@@ -559,9 +559,9 @@
 
 <mk-user-overview-keywords>
 	<div v-if="user.keywords != null && user.keywords.length > 1">
-		<virtual each={ keyword in user.keywords }>
+		<template each={ keyword in user.keywords }>
 			<a>{ keyword }</a>
-		</virtual>
+		</template>
 	</div>
 	<p class="empty" v-if="user.keywords == null || user.keywords.length == 0">%i18n:mobile.tags.mk-user-overview-keywords.no-keywords%</p>
 	<style lang="stylus" scoped>
@@ -593,9 +593,9 @@
 
 <mk-user-overview-domains>
 	<div v-if="user.domains != null && user.domains.length > 1">
-		<virtual each={ domain in user.domains }>
+		<template each={ domain in user.domains }>
 			<a style="opacity: { 0.5 + (domain.weight / 2) }">{ domain.domain }</a>
-		</virtual>
+		</template>
 	</div>
 	<p class="empty" v-if="user.domains == null || user.domains.length == 0">%i18n:mobile.tags.mk-user-overview-domains.no-domains%</p>
 	<style lang="stylus" scoped>
@@ -628,9 +628,9 @@
 <mk-user-overview-frequently-replied-users>
 	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-frequently-replied-users.loading%<mk-ellipsis/></p>
 	<div v-if="!initializing && users.length > 0">
-		<virtual each={ users }>
+		<template each={ users }>
 			<mk-user-card user={ this.user }/>
-		</virtual>
+		</template>
 	</div>
 	<p class="empty" v-if="!initializing && users.length == 0">%i18n:mobile.tags.mk-user-overview-frequently-replied-users.no-users%</p>
 	<style lang="stylus" scoped>
@@ -680,9 +680,9 @@
 <mk-user-overview-followers-you-know>
 	<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p>
 	<div v-if="!initializing && users.length > 0">
-		<virtual each={ user in users }>
+		<template each={ user in users }>
 			<a href={ '/' + user.username }><img src={ user.avatar_url + '?thumbnail&size=64' } alt={ user.name }/></a>
-		</virtual>
+		</template>
 	</div>
 	<p class="empty" v-if="!initializing && users.length == 0">%i18n:mobile.tags.mk-user-overview-followers-you-know.no-users%</p>
 	<style lang="stylus" scoped>