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

temp

Browse Source
This commit is contained in:
熊潇 2025-06-04 00:45:13 +08:00
commit 8aca49df69
12 changed files with 2204 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
.gitignore vendored Normal file
View File

@ -0,0 +1,66 @@
node_modules
# mac
.DS_Store
.env*
!.env*example
dist
build
logs
.turbo
pack-dist
# astro
.astro
# next
.next
# nuxt
.nuxt
# vercel
.vercel
# vuepress
.vuepress/dist
# coverage
coverage/
# typescript
*.tsbuildinfo
# debug logs
*.log
*.tmp
# vscode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# idea
.idea
# system
Thumbs.db
ehthumbs.db
Desktop.ini
# temp files
*.tmp
*.temp
# local development
*.local
public/r
.pnpm-store

0
.gitmodules vendored Normal file
View File

1
codesandbox-client Submodule

@ -0,0 +1 @@
Subproject commit f01fba126f9746658065e4b0e18ca65fbd6c7c2e

33
index.html Normal file
View File

@ -0,0 +1,33 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="https://kevisual.xiongxiao.me/root/center/panda.jpg" />
<title>Kevisual Template</title>
<link rel="stylesheet" href="/src/index.css" />
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#root {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

22
kevisual.json Normal file
View File

@ -0,0 +1,22 @@
{
"sync": {
".gitignore": {
"url": "https://kevisual.xiongxiao.me/root/ai/code/config/gitignore/node.txt"
},
"tsconfig.json": {
"url": "https://kevisual.xiongxiao.me/root/ai/code/config/ts/front.json"
},
"vite.config.mjs": {
"url": "https://kevisual.xiongxiao.me/root/ai/code/config/vite/base.mjs"
},
"index.html": {
"url": "https://kevisual.xiongxiao.me/root/ai/code/config/vite/html/index.html"
},
"src/index.css": {
"url": "https://kevisual.xiongxiao.me/root/ai/code/config/vite/css/index.css"
},
"src/main.tsx": {
"url": "https://kevisual.xiongxiao.me/root/ai/code/config/vite/react/main.tsx"
}
}
}

38
package.json Normal file
View File

@ -0,0 +1,38 @@
{
"name": "test-sandpack",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"keywords": [],
"author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
"license": "MIT",
"packageManager": "pnpm@10.6.2",
"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"
},
"dependencies": {
"@codesandbox/sandpack-react": "^2.20.0",
"clsx": "^2.1.1",
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
"pnpm": {
"onlyBuiltDependencies": [
"es5-ext"
]
}
}

1894
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

62
src/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} />;
};

1
src/index.css Normal file
View File

@ -0,0 +1 @@
@import "tailwindcss";

4
src/main.tsx Normal file
View File

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

18
tsconfig.json Normal file
View File

@ -0,0 +1,18 @@
{
"extends": "@kevisual/types/json/frontend.json",
"compilerOptions": {
"baseUrl": ".",
"typeRoots": [
"./node_modules/@types",
"./node_modules/@kevisual"
],
"paths": {
"@/*": [
"src/*"
]
},
},
"include": [
"src/**/*",
],
}

65
vite.config.mjs Normal file
View File

@ -0,0 +1,65 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import pkgs from './package.json';
import tailwindcss from '@tailwindcss/vite';
import basicSsl from '@vitejs/plugin-basic-ssl';
import dotenv from 'dotenv';
dotenv.config({ path: '.env.development' });
const version = pkgs.version || '0.0.1';
const isDev = process.env.NODE_ENV === 'development';
const basename = isDev ? '/' : pkgs?.basename || '/';
const plugins = [react(), tailwindcss()];
const isCNB = process.env.CNB === 'true';
if (isDev && !isCNB) {
// plugins.push(basicSsl());
}
let target = process.env.VITE_API_URL || 'http://localhost:51015';
const apiProxy = { target: target, changeOrigin: true, ws: true, rewriteWsOrigin: true, secure: false, cookieDomainRewrite: 'localhost' };
let proxy = {
'/root/': {
target: `${target}`,
secure: false,
},
'/user/login/': {
target: `${target}`,
secure: false,
},
'/api': apiProxy,
'/client': apiProxy,
};
/**
* @see https://vitejs.dev/config/
*/
export default defineConfig(() => {
return {
plugins,
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
base: basename,
envPrefix: 'KEVISUAL_',
define: {
DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
APP_VERSION: JSON.stringify(version),
BASE_NAME: JSON.stringify(basename),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
},
build: {
target: 'modules',
// lib: {
// entry: './src/libs.ts',
// formats: ['es'],
// fileName: (format) => `render.js`,
// },
},
server: {
port: 7008,
host: '0.0.0.0',
allowedHosts: true,
proxy,
},
};
});