Merge pull request #18 from hamed-musallam/main

implement window observable and custom event

Author: vcnainala

package-lock.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "dependencies": {
     "@emotion/react": "^11.8.2",
-    "nmrium": "^0.25.0"
+    "nmrium": "^0.26.0"
   },
   "main": "lib-cjs/NMRiumWrapper.js",
   "module": "lib/NMRiumWrapper.js",

package.json

@@ -4,6 +4,7 @@ import NMRium, { NMRiumData } from 'nmrium';
 import Button from 'nmrium/lib/component/elements/Button';
 import { useEffect, useState } from 'react';
 import events from './events';
+import observableEvents from './observables';
 import useActions from './hooks/useActions';
 
 const styles = {
@@ -16,6 +17,7 @@ const styles = {
     height: 40px;
     width: 100%;
     padding: 5px;
+    display: flex;
   `,
   wrapper: css`
     flex: 1;
@@ -40,20 +42,41 @@ export default function NMRiumWrapper() {
   const actionHandler = useActions();
 
   useEffect(() => {
-    events.on('load', (_data) => {
+    const unsubscribe = observableEvents.subscribe('load', (_data) => {
+      // eslint-disable-next-line no-console
+      console.log('test load data with subscribe');
       setDate(_data);
     });
+
+    const clearListener = events.on('load', (_data) => {
+      // eslint-disable-next-line no-console
+      console.log('test load data with custom event');
+      setDate(_data);
+    });
+
+    return () => {
+      clearListener();
+      unsubscribe();
+    };
   });
 
   return (
     <div css={styles.container}>
       <div css={styles.header}>
         <Button.Done
+          style={{ margin: '0 10px' }}
           onClick={() => {
             events.trigger('load', testData);
           }}
         >
-          Test Load from external URL
+          Trigger load custom event
+        </Button.Done>
+        <Button.Done
+          onClick={() => {
+            observableEvents.trigger('load', testData);
+          }}
+        >
+          Test Load observable
         </Button.Done>
       </div>
 

src/NMRiumWrapper.tsx

@@ -1,14 +1,14 @@
 import { NMRiumData } from 'nmrium';
 
-type Actions = 'load' | 'test';
+type EventType = 'load' | 'test';
 
 interface TestData {
   testData: string;
 }
 
-type EventData<T extends Actions> = T extends 'load'
+type EventData<T extends EventType> = T extends 'load'
   ? NMRiumData
   : T extends 'test'
   ? TestData
   : never;
-export type { Actions, EventData };
+export type { EventType, EventData };

src/events/types.ts src/actions/types.tssrc/events/types.ts renamed to src/actions/types.ts

@@ -1,28 +1,49 @@
-import { Actions, EventData } from './types';
+import { EventType, EventData } from '../actions/types';
+
+const ALLOWED_ORIGINS: string[] =
+  process.env.NODE_ENV === 'development'
+    ? ['http://localhost:3000']
+    : ['https://nmrxiv.org'];
 
 const namespace = 'nmr-wrapper';
 
-function trigger<T extends Actions>(action: T, data: EventData<T>) {
-  const event = new CustomEvent(`${namespace}:${action}`, {
-    detail: data,
-  });
-  window.dispatchEvent(event);
+function parseOrigin(origin: string) {
+  const urlSegments = origin.split('://');
+  const hostSegments = urlSegments[1].split('.');
+
+  const url = `${urlSegments[0]}://${hostSegments
+    .slice(hostSegments.length > 1 ? 1 : 0)
+    .join('.')}`;
+
+  return url;
+}
+
+function trigger<T extends EventType>(type: T, data: EventData<T>) {
+  window.postMessage({ type: `${namespace}:${type}`, data });
 }
 
-function on<T extends Actions>(
-  action: T,
-  dataListener: (data: EventData<T>, event?: Event) => void,
+function on<T extends EventType>(
+  type: T,
+  dataListener: (data: EventData<T>) => void,
   options?: boolean | AddEventListenerOptions,
 ) {
-  function listener(object: Event) {
-    const { detail, ...event } = object as CustomEvent;
-    dataListener?.(detail, event);
+  function listener(event: MessageEvent) {
+    const {
+      origin,
+      data: { type: targetType, data },
+    } = event;
+
+    if (!ALLOWED_ORIGINS.includes(parseOrigin(origin))) {
+      throw new Error(`Invalid Origin ${origin}`);
+    }
+
+    if (`${namespace}:${type}` === targetType) {
+      dataListener?.(data);
+    }
   }
-  window.addEventListener(`${namespace}:${action}`, listener, options);
-}
+  window.addEventListener(`message`, listener, options);
 
-function clean(action: Actions, listener: (object: Event) => void) {
-  window.removeEventListener(`${namespace}:${action}`, listener);
+  return () => window.removeEventListener(`message`, listener);
 }
 
-export default { trigger, on, clean };
+export default { trigger, on };

src/events/event.ts

@@ -1,5 +1,3 @@
-import { Actions } from './types';
 import event from './event';
 
 export default event;
-export type { Actions };

src/events/index.ts

@@ -0,0 +1,44 @@
+import { Subject, Observer } from './subject';
+import { EventData, EventType } from '../actions/types';
+
+const NAMESPACE = '__nmrium_events__';
+
+function initSubject(event: EventType) {
+  if (!window?.[NAMESPACE]?.[event]) {
+    window[NAMESPACE] = {
+      ...window[NAMESPACE],
+      [event]: new Subject(),
+    };
+  }
+}
+
+function trigger<T extends EventType>(event: T, data: EventData<T>) {
+  initSubject(event);
+  window[NAMESPACE][event].notify(data);
+}
+
+function unsubscribe(event: EventType, observerID: string) {
+  return () => {
+    if (window?.[NAMESPACE]?.[event]) {
+      window[NAMESPACE][event].unsubscribe(observerID);
+    } else {
+      throw new Error('No event Registered');
+    }
+  };
+}
+
+function subscribe<T extends EventType>(
+  event: T,
+  onData: (data: EventData<T>) => void,
+) {
+  initSubject(event);
+  const id = Math.random().toString(36).slice(2, 9);
+
+  const observer: Observer = { id, update: onData } as Observer;
+
+  (window[NAMESPACE][event] as Subject).subscribe(observer);
+
+  return unsubscribe(event, id);
+}
+
+export default { trigger, subscribe };

src/observables/index.ts

@@ -0,0 +1,24 @@
+export interface Observer {
+  readonly id: string;
+  update: (data: unknown) => void;
+}
+
+export class Subject {
+  private observers: Observer[] = [];
+
+  subscribe(observer: Observer) {
+    this.observers.push(observer);
+  }
+
+  unsubscribe(observerID: string) {
+    this.observers = this.observers.filter((_observer) => {
+      return _observer.id !== observerID;
+    });
+  }
+
+  notify(data: unknown) {
+    this.observers.forEach((observer) => {
+      observer.update(data);
+    });
+  }
+}