humanbehavior-js 0.4.14 → 0.4.16

package/src/wizard/core/install-wizard.ts

@@ -16,6 +16,16 @@ export interface FrameworkInfo {
   hasTypeScript?: boolean;
   hasRouter?: boolean;
   projectRoot?: string;
+  version?: string;
+  majorVersion?: number;
+  features?: {
+    hasReact18?: boolean;
+    hasVue3?: boolean;
+    hasNuxt3?: boolean;
+    hasAngularStandalone?: boolean;
+    hasNextAppRouter?: boolean;
+    hasSvelteKit?: boolean;
+  };
 }
 
 export interface CodeModification {
@@ -43,6 +53,30 @@ export class AutoInstallationWizard {
     this.projectRoot = projectRoot;
   }
 
+  /**
+   * Simple version comparison utility
+   */
+  private compareVersions(version1: string, version2: string): number {
+    const v1Parts = version1.split('.').map(Number);
+    const v2Parts = version2.split('.').map(Number);
+    
+    for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
+      const v1 = v1Parts[i] || 0;
+      const v2 = v2Parts[i] || 0;
+      if (v1 > v2) return 1;
+      if (v1 < v2) return -1;
+    }
+    return 0;
+  }
+
+  private isVersionGte(version: string, target: string): boolean {
+    return this.compareVersions(version, target) >= 0;
+  }
+
+  private getMajorVersion(version: string): number {
+    return parseInt(version.split('.')[0]) || 0;
+  }
+
   /**
    * Main installation method - detects framework and auto-installs
    */
@@ -99,84 +133,145 @@ export class AutoInstallationWizard {
       ...packageJson.devDependencies
     };
 
