← All changes | src/hooks/useTheme.ts +45 -53 1.28.0 → 1.13.0 View file →

		@@ -1,68 +1,60 @@
1	1	import { useEffect, useState } from '@wordpress/element';
2	2	import { applyFilters } from '@wordpress/hooks';
3		-import { getHighlighter, setCDN, setWasm, type Theme } from 'shiki';
	3	+import { getHighlighter, Lang, setCDN, Theme, setWasm } from 'shiki';
4	4	import useSWRImmutable from 'swr/immutable';
5	5	import defaultThemes from '../defaultThemes.json';
6		-import type { Lang, ThemeOption } from '../types';
7	6	import { getEditorLanguage } from '../util/languages';
8	7
9		-type Params = {
10		- theme: Theme;
11		- lang: Lang | 'ansi';
12		- ready?: boolean;
13		-};
	8	+type Params = { theme: Theme; lang: Lang | 'ansi'; ready?: boolean };
14	9
15	10	const fetcher = ({ theme, lang, ready }: Params) => {
16		- if (!ready) throw new Error();
17		- const themeFiltered = applyFilters(
18		- 'blocks.codeBlockPro.theme',
19		- theme,
20		- ) as Theme;
21		- // If the theme has an alias, use that instead
22		- // i.e. it was renamed upstream
23		- const themeAlias = (
24		- defaultThemes as Record<
25		- string,
26		- { name: string; priority?: boolean; alias?: string }
27		- >
28		- )?.[themeFiltered]?.alias as Theme;
	11	+ if (!ready) throw new Error();
	12	+ const themeFiltered = applyFilters(
	13	+ 'blocks.codeBlockPro.theme',
	14	+ theme,
	15	+ ) as Theme;
	16	+ // If the theme has an alias, use that instead
	17	+ // i.e. it was renamed upstream
	18	+ const themeAlias = (
	19	+ defaultThemes as Record<
	20	+ string,
	21	+ { name: string; priority?: boolean; alias?: string }
	22	+ >
	23	+ )?.[themeFiltered]?.['alias'] as Theme;
29	24
30		- return getHighlighter({
31		- langs: lang === 'plaintext' ? [] : [getEditorLanguage(lang)],
32		- theme: themeAlias ?? themeFiltered,
33		- });
	25	+ return getHighlighter({
	26	+ langs: [getEditorLanguage(lang)],
	27	+ theme: themeAlias ?? themeFiltered,
	28	+ });
34	29	};
35	30	let once = false;
36	31
37	32	export const useTheme = ({ theme, lang, ready = true }: Params) => {
38		- const [wasmLoaded, setWasmFileLoaded] = useState(false);
39		- const themes = applyFilters(
40		- 'blocks.codeBlockPro.themes',
41		- defaultThemes,
42		- ) as ThemeOption;
43		- if (!once) {
44		- once = true;
45		- const assetDir = `${window.codeBlockPro?.pluginUrl}build/shiki/`;
46		- setCDN(applyFilters('blocks.codeBlockPro.assetDir', assetDir) as string);
47		- }
48		- if (themes[theme]?.custom) theme = 'css-variables';
49		- const { data: highlighter, error } = useSWRImmutable(
50		- { theme, lang, ready: ready && wasmLoaded },
51		- fetcher,
52		- );
53		- useEffect(() => {
54		- const assetDir = `${window.codeBlockPro?.pluginUrl}build/shiki/`;
55		- fetch(`${assetDir}dist/onig.wasm`)
56		- .then((res) => res.arrayBuffer())
57		- .then((wasmBuffer) => {
58		- setWasm(wasmBuffer);
59		- setWasmFileLoaded(true);
60		- });
61		- }, []);
	33	+ const [wasmLoaded, setWasmFileLoaded] = useState(false);
	34	+ if (!once) {
	35	+ once = true;
	36	+ const assetDir = window.codeBlockPro?.pluginUrl + 'build/shiki/';
	37	+ setCDN(
	38	+ applyFilters('blocks.codeBlockPro.assetDir', assetDir) as string,
	39	+ );
	40	+ }
	41	+ const { data: highlighter, error } = useSWRImmutable(
	42	+ { theme, lang, ready: ready && wasmLoaded },
	43	+ fetcher,
	44	+ );
	45	+ useEffect(() => {
	46	+ const assetDir = window.codeBlockPro?.pluginUrl + 'build/shiki/';
	47	+ fetch(assetDir + 'dist/onig.wasm')
	48	+ .then((res) => res.arrayBuffer())
	49	+ .then((wasmBuffer) => {
	50	+ setWasm(wasmBuffer);
	51	+ setWasmFileLoaded(true);
	52	+ });
	53	+ }, []);
62	54
63		- return {
64		- highlighter,
65		- error,
66		- loading: (!highlighter && !error) || !wasmLoaded,
67		- };
	55	+ return {
	56	+ highlighter,
	57	+ error,
	58	+ loading: (!highlighter && !error) || !wasmLoaded,
	59	+ };
68	60	};