MyReact

A lightweight, high-performance React-like framework

Fully compatible with React ecosystem, with built-in support for modern build tools

Live Demo · Documentation · Examples

---

✨ Features

• 🧬 RSC Ready - Experimental React Server Components with SSR + Flight streams
• 🚀 React Compatible - Drop-in replacement for React with the same API
• ⚡ High Performance - Optimized reconciler with minimal overhead
• 🔧 Modern Tooling - First-class support for Vite, Next.js, Rspack, and Webpack
• 🔄 Fast Refresh - Built-in HMR support for instant development feedback
• 🎨 Multiple Renderers - DOM, Terminal, Three.js, and Lynx renderers out of the box
• 📱 Lynx Support - Build cross-platform native apps with Lynx dual-thread architecture
• 📦 Tree Shakeable - Optimized bundle size with ES modules
• 🧪 Experimental Features - Reactive programming model and more
• 🛠️ DevTools - Custom developer tools for debugging

🎯 Quick Start

Installation

# Install core packages
pnpm add @my-react/react @my-react/react-dom

🔌 Framework Integration

Next.js

pnpm add -D @my-react/react-refresh @my-react/react-refresh-tools

// next.config.js
const withNext = require("@my-react/react-refresh-tools/withNext");

module.exports = withNext(nextConfig);

Vite

pnpm add -D @my-react/react-refresh @my-react/react-vite

// vite.config.ts
import react from "@my-react/react-vite";

export default defineConfig({
  plugins: [
    react({
      // remix: true,  // Enable Remix framework support
      // router: true, // Enable React Router v7+ support
    }),
  ],
});

🧬 React Server Components Integration

MyReact is one of the first React-like frameworks to ship an end-to-end RSC pipeline in a non-React runtime. The integration includes:

• Flight stream serialization/deserialization powered by @lazarv/rsc
• Server Actions ("use server") and client components ("use client")
• Unified SSR + RSC flow (server renders HTML from the Flight stream)
• Vite dev server integration for RSC endpoints and SSR HTML

RSC Flow (High Level)

1. Server renders Flight stream with renderToFlightStream.
2. SSR decodes the Flight stream with createFlightServer().createFromStream(...).
3. HTML is rendered from the decoded tree.
4. The same Flight stream is injected into HTML for hydration.
5. Client hydrates using createFlightClient() and the injected stream.

Example Entry Points

ui/rsc-example/src/entry-rsc.tsx    # Flight stream
ui/rsc-example/src/entry-ssr.tsx    # SSR HTML from Flight
ui/rsc-example/src/entry-client.tsx # Hydration

Vite + RSC (Experimental)

pnpm add -D @my-react/react-vite
pnpm add @my-react/react-server

// vite.config.ts
import react from "@my-react/react-vite";

export default defineConfig({
  plugins: [
    react({
      rsc: true,
      rscEndpoint: "/__rsc",
      rscActionEndpoint: "/__rsc_action",
      ssr: {
        entryRsc: "/src/entry-rsc.tsx",
        entrySsr: "/src/entry-ssr.tsx",
      },
    }),
  ],
});

RSC example (SSR + RSC + hydration): ui/rsc-example

Rspack

pnpm add -D @my-react/react-refresh @my-react/react-rspack

// rspack.config.ts
import { rspack } from "@rspack/core";
import RspackPlugin from "@my-react/react-rspack";

const config = {
  ...config,
  plugins: [...config.plugins, new RspackPlugin()],
};

Lynx (Cross-Platform Native Apps)

MyReact supports Lynx for building cross-platform native applications with a dual-thread architecture.

pnpm add @my-react/react-lynx

// lynx.config.ts
import { defineConfig } from "@lynx-js/rspeedy";
import { pluginMyReactLynx } from "@my-react/react-lynx/plugin";

export default defineConfig({
  plugins: [pluginMyReactLynx()],
});

// src/index.tsx
import { root, useInitData, InitDataProvider } from "@my-react/react-lynx";

function App() {
  const initData = useInitData();
  return <view>{initData.message}</view>;
}

root.render(
  <InitDataProvider>
    <App />
  </InitDataProvider>
);

Lynx-Specific APIs

