@llmnative/react 0.1.1 → 1.1.0

package/scripts/cli/proxy-templates/express.ts

@@ -0,0 +1,77 @@
+// @ts-nocheck - scaffold template, copied to user project by CLI
+import type { IncomingMessage, ServerResponse } from 'node:http';
+
+const PROXY_CALLER_HEADER = 'x-llmnative-proxy';
+export const PROXY_PATH = '/api/proxy';
+
+type AppLike = {
+    all: (route: string, handler: (req: IncomingMessage, res: ServerResponse) => void) => unknown;
+};
+
+const readRequestBody = async (req: IncomingMessage): Promise<Buffer | undefined> => {
+    const chunks: Buffer[] = [];
+    for await (const chunk of req) {
+        chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+    }
+    return chunks.length === 0 ? undefined : Buffer.concat(chunks);
+};
+
+export const proxyHandler = async (req: IncomingMessage, res: ServerResponse) => {
+    const requestUrl = new URL(req.url || '/', 'http://localhost');
+    const target = requestUrl.searchParams.get('url');
+
+    if (req.headers[PROXY_CALLER_HEADER] !== '1') {
+        res.statusCode = 403;
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({ error: 'Proxy access denied.' }));
+        return;
+    }
+
+    if (!target) {
+        res.statusCode = 400;
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({ error: 'Missing "url" query parameter.' }));
+        return;
+    }
+
+    try {
+        const targetUrl = new URL(target);
+        if (targetUrl.pathname.startsWith(PROXY_PATH) && ['localhost', '127.0.0.1'].includes(targetUrl.hostname)) {
+            res.statusCode = 508;
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ error: 'Recursive proxy target detected.', target }));
+            return;
+        }
+
+        const body = await readRequestBody(req);
+        const headers = new Headers();
+        const skipHeaders = new Set([PROXY_CALLER_HEADER, 'host', 'origin', 'referer', 'content-length', 'transfer-encoding', 'connection']);
+
+        Object.entries(req.headers).forEach(([key, value]) => {
+            if (!value || skipHeaders.has(key.toLowerCase())) return;
+            headers.set(key, Array.isArray(value) ? value.join(', ') : value);
+        });
+
+        const upstream = await fetch(target, {
+            method: req.method || 'GET',
+            headers,
+            body: body && !['GET', 'HEAD'].includes((req.method || 'GET').toUpperCase()) ? body : undefined,
+            redirect: 'follow',
+        });
+
+        res.statusCode = upstream.status;
+        upstream.headers.forEach((value, key) => {
+            if (key.toLowerCase() === 'content-encoding') return;
+            res.setHeader(key, value);
+        });
+        res.end(Buffer.from(await upstream.arrayBuffer()));
+    } catch (error) {
+        res.statusCode = 502;
+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'Proxy request failed.' }));
+    }
+};
+
+export const registerProxy = (app: AppLike, route = PROXY_PATH) => {
+    app.all(route, (req, res) => { void proxyHandler(req, res); });
+};

package/scripts/cli/proxy-templates/nextjs-app.ts

@@ -0,0 +1,42 @@
+/**
+ * LLMNative proxy - Next.js App Router.
+ *
+ * Place this file at:
+ *   app/api/proxy/route.ts
+ */
+
+const PASSTHROUGH_METHODS = new Set(['GET', 'HEAD']);
+
+async function handler(request: Request): Promise<Response> {
+    const { searchParams } = new URL(request.url);
+    const targetUrl = searchParams.get('url');
+
+    if (!targetUrl) {
+        return Response.json({ error: 'Missing url query parameter' }, { status: 400 });
+    }
+
+    const headers = new Headers(request.headers);
+    headers.delete('host');
+    headers.delete('x-llmnative-proxy');
+
+    const hasBody = !PASSTHROUGH_METHODS.has(request.method.toUpperCase());
+
+    const upstream = await fetch(targetUrl, {
+        method: request.method,
+        headers,
+        body: hasBody ? request.body : undefined,
+        ...(hasBody ? { duplex: 'half' } : {}),
+    } as RequestInit);
+
+    return new Response(upstream.body, {
+        status: upstream.status,
+        headers: upstream.headers,
+    });
+}
+
+export const GET     = handler;
+export const POST    = handler;
+export const PUT     = handler;
+export const PATCH   = handler;
+export const DELETE  = handler;
+export const OPTIONS = handler;

