create-slotkit-app 0.1.0

package/bin/create-slotkit-app.js

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

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+/**
+ * create-slotkit-app - Initialize a new SlotKit project using Vite
+ */
+export {};

package/dist/index.js

@@ -0,0 +1,423 @@
+#!/usr/bin/env node
+/**
+ * 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 { resolve, join } from 'path';
+const program = new Command();
+/**
+ * Execute command and wait for completion
+ */
+function execCommand(command, args, cwd) {
+    return new Promise((resolve, reject) => {
+        const child = spawn(command, args, {
+            cwd,
+            stdio: 'inherit',
+            shell: true
+        });
+        child.on('error', reject);
+        child.on('exit', (code) => {
+            if (code === 0) {
+                resolve();
+            }
+            else {
+                reject(new Error(`Command failed with exit code ${code}`));
+            }
+        });
+    });
+}
+/**
+ * Create SlotKit-specific files
+ */
+function createSlotKitFiles(projectDir) {
+    // Create src/app directory
+    const appDir = join(projectDir, 'src', 'app');
+    mkdirSync(appDir, { recursive: true });
+    // Create App.tsx
+    const appTsx = `import React, { useEffect, useState } from 'react'
+import { AppLayout } from './AppLayout'
+import { pluginRegistry, pluginLoader } from '@slotkitjs/core/core'
+
+/**
+ * Load all plugins
+ */
+const loadPlugins = async () => {
+  try {
+    console.log('[INFO] Starting to load plugins...')
+    
+    // Load all plugins using plugin loader
+    const plugins = await pluginLoader.loadAllPlugins()
+    
+    // Register all plugins to registry
+    plugins.forEach(plugin => {
+      pluginRegistry.register(plugin)
+      console.log(\`[INFO] Plugin "\${plugin.name}" registered to slots:\`, plugin.slots)
+    })
+    
+    console.log('[OK] Plugin loading completed!')
+    console.log(\`[INFO] Total \${plugins.length} plugins loaded\`)
+    
+    return plugins
+  } catch (error) {
+    console.error('[ERROR] Failed to load plugins:', error)
+    return []
+  }
+}
+
+export 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: \`1px solid \${pluginsLoaded ? '#4caf50' : '#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>
+  )
+}
+`;
+    writeFileSync(join(appDir, 'App.tsx'), 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>
+  )
+}
+`;
+    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;
+}
+`;
+    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');
+    }
+    // Create slotkit.config.ts
+    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
+    mkdirSync(join(projectDir, 'plugins'), { recursive: true });
+    // Create or update vite.config.ts with SlotKit-specific configuration
+    const viteConfigPath = join(projectDir, 'vite.config.ts');
+    const viteConfigJsPath = join(projectDir, 'vite.config.js');
+    // Check if vite.config.ts or vite.config.js exists
+    const existingConfigPath = existsSync(viteConfigPath) ? viteConfigPath :
+        (existsSync(viteConfigJsPath) ? viteConfigJsPath : null);
+    if (existingConfigPath) {
+        // Update existing config
+        let viteConfig = readFileSync(existingConfigPath, 'utf-8');
+        // Add server configuration if not present
+        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: ['..', '../..', '../../..']
+    }
+  },`);
+                writeFileSync(existingConfigPath, viteConfig, 'utf-8');
+            }
+        }
+    }
+    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: ['..', '../..', '../../..']
+    }
+  }
+})
+`;
+        writeFileSync(viteConfigPath, viteConfigContent, 'utf-8');
+    }
+}
+program
+    .name('create-slotkit-app')
+    .description('Create a new SlotKit application')
+    .argument('<project-name>', 'Project name')
+    .option('--template <template>', 'Vite template to use', 'react-ts')
+    .action(async (projectName, options) => {
+    const projectDir = resolve(process.cwd(), projectName);
+    if (existsSync(projectDir)) {
+        console.error(`[ERROR] Directory "${projectName}" already exists`);
+        process.exit(1);
+    }
+    // Extract just the project name (last part of path)
+    const actualProjectName = projectName.split(/[/\\]/).pop() || projectName;
+    const packageName = actualProjectName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+    console.log(`[INFO] Creating SlotKit app: ${actualProjectName}`);
+    console.log(`[INFO] Using Vite template: ${options.template || 'react'}`);
+    try {
+        // Step 1: Use Vite to create the base project
+        // Vite creates the project in a subdirectory, so we need to extract just the name
+        console.log('[INFO] Step 1: Creating Vite project...');
+        // Create parent directory if needed (e.g., examples/test-project -> create examples first)
+        const parentDir = resolve(projectDir, '..');
+        if (!existsSync(parentDir)) {
+            mkdirSync(parentDir, { recursive: true });
+        }
+        // Try pnpm first, fallback to npm if pnpm fails
+        // Use non-interactive flags to skip prompts
+        const createCommand = 'pnpm';
+        const createArgs = [
+            'create', 'vite', actualProjectName,
+            '--template', options.template || 'react-ts',
+            '--yes' // Skip prompts
+        ];
+        try {
+            // Run in the parent directory so Vite creates the project in the right place
+            await execCommand(createCommand, createArgs, parentDir);
+        }
+        catch (error) {
+            // If pnpm fails, try npm
+            console.log('[INFO] pnpm create vite failed, trying npm...');
+            const npmArgs = [
+                'create', 'vite@latest', actualProjectName,
+                '--', '--template', options.template || 'react-ts'
+            ];
+            await execCommand('npm', npmArgs, parentDir);
+        }
+        // Step 2: Update package.json with SlotKit dependencies
+        console.log('[INFO] Step 2: Adding SlotKit dependencies...');
+        const packageJsonPath = join(projectDir, 'package.json');
+        if (existsSync(packageJsonPath)) {
+            const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+            // Update package name
+            packageJson.name = packageName;
+            // Ensure dependencies object exists
+            if (!packageJson.dependencies) {
+                packageJson.dependencies = {};
+            }
+            // Add SlotKit dependencies (merge with existing)
+            packageJson.dependencies = {
+                ...packageJson.dependencies,
+                '@slotkitjs/core': '^0.1.0',
+                '@slotkitjs/react': '^0.1.0'
+            };
+            // Ensure React dependencies are present (for React templates)
+            if (options.template?.includes('react')) {
+                packageJson.dependencies['react'] = packageJson.dependencies['react'] || '^19.1.1';
+                packageJson.dependencies['react-dom'] = packageJson.dependencies['react-dom'] || '^19.1.1';
+                // Add React types to devDependencies if not present
+                if (!packageJson.devDependencies) {
+                    packageJson.devDependencies = {};
+                }
+                packageJson.devDependencies['@types/react'] = packageJson.devDependencies['@types/react'] || '^19.1.16';
+                packageJson.devDependencies['@types/react-dom'] = packageJson.devDependencies['@types/react-dom'] || '^19.1.9';
+                // Ensure @vitejs/plugin-react is in devDependencies
+                packageJson.devDependencies['@vitejs/plugin-react'] = packageJson.devDependencies['@vitejs/plugin-react'] || '^5.0.4';
+            }
+            // Update scripts to use slotkit commands (merge with existing, don't overwrite)
+            packageJson.scripts = {
+                ...packageJson.scripts,
+                'dev': 'slotkit dev',
+                'build': 'slotkit build',
+                'preview': 'slotkit preview'
+            };
+            writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf-8');
+        }
+        // Step 3: Create SlotKit-specific files
+        console.log('[INFO] Step 3: Creating SlotKit-specific files...');
+        createSlotKitFiles(projectDir);
+        // Step 4: Create .gitignore entry for generated files
+        const gitignorePath = join(projectDir, '.gitignore');
+        if (existsSync(gitignorePath)) {
+            const gitignore = readFileSync(gitignorePath, 'utf-8');
+            if (!gitignore.includes('plugin-imports.generated.ts')) {
+                writeFileSync(gitignorePath, gitignore + '\n# Generated files\nsrc/core/plugin/loader/plugin-imports.generated.ts\n', 'utf-8');
+            }
+        }
+        console.log('[OK] Project created successfully!');
+        console.log(`[INFO] Project location: ${projectDir}`);
+        console.log('\n[INFO] Next steps:');
+        console.log(`  cd ${projectName}`);
+        console.log('  pnpm install');
+        console.log('  slotkit create-plugin <plugin-name> --slots <slots>');
+        console.log('  slotkit generate-imports');
+        console.log('  slotkit dev');
+    }
+    catch (error) {
+        console.error('[ERROR] Failed to create project:', error.message);
+        process.exit(1);
+    }
+});
+program.parse();

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "create-slotkit-app",
+  "version": "0.1.0",
+  "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"
+  }
+}
+