JSX element DOM node reference

src/enact.tsx

@@ -9,9 +9,11 @@ import {
   resource,
   spawn,
   Stream,
+  withResolvers,
+  WithResolvers,
 } from "effection";
-import type { ReactNode } from "react";
-import { useEffect, useState } from "react";
+import type { ReactElement, ReactNode } from "react";
+import { cloneElement, useEffect, useState } from "react";
 
 export interface EnactComponent<T> {
   (props: T): Operation<ReactNode | void>;
@@ -28,6 +30,51 @@ export function* render(node: ReactNode): Operation<void> {
 
 export const $ = render;
 
+function HOC({
+  children,
+  resolver,
+}: {
+  children: ReactElement;
+  resolver: WithResolvers<any>;
+}) {
+  const [ref, set_ref] = useState(null);
+
+  useEffect(() => {
+    if (ref) resolver.resolve(ref);
+  }, [ref]);
+
+  // @ts-expect-error
+  return cloneElement(children, { ref: set_ref });
+}
+
+export function* ref<T extends keyof HTMLElementTagNameMap>(
+  current: ReactElement
+) {
+  const resolver = withResolvers<HTMLElementTagNameMap[T]>();
+  yield* render(<HOC resolver={resolver}>{current}</HOC>);
+  return resolver.operation;
+}
+
+export function useRef<T extends HTMLElement>() {
+  const ref = {current: null};
+  const resolver = withResolvers<T>();
+
+  const fn = resource<T>(function*(provide) {
+    yield* provide(yield* resolver.operation)
+  })
+
+  return {
+    [Symbol.iterator]: fn[Symbol.iterator],
+    get current() {
+      return ref.current;
+    },
+    set current(node: any) {
+      ref.current = node;
+      resolver.resolve(node)
+    }
+  }
+}
+
 const RenderContext = createContext<(node: ReactNode) => void>("enact.render");
 
 export function enact<T>(component: EnactComponent<T>): ReactComponent<T> {

src/examples/Counter.tsx

@@ -1,4 +1,5 @@
-import { enact, useValue } from "../enact.tsx";
+import { sleep } from "effection";
+import { $, useRef, enact, useValue } from "../enact.tsx";
 
 /**
  * ```ts
@@ -13,12 +14,24 @@ import { enact, useValue } from "../enact.tsx";
   }
   ```
  */
-export const Counter = enact(function*() {
-    let count = useValue(0);
-
-    return (
-      <button type="button" onClick={() => count.set(count.current + 1)}>
+export const Counter = enact(function* () {
+  let count = useValue(0);
+
+  let node = useRef<HTMLButtonElement>()
+
+  yield* $(
+    <button ref={node} type="button" onClick={() => count.set(count.current + 1)}>
       count is <count.react />
     </button>
-    );
+  );
+
+  const dom = yield* node;
+
+  yield* sleep(2000);
+
+  dom.style.backgroundColor = 'red';
+
+  yield* sleep(2000);
+
+  dom.style.backgroundColor = 'blue';
 })