@vsceasy/cli 0.1.0

package/templates/_generators/panel/templates/dashboard/App.tsx.tpl

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Card } from '../../components';
+import '../../components/components.css';
+{{apiBlock}}
+interface Stats {
+  total: number;
+  active: number;
+  updatedAt: string;
+}
+
+export function App() {
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  async function refresh() {
+    setLoading(true);
+    try {
+      {{statsCall}}
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    void refresh();
+  }, []);
+
+  return (
+    <div className="app">
+      <h1>{{title}}</h1>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(8rem, 1fr))', gap: '0.75rem' }}>
+        <Card title="Total"><strong style={{ fontSize: '1.5rem' }}>{stats?.total ?? '—'}</strong></Card>
+        <Card title="Active"><strong style={{ fontSize: '1.5rem' }}>{stats?.active ?? '—'}</strong></Card>
+        <Card title="Updated"><span>{stats?.updatedAt ?? '—'}</span></Card>
+      </div>
+      <div style={{ marginTop: '0.75rem' }}>
+        <Button variant="secondary" onClick={refresh} disabled={loading}>{loading ? 'Loading…' : 'Refresh'}</Button>
+      </div>
+    </div>
+  );
+}

package/templates/_generators/panel/templates/form/App.tsx.tpl

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Button, Input, Field, Card } from '../../components';
+import '../../components/components.css';
+{{apiBlock}}
+export function App() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [status, setStatus] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setStatus(null);
+    try {
+      {{submitCall}}
+      setStatus('Saved.');
+      setName('');
+      setEmail('');
+    } catch (err) {
+      setStatus(err instanceof Error ? err.message : 'Failed.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="app">
+      <h1>{{title}}</h1>
+      <Card title="New entry">
+        <form onSubmit={onSubmit}>
+          <Field label="Name" htmlFor="name">
+            <Input id="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Jane Doe" required />
+          </Field>
+          <Field label="Email" htmlFor="email">
+            <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="jane@acme.io" />
+          </Field>
+          <Button type="submit" disabled={busy}>{busy ? 'Saving…' : 'Save'}</Button>
+          {status ? <span style={{ marginLeft: '0.75rem' }}>{status}</span> : null}
+        </form>
+      </Card>
+    </div>
+  );
+}

