use-vibes 0.1.0

package/dist/tests/vibe.test.js

@@ -0,0 +1,60 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useVibes } from '../src/index.js';
+// Mock the call-ai module for testing
+vi.mock('call-ai', () => {
+    return {
+        callAI: vi.fn().mockImplementation((prompt, options) => {
+            if (options?.stream === false) {
+                // Extract prompt content for the mock response
+                let promptText = 'Test prompt';
+                if (typeof prompt === 'string' && prompt.includes('request:')) {
+                    promptText = prompt.split('request:')[1].split('\n')[0].trim();
+                }
+                // Create a properly formatted mock response that matches the schema
+                const mockResponse = JSON.stringify({
+                    html: `<div>🎭 Vibes received prompt: "${promptText}"</div>`,
+                    explanation: 'This is a mock explanation from the test',
+                });
+                return Promise.resolve(mockResponse);
+            }
+            // For any other case
+            return 'Direct response';
+        }),
+    };
+});
+// Setup test DOM elements before each test
+beforeEach(() => {
+    // Reset the body content
+    document.body.innerHTML = '';
+    // Create test elements
+    const target = document.createElement('div');
+    target.id = 'target';
+    document.body.appendChild(target);
+    const targetAlt = document.createElement('div');
+    targetAlt.id = 'target-alt';
+    document.body.appendChild(targetAlt);
+});
+describe('useVibes function', () => {
+    it('should accept a string selector and apply changes to the target element', async () => {
+        const result = await useVibes('#target', { prompt: 'Test prompt' });
+        expect(result.container).toBeDefined();
+        expect(result.container.innerHTML).toContain('Vibes received prompt: "Test prompt"');
+    });
+    it('should accept an HTMLElement directly', async () => {
+        const targetElement = document.getElementById('target');
+        if (!targetElement)
+            throw new Error('Test setup failed: target element not found');
+        const result = await useVibes(targetElement, { prompt: 'Direct element test' });
+        expect(result.container).toBe(targetElement);
+        expect(result.container.innerHTML).toContain('Vibes received prompt: "Direct element test"');
+    });
+    it('should reject with an error when target element not found', async () => {
+        await expect(useVibes('#non-existent', { prompt: 'Test' })).rejects.toThrow('Target element not found: #non-existent');
+    });
+    it('should return an object with the expected interface properties', async () => {
+        const result = await useVibes('#target', { prompt: 'Interface test' });
+        expect(result).toHaveProperty('container');
+        expect(result).toHaveProperty('database');
+        expect(result.database).toBeUndefined(); // Currently undefined in the implementation
+    });
+});

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "use-vibes",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Transform any DOM element into an AI-powered micro-app",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "keywords": [
+    "ai",
+    "dom",
+    "micro-app",
+    "generator",
+    "web",
+    "esm",
+    "typescript"
+  ],
+  "author": "",
+  "license": "MIT",
+  "files": [
+    "dist/",
+    "lib/",
+    "src/",
+    "LICENSE",
+    "README.md"
+  ],
+  "devDependencies": {
+    "@playwright/test": "^1.41.2",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^20.11.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "esbuild": "^0.25.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.5",
+    "jsdom": "^26.0.0",
+    "playwright": "^1.41.2",
+    "prettier": "^3.5.3",
+    "rollup": "^4.38.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "terser": "^5.39.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vitest": "^1.2.2"
+  },
+  "dependencies": {
+    "call-ai": "^0.5.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "build:browser": "node scripts/build-browser.js",
+    "build:browser:test": "node scripts/build-browser-test.js",
+    "build:bookmarklet": "node scripts/generate-bookmarklet.js",
+    "build:all": "npm run build && npm run build:browser && npm run build:bookmarklet",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:browser": "npm run build:browser:test && playwright test --reporter=line",
+    "test:browser:headed": "npm run build:browser:test && playwright test --headed --reporter=line",
+    "test:browser:debug": "npm run build:browser:test && playwright test --debug --reporter=line",
+    "lint": "eslint --ext .js,.ts,.tsx src/ tests/ scripts/",
+    "lint:fix": "eslint --ext .js,.ts,.tsx --fix src/ tests/ scripts/",
+    "format": "prettier --write 'src/**/*.{js,ts,tsx}' 'tests/**/*.{js,ts,tsx}' 'scripts/**/*.js'",
+    "typecheck": "tsc --noEmit",
+    "validate": "npm run typecheck && npm run test && npm run test:browser && npm run lint",
+    "fix": "npm run lint:fix && npm run format",
+    "check": "npm run validate && npm run fix",
+    "prerelease": "npm run validate",
+    "serve": "vite fixtures --port 3000"
+  }
+}

