refactor(core): desktop project struct (#8334)

packages/common/infra/src/framework/react/index.tsx

@@ -4,9 +4,6 @@ import type { FrameworkProvider, Scope, Service } from '../core';
 import { ComponentNotFoundError, Framework } from '../core';
 import { parseIdentifier } from '../core/identifier';
 import type { GeneralIdentifier, IdentifierType, Type } from '../core/types';
-import { MountPoint } from './scope-root-components';
-
-export { useMount } from './scope-root-components';
 
 export const FrameworkStackContext = React.createContext<FrameworkProvider[]>([
   Framework.EMPTY.provider(),
@@ -129,7 +126,7 @@ export const FrameworkScope = ({
 
   return (
     <FrameworkStackContext.Provider value={nextStack}>
-      <MountPoint>{children}</MountPoint>
+      {children}
     </FrameworkStackContext.Provider>
   );
 };

packages/common/infra/src/framework/react/scope-root-components.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-
-type NodesMap = Map<
-  number,
-  {
-    node: React.ReactNode;
-    debugKey?: string;
-  }
->;
-
-const ScopeRootComponentsContext = React.createContext<{
-  nodes: NodesMap;
-  setNodes: React.Dispatch<React.SetStateAction<NodesMap>>;
-}>({ nodes: new Map(), setNodes: () => {} });
-
-let _id = 0;
-/**
- * A hook to add nodes to the nearest scope's root
- */
-export const useMount = (debugKey?: string) => {
-  const [id] = React.useState(_id++);
-  const { setNodes } = React.useContext(ScopeRootComponentsContext);
-
-  const unmount = React.useCallback(() => {
-    setNodes(prev => {
-      if (!prev.has(id)) {
-        return prev;
-      }
-      const next = new Map(prev);
-      next.delete(id);
-      return next;
-    });
-  }, [id, setNodes]);
-
-  const mount = React.useCallback(
-    (node: React.ReactNode) => {
-      setNodes(prev => new Map(prev).set(id, { node, debugKey }));
-      return unmount;
-    },
-    [setNodes, id, debugKey, unmount]
-  );
-
-  return React.useMemo(() => {
-    return {
-      /**
-       * Add a node to the nearest scope root
-       * ```tsx
-       * const { mount } = useMount();
-       * useEffect(() => {
-       *  const unmount = mount(<div>Node</div>);
-       *  return unmount;
-       * }, [])
-       * ```
-       * @return A function to unmount the added node.
-       */
-      mount,
-    };
-  }, [mount]);
-};
-
-export const MountPoint = ({ children }: React.PropsWithChildren) => {
-  const [nodes, setNodes] = React.useState<NodesMap>(new Map());
-
-  return (
-    <ScopeRootComponentsContext.Provider value={{ nodes, setNodes }}>
-      {children}
-      {Array.from(nodes.entries()).map(([id, { node, debugKey }]) => (
-        <div data-testid={debugKey} key={id} style={{ display: 'contents' }}>
-          {node}
-        </div>
-      ))}
-    </ScopeRootComponentsContext.Provider>
-  );
-};