package/templates/_generators/panel/templates/list/App.tsx.tpl

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { Button, List, Card } from '../../components';
+import '../../components/components.css';
+{{apiBlock}}
+interface Row {
+  id: string;
+  label: string;
+}
+
+export function App() {
+  const [rows, setRows] = useState<Row[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  async function refresh() {
+    setLoading(true);
+    try {
+      {{loadCall}}
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    void refresh();
+  }, []);
+
+  return (
+    <div className="app">
+      <h1>{{title}}</h1>
+      <Card title="Items" actions={<Button variant="secondary" onClick={refresh} disabled={loading}>{loading ? 'Loading…' : 'Refresh'}</Button>}>
+        <List
+          items={rows}
+          getKey={(r) => r.id}
+          renderItem={(r) => r.label}
+          empty="No items yet."
+        />
+      </Card>
+    </div>
+  );
+}

package/templates/_generators/publish/CHANGELOG.md.tpl

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes follow [Keep a Changelog](https://keepachangelog.com/).
+
+## [Unreleased]
+
+### Added
+- Initial release.

package/templates/_generators/publish/README.md.tpl

@@ -0,0 +1,23 @@
+# {{displayName}}
+
+{{description}}
+
+## Features
+
+- (describe what this extension does)
+
+## Requirements
+
+VS Code ≥ 1.80
+
+## Extension Settings
+
+(list your `contributes.configuration` entries)
+
+## Known Issues
+
+—
+
+## Release Notes
+
+See [CHANGELOG.md](./CHANGELOG.md).

package/templates/_generators/statusBar/statusBar.ts.tpl

@@ -0,0 +1,7 @@
+import { defineStatusBar } from '../shared/vsceasy';
+
+export default defineStatusBar({
+  text: '{{text}}',{{iconLine}}{{tooltipLine}}
+  alignment: '{{alignment}}',
+  priority: {{priority}},{{commandLine}}{{panelLine}}
+});

package/templates/_generators/subpanel/App.tsx.tpl

@@ -0,0 +1,10 @@
+import React from 'react';
+{{apiBlock}}
+export function App() {
+  return (
+    <div className="sidebar-view">
+      <h2>{{title}}</h2>
+      <p>Edit <code>src/webview/subpanels/{{name}}/App.tsx</code> to start building.</p>
+    </div>
+  );
+}

package/templates/_generators/subpanel/main.tsx.tpl

@@ -0,0 +1,6 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import '../../styles.css';
+
+createRoot(document.getElementById('root')!).render(<App />);

package/templates/_generators/subpanel/subpanel.ts.tpl

@@ -0,0 +1,6 @@
+import { defineSubpanel } from '../shared/vsceasy';
+{{apiImport}}
+export default defineSubpanel{{apiGeneric}}({
+  title: '{{title}}',
+  menu: '{{menu}}',{{rpcBlock}}
+});

package/templates/_generators/test/_helpers.ts.tpl

@@ -0,0 +1,120 @@
+import { vi } from 'vitest';
+import { createRpcServer, createRpcClient } from '../shared/vsceasy/rpc';
+import type { Transport, Handlers, RpcClient } from '../shared/vsceasy/rpc';
+
+/**
+ * Minimal `vscode` namespace mock — covers the surface most extensions touch.
+ * Extend per test by spreading or assigning new spies onto the returned object.
+ *
+ *   const vscode = mockVscode();
+ *   vscode.window.showInformationMessage('hi');
+ *   expect(vscode.window.showInformationMessage).toHaveBeenCalledWith('hi');
+ */
+export function mockVscode() {
+  const subscriptions: { dispose(): void }[] = [];
+  return {
+    window: {
+      showInformationMessage: vi.fn(),
+      showWarningMessage: vi.fn(),
+      showErrorMessage: vi.fn(),
+      showInputBox: vi.fn(),
+      showQuickPick: vi.fn(),
+      withProgress: vi.fn(async (_opts: any, task: any) => task({ report: vi.fn() })),
+      createStatusBarItem: vi.fn(() => ({ show: vi.fn(), dispose: vi.fn(), text: '' })),
+      createTreeView: vi.fn(() => ({ dispose: vi.fn() })),
+      createWebviewPanel: vi.fn(),
+      activeTextEditor: undefined as any,
+    },
+    workspace: {
+      getConfiguration: vi.fn(() => ({ get: vi.fn(), update: vi.fn(async () => undefined) })),
+      onDidChangeConfiguration: vi.fn(() => ({ dispose: vi.fn() })),
+      findFiles: vi.fn(async () => [] as any[]),
+      workspaceFolders: [] as any[],
+    },
+    commands: {
+      registerCommand: vi.fn((_id: string, _fn: any) => ({ dispose: vi.fn() })),
+      executeCommand: vi.fn(async () => undefined),
+    },
+    env: {
+      openExternal: vi.fn(async () => true),
+    },
+    Uri: { parse: (s: string) => ({ toString: () => s }), file: (p: string) => ({ fsPath: p, toString: () => p }) },
+    ProgressLocation: { Notification: 15, SourceControl: 1, Window: 10 } as const,
+    ConfigurationTarget: { Global: 1, Workspace: 2, WorkspaceFolder: 3 } as const,
+    TreeItemCollapsibleState: { None: 0, Collapsed: 1, Expanded: 2 } as const,
+    StatusBarAlignment: { Left: 1, Right: 2 } as const,
+    EventEmitter: class {
+      private listeners: Array<(v: any) => void> = [];
+      event = (l: (v: any) => void) => {
+        this.listeners.push(l);
+        return { dispose: () => (this.listeners = this.listeners.filter((x) => x !== l)) };
+      };
+      fire(v: any) {
+        this.listeners.forEach((l) => l(v));
+      }
+      dispose() {
+        this.listeners = [];
+      }
+    },
+    Disposable: { from: (...d: any[]) => ({ dispose: () => d.forEach((x) => x.dispose?.()) }) },
+    subscriptions,
+  };
+}
+
+export type VscodeMock = ReturnType<typeof mockVscode>;
+
+/**
+ * Minimal `ExtensionContext` mock — backed by in-memory Maps for state/secrets.
+ */
+export function mockContext() {
+  const wm = new Map<string, unknown>();
+  const gm = new Map<string, unknown>();
+  const sm = new Map<string, string>();
+  const memento = (m: Map<string, unknown>) => ({
+    get: (k: string, d?: unknown) => (m.has(k) ? m.get(k) : d),
+    update: async (k: string, v: unknown) => void (v === undefined ? m.delete(k) : m.set(k, v)),
+    keys: () => Array.from(m.keys()),
+  });
+  return {
+    subscriptions: [] as { dispose(): void }[],
+    workspaceState: memento(wm),
+    globalState: memento(gm),
+    secrets: {
+      get: async (k: string) => sm.get(k),
+      store: async (k: string, v: string) => void sm.set(k, v),
+      delete: async (k: string) => void sm.delete(k),
+      onDidChange: () => ({ dispose: () => {} }),
+    },
+    extensionPath: '/mock',
+    extensionUri: { fsPath: '/mock' },
+  };
+}
+
+/**
+ * Build an in-memory RPC pair (server + typed client). No webview involved.
+ * Useful for testing your handlers end-to-end with the same types the UI sees.
+ *
+ *   const handlers = { greet: (n: string) => `hi ${n}` };
+ *   const api = mockRpcPair<typeof handlers>(handlers);
+ *   expect(await api.greet('Jairo')).toBe('hi Jairo');
+ */
+export function mockRpcPair<H extends Handlers>(handlers: H): RpcClient<H> {
+  const aListeners = new Set<(m: any) => void>();
+  const bListeners = new Set<(m: any) => void>();
+  const aToB: Transport = {
+    send: (m) => bListeners.forEach((l) => l(m)),
+    onMessage: (h) => {
+      aListeners.add(h);
+      return () => aListeners.delete(h);
+    },
+  };
+  const bToA: Transport = {
+    send: (m) => aListeners.forEach((l) => l(m)),
+    onMessage: (h) => {
+      bListeners.add(h);
+      return () => bListeners.delete(h);
+    },
+  };
+  createRpcServer<H>(bToA, handlers);
+  return createRpcClient<H>(aToB, { callTimeoutMs: 0 });
+}

package/templates/_generators/test/sample.test.ts.tpl

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { mockVscode, mockContext, mockRpcPair } from './_helpers';
+
+describe('vscode mock', () => {
+  it('captures notification calls', () => {
+    const vscode = mockVscode();
+    vscode.window.showInformationMessage('hello');
+    expect(vscode.window.showInformationMessage).toHaveBeenCalledWith('hello');
+  });
+
+  it('persists state via mock context', async () => {
+    const ctx = mockContext();
+    await ctx.workspaceState.update('key', 42);
+    expect(ctx.workspaceState.get('key')).toBe(42);
+  });
+});
+
+describe('RPC pair', () => {
+  it('round-trips a typed handler call', async () => {
+    const handlers = {
+      async greet(name: string) {
+        return `hi ${name}`;
+      },
+    };
+    const api = mockRpcPair<typeof handlers>(handlers);
+    expect(await api.greet('Jairo')).toBe('hi Jairo');
+  });
+
+  it('propagates handler errors', async () => {
+    const handlers = {
+      async boom() {
+        throw new Error('nope');
+      },
+    };
+    const api = mockRpcPair<typeof handlers>(handlers);
+    await expect(api.boom()).rejects.toThrow('nope');
+  });
+});

package/templates/_generators/test/vitest.config.ts.tpl

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vitest/config';
+import * as path from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      // `vscode` is only available inside the extension host. Tests stub it
+      // with an empty module so importing any file that does `import * as vscode`
+      // doesn't crash. Use `mockVscode()` from `_helpers.ts` for the surface
+      // you actually need to assert against.
+      vscode: path.resolve(__dirname, 'src/__tests__/__mocks__/vscode.ts'),
+    },
+  },
+  test: {
+    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
+    environment: 'node',
+    globals: false,
+    coverage: {
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: ['src/extension/_registry.ts', 'src/webview/**', 'src/__tests__/**'],
+    },
+  },
+});

