test LiveCodes

2025-06-04 09:52:32 +08:00
parent a0a9f91501
commit b6e67b790f
4 changed files with 115 additions and 56 deletions
--- 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} />;
-};
--- a/src/sanpack/App.tsx
+++ 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} />;
+};