RFC - Storage Layer for Plugins V2 💿 (#638)

.changeset/tall-ligers-admire.md

@@ -0,0 +1,5 @@
+---
+'@segment/analytics-next': minor
+---
+
+Creating universal storage layer and passing it to plugins

packages/browser/package.json

@@ -43,7 +43,7 @@
   "size-limit": [
     {
       "path": "dist/umd/index.js",
-      "limit": "27.3 KB"
+      "limit": "28.0 KB"
     }
   ],
   "dependencies": {

packages/browser/src/browser/__tests__/integration.test.ts

@@ -15,9 +15,12 @@ import * as SegmentPlugin from '../../plugins/segmentio'
 import jar from 'js-cookie'
 import { PriorityQueue } from '../../lib/priority-queue'
 import { getCDN, setGlobalCDNUrl } from '../../lib/parse-cdn'
+import { UniversalStorage } from '../../core/user'
 import { clearAjsBrowserStorage } from '../../test-helpers/browser-storage'
 import { ActionDestination } from '@/plugins/remote-loader'
 
+const storage = {} as UniversalStorage
+
 let fetchCalls: Array<any>[] = []
 
 jest.mock('unfetch', () => {
@@ -879,7 +882,8 @@ describe('retries', () => {
           throw new Error('aaay')
         },
       },
-      ajs
+      ajs,
+      storage
     )
 
     // Dispatching an event will push it into the priority queue.
@@ -907,7 +911,8 @@ describe('retries', () => {
         ready: () => Promise.resolve(true),
         track: (ctx) => ctx,
       },
-      ajs
+      ajs,
+      storage
     )
 
     // @ts-ignore ignore reassining function

packages/browser/src/core/analytics/index.ts

@@ -24,7 +24,15 @@ import {
 } from '../events'
 import { Plugin } from '../plugin'
 import { EventQueue } from '../queue/event-queue'
-import { CookieOptions, Group, ID, User, UserOptions } from '../user'
+import {
+  CookieOptions,
+  getAvailableStorageOptions,
+  Group,
+  ID,
+  UniversalStorage,
+  User,
+  UserOptions,
+} from '../user'
 import autoBind from '../../lib/bind-all'
 import { PersistedPriorityQueue } from '../../lib/priority-queue/persisted'
 import type { LegacyDestination } from '../../plugins/ajs-destination'
@@ -102,6 +110,9 @@ export class Analytics
   private _group: Group
   private eventFactory: EventFactory
   private _debug = false
+  private _universalStorage: UniversalStorage<{
+    [k: string]: unknown
+  }>
 
   initialized = false
   integrations: Integrations
@@ -122,6 +133,14 @@ export class Analytics
     this.settings.timeout = this.settings.timeout ?? 300
     this.queue =
       queue ?? createDefaultQueue(options?.retryQueue, disablePersistance)
+
+    this._universalStorage = new UniversalStorage(
+      disablePersistance !== false
+        ? ['localStorage', 'cookie', 'memory']
+        : ['memory'],
+      getAvailableStorageOptions(cookieOptions)
+    )
+
     this._user =
       user ??
       new User(
@@ -304,7 +323,7 @@ export class Analytics
     const ctx = Context.system()
 
     const registrations = plugins.map((xt) =>
-      this.queue.register(ctx, xt, this)
+      this.queue.register(ctx, xt, this, this._universalStorage)
     )
     await Promise.all(registrations)
 

packages/browser/src/core/plugin/index.ts

@@ -1,10 +1,12 @@
 import { Analytics } from '../analytics'
 import { Context } from '../context'
+import { UniversalStorage } from '../user'
 
 interface PluginConfig {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  options: any
-  priority: 'critical' | 'non-critical' // whether AJS should expect this plugin to be loaded before starting event delivery
+  options?: any
+  priority?: 'critical' | 'non-critical' // whether AJS should expect this plugin to be loaded before starting event delivery
+  storage?: UniversalStorage
 }
 
 // enrichment - modifies the event. Enrichment can happen in parallel, by reducing all changes in the final event. Failures in this stage could halt event delivery.

packages/browser/src/core/queue/__tests__/event-queue.test.ts

@@ -12,6 +12,9 @@ import { Plugin } from '../../plugin'
 import { EventQueue } from '../event-queue'
 import { pTimeout } from '../../callback'
 import { ActionDestination } from '../../../plugins/remote-loader'
+import { UniversalStorage } from '../../user'
+
+const storage = {} as UniversalStorage
 
 async function flushAll(eq: EventQueue): Promise<Context[]> {
   const flushSpy = jest.spyOn(eq, 'flush')
@@ -149,7 +152,8 @@ describe('Flushing', () => {
           return Promise.resolve(ctx)
         },
       },
-      ajs
+      ajs,
+      storage
     )
 
     eq.dispatch(fruitBasket)
@@ -219,7 +223,8 @@ describe('Flushing', () => {
           return Promise.resolve(ctx)
         },
       },
-      ajs
+      ajs,
+      storage
     )
 
     eq.dispatch(fruitBasket)
@@ -257,7 +262,8 @@ describe('Flushing', () => {
           return ctx
         },
       },
-      ajs
+      ajs,
+      storage
     )
 
     const dispatches = [
@@ -294,7 +300,8 @@ describe('Flushing', () => {
           return ctx
         },
       },
-      ajs
+      ajs,
+      storage
     )
 
     const context = await eq.dispatchSingle(fruitBasket)
@@ -321,7 +328,8 @@ describe('Flushing', () => {
           return Promise.resolve(ctx)
         },
       },
-      ajs
+      ajs,
+      storage
     )
 
     eq.dispatch(fruitBasket)
@@ -362,7 +370,8 @@ describe('Flushing', () => {
           return Promise.resolve(ctx)
         },
       },
-      ajs
+      ajs,
+      storage
     )
 
     const fruitBasketDelivery = eq.dispatch(fruitBasket)
