@octanejs/mcp-server 0.2.3 → 0.2.5

package/src/bridge.js

@@ -8,29 +8,89 @@ export const KNOWN_BINDINGS = {
 	zustand: '@octanejs/zustand',
 	jotai: '@octanejs/jotai',
 	'@apollo/client': '@octanejs/apollo-client',
+	'@tanstack/ai-react': '@octanejs/tanstack-ai',
+	'@tanstack/react-devtools': '@octanejs/tanstack-devtools',
+	'@tanstack/react-form': '@octanejs/tanstack-form',
 	'@tanstack/react-query': '@octanejs/tanstack-query',
 	'@tanstack/react-router': '@octanejs/tanstack-router',
+	'@tanstack/react-store': '@octanejs/tanstack-store',
 	'@tanstack/react-table': '@octanejs/tanstack-table',
 	'@tanstack/react-virtual': '@octanejs/tanstack-virtual',
 	'framer-motion': '@octanejs/motion',
 	motion: '@octanejs/motion',
 	'@stylexjs/stylex': '@octanejs/stylex',
+	'styled-components': '@octanejs/styled-components',
 	'react-router': '@octanejs/remix-router',
 	'react-router-dom': '@octanejs/remix-router',
 	'@lexical/react': '@octanejs/lexical',
+	'@tiptap/react': '@octanejs/tiptap',
 	'lucide-react': '@octanejs/lucide',
 	'@floating-ui/react': '@octanejs/floating-ui',
+	'react-aria': '@octanejs/aria',
+	'react-aria-components': '@octanejs/aria',
+	'react-stately': '@octanejs/aria',
 	'radix-ui': '@octanejs/radix',
 	'react-hook-form': '@octanejs/hook-form',
 	'@base-ui-components/react': '@octanejs/base-ui',
 	'@dnd-kit/react': '@octanejs/dnd-kit',
 	sonner: '@octanejs/sonner',
 	recharts: '@octanejs/recharts',
+	'@react-three/fiber': '@octanejs/three',
+	'@visx/visx': '@octanejs/visx',
+	'@visx/a11y': '@octanejs/visx',
+	'@visx/a11y/react': '@octanejs/visx',
+	'@visx/a11y/server': '@octanejs/visx',
+	'@visx/annotation': '@octanejs/visx',
+	'@visx/axis': '@octanejs/visx',
+	'@visx/axis/react': '@octanejs/visx',
+	'@visx/bounds': '@octanejs/visx',
+	'@visx/brush': '@octanejs/visx',
+	'@visx/chart': '@octanejs/visx',
+	'@visx/chord': '@octanejs/visx',
+	'@visx/clip-path': '@octanejs/visx',
+	'@visx/curve': '@octanejs/visx',
+	'@visx/delaunay': '@octanejs/visx',
+	'@visx/drag': '@octanejs/visx',
+	'@visx/event': '@octanejs/visx',
+	'@visx/geo': '@octanejs/visx',
+	'@visx/glyph': '@octanejs/visx',
+	'@visx/gradient': '@octanejs/visx',
+	'@visx/grid': '@octanejs/visx',
+	'@visx/group': '@octanejs/visx',
+	'@visx/heatmap': '@octanejs/visx',
+	'@visx/hierarchy': '@octanejs/visx',
+	'@visx/kernel': '@octanejs/visx',
+	'@visx/legend': '@octanejs/visx',
+	'@visx/marker': '@octanejs/visx',
+	'@visx/mock-data': '@octanejs/visx',
+	'@visx/network': '@octanejs/visx',
+	'@visx/pattern': '@octanejs/visx',
+	'@visx/point': '@octanejs/visx',
+	'@visx/react-spring': '@octanejs/visx',
+	'@visx/responsive': '@octanejs/visx',
+	'@visx/sankey': '@octanejs/visx',
+	'@visx/scale': '@octanejs/visx',
+	'@visx/scale/react': '@octanejs/visx',
+	'@visx/shape': '@octanejs/visx',
+	'@visx/shape/react': '@octanejs/visx',
+	'@visx/stats': '@octanejs/visx',
+	'@visx/text': '@octanejs/visx',
+	'@visx/theme': '@octanejs/visx',
+	'@visx/theme/react': '@octanejs/visx',
+	'@visx/threshold': '@octanejs/visx',
+	'@visx/tooltip': '@octanejs/visx',
+	'@visx/tooltip/floating': '@octanejs/visx',
+	'@visx/voronoi': '@octanejs/visx',
+	'@visx/voronoi/react': '@octanejs/visx',
+	'@visx/wordcloud': '@octanejs/visx',
+	'@visx/xychart': '@octanejs/visx',
+	'@visx/zoom': '@octanejs/visx',
 	'react-redux': '@octanejs/redux',
 	'@reduxjs/toolkit': '@octanejs/redux-toolkit',
 	'@testing-library/react': '@octanejs/testing-library',
 	'react-i18next': '@octanejs/i18next',
 	'@mdx-js/react': '@octanejs/mdx',
+	'dexie-react-hooks': '@octanejs/dexie',
 };
 
 // Workspace directory names for the maintained bindings. Keep this derived
