Build extensions
for Quipu

{
  "id": "my-csv-viewer",
  "name": "CSV Viewer",
  "version": "1.0.0",
  "main": "index.js"
}

// React is provided by Quipu — do not bundle it.
const { createElement: h, useState } = React;

function CsvViewer({ activeFile }) {
  const [rows, setRows] = useState([]);

  React.useEffect(() => {
    if (!activeFile) return;
    fetch(`/api/file?path=${activeFile.path}`)
      .then(r => r.text())
      .then(text => setRows(text.trim().split('\n').map(r => r.split(','))));
  }, [activeFile]);

  return h('table', { style: { padding: '16px' } },
    rows.map((cols, i) => h('tr', { key: i },
      cols.map((c, j) => h('td', { key: j }, c))
    ))
  );
}

// Every plugin must export an `init` function.
export function init(api) {
  api.register({
    id: 'csv-viewer',
    canHandle: (tab) => tab.name?.endsWith('.csv'),
    priority: 50,
    component: CsvViewer,
  });
}

{
  "id":          "my-plugin",         // unique, kebab-case
  "name":        "My Plugin",         // display name
  "version":     "1.0.0",             // semver
  "main":        "index.js",          // entry point (relative to plugin dir)
  "description": "Optional blurb",    // shown in UI (future)
  "author":      "you"               // optional
}

/**
 * @param {import('quipu').PluginApi} api
 */
export function init(api) {
  // api.register(descriptor)        — register a file viewer
  // api.registerPanel(descriptor)   — add a sidebar panel
  // api.registerCommand(id, fn, opts)— add a command palette entry
  // api.executeCommand(id, ...args)  — trigger any registered command
  // api.registerKeybinding(entry)    — bind a key combo to a command
  // api.services.*                   — file system, git, terminal, kernel
  // api.version                      — current Quipu version string
}

export function init(api) {
  api.register({
    id: 'my-csv-viewer',

    // Claim any .csv file
    canHandle: (tab) => tab.name?.endsWith('.csv') ?? false,

    priority: 50,

    component: CsvViewer, // your React component

    // Optional: toolbar commands shown when this viewer is active
    commands: [
      {
        id: 'csv.export',
        label: 'Export as JSON',
        handler: () => { /* ... */ },
      },
    ],
  });
}

export function init(api) {
  api.registerPanel({
    id:        'my-panel',
    label:     'My Panel',
    icon:      'BracketsCurlyIcon',
    component: MyPanelComponent,
    order:     10,
  });
}

export function init(api) {
  // Register a command that appears in the command palette
  api.registerCommand(
    'my-plugin.sayHello',           // command ID (namespaced by convention)
    (name = 'world') => {
      alert(`Hello, ${name}!`);
    },
    {
      label:    'Say Hello',              // shown in command palette
      category: 'My Plugin',            // group label
      shortcut: 'Ctrl+Shift+H',          // display-only hint (wire up separately)
    }
  );

  // Call another command (built-in or plugin)
  api.registerCommand('my-plugin.openSearch', () => {
    api.executeCommand('view.search');
  }, { label: 'Open Search', category: 'My Plugin' });
}

export function init(api) {
  api.registerCommand('my-plugin.sayHello', () => alert('Hello!'), {
    label:    'Say Hello',
    category: 'My Plugin',
  });

  api.registerKeybinding({
    key:       'ctrl+shift+h',       // Windows / Linux
    mac:       'cmd+shift+h',        // macOS (optional — falls back to key)
    commandId: 'my-plugin.sayHello',
  });
}

export function init(api) {
  const { fileSystem } = api.services;

  api.registerCommand('my-plugin.showFileSize', async () => {
    const content = await fileSystem.readFile('/path/to/file.txt');
    alert(`File is ${content.length} bytes`);
  }, { label: 'Show File Size', category: 'My Plugin' });
}

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry:   'src/index.tsx',
      formats: ['es'],          // ES module output
      fileName: () => 'index.js',
    },
    rollupOptions: {
      // Externalize React — Quipu provides these as window globals
      external: ['react', 'react-dom', 'react-dom/client'],
      output: {
        globals: {
          'react':            'React',
          'react-dom':        'ReactDOM',
          'react-dom/client': 'ReactDOMClient',
        },
      },
    },
  },
});

{
  "scripts": {
    "build": "vite build",
    "dev":   "vite build --watch"
  },
  "devDependencies": {
    "vite":                "^6.0.0",
    "@vitejs/plugin-react": "^4.0.0",
    "react":               "^19.0.0",
    "@types/react":        "^19.0.0"
  }
}