transformer

JSerZANP · Jul 4, 2024 · 263bd8f · 263bd8f
1 parent b7d13a2
commit 263bd8f
Show file tree

Hide file tree

Showing 174 changed files with 15,276 additions and 7,955 deletions.
diff --git a/.changeset/purple-walls-buy.md b/.changeset/purple-walls-buy.md
@@ -0,0 +1,6 @@
+---
+"shaku-code-annotate-shiki": minor
+"shaku-code-annotate-core": minor
+---
+
+transformer
diff --git a/examples/web/app/snippet-transformer/page.tsx b/examples/web/app/snippet-transformer/page.tsx
@@ -0,0 +1,22 @@
+import Head from "next/head";
+import { CodeSnippet } from "../../components/CodeSnippet";
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const codeFromParams = searchParams?.code;
+  const langFromParams = searchParams?.lang;
+  const code = typeof codeFromParams === "string" ? codeFromParams : null;
+  const lang = typeof langFromParams === "string" ? langFromParams : null;
+
+  return (
+    <>
+      <Head>
+        <title>Shaku Code Snippet</title>
+      </Head>
+      <CodeSnippet code={code} lang={lang} useTransformer />
+    </>
+  );
+}
diff --git a/examples/web/components/CodeSnippet.tsx b/examples/web/components/CodeSnippet.tsx
@@ -15,12 +15,21 @@ const CodeSnippetPreview = dynamic(() => import("./CodeSnippetPreview"), {
   ssr: false,
 });
 
+const CodeSnippetPreviewTransformer = dynamic(
+  () => import("./CodeSnippetPreviewTransformer"),
+  {
+    ssr: false,
+  }
+);
+
 export function CodeSnippet({
   code: _code,
   lang: _lang,
+  useTransformer,
 }: {
   code?: string;
   lang?: string;
+  useTransformer?: boolean;
 }) {
   const [lang, setLang] = useState<string>(_lang ?? "javascript");
   const [code, setCode] = useState(_code ?? defaultCode[lang] ?? "");
@@ -104,7 +113,11 @@ export function CodeSnippet({
             }}
           />
         </Column>
-        <CodeSnippetPreview code={code} lang={lang} />
+        {useTransformer ? (
+          <CodeSnippetPreviewTransformer code={code} lang={lang} />
+        ) : (
+          <CodeSnippetPreview code={code} lang={lang} />
+        )}
       </Row>
     </Column>
   );