@webjsdev/cli 0.8.5 → 0.9.0

package/README.md

@@ -18,7 +18,7 @@ Then scaffold a new app anywhere:
 ```sh
 webjs create my-app
 cd my-app && npm run dev
-# → http://localhost:3000
+# → http://localhost:8080
 ```
 
 One-shot without a global install, two ways:

package/bin/webjs.js

@@ -12,8 +12,8 @@ const [cmd, ...rest] = process.argv.slice(2);
 const TEMPLATES = ['full-stack', 'api', 'saas'];
 
 const USAGE = `webjs commands:
-  webjs dev   [--port 3000]                       Start dev server with live reload
-  webjs start [--port 3000]                       Start production server (serves source directly, no build step)
+  webjs dev   [--port 8080]                       Start dev server with live reload
+  webjs start [--port 8080]                       Start production server (serves source directly, no build step)
   webjs test  [--server|--browser]                 Run server + browser tests
   webjs check                                     Validate app against conventions
   webjs create <name> [--template full-stack|api|saas] [--no-install]  Scaffold a new webjs app
@@ -41,7 +41,7 @@ async function main() {
       // If we're already inside the --watch child, start the server directly.
       if (process.env.__WEBJS_DEV_CHILD === '1') {
         const { startServer } = await import('@webjsdev/server');
-        const port = Number(flag(rest, '--port', process.env.PORT || 3000));
+        const port = Number(flag(rest, '--port', process.env.PORT || 8080));
         await startServer({ appDir: process.cwd(), port, dev: true });
         break;
       }
@@ -81,7 +81,7 @@ async function main() {
     }
     case 'start': {
       const { startServer } = await import('@webjsdev/server');
-      const port = Number(flag(rest, '--port', process.env.PORT || 3000));
+      const port = Number(flag(rest, '--port', process.env.PORT || 8080));
       await startServer({ appDir: process.cwd(), port, dev: false });
       break;
     }

package/lib/create.js

@@ -15,6 +15,7 @@ import { mkdir, writeFile, readFile, cp } from 'node:fs/promises';
 import { join, resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { existsSync } from 'node:fs';
+import { createRequire } from 'node:module';
 import { spawnSync } from 'node:child_process';
 
 /**
@@ -54,14 +55,33 @@ const TEMPLATES = resolve(__dirname, '..', 'templates');
 // directly from disk at create time so the scaffolded app boots ready for
 // `webjs ui add` without an HTTP round-trip during scaffolding.
 //
-// Layout in the monorepo:
-//   packages/cli/lib/create.js                       ← __dirname
-//   packages/ui/packages/registry/components/*.ts
-//   packages/ui/packages/registry/lib/utils.ts
-//   packages/ui/packages/registry/themes/index.css
-const UI_REGISTRY_ROOT = resolve(
-  __dirname, '..', '..', 'ui', 'packages', 'registry',
-);
+//   <ui-pkg-root>/packages/registry/components/*.ts
+//   <ui-pkg-root>/packages/registry/lib/utils.ts
+//   <ui-pkg-root>/packages/registry/themes/index.css
+//
+// Locate <ui-pkg-root> via Node's module resolver rather than path
+// arithmetic off __dirname. The old `__dirname/../../ui/packages/registry`
+// form assumed @webjsdev/ui was a hoisted sibling of @webjsdev/cli under
+// node_modules/@webjsdev/. That holds for npm/yarn's default hoisting, but
+// breaks on nested layouts (pnpm's isolated linker, `npm install
+// --install-strategy=nested`, some CI setups), where @webjsdev/ui lives at
+// node_modules/@webjsdev/cli/node_modules/@webjsdev/ui and the arithmetic
+// resolves to a path that doesn't exist, failing `webjs create`.
+//
+// @webjsdev/ui's package.json isn't reachable via require.resolve (its
+// `exports` map doesn't expose `./package.json`), so resolve the package
+// entry and walk up to the directory that owns its package.json.
+function resolveUiRegistryRoot() {
+  const require = createRequire(import.meta.url);
+  let dir = dirname(require.resolve('@webjsdev/ui'));
+  while (!existsSync(join(dir, 'package.json'))) {
+    const parent = dirname(dir);
+    if (parent === dir) break; // reached filesystem root; give up
+    dir = parent;
+  }
+  return resolve(dir, 'packages', 'registry');
+}
+const UI_REGISTRY_ROOT = resolveUiRegistryRoot();
 
 /**
  * Read a single @webjsdev/ui registry component, rewrite its relative import
@@ -72,11 +92,10 @@ const UI_REGISTRY_ROOT = resolve(
  * utils/ folder: `../../lib/utils/cn.ts`.
  *
  * @param {string} name  component name without `.ts` (e.g. 'button')
- * @returns {Promise<string|null>} source or null if not found
+ * @returns {Promise<string>} source with import rewritten
  */
 async function readUiComponent(name) {
   const src = join(UI_REGISTRY_ROOT, 'components', `${name}.ts`);
-  if (!existsSync(src)) return null;
   const raw = await readFile(src, 'utf8');
   return raw
     .replaceAll("'../lib/utils.ts'", "'../../lib/utils/cn.ts'")
@@ -85,7 +104,10 @@ async function readUiComponent(name) {
 
 /**
  * Copy a list of @webjsdev/ui registry components into the scaffolded app
- * under `components/ui/`. Silently skips any name that isn't in the registry.
+ * under `components/ui/`. Throws if any name is missing from the registry,
+ * since the scaffold's generated pages import these by name and a missing
+ * file would produce ERR_MODULE_NOT_FOUND at first request. Caller must
+ * have already invoked assertUiRegistryAvailable().
  *
  * @param {string} appDir  destination app root
  * @param {string[]} names list of component file basenames (without `.ts`)
@@ -94,9 +116,16 @@ async function copyUiComponents(appDir, names) {
   const uiDir = join(appDir, 'components', 'ui');
   await mkdir(uiDir, { recursive: true });
   for (const n of names) {
-    const content = await readUiComponent(n);
-    if (content == null) continue;
-    await writeFile(join(uiDir, `${n}.ts`), content);
+    const src = join(UI_REGISTRY_ROOT, 'components', `${n}.ts`);
+    if (!existsSync(src)) {
+      throw new Error(
+        `@webjsdev/ui registry is missing component '${n}.ts' at ${src}. ` +
+        `The scaffold's example pages import this component by name. ` +
+        `Either the registry was published incompletely or the scaffold's ` +
+        `component list is out of sync with the registry.`,
+      );
+    }
+    await writeFile(join(uiDir, `${n}.ts`), await readUiComponent(n));
   }
 }
 
@@ -110,13 +139,15 @@ async function copyUiComponents(appDir, names) {
  * @param {string} appDir
  */
 async function writeUiBootstrap(appDir) {
+  // Caller (scaffoldApp) has already invoked assertUiRegistryAvailable(),
+  // so the source files below are guaranteed to exist.
+
   // 1) lib/utils/cn.ts: the cn() helper
-  const utilsSrc = join(UI_REGISTRY_ROOT, 'lib', 'utils.ts');
-  if (existsSync(utilsSrc)) {
-    const content = await readFile(utilsSrc, 'utf8');
-    await mkdir(join(appDir, 'lib', 'utils'), { recursive: true });
-    await writeFile(join(appDir, 'lib', 'utils', 'cn.ts'), content);
-  }
+  const utilsContent = await readFile(
+    join(UI_REGISTRY_ROOT, 'lib', 'utils.ts'), 'utf8',
+  );
+  await mkdir(join(appDir, 'lib', 'utils'), { recursive: true });
+  await writeFile(join(appDir, 'lib', 'utils', 'cn.ts'), utilsContent);
 
   // 2) components.json: the same shape `webjsui init` writes for webjs
   // projects (see packages/ui/src/utils/detect-project.js). The utils alias
@@ -144,12 +175,11 @@ async function writeUiBootstrap(appDir) {
 
   // 3) app/globals.css: copy the neutral theme verbatim. components.json
   // references this path, and future `webjs ui add` calls append to it.
-  const themeSrc = join(UI_REGISTRY_ROOT, 'themes', 'index.css');
-  if (existsSync(themeSrc)) {
-    const css = await readFile(themeSrc, 'utf8');
-    await mkdir(join(appDir, 'app'), { recursive: true });
-    await writeFile(join(appDir, 'app', 'globals.css'), css);
-  }
+  const css = await readFile(
+    join(UI_REGISTRY_ROOT, 'themes', 'index.css'), 'utf8',
+  );
+  await mkdir(join(appDir, 'app'), { recursive: true });
+  await writeFile(join(appDir, 'app', 'globals.css'), css);
 }
 
 /**
@@ -159,14 +189,45 @@ async function writeUiBootstrap(appDir) {
  * tokens (`--color-primary`, `--color-card`, …) the registry components
  * consume are available at runtime without a build step.
  *
- * @returns {Promise<string>} theme CSS source, or '' if registry missing
+ * @returns {Promise<string>} theme CSS source
  */
 async function readThemeCss() {
   const src = join(UI_REGISTRY_ROOT, 'themes', 'index.css');
-  if (!existsSync(src)) return '';
   return await readFile(src, 'utf8');
 }
 
+/**
+ * Fail loudly when the @webjsdev/ui registry is not on disk. The scaffold
+ * reads component sources, the cn() helper, and the shadcn theme from
+ * UI_REGISTRY_ROOT and weaves them into a generated app/page.ts that
+ * imports `components/ui/button.ts`. If the registry is missing, the
+ * generated app boots to ERR_MODULE_NOT_FOUND on first request, which is
+ * a confusing failure for end-users to debug.
+ *
+ * The check guards against an @webjsdev/ui published tarball that forgets
+ * to ship `packages/registry/` in its `files` array (the bug fixed in
+ * the same commit), and against a corrupted node_modules install.
+ */
+function assertUiRegistryAvailable() {
+  const required = [
+    join(UI_REGISTRY_ROOT, 'components'),
+    join(UI_REGISTRY_ROOT, 'lib', 'utils.ts'),
+    join(UI_REGISTRY_ROOT, 'themes', 'index.css'),
+  ];
+  const missing = required.filter((p) => !existsSync(p));
+  if (missing.length === 0) return;
+  throw new Error(
+    `@webjsdev/ui registry sources not found at ${UI_REGISTRY_ROOT}.\n` +
+    `Missing:\n${missing.map((p) => `  - ${p}`).join('\n')}\n\n` +
+    `The scaffold reads component sources from the installed @webjsdev/ui ` +
+    `package. If you see this from a fresh \`npm create webjs\`, the ` +
+    `published @webjsdev/ui tarball is missing \`packages/registry/\` ` +
+    `(check its package.json \`files\` array). Please file an issue at ` +
+    `https://github.com/webjsdev/webjs/issues with your @webjsdev/ui ` +
+    `version (\`npm ls @webjsdev/ui\`).`,
+  );
+}
+
 /**
  * @param {string} name  App directory name
  * @param {string} cwd   Current working directory
@@ -513,6 +574,13 @@ export type ActionResult<T> =
       await cp(uiSrc, join(utilsDir, 'ui.ts'));
     }
 
+    // Fail loudly if the @webjsdev/ui registry sources aren't on disk.
+    // Without this, downstream copy helpers would silently skip and the
+    // generated app would boot to ERR_MODULE_NOT_FOUND on the first page
+    // render (the import in app/page.ts below points at a file we didn't
+    // write).
+    assertUiRegistryAvailable();
+
     // Pre-initialise @webjsdev/ui so the scaffold boots ready for
     // `webjs ui add <name>`: writes components.json + lib/utils/cn.ts +
     // app/globals.css (the shadcn theme).
@@ -960,7 +1028,7 @@ For AI agents, read this before editing scaffolded files:
   console.log(`
 Next steps:
   ${runCommand}
-  # → http://localhost:3000
+  # → http://localhost:8080
 
 Optional:
   ${uiNote}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/cli",
-  "version": "0.8.5",
+  "version": "0.9.0",
   "type": "module",
   "description": "webjs CLI - dev, start, create, db",
   "bin": {

package/templates/.env.example

@@ -4,7 +4,7 @@
 # Opinionated defaults: set these and the framework auto-configures.
 
 # ── Server ──────────────────────────────────────────────────────────
-PORT=3000
+PORT=8080
 
 # ── Auth (required for authentication) ──────────────────────────────
 # Generate: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

package/templates/CONVENTIONS.md

@@ -213,7 +213,7 @@ variables control infrastructure (no config files needed):
 | `AUTH_SECRET` | Required for auth JWT signing (32+ random chars) |
 | `AUTH_GOOGLE_ID` | Google OAuth client ID (optional) |
 | `AUTH_GITHUB_ID` | GitHub OAuth client ID (optional) |
-| `PORT` | Server port (default: 3000) |
+| `PORT` | Server port (default: 8080) |
 | `WEBJS_PUBLIC_*` | Any env var starting with this prefix is exposed to the browser as `process.env.WEBJS_PUBLIC_X`. Components can read it directly. No build step, no transform. Use for API base URLs, Stripe publishable keys, analytics IDs, anything that is intended to be visible client-side. |
 
 **Server-only by default.** Any env var without the `WEBJS_PUBLIC_` prefix never reaches the browser. Reading `process.env.DATABASE_URL` from a component returns `undefined`, the same as a typo. The prefix is fail-closed: secrets cannot accidentally leak.