franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

add cloudflare workers support (#326)

Browse Source
This commit is contained in:
Aman Varshney
2025-06-16 22:55:26 +05:30
committed by GitHub
parent 5fc1ba164e
commit b34e94a09e
34 changed files with 556 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

482
apps/web/src/app/(home)/_components/stack-builder.tsx
View File

@@ -81,23 +81,6 @@ const CATEGORY_ORDER: Array<keyof typeof TECH_OPTIONS> = [
"install",
];
const hasWebFrontend = (webFrontend: string[]) =>
webFrontend.some((f) =>
[
"tanstack-router",
"react-router",
"tanstack-start",
"next",
"nuxt",
"svelte",
"solid",
].includes(f),
);
const checkHasNativeFrontend = (nativeFrontend: string[]) =>
nativeFrontend.includes("native-nativewind") ||
nativeFrontend.includes("native-unistyles");
const hasPWACompatibleFrontend = (webFrontend: string[]) =>
webFrontend.some((f) =>
["tanstack-router", "react-router", "solid", "next"].includes(f),
@@ -552,6 +535,60 @@ const analyzeStackCompatibility = (stack: StackState): CompatibilityResult => {
}
}
if (nextStack.runtime === "workers") {
if (nextStack.backend !== "hono") {
notes.runtime.notes.push(
"Cloudflare Workers runtime requires Hono backend. Hono will be selected.",
);
notes.backend.notes.push(
"Cloudflare Workers runtime requires Hono backend. It will be selected.",
);
notes.runtime.hasIssue = true;
notes.backend.hasIssue = true;
nextStack.backend = "hono";
changed = true;
changes.push({
category: "runtime",
message: "Backend set to 'Hono' (required by Cloudflare Workers)",
});
}
if (nextStack.orm !== "drizzle" && nextStack.orm !== "none") {
notes.runtime.notes.push(
"Cloudflare Workers runtime requires Drizzle ORM or no ORM. Drizzle will be selected.",
);
notes.orm.notes.push(
"Cloudflare Workers runtime requires Drizzle ORM or no ORM. Drizzle will be selected.",
);
notes.runtime.hasIssue = true;
notes.orm.hasIssue = true;
nextStack.orm = "drizzle";
changed = true;
changes.push({
category: "runtime",
message: "ORM set to 'Drizzle' (required by Cloudflare Workers)",
});
}
if (nextStack.database === "mongodb") {
notes.runtime.notes.push(
"Cloudflare Workers runtime is not compatible with MongoDB. SQLite will be selected.",
);
notes.database.notes.push(
"MongoDB is not compatible with Cloudflare Workers runtime. SQLite will be selected.",
);
notes.runtime.hasIssue = true;
notes.database.hasIssue = true;
nextStack.database = "sqlite";
changed = true;
changes.push({
category: "runtime",
message:
"Database set to 'SQLite' (MongoDB not compatible with Workers)",
});
}
}
const isNuxt = nextStack.webFrontend.includes("nuxt");
const isSvelte = nextStack.webFrontend.includes("svelte");
const isSolid = nextStack.webFrontend.includes("solid");
@@ -627,7 +664,6 @@ const analyzeStackCompatibility = (stack: StackState): CompatibilityResult => {
const incompatibleExamples: string[] = [];
// Note: Examples are now supported with Native-only frontends
if (
nextStack.database === "none" &&
nextStack.examples.includes("todo")
@@ -709,29 +745,6 @@ const analyzeStackCompatibility = (stack: StackState): CompatibilityResult => {
};
};
const getCompatibilityRules = (stack: StackState) => {
const isConvex = stack.backend === "convex";
const isBackendNone = stack.backend === "none";
const hasWebFrontendSelected = hasWebFrontend(stack.webFrontend);
const hasNativeFrontend = checkHasNativeFrontend(stack.nativeFrontend);
const hasSolid = stack.webFrontend.includes("solid");
const hasNuxt = stack.webFrontend.includes("nuxt");
const hasSvelte = stack.webFrontend.includes("svelte");
return {
isConvex,
isBackendNone,
hasWebFrontend: hasWebFrontendSelected,
hasNativeFrontend,
hasPWACompatible: hasPWACompatibleFrontend(stack.webFrontend),
hasTauriCompatible: hasTauriCompatibleFrontend(stack.webFrontend),
hasNuxtOrSvelteOrSolid: hasNuxt || hasSvelte || hasSolid,
hasSolid,
hasNuxt,
hasSvelte,
};
};
const generateCommand = (stackState: StackState): string => {
let base: string;
switch (stackState.packageManager) {
@@ -863,8 +876,6 @@ const StackBuilder = () => {
[stack],
);
const rules = useMemo(() => getCompatibilityRules(stack), [stack]);
const getRandomStack = () => {
const randomStack: Partial<StackState> = {};
@@ -973,342 +984,6 @@ const StackBuilder = () => {
}
};
const disabledReasons = useMemo(() => {
const reasons = new Map<string, string>();
const addRule = (category: string, techId: string, reason: string) => {
reasons.set(`${category}-${techId}`, reason);
};
for (const category of CATEGORY_ORDER) {
const options = TECH_OPTIONS[category as keyof typeof TECH_OPTIONS] || [];
const catKey = category as keyof StackState;
for (const tech of options) {
const techId = tech.id;
if (rules.isConvex) {
const convexDefaults: Record<string, string | string[]> = {
runtime: "none",
database: "none",
orm: "none",
api: "none",
auth: "false",
dbSetup: "none",
examples: ["todo"],
};
if (
["runtime", "database", "orm", "api", "auth", "dbSetup"].includes(
catKey,
)
) {
const requiredValue = convexDefaults[catKey];
if (catKey === "auth") {
if (techId === "true" && requiredValue === "false") {
addRule(
category,
techId,
"Disabled: Convex backend requires Authentication to be disabled.",
);
}
} else if (String(techId) !== String(requiredValue)) {
addRule(
category,
techId,
`Disabled: Convex backend requires ${getCategoryDisplayName(
catKey,
)} to be '${requiredValue}'.`,
);
}
} else if (catKey === "examples") {
const requiredExamples = convexDefaults.examples as string[];
if (
!requiredExamples.includes(techId) &&
techId !== "none" &&
options.find((o) => o.id === techId)
) {
addRule(
category,
techId,
"Disabled: Convex backend only supports the 'Todo' example.",
);
}
} else if (
catKey === "webFrontend" &&
(techId === "nuxt" || techId === "solid")
) {
addRule(
category,
techId,
`Disabled: Convex backend is not compatible with ${tech.name}.`,
);
}
continue;
}
if (rules.isBackendNone) {
if (catKey === "auth" && techId === "true") {
addRule(
category,
techId,
"Disabled: Authentication requires a backend.",
);
} else if (
["database", "orm", "api", "runtime", "dbSetup"].includes(catKey) &&
techId !== "none"
) {
addRule(
category,
techId,
`Disabled: ${getCategoryDisplayName(
catKey,
)} cannot be selected when 'No Backend' is chosen (will be 'None').`,
);
} else if (catKey === "examples" && techId !== "none") {
addRule(
category,
techId,
"Disabled: Examples cannot be selected when 'No Backend' is chosen.",
);
}
}
if (catKey === "runtime" && techId === "none" && !rules.isConvex) {
addRule(
category,
techId,
"Disabled: Runtime 'None' is only available with Convex backend.",
);
}
if (catKey === "api") {
if (techId !== "none" && (rules.isConvex || rules.isBackendNone)) {
addRule(
category,
techId,
rules.isConvex
? "Disabled: Convex backend requires API to be 'None'."
: "Disabled: No backend requires API to be 'None'.",
);
}
if (techId === "trpc" && rules.hasNuxtOrSvelteOrSolid) {
const frontendName = rules.hasNuxt
? "Nuxt"
: rules.hasSvelte
? "Svelte"
: "Solid";
addRule(
category,
techId,
`Disabled: tRPC is not supported with ${frontendName}. oRPC will be automatically selected.`,
);
}
}
if (catKey === "orm") {
if (
stack.database === "none" &&
techId !== "none" &&
!rules.isConvex
) {
addRule(
category,
techId,
"Disabled: ORM requires a database. Select a database or 'No ORM'.",
);
} else if (stack.database === "mongodb") {
if (
techId !== "prisma" &&
techId !== "mongoose" &&
techId !== "none"
) {
addRule(
category,
techId,
"Disabled: With MongoDB, use Prisma, Mongoose, or No ORM.",
);
}
} else if (["sqlite", "postgres", "mysql"].includes(stack.database)) {
if (techId === "mongoose") {
addRule(
category,
techId,
"Disabled: Mongoose ORM is for MongoDB. Choose a different ORM for relational databases.",
);
}
}
if (stack.dbSetup === "turso" && techId !== "drizzle") {
addRule(
category,
techId,
"Disabled: Turso DB setup requires Drizzle ORM.",
);
} else if (
stack.dbSetup === "prisma-postgres" &&
techId !== "prisma"
) {
addRule(
category,
techId,
"Disabled: Prisma PostgreSQL setup requires Prisma ORM.",
);
} else if (
stack.dbSetup === "mongodb-atlas" &&
techId !== "prisma" &&
techId !== "mongoose"
) {
addRule(
category,
techId,
"Disabled: MongoDB Atlas setup requires Prisma or Mongoose ORM.",
);
}
}
if (catKey === "dbSetup" && techId !== "none") {
if (stack.database === "none" && !rules.isBackendNone) {
addRule(
category,
techId,
"Disabled: A database must be selected to use this DB setup. Select 'Basic Setup' or a database first.",
);
}
if (techId === "turso") {
if (stack.database !== "sqlite" && stack.database !== "none") {
addRule(
category,
techId,
"Disabled: Turso requires SQLite. (Will auto-select if chosen)",
);
}
if (stack.orm !== "drizzle" && stack.orm !== "none") {
addRule(
category,
techId,
"Disabled: Turso requires Drizzle ORM. (Will auto-select if chosen)",
);
}
} else if (techId === "prisma-postgres") {
if (stack.database !== "postgres" && stack.database !== "none") {
addRule(
category,
techId,
"Disabled: Requires PostgreSQL. (Will auto-select if chosen)",
);
}
if (stack.orm !== "prisma" && stack.orm !== "none") {
addRule(
category,
techId,
"Disabled: Requires Prisma ORM. (Will auto-select if chosen)",
);
}
} else if (techId === "mongodb-atlas") {
if (stack.database !== "mongodb" && stack.database !== "none") {
addRule(
category,
techId,
"Disabled: Requires MongoDB. (Will auto-select if chosen)",
);
}
if (
stack.orm !== "prisma" &&
stack.orm !== "mongoose" &&
stack.orm !== "none"
) {
addRule(
category,
techId,
"Disabled: Requires Prisma or Mongoose ORM. (Will auto-select Prisma if chosen)",
);
}
} else if (techId === "neon") {
if (stack.database !== "postgres" && stack.database !== "none") {
addRule(
category,
techId,
"Disabled: Neon requires PostgreSQL. (Will auto-select if chosen)",
);
}
} else if (techId === "supabase") {
if (stack.database !== "postgres" && stack.database !== "none") {
addRule(
category,
techId,
"Disabled: Supabase (local) requires PostgreSQL. (Will auto-select if chosen)",
);
}
}
}
if (catKey === "auth" && techId === "true") {
if (stack.database === "none" && !rules.isBackendNone) {
addRule(
category,
techId,
"Disabled: Authentication requires a database.",
);
}
}
if (catKey === "addons") {
if (techId === "pwa" && !rules.hasPWACompatible) {
addRule(
category,
techId,
"Disabled: PWA addon requires a compatible frontend (e.g., TanStack Router, Solid).",
);
}
if (techId === "tauri" && !rules.hasTauriCompatible) {
addRule(
category,
techId,
"Disabled: Tauri addon requires a compatible frontend (e.g., TanStack Router, Nuxt, Svelte, Solid, Next.js).",
);
}
}
if (catKey === "examples" && techId !== "none") {
if (stack.api === "none" && !rules.isConvex && !rules.isBackendNone) {
addRule(
category,
techId,
"Disabled: Examples require an API. Cannot be selected when API is 'None'.",
);
}
if (
stack.database === "none" &&
techId === "todo" &&
!rules.isConvex
) {
addRule(
category,
techId,
"Disabled: The 'Todo' example requires a database.",
);
}
if (stack.backend === "elysia" && techId === "ai") {
addRule(
category,
techId,
"Disabled: The 'AI' example is not compatible with an Elysia backend.",
);
}
if (rules.hasSolid && techId === "ai") {
addRule(
category,
techId,
"Disabled: The 'AI' example is not compatible with a Solid frontend.",
);
}
}
}
}
return reasons;
}, [stack, rules]);
const selectedBadges = (() => {
const badges: React.ReactNode[] = [];
for (const category of CATEGORY_ORDER) {
@@ -1402,6 +1077,20 @@ const StackBuilder = () => {
useEffect(() => {
if (compatibilityAnalysis.adjustedStack) {
if (compatibilityAnalysis.changes.length > 0) {
if (compatibilityAnalysis.changes.length === 1) {
toast.info(compatibilityAnalysis.changes[0].message, {
duration: 4000,
});
} else if (compatibilityAnalysis.changes.length > 1) {
const message = `${
compatibilityAnalysis.changes.length
} compatibility adjustments made:\n${compatibilityAnalysis.changes
.map((c) => `• ${c.message}`)
.join("\n")}`;
toast.info(message, {
duration: 5000,
});
}
}
setLastChanges(compatibilityAnalysis.changes);
setStack(compatibilityAnalysis.adjustedStack);
@@ -1804,36 +1493,19 @@ const StackBuilder = () => {
isSelected = currentValue === tech.id;
}
const disabledReason = disabledReasons.get(
`${categoryKey}-${tech.id}`,
);
const isDisabled = !!disabledReason;
return (
<Tooltip key={tech.id} delayDuration={100}>
<TooltipTrigger asChild>
<motion.div
className={cn(
"relative rounded border p-2 transition-all",
isDisabled && !isSelected
? "cursor-not-allowed opacity-60"
: "cursor-pointer",
"relative cursor-pointer rounded border p-2 transition-all",
isSelected
? "border-primary bg-primary/10"
: `border-border ${
!isDisabled
? "hover:border-muted hover:bg-muted"
: ""
}`,
: "border-border hover:border-muted hover:bg-muted",
)}
whileHover={
!isDisabled ? { scale: 1.02 } : undefined
}
whileTap={
!isDisabled ? { scale: 0.98 } : undefined
}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() =>
!isDisabled &&
handleTechSelect(
categoryKey as keyof typeof TECH_OPTIONS,
tech.id,
@@ -1862,27 +1534,19 @@ const StackBuilder = () => {
{tech.name}
</span>
</div>
{isDisabled && !isSelected && (
<InfoIcon className="ml-2 h-4 w-4 flex-shrink-0 text-muted-foreground" />
)}
</div>
<p className="mt-0.5 text-muted-foreground text-xs">
{tech.description}
</p>
</div>
</div>
{tech.default && !isSelected && !isDisabled && (
{tech.default && !isSelected && (
<span className="absolute top-1 right-1 ml-2 flex-shrink-0 rounded bg-muted px-1 py-0.5 text-[10px] text-muted-foreground">
Default
</span>
)}
</motion.div>
</TooltipTrigger>
{isDisabled && disabledReason && (
<TooltipContent side="top" align="center">
<p>{disabledReason}</p>
</TooltipContent>
)}
</Tooltip>
);
})}

14
apps/web/src/lib/constant.ts
View File

@@ -132,6 +132,20 @@ export const TECH_OPTIONS = {
icon: "/icon/node.svg",
color: "from-green-400 to-green-600",
},
{
id: "workers",
name: "Cloudflare Workers (beta)",
description: "Serverless runtime for the edge",
icon: "/icon/workers.svg",
color: "from-orange-400 to-orange-600",
},
{
id: "none",
name: "No Runtime",
description: "No specific runtime",
icon: "",
color: "from-gray-400 to-gray-600",
},
],
backend: [
{