package/templates/_generators/test/vscode.stub.ts.tpl

@@ -0,0 +1,109 @@
+/**
+ * Auto-generated `vscode` module stub for vitest. Replaces the real `vscode`
+ * import inside tests (the real module only exists in the extension host).
+ *
+ * The stub exposes the enums and class shapes the runtime touches at module
+ * load time so files that do `import * as vscode from 'vscode'` don't crash
+ * during test collection.
+ *
+ * To assert behaviour against `vscode.window.X`, use `mockVscode()` from
+ * `_helpers.ts` and inject it into the code under test directly.
+ */
+export const TreeItemCollapsibleState = { None: 0, Collapsed: 1, Expanded: 2 } as const;
+export const StatusBarAlignment = { Left: 1, Right: 2 } as const;
+export const ConfigurationTarget = { Global: 1, Workspace: 2, WorkspaceFolder: 3 } as const;
+export const ProgressLocation = { SourceControl: 1, Window: 10, Notification: 15 } as const;
+export const ViewColumn = { Active: -1, Beside: -2, One: 1, Two: 2, Three: 3 } as const;
+export const ThemeIcon = class { constructor(public id: string) {} };
+export const ThemeColor = class { constructor(public id: string) {} };
+export const TreeItem = class { constructor(public label: string, public collapsibleState?: number) {} };
+export const MarkdownString = class {
+  value = '';
+  isTrusted = false;
+  supportHtml = false;
+  constructor(value = '') {
+    this.value = value;
+  }
+  appendMarkdown(v: string) {
+    this.value += v;
+    return this;
+  }
+};
+export const Uri = {
+  parse: (s: string) => ({ toString: () => s, fsPath: s }),
+  file: (p: string) => ({ fsPath: p, toString: () => p }),
+  joinPath: (base: { fsPath: string }, ...segs: string[]) => ({
+    fsPath: [base.fsPath, ...segs].join('/'),
+    toString: () => [base.fsPath, ...segs].join('/'),
+  }),
+};
+export const EventEmitter = class<T> {
+  private listeners: Array<(v: T) => void> = [];
+  event = (l: (v: T) => void) => {
+    this.listeners.push(l);
+    return { dispose: () => (this.listeners = this.listeners.filter((x) => x !== l)) };
+  };
+  fire(v: T) {
+    this.listeners.forEach((l) => l(v));
+  }
+  dispose() {
+    this.listeners = [];
+  }
+};
+export const Disposable = {
+  from: (...d: Array<{ dispose: () => void }>) => ({ dispose: () => d.forEach((x) => x.dispose()) }),
+};
+
+const noop = () => {};
+const noopDisposable = { dispose: noop };
+const noopAsync = async () => undefined;
+const noopReg = () => noopDisposable;
+
+export const window = {
+  showInformationMessage: noopAsync,
+  showWarningMessage: noopAsync,
+  showErrorMessage: noopAsync,
+  showInputBox: noopAsync,
+  showQuickPick: noopAsync,
+  withProgress: async (_o: unknown, task: (p: { report: () => void }) => unknown) =>
+    task({ report: noop }),
+  createStatusBarItem: () => ({ show: noop, hide: noop, dispose: noop, text: '' }),
+  createTreeView: () => ({ dispose: noop }),
+  createWebviewPanel: () => ({
+    webview: { html: '', onDidReceiveMessage: noopReg, postMessage: noop, asWebviewUri: (u: unknown) => u },
+    onDidDispose: noopReg,
+    dispose: noop,
+  }),
+  registerWebviewViewProvider: noopReg,
+  activeTextEditor: undefined as unknown,
+  onDidChangeActiveTextEditor: noopReg,
+};
+
+export const workspace = {
+  getConfiguration: () => ({ get: noop, update: noopAsync, has: () => false, inspect: () => undefined }),
+  onDidChangeConfiguration: noopReg,
+  findFiles: async () => [] as unknown[],
+  workspaceFolders: [] as unknown[],
+  asRelativePath: (p: string) => p,
+};
+
+export const commands = {
+  registerCommand: noopReg,
+  executeCommand: noopAsync,
+  getCommands: async () => [] as string[],
+};
+
+export const env = {
+  openExternal: async () => true,
+  clipboard: { writeText: noopAsync, readText: async () => '' },
+};
+
+export const extensions = {
+  getExtension: () => undefined,
+  all: [] as unknown[],
+};
+
+export const languages = {
+  registerHoverProvider: noopReg,
+  registerCompletionItemProvider: noopReg,
+};

