implement scaffolding vite react-router app

build.config.ts

@@ -15,7 +15,7 @@ export default defineBuildConfig({
     emitCJS: false,
     esbuild: {
       exclude: ["**/*.test.ts"],
-      target: "es2022",
+      target: "es2023",
       minify: true,
     },
   },

cspell.json

@@ -41,6 +41,7 @@
     "Clooney",
     "cmder",
     "Codemod",
+    "commonmark",
     "confirmtoggle",
     "continuar",
     "cristal",
@@ -51,6 +52,7 @@
     "defu",
     "deno",
     "derhuerst",
+    "destr",
     "Deutsch",
     "dflt",
     "Doesnt",
@@ -165,6 +167,7 @@
     "Vous",
     "vsprintf",
     "Whoo",
+    "worktree",
     "Wybrałeś",
     "Yadxh",
     "ytrewq",

eslint.config.js

@@ -44,8 +44,12 @@ const config = tseslint.config(
       "@typescript-eslint/no-unnecessary-condition": "off",
       "@typescript-eslint/no-unsafe-member-access": "off",
       "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
       "@typescript-eslint/no-unsafe-assignment": "off",
       "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
       "@typescript-eslint/consistent-type-definitions": ["error", "type"],
       "@typescript-eslint/consistent-type-imports": [
         "warn",

package.json

@@ -23,7 +23,8 @@
     "attw": "bunx @arethetypeswrong/cli",
     "unpub": "npm unpublish",
     "test": "vitest",
-    "knip": "knip"
+    "knip": "knip",
+    "latest": "bun update --latest && bun add @trpc/client@next @trpc/next@next @trpc/react-query@next @trpc/server@next"
   },
   "publishConfig": {
     "access": "public"
@@ -48,13 +49,16 @@
   "keywords": ["cli", "reliverse"],
   "license": "MIT",
   "dependencies": {
+    "@clack/core": "^0.4.0",
+    "@clack/prompts": "^0.9.0",
     "@libsql/client": "^0.14.0",
     "@octokit/rest": "^21.0.2",
     "@reliverse/core": "^0.1.0",
     "@reliverse/fs": "^0.6.0",
-    "@reliverse/prompts": "^1.4.3",
+    "@reliverse/prompts": "^1.4.4",
     "@sinclair/typebox": "^0.34.13",
     "@vercel/sdk": "^1.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "async-listen": "^3.0.1",
     "better-sqlite3": "^11.7.0",
     "c12": "^2.0.1",
@@ -68,81 +72,84 @@
     "execa": "^9.5.2",
     "fs-extra": "^11.2.0",
     "globby": "^14.0.2",
+    "gradient-string": "^3.0.0",
     "magic-regexp": "^0.8.0",
     "nanoid": "^5.0.9",
     "node-emoji": "^2.2.0",
     "nypm": "^0.4.1",
-    "octokit": "^4.0.2",
+    "octokit": "^4.0.3",
     "ofetch": "^1.4.1",
     "open": "^10.1.0",
     "ora": "^8.1.1",
     "pathe": "^1.1.2",
     "picocolors": "^1.1.1",
-    "pkg-types": "^1.2.1",
+    "pkg-types": "^1.3.0",
     "querystring": "^0.2.1",
     "random-words": "^2.0.1",
+    "react-router": "^7.1.1",
+    "react-router-dom": "^7.1.1",
     "simple-git": "^3.27.0",
+    "sort-package-json": "^2.12.0",
     "std-env": "^3.8.0",
-    "tasuku": "^2.0.1",
-    "@clack/core": "^0.3.4",
-    "@clack/prompts": "^0.6.3",
-    "chalk": "5.2.0",
-    "commander": "^10.0.1",
-    "gradient-string": "^2.0.2",
-    "sort-package-json": "^2.10.0"
+    "tasuku": "^2.0.1"
   },
   "devDependencies": {
+    "@auth/drizzle-adapter": "^1.7.4",
+    "@auth/prisma-adapter": "^2.7.4",
     "@biomejs/biome": "^1.9.4",
     "@cspell/dict-npm": "^5.1.20",
     "@eslint/js": "^9.17.0",
     "@eslint/json": "^0.9.0",
     "@eslint/markdown": "^6.2.1",
+    "@planetscale/database": "^1.19.0",
+    "@prisma/adapter-planetscale": "^6.1.0",
+    "@prisma/client": "^6.1.0",
     "@stylistic/eslint-plugin": "^2.12.1",
-    "@swc/core": "^1.10.1",
+    "@swc/core": "^1.10.3",
+    "@t3-oss/env-nextjs": "^0.11.1",
+    "@tanstack/react-query": "^5.62.11",
     "@total-typescript/ts-reset": "^0.6.1",
+    "@trpc/client": "^11.0.0-rc.678",
+    "@trpc/next": "^11.0.0-rc.678",
+    "@trpc/react-query": "^11.0.0-rc.678",
+    "@trpc/server": "^11.0.0-rc.678",
     "@types/better-sqlite3": "^7.6.12",
     "@types/bun": "^1.1.14",
     "@types/cross-spawn": "^6.0.6",
     "@types/eslint__js": "^8.42.3",
     "@types/fs-extra": "^11.0.4",
+    "@types/gradient-string": "^1.1.6",
     "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/strip-comments": "^2.0.4",
     "drizzle-kit": "^0.30.1",
     "eslint": "^9.17.0",
     "eslint-plugin-perfectionist": "^4.4.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
     "knip": "^5.41.1",
     "magicast": "^0.3.5",
+    "mysql2": "^3.12.0",
+    "next": "^15.1.3",
+    "next-auth": "^4.24.11",
+    "postgres": "^3.4.5",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prisma": "^6.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "superjson": "^2.2.2",
+    "tailwindcss": "^3.4.17",
+    "tsup": "^8.3.5",
     "tsx": "^4.19.2",
+    "type-fest": "^4.31.0",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.2",
-    "unbuild": "^3.0.1",
+    "unbuild": "^3.2.0",
+    "vite-plugin-pages": "^0.32.4",
     "vitest": "^2.1.8",
-    "@auth/drizzle-adapter": "^1.1.0",
-    "@auth/prisma-adapter": "^1.6.0",
-    "@planetscale/database": "^1.19.0",
-    "@prisma/adapter-planetscale": "^5.14.0",
-    "@prisma/client": "^5.14.0",
-    "@t3-oss/env-nextjs": "^0.10.1",
-    "@tanstack/react-query": "^5.49.2",
-    "@trpc/client": "11.0.0-rc.441",
-    "@trpc/next": "11.0.0-rc.441",
-    "@trpc/react-query": "11.0.0-rc.441",
-    "@trpc/server": "11.0.0-rc.441",
-    "@types/gradient-string": "^1.1.6",
-    "mysql2": "^3.11.0",
-    "next": "^14.2.4",
-    "next-auth": "^4.24.7",
-    "postgres": "^3.4.4",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "prisma": "^5.14.0",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "superjson": "^2.2.1",
-    "tailwindcss": "^3.4.3",
-    "tsup": "^6.7.0",
-    "type-fest": "^3.13.1",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   }
 }

src/app/db/constants.ts

@@ -1,5 +1,9 @@
+import path from "pathe";
+
 export const isVerboseEnabled = false;
 
+export const PKG_ROOT = path.resolve(__dirname, "../../../..");
+
 // File conflict settings, useful for prompting user to resolve conflicts during project setup
 export const FILE_CONFLICTS = [
   {

src/app/db/schema.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-deprecated */
 import { sqliteTable, text } from "drizzle-orm/sqlite-core";
 
 export const configKeysTable = sqliteTable("config_keys", {

src/app/menu/buildBrandNewThing.ts

@@ -5,17 +5,20 @@ import {
 } from "@reliverse/prompts";
 import pc from "picocolors";
 
-import { REPO_URLS } from "~/app/db/constants.js";
+import { DEFAULT_APP_NAME, REPO_URLS } from "~/app/db/constants.js";
 import { type ReliverseConfig, type TemplateOption } from "~/types.js";
 import { relinka } from "~/utils/console.js";
 
+import type { CliResults } from "./show-composer-mode/opts.js";
+
 import {
   randomProjectFrameworkTitle,
   randomInitialMessage,
   randomWebsiteCategoryTitle,
   randomWebsiteDetailsTitle,
 } from "../db/messages.js";
 import { createWebProject } from "./createWebProject.js";
+import { showComposerMode } from "./show-composer-mode/mod.js";
 
 const TEMPLATE_OPTIONS = {
   "blefnk/relivator": {
@@ -264,37 +267,64 @@ export async function buildBrandNewThing(
     projectFramework = result;
   }
 
-  await selectPrompt({
-    endTitle,
-    title:
-      randomWebsiteCategoryTitle[
-        Math.floor(Math.random() * randomWebsiteCategoryTitle.length)
-      ]!,
-    options: [
-      { label: "E-commerce", value: "e-commerce" },
-      {
-        label: "...",
-        hint: pc.dim("coming soon"),
-        value: "coming-soon",
-        disabled: true,
-      },
-    ],
-  });
-
   // Should cli continue with recommended or offline mode?
   const shouldContinueWithRecommended = await selectPrompt({
     endTitle,
     title: "Should I continue with advanced or simple mode?",
     options: [
-      { label: "Advanced", value: "recommended", hint: "recommended" },
-      { label: "Simple", value: "offline", hint: "offline" },
+      {
+        label: "Advanced",
+        value: "recommended",
+        hint: pc.greenBright("✨ recommended"),
+      },
+      {
+        label: "Simple",
+        value: "offline",
+        hint: pc.redBright("🚨 experimental, offline"),
+      },
     ],
   });
 
   if (shouldContinueWithRecommended === "offline") {
-    relinka("error", "Offline mode not implemented yet");
+    const cliResults: CliResults = {
+      appName: DEFAULT_APP_NAME,
+      packages: [],
+      flags: {
+        noGit: false,
+        noInstall: false,
+        default: false,
+        importAlias: "",
+        framework: true,
+        CI: false,
+        tailwind: false,
+        trpc: false,
+        prisma: false,
+        drizzle: false,
+        nextAuth: false,
+        dbProvider: "postgres",
+      },
+      databaseProvider: "postgres",
+    };
+    await showComposerMode(cliResults);
     return;
   } else {
+    await selectPrompt({
+      endTitle,
+      title:
+        randomWebsiteCategoryTitle[
+          Math.floor(Math.random() * randomWebsiteCategoryTitle.length)
+        ]!,
+      options: [
+        { label: "E-commerce", value: "e-commerce" },
+        {
+          label: "...",
+          hint: pc.dim("coming soon"),
+          value: "coming-soon",
+          disabled: true,
+        },
+      ],
+    });
+
     // Get template from config or prompt
     let template: TemplateOption;
     if (config?.experimental?.projectTemplate) {

src/app/menu/show-composer-mode/helpers/handlers/createProject.ts → src/app/menu/show-composer-mode/helpers/createProject.ts

@@ -7,13 +7,16 @@ import {
   selectIndexFile,
   selectLayoutFile,
   selectPageFile,
-} from "~/app/menu/show-composer-mode/helpers/handlers/selectBoilerplate.js";
-import { getUserPkgManager } from "~/app/menu/show-composer-mode/helpers/utils/getUserPkgManager.js";
+} from "~/app/menu/show-composer-mode/helpers/selectBoilerplate.js";
+import { getUserPkgManager } from "~/app/menu/show-composer-mode/utils/getUserPkgManager.js";
 
-import type { DatabaseProvider, PkgInstallerMap } from "../installers/index.js";
+import type {
+  DatabaseProvider,
+  PkgInstallerMap,
+} from "../../installers/index.js";
 
 import { installPackages } from "./installPackages.js";
-import { scaffoldProject } from "./scaffoldProject.js";
+import { scaffoldProject } from "./handlers/scaffoldProject.js";
 
 type CreateProjectOptions = {
   projectName: string;