API	Description
root.render()	Render to Lynx page root
useInitData()	Get initData with auto re-render
useGlobalProps()	Get globalProps with auto re-render
useLynxGlobalEventListener()	Early event listener registration
useMainThreadRef()	Create main-thread accessible ref
runOnMainThread()	Execute code on main thread
runOnBackground()	Execute code on background thread
InitDataProvider	Provider for initData context
GlobalPropsProvider	Provider for globalProps context

🎮 Examples

Next.js Demo Full-featured SSR application

Vite Fast development setup

RSC Server Components example

Lynx Cross-platform native app

📦 Packages

Core Packages

Package	Version	Description
@my-react/react		Core library with hooks and components
@my-react/react-dom		DOM renderer with SSR support
@my-react/react-lynx	-	Lynx renderer for cross-platform apps
@my-react/react-terminal		Terminal UI renderer
@my-react/react-three-fiber		Three.js renderer

Build Tool Integration

Package	Version	Description
@my-react/react-refresh		Fast refresh runtime
@my-react/react-refresh-tools		Webpack & Next.js plugin
@my-react/react-vite		Vite plugin
@my-react/react-rspack		Rspack plugin

Internal Packages

Package	Version	Description
@my-react/react-jsx		JSX runtime
@my-react/react-shared		Shared utilities
@my-react/react-reconciler		Full-featured reconciler
@my-react/react-reconciler-compact		Compact reconciler

Experimental

Package	Version	Description
@my-react/react-reactive		Reactive programming model

🚀 Development

Prerequisites

• Node.js 20.x+
• pnpm 9.x+

Setup

# Clone the repository
git clone https://github.com/MrWangJustToDo/MyReact.git
cd MyReact

# Install dependencies
pnpm install

# Generate GraphQL types (if needed)
pnpm gen:gql

# Build all packages
pnpm build

Development Commands

# Start development servers
pnpm dev:ssr      # SSR example
pnpm dev:csr      # CSR example
pnpm dev:next     # Next.js example
pnpm dev:vite     # Vite example
pnpm dev:remix    # Remix example
pnpm dev:rspack   # Rspack example
pnpm dev:lynx     # Lynx example

# Other commands
pnpm dev          # Watch mode for packages
pnpm test         # Run tests
pnpm lint         # Lint code

---

📚 API Reference

Core API

@my-react/react createElement cloneElement isValidElement Children lazy forwardRef createContext createRef memo Component PureComponent StrictMode Fragment Suspense startTransition

@my-react/react-dom render renderToString findDOMNode hydrate createPortal unmountComponentAtNode createRoot ⭐ hydrateRoot ⭐ renderToNodeStream renderToStaticMarkup renderToStaticNodeStream renderToPipeableStream ⭐ renderToReadableStream ⭐

Hooks useState useEffect useLayoutEffect useRef useMemo useReducer useCallback useContext useImperativeHandle useDebugValue useSignal useDeferredValue ⭐ useId ⭐ useInsertionEffect ⭐ useSyncExternalStore ⭐ useTransition ⭐

@my-react/react-reactive createReactive reactive ref computed watch onBeforeMount onBeforeUnmount onBeforeUpdate onMounted onUnmounted onUpdated

@my-react/react-lynx root.render useInitData useInitDataChanged useGlobalProps useGlobalPropsChanged useLynxGlobalEventListener useMainThreadRef MainThreadRef runOnMainThread runOnBackground InitDataProvider GlobalPropsProvider registerDataProcessors

React Server Components API

@my-react/react-server/server

• renderToFlightStream(element)
• createFlightServer({ moduleLoader, resolveModuleId })
• registerClientReference(...)
• registerServerReference(...)

@my-react/react-server/client

• createFlightClient({ moduleLoader, actionEndpoint })
• createServerActionReference(actionId, callServer?)

⭐ = React 18+ features

🛠️ DevTools

MyReact comes with custom developer tools for debugging and inspecting your applications.

MyReact DevTools (Beta)

Features

• Component tree inspection
• Props and state debugging
• Performance profiling
• Hook debugging
• Light and dark theme support

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

MIT © MrWangJustToDo

---

_{Built with ❤️ by MrWangJustToDo}