enhance(frontend): shiki v1に移行 (#13138)

* enhance(frontend): shiki v1に移行

* optimize chunks, エラーを握りつぶす

* wasmを分離

* バンドルサイズの警告の最小値を650kBに引き上げ

* optimize
This commit is contained in:
かっこかり 2024-02-02 15:05:18 +09:00 committed by GitHub
parent e5876440cb
commit 9e1145df81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 37 additions and 52 deletions

View File

@ -60,7 +60,7 @@
"rollup": "4.9.6",
"sanitize-html": "2.11.0",
"sass": "1.70.0",
"shiki": "0.14.7",
"shiki": "1.0.0-beta.3",
"strict-event-emitter-types": "2.0.0",
"textarea-caret": "3.1.0",
"three": "0.160.1",

View File

@ -5,13 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<!-- eslint-disable vue/no-v-html -->
<template>
<div :class="['codeBlockRoot', { 'codeEditor': codeEditor }]" v-html="html"></div>
<div :class="[$style.codeBlockRoot, { [$style.codeEditor]: codeEditor }]" v-html="html"></div>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { BUNDLED_LANGUAGES } from 'shiki';
import type { Lang as ShikiLang } from 'shiki';
import { bundledLanguagesInfo } from 'shiki';
import type { BuiltinLanguage } from 'shiki';
import { getHighlighter } from '@/scripts/code-highlighter.js';
const props = defineProps<{
@ -22,24 +22,25 @@ const props = defineProps<{
const highlighter = await getHighlighter();
const codeLang = ref<ShikiLang | 'aiscript'>('js');
const codeLang = ref<BuiltinLanguage | 'aiscript'>('js');
const html = computed(() => highlighter.codeToHtml(props.code, {
lang: codeLang.value,
theme: 'dark-plus',
}));
async function fetchLanguage(to: string): Promise<void> {
const language = to as ShikiLang;
const language = to as BuiltinLanguage;
// Check for the loaded languages, and load the language if it's not loaded yet.
if (!highlighter.getLoadedLanguages().includes(language)) {
// Check if the language is supported by Shiki
const bundles = BUNDLED_LANGUAGES.filter((bundle) => {
const bundles = bundledLanguagesInfo.filter((bundle) => {
// Languages are specified by their id, they can also have aliases (i. e. "js" and "javascript")
return bundle.id === language || bundle.aliases?.includes(language);
});
if (bundles.length > 0) {
await highlighter.loadLanguage(language);
console.log(`Loading language: ${language}`);
await highlighter.loadLanguage(bundles[0].import);
codeLang.value = language;
} else {
codeLang.value = 'js';
@ -57,8 +58,8 @@ watch(() => props.lang, (to) => {
}, { immediate: true });
</script>
<style scoped lang="scss">
.codeBlockRoot :deep(.shiki) {
<style module lang="scss">
.codeBlockRoot :global(.shiki) {
padding: 1em;
margin: .5em 0;
overflow: auto;
@ -74,7 +75,7 @@ watch(() => props.lang, (to) => {
min-width: 100%;
height: 100%;
& :deep(.shiki) {
& :global(.shiki) {
padding: 12px;
margin: 0;
border-radius: 6px;

View File

@ -1,7 +1,6 @@
import { setWasm, setCDN, Highlighter, getHighlighter as _getHighlighter } from 'shiki';
setWasm('/assets/shiki/dist/onig.wasm');
setCDN('/assets/shiki/');
import { getHighlighterCore, loadWasm } from 'shiki/core';
import darkPlus from 'shiki/themes/dark-plus.mjs';
import type { Highlighter, LanguageRegistration } from 'shiki';
let _highlighter: Highlighter | null = null;
@ -13,16 +12,19 @@ export async function getHighlighter(): Promise<Highlighter> {
}
export async function initHighlighter() {
const highlighter = await _getHighlighter({
theme: 'dark-plus',
langs: ['js'],
});
const aiScriptGrammar = await import('aiscript-vscode/aiscript/syntaxes/aiscript.tmLanguage.json');
await highlighter.loadLanguage({
path: 'languages/aiscript.tmLanguage.json',
id: 'aiscript',
scopeName: 'source.aiscript',
await loadWasm(import('shiki/onig.wasm?init'));
const highlighter = await getHighlighterCore({
themes: [darkPlus],
langs: [
import('shiki/langs/javascript.mjs'),
{
aliases: ['is', 'ais'],
...aiScriptGrammar.default,
} as unknown as LanguageRegistration,
],
});
_highlighter = highlighter;

View File

@ -797,8 +797,8 @@ importers:
specifier: 1.70.0
version: 1.70.0
shiki:
specifier: 0.14.7
version: 0.14.7
specifier: 1.0.0-beta.3
version: 1.0.0-beta.3
strict-event-emitter-types:
specifier: 2.0.0
version: 2.0.0
@ -5951,6 +5951,10 @@ packages:
string-argv: 0.3.1
dev: true
/@shikijs/core@1.0.0-beta.3:
resolution: {integrity: sha512-SCwPom2Wn8XxNlEeqdzycU93SKgzYeVsedjqDsgZaz4XiiPpZUzlHt2NAEQTwTnPcHNZapZ6vbkwJ8P11ggL3Q==}
dev: false
/@sideway/address@4.1.4:
resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
dependencies:
@ -9297,10 +9301,6 @@ packages:
resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
engines: {node: '>=12'}
/ansi-sequence-parser@1.1.1:
resolution: {integrity: sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==}
dev: false
/ansi-styles@3.2.1:
resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
engines: {node: '>=4'}
@ -14693,6 +14693,7 @@ packages:
/jsonc-parser@3.2.0:
resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
dev: true
/jsonfile@4.0.0:
resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
@ -18247,13 +18248,10 @@ packages:
resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
engines: {node: '>=8'}
/shiki@0.14.7:
resolution: {integrity: sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==}
/shiki@1.0.0-beta.3:
resolution: {integrity: sha512-z7cHTNSSvwGx2DfeLwjSNLo+HcVxifgNIzLm6Ye52eXcIwNHXT0wHbhy7FDOKSKveuEHBwt9opfj3Hoc8LE1Yg==}
dependencies:
ansi-sequence-parser: 1.1.1
jsonc-parser: 3.2.0
vscode-oniguruma: 1.7.0
vscode-textmate: 8.0.0
'@shikijs/core': 1.0.0-beta.3
dev: false
/side-channel@1.0.4:
@ -20019,14 +20017,6 @@ packages:
resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
engines: {node: '>=0.10.0'}
/vscode-oniguruma@1.7.0:
resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
dev: false
/vscode-textmate@8.0.0:
resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
dev: false
/vue-component-type-helpers@1.8.27:
resolution: {integrity: sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg==}
dev: true

View File

@ -35,13 +35,6 @@ async function copyFrontendLocales() {
}
}
async function copyFrontendShikiAssets() {
await fs.cp('./packages/frontend/node_modules/shiki/dist', './built/_frontend_dist_/shiki/dist', { dereference: true, recursive: true });
await fs.cp('./packages/frontend/node_modules/shiki/languages', './built/_frontend_dist_/shiki/languages', { dereference: true, recursive: true });
await fs.cp('./packages/frontend/node_modules/aiscript-vscode/aiscript/syntaxes', './built/_frontend_dist_/shiki/languages', { dereference: true, recursive: true });
await fs.cp('./packages/frontend/node_modules/shiki/themes', './built/_frontend_dist_/shiki/themes', { dereference: true, recursive: true });
}
async function copyBackendViews() {
await fs.cp('./packages/backend/src/server/web/views', './packages/backend/built/server/web/views', { recursive: true });
}
@ -81,7 +74,6 @@ async function build() {
copyFrontendFonts(),
copyFrontendTablerIcons(),
copyFrontendLocales(),
copyFrontendShikiAssets(),
copyBackendViews(),
buildBackendScript(),
buildBackendStyle(),