add memo example

website/docs/examples/memo.mdx

@@ -0,0 +1,55 @@
+---
+sidebar_position: 5
+---
+
+import MemoDirectiveExample from '@site/src/examples/memo';
+
+# Memo Directive
+
+This directive memoizes a component with `React.memo` to avoid unnecessary rerenders.
+
+```jsx
+const memoMap = new Map();
+
+function memoMiddleware(next, type, { $memo, ...props }, key) {
+  if ($memo && typeof type === 'function') {
+    let memoed = memoMap.get(type);
+    if (!memoed) {
+      memoed = React.memo(type);
+      memoMap.set(type, memoed);
+    }
+
+    return next(memoed, props, key);
+  }
+
+  return next(type, props, key);
+}
+
+addMiddlewares(memoMiddleware);
+```
+
+## Usage
+
+```jsx
+function App() {
+  // ...
+  return (
+    <div>
+      <Memoed>This is not memoed.</Memoed>
+      <Memoed $memo>This is memoed.</Memoed>
+    </div>
+  );
+}
+```
+
+<MemoDirectiveExample />
+
+## Typescript types
+
+```ts
+declare module 'react' {
+  interface Attributes {
+    $memo?: boolean;
+  }
+}
+```

website/docs/examples/on-wheel-active.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 6
 ---
 
 import Example from '@site/src/examples/onwheel-active';

website/src/examples/memo/index.tsx

@@ -0,0 +1,47 @@
+/** @jsxImportSource . */
+
+import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import BrowserWindow from '../../components/BrowserWindow';
+
+function Memoed({ children }: PropsWithChildren) {
+  const a = useRef(0);
+
+  return (
+    <p>
+      <span>{children}</span>
+      <span>&nbsp;Render count: {++a.current}</span>
+    </p>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCount((count) => count + 1);
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <div>
+    <p>Timer: {count}</p>
+
+    <Memoed>This is not memoed.</Memoed>
+    <Memoed $memo>This is memoed.</Memoed>
+
+    </div>
+  );
+}
+
+export default function IfDirectiveExample() {
+  return (
+    <BrowserWindow>
+      <App />
+    </BrowserWindow>
+  );
+}

website/src/examples/memo/jsx-runtime.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { createLocalJsxContext } from '../setup';
+
+const ctx = createLocalJsxContext();
+export const { jsx, jsxDEV, jsxs } = ctx;
+
+
+const memoMap = new Map();
+
+ctx.addMiddlewares(function memoMiddleware(next, type, { $memo, ...props }, key) {
+  if ($memo && typeof type === 'function') {
+    let memoed = memoMap.get(type);
+    if (!memoed) {
+      memoed = memo(type);
+      memoMap.set(type, memoed);
+    }
+
+    return next(memoed, props, key);
+  }
+
+  return next(type, props, key);
+});

website/src/types.d.ts

@@ -1,4 +1,4 @@
-export {};
+export { };
 
 declare module 'react' {
   interface Attributes {
@@ -7,6 +7,7 @@ declare module 'react' {
     $tooltip?: ReactNode;
     $ripple?: boolean;
     $if?: any;
+    $memo?: boolean;
   }
 
   interface DOMAttributes<T> {