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

test

Browse Source
This commit is contained in:
熊潇
2025-10-17 17:57:50 +08:00
parent c9e5c233a4
commit 5920d93b6b
4 changed files with 477 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
package.json
View File

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

780
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

4
src/main.tsx
View File

@@ -1,4 +1,4 @@
import { createRoot } from 'react-dom/client'; 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 />); createRoot(document.getElementById('root')!).render(<App />);

36
src/sanpack/App.tsx
View File

@@ -25,7 +25,7 @@ export const App = () => {
options={{ options={{
showNavigator: true, showNavigator: true,
// bundlerURL: 'https://sandpack-bundler.vercel.app', // bundlerURL: 'https://sandpack-bundler.vercel.app',
bundlerURL: 'http://localhost:3000', // bundlerURL: 'http://localhost:3000',
// bundlerURL: 'https://2-19-8-sandpack.codesandbox.io', // bundlerURL: 'https://2-19-8-sandpack.codesandbox.io',
}} }}
files={{ files={{
@@ -39,7 +39,41 @@ export const App = () => {
</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 SandpackPreviewClient: React.FC = () => {
const { sandpack } = useSandpack(); const { sandpack } = useSandpack();
const previewRef = useRef<SandpackPreviewRef>(null); const previewRef = useRef<SandpackPreviewRef>(null);