inject component with registered graphs

wix-incubator · Oct 29, 2024 · 99f16b7 · 99f16b7
1 parent 7ef16fa
commit 99f16b7
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/packages/react-obsidian/src/injectors/components/ComponentInjector.tsx b/packages/react-obsidian/src/injectors/components/ComponentInjector.tsx
@@ -11,24 +11,24 @@ import { useInjectionToken } from './useInjectionToken';
 export default class ComponentInjector {
   inject<P>(
     Target: React.FunctionComponent<P>,
-    Graph: Constructable<ObjectGraph>,
+    keyOrGraph: string | Constructable<ObjectGraph>,
   ): React.FunctionComponent<Partial<P>> {
-    const Wrapped = this.wrapComponent(Target, Graph);
+    const Wrapped = this.wrapComponent(Target, keyOrGraph);
     hoistNonReactStatics(Wrapped, Target);
     return Wrapped;
   }
 
   private wrapComponent<P>(
     InjectionCandidate: React.FunctionComponent<P>,
-    Graph: Constructable<ObjectGraph>,
+    keyOrGraph: string | Constructable<ObjectGraph>,
   ): React.FunctionComponent<Partial<P>> {
     const isMemoized = isMemoizedComponent(InjectionCandidate);
     const Target = isMemoized ? InjectionCandidate.type : InjectionCandidate;
     const compare = isMemoized ? InjectionCandidate.compare : undefined;
 
     return genericMemo((passedProps: P) => {
-      const injectionToken = useInjectionToken(Graph);
-      const graph = useGraph<P>(Graph, Target, passedProps, injectionToken);
+      const injectionToken = useInjectionToken(keyOrGraph);
+      const graph = useGraph<P>(keyOrGraph, Target, passedProps, injectionToken);
       const proxiedProps = new PropsInjector(graph).inject(passedProps);
 
       return (

diff --git a/packages/react-obsidian/src/injectors/components/InjectComponent.test.tsx b/packages/react-obsidian/src/injectors/components/InjectComponent.test.tsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import type { Constructable, ObjectGraph } from 'src';
+import { Obsidian, type Constructable, type ObjectGraph } from '../..';
 import MainGraph, { Dependencies } from '../../../test/fixtures/MainGraph';
 import { injectComponent } from './InjectComponent';
 
@@ -35,7 +35,6 @@ describe('injectComponent', () => {
     expect(container.textContent).toBe('error: own prop not provided - Fear kills progress');
   });
 
-  // it throws an error if the Graph is undefined
   it('Throws an error if the Graph is undefined', () => {
     const Graph = undefined as unknown as Constructable<ObjectGraph>;
     expect(() => injectComponent(component, Graph)).toThrowError(
@@ -45,4 +44,11 @@ describe('injectComponent', () => {
       + ` Check the implementation of component.`,
     );
   });
+
+  it('Injects component by registered graph key', () => {
+    Obsidian.registerGraph('MainGraph', () => MainGraph);
+    const InjectedComponent = injectComponent(component, 'MainGraph');
+    const { container } = render(<InjectedComponent />);
+    expect(container.textContent).toBe('error: own prop not provided - Fear kills progress');
+  });
 });
diff --git a/packages/react-obsidian/src/injectors/components/InjectComponent.ts b/packages/react-obsidian/src/injectors/components/InjectComponent.ts
@@ -1,5 +1,6 @@
 import { ObjectGraph } from '../../graph/ObjectGraph';
 import { Constructable } from '../../types';
+import { isString } from '../../utils/isString';
 import ComponentInjector from './ComponentInjector';
 
 interface Discriminator {
@@ -13,18 +14,18 @@ export const injectComponent = <OwnProps = Discriminator, InjectedProps = Discri
   (OwnProps extends infer P ? OwnProps extends Discriminator ? P : OwnProps : never) &
   (InjectedProps extends Discriminator ? any : InjectedProps)
   >,
-  Graph: Constructable<ObjectGraph>,
+  keyOrGraph: string | Constructable<ObjectGraph>,
 ) => {
-  assertGraph(Graph, Target);
+  assertGraph(keyOrGraph, Target);
 
-  return componentInjector.inject(Target, Graph) as React.FunctionComponent<
+  return componentInjector.inject(Target, keyOrGraph) as React.FunctionComponent<
   InjectedProps extends Discriminator ?
     OwnProps extends Discriminator ? Partial<OwnProps> : OwnProps :
     OwnProps extends InjectedProps ? Partial<OwnProps> : OwnProps & Partial<InjectedProps>
   >;
 };
-function assertGraph(Graph: Constructable<ObjectGraph<unknown>>, Target: any) {
-  if (!Graph) {
+function assertGraph(keyOrGraph: string | Constructable<ObjectGraph>, Target: any) {
+  if (!isString(keyOrGraph) && !keyOrGraph) {
     throw new Error(
       `injectComponent was called with an undefined Graph.`
       + `This is probably not an issue with Obsidian.`

diff --git a/packages/react-obsidian/src/injectors/components/useInjectionToken.ts b/packages/react-obsidian/src/injectors/components/useInjectionToken.ts
@@ -2,9 +2,12 @@ import { useContext, useState } from 'react';
 import { GraphContext } from './graphContext';
 import type { Constructable, ObjectGraph } from '../..';
 import { uniqueId } from '../../utils/uniqueId';
+import { isString } from '../../utils/isString';
 
-export const useInjectionToken = (Graph: Constructable<ObjectGraph>) => {
+export const useInjectionToken = (keyOrGraph: string | Constructable<ObjectGraph>) => {
   const ctx = useContext(GraphContext);
-  const [injectionToken] = useState(() => ctx?.injectionToken ?? uniqueId(Graph.name));
+  const [injectionToken] = useState(() => {
+    return ctx?.injectionToken ?? uniqueId(isString(keyOrGraph)? keyOrGraph : keyOrGraph.name);
+  });
   return injectionToken;
 };