@xyd-js/source-react-runtime 0.0.0-build-23166ce-20260423151359

package/__fixtures__/7.react-router.app/input/app/routes/home.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import type { Product } from "../types/product";
+import { ProductCard } from "../components/ProductCard";
+
+const PRODUCTS: Product[] = [
+    { id: "1", name: "Keyboard", price: 79, category: "peripherals", inStock: true },
+    { id: "2", name: "Mouse", price: 49, category: "peripherals", inStock: true },
+    { id: "3", name: "Monitor", price: 399, category: "displays", inStock: false },
+];
+
+export default function Home() {
+    const [cart, setCart] = useState<string[]>([]);
+
+    return (
+        <div>
+            <h1>Shop</h1>
+            <p>{cart.length} items in cart</p>
+            <div>
+                {PRODUCTS.map(p => (
+                    <ProductCard
+                        key={p.id}
+                        product={p}
+                        onAddToCart={(id) => setCart(prev => [...prev, id])}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}

package/__fixtures__/7.react-router.app/input/app/routes/product.tsx

@@ -0,0 +1,6 @@
+import { useParams } from "react-router";
+
+export default function ProductRoute() {
+    const { productId } = useParams();
+    return <div><h1>Product {productId}</h1></div>;
+}

package/__fixtures__/7.react-router.app/input/app/routes.ts

@@ -0,0 +1,7 @@
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
+
+export default [
+    index("routes/home.tsx"),
+    route("products/:productId", "routes/product.tsx"),
+    route("cart", "routes/cart.tsx"),
+] satisfies RouteConfig;

package/__fixtures__/7.react-router.app/input/app/types/product.ts

@@ -0,0 +1,12 @@
+export interface Product {
+    id: string;
+    name: string;
+    price: number;
+    category: string;
+    inStock: boolean;
+}
+
+export interface CartItem {
+    product: Product;
+    quantity: number;
+}

package/__fixtures__/7.react-router.app/input/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "xyd-fixture-rt-7-react-router",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build"
+  }
+}

package/__fixtures__/7.react-router.app/input/react-router.config.ts

@@ -0,0 +1,2 @@
+import type { Config } from "@react-router/dev/config";
+export default { ssr: false } satisfies Config;

package/__fixtures__/7.react-router.app/input/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "strict": true,
+    "rootDirs": [".", "./.react-router/types"]
+  },
+  "include": ["app/**/*.ts", "app/**/*.tsx"]
+}

package/__fixtures__/7.react-router.app/input/vite.config.ts

@@ -0,0 +1,14 @@
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+import { resolve } from "node:path";
+import { xydSourceReactRuntime } from "@xyd-js/source-react-runtime";
+
+export default defineConfig({
+  plugins: [
+    xydSourceReactRuntime(),
+    reactRouter(),
+  ],
+  build: {
+    minify: false,
+  },
+});

package/__fixtures__/7.react-router.app/output.js

@@ -0,0 +1,44 @@
+// === client/assets/home-HASH.js ===
+import { p as jsxRuntimeExports, t as Link, w as withComponentProps, a as reactExports } from "./chunk-EVOBXE3Y-HASH.js";
+function ProductCard({ product, onAddToCart, layout = "grid" }) {
+  return jsxRuntimeExports.jsxs("div", { className: `product-card product-card--${layout}`, children: [jsxRuntimeExports.jsx(Link, { to: `/products/${product.id}`, children: jsxRuntimeExports.jsx("h3", { children: product.name }) }), jsxRuntimeExports.jsxs("span", { children: ["$", product.price] }), jsxRuntimeExports.jsx("button", { type: "button", disabled: !product.inStock, onClick: () => onAddToCart(product.id), children: product.inStock ? "Add to Cart" : "Out of Stock" })] });
+}
+ProductCard.__xydUniform = JSON.parse('{"title":"ProductCard","canonical":"","description":"","definitions":[{"title":"Props","properties":[{"name":"product","type":"object","description":"","meta":[{"name":"required","value":"true"}],"properties":[{"name":"id","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"name","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"price","type":"number","description":"","meta":[{"name":"required","value":"true"}]},{"name":"category","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"inStock","type":"boolean","description":"","meta":[{"name":"required","value":"true"}]}]},{"name":"layout","type":"$xor","description":"","properties":[{"name":"layout","type":"object","description":"","meta":[]},{"name":"layout","type":"object","description":"","meta":[]}],"meta":[]}],"meta":[{"name":"type","value":"parameters"}]}],"examples":{"groups":[]}}');
+const PRODUCTS = [{
+  id: "1",
+  name: "Keyboard",
+  price: 79,
+  category: "peripherals",
+  inStock: true
+}, {
+  id: "2",
+  name: "Mouse",
+  price: 49,
+  category: "peripherals",
+  inStock: true
+}, {
+  id: "3",
+  name: "Monitor",
+  price: 399,
+  category: "displays",
+  inStock: false
+}];
+const home = withComponentProps(function Home() {
+  const [cart, setCart] = reactExports.useState([]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+    children: [/* @__PURE__ */ jsxRuntimeExports.jsx("h1", {
+      children: "Shop"
+    }), /* @__PURE__ */ jsxRuntimeExports.jsxs("p", {
+      children: [cart.length, " items in cart"]
+    }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+      children: PRODUCTS.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx(ProductCard, {
+        product: p,
+        onAddToCart: (id) => setCart((prev) => [...prev, id])
+      }, p.id))
+    })]
+  });
+});
+export {
+  home as default
+};
+