package/templates/_generators/treeView/treeView.ts.tpl

@@ -0,0 +1,16 @@
+import { defineTreeView, TreeNode } from '../shared/vsceasy';
+
+export default defineTreeView({
+  title: '{{title}}',
+  menu: '{{menu}}',
+  getChildren: async (parent, vscode, ctx) => {
+    if (!parent) {
+      return [
+        { label: 'Item 1', icon: 'file', tooltip: 'Replace with real data' },
+        { label: 'Group', icon: 'folder', collapsed: 'collapsed', children: [] },
+      ] as TreeNode[];
+    }
+    // Lazy children — return based on parent.id / parent.contextValue.
+    return [];
+  },
+});

package/templates/react/.vscode/launch.json

@@ -0,0 +1,34 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+      "sourceMaps": true,
+      "smartStep": true,
+      "preLaunchTask": "vsceasy: build"
+    },
+    {
+      "name": "Run Extension (watch / HMR)",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+      "sourceMaps": true,
+      "smartStep": true,
+      "preLaunchTask": "vsceasy: dev"
+    },
+    {
+      "name": "Attach to Extension Host",
+      "type": "node",
+      "request": "attach",
+      "port": 9229,
+      "skipFiles": ["<node_internals>/**"],
+      "sourceMaps": true,
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
+    }
+  ]
+}

