create-slotkit-app 0.3.0 → 0.3.1

package/dist/index.js

@@ -0,0 +1,494 @@
+#!/usr/bin/env node
+/**
+ * create-slotkit-app - Initialize a new SlotKit project using Vite
+ */
+import { Command } from 'commander';
+import { spawn, execSync } from 'child_process';
+import { existsSync, readFileSync, writeFileSync, mkdirSync } 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}`));
+            }
+        });
+    });
+}
+/**
+ * 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) {
+    // 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 (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;
+`;
+    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>
+  )
+}
+`;
+    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');
+    // 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
+})
+`;
+    writeFileSync(join(projectDir, 'slotkit.config.ts'), slotkitConfig, 'utf-8');
+    // Create plugins directory and default hello-world plugin
+    const pluginsDir = join(projectDir, 'plugins');
+    mkdirSync(pluginsDir, { recursive: true });
+    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
+}`;
+    writeFileSync(join(helloWorldDir, 'manifest.json'), helloWorldManifest + '\n', 'utf-8');
+    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/**/*"
+  ]
+}`;
+    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
+`;
+    writeFileSync(join(helloWorldSrcDir, 'index.tsx'), helloWorldIndexTsx, 'utf-8');
+    // 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)
+            // Use latest versions
+            const slotkitCoreVersion = getLatestVersion('@slotkitjs/core');
+            const slotkitReactVersion = getLatestVersion('@slotkitjs/react');
+            packageJson.dependencies = {
+                ...packageJson.dependencies,
+                '@slotkitjs/core': slotkitCoreVersion,
+                '@slotkitjs/react': slotkitReactVersion
+            };
+            // 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';
+            }
+            // Ensure scripts object exists
+            if (!packageJson.scripts) {
+                packageJson.scripts = {};
+            }
+            packageJson.scripts.dev = 'slotkit generate-imports && slotkit dev';
+            packageJson.scripts.build = 'slotkit generate-imports && slotkit build';
+            packageJson.scripts.preview = packageJson.scripts.preview || 'slotkit preview';
+            packageJson.scripts['generate-imports'] = packageJson.scripts['generate-imports'] || 'slotkit generate-imports';
+            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('  pnpm dev');
+        console.log('  # Optional: pnpm slotkit create-plugin <name> --slots <slots>');
+        console.log('  # predev/prebuild will automatically run slotkit generate-imports');
+    }
+    catch (error) {
+        console.error('[ERROR] Failed to create project:', error.message);
+        process.exit(1);
+    }
+});
+program.parse();

package/package.json

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