[gem] Add react shim

Closed #147

packages/gem/src/dist.ts

@@ -11,9 +11,10 @@ export * from './elements/reflect';
 export * from './elements/base/modal-factory';
 export * from './elements/base/dialog';
 
-export * from './helper/theme';
 export * from './helper/i18n';
-export * from './helper/request';
+export * from './helper/logger';
 export * from './helper/mediaquery';
+export * from './helper/request';
+export * from './helper/theme';
 
 export * from '.';

packages/gem/src/helper/react-shim.ts

@@ -0,0 +1,57 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { ReactNode, useEffect, useRef, useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Root, createRoot } from 'react-dom/client';
+
+import { Store, connect } from '../lib/store';
+
+/**
+ * `<gem-route>.routes.getContent`
+ */
+export function renderReactNode(ele: any, node: ReactNode) {
+  ele.react?.unmount();
+  ele.react = createRoot(ele);
+  // async
+  ele.react.render(node);
+
+  // override
+  const routeEle = ele instanceof HTMLElement ? ele : ele.host;
+  const originUnmounted = routeEle.unmounted;
+  if (!originUnmounted?.react) {
+    routeEle.unmounted = () => {
+      originUnmounted?.apply(routeEle);
+      ele.react.unmount();
+    };
+    routeEle.unmounted.react = true;
+  }
+}
+
+/**
+ * Same as `@connectStore`
+ */
+export function connectStore<T extends object>(store: Store<T>) {
+  const [_, update] = useState({});
+  useEffect(() => connect(store, () => update({})), []);
+}
+
+/**
+ * Warning: https://github.com/facebook/react/issues/25675
+ */
+export function useReactNode(node: ReactNode) {
+  const ref = useRef<{ root: Root; container: HTMLElement }>();
+  // Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.
+  useEffect(() => () => ref.current?.root.unmount(), []);
+  if (ref.current) {
+    ref.current.root.render(node);
+    return ref.current.container;
+  }
+  const container = document.createElement('div');
+  container.style.display = 'contents';
+  const root = createRoot(container);
+  ref.current = { root, container };
+  // Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate.
+  root.render(node);
+  return container;
+}

packages/gem/src/index.ts

@@ -1,7 +1,6 @@
-export * from './lib/store';
-export * from './lib/history';
-export * from './lib/element';
 export * from './lib/decorators';
+export * from './lib/element';
+export * from './lib/history';
+export * from './lib/store';
 export * from './lib/utils';
-
 export * from './lib/version';