package/templates/react/.vscode/tasks.json

@@ -0,0 +1,32 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "vsceasy: build",
+      "type": "shell",
+      "command": "bun run build",
+      "presentation": { "reveal": "silent", "panel": "dedicated" },
+      "problemMatcher": []
+    },
+    {
+      "label": "vsceasy: dev",
+      "type": "shell",
+      "command": "bun run dev",
+      "isBackground": true,
+      "presentation": { "reveal": "always", "panel": "dedicated" },
+      "group": { "kind": "build", "isDefault": true },
+      "problemMatcher": {
+        "owner": "esbuild-watch",
+        "pattern": {
+          "regexp": "^\\s*✘\\s*\\[ERROR\\]\\s+(.*)$",
+          "message": 1
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": ".*build started.*|.*\\[watch\\] build started.*",
+          "endsPattern": ".*built in.*|.*\\[watch\\] build finished.*"
+        }
+      }
+    }
+  ]
+}

package/templates/react/.vscodeignore

@@ -0,0 +1,8 @@
+.vscode/**
+src/**
+scripts/**
+node_modules/**
+.gitignore
+tsconfig.json
+vite.config.ts
+*.map

package/templates/react/README.md

@@ -0,0 +1,50 @@
+# {{displayName}}
+
+Generated with [`vsceasy`](https://www.npmjs.com/package/vsceasy).
+
+## Develop
+
+Two ways to launch the Extension Development Host:
+
+### Option A — one-shot launch (recommended for first run)
+
+```bash
+bun install
+bun run launch
+```
+
+Builds extension + webview once, then opens a new VS Code window with the extension loaded.
+Then in the dev window: Command Palette → **{{displayName}}: Open Dashboard**.
+
+### Option B — watch mode + F5
+
+```bash
+bun install
+bun run dev          # leave running — watches both extension + webview
+```
+
+Then in VS Code (this folder open):
+- Press <kbd>F5</kbd> → picks **Run Extension** launch config → opens Extension Development Host.
+- Re-press <kbd>Ctrl/Cmd+R</kbd> inside the dev host after code changes to reload.
+
+> Note: `bun run dev` only builds — it does NOT launch VS Code. F5 (or `bun run launch`) does.
+
+## Commands
+
+- Command Palette → **{{displayName}}: Hello** → info toast
+- Command Palette → **{{displayName}}: Open Dashboard** → React webview
+
+## Structure
+
+- `src/extension/extension.ts` — entry, registers commands
+- `src/extension/panels/DashboardPanel.ts` — webview panel + RPC handlers
+- `src/webview/App.tsx` — React UI (typed RPC client)
+- `src/shared/api.ts` — RPC contract (types flow to both sides)
+- `src/shared/rpc.ts` — bridge implementation
+
+## Package as `.vsix`
+
+```bash
+bun run build
+bun run package   # → {{name}}-0.0.1.vsix
+```