@vsceasy/cli 0.1.0

package/templates/react/src/webview/panels/dashboard/App.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { connectWebview } from '../../../shared/vsceasy/client';
+import type { DashboardApi } from '../../../shared/api';
+
+const api = connectWebview<DashboardApi>();
+
+export function App() {
+  const [info, setInfo] = useState<{ workspace: string | null; vscodeVersion: string } | null>(null);
+  const [files, setFiles] = useState<string[]>([]);
+  const [pattern, setPattern] = useState('**/*.ts');
+
+  useEffect(() => { api.getInfo().then(setInfo); }, []);
+
+  return (
+    <div className="app">
+      <h1>{{displayName}} Dashboard</h1>
+      {info && (
+        <section>
+          <p><strong>Workspace:</strong> {info.workspace ?? '(none)'}</p>
+          <p><strong>VS Code:</strong> {info.vscodeVersion}</p>
+        </section>
+      )}
+      <section>
+        <input value={pattern} onChange={(e) => setPattern(e.target.value)} />
+        <button onClick={async () => setFiles(await api.listFiles(pattern))}>Find files</button>
+        <button onClick={() => api.showMessage('Hello from the webview!')}>Toast</button>
+        <ul>{files.map((f) => <li key={f}>{f}</li>)}</ul>
+      </section>
+    </div>
+  );
+}

package/templates/react/src/webview/panels/dashboard/main.tsx

@@ -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/react/src/webview/styles.css

@@ -0,0 +1,33 @@
+:root { color-scheme: light dark; }
+
+body {
+  margin: 0;
+  padding: 1rem;
+  font-family: var(--vscode-font-family);
+  font-size: var(--vscode-font-size);
+  color: var(--vscode-foreground);
+  background: var(--vscode-editor-background);
+}
+
+.app h1 { font-size: 1.25rem; margin: 0 0 1rem; }
+
+button, input {
+  font: inherit;
+  color: var(--vscode-button-foreground, inherit);
+  background: var(--vscode-button-background, transparent);
+  border: 1px solid var(--vscode-button-border, var(--vscode-input-border, #555));
+  padding: 0.35rem 0.75rem;
+  border-radius: 2px;
+  margin-right: 0.5rem;
+}
+
+input {
+  background: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  min-width: 16rem;
+}
+
+button:hover { background: var(--vscode-button-hoverBackground); }
+
+ul { padding-left: 1.25rem; }
+li { line-height: 1.6; }

package/templates/react/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/templates/react/vite.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const WEBVIEW_ROOT = path.resolve(__dirname, 'src/webview');
+
+function discoverHtmlEntries(subdir: string): Record<string, string> {
+  const dir = path.join(WEBVIEW_ROOT, subdir);
+  if (!fs.existsSync(dir)) return {};
+  const out: Record<string, string> = {};
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    if (!entry.isDirectory()) continue;
+    const html = path.join(dir, entry.name, 'index.html');
+    // Key includes subdir so panel `dashboard` and subpanel `dashboard` never collide.
+    if (fs.existsSync(html)) out[`${subdir}/${entry.name}`] = html;
+  }
+  return out;
+}
+
+const entries = {
+  ...discoverHtmlEntries('panels'),
+  ...discoverHtmlEntries('subpanels'),
+};
+
+export default defineConfig({
+  plugins: [react()],
+  root: WEBVIEW_ROOT,
+  build: {
+    outDir: path.resolve(__dirname, 'dist/webview'),
+    emptyOutDir: true,
+    manifest: 'manifest.json',
+    rollupOptions: {
+      input: entries,
+      output: {
+        entryFileNames: '[name]/index.js',
+        chunkFileNames: 'chunks/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]',
+      },
+    },
+  },
+});