@webjsdev/ui 0.3.15 → 0.3.16

package/README.md

@@ -111,6 +111,13 @@ it on demand with `npx @webjsdev/ui view <name>`, which is what the pointer it
 leaves behind says too). It also self-heals the theme tokens if
 they are missing.
 
+The install runs with your project's package manager. `add` looks for a
+lockfile in the current directory and then each parent, stopping at the
+workspace root, so an app inside a monorepo uses the root's lockfile:
+`pnpm-lock.yaml` means pnpm, `yarn.lock` yarn, `bun.lock` or `bun.lockb` bun,
+`package-lock.json` npm. With no lockfile it reads `npm_config_user_agent`
+(set by `bunx`, `pnpm dlx` and friends), and falls back to npm.
+
 Resolution is LOCAL-FIRST: `init` / `add` / `list` / `view` read the registry
 that ships inside the installed `@webjsdev/ui` package, so they work with no
 network. Point at a custom registry with `--registry <url>`; `webjsui diff`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/ui",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "type": "module",
   "description": "The AI-first component library for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Class-helper functions for visuals, custom elements only where state matters, source-copied into your repo so you own it.",
   "bin": {

package/src/commands/add.js

@@ -10,6 +10,7 @@ import { DEFAULT_REGISTRY_URL } from '../registry/fetcher.js';
 import { isCustomElementSource } from '../registry/local.js';
 import { stripExample } from '../registry/example.js';
 import { ensureTheme } from '../utils/theme.js';
+import { detectPackageManager } from '../utils/package-manager.js';
 
 export const add = new Command()
   .name('add')
@@ -247,7 +248,7 @@ function ensureDir(d) {
 }
 
 async function installDeps(cwd, deps, dev) {
-  const manager = detectPackageManager(cwd);
+  const manager = detectAddCommand(cwd);
   const flag = dev ? '-D' : '';
   const cmd = `${manager.exec} ${manager.add} ${flag} ${deps.join(' ')}`.replace(/\s+/g, ' ').trim();
   logger.info(`${logger.dim('$')} ${cmd}`);
@@ -258,9 +259,21 @@ async function installDeps(cwd, deps, dev) {
   }
 }
 
-function detectPackageManager(cwd) {
-  if (existsSync(join(cwd, 'pnpm-lock.yaml'))) return { exec: 'pnpm', add: 'add' };
-  if (existsSync(join(cwd, 'yarn.lock'))) return { exec: 'yarn', add: 'add' };
-  if (existsSync(join(cwd, 'bun.lockb'))) return { exec: 'bun', add: 'add' };
-  return { exec: 'npm', add: 'install' };
+/** Install command per manager (`-D` marks a dev dependency for all four). */
+const ADD_COMMANDS = {
+  npm: { exec: 'npm', add: 'install' },
+  pnpm: { exec: 'pnpm', add: 'add' },
+  yarn: { exec: 'yarn', add: 'add' },
+  bun: { exec: 'bun', add: 'add' },
+};
+
+/**
+ * Resolve the install command for the project at `cwd` (#1494): the lockfile
+ * walk-up (so `bun.lock` and a workspace-root lockfile both count), then the
+ * invoking tool's user agent, then npm.
+ * @param {string} cwd
+ * @param {Record<string, string | undefined>} [env]
+ */
+export function detectAddCommand(cwd, env = process.env) {
+  return ADD_COMMANDS[detectPackageManager({ cwd, env })];
 }

package/src/utils/package-manager.js

@@ -0,0 +1,92 @@
+/**
+ * Package-manager detection for `webjs ui add` (#1494).
+ *
+ * KEEP IN SYNC with `packages/cli/lib/package-manager.js`. The two published
+ * packages carry the same small module rather than one importing the other,
+ * so a `@webjsdev/cli` release can never fail at import time against an older
+ * `@webjsdev/ui` that lacks the export. `packages/cli/test/package-manager.test.mjs`
+ * asserts both copies agree on every fixture.
+ *
+ * Detection order (with `prefer: 'lockfile'`, the default):
+ *   1. A lockfile in `cwd` or any ancestor. The walk stops at the first
+ *      workspace root (a package.json declaring `workspaces`, or a
+ *      `pnpm-workspace.yaml`) or at the filesystem root, so an app nested in a
+ *      workspace finds the root's lockfile. Within one directory the order is
+ *      pnpm, yarn, bun (`bun.lock`, the text lockfile Bun writes since 1.2,
+ *      and the older binary `bun.lockb`), then npm.
+ *   2. `npm_config_user_agent`, which npm, pnpm, yarn and bun set when they
+ *      run a script or a `dlx` / `bunx` / `npx` binary.
+ *   3. `npm`.
+ * With `prefer: 'agent'` steps 1 and 2 swap, which suits `webjs create`: the
+ * tool that invoked it is the strongest signal for a directory that has no
+ * lockfile yet.
+ */
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+
+/** @typedef {'npm'|'pnpm'|'yarn'|'bun'} PackageManager */
+
+/** Lockfile name to manager, in per-directory precedence order. */
+const LOCKFILES = /** @type {const} */ ([
+  ['pnpm-lock.yaml', 'pnpm'],
+  ['yarn.lock', 'yarn'],
+  ['bun.lock', 'bun'],
+  ['bun.lockb', 'bun'],
+  ['package-lock.json', 'npm'],
+  ['npm-shrinkwrap.json', 'npm'],
+]);
+
+/**
+ * Whether `dir` is a workspace root, where the lockfile walk stops.
+ * @param {string} dir
+ * @returns {boolean}
+ */
+function isWorkspaceRoot(dir) {
+  if (existsSync(join(dir, 'pnpm-workspace.yaml'))) return true;
+  const pkgPath = join(dir, 'package.json');
+  if (!existsSync(pkgPath)) return false;
+  try {
+    return Boolean(JSON.parse(readFileSync(pkgPath, 'utf8')).workspaces);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Walk up from `cwd` looking for a lockfile.
+ * @param {string} cwd
+ * @returns {PackageManager | null}
+ */
+export function managerFromLockfile(cwd) {
+  let dir = resolve(cwd);
+  for (;;) {
+    for (const [file, manager] of LOCKFILES) {
+      if (existsSync(join(dir, file))) return manager;
+    }
+    if (isWorkspaceRoot(dir)) return null;
+    const parent = dirname(dir);
+    if (parent === dir) return null;
+    dir = parent;
+  }
+}
+
+/**
+ * Read the manager from an `npm_config_user_agent` value such as
+ * `bun/1.3.14 npm/? node/v24.0.0 linux x64`.
+ * @param {string | undefined} ua
+ * @returns {PackageManager | null}
+ */
+export function managerFromUserAgent(ua) {
+  const name = String(ua || '').split('/')[0];
+  return name === 'pnpm' || name === 'yarn' || name === 'bun' || name === 'npm' ? name : null;
+}
+
+/**
+ * @param {{ cwd?: string | null, env?: Record<string, string | undefined>, prefer?: 'lockfile' | 'agent' }} [opts]
+ * @returns {PackageManager}
+ */
+export function detectPackageManager({ cwd = null, env = process.env, prefer = 'lockfile' } = {}) {
+  const fromLock = () => (cwd ? managerFromLockfile(cwd) : null);
+  const fromAgent = () => managerFromUserAgent(env.npm_config_user_agent);
+  return (prefer === 'agent' ? fromAgent() ?? fromLock() : fromLock() ?? fromAgent()) ?? 'npm';
+}