Adding support for events

.gitignore

@@ -7,3 +7,5 @@ node_modules
 /coverage
 *.iml
 .idea/
+.history
+.parcel-cache

example/example.ts

@@ -13,13 +13,18 @@ import {groqStore, Subscription} from '../src/browser'
   populate()
 
   let subscription: Subscription | null | undefined
-  const dataset = groqStore({
+  const store = groqStore({
     projectId: 'groqstore',
     dataset: 'fixture',
     listen: true,
     overlayDrafts: true,
   })
 
+  store.on('datasetLoaded', ({dataset, documents}) => {
+    // eslint-disable-next-line no-console
+    console.info(`Dataset "${dataset}" loaded with ${documents.length} documents`)
+  })
+
   function attach() {
     clearBtnEl.addEventListener('click', clear, false)
     executeBtnEl.addEventListener('click', execute, false)
@@ -39,7 +44,7 @@ import {groqStore, Subscription} from '../src/browser'
     resultEl.value = '… querying …'
     localStorage.setItem('groqStore', queryEl.value)
     try {
-      onResult(await dataset.query(queryEl.value))
+      onResult(await store.query(queryEl.value))
     } catch (err: any) {
       onError(err.message || 'Unknown error')
     }
@@ -56,7 +61,7 @@ import {groqStore, Subscription} from '../src/browser'
       resultEl.value = '… querying …'
       executeBtnEl.disabled = true
       subscribeBtnEl.textContent = 'Unsubscribe'
-      subscription = dataset.subscribe(queryEl.value, {}, onResult)
+      subscription = store.subscribe(queryEl.value, {}, onResult)
     }
   }
 

example/index.html

@@ -25,6 +25,6 @@ <h2>Result</h2>
       </section>
     </div>
 
-    <script src="example.ts"></script>
+    <script src="example.ts" type="module"></script>
   </body>
 </html>

example/package.json

@@ -4,11 +4,11 @@
   "private": true,
   "description": "",
   "license": "MIT",
-  "main": "src/example.ts",
   "scripts": {
     "start": "parcel index.html"
   },
   "devDependencies": {
     "parcel-bundler": "^1.12.5"
-  }
+  },
+  "default": "example.ts"
 }

package.json

@@ -58,6 +58,7 @@
     "build": "pkg build --strict && pkg --strict",
     "lint": "eslint .",
     "prepublishOnly": "npm run build",
+    "prettify": "prettier --write .",
     "start": "cd example && npm start",
     "test": "tsdx test"
   },

src/events.ts

@@ -0,0 +1,28 @@
+import {EventEmitter} from 'events'
+import {SanityDocument} from '@sanity/types'
+
+/** @public */
+export type Events = {
+  /**
+   * Emitted after the dataset was loaded.
+   */
+  datasetLoaded: {
+    dataset: string
+    documents: SanityDocument[]
+  }
+
+  /**
+   * Emitted each time the dataset changes. This happens when the dataset
+   * is initialised, and after mutations are applied through listeners.
+   */
+  datasetChanged: {
+    dataset: string
+    documents: SanityDocument[]
+  }
+}
+
+/** @public */
+export interface TypedEventEmitter extends EventEmitter {
+  on<K extends keyof Events>(s: K, listener: (v: Events[K]) => void): this
+  emit<K extends keyof Events>(eventName: K, params: Events[K]): boolean
+}

src/groqStore.ts

@@ -5,8 +5,11 @@ import {SanityDocument} from '@sanity/types'
 import {parse, evaluate} from 'groq-js'
 import {Config, EnvImplementations, GroqSubscription, GroqStore, Subscription} from './types'
 import {getSyncingDataset} from './syncingDataset'
+import {EventEmitter} from 'events'
+import {TypedEventEmitter} from './events'
 
 export function groqStore(config: Config, envImplementations: EnvImplementations): GroqStore {
+  const eventEmitter = new EventEmitter() as TypedEventEmitter
   let documents: SanityDocument[] = []
   const executeThrottled = throttle(config.subscriptionThrottleMs || 50, executeAllSubscriptions)
   const activeSubscriptions: GroqSubscription[] = []
@@ -20,9 +23,20 @@ export function groqStore(config: Config, envImplementations: EnvImplementations
         (docs) => {
           documents = docs
           executeThrottled()
+          eventEmitter.emit('datasetChanged', {
+            dataset: config.dataset,
+            documents: docs,
+          })
         },
         envImplementations
       )
+
+      dataset.loaded.then(() => {
+        eventEmitter.emit('datasetLoaded', {
+          dataset: config.dataset,
+          documents,
+        })
+      })
     }
 
     await dataset.loaded
