hyper-plugins

# Hyper Plugin Development

Develop plugins for Hyper terminal using JavaScript, React, and Redux.

## Plugin Architecture

Hyper plugins are npm packages that run in both Electron main process and renderer. They use a composition-based API with decorators and hooks.

## Plugin Structure

```
hyper-plugin-name/
├── package.json        # npm package manifest
├── index.js           # Main entry point
├── README.md          # Documentation
└── lib/               # Optional: additional modules
```

## package.json

```json
{
  "name": "hyper-your-plugin",
  "version": "1.0.0",
  "description": "Brief description",
  "main": "index.js",
  "keywords": ["hyper", "hyper-plugin"],
  "author": "Your Name",
  "license": "MIT"
}
```

**Required:** The `hyper` keyword is needed for plugin discovery.

## Configuration Decoration

### decorateConfig

Modify user configuration:

```javascript
exports.decorateConfig = (config) => {
  return Object.assign({}, config, {
    // Your config modifications
    myPluginOption: config.myPluginOption || 'default',
  });
};
```

Always preserve user config with spread:
```javascript
exports.decorateConfig = (config) => ({
  ...config,
  css: `${config.css || ''} .custom { color: red; }`,
});
```

## Lifecycle Hooks

### onApp
Called when Electron app is ready:
```javascript
exports.onApp = (app) => {
  app.on('before-quit', () => {
    // Cleanup
  });
};
```

### onWindow
Called when window is created:
```javascript
exports.onWindow = (window) => {
  window.on('focus', () => {
    // Handle window focus
  });
};
```

### onUnload
Called before plugin is unloaded:
```javascript
exports.onUnload = (window) => {
  // Cleanup resources, remove listeners
};
```

## Component Decorators

### decorateTerm
Wrap the terminal component:
```javascript
exports.decorateTerm = (Term, { React, notify }) => {
  return class extends React.Component {
    render() {
      return React.createElement(Term, this.props);
    }
  };
};
```

### Other Decorators
-