create-slotkit-app 0.1.1 → 0.1.3

package/README.md

@@ -0,0 +1,322 @@
+# 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
+- **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
+
+# Create your first plugin
+slotkit create-plugin my-first-plugin --slots content
+
+# Generate plugin import mappings
+slotkit generate-imports
+
+# Start development server
+slotkit 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/                  # Plugin directory (empty initially)
+├── 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` directory
+4. **vite.config.ts**: Vite configuration with file system access for plugins
+
+### 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. **Create plugins**: Use `slotkit create-plugin` to scaffold new plugins
+2. **Generate imports**: Run `slotkit generate-imports` after creating plugins
+3. **Start developing**: Run `slotkit dev` to start the development server
+4. **Build**: Run `slotkit build` when ready to build for production
+
+### 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/dist/index.js

@@ -3,8 +3,8 @@
  * create-slotkit-app - Initialize a new SlotKit project using Vite
  */
 import { Command } from 'commander';
-import { spawn } from 'child_process';
-import { existsSync, readFileSync, writeFileSync, mkdirSync, unlinkSync } from 'fs';
+import { spawn, execSync } from 'child_process';
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
 import { resolve, join } from 'path';
 const program = new Command();
 /**
@@ -28,16 +28,34 @@ function execCommand(command, args, cwd) {
         });
     });
 }
+/**
+ * Get latest version of a package from npm
+ */
+function getLatestVersion(packageName) {
+    try {
+        // Try to get latest version from npm
+        const result = execSync(`npm view ${packageName} version`, { encoding: 'utf-8', stdio: 'pipe' }).trim();
+        return `^${result}`;
+    }
+    catch (error) {
+        // If failed, use 'latest' tag to let npm resolve it
+        console.warn(`[WARN] Could not fetch latest version of ${packageName}, using 'latest' tag`);
+        return 'latest';
+    }
+}
 /**
  * Create SlotKit-specific files
  */
 function createSlotKitFiles(projectDir) {
-    // Create src/app directory
+    // Replace Vite's default App.tsx with SlotKit App
+    // This way we don't need to modify main.tsx
+    const appFilePath = join(projectDir, 'src', 'App.tsx');
+    // Create src/app directory for AppLayout
     const appDir = join(projectDir, 'src', 'app');
     mkdirSync(appDir, { recursive: true });
-    // Create App.tsx
+    // Create App.tsx (replaces Vite's default)
     const appTsx = `import React, { useEffect, useState } from 'react'
-import { AppLayout } from './AppLayout'
+import { AppLayout } from './app/AppLayout'
 import { pluginRegistry, pluginLoader } from '@slotkitjs/core'
 
 /**
@@ -66,7 +84,7 @@ const loadPlugins = async () => {
   }
 }
 
-export const App: React.FC = () => {
+const App: React.FC = () => {
   const [pluginsLoaded, setPluginsLoaded] = useState(false)
   const [loadedPlugins, setLoadedPlugins] = useState<any[]>([])
 
@@ -123,8 +141,10 @@ export const App: React.FC = () => {
     </div>
   )
 }
+
+export default App;
 `;
-    writeFileSync(join(appDir, 'App.tsx'), appTsx, 'utf-8');
+    writeFileSync(appFilePath, appTsx, 'utf-8');
     // Create AppLayout.tsx
     const appLayoutTsx = `import React from 'react'
 import { Slot } from '@slotkitjs/react'
@@ -225,38 +245,8 @@ export const AppLayout: React.FC = () => {
 }
 `;
     writeFileSync(join(appDir, 'AppLayout.css'), appLayoutCss, 'utf-8');
-    // Update main.tsx or main.ts to use SlotKit App
-    // Check for both .tsx and .ts extensions, and rename .ts to .tsx if needed
-    const mainTsxPath = join(projectDir, 'src', 'main.tsx');
-    const mainTsPath = join(projectDir, 'src', 'main.ts');
-    let mainPath = mainTsxPath;
-    if (existsSync(mainTsPath)) {
-        // If main.ts exists, we need to rename it to .tsx since it will contain JSX
-        // But first check if main.tsx already exists
-        if (!existsSync(mainTsxPath)) {
-            // Rename main.ts to main.tsx
-            const mainTsContent = readFileSync(mainTsPath, 'utf-8');
-            writeFileSync(mainTsxPath, mainTsContent, 'utf-8');
-            // Delete the old main.ts
-            unlinkSync(mainTsPath);
-        }
-        mainPath = mainTsxPath;
-    }
-    if (existsSync(mainPath)) {
-        // Update existing main file
-        const mainContent = `import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { App } from './app/App'
-import './style.css'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
-`;
-        writeFileSync(mainPath, mainContent, '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'
 
@@ -368,10 +358,13 @@ program
                 packageJson.dependencies = {};
             }
             // Add SlotKit dependencies (merge with existing)
+            // Use latest versions
+            const slotkitCoreVersion = getLatestVersion('@slotkitjs/core');
+            const slotkitReactVersion = getLatestVersion('@slotkitjs/react');
             packageJson.dependencies = {
                 ...packageJson.dependencies,
-                '@slotkitjs/core': '^0.1.0',
-                '@slotkitjs/react': '^0.1.0'
+                '@slotkitjs/core': slotkitCoreVersion,
+                '@slotkitjs/react': slotkitReactVersion
             };
             // Ensure React dependencies are present (for React templates)
             if (options.template?.includes('react')) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-slotkit-app",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "description": "Create a new SlotKit application",
   "bin": {