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

test LiveCodes

Browse Source
This commit is contained in:
熊潇 2025-06-04 09:52:32 +08:00
parent a0a9f91501
commit b6e67b790f
4 changed files with 115 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"
},

8
pnpm-lock.yaml generated
View File

@ -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

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 = () => {
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} />;
};

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

@ -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} />;
};