responsive-system 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "responsive-system",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Sistema de layout responsivo con auto-scaling para Tailwind CSS",
   "type": "module",
   "main": "./dist/responsive-system.cjs",

package/scripts/postinstall.js

@@ -19,12 +19,14 @@ const __dirname = path.dirname(__filename)
 const projectRoot = process.cwd()
 const packageJsonPath = path.join(projectRoot, 'package.json')
 
-console.log('📦 responsive-system: Ejecutando postinstall...')
-console.log(`   Directorio del proyecto: ${projectRoot}`)
+console.log('')
+console.log('📦 responsive-system: Iniciando postinstall...')
+console.log(`   Directorio: ${projectRoot}`)
+console.log('')
 
 // Verificar si package.json existe
 if (!fs.existsSync(packageJsonPath)) {
-  console.log('📦 responsive-system: No se encontró package.json, saltando postinstall')
+  console.log('⚠️  responsive-system: No se encontró package.json, saltando postinstall')
   process.exit(0)
 }
 
@@ -42,7 +44,6 @@ const isProjectEmpty = !packageJson.dependencies ||
                        (Object.keys(packageJson.dependencies).length === 1 && packageJson.dependencies['responsive-system'])
 
 // Verificar qué está instalado SOLO en package.json (no en node_modules)
-// Esto asegura que se agreguen al package.json aunque estén como dependencias transitivas
 const hasReact = (packageJson.dependencies && packageJson.dependencies.react) || 
                  (packageJson.devDependencies && packageJson.devDependencies.react)
 
@@ -51,122 +52,83 @@ const hasVite = packageJson.devDependencies && packageJson.devDependencies.vite
 const tailwindInDevDeps = packageJson.devDependencies && packageJson.devDependencies.tailwindcss
 const typescriptInDevDeps = packageJson.devDependencies && packageJson.devDependencies.typescript
 
-// Separar paquetes: React (dependencies) vs TypeScript/Tailwind/Vite (devDependencies)
-const reactPackages = []
-const devPackages = []
+let needsUpdate = false
 
-// React
+// ESTRATEGIA: Modificar directamente el package.json primero, luego instalar
+console.log('📦 responsive-system: Verificando dependencias...')
+
+// Agregar React a dependencies
 if (!hasReact) {
-  reactPackages.push('react@^19.1.1', 'react-dom@^19.1.1')
+  console.log('   ➕ Agregando React a dependencies...')
+  if (!packageJson.dependencies) {
+    packageJson.dependencies = {}
+  }
+  packageJson.dependencies['react'] = '^19.1.1'
+  packageJson.dependencies['react-dom'] = '^19.1.1'
+  needsUpdate = true
 }
 
-// Vite (si el proyecto está vacío)
+// Agregar Vite si el proyecto está vacío
 if (isProjectEmpty && !hasVite) {
-  devPackages.push('vite@^7.1.7', '@vitejs/plugin-react@^5.0.4')
+  console.log('   ➕ Agregando Vite a devDependencies...')
+  if (!packageJson.devDependencies) {
+    packageJson.devDependencies = {}
+  }
+  packageJson.devDependencies['vite'] = '^7.1.7'
+  packageJson.devDependencies['@vitejs/plugin-react'] = '^5.0.4'
+  needsUpdate = true
 }
 
