@webjsdev/cli 0.10.12 → 0.10.13

package/README.md

@@ -10,7 +10,7 @@ Installing this package gives you the `webjs` command.
 Install once, globally:
 
 ```sh
-npm i -g @webjsdev/cli
+npm i -g webjsdev
 ```
 
 Then scaffold a new app anywhere:

package/bin/webjs.js

@@ -141,7 +141,7 @@ async function main() {
     }
     case 'ui': {
       // Delegate to @webjsdev/ui. Bundled as a hard dependency of
-      // @webjsdev/cli, so `npm install -g @webjsdev/cli` pulls it in
+      // @webjsdev/cli, so `npm install -g webjsdev` pulls it in
       // automatically, and `webjs ui add button` works out of the box
       // without an extra install in user projects.
       const { createRequire } = await import('node:module');
@@ -157,7 +157,7 @@ async function main() {
           entry = userReq.resolve('@webjsdev/ui/bin/webjsui.js');
         } catch {
           console.error('@webjsdev/ui could not be resolved.');
-          console.error('Reinstall the CLI:  npm install -g @webjsdev/cli');
+          console.error('Reinstall the CLI:  npm install -g webjsdev');
           process.exit(1);
         }
       }
@@ -275,7 +275,9 @@ async function main() {
       // identical to the MCP `check` tool. The non-zero exit on violations is
       // preserved (an agent gates on the exit code AND parses the report).
       if (rest.includes('--json')) {
-        const { projectCheck } = await import('../lib/check-json.js');
+        // The projector lives in @webjsdev/mcp (the MCP `check` tool's home),
+        // so `check --json` and the MCP tool stay byte-identical (#415).
+        const { projectCheck } = await import('@webjsdev/mcp/check-report');
         console.log(JSON.stringify(projectCheck(violations)));
         if (violations.length > 0) process.exit(1);
         break;
@@ -647,19 +649,23 @@ Full docs: https://docs.webjs.com`);
       process.exit(1);
     }
     case 'mcp': {
-      // Read-only MCP server (#262) over stdio. STDOUT is the JSON-RPC channel,
-      // so nothing here may write to stdout: the data functions are read-only
-      // and `runMcpServer` routes all diagnostics to stderr. The CLI version is
-      // advertised in the initialize handshake's serverInfo.
-      const { readFileSync } = await import('node:fs');
+      // Read-only MCP server (#262, #415) over stdio. STDOUT is the JSON-RPC
+      // channel, so nothing here may write to stdout: the data functions are
+      // read-only and `runMcpServer` routes all diagnostics to stderr. The
+      // implementation lives in the standalone `@webjsdev/mcp` package (also
+      // runnable directly as `npx @webjsdev/mcp`); `webjs mcp` delegates to it
+      // for back-compat. The version advertised in the initialize handshake is
+      // @webjsdev/mcp's own, resolved by its bin, so this passes none.
+      const { runMcpServer } = await import('@webjsdev/mcp');
+      const { createRequire } = await import('node:module');
+      const require = createRequire(import.meta.url);
       let version = '0.0.0';
       try {
-        const pkg = JSON.parse(
-          readFileSync(join(__dirname, '..', 'package.json'), 'utf8'),
-        );
-        version = pkg.version || version;
+        const { readFileSync } = await import('node:fs');
+        version = JSON.parse(
+          readFileSync(require.resolve('@webjsdev/mcp/package.json'), 'utf8'),
+        ).version || version;
       } catch {}
-      const { runMcpServer } = await import('../lib/mcp.js');
       await runMcpServer({
         stdin: process.stdin,
         stdout: process.stdout,

package/lib/create.js

@@ -308,6 +308,7 @@ export async function scaffoldApp(name, cwd, opts = {}) {
       // tsc --noEmit). Not needed at runtime (Node strips types in place), only
       // to type-check the app.
       typescript: '^5.6.0',
+      '@types/node': '^24.0.0',
       '@web/test-runner': '^0.20.0',
       '@web/test-runner-playwright': '^0.11.0',
       'playwright': '^1.59.0',
@@ -315,14 +316,19 @@ export async function scaffoldApp(name, cwd, opts = {}) {
       // assertNoA11yViolations() test helper from @webjsdev/core/testing.
       // Test-only: dynamically imported, never shipped to the app runtime.
       'axe-core': '^4.10.0',
-      // tsserver plugin for editor intelligence inside html`` templates.
-      // @webjsdev/ts-plugin bundles ts-lit-plugin internally, so just one
-      // plugin entry is needed in tsconfig (see below).
-      '@webjsdev/ts-plugin': 'latest',
-      // AI-first component library CLI, preinstalled so `webjs ui add button`
-      // works immediately after scaffold. Users can remove if they prefer
-      // to add it later.
-      '@webjsdev/ui': 'latest',
+      // tsserver plugin, wired into tsconfig below. Gives the language
+      // INTELLIGENCE (go-to-def, completions, diagnostics, hover inside html``
+      // templates) in any tsserver editor with NO editor plugin installed,
+      // because editors load tsconfig plugins from node_modules. The `webjs`
+      // VS Code extension and webjs.nvim ALSO bundle this plugin (so it works
+      // before `npm install` too, and adds template HIGHLIGHTING, which a
+      // tsserver plugin can't provide); tsserver dedupes by name, so loading
+      // it both ways is a no-op. Standalone, no Lit dependency. Editor-only.
+      '@webjsdev/intellisense': 'latest',
+      // NOTE: @webjsdev/ui is intentionally NOT pinned. The UI kit is
+      // shadcn-style copy-in: `webjs ui add <name>` copies component source
+      // into components/ui/ (they import @webjsdev/core, not the kit), and the
+      // CLI resolves @webjsdev/ui from its own install.
     },
   }, null, 2) + '\n');
 
@@ -332,6 +338,7 @@ export async function scaffoldApp(name, cwd, opts = {}) {
       module: 'NodeNext',
       moduleResolution: 'NodeNext',
       lib: ['ES2022', 'DOM', 'DOM.Iterable'],
+      types: ['node'],
       strict: true,
       noEmit: true,
       allowImportingTsExtensions: true,
@@ -347,17 +354,16 @@ export async function scaffoldApp(name, cwd, opts = {}) {
       // SYNTAX errors. Use a `const` object + union for enum-shaped
       // values; write fields + constructor assignments explicitly.
       erasableSyntaxOnly: true,
-      // @webjsdev/ts-plugin gives the editor:
-      //   • type-check + diagnostics inside html`` templates (via the
-      //     ts-lit-plugin it bundles internally)
-      //   • webjs-aware go-to-definition on custom-element tags
-      //   • "Unknown tag/attribute" suppression for elements registered
-      //     via Class.register('tag-name')
-      //   • attribute auto-complete sourced from `static properties`
-      //   • attribute-value type-check against `declare` annotations
-      // Editor-only. The framework runs without it.
+      // @webjsdev/intellisense (standalone, no Lit dependency) gives the editor,
+      // inside html`` templates:
+      //   • go-to-definition on custom-element tags, attributes, and CSS classes
+      //   • binding-aware completions (tag names, .prop / ?bool / plain attrs)
+      //   • diagnostics (value type-checks, unquoted-binding, expressionless .prop)
+      //   • hover showing the component class / declared member type
+      // Editor-only. The framework runs without it. For VS Code / Cursor /
+      // Windsurf, the `webjs` extension bundles this automatically.
       plugins: [
-        { name: '@webjsdev/ts-plugin' },
+        { name: '@webjsdev/intellisense' },
       ],
     },
     // `.webjs/routes.d.ts` is the OPT-IN generated route-types overlay (#258):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/cli",
-  "version": "0.10.12",
+  "version": "0.10.13",
   "type": "module",
   "description": "webjs CLI - dev, start, create, db",
   "bin": {
@@ -10,10 +10,10 @@
     "bin",
     "lib",
     "templates",
-    "README.md",
-    "resources"
+    "README.md"
   ],
   "dependencies": {
+    "@webjsdev/mcp": "^0.1.0",
     "@webjsdev/server": "^0.8.0",
     "@webjsdev/ui": "^0.3.1"
   },
@@ -36,9 +36,5 @@
   ],
   "engines": {
     "node": ">=24.0.0"
-  },
-  "scripts": {
-    "prepack": "node scripts/copy-mcp-resources.js",
-    "postpack": "node scripts/clean-mcp-resources.js"
   }
 }

package/templates/.claude.json

@@ -8,7 +8,7 @@
     "webjs": {
       "type": "stdio",
       "command": "npx",
-      "args": ["@webjsdev/cli", "mcp"]
+      "args": ["@webjsdev/mcp"]
     }
   }
 }

