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
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

• [email protected]
• [email protected]

clone this project

pnpm install

pnpm gen:gql

pnpm build

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

Api

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