package/scripts/cli/proxy-templates/nextjs-pages.ts

@@ -0,0 +1,41 @@
+// @ts-nocheck - scaffold template, copied to user project by CLI
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+/**
+ * LLMNative proxy - Next.js Pages Router.
+ *
+ * Place this file at:
+ *   pages/api/proxy.ts
+ */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    const targetUrl = req.query.url as string | undefined;
+
+    if (!targetUrl) {
+        res.status(400).json({ error: 'Missing url query parameter' });
+        return;
+    }
+
+    const headers: Record<string, string> = {};
+    for (const [key, value] of Object.entries(req.headers)) {
+        if (key === 'host' || key === 'x-llmnative-proxy') continue;
+        if (typeof value === 'string') headers[key] = value;
+        else if (Array.isArray(value)) headers[key] = value.join(', ');
+    }
+
+    const hasBody = !['GET', 'HEAD'].includes(req.method?.toUpperCase() ?? 'GET');
+
+    const upstream = await fetch(targetUrl, {
+        method: req.method,
+        headers,
+        body: hasBody ? JSON.stringify(req.body) : undefined,
+    });
+
+    res.status(upstream.status);
+    upstream.headers.forEach((value, key) => res.setHeader(key, value));
+    const buffer = await upstream.arrayBuffer();
+    res.end(Buffer.from(buffer));
+}
+
+export const config = {
+    api: { bodyParser: true },
+};

package/scripts/cli/proxy-templates/scaffold.json

@@ -0,0 +1,33 @@
+{
+    "vite": {
+        "label": "Vite dev server",
+        "packageExport": "@llmnative/react/vite",
+        "exportName": "createProxyPlugin",
+        "outputPath": "dev/proxy.ts",
+        "hint": "Import createProxyPlugin() and add it to plugins[] in vite.config.ts"
+    },
+    "express": {
+        "label": "Express",
+        "templateFile": "express.ts",
+        "outputPath": "server/proxy.ts",
+        "hint": "Import registerProxy() and mount it with app.use() in your server entry"
+    },
+    "nextjs-app": {
+        "label": "Next.js App Router",
+        "templateFile": "nextjs-app.ts",
+        "outputPath": "app/api/proxy/route.ts",
+        "hint": "File placed at app/api/proxy/route.ts - no extra setup needed"
+    },
+    "nextjs-pages": {
+        "label": "Next.js Pages Router",
+        "templateFile": "nextjs-pages.ts",
+        "outputPath": "pages/api/proxy.ts",
+        "hint": "File placed at pages/api/proxy.ts - no extra setup needed"
+    },
+    "cloudflare": {
+        "label": "Cloudflare Worker / Pages Function",
+        "templateFile": "cloudflare.ts",
+        "outputPath": "functions/api/proxy.ts",
+        "hint": "File placed at functions/api/proxy.ts for Cloudflare Pages, or deploy as a standalone Worker"
+    }
+}

package/scripts/cli/setup-devtools.js