@@ -429,9 +438,9 @@ describe('Flushing', () => {
 
       const ctx = new Context(evt)
 
-      await eq.register(Context.system(), amplitude, ajs)
-      await eq.register(Context.system(), mixPanel, ajs)
-      await eq.register(Context.system(), segmentio, ajs)
+      await eq.register(Context.system(), amplitude, ajs, storage)
+      await eq.register(Context.system(), mixPanel, ajs, storage)
+      await eq.register(Context.system(), segmentio, ajs, storage)
 
       eq.dispatch(ctx)
 
@@ -462,9 +471,9 @@ describe('Flushing', () => {
 
       const ctx = new Context(evt)
 
-      await eq.register(Context.system(), amplitude, ajs)
-      await eq.register(Context.system(), mixPanel, ajs)
-      await eq.register(Context.system(), segmentio, ajs)
+      await eq.register(Context.system(), amplitude, ajs, storage)
+      await eq.register(Context.system(), mixPanel, ajs, storage)
+      await eq.register(Context.system(), segmentio, ajs, storage)
 
       eq.dispatch(ctx)
 
@@ -496,9 +505,9 @@ describe('Flushing', () => {
 
       const ctx = new Context(evt)
 
-      await eq.register(Context.system(), amplitude, ajs)
-      await eq.register(Context.system(), mixPanel, ajs)
-      await eq.register(Context.system(), segmentio, ajs)
+      await eq.register(Context.system(), amplitude, ajs, storage)
+      await eq.register(Context.system(), mixPanel, ajs, storage)
+      await eq.register(Context.system(), segmentio, ajs, storage)
 
       eq.dispatch(ctx)
 
@@ -530,9 +539,9 @@ describe('Flushing', () => {
 
       const ctx = new Context(evt)
 
-      await eq.register(Context.system(), amplitude, ajs)
-      await eq.register(Context.system(), mixPanel, ajs)
-      await eq.register(Context.system(), segmentio, ajs)
+      await eq.register(Context.system(), amplitude, ajs, storage)
+      await eq.register(Context.system(), mixPanel, ajs, storage)
+      await eq.register(Context.system(), segmentio, ajs, storage)
 
       eq.dispatch(ctx)
 
@@ -563,9 +572,9 @@ describe('Flushing', () => {
 
       const ctx = new Context(evt)
 
-      await eq.register(Context.system(), amplitude, ajs)
-      await eq.register(Context.system(), mixPanel, ajs)
-      await eq.register(Context.system(), segmentio, ajs)
+      await eq.register(Context.system(), amplitude, ajs, storage)
+      await eq.register(Context.system(), mixPanel, ajs, storage)
+      await eq.register(Context.system(), segmentio, ajs, storage)
 
       eq.dispatch(ctx)
 
@@ -598,8 +607,8 @@ describe('Flushing', () => {
 
       const ctx = new Context(evt)
 
-      await eq.register(Context.system(), amplitude, ajs)
-      await eq.register(Context.system(), segmentio, ajs)
+      await eq.register(Context.system(), amplitude, ajs, storage)
+      await eq.register(Context.system(), segmentio, ajs, storage)
 
       eq.dispatch(ctx)
 
@@ -632,8 +641,8 @@ describe('Flushing', () => {
 
       const ctx = new Context(evt)
 
-      await eq.register(Context.system(), fullstory, ajs)
-      await eq.register(Context.system(), segmentio, ajs)
+      await eq.register(Context.system(), fullstory, ajs, storage)
+      await eq.register(Context.system(), segmentio, ajs, storage)
 
       eq.dispatch(ctx)
 
@@ -663,9 +672,9 @@ describe('Flushing', () => {
       }
 
       const ctx = new Context(evt)
-      await eq.register(Context.system(), amplitude, ajs)
-      await eq.register(Context.system(), mixPanel, ajs)
-      await eq.register(Context.system(), segmentio, ajs)
+      await eq.register(Context.system(), amplitude, ajs, storage)
+      await eq.register(Context.system(), mixPanel, ajs, storage)
+      await eq.register(Context.system(), segmentio, ajs, storage)
       await eq.dispatch(ctx)
 
       const skipAmplitudeAndSegment: MiddlewareFunction = ({
@@ -684,7 +693,8 @@ describe('Flushing', () => {
       await eq.register(
         Context.system(),
         sourceMiddlewarePlugin(skipAmplitudeAndSegment, {}),
-        ajs
+        ajs,
+        storage
       )
 
       await eq.dispatch(ctx)
@@ -702,7 +712,9 @@ describe('deregister', () => {
     const toBeRemoved = { ...testPlugin, name: 'remove-me' }
     const plugins = [testPlugin, toBeRemoved]
 
-    const promises = plugins.map((p) => eq.register(Context.system(), p, ajs))
+    const promises = plugins.map((p) =>
+      eq.register(Context.system(), p, ajs, storage)
+    )
     await Promise.all(promises)
 
     await eq.deregister(Context.system(), toBeRemoved, ajs)
@@ -715,7 +727,9 @@ describe('deregister', () => {
     const toBeRemoved = { ...testPlugin, name: 'remove-me', unload: jest.fn() }
     const plugins = [testPlugin, toBeRemoved]
 
-    const promises = plugins.map((p) => eq.register(Context.system(), p, ajs))
+    const promises = plugins.map((p) =>
+      eq.register(Context.system(), p, ajs, storage)
+    )
     await Promise.all(promises)
 
     await eq.deregister(Context.system(), toBeRemoved, ajs)
@@ -778,7 +792,8 @@ describe('dispatchSingle', () => {
           return Promise.resolve(ctx)
         },
       },
-      ajs
+      ajs,
+      storage
     )
 
     expect(eq.queue.length).toBe(0)