-// TypeScript y Tailwind
+// Agregar TypeScript y Tailwind a devDependencies
 if (!tailwindInDevDeps) {
-  devPackages.push('tailwindcss@^4.1.14', 'postcss@^8.5.6', 'autoprefixer@^10.4.21')
+  console.log('   ➕ Agregando Tailwind a devDependencies...')
+  if (!packageJson.devDependencies) {
+    packageJson.devDependencies = {}
+  }
+  packageJson.devDependencies['tailwindcss'] = '^4.1.14'
+  packageJson.devDependencies['postcss'] = '^8.5.6'
+  packageJson.devDependencies['autoprefixer'] = '^10.4.21'
+  needsUpdate = true
 }
 
 if (!typescriptInDevDeps) {
-  devPackages.push('typescript@~5.9.3', '@types/react@^19.1.16', '@types/react-dom@^19.1.9')
-}
-
-// Instalar React como dependencies (se necesita en runtime)
-// Usar --save explícitamente para asegurar que se agregue al package.json
-if (reactPackages.length > 0) {
-  console.log('📦 responsive-system: Instalando React...')
-  console.log(`   Instalando: ${reactPackages.join(', ')}`)
-  try {
-    execSync(`npm install ${reactPackages.join(' ')} --save`, {
-      stdio: 'inherit',
-      cwd: projectRoot
-    })
-    
-    // Verificar que se agregaron al package.json
-    const updatedPackageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
-    const reactAdded = updatedPackageJson.dependencies && updatedPackageJson.dependencies.react
-    if (reactAdded) {
-      console.log('✅ responsive-system: React instalado y agregado a package.json')
-    } else {
-      console.warn('⚠️  responsive-system: React instalado pero no se agregó a package.json, agregando manualmente...')
-      // Agregar manualmente si npm install no lo hizo
-      if (!updatedPackageJson.dependencies) {
-        updatedPackageJson.dependencies = {}
-      }
-      updatedPackageJson.dependencies['react'] = '^19.1.1'
-      updatedPackageJson.dependencies['react-dom'] = '^19.1.1'
-      fs.writeFileSync(packageJsonPath, JSON.stringify(updatedPackageJson, null, 2))
-      console.log('✅ responsive-system: React agregado manualmente a package.json')
-    }
-  } catch (error) {
-    console.warn('⚠️  responsive-system: Error al instalar React, agregando manualmente a package.json...')
-    // Agregar manualmente al package.json
-    if (!packageJson.dependencies) {
-      packageJson.dependencies = {}
-    }
-    packageJson.dependencies['react'] = '^19.1.1'
-    packageJson.dependencies['react-dom'] = '^19.1.1'
-    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
-    console.log('✅ responsive-system: React agregado manualmente a package.json')
+  console.log('   ➕ Agregando TypeScript a devDependencies...')
+  if (!packageJson.devDependencies) {
+    packageJson.devDependencies = {}
   }
+  packageJson.devDependencies['typescript'] = '~5.9.3'
+  packageJson.devDependencies['@types/react'] = '^19.1.16'
+  packageJson.devDependencies['@types/react-dom'] = '^19.1.9'
+  needsUpdate = true
 }
 
-// Instalar TypeScript, Tailwind y Vite como devDependencies
-if (devPackages.length > 0) {
-  console.log('📦 responsive-system: Instalando TypeScript, Tailwind y Vite...')
-  console.log(`   Instalando: ${devPackages.join(', ')}`)
+// Escribir package.json modificado
+if (needsUpdate) {
+  console.log('')
+  console.log('📝 responsive-system: Actualizando package.json...')
+  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
+  console.log('✅ responsive-system: package.json actualizado')
+  console.log('')
+  
+  // Ahora instalar las dependencias
+  console.log('📦 responsive-system: Instalando dependencias...')
   try {
-    execSync(`npm install ${devPackages.join(' ')} --save-dev`, {
+    execSync('npm install', {
       stdio: 'inherit',
       cwd: projectRoot
     })
-    
-    // Verificar que se agregaron al package.json
-    const updatedPackageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
-    const allAdded = devPackages.every(pkg => {
-      const pkgName = pkg.split('@')[0]
-      return updatedPackageJson.devDependencies && updatedPackageJson.devDependencies[pkgName]
-    })
-    
-    if (allAdded) {
-      console.log('✅ responsive-system: Dependencias de desarrollo instaladas y agregadas a package.json')
-    } else {
-      console.warn('⚠️  responsive-system: Dependencias instaladas pero no todas se agregaron a package.json, agregando manualmente...')
-      // Agregar manualmente las que faltan
-      if (!updatedPackageJson.devDependencies) {
-        updatedPackageJson.devDependencies = {}
-      }
-      devPackages.forEach(pkg => {
-        const [pkgName, version] = pkg.includes('@') ? pkg.split('@') : [pkg, 'latest']
-        if (!updatedPackageJson.devDependencies[pkgName]) {
-          updatedPackageJson.devDependencies[pkgName] = version || 'latest'
-        }
-      })
-      fs.writeFileSync(packageJsonPath, JSON.stringify(updatedPackageJson, null, 2))
-      console.log('✅ responsive-system: Dependencias agregadas manualmente a package.json')
-    }
+    console.log('✅ responsive-system: Dependencias instaladas correctamente')
   } catch (error) {
-    console.warn('⚠️  responsive-system: Error al instalar dependencias de desarrollo, agregando manualmente a package.json...')
-    // Agregar manualmente al package.json
-    if (!packageJson.devDependencies) {
-      packageJson.devDependencies = {}
-    }
-    devPackages.forEach(pkg => {
-      const parts = pkg.split('@')
-      const pkgName = parts[0]
-      const version = parts[1] || 'latest'
-      packageJson.devDependencies[pkgName] = version
-    })
-    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
-    console.log('✅ responsive-system: Dependencias agregadas manualmente a package.json')
+    console.error('❌ responsive-system: Error al instalar dependencias:', error.message)
+    console.log('⚠️  responsive-system: Las dependencias están en package.json, ejecuta "npm install" manualmente')
   }
+} else {
+  console.log('✅ responsive-system: Todas las dependencias ya están en package.json')
 }
 
 // Si el proyecto está vacío, crear estructura base
 if (isProjectEmpty) {
+  console.log('')
   console.log('📦 responsive-system: Proyecto vacío detectado, creando estructura base...')
   
   // Crear estructura de directorios
@@ -175,6 +137,7 @@ if (isProjectEmpty) {
     const dirPath = path.join(projectRoot, dir)
     if (!fs.existsSync(dirPath)) {
       fs.mkdirSync(dirPath, { recursive: true })
+      console.log(`   ✅ Creado: ${dir}/`)
     }
   })
   
@@ -183,14 +146,13 @@ if (isProjectEmpty) {
   if (!fs.existsSync(viteConfigPath)) {
     const viteConfig = `import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import responsiveScalePlugin from 'responsive-system/plugin'
 
 export default defineConfig({
   plugins: [react()],
 })
 `
     fs.writeFileSync(viteConfigPath, viteConfig)
-    console.log('✅ responsive-system: vite.config.ts creado')
+    console.log('   ✅ Creado: vite.config.ts')
   }
   
   // Crear tailwind.config.js
@@ -232,7 +194,7 @@ export default {
 }
 `
     fs.writeFileSync(tailwindConfigPath, tailwindConfig)
-    console.log('✅ responsive-system: tailwind.config.js creado')
+    console.log('   ✅ Creado: tailwind.config.js')
   }
   
   // Crear postcss.config.js
@@ -246,7 +208,7 @@ export default {
 }
 `
     fs.writeFileSync(postcssConfigPath, postcssConfig)
-    console.log('✅ responsive-system: postcss.config.js creado')
+    console.log('   ✅ Creado: postcss.config.js')
   }
   
   // Crear tsconfig.json
@@ -275,7 +237,7 @@ export default {
 }
 `
     fs.writeFileSync(tsconfigPath, tsconfig)
-    console.log('✅ responsive-system: tsconfig.json creado')
+    console.log('   ✅ Creado: tsconfig.json')
   }
   
   // Crear tsconfig.node.json
@@ -293,6 +255,7 @@ export default {
 }
 `
     fs.writeFileSync(tsconfigNodePath, tsconfigNode)
+    console.log('   ✅ Creado: tsconfig.node.json')
   }
   
   // Crear index.html
@@ -313,7 +276,7 @@ export default {
 </html>
 `
     fs.writeFileSync(indexHtmlPath, indexHtml)
-    console.log('✅ responsive-system: index.html creado')
+    console.log('   ✅ Creado: index.html')
   }
   
   // Crear src/main.tsx
@@ -336,7 +299,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 )
 `
     fs.writeFileSync(mainTsxPath, mainTsx)
-    console.log('✅ responsive-system: src/main.tsx creado')
+    console.log('   ✅ Creado: src/main.tsx')
   }
   
   // Crear src/index.css
@@ -347,7 +310,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 @tailwind utilities;
 `
     fs.writeFileSync(indexCssPath, indexCss)
-    console.log('✅ responsive-system: src/index.css creado')
+    console.log('   ✅ Creado: src/index.css')
   }
   
   // Crear src/App.tsx con página de ejemplo
@@ -417,7 +380,7 @@ function App() {
 export default App
 `
     fs.writeFileSync(appTsxPath, appTsx)
-    console.log('✅ responsive-system: src/App.tsx creado con página de ejemplo')
+    console.log('   ✅ Creado: src/App.tsx con página de ejemplo')
   }
   
   // Actualizar package.json con scripts
@@ -435,7 +398,7 @@ export default App
   }
   
   fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
-  console.log('✅ responsive-system: package.json actualizado con scripts')
+  console.log('   ✅ Actualizado: package.json con scripts')
   
   console.log('')
   console.log('🎉 responsive-system: Proyecto inicializado correctamente!')
@@ -446,15 +409,6 @@ export default App
   console.log('')
 }
 
-if (reactPackages.length === 0 && devPackages.length === 0 && !isProjectEmpty) {
-  console.log('✅ responsive-system: Todas las dependencias están instaladas')
-}
-
-// Verificar si tailwind.config.js existe (solo si no es proyecto vacío)
-if (!isProjectEmpty) {
-  const tailwindConfigPath = path.join(projectRoot, 'tailwind.config.js')
-  if (!fs.existsSync(tailwindConfigPath)) {
-    console.log('💡 responsive-system: No se encontró tailwind.config.js')
-    console.log('   Ejecuta: npx tailwindcss init -p')
-  }
-}
+console.log('')
+console.log('✅ responsive-system: postinstall completado')
+console.log('')