@openpanel/react-native 1.3.0 → 1.4.0

package/README.md

@@ -114,4 +114,36 @@ op.track('my_event', { foo: 'bar' });
       }
     ```
 
-For more information on how to use the SDK, check out the [Javascript SDK](https://openpanel.dev/docs/sdks/javascript#usage).
+For more information on how to use the SDK, check out the [Javascript SDK](https://openpanel.dev/docs/sdks/javascript#usage).
+
+## Offline support
+
+The SDK can buffer events when the device is offline and flush them once connectivity is restored. Events are stamped with a `__timestamp` at the time they are fired so they are recorded with the correct time even if they are delivered later.
+
+Two optional peer dependencies enable this feature:
+
+```npm
+npm install @react-native-async-storage/async-storage @react-native-community/netinfo
+```
+
+Pass them to the constructor:
+
+```typescript
+import { OpenPanel } from '@openpanel/react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import NetInfo from '@react-native-community/netinfo';
+
+const op = new OpenPanel({
+  clientId: '{YOUR_CLIENT_ID}',
+  clientSecret: '{YOUR_CLIENT_SECRET}',
+  // Persist the event queue across app restarts
+  storage: AsyncStorage,
+  // Automatically flush the queue when the device comes back online
+  networkInfo: NetInfo,
+});
+```
+
+Both options are independent — you can use either one or both:
+
+- **`storage`** — persists the queue to disk so events survive app restarts while offline.
+- **`networkInfo`** — flushes the queue automatically when connectivity is restored. Without this, the queue is flushed the next time the app becomes active.

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var _=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var k=(t,r)=>{for(var e in r)c(t,e,{get:r[e],enumerable:!0})},o=(t,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of u(r))!v.call(t,p)&&p!==e&&c(t,p,{get:()=>r[p],enumerable:!(s=h(r,p))||s.enumerable});return t},a=(t,r,e)=>(o(t,r,"default"),e&&o(e,r,"default")),f=(t,r,e)=>(e=t!=null?_(A(t)):{},o(r||!t||!t.__esModule?c(e,"default",{value:t,enumerable:!0}):e,t)),g=t=>o(c({},"__esModule",{value:!0}),t);var i={};k(i,{OpenPanel:()=>d});module.exports=g(i);var P=require("@openpanel/sdk"),n=f(require("expo-application"),1),m=f(require("expo-constants"),1),l=require("react-native");a(i,require("@openpanel/sdk"),module.exports);var d=class extends P.OpenPanel{constructor(e){super({...e,sdk:"react-native",sdkVersion:"1.3.0"});this.options=e;this.lastPath="";this.api.addHeader("User-Agent",m.default.getWebViewUserAgentAsync()),l.AppState.addEventListener("change",s=>{s==="active"&&this.setDefaultProperties()}),this.setDefaultProperties()}async setDefaultProperties(){this.setGlobalProperties({__version:n.nativeApplicationVersion,__buildNumber:n.nativeBuildVersion,__referrer:l.Platform.OS==="android"?await n.getInstallReferrerAsync():void 0})}track(e,s){return super.track(e,{...s,__path:this.lastPath})}screenView(e,s){this.lastPath=e,super.track("screen_view",{...s,__path:e})}};0&&(module.exports={OpenPanel,...require("@openpanel/sdk")});
+"use strict";var g=Object.create;var u=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(t,r)=>{for(var e in r)u(t,e,{get:r[e],enumerable:!0})},l=(t,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of v(r))!m.call(t,a)&&a!==e&&u(t,a,{get:()=>r[a],enumerable:!(i=P(r,a))||i.enumerable});return t},n=(t,r,e)=>(l(t,r,"default"),e&&l(e,r,"default")),h=(t,r,e)=>(e=t!=null?g(O(t)):{},l(r||!t||!t.__esModule?u(e,"default",{value:t,enumerable:!0}):e,t)),_=t=>l(u({},"__esModule",{value:!0}),t);var s={};w(s,{OpenPanel:()=>c});module.exports=_(s);var f=require("@openpanel/sdk"),o=h(require("expo-application"),1),k=h(require("expo-constants"),1),p=require("react-native");n(s,require("@openpanel/sdk"),module.exports);var d="@openpanel/offline_queue",c=class extends f.OpenPanel{constructor(e){super({...e,sdk:"react-native",sdkVersion:"1.4.0"});this.options=e;this.lastPath="";this.isOnline=!0;this.api.addHeader("User-Agent",k.default.getWebViewUserAgentAsync()),this.storage=e.storage,e.networkInfo&&(e.networkInfo.fetch().then(({isConnected:i})=>{this.isOnline=i??!0}),e.networkInfo.addEventListener(({isConnected:i})=>{let a=!this.isOnline;this.isOnline=i??!0,a&&this.isOnline&&this.flush()})),p.AppState.addEventListener("change",i=>{i==="active"&&(this.setDefaultProperties(),this.flush())}),this.setDefaultProperties(),this.loadPersistedQueue()}async setDefaultProperties(){this.setGlobalProperties({__version:o.nativeApplicationVersion,__buildNumber:o.nativeBuildVersion,__referrer:p.Platform.OS==="android"?await o.getInstallReferrerAsync():void 0})}async loadPersistedQueue(){if(this.storage)try{let e=await this.storage.getItem(d);if(e){let i=JSON.parse(e);Array.isArray(i)&&i.length>0&&(this.queue=[...i,...this.queue],this.flush())}}catch{this.log("Failed to load persisted queue")}}persistQueue(){this.storage&&this.storage.setItem(d,JSON.stringify(this.queue)).catch(()=>{this.log("Failed to persist queue")})}addQueue(e){super.addQueue(e),this.persistQueue()}async send(e){return this.options.filter&&!this.options.filter(e)?null:this.isOnline?await super.send(e):(this.addQueue(e),null)}flush(){this.isOnline&&(super.flush(),this.persistQueue())}track(e,i){return super.track(e,{...i,__path:this.lastPath})}screenView(e,i){this.lastPath=e,super.track("screen_view",{...i,__path:e})}};0&&(module.exports={OpenPanel,...require("@openpanel/sdk")});

package/dist/index.d.cts

@@ -1,11 +1,52 @@
-import { OpenPanel as OpenPanel$1, OpenPanelOptions, TrackProperties } from '@openpanel/sdk';
+import { OpenPanelOptions, OpenPanel as OpenPanel$1, TrackHandlerPayload, TrackProperties } from '@openpanel/sdk';
 export * from '@openpanel/sdk';
 
+interface StorageLike {
+    getItem(key: string): Promise<string | null>;
+    setItem(key: string, value: string): Promise<void>;
+}
+interface NetworkStateLike {
+    isConnected: boolean | null;
+}
+interface NetworkInfoLike {
+    addEventListener(callback: (state: NetworkStateLike) => void): () => void;
+    fetch(): Promise<NetworkStateLike>;
+}
+interface ReactNativeOpenPanelOptions extends OpenPanelOptions {
+    /**
+     * Provide an AsyncStorage-compatible adapter to persist the event queue
+     * across app restarts (enables full offline support).
+     *
+     * @example
+     * import AsyncStorage from '@react-native-async-storage/async-storage';
+     * new OpenPanel({ clientId: '...', storage: AsyncStorage });
+     */
+    storage?: StorageLike;
+    /**
+     * Provide a NetInfo-compatible adapter to detect connectivity changes and
+     * automatically flush the queue when the device comes back online.
+     *
+     * @example
+     * import NetInfo from '@react-native-community/netinfo';
+     * new OpenPanel({ clientId: '...', networkInfo: NetInfo });
+     */
+    networkInfo?: NetworkInfoLike;
+}
 declare class OpenPanel extends OpenPanel$1 {
-    options: OpenPanelOptions;
+    options: ReactNativeOpenPanelOptions;
     private lastPath;
-    constructor(options: OpenPanelOptions);
+    private readonly storage?;
+    private isOnline;
+    constructor(options: ReactNativeOpenPanelOptions);
     private setDefaultProperties;
+    private loadPersistedQueue;
+    private persistQueue;
+    addQueue(payload: TrackHandlerPayload): void;
+    send(payload: TrackHandlerPayload): Promise<void | {
+        deviceId: string;
+        sessionId: string;
+    } | null>;
+    flush(): void;
     track(name: string, properties?: TrackProperties): Promise<void | {
         deviceId: string;
         sessionId: string;
@@ -13,4 +54,4 @@ declare class OpenPanel extends OpenPanel$1 {
     screenView(route: string, properties?: TrackProperties): void;
 }
 
-export { OpenPanel };
+export { OpenPanel, type ReactNativeOpenPanelOptions };

package/dist/index.d.ts

@@ -1,11 +1,52 @@
-import { OpenPanel as OpenPanel$1, OpenPanelOptions, TrackProperties } from '@openpanel/sdk';
+import { OpenPanelOptions, OpenPanel as OpenPanel$1, TrackHandlerPayload, TrackProperties } from '@openpanel/sdk';
 export * from '@openpanel/sdk';
 
+interface StorageLike {
+    getItem(key: string): Promise<string | null>;
+    setItem(key: string, value: string): Promise<void>;
+}
+interface NetworkStateLike {
+    isConnected: boolean | null;
+}
+interface NetworkInfoLike {
+    addEventListener(callback: (state: NetworkStateLike) => void): () => void;
+    fetch(): Promise<NetworkStateLike>;
+}
+interface ReactNativeOpenPanelOptions extends OpenPanelOptions {
+    /**
+     * Provide an AsyncStorage-compatible adapter to persist the event queue
+     * across app restarts (enables full offline support).
+     *
+     * @example
+     * import AsyncStorage from '@react-native-async-storage/async-storage';
+     * new OpenPanel({ clientId: '...', storage: AsyncStorage });
+     */
+    storage?: StorageLike;
+    /**
+     * Provide a NetInfo-compatible adapter to detect connectivity changes and
+     * automatically flush the queue when the device comes back online.
+     *
+     * @example
+     * import NetInfo from '@react-native-community/netinfo';
+     * new OpenPanel({ clientId: '...', networkInfo: NetInfo });
+     */
+    networkInfo?: NetworkInfoLike;
+}
 declare class OpenPanel extends OpenPanel$1 {
-    options: OpenPanelOptions;
+    options: ReactNativeOpenPanelOptions;
     private lastPath;
-    constructor(options: OpenPanelOptions);
+    private readonly storage?;
+    private isOnline;
+    constructor(options: ReactNativeOpenPanelOptions);
     private setDefaultProperties;
+    private loadPersistedQueue;
+    private persistQueue;
+    addQueue(payload: TrackHandlerPayload): void;
+    send(payload: TrackHandlerPayload): Promise<void | {
+        deviceId: string;
+        sessionId: string;
+    } | null>;
+    flush(): void;
     track(name: string, properties?: TrackProperties): Promise<void | {
         deviceId: string;
         sessionId: string;
@@ -13,4 +54,4 @@ declare class OpenPanel extends OpenPanel$1 {
     screenView(route: string, properties?: TrackProperties): void;
 }
 
-export { OpenPanel };
+export { OpenPanel, type ReactNativeOpenPanelOptions };

package/dist/index.js

@@ -1 +1 @@
-import{OpenPanel as s}from"@openpanel/sdk";import*as t from"expo-application";import a from"expo-constants";import{AppState as n,Platform as p}from"react-native";export*from"@openpanel/sdk";var i=class extends s{constructor(e){super({...e,sdk:"react-native",sdkVersion:"1.3.0"});this.options=e;this.lastPath="";this.api.addHeader("User-Agent",a.getWebViewUserAgentAsync()),n.addEventListener("change",r=>{r==="active"&&this.setDefaultProperties()}),this.setDefaultProperties()}async setDefaultProperties(){this.setGlobalProperties({__version:t.nativeApplicationVersion,__buildNumber:t.nativeBuildVersion,__referrer:p.OS==="android"?await t.getInstallReferrerAsync():void 0})}track(e,r){return super.track(e,{...r,__path:this.lastPath})}screenView(e,r){this.lastPath=e,super.track("screen_view",{...r,__path:e})}};export{i as OpenPanel};
+import{OpenPanel as a}from"@openpanel/sdk";import*as i from"expo-application";import o from"expo-constants";import{AppState as l,Platform as u}from"react-native";export*from"@openpanel/sdk";var r="@openpanel/offline_queue",s=class extends a{constructor(e){super({...e,sdk:"react-native",sdkVersion:"1.4.0"});this.options=e;this.lastPath="";this.isOnline=!0;this.api.addHeader("User-Agent",o.getWebViewUserAgentAsync()),this.storage=e.storage,e.networkInfo&&(e.networkInfo.fetch().then(({isConnected:t})=>{this.isOnline=t??!0}),e.networkInfo.addEventListener(({isConnected:t})=>{let n=!this.isOnline;this.isOnline=t??!0,n&&this.isOnline&&this.flush()})),l.addEventListener("change",t=>{t==="active"&&(this.setDefaultProperties(),this.flush())}),this.setDefaultProperties(),this.loadPersistedQueue()}async setDefaultProperties(){this.setGlobalProperties({__version:i.nativeApplicationVersion,__buildNumber:i.nativeBuildVersion,__referrer:u.OS==="android"?await i.getInstallReferrerAsync():void 0})}async loadPersistedQueue(){if(this.storage)try{let e=await this.storage.getItem(r);if(e){let t=JSON.parse(e);Array.isArray(t)&&t.length>0&&(this.queue=[...t,...this.queue],this.flush())}}catch{this.log("Failed to load persisted queue")}}persistQueue(){this.storage&&this.storage.setItem(r,JSON.stringify(this.queue)).catch(()=>{this.log("Failed to persist queue")})}addQueue(e){super.addQueue(e),this.persistQueue()}async send(e){return this.options.filter&&!this.options.filter(e)?null:this.isOnline?await super.send(e):(this.addQueue(e),null)}flush(){this.isOnline&&(super.flush(),this.persistQueue())}track(e,t){return super.track(e,{...t,__path:this.lastPath})}screenView(e,t){this.lastPath=e,super.track("screen_view",{...t,__path:e})}};export{s as OpenPanel};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpanel/react-native",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "module": "./dist/index.js",
   "config": {
     "docPath": "apps/public/content/docs/(tracking)/sdks/react-native.mdx"