feat: add domain model for react nodes

examples/simple-react/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
+import App from './App';
 import SystemView from './SystemView';
 import reportWebVitals from './reportWebVitals';
 

library/src/components/nodes/Application.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ApplicationNodeData, InternalProps } from '../../types';
+
+type ApplicationProps = ApplicationNodeData & InternalProps;
+
+/**
+ * The Application component is a single instance of grouped outgoing and incoming channels.
+ *
+ * What you define as an instance can be application, grouped or single server less function, etc.
+ */
+export const Application: React.FunctionComponent<ApplicationProps> = props => {
+  const nodeData = {
+    ...props,
+  };
+  delete nodeData.children;
+  delete nodeData.internal;
+  const applicationNodeData: ApplicationNodeData = nodeData;
+
+  props.internal?.addApplicationCallback(applicationNodeData);
+
+  const childrenWithProps = React.Children.map(props.children, child => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, {
+        forApplication: applicationNodeData.id,
+        internal: props.internal,
+      });
+    }
+    return child;
+  });
+
+  return <div key={applicationNodeData.id}>{childrenWithProps}</div>;
+};

library/src/components/nodes/factories/AsyncAPIApplication.tsx → library/src/components/nodes/AsyncAPIApplication.tsx

@@ -1,22 +1,19 @@
 import React from 'react';
 import {
   ApplicationLicenseData,
-  ApplicationNodeData,
   ApplicationServerData,
+  InternalProps,
   MessageData,
-} from '../../../types';
+} from '../../types';
 import { Application } from './Application';
 import { Outgoing } from './Outgoing';
 import { AsyncAPIDocument } from '@asyncapi/parser';
 import { Incoming } from './Incoming';
-type InternalApplicationProps = {
-  internal?: {
-    addElementCallback?: any;
-  };
+type AsyncapiApplicationProps = {
   document: AsyncAPIDocument;
 };
 
-type ApplicationProps = ApplicationNodeData & InternalApplicationProps;
+type ApplicationProps = AsyncapiApplicationProps & InternalProps;
 
 /**
  * The Application component is a single instance of grouped outgoing and incoming channels.
@@ -88,7 +85,7 @@ export const AsyncAPIApplication: React.FunctionComponent<ApplicationProps> = pr
   });
   return (
     <Application
-      internal={{ addElementCallback: props.internal?.addElementCallback }}
+      internal={props.internal}
       defaultContentType={props.document.defaultContentType() || 'Undefined'}
       description={props.document.info().description() || 'No description'}
       id={props.document.info().title()}

library/src/components/nodes/Incoming.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IncomingNodeData, InternalProps } from '../../types';
+
+type IncomingProps = IncomingNodeData & InternalProps;
+export const Incoming: React.FunctionComponent<IncomingProps> = props => {
+  const nodeData = { ...props };
+  delete nodeData.children;
+  delete nodeData.internal;
+  const incomingNodeData: IncomingNodeData = nodeData;
+
+  props.internal?.addIncomingCallback(incomingNodeData);
+  return null;
+};

library/src/components/nodes/Outgoing.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { InternalProps, OutgoingNodeData } from '../../types';
+
+type OutgoingProps = OutgoingNodeData & InternalProps;
+export const Outgoing: React.FunctionComponent<OutgoingProps> = props => {
+  const nodeData = { ...props };
+  delete nodeData.children;
+  delete nodeData.internal;
+  const outgoingNodeData: OutgoingNodeData = nodeData;
+  props.internal?.addOutgoingCallback(outgoingNodeData);
+  return null;
+};

library/src/components/nodes/index.tsx

@@ -1,11 +1,4 @@
-import OutgoingNode from './OutgoingNode';
-import IncomingNode from './IncomingNode';
-import ApplicationNode from './ApplicationNode';
-
-const nodeTypes = {
-  outgoingNode: OutgoingNode,
-  incomingNode: IncomingNode,
-  applicationNode: ApplicationNode,
-};
-
-export default nodeTypes;
+export * from './AsyncAPIApplication';
+export * from './Application';
+export * from './Incoming';
+export * from './Outgoing';

library/src/components/react-flow-renderer-nodes/index.tsx

@@ -0,0 +1,11 @@
+import OutgoingNode from './OutgoingNode';
+import IncomingNode from './IncomingNode';
+import ApplicationNode from './ApplicationNode';
+
+const nodeTypes = {
+  outgoingNode: OutgoingNode,
+  incomingNode: IncomingNode,
+  applicationNode: ApplicationNode,
+};
+
+export default nodeTypes;

library/src/index.ts

@@ -1,7 +1,7 @@
-export * from './visualiser/ApplicationView';
-export * from './visualiser/SystemView';
-export * from './components/nodes/factories/Application';
-export * from './components/nodes/factories/Incoming';
-export * from './components/nodes/factories/Outgoing';
-export * from './components/nodes/factories/AsyncAPIApplication';
+export * from './visualiser/react-flow-renderer/ApplicationView';
+export * from './visualiser/react-flow-renderer/SystemView';
+export * from './components/nodes/Application';
+export * from './components/nodes/Incoming';
+export * from './components/nodes/Outgoing';
+export * from './components/nodes/AsyncAPIApplication';
 export * from './components/layouts';

library/src/types.ts

@@ -1,9 +1,13 @@
 import { FlowElement } from 'react-flow-renderer';
-export const FLOW_TYPES = {
-  APPLICATION: 'application',
-  INCOMING: 'incomingNode',
-  OUTGOING: 'outgoingNode',
+
+export type InternalProps = {
+  internal?: {
+    addApplicationCallback: (node: ApplicationNodeData) => void;
+    addIncomingCallback: (node: IncomingNodeData) => void;
+    addOutgoingCallback: (node: OutgoingNodeData) => void;
+  };
 };
+
 export interface ApplicationLicenseData {
   name: string;
   url: string;
@@ -37,6 +41,7 @@ export interface IncomingNodeData {
   description?: string;
   channel: string;
   messages?: MessageData[];
+  forApplication?: string;
 }
 export interface IncomingNodeProps {
   data: IncomingNodeData;
@@ -46,6 +51,7 @@ export interface OutgoingNodeData {
   description?: string;
   channel: string;
   messages: MessageData[];
+  forApplication?: string;
 }
 export interface OutgoingNodeProps {
   data: OutgoingNodeData;