feat(react): add basic ssr support

2023-10-04 16:03:23 +02:00
parent 53c04e2546
commit 86c041c2a0
21 changed files with 2915 additions and 606 deletions
@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
@@ -0,0 +1,47 @@
+# Astro Starter Kit: Minimal
+
+```sh
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [react()],
+});
@@ -0,0 +1,21 @@
+{
+  "name": "react-ssr",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/react": "^3.0.2",
+    "@types/react": "^18.2.24",
+    "@types/react-dom": "^18.2.8",
+    "@xyflow/react": "workspace:^",
+    "astro": "^3.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
@@ -0,0 +1,32 @@
+import { memo, type FC, type CSSProperties } from 'react';
+import { Handle, Position, type NodeProps } from '@xyflow/react';
+
+const sourceHandleStyleA: CSSProperties = { left: 50 };
+const sourceHandleStyleB: CSSProperties = {
+  right: 50,
+  left: 'auto',
+};
+
+const CustomNode: FC<NodeProps> = ({ data, xPos, yPos }) => {
+  return (
+    <>
+      <Handle type="target" position={Position.Top} />
+      <div>
+        <div>
+          Label: <strong>{data.label}</strong>
+        </div>
+        <div>
+          Position:{' '}
+          <strong>
+            {xPos.toFixed(2)},{yPos.toFixed(2)}
+          </strong>
+        </div>
+      </div>
+
+      <Handle type="source" position={Position.Bottom} id="a" style={sourceHandleStyleA} />
+      <Handle type="source" position={Position.Bottom} id="b" style={sourceHandleStyleB} />
+    </>
+  );
+};
+
+export default memo(CustomNode);
@@ -0,0 +1,71 @@
+import { useCallback } from 'react';
+import {
+  ReactFlow,
+  addEdge,
+  useEdgesState,
+  useNodesState,
+  type Connection,
+  type Edge,
+  type Node,
+  type OnNodesChange,
+  ReactFlowProvider,
+} from '@xyflow/react';
+
+import CustomNode from './CustomNode';
+
+import '@xyflow/react/dist/style.css';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3' },
+    position: { x: 400, y: 100 },
+  },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 400, y: 200 },
+    type: 'custom',
+  },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3', animated: true },
+];
+
+const nodeTypes = {
+  custom: CustomNode,
+};
+
+function Flow() {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  return (
+    // <ReactFlowProvider nodes={nodes} edges={edges}>
+    <ReactFlow
+      nodes={nodes}
+      onNodesChange={onNodesChange}
+      edges={edges}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      nodeTypes={nodeTypes}
+    />
+    // </ReactFlowProvider>
+  );
+}
+
+export default Flow;
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
@@ -0,0 +1,26 @@
+---
+import Flow from '../components/Flow' 
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+
+		<style>
+			html, body {
+				margin:0;
+				font-family: sans-serif;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>Astro</h1>
+		<div style="height: 400px">
+			<Flow  />
+		</div>
+	</body>
+</html>
@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}
@@ -66,7 +66,7 @@ const DnDFlow = () => {

  return (
    <div className={styles.dndflow}>
-      <ReactFlowProvider>
+      <ReactFlowProvider nodes={initialNodes} edges={[]}>
        <div className={styles.wrapper}>
          <ReactFlow
            nodes={nodes}
@@ -77,7 +77,6 @@ const DnDFlow = () => {
            onInit={onInit}
            onDrop={onDrop}
            onDragOver={onDragOver}
-            nodeOrigin={nodeOrigin}
          >
            <Controls />
          </ReactFlow>
@@ -181,7 +181,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
          zIndex,
          transform: `translate(${xPosOrigin}px,${yPosOrigin}px)`,
          pointerEvents: hasPointerEvents ? 'all' : 'none',
-          visibility: initialized ? 'visible' : 'hidden',
+          visibility: initialized ? 'visible' : 'visible',
          ...style,
        }}
        data-id={id}
@@ -1,20 +1,20 @@
-import { useRef, type FC, type PropsWithChildren } from 'react';
+import { useRef, type ReactNode } from 'react';
 import { type StoreApi } from 'zustand';
 import { UseBoundStoreWithEqualityFn } from 'zustand/traditional';

 import { Provider } from '../../contexts/RFStoreContext';
 import { createRFStore } from '../../store';
-import type { ReactFlowState } from '../../types';
+import type { ReactFlowState, Node, Edge } from '../../types';

-const ReactFlowProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
+function ReactFlowProvider({ children, nodes, edges }: { children: ReactNode; nodes?: Node[]; edges?: Edge[] }) {
  const storeRef = useRef<UseBoundStoreWithEqualityFn<StoreApi<ReactFlowState>> | null>(null);

  if (!storeRef.current) {
-    storeRef.current = createRFStore();
+    storeRef.current = createRFStore({ nodes, edges });
  }

  return <Provider value={storeRef.current}>{children}</Provider>;
-};
+}

 ReactFlowProvider.displayName = 'ReactFlowProvider';

@@ -62,23 +62,13 @@ const EdgeRenderer = ({
  onEdgeUpdateEnd,
  children,
 }: EdgeRendererProps) => {
-  const { width, height, edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
+  const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
  const edgeTree = useVisibleEdges(onlyRenderVisibleElements, elevateEdgesOnSelect);

-  if (!width) {
-    return null;
-  }
-
  return (
    <>
      {edgeTree.map(({ level, edges, isMaxLevel }) => (
-        <svg
-          key={level}
-          style={{ zIndex: level }}
-          width={width}
-          height={height}
-          className="react-flow__edges react-flow__container"
-        >
+        <svg key={level} style={{ zIndex: level }} className="react-flow__edges react-flow__container">
          {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />}
          <g>
            {edges.map((edge) => {
@@ -1,9 +1,10 @@
-import { useContext, type FC, type PropsWithChildren } from 'react';
+import { useContext, type ReactNode } from 'react';

 import StoreContext from '../../contexts/RFStoreContext';
 import ReactFlowProvider from '../../components/ReactFlowProvider';
+import type { Node, Edge } from '../../types';

-const Wrapper: FC<PropsWithChildren<unknown>> = ({ children }) => {
+function Wrapper({ children, nodes, edges }: { children: ReactNode; nodes?: Node[]; edges?: Edge[] }) {
  const isWrapped = useContext(StoreContext);

  if (isWrapped) {
@@ -12,8 +13,12 @@ const Wrapper: FC<PropsWithChildren<unknown>> = ({ children }) => {
    return <>{children}</>;
  }

-  return <ReactFlowProvider>{children}</ReactFlowProvider>;
-};
+  return (
+    <ReactFlowProvider nodes={nodes} edges={edges}>
+      {children}
+    </ReactFlowProvider>
+  );
+}

 Wrapper.displayName = 'ReactFlowWrapper';

@@ -181,7 +181,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
        data-testid="rf__wrapper"
        id={id}
      >
-        <Wrapper>
+        <Wrapper nodes={nodes} edges={edges}>
          <GraphView
            onInit={onInit}
            onNodeClick={onNodeClick}
@@ -11,7 +11,7 @@ import {

 import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
 import { updateNodesAndEdgesSelections } from './utils';
-import initialState from './initialState';
+import getInitialState from './initialState';
 import type {
  ReactFlowState,
  Node,
@@ -24,10 +24,10 @@ import type {
  FitViewOptions,
 } from '../types';

-const createRFStore = () =>
+const createRFStore = ({ nodes, edges }: { nodes?: Node[]; edges?: Edge[] }) =>
  createWithEqualityFn<ReactFlowState>(
    (set, get) => ({
-      ...initialState,
+      ...getInitialState({ nodes, edges }),
      setNodes: (nodes: Node[]) => {
        const { nodes: storeNodes, nodeOrigin, elevateNodesOnSelect } = get();
        const nextNodes = updateNodes(nodes, storeNodes, { nodeOrigin, elevateNodesOnSelect });
@@ -263,9 +263,9 @@ const createRFStore = () =>
      },
      cancelConnection: () =>
        set({
-          connectionStatus: initialState.connectionStatus,
-          connectionStartHandle: initialState.connectionStartHandle,
-          connectionEndHandle: initialState.connectionEndHandle,
+          connectionStatus: null,
+          connectionStartHandle: null,
+          connectionEndHandle: null,
        }),
      updateConnection: (params) => {
        const { connectionStatus, connectionStartHandle, connectionEndHandle, connectionPosition } = get();
@@ -279,7 +279,7 @@ const createRFStore = () =>

        set(currentConnection);
      },
-      reset: () => set({ ...initialState }),
+      reset: () => set({ ...getInitialState({ nodes: [] }) }),
    }),
    Object.is
  );
@@ -1,65 +1,69 @@
-import { devWarn, infiniteExtent, ConnectionMode } from '@xyflow/system';
+import { devWarn, infiniteExtent, ConnectionMode, updateNodes } from '@xyflow/system';

-import type { ReactFlowStore } from '../types';
+import type { Edge, Node, ReactFlowStore } from '../types';

-const initialState: ReactFlowStore = {
-  rfId: '1',
-  width: 0,
-  height: 0,
-  transform: [0, 0, 1],
-  nodes: [],
-  edges: [],
-  onNodesChange: null,
-  onEdgesChange: null,
-  hasDefaultNodes: false,
-  hasDefaultEdges: false,
-  panZoom: null,
-  minZoom: 0.5,
-  maxZoom: 2,
-  translateExtent: infiniteExtent,
-  nodeExtent: infiniteExtent,
-  nodesSelectionActive: false,
-  userSelectionActive: false,
-  userSelectionRect: null,
-  connectionPosition: { x: 0, y: 0 },
-  connectionStatus: null,
-  connectionMode: ConnectionMode.Strict,
-  domNode: null,
-  paneDragging: false,
-  noPanClassName: 'nopan',
-  nodeOrigin: [0, 0],
-  nodeDragThreshold: 0,
+const getInitialState = ({ nodes = [], edges = [] }: { nodes?: Node[]; edges?: Edge[] }): ReactFlowStore => {
+  const nextNodes = updateNodes(nodes, [], { nodeOrigin: [0, 0], elevateNodesOnSelect: false });

-  snapGrid: [15, 15],
-  snapToGrid: false,
+  return {
+    rfId: '1',
+    width: 0,
+    height: 0,
+    transform: [0, 0, 1],
+    nodes: nextNodes,
+    edges: edges,
+    onNodesChange: null,
+    onEdgesChange: null,
+    hasDefaultNodes: false,
+    hasDefaultEdges: false,
+    panZoom: null,
+    minZoom: 0.5,
+    maxZoom: 2,
+    translateExtent: infiniteExtent,
+    nodeExtent: infiniteExtent,
+    nodesSelectionActive: false,
+    userSelectionActive: false,
+    userSelectionRect: null,
+    connectionPosition: { x: 0, y: 0 },
+    connectionStatus: null,
+    connectionMode: ConnectionMode.Strict,
+    domNode: null,
+    paneDragging: false,
+    noPanClassName: 'nopan',
+    nodeOrigin: [0, 0],
+    nodeDragThreshold: 0,

-  nodesDraggable: true,
-  nodesConnectable: true,
-  nodesFocusable: true,
-  edgesFocusable: true,
-  edgesUpdatable: true,
-  elementsSelectable: true,
-  elevateNodesOnSelect: true,
-  fitViewOnInit: false,
-  fitViewDone: false,
-  fitViewOnInitOptions: undefined,
-  selectNodesOnDrag: true,
+    snapGrid: [15, 15],
+    snapToGrid: false,

-  multiSelectionActive: false,
+    nodesDraggable: true,
+    nodesConnectable: true,
+    nodesFocusable: true,
+    edgesFocusable: true,
+    edgesUpdatable: true,
+    elementsSelectable: true,
+    elevateNodesOnSelect: true,
+    fitViewOnInit: false,
+    fitViewDone: false,
+    fitViewOnInitOptions: undefined,
+    selectNodesOnDrag: true,

-  connectionStartHandle: null,
-  connectionEndHandle: null,
-  connectionClickStartHandle: null,
-  connectOnClick: true,
+    multiSelectionActive: false,

-  ariaLiveMessage: '',
-  autoPanOnConnect: true,
-  autoPanOnNodeDrag: true,
-  connectionRadius: 20,
-  onError: devWarn,
-  isValidConnection: undefined,
+    connectionStartHandle: null,
+    connectionEndHandle: null,
+    connectionClickStartHandle: null,
+    connectOnClick: true,

-  lib: 'react',
+    ariaLiveMessage: '',
+    autoPanOnConnect: true,
+    autoPanOnNodeDrag: true,
+    connectionRadius: 20,
+    onError: devWarn,
+    isValidConnection: undefined,
+
+    lib: 'react',
+  };
 };

-export default initialState;
+export default getInitialState;