@@ -57,6 +117,7 @@ export const KNOWN_VANILLA_CORES = {
 	valtio: 'valtio/vanilla',
 	jotai: 'jotai/vanilla',
 	'@lexical/react': 'lexical',
+	'@tiptap/react': '@tiptap/core',
 };
 
 export const REACT_API_MAP = {
@@ -117,8 +178,14 @@ export const REACT_API_MAP = {
 		status: 'rewrite',
 		note: 'No forwardRef. Rewrite to React 19 refs-as-props: accept ref as a normal prop.',
 	},
-	useDebugValue: { status: 'rewrite', note: 'Not present. Shim as a no-op.' },
-	lazy: { status: 'rewrite', note: 'Not present. Use dynamic import plus use()/Suspense.' },
+	useDebugValue: {
+		status: 'same',
+		note: 'Supported as an accepted no-op (devtools-only label; there is no DevTools integration).',
+	},
+	lazy: {
+		status: 'same',
+		note: "Supported. Accepts React's { default } module shape and additionally a bare component from the loader; wrapping Suspense or ViewTransition in lazy() is valid (nested lazy wrappers are not).",
+	},
 	Component: {
 		status: 'unsupported',
 		note: 'No class components. Rewrite as a function component.',
@@ -138,17 +205,21 @@ export const REACT_API_MAP = {
 		status: 'rewrite',
 		note: 'Use renderToString() from octane/server (sync) or prerender() from octane/static (async, awaits Suspense); both return { html, css }.',
 	},
+	renderToStaticMarkup: {
+		status: 'rewrite',
+		note: 'Use renderToStaticMarkup() from octane/server (clean, non-hydratable HTML; returns { html, css }).',
+	},
 	renderToPipeableStream: {
-		status: 'unsupported',
-		note: 'No streaming SSR yet. Use render() from octane/server.',
+		status: 'rewrite',
+		note: 'Supported natively: import renderToPipeableStream from octane/server (Octane argument convention: component, props?, options?; returns { pipe, abort } with onShellReady/onShellError/onAllReady StreamOptions).',
 	},
 	renderToReadableStream: {
-		status: 'unsupported',
-		note: 'No streaming SSR yet. Use render() from octane/server.',
+		status: 'rewrite',
+		note: 'Supported natively: import renderToReadableStream from octane/server (Octane argument convention; resolves with a ReadableStream once the shell is ready, same StreamOptions).',
 	},
 	onChange: {
 		status: 'rewrite',
-		note: 'Events are native and delegated; there is no synthetic onChange firing per keystroke. Use onInput for text inputs.',
+		note: 'This is a standard text host using React-style per-edit onChange. Use onInput (or onInputCapture) for per-edit intent. Preserve component callbacks, select/checkable change handlers, and deliberate native text commits; mark the last case with suppressNativeChangeWarning.',
 	},
 	defaultProps: {
 		status: 'rewrite',
@@ -169,6 +240,111 @@ const SCANNABLE = /\.(js|mjs|cjs|jsx|ts|tsx|mts|cts)$/;
 const SKIP_DIRS = new Set(['node_modules', '.git', '__tests__', '__mocks__', 'test', 'tests']);
 const MAX_FILES = 400;
 
+const NON_TEXT_INPUT_TYPES = new Set([
+	'button',
+	'checkbox',
+	'color',
+	'date',
+	'datetime-local',
+	'file',
+	'hidden',
+	'image',
+	'month',
+	'radio',
+	'range',
+	'reset',
+	'submit',
+	'time',
+	'week',
+]);
+
+function booleanAttributeState(attributes, name, exactTrue = false) {
+	const match = attributes.match(
+		new RegExp(
+			`\\b${name}(?=\\s|=|\\/|$)(?:\\s*=\\s*(?:"([^"]*)"|'([^']*)'|\\{\\s*([^}]*)\\s*\\}))?`,
+		),
+	);
+	if (!match) return 'false';
+	if (!match[0].includes('=')) return 'true';
+	const quoted = match[1] ?? match[2];
+	if (exactTrue && quoted !== undefined) return 'false';
+	if (quoted !== undefined) return quoted.length > 0 ? 'true' : 'false';
+	const expression = match[3]?.trim();
+	if (exactTrue) {
+		if (expression === 'true') return 'true';
+		if (
+			/^(?:false|null|undefined|void\s+0|[+-]?(?:\d+(?:\.\d+)?|\.\d+)|NaN|'[^']*'|"[^"]*")$/.test(
+				expression ?? '',
+			)
+		)
+			return 'false';
+		return 'dynamic';
+	}
+	if (/^(?:false|null|undefined|void\s+0|0|-0|NaN|''|"")$/.test(expression ?? '')) {
+		return 'false';
+	}
+	if (/^(?:true|[1-9]\d*(?:\.\d+)?|'[^']+'|"[^"]+")$/.test(expression ?? '')) {
+		return 'true';
+	}
+	return 'dynamic';
+}
+
+function hasPotentialEventAssignment(attributes, name) {
+	const match = attributes.match(new RegExp(`\\b${name}\\s*=\\s*([^\\s>]+)`));
+	if (!match) return false;
+	const value = match[1];
+	if (value.startsWith('"') || value.startsWith("'")) return false;
+	if (
+		/^\{\s*(?:false|true|null|undefined|void\s+0|0|-0|NaN|''|"")\s*\}/.test(
+			attributes.slice(match.index + match[0].indexOf(value)),
+		)
+	)
+		return false;
+	return true;
+}
+
+function countReactStyleTextChanges(source) {
+	let count = 0;
+	const hosts = source.matchAll(/<(input|textarea)\b((?:[^>]|=>)*)>/g);
+	for (const match of hosts) {
+		const host = match[1].toLowerCase();
+		const attrs = match[2];
+		const changeHandlers = ['onChange', 'onChangeCapture'].filter((name) =>
+			hasPotentialEventAssignment(attrs, name),
+		);
+		if (
+			changeHandlers.length === 0 ||
+			hasPotentialEventAssignment(attrs, 'onInput') ||
+			hasPotentialEventAssignment(attrs, 'onInputCapture')
+		)
+			continue;
+		// A spread can replace the handler, type, editability, or suppression.
+		// Leave that site for the compiler/runtime's final-props diagnostic rather
+		// than suggesting a source rewrite from an incomplete static scan.
+		if (/\{\s*\.\.\./.test(attrs)) continue;
+		const suppression = booleanAttributeState(attrs, 'suppressNativeChangeWarning', true);
+		const readOnly = booleanAttributeState(attrs, 'readOnly');
+		const disabled = booleanAttributeState(attrs, 'disabled');
+		if ([suppression, readOnly, disabled].includes('true')) continue;
+		if ([suppression, readOnly, disabled].includes('dynamic')) continue;
+		if (host === 'input') {
+			const literalType = attrs.match(
+				/\btype\s*=\s*(?:"([^"]*)"|'([^']*)'|\{\s*["']([^"']*)["']\s*\})/i,
+			);
+			if (!literalType && /\btype\s*=/.test(attrs)) continue;
+			const type = (
+				literalType?.[1] ??
+				literalType?.[2] ??
+				literalType?.[3] ??
+				'text'
+			).toLowerCase();
+			if (NON_TEXT_INPUT_TYPES.has(type)) continue;
+		}
+		count += changeHandlers.length;
+	}
+	return count;
+}
+
 export async function collectSourceFiles(root, out = [], depth = 0) {
 	if (depth > 6 || out.length >= MAX_FILES) return out;
 	let entries;
@@ -193,9 +369,12 @@ export async function collectSourceFiles(root, out = [], depth = 0) {
 export function scanSource(source) {
 	const apis = new Map();
 	for (const name of Object.keys(REACT_API_MAP)) {
+		if (name === 'onChange') continue;
 		const matches = source.match(new RegExp(`\\b${name}\\b`, 'g'));
 		if (matches) apis.set(name, matches.length);
 	}
+	const textChanges = countReactStyleTextChanges(source);
+	if (textChanges > 0) apis.set('onChange', textChanges);
 	const imports = new Set();
 	for (const spec of IMPORT_SOURCES) {
 		if (
@@ -306,6 +485,28 @@ export async function bridgeReport({ packageName, path, projectRoot }) {
 	return report;
 }
 
+// Filesystem-free variant of bridgeReport for hosted/remote use: the caller
+// pastes source text instead of pointing at an installed package, so there is
+// no node_modules resolution, no version, and no file counting. Everything
+// else (API rows, verdict, plan) matches bridgeReport.
+export function bridgeReportFromSource(source, { packageName } = {}) {
+	const report = {
+		target: packageName ?? 'pasted-source',
+		existingBinding: packageName ? (KNOWN_BINDINGS[packageName] ?? null) : null,
+	};
+	if (packageName) {
+		report.vanillaCore = detectVanillaCore(packageName, null);
+	}
+	const scan = scanSource(source);
+	const rows = apiRows(scan.apis);
+	report.reactImports = [...scan.imports];
+	report.classComponents = scan.classComponent;
+	report.apis = rows;
+	report.verdict = verdictFor(rows, scan.classComponent);
+	report.plan = planFor(report);
+	return report;
+}
+
 function planFor(report) {
 	const steps = [];
 	if (report.existingBinding) {

package/src/bridge.test.js

@@ -5,6 +5,7 @@ import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 import {
 	bridgeReport,
+	bridgeReportFromSource,
 	detectVanillaCore,
 	scanSource,
 	KNOWN_BINDINGS,
@@ -36,6 +37,36 @@ describe('scanSource', () => {
 		expect(scanSource('class Boundary extends React.Component {}').classComponent).toBe(true);
 		expect(scanSource('class Memoish extends PureComponent {}').classComponent).toBe(true);
 	});
+
+	it('targets only React-style text-host onChange wiring', () => {
+		const source = `
+			function Demo(props) {
+				return <>
+					<input onChange={(event) => props.edit(event.currentTarget.value)} />
+					<textarea onChangeCapture={props.capture} />
+					<input type="checkbox" onChange={props.toggle} />
+					<input type={props.type} onChange={props.dynamic} />
+					<input {...props.field} onChange={props.dynamic} />
+					<input onInput={props.input} onChange={props.commit} />
+					<input onInput={null} onChange={props.edit} />
+					<input onChange={null} />
+					<input onChange={props.commit} suppressNativeChangeWarning />
+					<input onChange={props.commit} suppressNativeChangeWarning={true} />
+					<input onChange={props.edit} suppressNativeChangeWarning={false} />
+					<input onChange={props.edit} suppressNativeChangeWarning="false" />
+					<input onChange={props.edit} suppressNativeChangeWarning="true" />
+					<textarea onChange={props.commit} readOnly />
+					<textarea onChange={props.commit} disabled="disabled" />
+					<select onChange={props.select}><option>one</option></select>
+					<Input onChange={props.value} />
+					<Field onChange={props.value} />
+				</>;
+			}
+		`;
+		expect(scanSource(source).apis.get('onChange')).toBe(6);
+		const report = bridgeReportFromSource(source);
+		expect(report.plan.join('\n')).toContain('standard text host');
+	});
 });
 
 describe('detectVanillaCore', () => {
@@ -104,6 +135,34 @@ describe('bridgeReport', () => {
 		expect(report.plan.join('\n')).toContain('forwardRef');
 	});
 
+	it('lazy plus Suspense stays bridgeable', async () => {
+		const root = await mkdtemp(join(tmpdir(), 'octane-bridge-'));
+		await writeFakePackage(root, 'lazy-lib', {
+			'index.js': `
+				import { lazy, Suspense } from 'react';
+				export const Panel = lazy(() => import('./panel.js'));
+				export { Suspense };
+			`,
+		});
+		const report = await bridgeReport({ packageName: 'lazy-lib', projectRoot: root });
+		expect(report.apis.find((row) => row.name === 'lazy').status).toBe('same');
+		expect(report.verdict).toBe('bridgeable');
+	});
+
+	it('routes streaming SSR entry points to octane/server as a rewrite', async () => {
+		const root = await mkdtemp(join(tmpdir(), 'octane-bridge-'));
+		await writeFakePackage(root, 'streamer', {
+			'index.js': `
+				import { renderToPipeableStream } from 'react-dom/server';
+				export const ssr = (el) => renderToPipeableStream(el);
+			`,
+		});
+		const report = await bridgeReport({ packageName: 'streamer', projectRoot: root });
+		expect(report.apis.find((row) => row.name === 'renderToPipeableStream').status).toBe('rewrite');
+		expect(report.verdict).toBe('bridgeable-with-rewrites');
+		expect(report.plan.join('\n')).toContain('octane/server');
+	});
+
 	it('reports class components as needs-rework', async () => {
 		const root = await mkdtemp(join(tmpdir(), 'octane-bridge-'));
 		await writeFakePackage(root, 'classy', {
@@ -144,7 +203,64 @@ describe('bridgeReport', () => {
 	});
 });
 
+describe('bridgeReportFromSource', () => {
+	it('produces the same verdict and plan as bridgeReport without touching the filesystem', () => {
+		const report = bridgeReportFromSource(`
+			import { forwardRef, useState } from 'react';
+			export const Thing = forwardRef((props, ref) => {
+				const [n] = useState(0);
+				return n;
+			});
+		`);
+		expect(report.target).toBe('pasted-source');
+		expect(report.reactImports).toContain('react');
+		expect(report.verdict).toBe('bridgeable-with-rewrites');
+		expect(report.apis.find((row) => row.name === 'forwardRef').status).toBe('rewrite');
+		expect(report.plan.join('\n')).toContain('forwardRef');
+	});
+
+	it('reports class components as needs-rework', () => {
+		const report = bridgeReportFromSource(`
+			import React from 'react';
+			export class Panel extends React.Component { render() { return null; } }
+		`);
+		expect(report.classComponents).toBe(true);
+		expect(report.verdict).toBe('needs-rework');
+		expect(report.plan.join('\n')).toContain('function component');
+	});
+
+	it('surfaces the official binding and vanilla core when a package name is given', () => {
+		const report = bridgeReportFromSource(`export {};`, {
+			packageName: '@tanstack/react-query',
+		});
+		expect(report.target).toBe('@tanstack/react-query');
+		expect(report.existingBinding).toBe('@octanejs/tanstack-query');
+		expect(report.vanillaCore).toBe('@tanstack/query-core');
+		expect(report.plan[0]).toContain('@octanejs/tanstack-query');
+	});
+
+	it('same-name hook usage stays bridgeable', () => {
+		const report = bridgeReportFromSource(`
+			import { useSyncExternalStore } from 'react';
+			export function useStore(api, selector) {
+				return useSyncExternalStore(api.subscribe, () => selector(api.getState()));
+			}
+		`);
+		expect(report.verdict).toBe('bridgeable');
+	});
+});
+
 describe('KNOWN_BINDINGS', () => {
+	it('maps every public Visx entry point to the aggregate Octane port', async () => {
+		const packagesRoot = fileURLToPath(new URL('../..', import.meta.url));
+		const manifest = JSON.parse(await readFile(join(packagesRoot, 'visx', 'package.json'), 'utf8'));
+		const upstreamPackages = Object.keys(manifest.exports).map((entry) =>
+			entry === '.' ? '@visx/visx' : `@visx/${entry.slice(2)}`,
+		);
+		expect(upstreamPackages).toHaveLength(49);
+		expect(upstreamPackages.every((name) => KNOWN_BINDINGS[name] === '@octanejs/visx')).toBe(true);
+	});
+
 	it('covers every published @octanejs binding (derived from workspace manifests)', async () => {
 		// The expected set is DERIVED from packages/*/package.json rather than
 		// hand-maintained, so publishing a new binding without registering it in