-    // Detect framework
+    // Detect framework with version information
     let framework: FrameworkInfo = {
       name: 'vanilla',
       type: 'vanilla',
-      projectRoot: this.projectRoot
+      projectRoot: this.projectRoot,
+      features: {}
     };
 
     if (dependencies.nuxt) {
+      const nuxtVersion = dependencies.nuxt;
+      const isNuxt3 = this.isVersionGte(nuxtVersion, '3.0.0');
+      
       framework = {
         name: 'nuxt',
         type: 'nuxt',
+        version: nuxtVersion,
+        majorVersion: this.getMajorVersion(nuxtVersion),
         hasTypeScript: !!dependencies.typescript,
         hasRouter: true,
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasNuxt3: isNuxt3
+        }
       };
     } else if (dependencies.next) {
+      const nextVersion = dependencies.next;
+      const isNext13 = this.isVersionGte(nextVersion, '13.0.0');
+      
       framework = {
         name: 'nextjs',
         type: 'nextjs',
+        version: nextVersion,
+        majorVersion: this.getMajorVersion(nextVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['@types/node'],
         hasRouter: true,
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasNextAppRouter: isNext13
+        }
       };
     } else if (dependencies['@remix-run/react'] || dependencies['@remix-run/dev']) {
+      const remixVersion = dependencies['@remix-run/react'] || dependencies['@remix-run/dev'];
       framework = {
         name: 'remix',
         type: 'remix',
+        version: remixVersion,
+        majorVersion: this.getMajorVersion(remixVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['@types/react'],
         hasRouter: true,
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {}
       };
     } else if (dependencies.react) {
+      const reactVersion = dependencies.react;
+      const isReact18 = this.isVersionGte(reactVersion, '18.0.0');
+      
       framework = {
         name: 'react',
         type: 'react',
+        version: reactVersion,
+        majorVersion: this.getMajorVersion(reactVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['@types/react'],
         hasRouter: !!dependencies['react-router-dom'] || !!dependencies['react-router'],
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasReact18: isReact18
+        }
       };
     } else if (dependencies.vue) {
+      const vueVersion = dependencies.vue;
+      const isVue3 = this.isVersionGte(vueVersion, '3.0.0');
+      
       framework = {
         name: 'vue',
         type: 'vue',
+        version: vueVersion,
+        majorVersion: this.getMajorVersion(vueVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['@vue/cli-service'],
         hasRouter: !!dependencies['vue-router'],
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasVue3: isVue3
+        }
       };
     } else if (dependencies['@angular/core']) {
+      const angularVersion = dependencies['@angular/core'];
+      const isAngular17 = this.isVersionGte(angularVersion, '17.0.0');
+      
       framework = {
         name: 'angular',
         type: 'angular',
+        version: angularVersion,
+        majorVersion: this.getMajorVersion(angularVersion),
         hasTypeScript: true,
         hasRouter: true,
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasAngularStandalone: isAngular17
+        }
       };
     } else if (dependencies.svelte) {
+      const svelteVersion = dependencies.svelte;
+      const isSvelteKit = !!dependencies['@sveltejs/kit'];
+      
       framework = {
         name: 'svelte',
         type: 'svelte',
+        version: svelteVersion,
+        majorVersion: this.getMajorVersion(svelteVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['svelte-check'],
         hasRouter: !!dependencies['svelte-routing'] || !!dependencies['@sveltejs/kit'],
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {
+          hasSvelteKit: isSvelteKit
+        }
       };
     } else if (dependencies.astro) {
+      const astroVersion = dependencies.astro;
       framework = {
         name: 'astro',
         type: 'astro',
+        version: astroVersion,
+        majorVersion: this.getMajorVersion(astroVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['@astrojs/ts-plugin'],
         hasRouter: true,
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {}
       };
     } else if (dependencies.gatsby) {
+      const gatsbyVersion = dependencies.gatsby;
       framework = {
         name: 'gatsby',
         type: 'gatsby',
+        version: gatsbyVersion,
+        majorVersion: this.getMajorVersion(gatsbyVersion),
         hasTypeScript: !!dependencies.typescript || !!dependencies['@types/react'],
         hasRouter: true,
-        projectRoot: this.projectRoot
+        projectRoot: this.projectRoot,
+        features: {}
       };
     }
 
@@ -868,30 +963,61 @@ export const onClientEntry = () => {
       : 'process.env.HUMANBEHAVIOR_API_KEY!';
 
     const importStatement = `import { HumanBehaviorProvider } from 'humanbehavior-js/react';`;
-    const providerWrapper = `
-function App() {
-  return (
-    <HumanBehaviorProvider apiKey={${envVar}}>
-      {/* Your existing app content */}
-    </HumanBehaviorProvider>
-  );
-}`;
 
-    // Simple injection - in production, you'd want more sophisticated parsing
+    // Enhanced parsing for React 18+ features
+    const hasReact18 = this.framework?.features?.hasReact18;
+    
+    // Handle different React patterns
     if (content.includes('function App()') || content.includes('const App =')) {
-      return content.replace(
-        /(function App\(\)|const App =)/,
-        `${importStatement}\n\n$1`
-      ).replace(
-        /return \(([\s\S]*?)\);/,
+      // Add import statement
+      let modifiedContent = content.replace(
+        /(import.*?from.*?['"]react['"];?)/,
+        `$1\n${importStatement}`
+      );
+      
+      // If no React import found, add it at the top
+      if (!modifiedContent.includes(importStatement)) {
+        modifiedContent = `${importStatement}\n\n${modifiedContent}`;
+      }
+      
+      // Wrap the App component return with HumanBehaviorProvider
+      modifiedContent = modifiedContent.replace(
+        /(return\s*\([\s\S]*?\)\s*;)/,
         `return (
     <HumanBehaviorProvider apiKey={${envVar}}>
       $1
     </HumanBehaviorProvider>
   );`
       );
+      
+      return modifiedContent;
+    }
+    
+    // Handle React 18+ createRoot pattern
+    if (hasReact18 && content.includes('createRoot')) {
+      let modifiedContent = content.replace(
+        /(import.*?from.*?['"]react['"];?)/,
+        `$1\n${importStatement}`
+      );
+      
+      if (!modifiedContent.includes(importStatement)) {
+        modifiedContent = `${importStatement}\n\n${modifiedContent}`;
+      }
+      
+      // Wrap the root render with HumanBehaviorProvider
+      modifiedContent = modifiedContent.replace(
+        /(root\.render\s*\([\s\S]*?\)\s*;)/,
+        `root.render(
+    <HumanBehaviorProvider apiKey={${envVar}}>
+      $1
+    </HumanBehaviorProvider>
+  );`
+      );
+      
+      return modifiedContent;
     }
 
+    // Fallback: simple injection
     return `${importStatement}\n\n${content}`;
   }
 
@@ -1026,29 +1152,69 @@ export default function App()`
     }
 
     const importStatement = `import { HumanBehaviorPlugin } from 'humanbehavior-js/vue';`;
-    const pluginUsage = `app.use(HumanBehaviorPlugin, {
+    
+    // Enhanced Vue 3 support with version detection
+    const hasVue3 = this.framework?.features?.hasVue3;
+    
+    if (hasVue3) {
+      // Vue 3 with Composition API
+      const pluginUsage = `app.use(HumanBehaviorPlugin, {
   apiKey: import.meta.env.VITE_HUMANBEHAVIOR_API_KEY
 });`;
 
-    // Handle both Vue 2 and Vue 3 patterns
-    if (content.includes('createApp')) {
-      // Vue 3
-      return content.replace(
-        /import.*from.*['"]vue['"]/,
-        `$&\n${importStatement}`
-      ).replace(
-        /app\.mount\(/,
-        `${pluginUsage}\n\napp.mount(`
-      );
+      let modifiedContent = content;
+      
+      // Add import statement
+      if (!content.includes(importStatement)) {
+        modifiedContent = content.replace(
+          /(import.*?from.*?['"]vue['"];?)/,
+          `$1\n${importStatement}`
+        );
+        
+        // If no Vue import found, add it at the top
+        if (!modifiedContent.includes(importStatement)) {
+          modifiedContent = `${importStatement}\n\n${modifiedContent}`;
+        }
+      }
+      
+      // Handle createApp pattern
+      if (content.includes('createApp')) {
+        modifiedContent = modifiedContent.replace(
+          /(app\.mount\(.*?\))/,
+          `${pluginUsage}\n\n$1`
+        );
+      }
+      
+      return modifiedContent;
     } else {
-      // Vue 2
-      return content.replace(
-        /import.*from.*['"]vue['"]/,
-        `$&\n${importStatement}`
-      ).replace(
-        /new Vue\(/,
-        `${pluginUsage}\n\nnew Vue(`
-      );
+      // Vue 2 with Options API
+      const pluginUsage = `Vue.use(HumanBehaviorPlugin, {
+  apiKey: process.env.VUE_APP_HUMANBEHAVIOR_API_KEY
+});`;
+
+      let modifiedContent = content;
+      
+      // Add import statement
+      if (!content.includes(importStatement)) {
+        modifiedContent = content.replace(
+          /(import.*?from.*?['"]vue['"];?)/,
+          `$1\n${importStatement}`
+        );
+        
+        if (!modifiedContent.includes(importStatement)) {
+          modifiedContent = `${importStatement}\n\n${modifiedContent}`;
+        }
+      }
+      
+      // Handle new Vue pattern
+      if (content.includes('new Vue')) {
+        modifiedContent = modifiedContent.replace(
+          /(new Vue\(.*?\))/,
+          `${pluginUsage}\n\n$1`
+        );
+      }
+      
+      return modifiedContent;
     }
   }
 
@@ -1214,16 +1380,30 @@ if (typeof window !== 'undefined') {
       return content;
     }
 
-    // Add runtime config by inserting it after the opening brace
-    return content.replace(
-      /export default defineNuxtConfig\(\{/,
-      `export default defineNuxtConfig({
+    // Enhanced Nuxt 3 support with version detection
+    const hasNuxt3 = this.framework?.features?.hasNuxt3;
+    
+    if (hasNuxt3) {
+      // Nuxt 3 with runtime config
+      return content.replace(
+        /export default defineNuxtConfig\(\{/,
+        `export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       humanBehaviorApiKey: process.env.NUXT_PUBLIC_HUMANBEHAVIOR_API_KEY
     }
   },`
-    );
+      );
+    } else {
+      // Nuxt 2 with env config
+      return content.replace(
+        /export default \{/,
+        `export default {
+  env: {
+    humanBehaviorApiKey: process.env.HUMANBEHAVIOR_API_KEY
+  },`
+      );
+    }
   }
 
   private injectGatsbyLayout(content: string): string {

package/src/wizard/services/remote-ai-service.ts

@@ -14,6 +14,16 @@ export interface FrameworkInfo {
   hasTypeScript?: boolean;
   hasRouter?: boolean;
   projectRoot?: string;
+  version?: string;
+  majorVersion?: number;
+  features?: {
+    hasReact18?: boolean;
+    hasVue3?: boolean;
+    hasNuxt3?: boolean;
+    hasAngularStandalone?: boolean;
+    hasNextAppRouter?: boolean;
+    hasSvelteKit?: boolean;
+  };
 }
 
 export interface RemoteAIServiceConfig {