Merge pull request #7828 from QwikDev/fix-rolldown-vite-types

fix(repl): prismjs

Author: wmertens

packages/docs/src/components/code-block/code-block.tsx

@@ -1,14 +1,8 @@
-import {
-  component$,
-  useStyles$,
-  type QRL,
-  useVisibleTask$,
-  useSignal,
-  useTask$,
-} from '@builder.io/qwik';
+import { component$, useSignal, useStyles$, useVisibleTask$, type QRL } from '@builder.io/qwik';
 
-import styles from './code-block.css?inline';
 import { CopyCode } from '../copy-code/copy-code-block';
+import styles from './code-block.css?inline';
+import { highlight } from './prismjs';
 interface CodeBlockProps {
   path?: string;
   language?: 'markup' | 'css' | 'javascript' | 'json' | 'jsx' | 'tsx';
@@ -17,27 +11,10 @@ interface CodeBlockProps {
   observerRootId?: string;
 }
 
-const holder: { prismjs?: typeof import('prismjs') } = {};
-
 export const CodeBlock = component$((props: CodeBlockProps) => {
   const listSig = useSignal<Element>();
   useStyles$(styles);
 
-  useTask$(() => {
-    if (!holder.prismjs) {
-      return import('prismjs').then(async (prism) => {
-        holder.prismjs = prism;
-
-        // These need the Prism global that prismjs provides
-        // We lazy import so we're sure about the order of the imports
-        await Promise.all([
-          import('prismjs/components/prism-jsx'),
-          import('prismjs/components/prism-tsx'),
-        ]);
-      });
-    }
-  });
-
   useVisibleTask$(async () => {
     const { pathInView$, path, observerRootId } = props;
     if (pathInView$ && path && listSig.value !== undefined) {
@@ -69,17 +46,14 @@ export const CodeBlock = component$((props: CodeBlockProps) => {
             : undefined;
   }
 
-  if (language && prismjs.languages[language]) {
-    const highlighted = prismjs.highlight(props.code, prismjs.languages[language], language);
-    const className = `language-${language}`;
-    return (
-      <div class="relative">
-        <pre class={className} ref={listSig}>
-          <code class={className} dangerouslySetInnerHTML={highlighted} />
-        </pre>
-        <CopyCode code={props.code} />
-      </div>
-    );
-  }
-  return null;
+  const highlighted = highlight(props.code, language);
+  const className = `language-${language}`;
+  return (
+    <div class="relative">
+      <pre class={className} ref={listSig}>
+        <code class={className} dangerouslySetInnerHTML={highlighted} />
+      </pre>
+      <CopyCode code={props.code} />
+    </div>
+  );
 });

packages/docs/src/components/code-block/prismjs.ts

@@ -0,0 +1,10 @@
+import prismjs from 'prismjs';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-tsx';
+
+export const highlight = (code?: string, language?: string) => {
+  if (!code || !language || !prismjs.languages[language]) {
+    return `<code class="language-${language}"><pre>${code}</pre></code>`;
+  }
+  return prismjs.highlight(code, prismjs.languages[language], language);
+};