package/__fixtures__/8.tanstack-router.app/input/index.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8" /><title>TanStack Router App</title></head>
+<body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body>
+</html>

package/__fixtures__/8.tanstack-router.app/input/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "xyd-fixture-rt-8-tanstack-router",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/__fixtures__/8.tanstack-router.app/input/src/components/EmployeeTable.tsx

@@ -0,0 +1,45 @@
+import { Link } from "@tanstack/react-router";
+import type { Employee, SearchFilters } from "../types/employee";
+
+interface EmployeeTableProps {
+    employees: Employee[];
+    filters: SearchFilters;
+    onFiltersChange: (filters: SearchFilters) => void;
+}
+
+export function EmployeeTable({ employees, filters, onFiltersChange }: EmployeeTableProps) {
+    const filtered = employees.filter(e => {
+        if (filters.activeOnly && !e.isActive) return false;
+        if (filters.department && e.department !== filters.department) return false;
+        if (filters.query && !e.name.toLowerCase().includes(filters.query.toLowerCase())) return false;
+        return true;
+    });
+
+    return (
+        <div>
+            <input
+                value={filters.query}
+                onChange={e => onFiltersChange({ ...filters, query: e.target.value })}
+                placeholder="Search..."
+            />
+            <table>
+                <thead>
+                    <tr><th>Name</th><th>Department</th><th>Salary</th></tr>
+                </thead>
+                <tbody>
+                    {filtered.map(emp => (
+                        <tr key={emp.id}>
+                            <td>
+                                <Link to="/employees/$employeeId" params={{ employeeId: String(emp.id) }}>
+                                    {emp.name}
+                                </Link>
+                            </td>
+                            <td>{emp.department}</td>
+                            <td>${emp.salary.toLocaleString()}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}

package/__fixtures__/8.tanstack-router.app/input/src/main.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen";
+
+const router = createRouter({ routeTree });
+
+declare module "@tanstack/react-router" {
+    interface Register {
+        router: typeof router;
+    }
+}
+
+const root = document.getElementById("root")!;
+ReactDOM.createRoot(root).render(
+    <StrictMode>
+        <RouterProvider router={router} />
+    </StrictMode>,
+);

package/__fixtures__/8.tanstack-router.app/input/src/routeTree.gen.ts

@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as EmployeesRouteImport } from './routes/employees'
+import { Route as IndexRouteImport } from './routes/index'
+
+const EmployeesRoute = EmployeesRouteImport.update({
+  id: '/employees',
+  path: '/employees',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/employees': typeof EmployeesRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/employees': typeof EmployeesRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/employees': typeof EmployeesRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/employees'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/employees'
+  id: '__root__' | '/' | '/employees'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  EmployeesRoute: typeof EmployeesRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/employees': {
+      id: '/employees'
+      path: '/employees'
+      fullPath: '/employees'
+      preLoaderRoute: typeof EmployeesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  EmployeesRoute: EmployeesRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/__fixtures__/8.tanstack-router.app/input/src/routes/__root.tsx

@@ -0,0 +1,13 @@
+import { createRootRoute, Outlet, Link } from "@tanstack/react-router";
+
+export const Route = createRootRoute({
+    component: () => (
+        <div>
+            <nav>
+                <Link to="/">Home</Link>
+                <Link to="/employees">Employees</Link>
+            </nav>
+            <Outlet />
+        </div>
+    ),
+});

package/__fixtures__/8.tanstack-router.app/input/src/routes/employees.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import { EmployeeTable } from "../components/EmployeeTable";
+import type { Employee, SearchFilters } from "../types/employee";
+
+const EMPLOYEES: Employee[] = [
+    { id: 1, name: "Alice", department: "engineering", salary: 120000, isActive: true },
+    { id: 2, name: "Bob", department: "design", salary: 95000, isActive: true },
+    { id: 3, name: "Carol", department: "marketing", salary: 85000, isActive: false },
+];
+
+export const Route = createFileRoute("/employees")({
+    component: function Employees() {
+        const [filters, setFilters] = useState<SearchFilters>({ query: "", activeOnly: false });
+
+        return (
+            <div>
+                <h1>Employees</h1>
+                <EmployeeTable employees={EMPLOYEES} filters={filters} onFiltersChange={setFilters} />
+            </div>
+        );
+    },
+});

package/__fixtures__/8.tanstack-router.app/input/src/routes/index.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+    component: () => <div><h1>Dashboard</h1></div>,
+});

package/__fixtures__/8.tanstack-router.app/input/src/types/employee.ts

@@ -0,0 +1,13 @@
+export interface Employee {
+    id: number;
+    name: string;
+    department: "engineering" | "design" | "marketing" | "sales";
+    salary: number;
+    isActive: boolean;
+}
+
+export interface SearchFilters {
+    query: string;
+    department?: Employee["department"];
+    activeOnly: boolean;
+}

package/__fixtures__/8.tanstack-router.app/input/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "strict": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/__fixtures__/8.tanstack-router.app/input/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "vite";
+import { resolve } from "node:path";
+import react from "@vitejs/plugin-react";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import { xydSourceReactRuntime } from "@xyd-js/source-react-runtime";
+
+export default defineConfig({
+  plugins: [
+    xydSourceReactRuntime(),
+    TanStackRouterVite({ target: "react", autoCodeSplitting: true }),
+    react(),
+  ],
+  build: {
+    outDir: "dist",
+    minify: false,
+    rollupOptions: {
+      input: resolve(__dirname, "index.html"),
+      external: ["react", "react/jsx-runtime", "react/jsx-dev-runtime", "react-dom", "@tanstack/react-router"],
+    },
+  },
+});

package/__fixtures__/8.tanstack-router.app/output.js

@@ -0,0 +1,63 @@
+// === assets/employees-HASH.js ===
+import { jsxDEV } from "react/jsx-dev-runtime";
+import { useState } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+function EmployeeTable({ employees, filters, onFiltersChange }) {
+  const filtered = employees.filter((e) => {
+    if (filters.activeOnly && !e.isActive)
+      return false;
+    if (filters.department && e.department !== filters.department)
+      return false;
+    if (filters.query && !e.name.toLowerCase().includes(filters.query.toLowerCase()))
+      return false;
+    return true;
+  });
+  return jsxs("div", { children: [jsx("input", { value: filters.query, onChange: (e) => onFiltersChange({ ...filters, query: e.target.value }), placeholder: "Search..." }), jsxs("table", { children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { children: "Name" }), jsx("th", { children: "Department" }), jsx("th", { children: "Salary" })] }) }), jsx("tbody", { children: filtered.map((emp) => jsxs("tr", { children: [jsx("td", { children: jsx(Link, { to: "/employees/$employeeId", params: { employeeId: String(emp.id) }, children: emp.name }) }), jsx("td", { children: emp.department }), jsxs("td", { children: ["$", emp.salary.toLocaleString()] })] }, emp.id)) })] })] });
+}
+EmployeeTable.__xydUniform = JSON.parse('{"title":"EmployeeTable","canonical":"","description":"","definitions":[{"title":"Props","properties":[{"name":"employees","type":"$array","description":"","meta":[{"name":"required","value":"true"}],"properties":[],"ofProperty":{"name":"","type":"object","properties":[{"name":"id","type":"number","description":"","meta":[{"name":"required","value":"true"}]},{"name":"name","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"department","type":"$xor","description":"","properties":[{"name":"department","type":"object","description":"","meta":[{"name":"required","value":"true"}]},{"name":"department","type":"object","description":"","meta":[{"name":"required","value":"true"}]},{"name":"department","type":"object","description":"","meta":[{"name":"required","value":"true"}]},{"name":"department","type":"object","description":"","meta":[{"name":"required","value":"true"}]}],"meta":[{"name":"required","value":"true"}]},{"name":"salary","type":"number","description":"","meta":[{"name":"required","value":"true"}]},{"name":"isActive","type":"boolean","description":"","meta":[{"name":"required","value":"true"}]}],"description":"","meta":[{"name":"required","value":"true"}]}},{"name":"filters","type":"object","description":"","meta":[{"name":"required","value":"true"}],"properties":[{"name":"query","type":"string","description":"","meta":[{"name":"required","value":"true"}]},{"name":"department","type":"$xor","description":"","properties":[{"name":"department","type":"object","description":"","meta":[]},{"name":"department","type":"object","description":"","meta":[]},{"name":"department","type":"object","description":"","meta":[]},{"name":"department","type":"object","description":"","meta":[]}],"meta":[]},{"name":"activeOnly","type":"boolean","description":"","meta":[{"name":"required","value":"true"}]}]}],"meta":[{"name":"type","value":"parameters"}]}],"examples":{"groups":[]}}');
+const EMPLOYEES = [{
+  id: 1,
+  name: "Alice",
+  department: "engineering",
+  salary: 12e4,
+  isActive: true
+}, {
+  id: 2,
+  name: "Bob",
+  department: "design",
+  salary: 95e3,
+  isActive: true
+}, {
+  id: 3,
+  name: "Carol",
+  department: "marketing",
+  salary: 85e3,
+  isActive: false
+}];
+const SplitComponent = function Employees() {
+  const [filters, setFilters] = useState({
+    query: "",
+    activeOnly: false
+  });
+  return /* @__PURE__ */ jsxDEV("div", { children: [
+    /* @__PURE__ */ jsxDEV("h1", { children: "Employees" }, void 0, false, {
+      fileName: "<ROOT>/src/routes/employees.tsx?tsr-split=component",
+      lineNumber: 28,
+      columnNumber: 17
+    }, this),
+    /* @__PURE__ */ jsxDEV(EmployeeTable, { employees: EMPLOYEES, filters, onFiltersChange: setFilters }, void 0, false, {
+      fileName: "<ROOT>/src/routes/employees.tsx?tsr-split=component",
+      lineNumber: 29,
+      columnNumber: 17
+    }, this)
+  ] }, void 0, true, {
+    fileName: "<ROOT>/src/routes/employees.tsx?tsr-split=component",
+    lineNumber: 27,
+    columnNumber: 10
+  }, this);
+};
+export {
+  SplitComponent as component
+};
+

