temp

2025-06-04 00:45:13 +08:00
commit 8aca49df69
12 changed files with 2204 additions and 0 deletions
--- a/src/App.tsx
+++ b/src/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} />;
+};
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1 @@
+@import "tailwindcss";
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(<App />);