create-slotkit-app

English | 中文

English

Scaffold Tool for SlotKit Applications

create-slotkit-app is a CLI tool that helps you quickly create a new SlotKit application with all the necessary configuration and boilerplate code.

Features

• Quick Setup: Create a new SlotKit project in seconds
• Vite Integration: Uses Vite for fast development and building
• TypeScript Support: Full TypeScript configuration included
• Plugin System Ready: Pre-configured plugin directory structure with a default helloworld plugin
• Auto Import Generation: slotkit generate-imports runs automatically before pnpm dev and pnpm build
• Zero Configuration: Works out of the box with sensible defaults

Installation

npm install -g create-slotkit-app
# or
yarn global add create-slotkit-app
# or
pnpm add -g create-slotkit-app

Or use it directly with npx/pnpm create:

npx create-slotkit-app my-app
# or
pnpm create slotkit-app my-app

Usage

create-slotkit-app <project-name> [options]

Options:

• --template <template> - Vite template to use (default: react-ts)
  • Available templates: react, react-ts, vue, vue-ts, vanilla, vanilla-ts

Quick Start

# Create a new SlotKit project
create-slotkit-app my-slotkit-app

# Navigate to the project
cd my-slotkit-app

# Install dependencies
pnpm install

# Start development server (generate-imports runs automatically)
pnpm dev

What Gets Created

When you run create-slotkit-app, it creates:

my-slotkit-app/
├── src/
│   ├── App.tsx              # Main app component with plugin loading
│   ├── app/
│   │   ├── AppLayout.tsx    # Layout with Slot components
│   │   └── AppLayout.css    # Layout styles
│   └── main.tsx             # Entry point
├── plugins/
│   └── helloworld/          # Default sample plugin
├── slotkit.config.ts         # SlotKit configuration
├── vite.config.ts           # Vite configuration
├── package.json             # Project dependencies
└── tsconfig.json            # TypeScript configuration

Project Structure

The generated project includes:

1. App.tsx: Automatically loads and registers plugins on mount
2. AppLayout.tsx: Pre-configured layout with Slot components for:
   • header slot
   • sidebar slot
   • content slot
   • footer slot
3. slotkit.config.ts: Basic configuration pointing to ./plugins
4. helloworld plugin: Located at plugins/helloworld/ as a ready-to-run example
5. vite.config.ts: Vite configuration with plugin directory access

Creating Plugins

After creating your project, you can create plugins:

# Create a plugin
slotkit create-plugin my-plugin --slots content,sidebar

# Generate import mappings (required after creating plugins)
slotkit generate-imports

# List all plugins
slotkit list

# Enable/disable plugins
slotkit enable my-plugin
slotkit disable my-plugin

Next Steps

1. Install dependencies: pnpm install
2. Start the dev server: pnpm dev (runs slotkit generate-imports automatically)
3. Create additional plugins: slotkit create-plugin my-plugin --slots content
4. Whenever you create/modify plugins outside the dev flow, run pnpm slotkit generate-imports

Configuration

The generated slotkit.config.ts file:

import { defineConfig } from '@slotkitjs/core'

export default defineConfig({
  pluginsDir: './plugins',
  // Add more configuration here
})

Development

# Clone the repository
git clone <repository-url>
cd create-slotkit-app

# Install dependencies
pnpm install

# Build
pnpm build

# Development mode (watch)
pnpm dev

License

MIT

中文

SlotKit 应用脚手架工具

create-slotkit-app 是一个 CLI 工具，帮助你快速创建一个新的 SlotKit 应用，包含所有必要的配置和样板代码。

特性

• 快速设置：几秒钟内创建新的 SlotKit 项目
• Vite 集成：使用 Vite 进行快速开发和构建
• TypeScript 支持：包含完整的 TypeScript 配置
• 插件系统就绪：预配置的插件目录结构
• 零配置：开箱即用，使用合理的默认值

安装

npm install -g create-slotkit-app
# 或
yarn global add create-slotkit-app
# 或
pnpm add -g create-slotkit-app

或者直接使用 npx/pnpm create：

npx create-slotkit-app my-app
# 或
pnpm create slotkit-app my-app

使用

create-slotkit-app <project-name> [options]

选项:

• --template <template> - 使用的 Vite 模板（默认：react-ts）
  • 可用模板：react, react-ts, vue, vue-ts, vanilla, vanilla-ts

快速开始

# 创建新的 SlotKit 项目
create-slotkit-app my-slotkit-app

# 进入项目目录
cd my-slotkit-app

# 安装依赖
pnpm install

# 创建第一个插件
slotkit create-plugin my-first-plugin --slots content

# 生成插件导入映射
slotkit generate-imports

# 启动开发服务器
slotkit dev

创建的内容

运行 create-slotkit-app 后，会创建：

my-slotkit-app/
├── src/
│   ├── App.tsx              # 主应用组件，自动加载插件
│   ├── app/
│   │   ├── AppLayout.tsx    # 包含 Slot 组件的布局
│   │   └── AppLayout.css    # 布局样式
│   └── main.tsx             # 入口文件
├── plugins/                  # 插件目录（初始为空）
├── slotkit.config.ts         # SlotKit 配置
├── vite.config.ts           # Vite 配置
├── package.json             # 项目依赖
└── tsconfig.json            # TypeScript 配置

项目结构

生成的项目包括：

1. App.tsx: 在挂载时自动加载并注册插件
2. AppLayout.tsx: 预配置的布局，包含以下插槽的 Slot 组件：
   • header 插槽
   • sidebar 插槽
   • content 插槽
   • footer 插槽
3. slotkit.config.ts: 指向 ./plugins 目录的基本配置
4. vite.config.ts: Vite 配置，包含插件文件系统访问权限

创建插件

创建项目后，你可以创建插件：

# 创建插件
slotkit create-plugin my-plugin --slots content,sidebar

# 生成导入映射（创建插件后必需）
slotkit generate-imports

# 列出所有插件
slotkit list

# 启用/禁用插件
slotkit enable my-plugin
slotkit disable my-plugin

下一步

1. 创建插件：使用 slotkit create-plugin 搭建新插件
2. 生成导入：创建插件后运行 slotkit generate-imports
3. 开始开发：运行 slotkit dev 启动开发服务器
4. 构建：准备生产构建时运行 slotkit build

配置

生成的 slotkit.config.ts 文件：

import { defineConfig } from '@slotkitjs/core'

export default defineConfig({
  pluginsDir: './plugins',
  // 在这里添加更多配置
})

开发

# 克隆仓库
git clone <repository-url>
cd create-slotkit-app

# 安装依赖
pnpm install

# 构建
pnpm build

# 开发模式（监听）
pnpm dev

许可证

MIT