package/__tests__/source-react-runtime.test.ts

@@ -0,0 +1,61 @@
+import {describe, it} from 'vitest';
+
+import {testSourceReactRuntime} from './utils';
+
+const tests: {
+    name: string;
+    description: string;
+    propertyName?: string;
+}[] = [
+    // advanced/optional
+    {
+        name: '-1.vite-lib.custom-property',
+        description: 'custom propertyName: injects __docs instead of __xydUniform',
+        propertyName: '__docs',
+    },
+    // vite-lib
+    {
+        name: '1.vite-lib.user-card',
+        description: 'vite lib: basic component with inline props',
+    },
+    {
+        name: '2.vite-lib.sample-app',
+        description: 'vite lib: cross-file types with contexts',
+    },
+    {
+        name: '3.vite-lib.sample-real-app',
+        description: 'vite lib: real todo app with multiple components',
+    },
+    // vite-app
+    {
+        name: '4.vite-app.user-card',
+        description: 'vite app: basic component with automatic JSX runtime',
+    },
+    // rollup
+    {
+        name: '5.rollup.user-card',
+        description: 'rollup: basic component with @rollup/plugin-typescript',
+    },
+    // esbuild
+    {
+        name: '6.esbuild.user-card',
+        description: 'esbuild: basic component with esbuild loader',
+    },
+    // real framework apps
+    {
+        name: '7.react-router.app',
+        description: 'react-router v7: real framework mode with routes, Link, useParams',
+    },
+    {
+        name: '8.tanstack-router.app',
+        description: 'tanstack router: file-based routing with createFileRoute, Link, useNavigate',
+    },
+];
+
+describe('xyd-source-react-runtime', () => {
+    for (const t of tests) {
+        it(t.description, async () => {
+            await testSourceReactRuntime(t.name, t.propertyName);
+        }, 60_000);
+    }
+});

