Skip to content

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

Click to edit UI (#385)

- [x] add e2e test - happy case (make sure it clears selection and next prompt is empty, and preview is cleared); de-selection case - [x] shim - old & new file - [x] upgrade path - [x] add docs - [x] add try-catch to parser script - [x] make it work for next.js - [x] extract npm package - [x] make sure plugin doesn't apply in prod
上级 b86738f3
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 765 行增加 和 10 行删除
e2e-tests/fixtures/import-app/select-component/.gitignore 0 → 100644
浏览文件 @ c1aa6803
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
e2e-tests/fixtures/import-app/select-component/components.json 0 → 100644
浏览文件 @ c1aa6803
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/styles/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
e2e-tests/fixtures/import-app/select-component/index.html 0 → 100644
浏览文件 @ c1aa6803
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>dyad-generated-app</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
e2e-tests/fixtures/import-app/select-component/package.json 0 → 100644
浏览文件 @ c1aa6803
{
"name": "vite_react_shadcn_ts",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"build:dev": "vite build --mode development",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@radix-ui/react-slot": "^1.2.3",
"@tailwindcss/vite": "^4.1.8",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.514.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.2",
"tailwind-merge": "^3.3.1",
"tailwindcss": "^4.1.8"
},
"devDependencies": {
"@types/node": "^22.5.5",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react-swc": "^3.9.0",
"tw-animate-css": "^1.3.4",
"typescript": "^5.5.3",
"vite": "^6.3.4"
}
}
e2e-tests/fixtures/import-app/select-component/src/App.tsx 0 → 100644
浏览文件 @ c1aa6803
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Index from "./pages/Index";
const App = () => (
<BrowserRouter>
<Routes>
<Route path="/" element={<Index />} />
</Routes>
</BrowserRouter>
);
export default App;
e2e-tests/fixtures/import-app/select-component/src/components/ui/button.tsx 0 → 100644
浏览文件 @ c1aa6803
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
);
function Button({
className,
variant,
size,
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "button";
return (
<Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
);
}
export { Button, buttonVariants };
e2e-tests/fixtures/import-app/select-component/src/lib/utils.ts 0 → 100644
浏览文件 @ c1aa6803
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
e2e-tests/fixtures/import-app/select-component/src/main.tsx 0 → 100644
浏览文件 @ c1aa6803
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./styles/globals.css";
createRoot(document.getElementById("root")!).render(<App />);
e2e-tests/fixtures/import-app/select-component/src/pages/Index.tsx 0 → 100644
浏览文件 @ c1aa6803
import { Button } from "@/components/ui/button";
import { Rocket, ShieldCheck, Sparkles } from "lucide-react";
const features = [
{
icon: <Rocket className="w-8 h-8 text-primary mb-2" />,
title: "Fast & Modern",
description: "Built with the latest tech for blazing fast performance.",
},
{
icon: <ShieldCheck className="w-8 h-8 text-primary mb-2" />,
title: "Secure by Design",
description: "Security best practices baked in from the start.",
},
{
icon: <Sparkles className="w-8 h-8 text-primary mb-2" />,
title: "Easy to Customize",
description: "Effortlessly adapt the template to your needs.",
},
];
const Index = () => {
return (
<div className="min-h-screen flex flex-col bg-background">
{/* Hero Section */}
<header className="flex-1 flex flex-col items-center justify-center px-4 py-16">
<h1 className="text-5xl font-extrabold mb-4 text-foreground text-center">
Launch Your Next Project
</h1>
<p className="text-xl text-muted-foreground mb-8 text-center max-w-xl">
A simple, modern landing page template built with React, shadcn/ui,
and Tailwind CSS.
</p>
<Button size="lg" className="px-8 py-6 text-lg">
Get Started
</Button>
</header>
{/* Features Section */}
<section className="py-12 bg-muted">
<div className="max-w-4xl mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{features.map((feature, idx) => (
<div
key={idx}
className="flex flex-col items-center text-center bg-card rounded-lg p-6 shadow-sm"
>
{feature.icon}
<h3 className="text-lg font-semibold mb-2 text-foreground">
{feature.title}
</h3>
<p className="text-muted-foreground">{feature.description}</p>
</div>
))}
</div>
</div>
</section>
</div>
);
};
export default Index;
e2e-tests/fixtures/import-app/select-component/src/styles/globals.css 0 → 100644
浏览文件 @ c1aa6803
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
e2e-tests/fixtures/import-app/select-component/tsconfig.app.json 0 → 100644
浏览文件 @ c1aa6803
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noImplicitAny": false,
"noFallthroughCasesInSwitch": false,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"]
}
e2e-tests/fixtures/import-app/select-component/tsconfig.json 0 → 100644
浏览文件 @ c1aa6803
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"noImplicitAny": false,
"noUnusedParameters": false,
"skipLibCheck": true,
"allowJs": true,
"noUnusedLocals": false,
"strictNullChecks": false
}
}
e2e-tests/fixtures/import-app/select-component/tsconfig.node.json 0 → 100644
浏览文件 @ c1aa6803
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true
},
"include": ["vite.config.ts"]
}
e2e-tests/fixtures/import-app/select-component/vite.config.ts 0 → 100644
浏览文件 @ c1aa6803
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
export default defineConfig(() => ({
server: {
host: "::",
port: 8080,
},
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
}));
e2e-tests/helpers/generateAppFilesSnapshotData.ts
浏览文件 @ c1aa6803
...@@ -62,6 +62,7 @@ export function generateAppFilesSnapshotData( ...@@ -62,6 +62,7 @@ export function generateAppFilesSnapshotData(
basePath: string, basePath: string,
): FileSnapshotData[] { ): FileSnapshotData[] {
const ignorePatterns = [ const ignorePatterns = [
".DS_Store",
".git", ".git",
"node_modules", "node_modules",
// Avoid snapshotting lock files because they are getting generated // Avoid snapshotting lock files because they are getting generated
......
e2e-tests/helpers/test_helper.ts
浏览文件 @ c1aa6803
...@@ -220,6 +220,20 @@ export class PageObject { ...@@ -220,6 +220,20 @@ export class PageObject {
await this.page.getByText("Rebuild").click(); await this.page.getByText("Rebuild").click();
} }
async clickTogglePreviewPanel() {
await this.page.getByTestId("toggle-preview-panel-button").click();
}
async clickPreviewPickElement() {
await this.page
.getByTestId("preview-pick-element-button")
.click({ timeout: Timeout.LONG });
}
async clickDeselectComponent() {
await this.page.getByRole("button", { name: "Deselect component" }).click();
}
async clickPreviewMoreOptions() { async clickPreviewMoreOptions() {
await this.page.getByTestId("preview-more-options-button").click(); await this.page.getByTestId("preview-more-options-button").click();
} }
...@@ -262,6 +276,18 @@ export class PageObject { ...@@ -262,6 +276,18 @@ export class PageObject {
return this.page.getByTestId("preview-error-banner"); return this.page.getByTestId("preview-error-banner");
} }
async snapshotChatInputContainer() {
await expect(this.getChatInputContainer()).toMatchAriaSnapshot();
}
getSelectedComponentDisplay() {
return this.page.getByTestId("selected-component-display");
}
async snapshotSelectedComponentDisplay() {
await expect(this.getSelectedComponentDisplay()).toMatchAriaSnapshot();
}
async snapshotPreview({ name }: { name?: string } = {}) { async snapshotPreview({ name }: { name?: string } = {}) {
const iframe = this.getPreviewIframeElement(); const iframe = this.getPreviewIframeElement();
await expect(iframe.contentFrame().locator("body")).toMatchAriaSnapshot({ await expect(iframe.contentFrame().locator("body")).toMatchAriaSnapshot({
...@@ -483,6 +509,16 @@ export class PageObject { ...@@ -483,6 +509,16 @@ export class PageObject {
await this.page.getByRole("button", { name: "Open in Chat" }).click(); await this.page.getByRole("button", { name: "Open in Chat" }).click();
} }
async clickAppUpgradeButton({ upgradeId }: { upgradeId: string }) {
await this.page.getByTestId(`app-upgrade-${upgradeId}`).click();
}
async expectNoAppUpgrades() {
await expect(this.page.getByTestId("no-app-upgrades-needed")).toBeVisible({
timeout: Timeout.MEDIUM,
});
}
async clickAppDetailsRenameAppButton() { async clickAppDetailsRenameAppButton() {
await this.page.getByTestId("app-details-rename-app-button").click(); await this.page.getByTestId("app-details-rename-app-button").click();
} }
......
e2e-tests/select_component.spec.ts 0 → 100644
浏览文件 @ c1aa6803
import { expect } from "@playwright/test";
import { testSkipIfWindows } from "./helpers/test_helper";
testSkipIfWindows("select component", async ({ po }) => {
await po.setUp();
await po.sendPrompt("tc=basic");
await po.clickTogglePreviewPanel();
await po.clickPreviewPickElement();
await po
.getPreviewIframeElement()
.contentFrame()
.getByRole("heading", { name: "Welcome to Your Blank App" })
.click();
await po.snapshotPreview();
await po.snapshotSelectedComponentDisplay();
await po.sendPrompt("[dump] make it smaller");
await po.snapshotPreview();
await expect(po.getSelectedComponentDisplay()).not.toBeVisible();
await po.snapshotServerDump("all-messages");
// Send one more prompt to make sure it's a normal message.
await po.sendPrompt("[dump] tc=basic");
await po.snapshotServerDump("last-message");
});
testSkipIfWindows("deselect component", async ({ po }) => {
await po.setUp();
await po.sendPrompt("tc=basic");
await po.clickTogglePreviewPanel();
await po.clickPreviewPickElement();
await po
.getPreviewIframeElement()
.contentFrame()
.getByRole("heading", { name: "Welcome to Your Blank App" })
.click();
await po.snapshotPreview();
await po.snapshotSelectedComponentDisplay();
// Deselect the component and make sure the state has reverted
await po.clickDeselectComponent();
await po.snapshotPreview();
await expect(po.getSelectedComponentDisplay()).not.toBeVisible();
// Send one more prompt to make sure it's a normal message.
await po.sendPrompt("[dump] tc=basic");
await po.snapshotServerDump("last-message");
});
testSkipIfWindows("upgrade app to select component", async ({ po }) => {
await po.setUp();
await po.importApp("select-component");
await po.getTitleBarAppNameButton().click();
await po.clickAppUpgradeButton({ upgradeId: "component-tagger" });
await po.expectNoAppUpgrades();
await po.snapshotAppFiles();
await po.clickOpenInChatButton();
await po.clickPreviewPickElement();
await po
.getPreviewIframeElement()
.contentFrame()
.getByRole("heading", { name: "Launch Your Next Project" })
.click();
await po.sendPrompt("[dump] make it smaller");
await po.snapshotServerDump("last-message");
});
testSkipIfWindows("select component next.js", async ({ po }) => {
await po.setUp();
// Select Next.js template
await po.goToHubTab();
await po.selectTemplate("Next.js Template");
await po.goToAppsTab();
await po.sendPrompt("tc=basic");
await po.clickTogglePreviewPanel();
await po.clickPreviewPickElement();
await po
.getPreviewIframeElement()
.contentFrame()
.getByRole("heading", { name: "Blank page" })
.click();
await po.snapshotPreview();
await po.snapshotSelectedComponentDisplay();
await po.sendPrompt("[dump] make it smaller");
await po.snapshotPreview();
await po.snapshotServerDump("all-messages");
});
e2e-tests/snapshots/context_window.spec.ts_context-window-1.txt
浏览文件 @ c1aa6803
...@@ -1279,6 +1279,7 @@ export default { ...@@ -1279,6 +1279,7 @@ export default {
<dyad-file path="vite.config.ts"> <dyad-file path="vite.config.ts">
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import dyadComponentTagger from "@dyad-sh/react-vite-component-tagger";
import react from "@vitejs/plugin-react-swc"; import react from "@vitejs/plugin-react-swc";
import path from "path"; import path from "path";
...@@ -1287,7 +1288,7 @@ export default defineConfig(() => ({ ...@@ -1287,7 +1288,7 @@ export default defineConfig(() => ({
host: "::", host: "::",
port: 8080, port: 8080,
}, },
plugins: [react()], plugins: [dyadComponentTagger(), react()],
resolve: { resolve: {
alias: { alias: {
"@": path.resolve(__dirname, "./src"), "@": path.resolve(__dirname, "./src"),
......
e2e-tests/snapshots/context_window.spec.ts_context-window-2.txt
浏览文件 @ c1aa6803
...@@ -1279,6 +1279,7 @@ export default { ...@@ -1279,6 +1279,7 @@ export default {
<dyad-file path="vite.config.ts"> <dyad-file path="vite.config.ts">
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import dyadComponentTagger from "@dyad-sh/react-vite-component-tagger";
import react from "@vitejs/plugin-react-swc"; import react from "@vitejs/plugin-react-swc";
import path from "path"; import path from "path";
...@@ -1287,7 +1288,7 @@ export default defineConfig(() => ({ ...@@ -1287,7 +1288,7 @@ export default defineConfig(() => ({
host: "::", host: "::",
port: 8080, port: 8080,
}, },
plugins: [react()], plugins: [dyadComponentTagger(), react()],
resolve: { resolve: {
alias: { alias: {
"@": path.resolve(__dirname, "./src"), "@": path.resolve(__dirname, "./src"),
......
e2e-tests/snapshots/context_window.spec.ts_context-window-3.txt
浏览文件 @ c1aa6803
...@@ -1279,6 +1279,7 @@ export default { ...@@ -1279,6 +1279,7 @@ export default {
<dyad-file path="vite.config.ts"> <dyad-file path="vite.config.ts">
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import dyadComponentTagger from "@dyad-sh/react-vite-component-tagger";
import react from "@vitejs/plugin-react-swc"; import react from "@vitejs/plugin-react-swc";
import path from "path"; import path from "path";
...@@ -1287,7 +1288,7 @@ export default defineConfig(() => ({ ...@@ -1287,7 +1288,7 @@ export default defineConfig(() => ({
host: "::", host: "::",
port: 8080, port: 8080,
}, },
plugins: [react()], plugins: [dyadComponentTagger(), react()],
resolve: { resolve: {
alias: { alias: {
"@": path.resolve(__dirname, "./src"), "@": path.resolve(__dirname, "./src"),
......
e2e-tests/snapshots/context_window.spec.ts_context-window-5.txt
浏览文件 @ c1aa6803
...@@ -1279,6 +1279,7 @@ export default { ...@@ -1279,6 +1279,7 @@ export default {
<dyad-file path="vite.config.ts"> <dyad-file path="vite.config.ts">
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import dyadComponentTagger from "@dyad-sh/react-vite-component-tagger";
import react from "@vitejs/plugin-react-swc"; import react from "@vitejs/plugin-react-swc";
import path from "path"; import path from "path";
...@@ -1287,7 +1288,7 @@ export default defineConfig(() => ({ ...@@ -1287,7 +1288,7 @@ export default defineConfig(() => ({
host: "::", host: "::",
port: 8080, port: 8080,
}, },
plugins: [react()], plugins: [dyadComponentTagger(), react()],
resolve: { resolve: {
alias: { alias: {
"@": path.resolve(__dirname, "./src"), "@": path.resolve(__dirname, "./src"),
......
e2e-tests/snapshots/copy_app.spec.ts_app.txt
浏览文件 @ c1aa6803
...@@ -186,6 +186,7 @@ A file (2) ...@@ -186,6 +186,7 @@ A file (2)
"zod": "^3.23.8" "zod": "^3.23.8"
}, },
"devDependencies": { "devDependencies": {
"@dyad-sh/react-vite-component-tagger": "^0.8.0",
"@eslint/js": "^9.9.0", "@eslint/js": "^9.9.0",
"@tailwindcss/typography": "^0.5.15", "@tailwindcss/typography": "^0.5.15",
"@types/node": "^22.5.5", "@types/node": "^22.5.5",
...@@ -5845,6 +5846,7 @@ export default { ...@@ -5845,6 +5846,7 @@ export default {
=== vite.config.ts === === vite.config.ts ===
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import dyadComponentTagger from "@dyad-sh/react-vite-component-tagger";
import react from "@vitejs/plugin-react-swc"; import react from "@vitejs/plugin-react-swc";
import path from "path"; import path from "path";
...@@ -5853,7 +5855,7 @@ export default defineConfig(() => ({ ...@@ -5853,7 +5855,7 @@ export default defineConfig(() => ({
host: "::", host: "::",
port: 8080, port: 8080,
}, },
plugins: [react()], plugins: [dyadComponentTagger(), react()],
resolve: { resolve: {
alias: { alias: {
"@": path.resolve(__dirname, "./src"), "@": path.resolve(__dirname, "./src"),
......
e2e-tests/snapshots/dump_messages.spec.ts_dump-messages-1.txt
浏览文件 @ c1aa6803
...@@ -1279,6 +1279,7 @@ export default { ...@@ -1279,6 +1279,7 @@ export default {
<dyad-file path="vite.config.ts"> <dyad-file path="vite.config.ts">
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import dyadComponentTagger from "@dyad-sh/react-vite-component-tagger";
import react from "@vitejs/plugin-react-swc"; import react from "@vitejs/plugin-react-swc";
import path from "path"; import path from "path";
...@@ -1287,7 +1288,7 @@ export default defineConfig(() => ({ ...@@ -1287,7 +1288,7 @@ export default defineConfig(() => ({
host: "::", host: "::",
port: 8080, port: 8080,
}, },
plugins: [react()], plugins: [dyadComponentTagger(), react()],
resolve: { resolve: {
alias: { alias: {
"@": path.resolve(__dirname, "./src"), "@": path.resolve(__dirname, "./src"),
......
e2e-tests/snapshots/engine.spec.ts_send-message-to-engine-1.txt
浏览文件 @ c1aa6803
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
}, },
{ {
"path": "package.json", "path": "package.json",
"content": "{\n \"dependencies\": {\n \"@hookform/resolvers\": \"^3.9.0\",\n \"@radix-ui/react-accordion\": \"^1.2.0\",\n \"@radix-ui/react-alert-dialog\": \"^1.1.1\",\n \"@radix-ui/react-aspect-ratio\": \"^1.1.0\",\n \"@radix-ui/react-avatar\": \"^1.1.0\",\n \"@radix-ui/react-checkbox\": \"^1.1.1\",\n \"@radix-ui/react-collapsible\": \"^1.1.0\",\n \"@radix-ui/react-context-menu\": \"^2.2.1\",\n \"@radix-ui/react-dialog\": \"^1.1.2\",\n \"@radix-ui/react-dropdown-menu\": \"^2.1.1\",\n \"@radix-ui/react-hover-card\": \"^1.1.1\",\n \"@radix-ui/react-label\": \"^2.1.0\",\n \"@radix-ui/react-menubar\": \"^1.1.1\",\n \"@radix-ui/react-navigation-menu\": \"^1.2.0\",\n \"@radix-ui/react-popover\": \"^1.1.1\",\n \"@radix-ui/react-progress\": \"^1.1.0\",\n \"@radix-ui/react-radio-group\": \"^1.2.0\",\n \"@radix-ui/react-scroll-area\": \"^1.1.0\",\n \"@radix-ui/react-select\": \"^2.1.1\",\n \"@radix-ui/react-separator\": \"^1.1.0\",\n \"@radix-ui/react-slider\": \"^1.2.0\",\n \"@radix-ui/react-slot\": \"^1.1.0\",\n \"@radix-ui/react-switch\": \"^1.1.0\",\n \"@radix-ui/react-tabs\": \"^1.1.0\",\n \"@radix-ui/react-toast\": \"^1.2.1\",\n \"@radix-ui/react-toggle\": \"^1.1.0\",\n \"@radix-ui/react-toggle-group\": \"^1.1.0\",\n \"@radix-ui/react-tooltip\": \"^1.1.4\",\n \"@tanstack/react-query\": \"^5.56.2\",\n \"class-variance-authority\": \"^0.7.1\",\n \"clsx\": \"^2.1.1\",\n \"cmdk\": \"^1.0.0\",\n \"date-fns\": \"^3.6.0\",\n \"embla-carousel-react\": \"^8.3.0\",\n \"input-otp\": \"^1.2.4\",\n \"lucide-react\": \"^0.462.0\",\n \"next-themes\": \"^0.3.0\",\n \"react\": \"^18.3.1\",\n \"react-day-picker\": \"^8.10.1\",\n \"react-dom\": \"^18.3.1\",\n \"react-hook-form\": \"^7.53.0\",\n \"react-resizable-panels\": \"^2.1.3\",\n \"react-router-dom\": \"^6.26.2\",\n \"recharts\": \"^2.12.7\",\n \"sonner\": \"^1.5.0\",\n \"tailwind-merge\": \"^2.5.2\",\n \"tailwindcss-animate\": \"^1.0.7\",\n \"vaul\": \"^0.9.3\",\n \"zod\": \"^3.23.8\"\n },\n \"devDependencies\": {\n \"@eslint/js\": \"^9.9.0\",\n \"@tailwindcss/typography\": \"^0.5.15\",\n \"@types/node\": \"^22.5.5\",\n \"@types/react\": \"^18.3.3\",\n \"@types/react-dom\": \"^18.3.0\",\n \"@vitejs/plugin-react-swc\": \"^3.9.0\",\n \"autoprefixer\": \"^10.4.20\",\n \"eslint\": \"^9.9.0\",\n \"eslint-plugin-react-hooks\": \"^5.1.0-rc.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.9\",\n \"globals\": \"^15.9.0\",\n \"postcss\": \"^8.4.47\",\n \"tailwindcss\": \"^3.4.11\",\n \"typescript\": \"^5.5.3\",\n \"typescript-eslint\": \"^8.0.1\",\n \"vite\": \"^6.3.4\"\n }\n}", "content": "{\n \"dependencies\": {\n \"@hookform/resolvers\": \"^3.9.0\",\n \"@radix-ui/react-accordion\": \"^1.2.0\",\n \"@radix-ui/react-alert-dialog\": \"^1.1.1\",\n \"@radix-ui/react-aspect-ratio\": \"^1.1.0\",\n \"@radix-ui/react-avatar\": \"^1.1.0\",\n \"@radix-ui/react-checkbox\": \"^1.1.1\",\n \"@radix-ui/react-collapsible\": \"^1.1.0\",\n \"@radix-ui/react-context-menu\": \"^2.2.1\",\n \"@radix-ui/react-dialog\": \"^1.1.2\",\n \"@radix-ui/react-dropdown-menu\": \"^2.1.1\",\n \"@radix-ui/react-hover-card\": \"^1.1.1\",\n \"@radix-ui/react-label\": \"^2.1.0\",\n \"@radix-ui/react-menubar\": \"^1.1.1\",\n \"@radix-ui/react-navigation-menu\": \"^1.2.0\",\n \"@radix-ui/react-popover\": \"^1.1.1\",\n \"@radix-ui/react-progress\": \"^1.1.0\",\n \"@radix-ui/react-radio-group\": \"^1.2.0\",\n \"@radix-ui/react-scroll-area\": \"^1.1.0\",\n \"@radix-ui/react-select\": \"^2.1.1\",\n \"@radix-ui/react-separator\": \"^1.1.0\",\n \"@radix-ui/react-slider\": \"^1.2.0\",\n \"@radix-ui/react-slot\": \"^1.1.0\",\n \"@radix-ui/react-switch\": \"^1.1.0\",\n \"@radix-ui/react-tabs\": \"^1.1.0\",\n \"@radix-ui/react-toast\": \"^1.2.1\",\n \"@radix-ui/react-toggle\": \"^1.1.0\",\n \"@radix-ui/react-toggle-group\": \"^1.1.0\",\n \"@radix-ui/react-tooltip\": \"^1.1.4\",\n \"@tanstack/react-query\": \"^5.56.2\",\n \"class-variance-authority\": \"^0.7.1\",\n \"clsx\": \"^2.1.1\",\n \"cmdk\": \"^1.0.0\",\n \"date-fns\": \"^3.6.0\",\n \"embla-carousel-react\": \"^8.3.0\",\n \"input-otp\": \"^1.2.4\",\n \"lucide-react\": \"^0.462.0\",\n \"next-themes\": \"^0.3.0\",\n \"react\": \"^18.3.1\",\n \"react-day-picker\": \"^8.10.1\",\n \"react-dom\": \"^18.3.1\",\n \"react-hook-form\": \"^7.53.0\",\n \"react-resizable-panels\": \"^2.1.3\",\n \"react-router-dom\": \"^6.26.2\",\n \"recharts\": \"^2.12.7\",\n \"sonner\": \"^1.5.0\",\n \"tailwind-merge\": \"^2.5.2\",\n \"tailwindcss-animate\": \"^1.0.7\",\n \"vaul\": \"^0.9.3\",\n \"zod\": \"^3.23.8\"\n },\n \"devDependencies\": {\n \"@dyad-sh/react-vite-component-tagger\": \"^0.8.0\",\n \"@eslint/js\": \"^9.9.0\",\n \"@tailwindcss/typography\": \"^0.5.15\",\n \"@types/node\": \"^22.5.5\",\n \"@types/react\": \"^18.3.3\",\n \"@types/react-dom\": \"^18.3.0\",\n \"@vitejs/plugin-react-swc\": \"^3.9.0\",\n \"autoprefixer\": \"^10.4.20\",\n \"eslint\": \"^9.9.0\",\n \"eslint-plugin-react-hooks\": \"^5.1.0-rc.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.9\",\n \"globals\": \"^15.9.0\",\n \"postcss\": \"^8.4.47\",\n \"tailwindcss\": \"^3.4.11\",\n \"typescript\": \"^5.5.3\",\n \"typescript-eslint\": \"^8.0.1\",\n \"vite\": \"^6.3.4\"\n }\n}",
"force": false "force": false
}, },
{ {
...@@ -358,7 +358,7 @@ ...@@ -358,7 +358,7 @@
}, },
{ {
"path": "vite.config.ts", "path": "vite.config.ts",
"content": "import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport path from \"path\";\n\nexport default defineConfig(() => ({\n server: {\n host: \"::\",\n port: 8080,\n },\n plugins: [react()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n}));\n", "content": "import { defineConfig } from \"vite\";\nimport dyadComponentTagger from \"@dyad-sh/react-vite-component-tagger\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport path from \"path\";\n\nexport default defineConfig(() => ({\n server: {\n host: \"::\",\n port: 8080,\n },\n plugins: [dyadComponentTagger(), react()],\n resolve: {\n alias: {\n \"@\": path.resolve(__dirname, \"./src\"),\n },\n },\n}));\n",
"force": false "force": false
} }
], ],
......
e2e-tests/snapshots/select_component.spec.ts_deselect-component-1.aria.yml 0 → 100644
浏览文件 @ c1aa6803
- region "Notifications (F8)":
- list
- region "Notifications alt+T"
- heading "Welcome to Your Blank App" [level=1]
- paragraph: Start building your amazing project here!
- link "Made with Dyad":
- /url: https://www.dyad.sh/
- img
- text: Edit with AI h1 src/pages/Index.tsx
\ No newline at end of file
e2e-tests/snapshots/select_component.spec.ts_deselect-component-1.txt 0 → 100644
浏览文件 @ c1aa6803
===
role: user
message: [dump] tc=basic
\ No newline at end of file
e2e-tests/snapshots/select_component.spec.ts_deselect-component-2.aria.yml 0 → 100644
浏览文件 @ c1aa6803
- img
- text: h1 src/pages/Index.tsx:9
- button "Deselect component":
- img
\ No newline at end of file
e2e-tests/snapshots/select_component.spec.ts_deselect-component-3.aria.yml 0 → 100644
浏览文件 @ c1aa6803
- region "Notifications (F8)":
- list
- region "Notifications alt+T"
- heading "Welcome to Your Blank App" [level=1]
- paragraph: Start building your amazing project here!
- link "Made with Dyad":
- /url: https://www.dyad.sh/
\ No newline at end of file
e2e-tests/snapshots/select_component.spec.ts_select-component-1.aria.yml 0 → 100644
浏览文件 @ c1aa6803
- region "Notifications (F8)":
- list
- region "Notifications alt+T"
- heading "Welcome to Your Blank App" [level=1]
- paragraph: Start building your amazing project here!
- link "Made with Dyad":
- /url: https://www.dyad.sh/
- img
- text: Edit with AI h1 src/pages/Index.tsx
\ No newline at end of file
e2e-tests/snapshots/select_component.spec.ts_select-component-2.aria.yml 0 → 100644
浏览文件 @ c1aa6803
- img
- text: h1 src/pages/Index.tsx:9
- button "Deselect component":
- img
\ No newline at end of file
e2e-tests/snapshots/select_component.spec.ts_select-component-2.txt 0 → 100644
浏览文件 @ c1aa6803
===
role: user
message: [dump] tc=basic
\ No newline at end of file
e2e-tests/snapshots/select_component.spec.ts_select-component-3.aria.yml 0 → 100644
浏览文件 @ c1aa6803
- region "Notifications (F8)":
- list
- region "Notifications alt+T"
- heading "Welcome to Your Blank App" [level=1]
- paragraph: Start building your amazing project here!
- link "Made with Dyad":
- /url: https://www.dyad.sh/
\ No newline at end of file
e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-1.aria.yml 0 → 100644
浏览文件 @ c1aa6803
- main:
- heading "Blank page" [level=1]
- link "Made with Dyad":
- /url: https://www.dyad.sh/
- status:
- img
- text: Static route
- button "Hide static indicator":
- img
- alert
- img
- text: Edit with AI h1 src/app/page.tsx
\ No newline at end of file
e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-2.aria.yml 0 → 100644
浏览文件 @ c1aa6803
- img
- text: h1 src/app/page.tsx:7
- button "Deselect component":
- img
\ No newline at end of file
e2e-tests/snapshots/select_component.spec.ts_select-component-next-js-3.aria.yml 0 → 100644
浏览文件 @ c1aa6803
- main:
- heading "Blank page" [level=1]
- link "Made with Dyad":
- /url: https://www.dyad.sh/
- status:
- img
- text: Static route
- button "Hide static indicator":
- img
- alert
\ No newline at end of file
e2e-tests/snapshots/select_component.spec.ts_upgrade-app-to-select-component-2.txt 0 → 100644
浏览文件 @ c1aa6803
===
role: user
message: [dump] make it smaller
Selected component: h1 (file: src/pages/Index.tsx)
Snippet:
```
<header className="flex-1 flex flex-col items-center justify-center px-4 py-16">
<h1 className="text-5xl font-extrabold mb-4 text-foreground text-center"> // <-- EDIT HERE
Launch Your Next Project
</h1>
<p className="text-xl text-muted-foreground mb-8 text-center max-w-xl">
```
\ No newline at end of file
package-lock.json
浏览文件 @ c1aa6803
{ {
"name": "dyad", "name": "dyad",
"version": "0.7.5", "version": "0.8.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "dyad", "name": "dyad",
"version": "0.7.5", "version": "0.8.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ai-sdk/anthropic": "^1.2.8", "@ai-sdk/anthropic": "^1.2.8",
......
packages/@dyad-sh/nextjs-webpack-component-tagger/README.md 0 → 100644
浏览文件 @ c1aa6803
# @dyad-sh/nextjs-webpack-component-tagger
A webpack loader for Next.js that automatically adds `data-dyad-id` and `data-dyad-name` attributes to your React components. This is useful for identifying components in the DOM, for example for testing or analytics.
## Installation
```bash
npm install @dyad-sh/nextjs-webpack-component-tagger
# or
yarn add @dyad-sh/nextjs-webpack-component-tagger
# or
pnpm add @dyad-sh/nextjs-webpack-component-tagger
```
## Usage
Add the loader to your `next.config.js` file:
```ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
webpack: (config) => {
if (process.env.NODE_ENV === "development") {
config.module.rules.push({
test: /\.(jsx|tsx)$/,
exclude: /node_modules/,
enforce: "pre",
use: "@dyad-sh/nextjs-webpack-component-tagger",
});
}
return config;
},
};
export default nextConfig;
```
The loader will automatically add `data-dyad-id` and `data-dyad-name` to all your React components.
The `data-dyad-id` will be a unique identifier for each component instance, in the format `path/to/file.tsx:line:column`.
The `data-dyad-name` will be the name of the component.
## Testing & Publishing
Bump it to an alpha version and test in Dyad app, eg. `"version": "0.0.1-alpha.0",`
Then publish it:
```sh
cd packages/@dyad-sh/nextjs-webpack-component-tagger/ && npm run prepublishOnly && npm publish
```
Update the package version in the nextjs-template repo in your personal fork.
Update the `src/shared/templates.ts` to use your fork of the next.js template, e.g.
```
githubUrl: "https://github.com/wwwillchen/nextjs-template",
```
Run the E2E tests and make sure it passes.
Then, bump to a normal version, e.g. "0.1.0" and then re-publish. We'll try to match the main Dyad app version where possible.
packages/@dyad-sh/nextjs-webpack-component-tagger/package-lock.json 0 → 100644
浏览文件 @ c1aa6803
This source diff could not be displayed because it is too large. You can view the blob instead.
scaffold/package.json
浏览文件 @ c1aa6803
差异被折叠。
scaffold/pnpm-lock.yaml
浏览文件 @ c1aa6803
差异被折叠。
scaffold/vite.config.ts
浏览文件 @ c1aa6803
差异被折叠。
src/atoms/previewAtoms.ts 0 → 100644
浏览文件 @ c1aa6803
差异被折叠。
src/components/AppUpgrades.tsx 0 → 100644
浏览文件 @ c1aa6803
差异被折叠。
src/hooks/useStreamChat.ts
浏览文件 @ c1aa6803
差异被折叠。
src/ipc/handlers/app_upgrade_handlers.ts 0 → 100644
浏览文件 @ c1aa6803
差异被折叠。
src/ipc/ipc_client.ts
浏览文件 @ c1aa6803
差异被折叠。
src/ipc/ipc_host.ts
浏览文件 @ c1aa6803
差异被折叠。
src/ipc/ipc_types.ts
浏览文件 @ c1aa6803
差异被折叠。
src/pages/app-details.tsx
浏览文件 @ c1aa6803
差异被折叠。
src/preload.ts
浏览文件 @ c1aa6803
差异被折叠。
worker/dyad-component-selector-client.js 0 → 100644
浏览文件 @ c1aa6803
差异被折叠。
worker/proxy_server.js
浏览文件 @ c1aa6803
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论