Skip to content

B
bit-pm
提交 a4a763a0 authored 作者: Will Chen's avatar Will Chen
浏览文件
操作

working sandpack

上级 37579d01
隐藏空白字符变更
内嵌 并排
正在显示 包含 452 行增加 和 175 行删除
package-lock.json
浏览文件 @ a4a763a0
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"@ai-sdk/google": "^1.2.10", "@ai-sdk/google": "^1.2.10",
"@ai-sdk/openai": "^1.3.7", "@ai-sdk/openai": "^1.3.7",
"@biomejs/biome": "^1.9.4", "@biomejs/biome": "^1.9.4",
"@codesandbox/sandpack-client": "^2.19.8",
"@monaco-editor/react": "^4.7.0-rc.0", "@monaco-editor/react": "^4.7.0-rc.0",
"@openrouter/ai-sdk-provider": "^0.4.5", "@openrouter/ai-sdk-provider": "^0.4.5",
"@radix-ui/react-accordion": "^1.2.4", "@radix-ui/react-accordion": "^1.2.4",
...@@ -834,6 +835,54 @@ ...@@ -834,6 +835,54 @@
"node": ">=14.21.3" "node": ">=14.21.3"
} }
}, },
"node_modules/@codesandbox/nodebox": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/@codesandbox/nodebox/-/nodebox-0.1.8.tgz",
"integrity": "sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==",
"license": "SEE LICENSE IN ./LICENSE",
"dependencies": {
"outvariant": "^1.4.0",
"strict-event-emitter": "^0.4.3"
}
},
"node_modules/@codesandbox/sandpack-client": {
"version": "2.19.8",
"resolved": "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-2.19.8.tgz",
"integrity": "sha512-CMV4nr1zgKzVpx4I3FYvGRM5YT0VaQhALMW9vy4wZRhEyWAtJITQIqZzrTGWqB1JvV7V72dVEUCUPLfYz5hgJQ==",
"license": "Apache-2.0",
"dependencies": {
"@codesandbox/nodebox": "0.1.8",
"buffer": "^6.0.3",
"dequal": "^2.0.2",
"mime-db": "^1.52.0",
"outvariant": "1.4.0",
"static-browser-server": "1.0.3"
}
},
"node_modules/@codesandbox/sandpack-client/node_modules/buffer": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"license": "MIT",
"dependencies": {
"base64-js": "^1.3.1",
"ieee754": "^1.2.1"
}
},
"node_modules/@drizzle-team/brocli": { "node_modules/@drizzle-team/brocli": {
"version": "0.10.2", "version": "0.10.2",
"resolved": "https://registry.npmjs.org/@drizzle-team/brocli/-/brocli-0.10.2.tgz", "resolved": "https://registry.npmjs.org/@drizzle-team/brocli/-/brocli-0.10.2.tgz",
...@@ -3581,6 +3630,12 @@ ...@@ -3581,6 +3630,12 @@
"@octokit/openapi-types": "^12.11.0" "@octokit/openapi-types": "^12.11.0"
} }
}, },
"node_modules/@open-draft/deferred-promise": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
"integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
"license": "MIT"
},
"node_modules/@openrouter/ai-sdk-provider": { "node_modules/@openrouter/ai-sdk-provider": {
"version": "0.4.5", "version": "0.4.5",
"resolved": "https://registry.npmjs.org/@openrouter/ai-sdk-provider/-/ai-sdk-provider-0.4.5.tgz", "resolved": "https://registry.npmjs.org/@openrouter/ai-sdk-provider/-/ai-sdk-provider-0.4.5.tgz",
...@@ -16186,6 +16241,12 @@ ...@@ -16186,6 +16241,12 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/outvariant": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.0.tgz",
"integrity": "sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==",
"license": "MIT"
},
"node_modules/own-keys": { "node_modules/own-keys": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz", "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
...@@ -18425,6 +18486,18 @@ ...@@ -18425,6 +18486,18 @@
"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==", "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/static-browser-server": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/static-browser-server/-/static-browser-server-1.0.3.tgz",
"integrity": "sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==",
"license": "Apache-2.0",
"dependencies": {
"@open-draft/deferred-promise": "^2.1.0",
"dotenv": "^16.0.3",
"mime-db": "^1.52.0",
"outvariant": "^1.3.0"
}
},
"node_modules/statuses": { "node_modules/statuses": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
...@@ -18451,6 +18524,12 @@ ...@@ -18451,6 +18524,12 @@
"node": ">=10.0.0" "node": ">=10.0.0"
} }
}, },
"node_modules/strict-event-emitter": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz",
"integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==",
"license": "MIT"
},
"node_modules/string_decoder": { "node_modules/string_decoder": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
......
package.json
浏览文件 @ a4a763a0
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
}, },
"scripts": { "scripts": {
"start": "electron-forge start", "start": "electron-forge start",
"package": "electron-forge package", "package": "rm -rf out && rm -rf scaffold/node_modules && electron-forge package",
"make": "electron-forge make", "make": "electron-forge make",
"publish": "electron-forge publish", "publish": "electron-forge publish",
"ts": "yarn tsc -p tsconfig.app.json --noEmit", "ts": "yarn tsc -p tsconfig.app.json --noEmit",
...@@ -62,6 +62,7 @@ ...@@ -62,6 +62,7 @@
"@ai-sdk/google": "^1.2.10", "@ai-sdk/google": "^1.2.10",
"@ai-sdk/openai": "^1.3.7", "@ai-sdk/openai": "^1.3.7",
"@biomejs/biome": "^1.9.4", "@biomejs/biome": "^1.9.4",
"@codesandbox/sandpack-client": "^2.19.8",
"@monaco-editor/react": "^4.7.0-rc.0", "@monaco-editor/react": "^4.7.0-rc.0",
"@openrouter/ai-sdk-provider": "^0.4.5", "@openrouter/ai-sdk-provider": "^0.4.5",
"@radix-ui/react-accordion": "^1.2.4", "@radix-ui/react-accordion": "^1.2.4",
...@@ -111,4 +112,4 @@ ...@@ -111,4 +112,4 @@
"update-electron-app": "^3.1.1", "update-electron-app": "^3.1.1",
"uuid": "^11.1.0" "uuid": "^11.1.0"
} }
} }
\ No newline at end of file
scaffold/src/main.tsx
浏览文件 @ a4a763a0
import { createRoot } from 'react-dom/client' import { createRoot } from "react-dom/client";
import App from './App.tsx' import App from "./App.tsx";
import './index.css' import "./globals.css";
createRoot(document.getElementById("root")!).render(<App />); createRoot(document.getElementById("root")!).render(<App />);
scaffold/tailwind.config.ts
浏览文件 @ a4a763a0
import type { Config } from "tailwindcss"; import type { Config } from "tailwindcss";
export default { export default {
darkMode: ["class"], darkMode: ["class"],
content: [ content: [
"./pages/**/*.{ts,tsx}", "./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}",
], ],
prefix: "", prefix: "",
theme: { theme: {
container: { container: {
center: true, center: true,
padding: '2rem', padding: "2rem",
screens: { screens: {
'2xl': '1400px' "2xl": "1400px",
} },
}, },
extend: { extend: {
colors: { colors: {
border: 'hsl(var(--border))', border: "hsl(var(--border))",
input: 'hsl(var(--input))', input: "hsl(var(--input))",
ring: 'hsl(var(--ring))', ring: "hsl(var(--ring))",
background: 'hsl(var(--background))', background: "hsl(var(--background))",
foreground: 'hsl(var(--foreground))', foreground: "hsl(var(--foreground))",
primary: { primary: {
DEFAULT: 'hsl(var(--primary))', DEFAULT: "hsl(var(--primary))",
foreground: 'hsl(var(--primary-foreground))' foreground: "hsl(var(--primary-foreground))",
}, },
secondary: { secondary: {
DEFAULT: 'hsl(var(--secondary))', DEFAULT: "hsl(var(--secondary))",
foreground: 'hsl(var(--secondary-foreground))' foreground: "hsl(var(--secondary-foreground))",
}, },
destructive: { destructive: {
DEFAULT: 'hsl(var(--destructive))', DEFAULT: "hsl(var(--destructive))",
foreground: 'hsl(var(--destructive-foreground))' foreground: "hsl(var(--destructive-foreground))",
}, },
muted: { muted: {
DEFAULT: 'hsl(var(--muted))', DEFAULT: "hsl(var(--muted))",
foreground: 'hsl(var(--muted-foreground))' foreground: "hsl(var(--muted-foreground))",
}, },
accent: { accent: {
DEFAULT: 'hsl(var(--accent))', DEFAULT: "hsl(var(--accent))",
foreground: 'hsl(var(--accent-foreground))' foreground: "hsl(var(--accent-foreground))",
}, },
popover: { popover: {
DEFAULT: 'hsl(var(--popover))', DEFAULT: "hsl(var(--popover))",
foreground: 'hsl(var(--popover-foreground))' foreground: "hsl(var(--popover-foreground))",
}, },
card: { card: {
DEFAULT: 'hsl(var(--card))', DEFAULT: "hsl(var(--card))",
foreground: 'hsl(var(--card-foreground))' foreground: "hsl(var(--card-foreground))",
}, },
sidebar: { sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))', DEFAULT: "hsl(var(--sidebar-background))",
foreground: 'hsl(var(--sidebar-foreground))', foreground: "hsl(var(--sidebar-foreground))",
primary: 'hsl(var(--sidebar-primary))', primary: "hsl(var(--sidebar-primary))",
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
accent: 'hsl(var(--sidebar-accent))', accent: "hsl(var(--sidebar-accent))",
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
border: 'hsl(var(--sidebar-border))', border: "hsl(var(--sidebar-border))",
ring: 'hsl(var(--sidebar-ring))' ring: "hsl(var(--sidebar-ring))",
} },
}, },
borderRadius: { borderRadius: {
lg: 'var(--radius)', lg: "var(--radius)",
md: 'calc(var(--radius) - 2px)', md: "calc(var(--radius) - 2px)",
sm: 'calc(var(--radius) - 4px)' sm: "calc(var(--radius) - 4px)",
}, },
keyframes: { keyframes: {
'accordion-down': { "accordion-down": {
from: { from: {
height: '0' height: "0",
}, },
to: { to: {
height: 'var(--radix-accordion-content-height)' height: "var(--radix-accordion-content-height)",
} },
}, },
'accordion-up': { "accordion-up": {
from: { from: {
height: 'var(--radix-accordion-content-height)' height: "var(--radix-accordion-content-height)",
}, },
to: { to: {
height: '0' height: "0",
} },
} },
}, },
animation: { animation: {
'accordion-down': 'accordion-down 0.2s ease-out', "accordion-down": "accordion-down 0.2s ease-out",
'accordion-up': 'accordion-up 0.2s ease-out' "accordion-up": "accordion-up 0.2s ease-out",
} },
} },
}, },
plugins: [require("tailwindcss-animate")], plugins: [require("tailwindcss-animate")],
} satisfies Config; } satisfies Config;
src/components/chat/ChatInput.tsx
浏览文件 @ a4a763a0
...@@ -30,7 +30,6 @@ export function ChatInput({ chatId, onSubmit }: ChatInputProps) { ...@@ -30,7 +30,6 @@ export function ChatInput({ chatId, onSubmit }: ChatInputProps) {
if (textarea) { if (textarea) {
textarea.style.height = "0px"; textarea.style.height = "0px";
const scrollHeight = textarea.scrollHeight; const scrollHeight = textarea.scrollHeight;
console.log("scrollHeight", scrollHeight);
textarea.style.height = `${scrollHeight + 4}px`; textarea.style.height = `${scrollHeight + 4}px`;
} }
}; };
......
src/components/chat/ChatMessage.tsx
浏览文件 @ a4a763a0
...@@ -8,73 +8,67 @@ interface ChatMessageProps { ...@@ -8,73 +8,67 @@ interface ChatMessageProps {
message: Message; message: Message;
} }
const ChatMessage = memo( const ChatMessage = ({ message }: ChatMessageProps) => {
({ message }: ChatMessageProps) => { const { isStreaming } = useStreamChat();
return ( return (
<div
className={`flex ${
message.role === "assistant" ? "justify-start" : "justify-end"
}`}
>
<div <div
className={`flex ${ className={`rounded-lg p-2 mt-2 ${
message.role === "assistant" ? "justify-start" : "justify-end" message.role === "assistant"
? "w-full max-w-3xl mx-auto"
: "bg-(--sidebar-accent)"
}`} }`}
> >
<div {message.role === "assistant" && !message.content && isStreaming ? (
className={`rounded-lg p-2 mt-2 ${ <div className="flex h-6 items-center space-x-2 p-2">
message.role === "assistant" <motion.div
? "w-full max-w-3xl mx-auto" className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
: "bg-(--sidebar-accent)" animate={{ y: [0, -12, 0] }}
}`} transition={{
> repeat: Number.POSITIVE_INFINITY,
{message.role === "assistant" && !message.content ? ( duration: 0.4,
<div className="flex h-6 items-center space-x-2 p-2"> ease: "easeOut",
<motion.div repeatDelay: 1.2,
className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500" }}
animate={{ y: [0, -12, 0] }} />
transition={{ <motion.div
repeat: Number.POSITIVE_INFINITY, className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
duration: 0.4, animate={{ y: [0, -12, 0] }}
ease: "easeOut", transition={{
repeatDelay: 1.2, repeat: Number.POSITIVE_INFINITY,
}} duration: 0.4,
/> ease: "easeOut",
<motion.div delay: 0.4,
className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500" repeatDelay: 1.2,
animate={{ y: [0, -12, 0] }} }}
transition={{ />
repeat: Number.POSITIVE_INFINITY, <motion.div
duration: 0.4, className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
ease: "easeOut", animate={{ y: [0, -12, 0] }}
delay: 0.4, transition={{
repeatDelay: 1.2, repeat: Number.POSITIVE_INFINITY,
}} duration: 0.4,
/> ease: "easeOut",
<motion.div delay: 0.8,
className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500" repeatDelay: 1.2,
animate={{ y: [0, -12, 0] }} }}
transition={{ />
repeat: Number.POSITIVE_INFINITY, </div>
duration: 0.4, ) : (
ease: "easeOut", <div
delay: 0.8, className="prose dark:prose-invert prose-headings:mb-2 prose-p:my-1 prose-pre:my-0 max-w-none"
repeatDelay: 1.2, suppressHydrationWarning
}} >
/> <DyadMarkdownParser content={message.content} />
</div> </div>
) : ( )}
<div
className="prose dark:prose-invert prose-headings:mb-2 prose-p:my-1 prose-pre:my-0 max-w-none"
suppressHydrationWarning
>
<DyadMarkdownParser content={message.content} />
</div>
)}
</div>
</div> </div>
); </div>
}, );
(prevProps, nextProps) => { };
return prevProps.message.content === nextProps.message.content;
}
);
ChatMessage.displayName = "ChatMessage";
export default ChatMessage; export default ChatMessage;
src/components/chat/DyadAddDependency.tsx
浏览文件 @ a4a763a0
...@@ -28,7 +28,6 @@ export const DyadAddDependency: React.FC<DyadAddDependencyProps> = ({ ...@@ -28,7 +28,6 @@ export const DyadAddDependency: React.FC<DyadAddDependencyProps> = ({
}) => { }) => {
// Extract package attribute from the node if available // Extract package attribute from the node if available
const packages = node?.properties?.packages?.split(" ") || ""; const packages = node?.properties?.packages?.split(" ") || "";
console.log("packages", packages);
const [isInstalling, setIsInstalling] = useState(false); const [isInstalling, setIsInstalling] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const selectedChatId = useAtomValue(selectedChatIdAtom); const selectedChatId = useAtomValue(selectedChatIdAtom);
......
src/components/preview_panel/PreviewIframe.tsx
浏览文件 @ a4a763a0
...@@ -24,6 +24,15 @@ import { ...@@ -24,6 +24,15 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { useSettings } from "@/hooks/useSettings";
import {
loadSandpackClient,
type SandboxSetup,
type ClientOptions,
SandpackClient,
} from "@codesandbox/sandpack-client";
import { showError } from "@/lib/toast";
import { SandboxConfig } from "@/ipc/ipc_types";
interface ErrorBannerProps { interface ErrorBannerProps {
error: string | null; error: string | null;
...@@ -107,7 +116,6 @@ export const PreviewIframe = ({ ...@@ -107,7 +116,6 @@ export const PreviewIframe = ({
// Effect to parse routes from the router file // Effect to parse routes from the router file
useEffect(() => { useEffect(() => {
if (routerContent) { if (routerContent) {
console.log("routerContent", routerContent);
try { try {
const routes: Array<{ path: string; label: string }> = []; const routes: Array<{ path: string; label: string }> = [];
...@@ -148,6 +156,7 @@ export const PreviewIframe = ({ ...@@ -148,6 +156,7 @@ export const PreviewIframe = ({
const [navigationHistory, setNavigationHistory] = useState<string[]>([]); const [navigationHistory, setNavigationHistory] = useState<string[]>([]);
const [currentHistoryPosition, setCurrentHistoryPosition] = useState(0); const [currentHistoryPosition, setCurrentHistoryPosition] = useState(0);
const iframeRef = useRef<HTMLIFrameElement>(null); const iframeRef = useRef<HTMLIFrameElement>(null);
const { settings } = useSettings();
// Add message listener for iframe errors and navigation events // Add message listener for iframe errors and navigation events
useEffect(() => { useEffect(() => {
...@@ -392,7 +401,9 @@ export const PreviewIframe = ({ ...@@ -392,7 +401,9 @@ export const PreviewIframe = ({
}} }}
/> />
{!appUrl ? ( {settings?.runtimeMode === "web-sandbox" ? (
<SandpackIframe reloadKey={reloadKey} />
) : !appUrl ? (
<div className="absolute inset-0 flex flex-col items-center justify-center space-y-4 bg-gray-50 dark:bg-gray-950"> <div className="absolute inset-0 flex flex-col items-center justify-center space-y-4 bg-gray-50 dark:bg-gray-950">
<Loader2 className="w-8 h-8 animate-spin text-gray-400 dark:text-gray-500" /> <Loader2 className="w-8 h-8 animate-spin text-gray-400 dark:text-gray-500" />
<p className="text-gray-600 dark:text-gray-300"> <p className="text-gray-600 dark:text-gray-300">
...@@ -412,3 +423,120 @@ export const PreviewIframe = ({ ...@@ -412,3 +423,120 @@ export const PreviewIframe = ({
</div> </div>
); );
}; };
const parseTailwindConfig = (config: string) => {
const themeRegex = /theme\s*:\s*(\{[\s\S]*?\})(?=\s*,\s*plugins)/;
const match = config.match(themeRegex);
if (!match) return "{};";
return `{theme: ${match[1]}};`;
};
const SandpackIframe = ({ reloadKey }: { reloadKey: number }) => {
const selectedAppId = useAtomValue(selectedAppIdAtom);
const { app } = useLoadApp(selectedAppId);
const keyRef = useRef<number | null>(null);
const isFirstRender = useRef(true);
const sandpackClientRef = useRef<SandpackClient | null>(null);
async function loadSandpack() {
if (keyRef.current === reloadKey) return;
keyRef.current = reloadKey;
if (!iframeRef.current || !app || !selectedAppId) return;
const sandboxConfig = await IpcClient.getInstance().getAppSandboxConfig(
selectedAppId
);
const sandpackConfig: SandboxSetup = mapSandpackConfig(sandboxConfig);
const options: ClientOptions = {
// bundlerURL: "https://sandpack.dyad.sh/",
showOpenInCodeSandbox: false,
showLoadingScreen: true,
showErrorScreen: true,
externalResources: [
// "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
"https://cdn.tailwindcss.com",
],
};
let client: SandpackClient | undefined;
try {
client = await loadSandpackClient(
iframeRef.current,
sandpackConfig,
options
);
sandpackClientRef.current = client;
return client;
} catch (error) {
showError(error);
}
}
useEffect(() => {
async function updateSandpack() {
if (sandpackClientRef.current && selectedAppId) {
const sandboxConfig = await IpcClient.getInstance().getAppSandboxConfig(
selectedAppId
);
sandpackClientRef.current.updateSandbox(
mapSandpackConfig(sandboxConfig)
);
}
}
updateSandpack();
}, [app]);
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
if (!iframeRef.current || !app || !selectedAppId) return () => {};
const clientPromise = loadSandpack();
return () => {
clientPromise.then((client) => {
client?.destroy();
sandpackClientRef.current = null;
});
};
}, [reloadKey]);
const iframeRef = useRef<HTMLIFrameElement>(null);
return (
<iframe
ref={iframeRef}
className="w-full h-full border-none bg-gray-50"
></iframe>
);
};
const mapSandpackConfig = (sandboxConfig: SandboxConfig): SandboxSetup => {
return {
files: Object.fromEntries(
Object.entries(sandboxConfig.files).map(([key, value]) => [
key,
{
code: value.replace(
"import './globals.css'",
`
const injectedStyle = document.createElement("style");
injectedStyle.textContent = \`${sandboxConfig.files["src/globals.css"]}\`;
injectedStyle.type = "text/tailwindcss";
document.head.appendChild(injectedStyle);
window.tailwind.config = ${parseTailwindConfig(
sandboxConfig.files["tailwind.config.ts"]
)}
`
),
},
])
),
dependencies: sandboxConfig.dependencies,
entry: sandboxConfig.entry,
};
};
src/hooks/useLoadVersions.ts
浏览文件 @ a4a763a0
import { useState, useEffect } from "react"; import { useState, useEffect, useCallback } from "react";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { versionsListAtom } from "@/atoms/appAtoms"; import { versionsListAtom } from "@/atoms/appAtoms";
import { IpcClient } from "@/ipc/ipc_client"; import { IpcClient } from "@/ipc/ipc_client";
...@@ -34,7 +34,7 @@ export function useLoadVersions(appId: number | null) { ...@@ -34,7 +34,7 @@ export function useLoadVersions(appId: number | null) {
loadVersions(); loadVersions();
}, [appId, setVersions]); }, [appId, setVersions]);
const refreshVersions = async () => { const refreshVersions = useCallback(async () => {
if (appId === null) { if (appId === null) {
return; return;
} }
...@@ -48,7 +48,7 @@ export function useLoadVersions(appId: number | null) { ...@@ -48,7 +48,7 @@ export function useLoadVersions(appId: number | null) {
console.error("Error refreshing versions:", error); console.error("Error refreshing versions:", error);
setError(error instanceof Error ? error : new Error(String(error))); setError(error instanceof Error ? error : new Error(String(error)));
} }
}; }, [appId, setVersions, setError]);
return { versions, loading, error, refreshVersions }; return { versions, loading, error, refreshVersions };
} }
src/ipc/handlers/app_handlers.ts
浏览文件 @ a4a763a0
...@@ -2,7 +2,12 @@ import { ipcMain } from "electron"; ...@@ -2,7 +2,12 @@ import { ipcMain } from "electron";
import { db, getDatabasePath } from "../../db"; import { db, getDatabasePath } from "../../db";
import { apps, chats } from "../../db/schema"; import { apps, chats } from "../../db/schema";
import { desc, eq } from "drizzle-orm"; import { desc, eq } from "drizzle-orm";
import type { App, CreateAppParams, Version } from "../ipc_types"; import type {
App,
CreateAppParams,
SandboxConfig,
Version,
} from "../ipc_types";
import fs from "node:fs"; import fs from "node:fs";
import path from "node:path"; import path from "node:path";
import { getDyadAppPath, getUserDataPath } from "../../paths/paths"; import { getDyadAppPath, getUserDataPath } from "../../paths/paths";
...@@ -25,6 +30,7 @@ import { ...@@ -25,6 +30,7 @@ import {
} from "../utils/process_manager"; } from "../utils/process_manager";
import { ALLOWED_ENV_VARS } from "../../constants/models"; import { ALLOWED_ENV_VARS } from "../../constants/models";
import { getEnvVar } from "../utils/read_env"; import { getEnvVar } from "../utils/read_env";
import { readSettings } from "../../main/settings";
async function executeApp({ async function executeApp({
appPath, appPath,
...@@ -34,7 +40,26 @@ async function executeApp({ ...@@ -34,7 +40,26 @@ async function executeApp({
appPath: string; appPath: string;
appId: number; appId: number;
event: Electron.IpcMainInvokeEvent; event: Electron.IpcMainInvokeEvent;
}): Promise<{ processId: number }> { }): Promise<void> {
const settings = readSettings();
if (settings.runtimeMode === "web-sandbox") {
return;
}
if (settings.runtimeMode === "local-node") {
await executeAppLocalNode({ appPath, appId, event });
return;
}
throw new Error("Invalid runtime mode");
}
async function executeAppLocalNode({
appPath,
appId,
event,
}: {
appPath: string;
appId: number;
event: Electron.IpcMainInvokeEvent;
}): Promise<void> {
const process = spawn("npm install && npm run dev", [], { const process = spawn("npm install && npm run dev", [], {
cwd: appPath, cwd: appPath,
shell: true, shell: true,
...@@ -99,11 +124,43 @@ async function executeApp({ ...@@ -99,11 +124,43 @@ async function executeApp({
// Note: We don't throw here as the error is asynchronous. The caller got a success response already. // Note: We don't throw here as the error is asynchronous. The caller got a success response already.
// Consider adding ipcRenderer event emission to notify UI of the error. // Consider adding ipcRenderer event emission to notify UI of the error.
}); });
return { processId: currentProcessId };
} }
export function registerAppHandlers() { export function registerAppHandlers() {
ipcMain.handle(
"get-app-sandbox-config",
async (_, { appId }: { appId: number }): Promise<SandboxConfig> => {
const app = await db.query.apps.findFirst({
where: eq(apps.id, appId),
});
if (!app) {
throw new Error("App not found");
}
const appPath = getDyadAppPath(app.path);
const files = getFilesRecursively(appPath, appPath);
const filesMap = await Promise.all(
files.map(async (file) => {
const content = await fs.promises.readFile(
path.join(appPath, file),
"utf-8"
);
return { [file]: content };
})
);
// Get dependencies from package.json
const packageJsonPath = path.join(appPath, "package.json");
const packageJson = await fs.promises.readFile(packageJsonPath, "utf-8");
const dependencies = JSON.parse(packageJson).dependencies;
return {
files: filesMap.reduce((acc, file) => ({ ...acc, ...file }), {}),
dependencies,
entry: "src/main.tsx",
};
}
);
ipcMain.handle("create-app", async (_, params: CreateAppParams) => { ipcMain.handle("create-app", async (_, params: CreateAppParams) => {
const appPath = params.name; const appPath = params.name;
const fullAppPath = getDyadAppPath(appPath); const fullAppPath = getDyadAppPath(appPath);
...@@ -272,7 +329,6 @@ export function registerAppHandlers() { ...@@ -272,7 +329,6 @@ export function registerAppHandlers() {
console.debug(`Starting app ${appId} in path ${app.path}`); console.debug(`Starting app ${appId} in path ${app.path}`);
const appPath = getDyadAppPath(app.path); const appPath = getDyadAppPath(app.path);
console.log("appPath-CWD", appPath);
try { try {
const currentProcessId = await executeApp({ appPath, appId, event }); const currentProcessId = await executeApp({ appPath, appId, event });
...@@ -379,9 +435,9 @@ export function registerAppHandlers() { ...@@ -379,9 +435,9 @@ export function registerAppHandlers() {
const appPath = getDyadAppPath(app.path); const appPath = getDyadAppPath(app.path);
console.debug(`Starting app ${appId} in path ${app.path}`); console.debug(`Starting app ${appId} in path ${app.path}`);
const currentProcessId = await executeApp({ appPath, appId, event }); await executeApp({ appPath, appId, event });
return { success: true, processId: currentProcessId }; return { success: true };
} catch (error) { } catch (error) {
console.error(`Error restarting app ${appId}:`, error); console.error(`Error restarting app ${appId}:`, error);
throw error; throw error;
......
src/ipc/ipc_client.ts
浏览文件 @ a4a763a0
...@@ -14,6 +14,7 @@ import type { ...@@ -14,6 +14,7 @@ import type {
CreateAppParams, CreateAppParams,
CreateAppResult, CreateAppResult,
ListAppsResponse, ListAppsResponse,
SandboxConfig,
Version, Version,
} from "./ipc_types"; } from "./ipc_types";
import { showError } from "@/lib/toast"; import { showError } from "@/lib/toast";
...@@ -127,6 +128,18 @@ export class IpcClient { ...@@ -127,6 +128,18 @@ export class IpcClient {
} }
} }
public async getAppSandboxConfig(appId: number): Promise<SandboxConfig> {
try {
const data = await this.ipcRenderer.invoke("get-app-sandbox-config", {
appId,
});
return data;
} catch (error) {
showError(error);
throw error;
}
}
public async getApp(appId: number): Promise<App> { public async getApp(appId: number): Promise<App> {
try { try {
const data = await this.ipcRenderer.invoke("get-app", appId); const data = await this.ipcRenderer.invoke("get-app", appId);
......
src/ipc/ipc_types.ts
浏览文件 @ a4a763a0
...@@ -57,3 +57,9 @@ export interface Version { ...@@ -57,3 +57,9 @@ export interface Version {
message: string; message: string;
timestamp: number; timestamp: number;
} }
export interface SandboxConfig {
files: Record<string, string>;
dependencies: Record<string, string>;
entry: string;
}
src/preload.ts
浏览文件 @ a4a763a0
...@@ -15,6 +15,7 @@ const validInvokeChannels = [ ...@@ -15,6 +15,7 @@ const validInvokeChannels = [
"get-chats", "get-chats",
"list-apps", "list-apps",
"get-app", "get-app",
"get-app-sandbox-config",
"edit-app-file", "edit-app-file",
"read-app-file", "read-app-file",
"run-app", "run-app",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论