MyReact -- a React like framework

Examples

Online Next.js example https://mrwangjusttodo.github.io/MrWangJustToDo.io/

Install

# install
pnpm add @my-react/react @my-react/react-dom

start in Next.js

# quick start in next.js (<= 12 version)
pnpm add -D @my-react/react-refresh @my-react/react-refresh-tools

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

modules.export = withNext(nextConfig);

start in Vite

# quick start in 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()],
});

---

Packages

Package	Version
@my-react/react
@my-react/react-dom
refresh
@my-react/react-refresh
@my-react/react-refresh-tools
@my-react/react-vite
internal
@my-react/react-jsx
@my-react/react-shared
@my-react/react-reconciler
experimental
@my-react/react-reactive

Development

• node@18.x
• pnpm@8.x

clone this project

pnpm install

pnpm gen:gql

pnpm build

pnpm dev:ssr / dev:csr / dev:next / dev:vite

---

Api

@my-react/react	@my-react/react-dom	@my-react/react-reactive	@my-react/react (hook)	@my-react/react-refresh	@my-react/react-refresh-tools	@my-react/react-vite
createELement	render	createReactive	useState	babel plugin	webpack plugin	vite plugin
cloneElement	renderToString	reactive	useEffect	refresh runtime	next.js plugin
isValidElement	findDOMNode	ref	useLayoutEffect		webpack loader
Children	hydrate	computed	useRef
lazy	createPortal	watch	useMemo
forwardRef	unmountComponentAtNode	onBeforeMount	useReducer
createContext	createRoot (new)	onBeforeUnmount	useCallback
createRef	hydrateRoot (new)	onBeforeUpdate	useContext
memo	renderToNodeStream	onMounted	useImperativeHandle
Component	renderToStaticMarkup	onUnmounted	useDebugValue
PureComponent	renderToStaticNodeStream	onUpdated	useSignal
StrictMode	renderToPipeableStream (new)		useDeferredValue (new)
Fragment	renderToReadableStream (new)		useId (new)
Suspense			useInsertionEffect (new)
startTransition			useSyncExternalStore (new)
			useTransition (new)

Vue like reactive api

import { reactive, createReactive, onMounted, onUnmounted } from "@my-react/react-reactive";

const useReactiveApi_Position = () => {
  const position = reactive({ x: 0, y: 0 });
  let id = null;
  const action = (e) => ((position.x = e.clientX), (position.y = e.clientY));
  onMounted(() => {
    window.addEventListener("mousemove", action);
  });

  onUnmounted(() => {
    window.removeEventListener("mousemove", action);
  });

  return position;
};

const Reactive1 = createReactive({
  setup(props, context) {
    const position = useReactiveApi_Position();
    const data = reactive({ a: 1 });
    const click = () => data.a++;

    return { data, click, position };
  },
  // or add a render function
  // render: (state, props, context) => xxx
});

const App = () => {
  return (
    <Reactive1 title="hello">
      {({ data, click, position, title }) => (
        <>
          <p>{data.a}</p>
          <button onClick={click}>click</button>
          <p>
            {position.x} {position.y}
          </p>
          {title}
        </>
      )}
    </Reactive1>
  );
};

License

MIT