Integrate Vinext support across CLI, web, and templates#997
Conversation
Agent-Logs-Url: https://github.com/mendoanjoe/create-better-t-stack/sessions/e7bd3111-a05f-47f8-823a-0790e008ba8c Co-authored-by: mendoanjoe <21172051+mendoanjoe@users.noreply.github.com>
Agent-Logs-Url: https://github.com/mendoanjoe/create-better-t-stack/sessions/e7bd3111-a05f-47f8-823a-0790e008ba8c Co-authored-by: mendoanjoe <21172051+mendoanjoe@users.noreply.github.com>
Agent-Logs-Url: https://github.com/mendoanjoe/create-better-t-stack/sessions/e7bd3111-a05f-47f8-823a-0790e008ba8c Co-authored-by: mendoanjoe <21172051+mendoanjoe@users.noreply.github.com>
feat: add Vinext frontend support
|
@mendoanjoe is attempting to deploy a commit to the Better T Stack Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
This PR adds first-class support for the vinext web frontend across the type system, CLI validation/prompts, web stack builder UI, and the template generator—treating it as “Next-like” for compatibility and recommendations.
Changes:
- Extend supported frontend enums/constants and CLI/web UI option lists to include
vinext. - Update template generation + dependency/env/deploy helpers to recognize
vinextin “Next-like” branches and fullstack flows. - Add a new Vinext web app template (Vite/Vinext config + app scaffolding) and expand test coverage to include
vinext.
Reviewed changes
Copilot reviewed 43 out of 44 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/types/src/types.ts | Adds vinext to the WebFrontend type union. |
| packages/types/src/schemas.ts | Adds vinext to the zod frontend enum schema. |
| packages/types/src/constants.ts | Adds vinext to desktop web frontend constants. |
| packages/template-generator/templates/frontend/react/vinext/vite.config.ts.hbs | New Vinext Vite config template. |
| packages/template-generator/templates/frontend/react/vinext/tsconfig.json.hbs | New Vinext TS config template. |
| packages/template-generator/templates/frontend/react/vinext/src/components/theme-provider.tsx.hbs | New Vinext theme provider component template. |
| packages/template-generator/templates/frontend/react/vinext/src/components/providers.tsx.hbs | New Vinext app providers wiring (Convex / React Query / Clerk bridges). |
| packages/template-generator/templates/frontend/react/vinext/src/components/mode-toggle.tsx.hbs | New Vinext dark mode toggle component template. |
| packages/template-generator/templates/frontend/react/vinext/src/app/page.tsx.hbs | New Vinext home page template with health check hooks. |
| packages/template-generator/templates/frontend/react/vinext/src/app/layout.tsx.hbs | New Vinext root layout template (metadata, fonts, providers). |
| packages/template-generator/templates/frontend/react/vinext/src/app/favicon.ico | Adds a favicon asset for the Vinext template. |
| packages/template-generator/templates/frontend/react/vinext/postcss.config.mjs.hbs | PostCSS config for Tailwind in the Vinext template. |
| packages/template-generator/templates/frontend/react/vinext/package.json.hbs | Vinext template package manifest and scripts. |
| packages/template-generator/src/template-handlers/payments.ts | Treats vinext as React-web and maps payment templates to Next templates. |
| packages/template-generator/src/template-handlers/packages.ts | Recognizes vinext as a web frontend for env/ui package generation. |
| packages/template-generator/src/template-handlers/frontend.ts | Enables generating the Vinext frontend template in the standard frontend flow. |
| packages/template-generator/src/template-handlers/examples.ts | Adds vinext to example template routing and fullstack example eligibility. |
| packages/template-generator/src/template-handlers/auth.ts | Adds vinext to auth template routing and fullstack auth template routing. |
| packages/template-generator/src/template-handlers/api.ts | Includes vinext in fullstack API template routing logic. |
| packages/template-generator/src/template-handlers/addons.ts | Enables PWA addon templates for vinext using the Next template variant. |
| packages/template-generator/src/processors/turbo-generator.ts | Treats vinext like Next for build output globs. |
| packages/template-generator/src/processors/readme-generator.ts | Updates README generation to name and describe Vinext and adjust Clerk guidance. |
| packages/template-generator/src/processors/env-vars.ts | Uses Next-style env var keys for vinext (e.g., NEXT_PUBLIC_*). |
| packages/template-generator/src/processors/env-deps.ts | Adds Next env tooling deps for vinext and adjusts core-env inclusion rules. |
| packages/template-generator/src/processors/deploy-deps.ts | Treats vinext as Next-like for deploy dependency injection. |
| packages/template-generator/src/processors/auth-plugins.ts | Adds Next cookies auth plugin for vinext in self backend mode. |
| packages/template-generator/src/processors/auth-deps.ts | Updates auth dependency logic to treat vinext as React web auth-forms capable. |
| packages/template-generator/src/processors/api-deps.ts | Adds vinext to React-web detection and adjusts API package deps for self+next-like. |
| packages/template-generator/src/processors/alchemy-plugins.ts | Treats vinext as Next-like for Cloudflare deployment plugin selection. |
| apps/web/src/lib/stack-utils.ts | Adds Vinext to display names and maps self-vinext to CLI backend self. |
| apps/web/src/lib/constant.ts | Adds Vinext as a selectable UI option and introduces a Vinext preset stack. |
| apps/web/src/app/(home)/new/_components/utils.ts | Updates compatibility logic and disabled reasons to include Vinext/self-vinext. |
| apps/cli/test/frontend.test.ts | Adds vinext to frontend test matrices and Next-like fullstack rules. |
| apps/cli/test/backend-runtime.test.ts | Updates expected self-backend error message to include Vinext. |
| apps/cli/test/auth.test.ts | Adds vinext into auth compatibility test matrices. |
| apps/cli/test/api.test.ts | Adds vinext to React frontend API test matrix. |
| apps/cli/test/addons.test.ts | Adds vinext to PWA-compatible frontend test matrix. |
| apps/cli/src/utils/config-validation.ts | Updates Convex Better Auth error messaging to list Vinext. |
| apps/cli/src/utils/compatibility.ts | Adds vinext to the supported web frameworks list. |
| apps/cli/src/utils/compatibility-rules.ts | Adds vinext to fullstack-compatible frontends and related validation messages. |
| apps/cli/src/prompts/frontend.ts | Adds Vinext as a selectable frontend choice in CLI prompts. |
| apps/cli/src/helpers/core/post-installation.ts | Updates Clerk quickstart URLs/instructions to treat Vinext like Next. |
| apps/cli/src/helpers/addons/skills-setup.ts | Includes Vinext in React-based checks and Next-like skill source recommendations. |
| apps/cli/src/helpers/addons/mcp-setup.ts | Includes Vinext in React-based checks and Next-devtools MCP recommendation. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const hasReactWeb = config.frontend.some((f) => | ||
| ["tanstack-router", "react-router", "tanstack-start", "next"].includes(f), | ||
| ["tanstack-router", "react-router", "tanstack-start", "next", "vinext"].includes(f), | ||
| ); |
There was a problem hiding this comment.
vinext is now treated as a React web frontend, which means the shared auth/*/web/react/base templates will be applied for Vinext projects. Some of those base templates branch on includes frontend "next" (e.g., picking NEXT_PUBLIC_SERVER_URL vs VITE_SERVER_URL), so Vinext will currently follow the non-Next path and generate incorrect env var usage. Please update the relevant base templates to treat vinext like next (or add Vinext-specific overrides) to keep generated code consistent with the updated env var processors.
| api: API, | ||
| backend: Backend, | ||
| frontendType: FrontendType, | ||
| frontend: Frontend[], |
There was a problem hiding this comment.
addWebClientDeps now takes a frontend parameter, but it isn't used in the function body. With the repo's oxlint checks, this is likely to be flagged as an unused parameter. Either remove the parameter (and the extra argument at the call site), or rename it to _frontend/use it for Vinext-specific branching if that was the intention.
| frontend: Frontend[], | |
| _frontend: Frontend[], |
|
@copilot apply changes based on the comments in this thread |
WalkthroughThis PR introduces support for a new "vinext" frontend framework across the project. Changes include adding vinext to type schemas and constants, updating CLI helpers and compatibility rules to treat vinext similarly to Next.js for auth/addon detection, extending template generators to handle vinext, adding vinext template files, creating a vinext preset in the web UI, and updating tests to cover vinext scenarios. Changes
Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
packages/template-generator/src/processors/deploy-deps.ts (1)
38-44:⚠️ Potential issue | 🔴 CriticalRemove vinext from the
@opennextjs/cloudflaredeployment logic or use separate handling for vinext Cloudflare deployment.
@opennextjs/cloudflareis not compatible with vinext. While both support Cloudflare Workers deployment, they use different adapters:
- Next.js uses
@opennextjs/cloudflare(a Next.js build-output adapter)- vinext uses its own
vinext deploymechanism with@cloudflare/vite-pluginEither remove
vinextfrom the condition at line 38, or add separate logic to conditionally set@cloudflare/vite-pluginfor vinext deployments instead of@opennextjs/cloudflare.packages/template-generator/src/processors/alchemy-plugins.ts (1)
11-19:⚠️ Potential issue | 🟠 MajorRemove vinext from the Next.js Cloudflare plugin route.
Vinext is a separate runtime for Cloudflare Workers with its own deployment mechanism (
vinext deploy), distinct from OpenNext. Routing vinext throughprocessNextAlchemyincorrectly generatesopen-next.config.ts, which is specific to Next.js deployments. Vinext requires separate handling and should not be grouped with Next.js on line 11.packages/template-generator/src/template-handlers/packages.ts (1)
19-30:⚠️ Potential issue | 🔴 CriticalAdd explicit
vinexthandling to the web.ts.hbs template to useNEXT_PUBLIC_*prefix.Vinext was added to the
hasWebFrontendcondition (line 25), but the template atpackages/env/src/web.ts.hbsdoes not explicitly handle it. Since vinext follows Next.js semantics and requires theNEXT_PUBLIC_*env prefix, adding it without updating the template will cause the generated config to incorrectly use the defaultVITE_*prefix instead, breaking environment variable resolution.Update the template conditionals to treat vinext like next:
{{`#if` (or (includes frontend "next") (includes frontend "vinext"))}}packages/template-generator/src/processors/auth-deps.ts (1)
42-56:⚠️ Potential issue | 🟠 MajorMissing
hasVinextcheck for Clerk dependency in Convex path.
hasVinextis declared on line 33 but not used in the Clerk dependency selection. Whenvinextis selected with Convex backend and Clerk auth, the@clerk/nextjsdependency won't be added, causing a runtime error.Compare with
processStandardAuthDepsat line 170 which correctly useshasNextJs || hasVinext.🐛 Proposed fix
if (auth === "clerk") { if (webExists) { - if (hasNextJs) { + if (hasNextJs || hasVinext) { addPackageDependency({ vfs, packagePath: webPath, dependencies: ["@clerk/nextjs"] }); } else if (hasReactRouter) {
🧹 Nitpick comments (7)
apps/cli/test/auth.test.ts (1)
260-266: Add a focusedvinext + selfBetter Auth plugin test.Line 265 adds vinext to broad compatibility coverage, but the new behavior in auth plugin processing is specifically
nextCookies()insertion for self backend. A dedicated assertion (mirroring the existing Next self test) would protect this branch from regressions.
Based on learnings: Add or update tests with behavior changes, especially prompt flows, template output, and config validation.apps/cli/src/helpers/addons/skills-setup.ts (1)
122-129: Optional DRY cleanup: centralize “next-like” frontend detection.
next || vinextis repeated in multiple spots; consider a small helper (e.g.,hasNextLikeFrontend) to reduce drift risk in future updates.Also applies to: 149-150, 250-251
apps/cli/src/helpers/addons/mcp-setup.ts (1)
61-68: Consider extractinghasReactBasedFrontendto a shared utility.This function is duplicated in
skills-setup.ts(see context snippet 1). Both files maintain identical lists of React-based frontends. A shared helper incompatibility.tsalongsideWEB_FRAMEWORKSwould reduce duplication and ensure consistency when adding new frontends.packages/template-generator/src/processors/api-deps.ts (1)
147-153: Unusedfrontendparameter inaddWebClientDeps.The
frontendparameter was added to the function signature at line 152 but is never used within the function body. The function only usesfrontendTypefor all its logic. If this parameter was added for future use, consider removing it until needed to avoid dead code.♻️ Proposed fix to remove unused parameter
function addWebClientDeps( vfs: VirtualFileSystem, api: API, backend: Backend, frontendType: FrontendType, - frontend: Frontend[], ): void {And update the call site at line 44:
- addWebClientDeps(vfs, api, backend, frontendType, frontend); + addWebClientDeps(vfs, api, backend, frontendType);packages/template-generator/src/processors/readme-generator.ts (1)
26-28: Consider consolidating the repeated condition.Lines 27-28 both check for Next.js-like frameworks and return the same Clerk quickstart URL. This could be consolidated, though it's minor.
♻️ Proposed consolidation
function getClerkQuickstartUrl(frontend: ProjectConfig["frontend"]): string { - if (frontend.includes("next")) return "https://clerk.com/docs/nextjs/getting-started/quickstart"; - if (frontend.includes("vinext")) return "https://clerk.com/docs/nextjs/getting-started/quickstart"; + if (frontend.includes("next") || frontend.includes("vinext")) { + return "https://clerk.com/docs/nextjs/getting-started/quickstart"; + } if (frontend.includes("react-router")) {apps/web/src/lib/constant.ts (1)
74-81: Consider using a distinct icon for vinext.The vinext frontend option uses
nextjs.svgas its icon (line 78). While vinext implements the Next.js API surface, using the same icon might confuse users. Consider using a unique icon or adding a visual indicator to differentiate it from Next.js in the UI.packages/template-generator/templates/frontend/react/vinext/src/components/providers.tsx.hbs (1)
99-104: Deduplicate identicalchildrenrendering in API branches.Both
orpcandtrpcbranches render the same content; a single render keeps this template simpler.♻️ Proposed simplification
- {{`#if` (eq api "orpc")}} - {children} - {{/if}} - {{`#if` (eq api "trpc")}} - {children} - {{/if}} + {children}
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 7cf6099d-357d-40b5-8592-b5896c73375b
⛔ Files ignored due to path filters (1)
packages/template-generator/templates/frontend/react/vinext/src/app/favicon.icois excluded by!**/*.ico
📒 Files selected for processing (43)
apps/cli/src/helpers/addons/mcp-setup.tsapps/cli/src/helpers/addons/skills-setup.tsapps/cli/src/helpers/core/post-installation.tsapps/cli/src/prompts/frontend.tsapps/cli/src/utils/compatibility-rules.tsapps/cli/src/utils/compatibility.tsapps/cli/src/utils/config-validation.tsapps/cli/test/addons.test.tsapps/cli/test/api.test.tsapps/cli/test/auth.test.tsapps/cli/test/backend-runtime.test.tsapps/cli/test/frontend.test.tsapps/web/src/app/(home)/new/_components/utils.tsapps/web/src/lib/constant.tsapps/web/src/lib/stack-utils.tspackages/template-generator/src/processors/alchemy-plugins.tspackages/template-generator/src/processors/api-deps.tspackages/template-generator/src/processors/auth-deps.tspackages/template-generator/src/processors/auth-plugins.tspackages/template-generator/src/processors/deploy-deps.tspackages/template-generator/src/processors/env-deps.tspackages/template-generator/src/processors/env-vars.tspackages/template-generator/src/processors/readme-generator.tspackages/template-generator/src/processors/turbo-generator.tspackages/template-generator/src/template-handlers/addons.tspackages/template-generator/src/template-handlers/api.tspackages/template-generator/src/template-handlers/auth.tspackages/template-generator/src/template-handlers/examples.tspackages/template-generator/src/template-handlers/frontend.tspackages/template-generator/src/template-handlers/packages.tspackages/template-generator/src/template-handlers/payments.tspackages/template-generator/templates/frontend/react/vinext/package.json.hbspackages/template-generator/templates/frontend/react/vinext/postcss.config.mjs.hbspackages/template-generator/templates/frontend/react/vinext/src/app/layout.tsx.hbspackages/template-generator/templates/frontend/react/vinext/src/app/page.tsx.hbspackages/template-generator/templates/frontend/react/vinext/src/components/mode-toggle.tsx.hbspackages/template-generator/templates/frontend/react/vinext/src/components/providers.tsx.hbspackages/template-generator/templates/frontend/react/vinext/src/components/theme-provider.tsx.hbspackages/template-generator/templates/frontend/react/vinext/tsconfig.json.hbspackages/template-generator/templates/frontend/react/vinext/vite.config.ts.hbspackages/types/src/constants.tspackages/types/src/schemas.tspackages/types/src/types.ts
| describe("Frontend-Specific Addons", () => { | ||
| describe("PWA Addon", () => { | ||
| const pwaCompatibleFrontends = ["tanstack-router", "react-router", "solid", "next"]; | ||
| const pwaCompatibleFrontends = ["tanstack-router", "react-router", "solid", "next", "vinext"]; |
There was a problem hiding this comment.
Update the expected PWA validation message to include vinext.
After adding vinext to compatible frontends, this exact assertion string is now stale and can fail even when behavior is correct.
💡 Suggested fix
- "pwa addon requires one of these frontends: tanstack-router, react-router, solid, next",
+ "pwa addon requires one of these frontends: tanstack-router, react-router, solid, next, vinext",Also applies to: 101-104
| if (frontend.includes("next") || frontend.includes("vinext")) { | ||
| buildOutputs.push(".next/**"); | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
What directory/directories does vinext build generate by default for production artifacts?
💡 Result:
By default, vinext build outputs production artifacts into a top-level dist/ directory, with at least:
dist/client/(static client assets)dist/server/(server bundle / handlers)
[1][2]
Fix Turbo output path for vinext projects.
Line 65–67 incorrectly treats vinext the same as Next.js, pushing .next/** to buildOutputs. However, vinext build outputs to dist/client/ and dist/server/ by default, not .next/. This breaks Turbo's cache tracking for vinext builds. Separate the vinext case to push the correct output path.
| <section className="rounded-lg border p-4"> | ||
| <h2 className="mb-2 font-medium">API Status</h2> | ||
| {{#if (eq backend "convex")}} | ||
| <div className="flex items-center gap-2"> | ||
| <div | ||
| className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`} | ||
| /> | ||
| <span className="text-sm text-muted-foreground"> | ||
| {healthCheck === undefined | ||
| ? "Checking..." | ||
| : healthCheck === "OK" | ||
| ? "Connected" | ||
| : "Error"} | ||
| </span> | ||
| </div> | ||
| {{else}} | ||
| {{#unless (eq api "none")}} | ||
| <div className="flex items-center gap-2"> | ||
| <div | ||
| className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`} | ||
| /> | ||
| <span className="text-sm text-muted-foreground"> | ||
| {healthCheck.isLoading | ||
| ? "Checking..." | ||
| : healthCheck.data | ||
| ? "Connected" | ||
| : "Disconnected"} | ||
| </span> | ||
| </div> | ||
| {{/unless}} | ||
| {{/if}} | ||
| </section> |
There was a problem hiding this comment.
Render a non-empty state when no API is configured.
For non-convex + api: "none", the card still shows “API Status” but no content. Add an explicit empty-state message (or hide the section) to avoid a blank panel.
💡 Proposed fix
<section className="rounded-lg border p-4">
<h2 className="mb-2 font-medium">API Status</h2>
{{`#if` (eq backend "convex")}}
<div className="flex items-center gap-2">
@@
</div>
{{else}}
{{`#unless` (eq api "none")}}
<div className="flex items-center gap-2">
@@
</div>
+ {{else}}
+ <p className="text-sm text-muted-foreground">Not configured</p>
{{/unless}}
{{/if}}
</section>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <section className="rounded-lg border p-4"> | |
| <h2 className="mb-2 font-medium">API Status</h2> | |
| {{#if (eq backend "convex")}} | |
| <div className="flex items-center gap-2"> | |
| <div | |
| className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`} | |
| /> | |
| <span className="text-sm text-muted-foreground"> | |
| {healthCheck === undefined | |
| ? "Checking..." | |
| : healthCheck === "OK" | |
| ? "Connected" | |
| : "Error"} | |
| </span> | |
| </div> | |
| {{else}} | |
| {{#unless (eq api "none")}} | |
| <div className="flex items-center gap-2"> | |
| <div | |
| className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`} | |
| /> | |
| <span className="text-sm text-muted-foreground"> | |
| {healthCheck.isLoading | |
| ? "Checking..." | |
| : healthCheck.data | |
| ? "Connected" | |
| : "Disconnected"} | |
| </span> | |
| </div> | |
| {{/unless}} | |
| {{/if}} | |
| </section> | |
| <section className="rounded-lg border p-4"> | |
| <h2 className="mb-2 font-medium">API Status</h2> | |
| {{`#if` (eq backend "convex")}} | |
| <div className="flex items-center gap-2"> | |
| <div | |
| className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`} | |
| /> | |
| <span className="text-sm text-muted-foreground"> | |
| {healthCheck === undefined | |
| ? "Checking..." | |
| : healthCheck === "OK" | |
| ? "Connected" | |
| : "Error"} | |
| </span> | |
| </div> | |
| {{else}} | |
| {{`#unless` (eq api "none")}} | |
| <div className="flex items-center gap-2"> | |
| <div | |
| className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`} | |
| /> | |
| <span className="text-sm text-muted-foreground"> | |
| {healthCheck.isLoading | |
| ? "Checking..." | |
| : healthCheck.data | |
| ? "Connected" | |
| : "Disconnected"} | |
| </span> | |
| </div> | |
| {{else}} | |
| <p className="text-sm text-muted-foreground">Not configured</p> | |
| {{/unless}} | |
| {{/if}} | |
| </section> |
| className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`} | ||
| /> | ||
| <span className="text-sm text-muted-foreground"> | ||
| {healthCheck.isLoading | ||
| ? "Checking..." | ||
| : healthCheck.data | ||
| ? "Connected" | ||
| : "Disconnected"} |
There was a problem hiding this comment.
Use a neutral dot color while health check is loading.
Current non-convex indicator shows red during "Checking...", which reads as disconnected before the query resolves.
🎨 Proposed fix
- className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
+ className={`h-2 w-2 rounded-full ${
+ healthCheck.isLoading
+ ? "bg-orange-400"
+ : healthCheck.data
+ ? "bg-green-500"
+ : "bg-red-500"
+ }`}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`} | |
| /> | |
| <span className="text-sm text-muted-foreground"> | |
| {healthCheck.isLoading | |
| ? "Checking..." | |
| : healthCheck.data | |
| ? "Connected" | |
| : "Disconnected"} | |
| className={`h-2 w-2 rounded-full ${ | |
| healthCheck.isLoading | |
| ? "bg-orange-400" | |
| : healthCheck.data | |
| ? "bg-green-500" | |
| : "bg-red-500" | |
| }`} | |
| /> | |
| <span className="text-sm text-muted-foreground"> | |
| {healthCheck.isLoading | |
| ? "Checking..." | |
| : healthCheck.data | |
| ? "Connected" | |
| : "Disconnected"} |
| "plugins": [ | ||
| { | ||
| "name": "vinext" | ||
| } | ||
| ], |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Does the vinext framework (Vite-based Next.js alternative) provide a TypeScript plugin named "vinext"?
💡 Result:
No. vinext is distributed as a Vite plugin / CLI package (npm install vinext, used as vinext() in vite.config.ts), not as a TypeScript language-service plugin named "vinext". The official docs and repo describe it specifically as a Vite plugin that reimplements the Next.js API surface, with TypeScript support provided via normal .d.ts typings rather than a TS server plugin. [1], [2]
Sources: [1] vinext migration guide (lists vinext as “the main plugin”) https://www.mintlify.com/cloudflare/vinext/guides/migration, [2] cloudflare/vinext README (describes vinext as a Vite plugin) https://github.com/cloudflare/vinext
Remove the "vinext" TypeScript plugin from tsconfig.json.
Vinext is a Vite plugin, not a TypeScript language-service plugin. The template references a non-existent TypeScript plugin at line 20, which would cause TypeScript to fail silently or error. The "plugins" section including the "vinext" entry should be removed unless vinext provides an actual TypeScript language-service plugin—which it does not according to the official documentation.
|
@copilot fix |
This pull request adds support for the
vinextfrontend (a Next.js API-compatible framework built on Vite) throughout the CLI, configuration, validation, and web UI. All relevant compatibility checks, recommendations, and error messages have been updated to treatvinextsimilarly tonext. Test coverage is extended to ensure correct handling ofvinextin all flows.Core CLI and Configuration Updates:
vinextas a supported web frontend inWEB_FRAMEWORKSand all compatibility lists, allowing it to be selected and validated as a primary frontend option. [1] [2] [3]vinextwherevernextis referenced, ensuring consistent treatment in backend compatibility, Better Auth, and other constraints. [1] [2] [3] [4]Feature and Addon Recommendations:
vinextas a React-based frontend and to recommend appropriate addons and sources (e.g.,next-devtools,vercel-labs/next-skills) forvinextprojects. [1] [2] [3] [4] [5]Web UI and User Guidance:
vinextas a selectable frontend in the web UI, updated PWA compatibility, and included it in all relevant backend, deployment, and authentication requirement messages. Also, added logic to auto-selectvinextwhen fullstack backend is chosen, and to provide specific disabled reasons for incompatible combinations. [1] [2] [3] [4] [5] [6] [7]Clerk and Auth Integration:
vinext, ensuring environment variables and documentation links are correct for bothnextandvinextprojects. [1] [2] [3]Test Coverage:
vinextin all relevant frontend, backend, API, and authentication scenarios, ensuring robust validation and correct behavior. [1] [2] [3] [4] [5] [6] [7] [8] [9]Summary by CodeRabbit
Release Notes