package/templates/AGENTS.md

@@ -89,14 +89,14 @@ node_modules/@webjsdev/
     src/actions.js            ← .server.ts scanner, RPC, expose()
     src/auth.js, session.js, cache.js, rate-limit.js, csrf.js
   cli/             webjs CLI (dev / start / build / test / check / create / db)
-  ts-plugin/       tsserver plugin: go-to-definition + diagnostic suppression
+  intellisense/    tsserver plugin: go-to-definition + diagnostic suppression
                    + attribute auto-complete for Class.register('tag') elements
 ```
 
 Reaching straight for the source is the fastest way to resolve "why
 doesn't X work?" with no documentation guesswork and no stale blog posts.
 
-## Editor TS plugin: `@webjsdev/ts-plugin`
+## Editor TS plugin: `@webjsdev/intellisense`
 
 This scaffold's `tsconfig.json` lists a single tsserver plugin. It is
 editor-only, not required for the framework to run.
@@ -104,22 +104,24 @@ editor-only, not required for the framework to run.
 ```jsonc
 // tsconfig.json (already wired by the scaffold)
 "plugins": [
-  { "name": "@webjsdev/ts-plugin" }
+  { "name": "@webjsdev/intellisense" }
 ]
 ```
 
-`@webjsdev/ts-plugin` bundles `ts-lit-plugin` internally (it's a runtime
-dependency of the plugin) and loads it programmatically, so users
-list one entry, not two. You get the full stack of template-literal
-intelligence (type-checking, diagnostics, go-to-def inside
-`` html`…` `` and `` css`…` `` templates) **plus** webjs-aware behaviour
-layered on top:
-
-- "Unknown tag/attribute" diagnostics are silenced for elements
-  registered via `Class.register('tag-name')`.
-- Attribute auto-complete sourced from each component's
-  `static properties`.
-- Attribute-value type-check against `declare propName: T` annotations.
+`@webjsdev/intellisense` is **standalone** (no Lit dependency): one plugin
+entry, its own template parser. Inside `` html`…` `` templates you get:
+
+- Go-to-definition on custom-element tags, attribute / property / event
+  names, and CSS classes in `class="…"`.
+- Binding-aware completions: reachable tag names after `<`, and
+  prefix-keyed attributes (`.prop` property names, `?bool` / plain
+  hyphenated attribute names).
+- Diagnostics: value type-checks against `declare propName: T`, unquoted
+  `@`/`.`/`?` bindings, and expressionless `.prop` bindings.
+- Hover showing the component class / declared member type.
+
+In VS Code / Cursor / Windsurf, the **`webjs` extension** bundles this
+automatically (no `tsconfig.json` edit, no separate Lit extension).
 
 See [docs.webjs.com → Editor setup](https://docs.webjs.com/docs/editor-setup)
 for the full walkthrough.

package/templates/CONVENTIONS.md

@@ -654,11 +654,11 @@ attribute coercion, reflection). `declare` types the field for
 TypeScript without emitting a class-field initializer that would
 clobber the reactive accessor at construction time. The two
 declarations together give you full intelligence in any tsserver-backed
-editor. See the Editor Setup docs for the `ts-lit-plugin` +
-`@webjsdev/ts-plugin` setup that extends this to tag / attribute
-intelligence inside `html\`…\`` templates (go-to-definition, attribute
-auto-complete from `static properties`, no "Unknown tag" red-squiggle on
-registered webjs elements).
+editor. See the Editor Setup docs for the standalone `@webjsdev/intellisense`
+(no Lit dependency) that extends this to tag / attribute intelligence
+inside `html\`…\`` templates (go-to-definition, binding-aware completions,
+value/binding diagnostics, hover); in VS Code / Cursor / Windsurf the
+`webjs` extension bundles it automatically.
 
 **Rules:**
 - One component per file

