feat(repl): formatting codeblocks

Author: wmertens

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

@@ -278,3 +278,33 @@ pre[class*='language-'] > code[class*='language-'] {
   box-shadow: inset 5px 0 0 #f7d87c;
   z-index: 0;
 }
+
+/* Prettier Toggle Styles */
+.prettier-toggle {
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  top: 30px;
+  right: 9px;
+  z-index: 10;
+}
+
+.prettier-toggle span {
+  display: inline-block;
+  padding: 0px 4px;
+  background: #1e1e1e;
+  border: 1px solid #d4d4d4;
+  color: #d4d4d4;
+  font-weight: normal;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+.prettier-toggle span.checked {
+  background: #264f78;
+  color: #ffffff;
+  font-weight: bold;
+}
+.prettier-toggle span.checked.error {
+  background: #db4c69;
+}

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

@@ -1,20 +1,76 @@
-import { component$, useSignal, useStyles$, useVisibleTask$, type QRL } from '@builder.io/qwik';
+import {
+  component$,
+  useSignal,
+  useStyles$,
+  useTask$,
+  useVisibleTask$,
+  type QRL,
+  type Signal,
+} from '@builder.io/qwik';
 import { CopyCode } from '../copy-code/copy-code-block';
 import styles from './code-block.css?inline';
 import { shikiInstance, SHIKI_THEME, type ShikiLangs } from './shiki-config';
+import { format } from 'prettier/standalone';
+import parserHtml from 'prettier/plugins/html';
+import parserTs from 'prettier/plugins/typescript';
+import parserEstree from 'prettier/plugins/estree';
 
 interface CodeBlockProps {
   path?: string;
   language?: ShikiLangs;
   code: string;
+  format?: boolean;
   pathInView$?: QRL<(name: string) => void>;
   observerRootId?: string;
 }
 
 export const CodeBlock = component$((props: CodeBlockProps) => {
   const listSig = useSignal<Element>();
+  const codeSig = useSignal<string | null>(props.format ? null : props.code);
+  const formatSig = useSignal(!!props.format);
+  const formatError = useSignal<string>();
+
+  const language =
+    props.language ||
+    (props.path
+      ? /\.([cm]?[jt]sx?|json)$/.test(props.path)
+        ? 'javascript'
+        : props.path.endsWith('.html')
+          ? 'html'
+          : null
+      : null);
+
   useStyles$(styles);
 
+  useTask$(async ({ track }) => {
+    track(() => props.code);
+    track(formatSig);
+
+    if (formatSig.value) {
+      try {
+        // simple formatting for html and js
+        if (language === 'html') {
+          codeSig.value = await format(props.code, {
+            parser: 'html',
+            plugins: [parserHtml],
+            htmlWhitespaceSensitivity: 'ignore',
+          });
+        } else if (language === 'javascript') {
+          codeSig.value = await format(props.code, {
+            parser: 'typescript',
+            plugins: [parserTs, parserEstree],
+          });
+        }
+        formatError.value = undefined;
+      } catch (e: any) {
+        formatError.value = e.message;
+        codeSig.value = props.code;
+      }
+    } else {
+      codeSig.value = props.code;
+    }
+  });
+
   useVisibleTask$(async () => {
     const { pathInView$, path, observerRootId } = props;
     if (pathInView$ && path && listSig.value !== undefined) {
@@ -33,23 +89,37 @@ export const CodeBlock = component$((props: CodeBlockProps) => {
     }
   });
 
-  let language = props.language;
-  if (!language && props.path && props.code) {
-    const ext = props.path.split('.').pop();
-    language = ext === 'js' || ext === 'json' ? 'javascript' : ext === 'css' ? 'css' : 'html';
-  }
-
-  const highlighted = shikiInstance.codeToHtml(props.code, {
-    lang: language!,
-    theme: SHIKI_THEME,
-  });
+  const highlighted =
+    codeSig.value != null &&
+    shikiInstance.codeToHtml(codeSig.value, {
+      lang: language!,
+      theme: SHIKI_THEME,
+    });
   const className = `language-${language}`;
   return (
     <div class="relative">
       <pre class={className} ref={listSig}>
-        <code class={className} dangerouslySetInnerHTML={highlighted} />
+        {highlighted && <code class={className} dangerouslySetInnerHTML={highlighted} />}
       </pre>
+      {(language === 'html' || language === 'javascript') && (
+        <PrettierToggle bind:value={formatSig} />
+      )}
       <CopyCode code={props.code} />
     </div>
   );
 });
+
+const PrettierToggle = component$((props: { 'bind:value': Signal<boolean>; error?: string }) => {
+  return (
+    <label
+      class="prettier-toggle"
+      title={`Toggle Prettier ${props.error ? `\n${props.error}` : ''}`}
+      aria-label="Toggle Prettier"
+    >
+      <input type="checkbox" bind:checked={props['bind:value']} style="display: none;" />
+      <span class={[props['bind:value'].value ? 'checked' : '', props.error ? 'error' : '']}>
+        P
+      </span>
+    </label>
+  );
+});

packages/docs/src/repl/ui/repl-output-panel.tsx

@@ -111,7 +111,7 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
 
         {store.selectedOutputPanel === 'html' ? (
           <div class="output-result output-html">
-            <CodeBlock language="html" code={store.html} />
+            <CodeBlock language="html" format code={store.html} />
           </div>
         ) : null}