package/__tests__/utils.ts

@@ -0,0 +1,100 @@
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import {execSync} from 'node:child_process';
+import {expect} from 'vitest';
+
+const fixturesBase = path.resolve(__dirname, '../__fixtures__');
+
+function fullFixturePath(name: string) {
+    return path.join(fixturesBase, name);
+}
+
+/**
+ * Recursively finds all .js files in a directory, sorted by path.
+ */
+function findJsFiles(dir: string): string[] {
+    const files: string[] = [];
+    if (!fs.existsSync(dir)) return files;
+
+    for (const entry of fs.readdirSync(dir, {withFileTypes: true})) {
+        const full = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+            files.push(...findJsFiles(full));
+        } else if (entry.name.endsWith('.js')) {
+            files.push(full);
+        }
+    }
+    return files.sort();
+}
+
+/**
+ * Concatenates all JS files from the build output into a single string,
+ * with file separators so you can see the full transformed code.
+ */
+function collectBuildOutput(buildDir: string, inputRoot: string, propertyName: string = '__xydUniform'): string {
+    const jsFiles = findJsFiles(buildDir);
+    const parts: string[] = [];
+
+    for (const file of jsFiles) {
+        const relativePath = path.relative(buildDir, file);
+        const code = fs.readFileSync(file, 'utf-8');
+
+        if (!code.includes(propertyName)) continue;
+
+        parts.push(`// === ${relativePath} ===`);
+        parts.push(code);
+        parts.push('');
+    }
+
+    return parts.join('\n')
+        .split(inputRoot).join('<ROOT>')
+        .replace(/[-_\w]+-[A-Za-z0-9_-]{6,10}\.(js|css)/g, (match) => {
+            // Normalize content hashes in filenames: home-BpHCO2Vo.js → home-HASH.js
+            return match.replace(/-[A-Za-z0-9_-]{6,10}\./, '-HASH.');
+        });
+}
+
+/**
+ * Builds a fixture app by running its `build` script from package.json,
+ * then snapshots the full build output code.
+ *
+ * Each fixture is a real app with its own framework config and build command.
+ */
+export async function testSourceReactRuntime(fixtureName: string, propertyName: string = '__xydUniform') {
+    const inputRoot = fullFixturePath(`${fixtureName}/input`);
+
+    // Clean previous build outputs
+    for (const dir of ['dist', 'build', '.react-router']) {
+        const p = path.resolve(inputRoot, dir);
+        if (fs.existsSync(p)) fs.rmSync(p, {recursive: true, force: true});
+    }
+
+    // Run the fixture's own build script — just like a real consumer would
+    execSync('pnpm build', {cwd: inputRoot, stdio: 'pipe', timeout: 60_000});
+
+    // Find the build output directory (varies by framework)
+    let buildDir = path.resolve(inputRoot, 'dist');
+    if (!fs.existsSync(buildDir)) {
+        buildDir = path.resolve(inputRoot, 'build');
+    }
+
+    // Collect full build output code
+    const result = collectBuildOutput(buildDir, inputRoot, propertyName);
+
+    // Verify at least one component was injected
+    expect(result).toContain(propertyName);
+
+    // Save snapshot
+    const snapshotPath = fullFixturePath(`${fixtureName}/output.js`);
+    fs.writeFileSync(snapshotPath, result);
+
+    // Compare
+    const expected = fs.readFileSync(snapshotPath, 'utf8');
+    expect(result).toEqual(expected);
+
+    // Cleanup
+    for (const dir of ['dist', 'build', '.react-router']) {
+        const p = path.resolve(inputRoot, dir);
+        if (fs.existsSync(p)) fs.rmSync(p, {recursive: true, force: true});
+    }
+}

package/dist/esbuild.d.ts

@@ -0,0 +1,20 @@
+import { Plugin } from 'esbuild';
+import { XydSourceReactRuntimeOptions } from './index.js';
+import 'vite';
+import '@xyd-js/uniform';
+
+/**
+ * esbuild plugin adapter for xyd-source-react-runtime.
+ *
+ * ```js
+ * import {xydSourceReactRuntimeEsbuild} from '@xyd-js/source-react-runtime/esbuild';
+ *
+ * await esbuild.build({
+ *     entryPoints: ['src/index.ts'],
+ *     plugins: [xydSourceReactRuntimeEsbuild({tsconfig: './tsconfig.json'})],
+ * });
+ * ```
+ */
+declare function xydSourceReactRuntimeEsbuild(options?: XydSourceReactRuntimeOptions): Plugin;
+
+export { xydSourceReactRuntimeEsbuild };