package/src/index.ts

@@ -0,0 +1,116 @@
+import { callAI } from 'call-ai';
+
+// DOM element and configuration interface
+export interface UseVibesConfig {
+  prompt: string;
+  // Add more configuration options as needed
+}
+
+// App instance interface returned by useVibes
+export interface VibesApp {
+  container: HTMLElement;
+  database?: Record<string, unknown>;
+}
+
+/**
+ * The useVibes function - transforms a DOM element into an AI-augmented micro-app
+ * @param target - CSS selector string or HTMLElement to inject into
+ * @param config - Configuration object with prompt
+ * @returns Promise resolving to the app instance
+ */
+export function useVibes(target: string | HTMLElement, config: UseVibesConfig): Promise<VibesApp> {
+  // Get the target element if string selector was provided
+  const targetElement =
+    typeof target === 'string' ? (document.querySelector(target) as HTMLElement) : target;
+
+  // Validate the target element
+  if (!targetElement) {
+    return Promise.reject(new Error(`Target element not found: ${target}`));
+  }
+
+  try {
+    // Capture the current HTML state
+    const htmlContext = document.body.innerHTML;
+
+    // Build the prompt for the AI
+    const userPrompt = `
+      Transform the HTML content based on this request: ${config.prompt}
+      
+      The current HTML of the page is:
+      \`\`\`html
+      ${htmlContext}
+      \`\`\`
+      
+      Generate HTML content that should be placed inside the target element.
+      Keep your response focused and concise, generating only the HTML required.
+    `;
+
+    // Define a simple schema for the response
+    const schema = {
+      properties: {
+        html: {
+          type: 'string',
+          description: 'The HTML content to inject into the target element',
+        },
+        explanation: {
+          type: 'string',
+          description: 'A brief explanation of the changes made (optional)',
+        },
+      },
+    };
+
+    // Call the AI with the prompt and schema
+    // Explicitly set stream to false to ensure we get a string response
+    const aiResponse = callAI(userPrompt, { schema, stream: false });
+
+    // We need to handle the response which is a Promise<string> since we set stream: false
+    if (aiResponse instanceof Promise) {
+      return aiResponse
+        .then(response => {
+          try {
+            // Parse the JSON response
+            const result = JSON.parse(response as string) as { html: string; explanation?: string };
+
+            // Extract HTML from structured response and inject it into the target element
+            targetElement.innerHTML = result.html;
+
+            // Log explanation if provided
+            if (result.explanation) {
+              // eslint-disable-next-line no-console
+              console.log('AI explanation:', result.explanation);
+            }
+
+            // Return the app instance
+            return {
+              container: targetElement,
+              database: undefined,
+            };
+          } catch (parseError: unknown) {
+            console.error('Error parsing AI response:', parseError);
+            const errorMessage =
+              parseError instanceof Error ? parseError.message : String(parseError);
+            return Promise.reject(new Error(`Failed to parse AI response: ${errorMessage}`));
+          }
+        })
+        .catch((error: unknown) => {
+          console.error('Error calling AI:', error);
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          return Promise.reject(new Error(`Failed to process prompt: ${errorMessage}`));
+        });
+    } else {
+      // This should never happen with stream: false, but we need to handle it for type safety
+      return Promise.reject(new Error('Unexpected streaming response from callAI'));
+    }
+  } catch (error) {
+    // Fallback for any unexpected errors
+    console.error('Error initializing AI call:', error);
+
+    // Provide a simple fallback that shows the prompt was received
+    targetElement.innerHTML = `<div>🎭 Vibes received prompt: "${config.prompt}" (AI processing failed)</div>`;
+
+    return Promise.resolve({
+      container: targetElement,
+      database: undefined,
+    });
+  }
+}