create-bcp-app 0.1.4 → 0.1.5

package/README.md

@@ -20,6 +20,20 @@ Select a database:
   5) MongoDB
 ```
 
+## Generated application defaults
+
+Generated applications include the project-root `@/` alias:
+
+```ts
+import {
+    db,
+} from "@/lib/database";
+```
+
+The generated TypeScript configuration uses `module: "ESNext"` and `moduleResolution: "Bundler"` so extensionless application aliases match BCP's bundler and development runtime resolution.
+
+Modules that use React client hooks such as `useState` or `useEffect` must declare `"use client"` at the top of the module.
+
 ## Generated optional setup
 
 ### Tailwind CSS
@@ -30,11 +44,10 @@ When Tailwind is enabled, the project includes:
 - `@tailwindcss/cli`
 - `concurrently`
 - `app/globals.css`
-- `app/api/bcp-styles/route.ts`
-- a stylesheet link in `app/layout.tsx`
+- a stylesheet link to `/bcp.css` in `app/layout.tsx`
 - starter Tailwind utility classes in `app/page.tsx`
 
-The generated npm scripts compile Tailwind before starting BCP and keep Tailwind running in watch mode during development:
+The generated npm scripts compile Tailwind directly to `public/bcp.css` before starting BCP and keep Tailwind running in watch mode during development:
 
 ```text
 npm run css:build
@@ -42,7 +55,7 @@ npm run css:watch
 npm run css:build:prod
 ```
 
-`npm run dev` performs an initial CSS build, then runs the Tailwind watcher and `bcp dev` together. `npm run build` creates a minified stylesheet before the BCP production build.
+`npm run dev` performs an initial CSS build, then runs the Tailwind watcher and `bcp dev` together. BCP serves `/bcp.css` as a normal static asset from `public/`, avoiding an extra API route in the critical request chain. `npm run build` creates a minified stylesheet before the BCP production build.
 
 ### Database
 
@@ -54,6 +67,14 @@ The database choice adds a starter `lib/database.ts`, updates `.env.example`, an
 - MongoDB: `mongodb`
 - None: no database dependency
 
+The generated database helper starts with:
+
+```ts
+import "bcp/server-only";
+```
+
+This prevents database code from being used in a page/client module graph. Query the database from an API route and call that API from client components.
+
 The generator intentionally installs database drivers directly and does not force an ORM.
 
 ## Options
@@ -79,5 +100,5 @@ npx create-bcp-app my-app --yes
 The `--bcp` option is primarily useful for prerelease and local package testing, for example:
 
 ```bash
-npx create-bcp-app my-app --bcp file:../bcp-0.1.4.tgz
+npx create-bcp-app my-app --bcp file:../bcp-0.1.5.tgz
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bcp-app",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Create a new BCP Framework application.",
   "type": "module",
   "license": "MIT",

package/src/project-options.mjs

@@ -18,7 +18,9 @@ const DATABASE_PRESETS = {
         env: [
             "DATABASE_URL=mysql://root:password@localhost:3306/bcp_app",
         ],
-        source: `import mysql from "mysql2/promise";
+        source: `import "bcp/server-only";
+
+import mysql from "mysql2/promise";
 
 const connectionString =
     process.env.DATABASE_URL;
@@ -45,7 +47,9 @@ export const db =
         env: [
             "DATABASE_URL=postgresql://postgres:password@localhost:5432/bcp_app",
         ],
-        source: `import {
+        source: `import "bcp/server-only";
+
+import {
     Pool,
 } from "pg";
 
@@ -74,7 +78,9 @@ export const db =
         env: [
             "DATABASE_URL=./data/bcp.sqlite",
         ],
-        source: `import fs from "node:fs";
+        source: `import "bcp/server-only";
+
+import fs from "node:fs";
 import path from "node:path";
 
 import Database from "better-sqlite3";
@@ -111,7 +117,9 @@ export const db =
             "DATABASE_URL=mongodb://localhost:27017",
             "DATABASE_NAME=bcp_app",
         ],
-        source: `import {
+        source: `import "bcp/server-only";
+
+import {
     MongoClient,
 } from "mongodb";
 
@@ -259,56 +267,6 @@ function configureTailwind(
 `
     );
 
-    writeFile(
-        targetDirectory,
-        "app/api/bcp-styles/route.ts",
-        `import fs from "node:fs/promises";
-import path from "node:path";
-
-export async function GET() {
-    const stylesheet =
-        path.join(
-            process.cwd(),
-            "public",
-            "bcp.css"
-        );
-
-    try {
-        const css =
-            await fs.readFile(
-                stylesheet,
-                "utf8"
-            );
-
-        return new Response(
-            css,
-            {
-                headers: {
-                    "Content-Type":
-                        "text/css; charset=utf-8",
-                    "Cache-Control":
-                        "no-store, max-age=0",
-                },
-            }
-        );
-    } catch {
-        return new Response(
-            "/* BCP Tailwind stylesheet has not been built yet. */",
-            {
-                status: 503,
-                headers: {
-                    "Content-Type":
-                        "text/css; charset=utf-8",
-                    "Cache-Control":
-                        "no-store, max-age=0",
-                },
-            }
-        );
-    }
-}
-`
-    );
-
     fs.mkdirSync(
         path.join(
             targetDirectory,
@@ -370,7 +328,7 @@ function injectTailwindStylesheet(
         `${indent}<div>${newline}` +
         `${childIndent}<link${newline}` +
         `${propertyIndent}rel="stylesheet"${newline}` +
-        `${propertyIndent}href="/api/bcp-styles"${newline}` +
+        `${propertyIndent}href="/bcp.css"${newline}` +
         `${childIndent}/>${newline}`;
 
     fs.writeFileSync(

package/template/tsconfig.json

@@ -1,14 +1,20 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "jsx": "react-jsx",
     "strict": true,
     "noEmit": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
     "types": [
       "node",
       "react",