feat(graphing): Add appearance for sync/async

packages/injectable/src/dependency-injection-container/__snapshots__/createContainer.dependency-graphing.test.js.snap

@@ -4,17 +4,20 @@ exports[`createContainer.dependency-graph given dependency graphing, dependencie
 "@startuml
 hide members
 hide circle
-class \\"some-child-injectable\\" as someChildInjectable<Transient> $some-child-injectable $some-setuppable $setup $some-parent-injectable
-class \\"some-injection-token\\" as someInjectionToken<Token> $some-injection-token $some-setuppable $some-child-injectable $setup $some-parent-injectable
-class \\"some-token-injectable\\" as someTokenInjectable<Singleton> $some-token-injectable $some-setuppable $some-child-injectable $some-injection-token $setup $some-parent-injectable
-class \\"some-setuppable\\" as someSetuppable<Singleton> $some-setuppable $setup
-class \\"some-parent-injectable\\" as someParentInjectable<Singleton> $some-parent-injectable
-someSetuppable ..up* someChildInjectable : Setup
-someChildInjectable ..up* someInjectionToken : Setup
-someInjectionToken ..up* someTokenInjectable : Setup
-someSetuppable ..up* someSetuppable : Setup
-someParentInjectable --up* someChildInjectable
-someChildInjectable --up* someInjectionToken
-someInjectionToken --up* someTokenInjectable
+class \\"some-token-injectable\\" as someTokenInjectable<Singleton> $some-token-injectable $some-sync-setuppable $some-sync-child-injectable $some-injection-token $setup $some-parent-injectable
+class \\"some-injection-token\\" as someInjectionToken<Transient> $some-injection-token $some-sync-setuppable $some-sync-child-injectable $setup $some-parent-injectable
+class \\"some-sync-child-injectable\\" as someSyncChildInjectable<Transient> $some-sync-child-injectable $some-sync-setuppable $setup $some-parent-injectable
+class \\"some-sync-setuppable\\" as someSyncSetuppable<Singleton> $some-sync-setuppable $setup
+class \\"some-async-child-injectable\\" as someAsyncChildInjectable<Singleton\\\\nAsync> $some-async-child-injectable $some-async-setuppable $setup $some-parent-injectable
+class \\"some-parent-injectable\\" as someParentInjectable<Singleton\\\\nAsync> $some-parent-injectable
+someInjectionToken --[#black,dashed,thickness=1]up* someTokenInjectable : Setup
+someSyncChildInjectable --[#black,dashed,thickness=1]up* someInjectionToken : Setup
+someSyncSetuppable --[#black,dashed,thickness=1]up* someSyncChildInjectable : Setup
+someSyncSetuppable --[#black,dashed,thickness=1]up* someSyncSetuppable : Setup
+someAsyncSetuppable --[#black,dashed,thickness=4]up* someAsyncChildInjectable : Setup\\\\nAsync
+someInjectionToken --[#black,plain,thickness=1]up* someTokenInjectable
+someSyncChildInjectable --[#black,plain,thickness=1]up* someInjectionToken
+someParentInjectable --[#black,plain,thickness=1]up* someSyncChildInjectable
+someParentInjectable --[#black,plain,thickness=4]up* someAsyncChildInjectable : Async
 @enduml"
 `;

packages/injectable/src/dependency-injection-container/createContainer.dependency-graphing.test.js

@@ -1,9 +1,11 @@
 import getDi from '../test-utils/getDiForUnitTesting';
 import getInjectable from '../getInjectable/getInjectable';
+
 import {
   plantUmlDependencyGraphInjectable,
   registerDependencyGraphing,
 } from './extensions/dependency-graphing/dependency-graphing';
+
 import getInjectionToken from '../getInjectionToken/getInjectionToken';
 import lifecycleEnum from './lifecycleEnum';
 
@@ -12,47 +14,66 @@ describe('createContainer.dependency-graph', () => {
     const parentInjectable = getInjectable({
       id: 'some-parent-injectable',
 
-      instantiate: di => {
-        // Inject twice for coverage
-        di.inject(childInjectable);
-        di.inject(childInjectable);
+      instantiate: async di => {
+        // Inject same injectable twice for coverage
+        di.inject(syncChildInjectable);
+        di.inject(syncChildInjectable);
+        await di.inject(asyncChildInjectable);
       },
     });
 
-    const childInjectable = getInjectable({
-      id: 'some-child-injectable',
+    const syncChildInjectable = getInjectable({
+      id: 'some-sync-child-injectable',
       instantiate: di => di.injectMany(injectionToken),
       lifecycle: lifecycleEnum.transient,
     });
 
+    const asyncChildInjectable = getInjectable({
+      id: 'some-async-child-injectable',
+      instantiate: async () => 'irrelevant',
+    });
+
     const injectionToken = getInjectionToken({ id: 'some-injection-token' });
+
     const tokenInjectable = getInjectable({
       id: 'some-token-injectable',
       instantiate: () => 'irrelevant',
       injectionToken,
     });
 
-    const setuppableInjectable = getInjectable({
-      id: 'some-setuppable',
+    const syncSetuppable = getInjectable({
+      id: 'some-sync-setuppable',
       instantiate: () => 'irrelevant',
+
       setup: di => {
-        di.inject(childInjectable);
-        di.inject(setuppableInjectable);
+        di.inject(syncChildInjectable);
+        di.inject(syncSetuppable);
+      },
+    });
+
+    const asyncSetuppable = getInjectable({
+      id: 'some-async-setuppable',
+      instantiate: () => 'irrelevant',
+
+      setup: async di => {
+        await di.inject(asyncChildInjectable);
       },
     });
 
     const di = getDi(
       parentInjectable,
-      childInjectable,
+      syncChildInjectable,
+      asyncChildInjectable,
       tokenInjectable,
-      setuppableInjectable,
+      syncSetuppable,
+      asyncSetuppable,
     );
 
     registerDependencyGraphing(di);
 
     await di.runSetups();
 
-    di.inject(parentInjectable);
+    await di.inject(parentInjectable);
 
     const graph = di.inject(plantUmlDependencyGraphInjectable);
 

packages/injectable/src/dependency-injection-container/extensions/dependency-graphing/dependency-graphing.js

@@ -7,6 +7,7 @@ import last from 'lodash/fp/last';
 import get from 'lodash/fp/get';
 import some from 'lodash/fp/some';
 import { pipeline } from '@ogre-tools/fp';
+import { isPromise } from '@ogre-tools/fp';
 
 export const registerDependencyGraphing = di => {
   di.register(plantUmlDependencyGraphInjectable);
@@ -51,6 +52,8 @@ const plantUmlExtractorInjectable = getInjectable({
 
   instantiate: di => ({
     decorate: toBeDecorated => (alias, instantiationParameter, context) => {
+      const instance = toBeDecorated(alias, instantiationParameter, context);
+
       const graphState = di.inject(dependencyGraphStateInjectable);
       const injectableName = alias.id;
       const injectableId = camelCase(injectableName);
@@ -60,17 +63,26 @@ const plantUmlExtractorInjectable = getInjectable({
           id: injectableId,
           name: injectableName,
           tags: new Set([injectableName]),
+          infos: new Set(),
         });
       }
 
       const node = graphState.nodes.get(injectableId);
 
       if (alias.aliasType === injectionTokenSymbol) {
         node.isInjectionToken = true;
+        node.lifecycleName = lifecycleEnum.transient.name;
       } else {
         node.lifecycleName = alias.lifecycle.name;
       }
 
+      const instanceIsAsync = isPromise(instance);
+
+      if (instanceIsAsync) {
+        node.isAsync = true;
+        node.infos.add('Async');
+      }
+
       const parentContext = last(context);
 
       if (parentContext) {
@@ -91,19 +103,25 @@ const plantUmlExtractorInjectable = getInjectable({
           graphState.links.set(linkId, {
             parentId,
             dependencyId,
+            infos: new Set(),
           });
         }
 
         const link = graphState.links.get(linkId);
 
         if (linkIsRelatedToSetup) {
           link.isRelatedToSetup = true;
-
+          link.infos.add('Setup');
           node.tags.add('setup');
         }
+
+        if (instanceIsAsync) {
+          link.isAsync = true;
+          link.infos.add('Async');
+        }
       }
 
-      return toBeDecorated(alias, instantiationParameter, context);
+      return instance;
     },
   }),
 
@@ -118,18 +136,31 @@ const toPlantUmlNode = ({
   lifecycleName,
   tags,
   isInjectionToken,
+  infos,
 }) => {
-  const mainPuml = isInjectionToken
-    ? `class "${name}" as ${id}<Token>`
-    : `class "${name}" as ${id}<${lifecycleName}>`;
+  const infosString = [lifecycleName, ...infos.values()].join('\\n');
+
+  const mainPuml = `class "${name}" as ${id}<${infosString}>`;
 
   const tagPuml = [...tags].map(tag => ` $${tag}`).join('');
 
   return mainPuml + tagPuml;
 };
 
-const toPlantUmlLink = ({ parentId, dependencyId, isRelatedToSetup }) => {
-  return isRelatedToSetup
-    ? `${parentId} ..up* ${dependencyId} : Setup`
-    : `${parentId} --up* ${dependencyId}`;
+const toPlantUmlLink = ({
+  parentId,
+  dependencyId,
+  isRelatedToSetup,
+  isAsync,
+  infos,
+}) => {
+  const lineColor = 'black';
+  const lineType = isRelatedToSetup ? 'dashed' : 'plain';
+  const lineThickness = isAsync ? 4 : 1;
+
+  const lineStyle = `[#${lineColor},${lineType},thickness=${lineThickness}]`;
+
+  const infosString = infos.size ? ` : ${[...infos.values()].join('\\n')}` : '';
+
+  return `${parentId} --${lineStyle}up* ${dependencyId}${infosString}`;
 };