create-slotkit-app 0.1.3 → 0.1.7

package/README.md

@@ -15,7 +15,8 @@
 - **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
+- **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
@@ -59,14 +60,8 @@ 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
+# Start development server (generate-imports runs automatically)
+pnpm dev
 ```
 
 ### What Gets Created
@@ -81,7 +76,8 @@ my-slotkit-app/
 │   │   ├── AppLayout.tsx    # Layout with Slot components
 │   │   └── AppLayout.css    # Layout styles
 │   └── main.tsx             # Entry point
-├── plugins/                  # Plugin directory (empty initially)
+├── plugins/
+│   └── helloworld/          # Default sample plugin
 ├── slotkit.config.ts         # SlotKit configuration
 ├── vite.config.ts           # Vite configuration
 ├── package.json             # Project dependencies
@@ -98,8 +94,9 @@ The generated project includes:
    - `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
+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
 
@@ -122,10 +119,10 @@ 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
+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
 

package/dist/index.js

@@ -56,27 +56,37 @@ function createSlotKitFiles(projectDir) {
     // Create App.tsx (replaces Vite's default)
     const appTsx = `import React, { useEffect, useState } from 'react'
 import { AppLayout } from './app/AppLayout'
-import { pluginRegistry, pluginLoader } from '@slotkitjs/core'
+import { pluginRegistry, pluginLoader, setPluginImportFunctions } from '@slotkitjs/core'
 
-/**
- * Load all plugins
- */
+// 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 {
-    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)
@@ -89,41 +99,43 @@ const App: React.FC = () => {
   const [loadedPlugins, setLoadedPlugins] = useState<any[]>([])
 
   useEffect(() => {
-    loadPlugins().then((plugins) => {
-      setPluginsLoaded(true)
-      setLoadedPlugins(plugins)
-    }).catch((error) => {
-      console.error('[ERROR] Failed to load plugins:', error)
-    })
+    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', 
+      <div style={{
+        position: 'fixed',
+        top: '10px',
+        right: '10px',
+        background: pluginsLoaded ? '#e8f5e8' : '#fff3cd',
+        padding: '10px',
         borderRadius: '4px',
         fontSize: '12px',
-        border: \`1px solid \${pluginsLoaded ? '#4caf50' : '#ffc107'}\`,
+        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', 
+        <div style={{
+          position: 'fixed',
+          top: '50px',
+          right: '10px',
+          background: '#f3e5f5',
+          padding: '10px',
           borderRadius: '4px',
           fontSize: '11px',
           border: '1px solid #9c27b0',
@@ -256,8 +268,73 @@ export default defineConfig({
 })
 `;
     writeFileSync(join(projectDir, 'slotkit.config.ts'), slotkitConfig, 'utf-8');
-    // Create plugins directory
-    mkdirSync(join(projectDir, 'plugins'), { recursive: true });
+    // 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');
@@ -379,13 +456,14 @@ program
                 // 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'
-            };
+            // 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
@@ -404,9 +482,9 @@ program
         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');
+        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);

package/package.json

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