eagle-inspector-plugin-svelte-template Svelte Themes

Eagle Inspector Plugin Svelte Template

Eagle Plugin Svelte Template

This is a template repository for creating plugins for Eagle using Svelte and Vite. It provides a solid foundation for building powerful and efficient Eagle plugins with modern web technologies.

Features

  • ๐Ÿš€ Built with Svelte and Vite
  • ๐Ÿ“ฆ Optimized build configuration for Eagle plugins
  • ๐Ÿ”ง Ready-to-use development environment with hot reload
  • ๐ŸŽจ Theme-aware components that match Eagle's UI
  • ๐Ÿ› ๏ธ TypeScript support out of the box
  • ๐Ÿ“š Comprehensive component library
  • ๐Ÿงช Testing setup with Vitest
  • ๐Ÿ” ESLint and Prettier for code quality

Getting Started

Prerequisites

  • Node.js 18+
  • Eagle Application installed
  • Basic knowledge of Svelte and JavaScript/TypeScript

Use this template

  1. Click the "Use this template" button on GitHub
  2. Clone your new repository
  3. Install dependencies:
npm install

Development

Start the development server:

npm run dev

This will:

  • Start Vite dev server with hot module reloading
  • Watch for file changes and automatically rebuild
  • Provide hot reloading in Eagle when files change

Building

Build your plugin for production:

npm run build

The built files will be in the build directory.

Testing

Run tests using Vitest:

# Run tests
npm run test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

# Run tests with UI
npm run test:ui

### Testing in Eagle
  1. Launch Eagle application
  2. Go to Plugins -> Developer Options
  3. Click "Import Local Project"
  4. Select your plugin directory
  5. The plugin will appear in Eagle's plugin list

TypeScript Support

This template includes TypeScript support out of the box. To use TypeScript:

  1. Rename your .js/.svelte files to .ts/.svelte
  2. Add types to your variables and functions
  3. Use the built-in Eagle type definitions

Example:


Project Structure

/
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ components/    # Reusable UI components
โ”‚   โ”‚   โ”œโ”€โ”€ Button.svelte
โ”‚   โ”‚   โ””โ”€โ”€ ...
โ”‚   โ”œโ”€โ”€ lib/          # Utility functions and helpers
โ”‚   โ”œโ”€โ”€ types/        # TypeScript type definitions
โ”‚   โ”œโ”€โ”€ main.js       # Entry point
โ”‚   โ””โ”€โ”€ App.svelte    # Root component
โ”œโ”€โ”€ tests/           # Test files
โ”œโ”€โ”€ index.html       # HTML template
โ”œโ”€โ”€ global.css       # Global CSS styles
โ”œโ”€โ”€ logo.png         # Plugin logo
โ”œโ”€โ”€ docs/            # Documentation
โ”œโ”€โ”€ .github/         # GitHub workflows
โ”œโ”€โ”€ vite.config.ts   # Vite configuration
โ”œโ”€โ”€ tsconfig.json    # TypeScript configuration
โ”œโ”€โ”€ manifest.json    # Eagle plugin manifest
โ””โ”€โ”€ package.json     # Project configuration

Available Scripts

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Top categories

Loading Svelte Themes