Merge pull request #2 from GeekyAnts/feat/renderer

Feat/renderer

Author: sanketsahu

example/Plugins/ClickMePlugin.tsx

@@ -1,18 +1,24 @@
+// @ts-ignore
+import React from 'react';
 import { IPlugin } from '../../.';
 
 class ClickMePlugin implements IPlugin {
-  private pluginStore;
+  public pluginStore;
 
   init(pluginStore) {
     console.log('Inside init');
     this.pluginStore = pluginStore;
   }
   activate() {
-    console.log('Inside activate', this.pluginStore);
-
     this.pluginStore.addFunction('sendAlert', () => {
       alert('Testing');
     });
+
+    this.pluginStore.executeFunction(
+      'RendererPlugin.add',
+      'top',
+      <h1>asjdf</h1>
+    );
   }
   deactivate() {
     //

example/components/Test.tsx

@@ -5,6 +5,9 @@ const Test = (props: any) => {
   const pluginStore: any = usePluginStore();
   console.log(pluginStore);
   pluginStore.executeFunction('test', 1, 2);
+  let Renderer = pluginStore.executeFunction(
+    'RendererPlugin.getRendererComponent'
+  );
   return (
     <>
       <h1>Working</h1>{' '}
@@ -15,6 +18,7 @@ const Test = (props: any) => {
       >
         Send Alert
       </button>
+      <Renderer placement={'top'} />
     </>
   );
 };

example/index.tsx

@@ -1,12 +1,13 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { createPluginStore, PluginProvider } from '../.';
+import { createPluginStore, PluginProvider, RendererPlugin } from '../.';
 import ClickMePlugin from './Plugins/ClickMePlugin';
 import Test from './components/Test';
 
 const App = () => {
   const pluginStore = createPluginStore();
+  pluginStore.install(new RendererPlugin());
   pluginStore.install(new ClickMePlugin());
 
   pluginStore.addFunction('test', (a, b) => {

src/PluginStore.tsx

@@ -19,8 +19,8 @@ export class PluginStore {
     this.functionArray.set(key, fn);
   }
 
-  executeFunction(key: string, ...args: any) {
+  executeFunction(key: string, ...args: any): any {
     let fn = this.functionArray.get(key);
-    fn(...args);
+    return fn(...args);
   }
 }

src/index.tsx

@@ -2,3 +2,4 @@ export { IPlugin } from './interfaces/IPlugin';
 export { createPluginStore } from './hooks/createPluginStore';
 export { PluginProvider } from './PluginProvider';
 export { usePluginStore } from './hooks/usePluginStore';
+export { RendererPlugin } from './plugins/RendererPlugin';

src/interfaces/IPlugin.tsx

@@ -1,6 +1,7 @@
 import { PluginStore } from '../PluginStore';
 
 export interface IPlugin {
+  pluginStore: PluginStore;
   init(pluginStore: PluginStore): void;
   activate(): void;
   deactivate(): void;

src/plugins/RendererPlugin/components/Renderer.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { usePluginStore } from '../../../hooks/usePluginStore';
+
+export const Renderer: React.SFC<{
+  placement: string;
+}> = ({ placement }) => {
+  const pluginStore = usePluginStore();
+
+  let components = pluginStore.executeFunction(
+    'RendererPlugin.getComponentsInPosition',
+    placement
+  );
+
+  return (
+    <React.Fragment>
+      {components.map((component: any) => (
+        <>{component}</>
+      ))}
+    </React.Fragment>
+  );
+};

src/plugins/RendererPlugin/index.tsx

@@ -0,0 +1,52 @@
+import { IPlugin } from '../../interfaces/IPlugin';
+import { PluginStore } from '../../PluginStore';
+import { Renderer } from './components/Renderer';
+
+export class RendererPlugin implements IPlugin {
+  public pluginStore: PluginStore = new PluginStore();
+  private componentMap: Map<string, Array<any>> = new Map<string, Array<any>>();
+
+  init(pluginStore: PluginStore) {
+    this.pluginStore = pluginStore;
+  }
+
+  addToComponentMap(position: string, component: React.Component) {
+    let array = this.componentMap.get(position);
+    if (!array) {
+      array = [component];
+    }
+    this.componentMap.set(position, array);
+  }
+
+  getRendererComponent() {
+    return Renderer;
+  }
+
+  getComponentsInPosition(position: string) {
+    let componentArray = this.componentMap.get(position);
+    if (!componentArray) return [];
+
+    return componentArray;
+  }
+
+  activate() {
+    this.pluginStore.addFunction(
+      'RendererPlugin.add',
+      this.addToComponentMap.bind(this)
+    );
+
+    this.pluginStore.addFunction(
+      'RendererPlugin.getComponentsInPosition',
+      this.getComponentsInPosition.bind(this)
+    );
+
+    this.pluginStore.addFunction(
+      'RendererPlugin.getRendererComponent',
+      this.getRendererComponent.bind(this)
+    );
+  }
+
+  deactivate() {
+    //
+  }
+}