@@ -1,85 +1,155 @@
-const fs = require('fs');
-const path = require('path');
-
-const root = process.cwd();
-
-function ensureFile(filePath, content) {
-    if (!fs.existsSync(filePath)) {
-        fs.writeFileSync(filePath, content.trimStart());
-        console.log(`Created file: ${filePath}`);
-    }
-}
-
-function setupDevTools() {
-    console.log('Setting up Vite + React + TypeScript');
-
-    ensureFile(path.join(root, 'tsconfig.json'), `
-{
-  "compilerOptions": {
-    "target": "ES2021",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ES2021"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
-    `);
-
-    ensureFile(path.join(root, 'tsconfig.node.json'), `
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
-}
-    `);
-
-    ensureFile(path.join(root, 'vite.config.ts'), `
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig(({ mode }) => {
-  return {
-    plugins: [react()],
-    resolve: {
-      dedupe: ['react', 'react-dom', 'react-router-dom'],
-    },
-    build: {
-      cssMinify: false,
-      chunkSizeWarningLimit: 10000,
-    },
-    define: {
-      'process.env.NODE_ENV': JSON.stringify(mode === 'production' ? 'production' : 'development'),
-    },
-  };
-});
-    `);
-
-    ensureFile(path.join(root, 'postcss.config.js'), `
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-    autoprefixer: {},
-  },
-};
-    `);
-}
-
-module.exports = { setupDevTools };
+const fs = require('fs');
+const path = require('path');
+
+const root = process.cwd();
+// Templates and the vite/packageExport split live in scripts/cli/proxy-templates/scaffold.json —
+// the same JSON the framework's src/providers/proxy/scaffold.ts imports, so there's one shared
+// source instead of two hand-maintained maps that can drift (as they had before this fix).
+const PROXY_TEMPLATES_DIR = path.resolve(__dirname, 'proxy-templates');
+const PROXY_PROVIDERS = require(path.join(PROXY_TEMPLATES_DIR, 'scaffold.json'));
+
+function ensureFile(filePath, content) {
+    if (!fs.existsSync(filePath)) {
+        fs.mkdirSync(path.dirname(filePath), { recursive: true });
+        fs.writeFileSync(filePath, content.trimStart());
+        console.log(`Created file: ${filePath}`);
+    }
+}
+
+function ensureDir(dirPath) {
+    if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+        console.log(`Created directory: ${dirPath}`);
+    }
+}
+
+function copyProxyFile(proxyProvider) {
+    const descriptor = PROXY_PROVIDERS[proxyProvider];
+    if (!descriptor) return;
+
+    const dest = path.join(root, descriptor.outputPath);
+    ensureDir(path.dirname(dest));
+    if (fs.existsSync(dest)) return;
+
+    if (descriptor.packageExport) {
+        // vite only: re-export the framework's own build instead of copying a snapshot that
+        // could drift from the real implementation — see dist/vite.mjs / package.json exports.
+        fs.writeFileSync(dest, `export { ${descriptor.exportName} } from '${descriptor.packageExport}';\n`);
+        console.log(`Created file: ${dest}`);
+        return;
+    }
+
+    const src = path.join(PROXY_TEMPLATES_DIR, descriptor.templateFile);
+    if (!fs.existsSync(src)) {
+        console.warn(`Proxy template not found: ${src}`);
+        return;
+    }
+    fs.copyFileSync(src, dest);
+    console.log(`Created file: ${dest}`);
+}
+
+function createViteConfig(proxyProvider) {
+    const usesVitePlugin = proxyProvider === 'vite';
+    const importBlock = usesVitePlugin
+        ? "import { createProxyPlugin } from './dev/proxy';\n"
+        : '';
+    const pluginBlock = usesVitePlugin
+        ? "      env.VITE_PROXY_ENABLED === 'true' ? createProxyPlugin() : null,\n"
+        : '';
+
+    return `
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+${importBlock}
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+
+  return {
+    plugins: [
+      react(),
+${pluginBlock}    ].filter(Boolean),
+    resolve: {
+      dedupe: ['react', 'react-dom', 'react-router-dom'],
+    },
+    build: {
+      cssMinify: false,
+      chunkSizeWarningLimit: 10000,
+    },
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(mode === 'production' ? 'production' : 'development'),
+    },
+  };
+});
+`;
+}
+
+function setupDevTools(options = {}) {
+    const proxyProvider = options.proxyProvider ?? 'none';
+
+    console.log('Setting up Vite + React + TypeScript');
+
+    ensureFile(path.join(root, 'tsconfig.json'), `
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2021"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+    `);
+
+    ensureFile(path.join(root, 'tsconfig.node.json'), `
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts", "dev/**/*.ts", "server/**/*.ts"]
+}
+    `);
+
+    if (proxyProvider !== 'none') {
+        copyProxyFile(proxyProvider);
+    }
+
+    ensureFile(path.join(root, 'vite.config.ts'), createViteConfig(proxyProvider));
+
+    ensureFile(path.join(root, 'postcss.config.js'), `
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};
+    `);
+
+    if (proxyProvider !== 'none' && PROXY_PROVIDERS[proxyProvider]) {
+        console.log(`\nProxy file created: ${PROXY_PROVIDERS[proxyProvider].outputPath}`);
+        if (proxyProvider === 'express') {
+            console.log('  → Add registerProxy(app) to your server entry file.');
+        }
+        if (proxyProvider === 'vite') {
+            console.log('  → createProxyPlugin() is already wired into vite.config.ts.');
+        }
+    }
+}
+
+module.exports = { setupDevTools, PROXY_PROVIDERS };