@farm.js/create-app 0.1.0-beta.31 → 0.1.0-beta.33

package/README.md

@@ -10,11 +10,20 @@ cd my-app
 pnpm dev
 ```
 
-The scaffolder installs React, React DOM, FARMJS, TypeScript, and the other starter dependencies
+The scaffolder installs FARMJS, React by default, TypeScript, and the other starter dependencies
 automatically. The command explicitly selects the minimal Basic starter. Use `pnpm create`, not
 `pnpm add`; pnpm resolves this initializer command to the published `@farm.js/create-app` package.
 Pass `--skip-install` when you only want to generate the project files.
 
+Choose React, Preact, Solid, Vue, or Svelte for the Basic and Better Auth starters:
+
+```bash
+pnpm create @farm.js/app@beta my-app --template better-auth --renderer solid --typescript
+```
+
+React remains the default when `--renderer` is omitted. The interactive Basic and Better Auth
+flows also offer a renderer chooser.
+
 List every starter:
 
 ```bash
@@ -29,7 +38,8 @@ Available templates:
 - Product integrations: `ai`, `jobs-inngest`, `jobs-trigger`, `resend`, `unkey`
 
 Integration templates include provider wiring, a local UI feature, `.env.example`, a minimal dark
-home page, and setup documentation. For example:
+home page, and setup documentation. Better Auth has renderer-native UI for all five renderers;
+other integration templates currently use React. For example:
 
 ```bash
 pnpm create @farm.js/app@beta stripe-app --template stripe --typescript

package/dist/index.js

@@ -2726,7 +2726,7 @@ async function createApp(projectName, options = {}) {
 		require_utils.logger.error(`Unknown renderer "${options.renderer}". Available: "react", "preact", "solid", "vue", "svelte".`);
 		process.exit(1);
 	}
-	if (!renderer && !options.template && template === "basic") {
+	if (!renderer && !options.template && (template === "basic" || template === "better-auth")) {
 		const response = await (0, prompts.default)({
 			type: "select",
 			name: "renderer",
@@ -2767,8 +2767,8 @@ async function createApp(projectName, options = {}) {
 		renderer = response.renderer;
 	}
 	renderer ||= "react";
-	if (renderer !== "react" && template !== "basic") {
-		require_utils.logger.error(`The "${template}" integration starter currently targets React. Use --template basic with --renderer ${renderer}.`);
+	if (renderer !== "react" && template !== "basic" && !await hasRendererIntegrationTemplate(template, renderer)) {
+		require_utils.logger.error(`The "${template}" integration starter currently targets React. Use --template basic or --template better-auth with --renderer ${renderer}.`);
 		process.exit(1);
 	}
 	let useTypeScript = options.typescript;
@@ -2825,29 +2825,18 @@ async function createApp(projectName, options = {}) {
 async function copyTemplate(template, projectPath, useTypeScript, renderer) {
 	const details = templateDetails[template];
 	await copyDir(path.default.join(__dirname, "..", "templates", details?.integration ? "basic" : template), projectPath);
+	const basePackageJson = await readPackageJson(projectPath);
 	if (useTypeScript) {
 		const tsTemplatePath = path.default.join(__dirname, "..", "templates", "_typescript");
 		if (await dirExists(tsTemplatePath)) await copyDir(tsTemplatePath, projectPath);
 	}
-	if (renderer === "solid") await copyDir(path.default.join(__dirname, "..", "templates", "_renderers", "solid"), projectPath);
-	if (renderer === "preact") await copyDir(path.default.join(__dirname, "..", "templates", "_renderers", "preact"), projectPath);
-	if (renderer === "vue") {
-		const rendererTemplatePath = path.default.join(__dirname, "..", "templates", "_renderers", "vue");
-		await Promise.all([
-			fs_promises.default.rm(path.default.join(projectPath, "src", "app", "page.tsx"), { force: true }),
-			fs_promises.default.rm(path.default.join(projectPath, "src", "app", "layout.tsx"), { force: true }),
-			fs_promises.default.rm(path.default.join(projectPath, "src", "components", "resource-links.tsx"), { force: true })
-		]);
-		await copyDir(rendererTemplatePath, projectPath);
-	}
-	if (renderer === "svelte") {
-		const rendererTemplatePath = path.default.join(__dirname, "..", "templates", "_renderers", "svelte");
-		await Promise.all([
-			fs_promises.default.rm(path.default.join(projectPath, "src", "app", "page.tsx"), { force: true }),
-			fs_promises.default.rm(path.default.join(projectPath, "src", "app", "layout.tsx"), { force: true }),
-			fs_promises.default.rm(path.default.join(projectPath, "src", "components", "resource-links.tsx"), { force: true })
-		]);
-		await copyDir(rendererTemplatePath, projectPath);
+	if (renderer !== "react") {
+		await applyRendererTemplate(projectPath, renderer, basePackageJson);
+		const integrationRendererPath = getRendererIntegrationTemplatePath(template, renderer);
+		if (await dirExists(integrationRendererPath)) {
+			await removeRendererIntegrationConflicts(projectPath);
+			await copyDir(integrationRendererPath, projectPath);
+		}
 	}
 	if (!details?.integration) return;
 	const result = await addFarmIntegration({
@@ -2860,6 +2849,79 @@ async function copyTemplate(template, projectPath, useTypeScript, renderer) {
 	await writeIntegrationReadme(projectPath, details.integration, result.env);
 	return result;
 }
+async function applyRendererTemplate(projectPath, renderer, basePackageJson) {
+	const rendererTemplatePath = path.default.join(__dirname, "..", "templates", "_renderers", renderer);
+	if (renderer === "vue" || renderer === "svelte") await Promise.all([
+		fs_promises.default.rm(path.default.join(projectPath, "src", "app", "page.tsx"), { force: true }),
+		fs_promises.default.rm(path.default.join(projectPath, "src", "app", "layout.tsx"), { force: true }),
+		fs_promises.default.rm(path.default.join(projectPath, "src", "components", "resource-links.tsx"), { force: true })
+	]);
+	await copyDir(rendererTemplatePath, projectPath);
+	await writePackageJson(projectPath, mergeRendererPackageJson(basePackageJson, await readPackageJson(projectPath)));
+}
+function mergeRendererPackageJson(base, renderer) {
+	const dependencies = {
+		...base.dependencies,
+		...renderer.dependencies
+	};
+	const devDependencies = {
+		...base.devDependencies,
+		...renderer.devDependencies
+	};
+	for (const name of ["react", "react-dom"]) delete dependencies[name];
+	for (const name of ["@types/react", "@types/react-dom"]) delete devDependencies[name];
+	return {
+		...base,
+		...renderer.type ? { type: renderer.type } : {},
+		scripts: {
+			...base.scripts,
+			...renderer.scripts
+		},
+		dependencies,
+		devDependencies
+	};
+}
+async function readPackageJson(projectPath) {
+	return JSON.parse(await fs_promises.default.readFile(path.default.join(projectPath, "package.json"), "utf8"));
+}
+async function writePackageJson(projectPath, packageJson) {
+	await fs_promises.default.writeFile(path.default.join(projectPath, "package.json"), `${JSON.stringify(packageJson, null, 2)}\n`, "utf8");
+}
+function getRendererIntegrationTemplatePath(template, renderer) {
+	return path.default.join(__dirname, "..", "templates", "_integrations", template, renderer);
+}
+async function hasRendererIntegrationTemplate(template, renderer) {
+	return dirExists(getRendererIntegrationTemplatePath(template, renderer));
+}
+async function removeRendererIntegrationConflicts(projectPath) {
+	const appFiles = [
+		"page.tsx",
+		"layout.tsx",
+		"loading.tsx",
+		"error.tsx",
+		"not-found.tsx",
+		"sign-in/page.tsx",
+		"sign-up/page.tsx",
+		"dashboard/page.tsx",
+		"preact.css",
+		"solid.css",
+		"vue.css",
+		"svelte.css",
+		"api/greeting/route.ts"
+	];
+	const componentFiles = [
+		"auth-form.tsx",
+		"auth-shell.tsx",
+		"sign-out-button.tsx",
+		"site-header.tsx"
+	];
+	await Promise.all([
+		...appFiles.map((file) => fs_promises.default.rm(path.default.join(projectPath, "src", "app", file), { force: true })),
+		...componentFiles.map((file) => fs_promises.default.rm(path.default.join(projectPath, "src", "components", file), { force: true })),
+		fs_promises.default.rm(path.default.join(projectPath, "src", "lib", "api-client.ts"), { force: true }),
+		fs_promises.default.rm(path.default.join(projectPath, "src", "lib", "api.generated.ts"), { force: true })
+	]);
+}
 async function writeEnvironmentExample(projectPath, keys) {
 	if (keys.length === 0) return;
 	const envPath = path.default.join(projectPath, ".env.example");