@@ -97,8 +111,16 @@ export function groqStore(config: Config, envImplementations: EnvImplementations
 
   function close() {
     executeThrottled.cancel()
+    eventEmitter.removeAllListeners()
     return dataset ? dataset.unsubscribe() : Promise.resolve()
   }
 
-  return {query, getDocument, getDocuments, subscribe, close}
+  return {
+    query,
+    getDocument,
+    getDocuments,
+    subscribe,
+    close,
+    on: (...args) => eventEmitter.on(...args),
+  }
 }

src/index.ts

@@ -19,3 +19,4 @@ export function groqStore(config: Config): GroqStore {
 
 export {default as groq} from 'groq'
 export type {Subscription, GroqStore, Config, EnvImplementations} from './types'
+export type {Events, TypedEventEmitter} from './events'

src/types.ts

@@ -1,5 +1,6 @@
 import {SanityDocument} from '@sanity/types'
 import EventSourcePolyfill from 'eventsource'
+import {TypedEventEmitter} from './events'
 
 /** @public */
 export interface Subscription {
@@ -89,6 +90,7 @@ export interface GroqStore {
     callback: (err: Error | undefined, result?: R) => void
   ) => Subscription
   close: () => Promise<void>
+  on: TypedEventEmitter['on']
 }
 
 export interface ApiError {

test/events.test.ts

@@ -0,0 +1,76 @@
+import EventSource from 'eventsource'
+import {groqStore as groqStoreApi} from '../src/groqStore'
+import {EnvImplementations, Config} from '../src/types'
+import * as baseConfig from './config'
+import * as listener from '../src/listen'
+import {MutationEvent} from '@sanity/client'
+
+describe('events', () => {
+  it('datasetLoaded fires when dataset is loaded', async () => {
+    const config: Config = {
+      ...baseConfig,
+      token: 'my-token',
+    }
+
+    const getDocuments = jest.fn().mockResolvedValue([{_id: 'foo', value: 'bar'}])
+    const datasetLoadedCb = jest.fn()
+
+    const store = groqStoreApi(config, {
+      EventSource: EventSource as any as EnvImplementations['EventSource'],
+      getDocuments,
+    })
+
+    store.on('datasetLoaded', datasetLoadedCb)
+
+    await store.query('*')
+
+    expect(datasetLoadedCb).toBeCalledTimes(1)
+    expect(datasetLoadedCb).toBeCalledWith({
+      dataset: 'fixture',
+      documents: [{_id: 'foo', value: 'bar'}],
+    })
+  })
+
+  it('datasetChanged fires each time the dataset changes', async () => {
+    const config: Config = {
+      ...baseConfig,
+      listen: true,
+      token: 'my-token',
+    }
+
+    jest.useFakeTimers()
+    jest.spyOn(listener, 'listen').mockImplementation((_esImpl, _config, handlers) => {
+      handlers.open()
+
+      // Call `next()` a little bit later to imitate a mutation received event
+      // eslint-disable-next-line max-nested-callbacks
+      setTimeout(() => handlers.next({} as any as MutationEvent), 50)
+
+      return {
+        unsubscribe: () => Promise.resolve(),
+      }
+    })
+
+    const getDocuments = jest.fn().mockResolvedValue([{_id: 'foo', value: 'bar'}])
+    const datasetChangedCb = jest.fn()
+
+    const store = groqStoreApi(config, {
+      EventSource: EventSource as any as EnvImplementations['EventSource'],
+      getDocuments,
+    })
+
+    store.on('datasetChanged', datasetChangedCb)
+
+    await store.query('*')
+
+    expect(datasetChangedCb).toBeCalledTimes(1)
+    expect(datasetChangedCb).toBeCalledWith({
+      dataset: 'fixture',
+      documents: [{_id: 'foo', value: 'bar'}],
+    })
+
+    jest.advanceTimersByTime(100)
+
+    expect(datasetChangedCb).toBeCalledTimes(2)
+  })
+})