Optimizing the load of shiki

Author: estruyf

components/Docs/CodeHighlighting.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as shiki from 'shiki';
 import { Children, useMemo } from 'react';
 import { CopyButton } from './CopyButton';
+import { ShikiService } from '../../services/ShikiService';
 
 export interface ICodeHighlightingProps {
   className?: string;
@@ -77,32 +77,33 @@ const CodePanel = ({ annotation, children, ...props }: React.PropsWithChildren<I
 export const CodeHighlighting: React.FunctionComponent<ICodeHighlightingProps> = ({ className, children, ...props }: React.PropsWithChildren<ICodeHighlightingProps>) => {
   const [code, setCode] = React.useState('');
 
-  React.useEffect(() => {
-    if (className && children) {
-      const language = className.split('-')[1];
+  const fetchHighlighter = async (className: string, children: React.ReactNode) => {
+    const language = className.split('-')[1];
+    const highlighter = await ShikiService.getHighlighter();
 
-      shiki.setCDN(`../../`);
+    if (highlighter && children) {
+      let code = children.toString();
+      if (code.endsWith(`\n`)) {
+        code = code.slice(0, -1);
+      }
 
-      shiki.getHighlighter({
-        langs: [language as any],
-        theme: `the-unnamed`
-      }).then((highlighter: shiki.Highlighter) => {
-        let code = children.toString();
-        if (code.endsWith(`\n`)) {
-          code = code.slice(0, -1);
-        }
+      setCode(
+        highlighter.codeToHtml(code, {
+          lang: getLanguage(className)
+        })
+      );
 
-        setCode(
-          highlighter.codeToHtml(code, {
-            lang: getLanguage(className)
-          })
-        );
-      })
-        .then(() => {
-          if (location.hash) {
-            location.href = location.href;
-          }
-        });
+      if (location.hash) {
+        location.href = location.href;
+      }
+
+      return;
+    }
+  };
+
+  React.useEffect(() => {
+    if (className && children) {
+      fetchHighlighter(className, children);
     }
   }, [className, children]);
 

components/Docs/Markdown.tsx

@@ -7,13 +7,15 @@ import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import { CodeBlock, CodeHighlighting } from './CodeHighlighting';
 import { mdxAnnotations } from 'mdx-annotations';
+import { ShikiService } from '../../services/ShikiService';
 
 export interface IMarkdownProps {
   content: string | undefined;
   slug: string | undefined;
 }
 
 export const Markdown: React.FunctionComponent<IMarkdownProps> = ({ content, slug }: React.PropsWithChildren<IMarkdownProps>) => {
+  const [isReady, setIsReady] = React.useState<boolean>(false);
 
   const getTitle = (props: any) => {
     const title = props?.children.length > 0 ? `${props?.children[0] as string}` : "";
@@ -33,6 +35,14 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({ content, slu
     );
   };
 
+  useEffect(() => {
+    if (content) {
+      ShikiService.getHighlighter().then((highlighter) => {
+        setIsReady(true);
+      });
+    }
+  }, [content])
+
   useEffect(() => {
     const elms = document.querySelectorAll('blockquote > p > strong');
     for (let i = 0; i < elms.length; i++) {
@@ -43,7 +53,8 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({ content, slu
     }
   }, []);
 
-  if (!content) {
+
+  if (!content || !isReady) {
     return null;
   }
 

content/changelog/CHANGELOG.md

@@ -4,19 +4,37 @@
 
 ### ✨ New features
 
+- Localization implemented for the whole extension
+
 ### 🎨 Enhancements
 
+- [#273](https://github.com/estruyf/vscode-front-matter/issues/273): Allow single value arrays to be set as a string with the `singleValueAsString` field property
 - [#686](https://github.com/estruyf/vscode-front-matter/issues/686): Allow script authors to ask questions during script execution
 - [#688](https://github.com/estruyf/vscode-front-matter/issues/688): Allow to show the scheduled articles in the content dashboard (filter and group)
+- [#690](https://github.com/estruyf/vscode-front-matter/issues/690): Added the ability to filter values in the `contentRelationship` field
+- [#700](https://github.com/estruyf/vscode-front-matter/issues/700): Added the `{{pathToken.relPath}}` placeholder for the `previewPath` property
 
 ### ⚡️ Optimizations
 
 - Dashboard layout grid optimizations
+- Added the content-type name to the metadata section in the panel
+- New implementation of the combobox for the `contentRelationship` field
 
 ### 🐞 Fixes
 
 - [#685](https://github.com/estruyf/vscode-front-matter/issues/685): Fix when using non-string values in the tag picker
 - [#691](https://github.com/estruyf/vscode-front-matter/issues/691): Silent authentication retrieval for GitHub sponsors
+- [#694](https://github.com/estruyf/vscode-front-matter/issues/694): Start terminal session from the folder where the `frontmatter.json` file is located
+- [#696](https://github.com/estruyf/vscode-front-matter/issues/696): Close the local server terminal on restart
+- [#699](https://github.com/estruyf/vscode-front-matter/issues/699): Changing border theme variable for the dashboard header
+- [#703](https://github.com/estruyf/vscode-front-matter/issues/703): Fix retrieval of Astro Collections for `pnpm` projects
+- [#704](https://github.com/estruyf/vscode-front-matter/issues/704): Fix `zod` schema script for optional fields
+
+## [9.3.1] - 2023-10-27
+
+### 🐞 Fixes
+
+- [#697](https://github.com/estruyf/vscode-front-matter/issues/697): Fix missing localization key
 
 ## [9.3.0] - 2023-10-06 - [Release notes](https://beta.frontmatter.codes/updates/v9.3.0)
 

package-lock.json

@@ -39,7 +39,7 @@
     "remark-gfm": "^3.0.1",
     "remark-heading-id": "1.0.0",
     "scroll-out": "^2.2.12",
-    "shiki": "^0.14.1",
+    "shiki": "^0.14.5",
     "zustand": "^4.1.5"
   },
   "devDependencies": {

package.json

@@ -2,7 +2,7 @@
   "$schema": "http://json-schema.org/draft-07/schema",
   "$id": "https://beta.frontmatter.codes/config/content.pagefolders.schema.json",
   "description": "Defines the settings for Front Matter page folder",
-  "lastModified": "2023-10-24T09:28:57.205Z",
+  "lastModified": "2023-11-12T01:41:30.154Z",
   "type": "object",
   "title": "Front Matter - page folder",
   "properties": {

public/config/content.pagefolders.schema.json

@@ -2,7 +2,7 @@
   "$schema": "http://json-schema.org/draft-07/schema",
   "$id": "https://beta.frontmatter.codes/config/content.placeholders.schema.json",
   "description": "Defines the settings for Front Matter placeholder",
-  "lastModified": "2023-10-24T09:28:57.206Z",
+  "lastModified": "2023-11-12T01:41:30.154Z",
   "type": "object",
   "title": "Front Matter - placeholder",
   "properties": {

public/config/content.placeholders.schema.json

@@ -2,7 +2,7 @@
   "$schema": "http://json-schema.org/draft-07/schema",
   "$id": "https://beta.frontmatter.codes/config/content.snippets.schema.json",
   "description": "Defines the settings for Front Matter snippet",
-  "lastModified": "2023-10-24T09:28:57.206Z",
+  "lastModified": "2023-11-12T01:41:30.154Z",
   "type": "object",
   "title": "Front Matter - snippet",
   "required": [

public/config/content.snippets.schema.json

@@ -2,7 +2,7 @@
   "$schema": "http://json-schema.org/draft-07/schema",
   "$id": "https://beta.frontmatter.codes/config/custom.scripts.schema.json",
   "description": "Defines the settings for Front Matter custom script",
-  "lastModified": "2023-10-24T09:28:57.205Z",
+  "lastModified": "2023-11-12T01:41:30.154Z",
   "type": "object",
   "title": "Front Matter - custom script",
   "properties": {

public/config/custom.scripts.schema.json

@@ -2,7 +2,7 @@
   "$schema": "http://json-schema.org/draft-07/schema",
   "$id": "https://beta.frontmatter.codes/config/data.files.schema.json",
   "description": "Defines the settings for Front Matter data file",
-  "lastModified": "2023-10-24T09:28:57.206Z",
+  "lastModified": "2023-11-12T01:41:30.154Z",
   "type": "object",
   "title": "Front Matter - data file",
   "properties": {