create-slotkit-app 0.1.1 → 0.1.2

package/dist/index.js

@@ -4,7 +4,7 @@
  */
 import { Command } from 'commander';
 import { spawn } from 'child_process';
-import { existsSync, readFileSync, writeFileSync, mkdirSync, unlinkSync } from 'fs';
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
 import { resolve, join } from 'path';
 const program = new Command();
 /**
@@ -32,12 +32,15 @@ function execCommand(command, args, cwd) {
  * 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'
 
 /**
@@ -124,7 +127,7 @@ export const App: React.FC = () => {
   )
 }
 `;
-    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 +228,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'
 

package/package.json

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