From b6e67b790f0daf8d3a4088f9a734b081f6c7156e Mon Sep 17 00:00:00 2001
From: abearxiong <xiongxiao1012@outlook.com>
Date: Wed, 4 Jun 2025 09:52:32 +0800
Subject: [PATCH] test LiveCodes

---
 package.json        |   1 +
 pnpm-lock.yaml      |   8 ++++
 src/App.tsx         | 100 +++++++++++++++++++-------------------------
 src/sanpack/App.tsx |  62 +++++++++++++++++++++++++++
 4 files changed, 115 insertions(+), 56 deletions(-)
 create mode 100644 src/sanpack/App.tsx

diff --git a/package.json b/package.json
index 05208a9..33bda40 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.20.0",
     "clsx": "^2.1.1",
+    "livecodes": "^0.11.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 10381f1..8521d10 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      livecodes:
+        specifier: ^0.11.1
+        version: 0.11.1
       react:
         specifier: ^19.1.0
         version: 19.1.0
@@ -832,6 +835,9 @@ packages:
     resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
     engines: {node: '>= 12.0.0'}
 
+  livecodes@0.11.1:
+    resolution: {integrity: sha512-v+TF4pD4wVk+7jYV7WD+PGMxU/zWlATZ80Y7ze6gAgPCJMdWNwbz5Y16+BSbwmfPjFeyMTSGWSYuiCEwEBkSzw==}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -1747,6 +1753,8 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.30.1
       lightningcss-win32-x64-msvc: 1.30.1
 
+  livecodes@0.11.1: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
diff --git a/src/App.tsx b/src/App.tsx
index 1506867..d2cec15 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,62 +1,50 @@
-import { SandpackPreviewRef, useSandpack, SandpackPreview, SandpackFileExplorer, Sandpack } from '@codesandbox/sandpack-react';
-import { useEffect, useRef } from 'react';
-import { SandpackProvider, SandpackLayout, SandpackCodeEditor } from '@codesandbox/sandpack-react';
+// import LiveCodes from 'livecodes/react';
+import { createPlayground } from 'livecodes';
+import { useEffect } from 'react';
+
+const config = {
+  markup: {
+    language: 'markdown',
+    content: '# Hello World!',
+  },
+};
+// const Playground = () => (
+//   <LiveCodes
+//     config={{
+//       markup: {
+//         language: 'markdown',
+//         content: '# Hello World!',
+//       },
+//     }}
+//     view='result'
+//   />
+// );
 
 export const App = () => {
+  useEffect(() => {
+    init();
+  }, []);
+  const init = async () => {
+    const playground = await createPlayground('#container', {
+      // template: 'react',
+      // other embed options
+      config: {
+        markup: {
+          language: 'markdown',
+          content: '# Hello World!',
+        },
+      },
+    });
+    const config = await playground.getConfig();
+    // @ts-ignore
+    window.playground = playground;
+    console.log(config, playground);
+  };
   return (
-    <div>
-      <h1>Welcome to the App</h1>
-      <p>This is a simple React application.</p>
-      <div>
-        {/* <SandpackProvider template='react'>
-          <SandpackLayout>
-             <SandpackFileExplorer />
-            <SandpackCodeEditor />
-          </SandpackLayout>
-        </SandpackProvider> */}
-        {/* <SandpackPreviewClient /> */}
-
-        <Sandpack
-          template='react'
-          // template='node'
-          // options={{
-          //   layout: 'console', // preview | tests | console
-          // }}
-          options={{
-            showNavigator: true,
-            // bundlerURL: 'https://sandpack-bundler.vercel.app',
-            bundlerURL: 'http://localhost:3000',
-            // bundlerURL: 'https://2-19-8-sandpack.codesandbox.io',
-          }}
-          files={{
-            '/App.js': `export default function App() { return <h1>Hello Sandpack!</h1>; }`,
-            './index.html': {
-              code: `<html>12345</html>`,
-            },
-          }}
-        />
-      </div>
+    <div className='App'>
+      <h1>LiveCodes Playground</h1>
+      {/* <Playground /> */}
+      <div id='container'></div>
     </div>
   );
 };
-
-const SandpackPreviewClient: React.FC = () => {
-  const { sandpack } = useSandpack();
-  const previewRef = useRef<SandpackPreviewRef>(null);
-
-  useEffect(() => {
-    const client = previewRef.current?.getClient();
-    const clientId = previewRef.current?.clientId;
-
-    if (client && clientId) {
-      console.log(client);
-      console.log(sandpack.clients[clientId]);
-    }
-    /**
-     * NOTE: In order to make sure that the client will be available
-     * use the whole `sandpack` object as a dependency.
-     */
-  }, [sandpack]);
-
-  return <SandpackPreview ref={previewRef} />;
-};
diff --git a/src/sanpack/App.tsx b/src/sanpack/App.tsx
new file mode 100644
index 0000000..1506867
--- /dev/null
+++ b/src/sanpack/App.tsx
@@ -0,0 +1,62 @@
+import { SandpackPreviewRef, useSandpack, SandpackPreview, SandpackFileExplorer, Sandpack } from '@codesandbox/sandpack-react';
+import { useEffect, useRef } from 'react';
+import { SandpackProvider, SandpackLayout, SandpackCodeEditor } from '@codesandbox/sandpack-react';
+
+export const App = () => {
+  return (
+    <div>
+      <h1>Welcome to the App</h1>
+      <p>This is a simple React application.</p>
+      <div>
+        {/* <SandpackProvider template='react'>
+          <SandpackLayout>
+             <SandpackFileExplorer />
+            <SandpackCodeEditor />
+          </SandpackLayout>
+        </SandpackProvider> */}
+        {/* <SandpackPreviewClient /> */}
+
+        <Sandpack
+          template='react'
+          // template='node'
+          // options={{
+          //   layout: 'console', // preview | tests | console
+          // }}
+          options={{
+            showNavigator: true,
+            // bundlerURL: 'https://sandpack-bundler.vercel.app',
+            bundlerURL: 'http://localhost:3000',
+            // bundlerURL: 'https://2-19-8-sandpack.codesandbox.io',
+          }}
+          files={{
+            '/App.js': `export default function App() { return <h1>Hello Sandpack!</h1>; }`,
+            './index.html': {
+              code: `<html>12345</html>`,
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const SandpackPreviewClient: React.FC = () => {
+  const { sandpack } = useSandpack();
+  const previewRef = useRef<SandpackPreviewRef>(null);
+
+  useEffect(() => {
+    const client = previewRef.current?.getClient();
+    const clientId = previewRef.current?.clientId;
+
+    if (client && clientId) {
+      console.log(client);
+      console.log(sandpack.clients[clientId]);
+    }
+    /**
+     * NOTE: In order to make sure that the client will be available
+     * use the whole `sandpack` object as a dependency.
+     */
+  }, [sandpack]);
+
+  return <SandpackPreview ref={previewRef} />;
+};