chore: setup monorepo using preconstruct

packages/core/src/container/NodeRenderer/index.tsx

@@ -0,0 +1,135 @@
+import React, { memo, useMemo, ComponentType, useEffect, useRef } from 'react';
+import shallow from 'zustand/shallow';
+
+import useVisibleNodes from '../../hooks/useVisibleNodes';
+import { useStore } from '../../store';
+import {
+  NodeDragHandler,
+  NodeMouseHandler,
+  NodeTypesWrapped,
+  Position,
+  ReactFlowState,
+  WrapNodeProps,
+} from '../../types';
+import { internalsSymbol } from '../../utils';
+
+interface NodeRendererProps {
+  nodeTypes: NodeTypesWrapped;
+  selectNodesOnDrag: boolean;
+  onNodeClick?: NodeMouseHandler;
+  onNodeDoubleClick?: NodeMouseHandler;
+  onNodeMouseEnter?: NodeMouseHandler;
+  onNodeMouseMove?: NodeMouseHandler;
+  onNodeMouseLeave?: NodeMouseHandler;
+  onNodeContextMenu?: NodeMouseHandler;
+  onNodeDragStart?: NodeDragHandler;
+  onNodeDrag?: NodeDragHandler;
+  onNodeDragStop?: NodeDragHandler;
+  onlyRenderVisibleElements: boolean;
+  noPanClassName: string;
+  noDragClassName: string;
+}
+
+const selector = (s: ReactFlowState) => ({
+  nodesDraggable: s.nodesDraggable,
+  nodesConnectable: s.nodesConnectable,
+  elementsSelectable: s.elementsSelectable,
+  updateNodeDimensions: s.updateNodeDimensions,
+});
+
+const NodeRenderer = (props: NodeRendererProps) => {
+  const { nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } = useStore(selector, shallow);
+  const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
+  const resizeObserverRef = useRef<ResizeObserver>();
+
+  const resizeObserver = useMemo(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return null;
+    }
+
+    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      const updates = entries.map((entry: ResizeObserverEntry) => ({
+        id: entry.target.getAttribute('data-id') as string,
+        nodeElement: entry.target as HTMLDivElement,
+        forceUpdate: true,
+      }));
+
+      updateNodeDimensions(updates);
+    });
+
+    resizeObserverRef.current = observer;
+
+    return observer;
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      resizeObserverRef?.current?.disconnect();
+    };
+  }, []);
+
+  return (
+    <div className="react-flow__nodes react-flow__container">
+      {nodes.map((node) => {
+        let nodeType = node.type || 'default';
+
+        if (!props.nodeTypes[nodeType]) {
+          // @ts-ignore
+          if (process.env.NODE_ENV === 'development') {
+            console.warn(
+              `[React Flow]: Node type "${nodeType}" not found. Using fallback type "default". Help: https://reactflow.dev/error#300`
+            );
+          }
+
+          nodeType = 'default';
+        }
+
+        const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
+        const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
+        const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
+        const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+
+        return (
+          <NodeComponent
+            key={node.id}
+            id={node.id}
+            className={node.className}
+            style={node.style}
+            type={nodeType}
+            data={node.data}
+            sourcePosition={node.sourcePosition || Position.Bottom}
+            targetPosition={node.targetPosition || Position.Top}
+            hidden={node.hidden}
+            xPos={node.positionAbsolute?.x ?? 0}
+            yPos={node.positionAbsolute?.y ?? 0}
+            selectNodesOnDrag={props.selectNodesOnDrag}
+            onClick={props.onNodeClick}
+            onMouseEnter={props.onNodeMouseEnter}
+            onMouseMove={props.onNodeMouseMove}
+            onMouseLeave={props.onNodeMouseLeave}
+            onContextMenu={props.onNodeContextMenu}
+            onDoubleClick={props.onNodeDoubleClick}
+            onDragStart={props.onNodeDragStart}
+            onDrag={props.onNodeDrag}
+            onDragStop={props.onNodeDragStop}
+            selected={!!node.selected}
+            isDraggable={isDraggable}
+            isSelectable={isSelectable}
+            isConnectable={isConnectable}
+            resizeObserver={resizeObserver}
+            dragHandle={node.dragHandle}
+            zIndex={node[internalsSymbol]?.z ?? 0}
+            isParent={!!node[internalsSymbol]?.isParent}
+            noDragClassName={props.noDragClassName}
+            noPanClassName={props.noPanClassName}
+            initialized={!!node.width && !!node.height}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+NodeRenderer.displayName = 'NodeRenderer';
+
+export default memo(NodeRenderer);

packages/core/src/container/NodeRenderer/utils.ts

@@ -0,0 +1,33 @@
+import { ComponentType } from 'react';
+
+import DefaultNode from '../../components/Nodes/DefaultNode';
+import InputNode from '../../components/Nodes/InputNode';
+import OutputNode from '../../components/Nodes/OutputNode';
+import GroupNode from '../../components/Nodes/GroupNode';
+import wrapNode from '../../components/Nodes/wrapNode';
+import { NodeTypes, NodeProps, NodeTypesWrapped } from '../../types';
+
+export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
+
+export function createNodeTypes(nodeTypes: NodeTypes): NodeTypesWrapped {
+  const standardTypes: NodeTypesWrapped = {
+    input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeProps>),
+    default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeProps>),
+    output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeProps>),
+    group: wrapNode((nodeTypes.group || GroupNode) as ComponentType<NodeProps>),
+  };
+
+  const wrappedTypes = {} as NodeTypesWrapped;
+  const specialTypes: NodeTypesWrapped = Object.keys(nodeTypes)
+    .filter((k) => !['input', 'default', 'output', 'group'].includes(k))
+    .reduce((res, key) => {
+      res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>);
+
+      return res;
+    }, wrappedTypes);
+
+  return {
+    ...standardTypes,
+    ...specialTypes,
+  };
+}