test/test-sandpack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: test:a0a9f91501077f8dcae255f4e6b6f96f2ab5c384
Branches Tags
test:main
...
compare: test:main
Branches Tags
test:main

4 Commits
a0a9f91501 ... main

Author SHA1 Message Date
熊潇
9b8c4c7f57 更新 readme.md 2025-10-17 18:02:55 +08:00
abearxiong
5920d93b6b test 2025-10-17 17:57:50 +08:00
abearxiong
c9e5c233a4 update 2025-06-04 09:53:29 +08:00
abearxiong
b6e67b790f test LiveCodes 2025-06-04 09:52:32 +08:00
6 changed files with 593 additions and 418 deletions
Expand all files Collapse all files

25
package.json
View File

@@ -10,25 +10,26 @@
"keywords": [],
"author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
"license": "MIT",
"packageManager": "pnpm@10.6.2",
"packageManager": "pnpm@10.18.3",
"type": "module",
"devDependencies": {
"@kevisual/types": "^0.0.10",
"@tailwindcss/vite": "^4.1.8",
"@types/node": "^22.15.29",
"@types/react": "^19.1.6",
"@types/react-dom": "^19.1.5",
"@vitejs/plugin-basic-ssl": "^2.0.0",
"@vitejs/plugin-react": "^4.5.1",
"dotenv": "^16.5.0",
"tailwindcss": "^4.1.8",
"vite": "^6.3.5"
"@tailwindcss/vite": "^4.1.14",
"@types/node": "^24.8.1",
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2",
"@vitejs/plugin-basic-ssl": "^2.1.0",
"@vitejs/plugin-react": "^5.0.4",
"dotenv": "^17.2.3",
"tailwindcss": "^4.1.14",
"vite": "^7.1.10"
},
"dependencies": {
"@codesandbox/sandpack-react": "^2.20.0",
"clsx": "^2.1.1",
"react": "^19.1.0",
"react-dom": "^19.1.0"
"livecodes": "^0.12.0",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"pnpm": {
"onlyBuiltDependencies": [

778
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

8
readme.md Normal file
View File

@@ -0,0 +1,8 @@
LiveCodes
@codesandbox/sandpack-react
代码编辑
https://webcontainers.io/

100
src/App.tsx
View File

@@ -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 = () => {
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>`,
useEffect(() => {
init();
}, []);
const init = async () => {
const playground = await createPlayground('#container', {
// template: 'react',
// other embed options
config: {
markup: {
language: 'markdown',
content: '# Hello World!',
},
}}
/>
</div>
},
});
const config = await playground.getConfig();
// @ts-ignore
window.playground = playground;
console.log(config, playground);
};
return (
<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} />;
};

4
src/main.tsx
View File

@@ -1,4 +1,4 @@
import { createRoot } from 'react-dom/client';
import { App } from './App.tsx';
// import { App } from './App.tsx';
import {AppNode as App} from './sanpack/App.tsx';
createRoot(document.getElementById('root')!).render(<App />);

96
src/sanpack/App.tsx Normal file
View File

@@ -0,0 +1,96 @@
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>
);
};
export const AppNode = () => {
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='node'
// options={{
// layout: 'console', // preview | tests | console
// }}
options={{
showNavigator: true,
layout: 'console',
// bundlerURL: 'https://sandpack-bundler.vercel.app',
// bundlerURL: 'http://localhost:3000',
// bundlerURL: 'https://2-19-8-sandpack.codesandbox.io',
}}
files={{
'/index.js': `console.log("Hello from Node.js Sandpack!");`,
}}
/>
</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} />;
};