fix(connection): fix connection issue (#25)

example/src/index.ts

@@ -3,3 +3,5 @@ import { OriginStorageClient } from 'origin-storage';
 (window as any).originStorageClient = new OriginStorageClient({
   uri: 'http://localhost:9000/storage.html',
 });
+(window as any).originStorageClient.getItem('test').then(console.log);
+

example/src/storage.ts

@@ -2,5 +2,5 @@ import { OriginStorage } from 'origin-storage';
 
 (window as any).originStorage = new OriginStorage({
   broadcastChanges: true,
-  targetOrigin: 'http://localhost:9000',
+  targetOrigin: 'http://127.0.0.1:8080/',
 });

rollup.config.js

@@ -36,6 +36,7 @@ export default isProduction
         commonjs(),
         replace({
           __DEV__: 'false',
+          preventAssignment: true,
         }),
         terser(),
       ],
@@ -56,6 +57,7 @@ export default isProduction
         commonjs(),
         replace({
           __DEV__: 'true',
+          preventAssignment: true,
         }),
       ],
       external: ['data-transport', 'broadcast-channel'],

src/interface.ts

@@ -56,7 +56,8 @@ export interface IChangeData {
 }
 
 export type StorageToClient = {
-  connect(): Promise<LocalForageOptions>;
+  connect(): Promise<void>;
+  getConfig(): Promise<LocalForageOptions>;
   change(options: { key: string | null }): Promise<void>;
 };
 

src/originStorage.ts

@@ -48,8 +48,9 @@ export class OriginStorage
     if (!this._read && !this._write) {
       throw new Error(NoAccessError);
     }
-    const config = await this.emit('connect');
+    const config = await this.emit('getConfig');
     this._localforage = localforage.createInstance(config);
+    await this.emit('connect');
   }
 
   @listen

src/originStorageClient.ts

@@ -12,7 +12,7 @@ export class OriginStorageClient
   extends IFrameTransport.Main<{ emit: ClientToStorage }>
   implements StorageToClient, IOriginStorageClient
 {
-  protected _connect?: () => void;
+  protected _onConnectCallbacks: Set<() => void> = new Set();
   protected _isConnect: boolean;
   protected _storageOptions?: LocalForageOptions;
   protected _change?: (data: IChangeData) => void;
@@ -39,8 +39,18 @@ export class OriginStorageClient
 
   private _connectResolve?: () => void;
 
+  private _connect() {
+    this._onConnectCallbacks.forEach((callback) => callback());
+  }
+
   onConnect(callback: () => void) {
-    this._connect = callback;
+    this._onConnectCallbacks.add(callback);
+    if (this._isConnect) {
+      callback();
+    }
+    return () => {
+      this._onConnectCallbacks.delete(callback);
+    };
   }
 
   async onChange(callback: (data: IChangeData) => void) {
@@ -66,17 +76,21 @@ export class OriginStorageClient
     });
   }
 
+  @listen
+  async getConfig() {
+    return this._storageOptions!;
+  }
+
   @listen
   async connect() {
     if (typeof this._connect !== 'function') {
       if (__DEV__) {
         throw new Error(`'onConnect' has not been called.`);
       }
     }
-    this._connect?.();
     this._isConnect = true;
     this._connectResolve?.();
-    return this._storageOptions!;
+    this._connect?.();
   }
 
   async getItem(key: string) {

test/index.test.ts

@@ -54,8 +54,12 @@ const getInstances = async ({
   });
 
   const fn = jest.fn();
+  const fn1 = jest.fn();
 
   originStorageClient.onConnect(fn);
+  const unsubscribe = originStorageClient.onConnect(fn1);
+
+  unsubscribe();
 
   const originStorage = new OriginStorage({
     read,
@@ -68,9 +72,9 @@ const getInstances = async ({
       mockInternalSend(JSON.parse(JSON.stringify(message)));
     },
   });
-
-  expect(fn.mock.calls.length).toBe(1);
   await new Promise((r) => setTimeout(r));
+  expect(fn.mock.calls.length).toBe(1);
+  expect(fn1.mock.calls.length).toBe(0);
   // mock
   (originStorage as any)._localforage = new MemoryStorage();
   return {
@@ -177,7 +181,9 @@ test('watch data change', async () => {
       });
     },
   };
-  (instances1.originStorage as any)._localforage = (instances0.originStorage as any)._localforage;
+  (instances1.originStorage as any)._localforage = (
+    instances0.originStorage as any
+  )._localforage;
 
   const value = { a: 1 };
   let watch = new Promise((r) => {