create-slotkit-app 0.1.7 → 0.3.1

package/README.md

@@ -1,319 +1,319 @@
-# create-slotkit-app
-
-[English](#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
-
-```bash
-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:
-
-```bash
-npx create-slotkit-app my-app
-# or
-pnpm create slotkit-app my-app
-```
-
-### Usage
-
-```bash
-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
-
-```bash
-# 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:
-
-```bash
-# 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:
-
-```typescript
-import { defineConfig } from '@slotkitjs/core'
-
-export default defineConfig({
-  pluginsDir: './plugins',
-  // Add more configuration here
-})
-```
-
-### Development
-
-```bash
-# 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 配置
-- **插件系统就绪**：预配置的插件目录结构
-- **零配置**：开箱即用，使用合理的默认值
-
-### 安装
-
-```bash
-npm install -g create-slotkit-app
-# 或
-yarn global add create-slotkit-app
-# 或
-pnpm add -g create-slotkit-app
-```
-
-或者直接使用 npx/pnpm create：
-
-```bash
-npx create-slotkit-app my-app
-# 或
-pnpm create slotkit-app my-app
-```
-
-### 使用
-
-```bash
-create-slotkit-app <project-name> [options]
-```
-
-**选项:**
-
-- `--template <template>` - 使用的 Vite 模板（默认：`react-ts`）
-  - 可用模板：`react`, `react-ts`, `vue`, `vue-ts`, `vanilla`, `vanilla-ts`
-
-### 快速开始
-
-```bash
-# 创建新的 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 配置，包含插件文件系统访问权限
-
-### 创建插件
-
-创建项目后，你可以创建插件：
-
-```bash
-# 创建插件
-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` 文件：
-
-```typescript
-import { defineConfig } from '@slotkitjs/core'
-
-export default defineConfig({
-  pluginsDir: './plugins',
-  // 在这里添加更多配置
-})
-```
-
-### 开发
-
-```bash
-# 克隆仓库
-git clone <repository-url>
-cd create-slotkit-app
-
-# 安装依赖
-pnpm install
-
-# 构建
-pnpm build
-
-# 开发模式（监听）
-pnpm dev
-```
-
-### 许可证
-
-MIT
-
+# create-slotkit-app
+
+[English](#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
+
+```bash
+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:
+
+```bash
+npx create-slotkit-app my-app
+# or
+pnpm create slotkit-app my-app
+```
+
+### Usage
+
+```bash
+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
+
+```bash
+# 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:
+
+```bash
+# 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:
+
+```typescript
+import { defineConfig } from '@slotkitjs/core'
+
+export default defineConfig({
+  pluginsDir: './plugins',
+  // Add more configuration here
+})
+```
+
+### Development
+
+```bash
+# 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 配置
+- **插件系统就绪**：预配置的插件目录结构
+- **零配置**：开箱即用，使用合理的默认值
+
+### 安装
+
+```bash
+npm install -g create-slotkit-app
+# 或
+yarn global add create-slotkit-app
+# 或
+pnpm add -g create-slotkit-app
+```
+
+或者直接使用 npx/pnpm create：
+
+```bash
+npx create-slotkit-app my-app
+# 或
+pnpm create slotkit-app my-app
+```
+
+### 使用
+
+```bash
+create-slotkit-app <project-name> [options]
+```
+
+**选项:**
+
+- `--template <template>` - 使用的 Vite 模板（默认：`react-ts`）
+  - 可用模板：`react`, `react-ts`, `vue`, `vue-ts`, `vanilla`, `vanilla-ts`
+
+### 快速开始
+
+```bash
+# 创建新的 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 配置，包含插件文件系统访问权限
+
+### 创建插件
+
+创建项目后，你可以创建插件：
+
+```bash
+# 创建插件
+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` 文件：
+
+```typescript
+import { defineConfig } from '@slotkitjs/core'
+
+export default defineConfig({
+  pluginsDir: './plugins',
+  // 在这里添加更多配置
+})
+```
+
+### 开发
+
+```bash
+# 克隆仓库
+git clone <repository-url>
+cd create-slotkit-app
+
+# 安装依赖
+pnpm install
+
+# 构建
+pnpm build
+
+# 开发模式（监听）
+pnpm dev
+```
+
+### 许可证
+
+MIT
+

package/bin/create-slotkit-app.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
-
-import '../dist/index.js'
-
+#!/usr/bin/env node
+
+import '../dist/index.js'
+

package/dist/index.js

@@ -54,218 +54,218 @@ function createSlotKitFiles(projectDir) {
     const appDir = join(projectDir, 'src', 'app');
     mkdirSync(appDir, { recursive: true });
     // Create App.tsx (replaces Vite's default)
-    const appTsx = `import React, { useEffect, useState } from 'react'
-import { AppLayout } from './app/AppLayout'
-import { pluginRegistry, pluginLoader, setPluginImportFunctions } from '@slotkitjs/core'
-
-// Import generated plugin import mappings
-// This file is generated by 'slotkit generate-imports'
-import * as pluginImports from './core/plugin/loader/plugin-imports.generated'
-
-// Initialize plugin import mappings
-if (pluginImports.getPluginImport && pluginImports.getAvailablePluginIds) {
-  setPluginImportFunctions({
-    getPluginImport: (pluginId: string) => {
-      const importFn = pluginImports.getPluginImport(pluginId)
-      if (!importFn) return undefined
-      return () => Promise.resolve(importFn())
-    },
-    getAvailablePluginIds: pluginImports.getAvailablePluginIds,
-    getAllPluginManifests: pluginImports.getAllPluginManifests,
-    getPluginManifest: pluginImports.getPluginManifest
-  })
-} else {
-  console.warn('[WARN] Plugin import functions not found in generated file')
-}
-
-// Load all plugins
-const loadPlugins = async () => {
-  try {
-    const plugins = await pluginLoader.loadAllPlugins()
-
-    plugins.forEach(plugin => {
-      pluginRegistry.register(plugin)
-    })
-
-    return plugins
-  } catch (error) {
-    console.error('[ERROR] Failed to load plugins:', error)
-    return []
-  }
-}
-
-const App: React.FC = () => {
-  const [pluginsLoaded, setPluginsLoaded] = useState(false)
-  const [loadedPlugins, setLoadedPlugins] = useState<any[]>([])
-
-  useEffect(() => {
-    loadPlugins()
-      .then((plugins) => {
-        setPluginsLoaded(true)
-        setLoadedPlugins(plugins)
-      })
-      .catch((error) => {
-        console.error('[ERROR] Failed to load plugins:', error)
-      })
-  }, [])
-
-  return (
-    <div className="app">
-      <AppLayout />
-
-      {/* Plugin loading status indicator */}
-      <div style={{
-        position: 'fixed',
-        top: '10px',
-        right: '10px',
-        background: pluginsLoaded ? '#e8f5e8' : '#fff3cd',
-        padding: '10px',
-        borderRadius: '4px',
-        fontSize: '12px',
-        border: pluginsLoaded ? '1px solid #4caf50' : '1px solid #ffc107',
-        zIndex: 1000
-      }}>
-        {pluginsLoaded ? '[OK] Plugins loaded' : '[INFO] Loading plugins...'}
-      </div>
-
-      {/* Loaded plugins list */}
-      {loadedPlugins.length > 0 && (
-        <div style={{
-          position: 'fixed',
-          top: '50px',
-          right: '10px',
-          background: '#f3e5f5',
-          padding: '10px',
-          borderRadius: '4px',
-          fontSize: '11px',
-          border: '1px solid #9c27b0',
-          zIndex: 1000,
-          maxWidth: '200px'
-        }}>
-          <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>Loaded Plugins:</div>
-          {loadedPlugins.map(plugin => (
-            <div key={plugin.id} style={{ marginBottom: '2px' }}>
-              • {plugin.name} v{plugin.version}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default App;
+    const appTsx = `import React, { useEffect, useState } from 'react'
+import { AppLayout } from './app/AppLayout'
+import { pluginRegistry, pluginLoader, setPluginImportFunctions } from '@slotkitjs/core'
+
+// Import generated plugin import mappings
+// This file is generated by 'slotkit generate-imports'
+import * as pluginImports from './core/plugin/loader/plugin-imports.generated'
+
+// Initialize plugin import mappings
+if (pluginImports.getPluginImport && pluginImports.getAvailablePluginIds) {
+  setPluginImportFunctions({
+    getPluginImport: (pluginId: string) => {
+      const importFn = pluginImports.getPluginImport(pluginId)
+      if (!importFn) return undefined
+      return () => Promise.resolve(importFn())
+    },
+    getAvailablePluginIds: pluginImports.getAvailablePluginIds,
+    getAllPluginManifests: pluginImports.getAllPluginManifests,
+    getPluginManifest: pluginImports.getPluginManifest
+  })
+} else {
+  console.warn('[WARN] Plugin import functions not found in generated file')
+}
+
+// Load all plugins
+const loadPlugins = async () => {
+  try {
+    const plugins = await pluginLoader.loadAllPlugins()
+
+    plugins.forEach(plugin => {
+      pluginRegistry.register(plugin)
+    })
+
+    return plugins
+  } catch (error) {
+    console.error('[ERROR] Failed to load plugins:', error)
+    return []
+  }
+}
+
+const App: React.FC = () => {
+  const [pluginsLoaded, setPluginsLoaded] = useState(false)
+  const [loadedPlugins, setLoadedPlugins] = useState<any[]>([])
+
+  useEffect(() => {
+    loadPlugins()
+      .then((plugins) => {
+        setPluginsLoaded(true)
+        setLoadedPlugins(plugins)
+      })
+      .catch((error) => {
+        console.error('[ERROR] Failed to load plugins:', error)
+      })
+  }, [])
+
+  return (
+    <div className="app">
+      <AppLayout />
+
+      {/* Plugin loading status indicator */}
+      <div style={{
+        position: 'fixed',
+        top: '10px',
+        right: '10px',
+        background: pluginsLoaded ? '#e8f5e8' : '#fff3cd',
+        padding: '10px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        border: pluginsLoaded ? '1px solid #4caf50' : '1px solid #ffc107',
+        zIndex: 1000
+      }}>
+        {pluginsLoaded ? '[OK] Plugins loaded' : '[INFO] Loading plugins...'}
+      </div>
+
+      {/* Loaded plugins list */}
+      {loadedPlugins.length > 0 && (
+        <div style={{
+          position: 'fixed',
+          top: '50px',
+          right: '10px',
+          background: '#f3e5f5',
+          padding: '10px',
+          borderRadius: '4px',
+          fontSize: '11px',
+          border: '1px solid #9c27b0',
+          zIndex: 1000,
+          maxWidth: '200px'
+        }}>
+          <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>Loaded Plugins:</div>
+          {loadedPlugins.map(plugin => (
+            <div key={plugin.id} style={{ marginBottom: '2px' }}>
+              • {plugin.name} v{plugin.version}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default App;
 `;
     writeFileSync(appFilePath, appTsx, 'utf-8');
     // Create AppLayout.tsx
-    const appLayoutTsx = `import React from 'react'
-import { Slot } from '@slotkitjs/react'
-import './AppLayout.css'
-
-export const AppLayout: React.FC = () => {
-  return (
-    <div className="app-layout">
-      <header className="app-header">
-        <h1>SlotKit App</h1>
-        <Slot name="header" />
-      </header>
-      
-      <main className="app-main">
-        <aside className="app-sidebar">
-          <h3>Sidebar</h3>
-          <Slot name="sidebar">
-            <p style={{ color: '#666', fontSize: '14px' }}>Waiting for plugins...</p>
-          </Slot>
-        </aside>
-        
-        <section className="app-content">
-          <h3>Main Content</h3>
-          <Slot name="content">
-            <p style={{ color: '#666', fontSize: '14px' }}>Waiting for plugins...</p>
-          </Slot>
-        </section>
-      </main>
-      
-      <footer className="app-footer">
-        <Slot name="footer" />
-      </footer>
-    </div>
-  )
-}
+    const appLayoutTsx = `import React from 'react'
+import { Slot } from '@slotkitjs/react'
+import './AppLayout.css'
+
+export const AppLayout: React.FC = () => {
+  return (
+    <div className="app-layout">
+      <header className="app-header">
+        <h1>SlotKit App</h1>
+        <Slot name="header" />
+      </header>
+      
+      <main className="app-main">
+        <aside className="app-sidebar">
+          <h3>Sidebar</h3>
+          <Slot name="sidebar">
+            <p style={{ color: '#666', fontSize: '14px' }}>Waiting for plugins...</p>
+          </Slot>
+        </aside>
+        
+        <section className="app-content">
+          <h3>Main Content</h3>
+          <Slot name="content">
+            <p style={{ color: '#666', fontSize: '14px' }}>Waiting for plugins...</p>
+          </Slot>
+        </section>
+      </main>
+      
+      <footer className="app-footer">
+        <Slot name="footer" />
+      </footer>
+    </div>
+  )
+}
 `;
     writeFileSync(join(appDir, 'AppLayout.tsx'), appLayoutTsx, 'utf-8');
     // Create AppLayout.css
-    const appLayoutCss = `.app-layout {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.app-header {
-  background: #2196f3;
-  color: white;
-  padding: 1rem 2rem;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.app-header h1 {
-  margin: 0;
-  font-size: 1.5rem;
-}
-
-.app-main {
-  display: flex;
-  flex: 1;
-  gap: 1rem;
-  padding: 1rem;
-}
-
-.app-sidebar {
-  width: 250px;
-  background: #f5f5f5;
-  padding: 1rem;
-  border-radius: 8px;
-  border: 1px solid #ddd;
-}
-
-.app-sidebar h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.1rem;
-  color: #333;
-}
-
-.app-content {
-  flex: 1;
-  background: white;
-  padding: 1rem;
-  border-radius: 8px;
-  border: 1px solid #ddd;
-}
-
-.app-content h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.1rem;
-  color: #333;
-}
-
-.app-footer {
-  background: #f5f5f5;
-  padding: 1rem 2rem;
-  border-top: 1px solid #ddd;
-  text-align: center;
-  color: #666;
-}
+    const appLayoutCss = `.app-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.app-header {
+  background: #2196f3;
+  color: white;
+  padding: 1rem 2rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.app-header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+.app-main {
+  display: flex;
+  flex: 1;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.app-sidebar {
+  width: 250px;
+  background: #f5f5f5;
+  padding: 1rem;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+
+.app-sidebar h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.1rem;
+  color: #333;
+}
+
+.app-content {
+  flex: 1;
+  background: white;
+  padding: 1rem;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+
+.app-content h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.1rem;
+  color: #333;
+}
+
+.app-footer {
+  background: #f5f5f5;
+  padding: 1rem 2rem;
+  border-top: 1px solid #ddd;
+  text-align: center;
+  color: #666;
+}
 `;
     writeFileSync(join(appDir, 'AppLayout.css'), appLayoutCss, 'utf-8');
     // No need to modify main.tsx - Vite's default already imports './App'
     // We replaced src/App.tsx above, so it will automatically work
     // Create slotkit.config.ts
-    const slotkitConfig = `import { defineConfig } from '@slotkitjs/core'
-
-export default defineConfig({
-  pluginsDir: './plugins',
-  // Add more configuration here
-})
+    const slotkitConfig = `import { defineConfig } from '@slotkitjs/core'
+
+export default defineConfig({
+  pluginsDir: './plugins',
+  // Add more configuration here
+})
 `;
     writeFileSync(join(projectDir, 'slotkit.config.ts'), slotkitConfig, 'utf-8');
     // Create plugins directory and default hello-world plugin
@@ -274,65 +274,65 @@ export default defineConfig({
     const helloWorldDir = join(pluginsDir, 'helloworld');
     const helloWorldSrcDir = join(helloWorldDir, 'src');
     mkdirSync(helloWorldSrcDir, { recursive: true });
-    const helloWorldManifest = `{
-  "id": "helloworld",
-  "name": "Hello-world Plugin",
-  "version": "1.0.0",
-  "description": "A built-in hello-world plugin",
-  "author": "SlotKit Team",
-  "entry": "./src/index.tsx",
-  "slots": [
-    "content"
-  ],
-  "enabled": true
+    const helloWorldManifest = `{
+  "id": "helloworld",
+  "name": "Hello-world Plugin",
+  "version": "1.0.0",
+  "description": "A built-in hello-world plugin",
+  "author": "SlotKit Team",
+  "entry": "./src/index.tsx",
+  "slots": [
+    "content"
+  ],
+  "enabled": true
 }`;
     writeFileSync(join(helloWorldDir, 'manifest.json'), helloWorldManifest + '\n', 'utf-8');
-    const helloWorldPackageJson = `{
-  "name": "plugin-helloworld",
-  "version": "1.0.0",
-  "main": "src/index.tsx",
-  "private": true
+    const helloWorldPackageJson = `{
+  "name": "plugin-helloworld",
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "private": true
 }`;
     writeFileSync(join(helloWorldDir, 'package.json'), helloWorldPackageJson + '\n', 'utf-8');
-    const helloWorldTsconfig = `{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src/**/*"
-  ]
+    const helloWorldTsconfig = `{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src/**/*"
+  ]
 }`;
     writeFileSync(join(helloWorldDir, 'tsconfig.json'), helloWorldTsconfig + '\n', 'utf-8');
-    const helloWorldIndexTsx = `import React from 'react'
-
-const HelloWorldComponent: React.FC = () => {
-  return (
-    <div
-      style={{
-        padding: '1rem',
-        background: '#f5f5f5',
-        border: '1px solid #ddd',
-        borderRadius: '8px',
-        margin: '0.5rem 0'
-      }}
-    >
-      <h3>Hello-world Plugin</h3>
-      <p>This is the default hello-world plugin generated by create-slotkit-app.</p>
-    </div>
-  )
-}
-
-const helloworldPlugin = {
-  id: 'helloworld',
-  name: 'Hello-world Plugin',
-  version: '1.0.0',
-  component: HelloWorldComponent,
-  slots: ['content']
-}
-
-export { helloworldPlugin }
-export default helloworldPlugin
+    const helloWorldIndexTsx = `import React from 'react'
+
+const HelloWorldComponent: React.FC = () => {
+  return (
+    <div
+      style={{
+        padding: '1rem',
+        background: '#f5f5f5',
+        border: '1px solid #ddd',
+        borderRadius: '8px',
+        margin: '0.5rem 0'
+      }}
+    >
+      <h3>Hello-world Plugin</h3>
+      <p>This is the default hello-world plugin generated by create-slotkit-app.</p>
+    </div>
+  )
+}
+
+const helloworldPlugin = {
+  id: 'helloworld',
+  name: 'Hello-world Plugin',
+  version: '1.0.0',
+  component: HelloWorldComponent,
+  slots: ['content']
+}
+
+export { helloworldPlugin }
+export default helloworldPlugin
 `;
     writeFileSync(join(helloWorldSrcDir, 'index.tsx'), helloWorldIndexTsx, 'utf-8');
     // Create or update vite.config.ts with SlotKit-specific configuration
@@ -348,12 +348,12 @@ export default helloworldPlugin
         if (!viteConfig.includes('server:')) {
             // Find the defineConfig call and add server config inside it
             if (viteConfig.includes('export default defineConfig')) {
-                viteConfig = viteConfig.replace(/export default defineConfig\(\{/, `export default defineConfig({
-  server: {
-    fs: {
-      // Allow access to plugin directory
-      allow: ['..', '../..', '../../..']
-    }
+                viteConfig = viteConfig.replace(/export default defineConfig\(\{/, `export default defineConfig({
+  server: {
+    fs: {
+      // Allow access to plugin directory
+      allow: ['..', '../..', '../../..']
+    }
   },`);
                 writeFileSync(existingConfigPath, viteConfig, 'utf-8');
             }
@@ -361,18 +361,18 @@ export default helloworldPlugin
     }
     else {
         // Create new vite.config.ts
-        const viteConfigContent = `import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    fs: {
-      // Allow access to plugin directory
-      allow: ['..', '../..', '../../..']
-    }
-  }
-})
+        const viteConfigContent = `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    fs: {
+      // Allow access to plugin directory
+      allow: ['..', '../..', '../../..']
+    }
+  }
+})
 `;
         writeFileSync(viteConfigPath, viteConfigContent, 'utf-8');
     }

package/package.json

@@ -1,31 +1,31 @@
-{
-  "name": "create-slotkit-app",
-  "version": "0.1.7",
-  "type": "module",
-  "description": "Create a new SlotKit application",
-  "bin": {
-    "create-slotkit-app": "./bin/create-slotkit-app.js"
-  },
-  "files": [
-    "bin",
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch"
-  },
-  "keywords": [
-    "slotkit",
-    "create-app",
-    "scaffold"
-  ],
-  "author": "liusnew <liushuinew@gmail.com>",
-  "license": "MIT",
-  "dependencies": {
-    "commander": "^12.1.0"
-  },
-  "devDependencies": {
-    "@types/node": "^24.6.0",
-    "typescript": "~5.9.3"
-  }
-}
+{
+  "name": "create-slotkit-app",
+  "version": "0.3.1",
+  "type": "module",
+  "description": "Create a new SlotKit application",
+  "bin": {
+    "create-slotkit-app": "./bin/create-slotkit-app.js"
+  },
+  "files": [
+    "bin",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "keywords": [
+    "slotkit",
+    "create-app",
+    "scaffold"
+  ],
+  "author": "liusnew <liushuinew@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "commander": "^12.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.0",
+    "typescript": "~5.9.3"
+  }
+}