package/lib/check-json.js

@@ -1,47 +0,0 @@
-/**
- * Shared JSON projector for `webjs check` violations (#262).
- *
- * `webjs check --json` and the `webjs mcp` server's `check` tool BOTH return
- * the identical shape, so the projection lives here once. The input is the raw
- * `Violation[]` from `checkConventions(appDir)` (each `{ rule, file, message,
- * fix }`); the output adds a `summary` count plus a per-rule breakdown so an
- * agent consuming the structured output never has to regex-scrape stdout.
- *
- * Pure and side-effect-free: it neither reads files nor prints. The caller owns
- * running `checkConventions` and (for the CLI) the non-zero exit when there are
- * violations.
- *
- * @module check-json
- */
-
-/**
- * @typedef {{ rule: string, file: string, message: string, fix: string }} Violation
- */
-
-/**
- * @typedef {{
- *   violations: Violation[],
- *   summary: { count: number, byRule: Record<string, number> },
- * }} CheckReport
- */
-
-/**
- * Project a raw `Violation[]` into the structured `{ violations, summary }`
- * report shared by `check --json` and the MCP `check` tool. `violations` is
- * passed through verbatim (the `{ rule, file, message, fix }` shape), and
- * `summary.byRule` tallies how many violations each rule produced.
- *
- * @param {Violation[]} violations
- * @returns {CheckReport}
- */
-export function projectCheck(violations) {
-  /** @type {Record<string, number>} */
-  const byRule = {};
-  for (const v of violations) {
-    byRule[v.rule] = (byRule[v.rule] || 0) + 1;
-  }
-  return {
-    violations,
-    summary: { count: violations.length, byRule },
-  };
-}