Merge pull request #668 from maiieul/fix-shiki-memory

fix random "memory access out of bounds" shiki bug

Author: maiieul

apps/component-tests/tsconfig.json

@@ -3,8 +3,8 @@
   "compilerOptions": {
     "allowJs": true,
     "target": "ES2017",
-    "module": "ES2020",
-    "lib": ["es2020", "DOM", "WebWorker", "DOM.Iterable"],
+    "module": "ES2022",
+    "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
     "jsx": "react-jsx",
     "jsxImportSource": "@builder.io/qwik",
     "strict": true,

apps/website/src/components/highlight/highlight.tsx

@@ -1,8 +1,7 @@
 import { ClassList, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
 import { CodeCopy } from '../code-copy/code-copy';
-import { getHighlighterCore } from 'shiki';
 import { cn } from '@qwik-ui/utils';
-import getWasm from 'shiki/wasm';
+import { highlighter } from './highlighter';
 
 export type HighlightProps = PropsOf<'div'> & {
   code: string;
@@ -23,7 +22,6 @@ export const Highlight = component$(
   }: HighlightProps) => {
     const codeSig = useSignal('');
 
-    // eslint-disable-next-line qwik/no-use-visible-task
     useTask$(async function createHighlightedCode() {
       let modifiedCode: string = code;
 
@@ -37,19 +35,6 @@ export const Highlight = component$(
         modifiedCode = partsOfCode[0];
       }
 
-      const highlighter = await getHighlighterCore({
-        themes: [
-          // or a dynamic import if you want to do chunk splitting
-          import('shiki/themes/poimandres.mjs'),
-        ],
-        langs: [
-          import('shiki/langs/html.mjs'),
-          import('shiki/langs/tsx.mjs'),
-          import('shiki/langs/css.mjs'),
-        ],
-        loadWasm: getWasm,
-      });
-
       const str = highlighter.codeToHtml(modifiedCode, {
         lang: language,
         themes: {

apps/website/src/components/highlight/highlighter.tsx

@@ -0,0 +1,17 @@
+import { getHighlighterCore } from 'shiki/index.mjs';
+import getWasm from 'shiki/wasm';
+import poimandres from 'shiki/themes/poimandres.mjs';
+import html from 'shiki/langs/html.mjs';
+import css from 'shiki/langs/css.mjs';
+import ts from 'shiki/langs/typescript.mjs';
+import tsx from 'shiki/langs/tsx.mjs';
+import js from 'shiki/langs/javascript.mjs';
+
+export const highlighter = await getHighlighterCore({
+  themes: [
+    // or a dynamic import if you want to do chunk splitting
+    poimandres,
+  ],
+  langs: [html, css, js, ts, tsx],
+  loadWasm: getWasm,
+});

apps/website/tsconfig.app.json

@@ -5,13 +5,6 @@
     "outDir": "../../dist/out-tsc"
   },
   "files": [],
-  "exclude": [],
-  "include": [
-    "**/*.js",
-    "**/*.jsx",
-    "**/*.ts",
-    "**/*.tsx",
-    "src/routes/docs/headless/introduction/index.mdx",
-    "tailwind.config.cjs"
-  ]
+  "exclude": ["tailwind.config.cjs"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }

apps/website/tsconfig.json

@@ -3,8 +3,8 @@
   "compilerOptions": {
     "allowJs": true,
     "target": "ES2017",
-    "module": "ES2020",
-    "lib": ["es2020", "DOM", "WebWorker", "DOM.Iterable"],
+    "module": "ES2022",
+    "lib": ["ES2022", "DOM", "WebWorker", "DOM.Iterable"],
     "jsx": "react-jsx",
     "jsxImportSource": "@builder.io/qwik",
     "strict": true,

apps/website/vite.config.ts

@@ -99,6 +99,9 @@ export default defineConfig(async () => {
         allow: ['../../'],
       },
     },
+    build: {
+      target: 'es2022',
+    },
     preview: {
       headers: {
         'Cache-Control': 'public, max-age=600',

packages/kit-headless/tsconfig.json

@@ -3,8 +3,8 @@
   "compilerOptions": {
     "allowJs": true,
     "target": "ES2017",
-    "module": "ES2020",
-    "lib": ["es2020", "DOM", "WebWorker", "DOM.Iterable"],
+    "module": "ES2022",
+    "lib": ["ES2022", "DOM", "WebWorker", "DOM.Iterable"],
     "jsx": "react-jsx",
     "jsxImportSource": "@builder.io/qwik",
     "forceConsistentCasingInFileNames": true,

packages/kit-headless/vite.config.ts

@@ -48,7 +48,7 @@ export default defineConfig({
   // Configuration for building your library.
   // See: https://vitejs.dev/guide/build.html#library-mode
   build: {
-    target: 'es2020',
+    target: 'es2022',
     lib: {
       entry: './src/index.ts',
       // Could also be a dictionary or array of multiple entry points.

packages/kit-styled/tsconfig.generators.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "declaration": true,
-    "module": "commonjs",
+    "module": "ES2022",
     "types": ["node"]
   },
   "files": [],

packages/kit-styled/tsconfig.json

@@ -3,8 +3,8 @@
   "compilerOptions": {
     "allowJs": true,
     "target": "ES2017",
-    "module": "ES2020",
-    "lib": ["es2020", "DOM", "WebWorker", "DOM.Iterable"],
+    "module": "ES2022",
+    "lib": ["ES2022", "DOM", "WebWorker", "DOM.Iterable"],
     "jsx": "react-jsx",
     "jsxImportSource": "@builder.io/qwik",
     "forceConsistentCasingInFileNames": true,