reuse a bunch of stuff

.gitignore

@@ -11,6 +11,7 @@ coverage
 # misc
 .DS_Store
 *.pem
+.cache
 
 # debug
 npm-debug.log*
@@ -26,4 +27,5 @@ npm-debug.log*
 
 # bundler output
 dist
+build
 .next

packages/nextjs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Sumbit Labs Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/nextjs/package.json

@@ -33,6 +33,9 @@
     "dist",
     "package.json"
   ],
+  "dependencies": {
+    "@aptabase/react": "*"
+  },
   "devDependencies": {
     "@rollup/plugin-replace": "5.0.2",
     "@rollup/plugin-typescript": "11.1.3",

packages/nextjs/src/client.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import { createContext, useContext } from 'react';
-import { AptabaseOptions } from './types';
-
-type TrackEventFn = (eventName: string, props?: Record<string, string | number | boolean>) => Promise<void>;
-
-type ContextProps = {
-  appKey?: string;
-  client?: AptabaseClient;
-} & AptabaseOptions;
-
-export type AptabaseClient = {
-  trackEvent: TrackEventFn;
-};
-
-const AptabaseContext = createContext<ContextProps>({});
-
-type Props = {
-  appKey: string;
-  options?: AptabaseOptions;
-  children: React.ReactNode;
-};
-
-export function AptabaseProvider({ appKey, options, children }: Props) {
-  const client: AptabaseClient = {
-    trackEvent: (eventName, props) => sendEvent(appKey, eventName, props),
-  };
-
-  return <AptabaseContext.Provider value={{ appKey, ...options, client }}>{children}</AptabaseContext.Provider>;
-}
-
-export function useAptabase(): AptabaseClient {
-  const ctx = useContext(AptabaseContext);
-  if (!ctx.client) {
-    throw new Error(
-      'useAptabase must be used within AptabaseProvider. Did you forget to wrap your app in <AptabaseProvider>?',
-    );
-  }
-
-  return ctx.client;
-}
-
-async function sendEvent(
-  appKey: string | undefined,
-  eventName: string,
-  props?: Record<string, string | number | boolean>,
-): Promise<void> {
-  if (!appKey) return Promise.resolve();
-
-  const body = JSON.stringify({
-    timestamp: new Date().toISOString(),
-    sessionId: 'CHANGE-THIS',
-    eventName: eventName,
-    systemProps: {
-      isDebug: true,
-      locale: 'en',
-      appVersion: '',
-      sdkVersion: 'aptabase-nextjs@0.0.1',
-    },
-    props: props,
-  });
-
-  try {
-    const response = await fetch('http://localhost:3000/api/v0/event', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'App-Key': appKey,
-      },
-      credentials: 'omit',
-      body,
-    });
-
-    if (response.status >= 300) {
-      const responseBody = await response.text();
-      console.warn(`Failed to send event "${eventName}": ${response.status} ${responseBody}`);
-    }
-  } catch (e) {
-    console.warn(`Failed to send event "${eventName}": ${e}`);
-  }
-}

packages/nextjs/src/index.ts

@@ -1,4 +1,4 @@
-export * from './client';
+export * from '@aptabase/react';
 
 export function init(appKey: string) {
   globalThis.__APTABASE__ = { appKey };

packages/react/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Sumbit Labs Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/react/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@aptabase/react",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "React SDK for Aptabase: Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aptabase/aptabase-js.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/aptabase/aptabase-js/issues"
+  },
+  "homepage": "https://github.com/aptabase/aptabase-js",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup"
+  },
+  "files": [
+    "README.md",
+    "LICENSE",
+    "dist",
+    "package.json"
+  ],
+  "dependencies": {
+    "@aptabase/web": "*"
+  },
+  "devDependencies": {
+    "tsup": "7.2.0"
+  }
+}

packages/react/src/index.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { init, trackEvent, type AptabaseOptions } from '@aptabase/web';
+import { createContext, useContext, useEffect } from 'react';
+
+type ContextProps = {
+  appKey?: string;
+} & AptabaseOptions;
+
+export type AptabaseClient = {
+  trackEvent: typeof trackEvent;
+};
+
+const AptabaseContext = createContext<ContextProps>({});
+
+type Props = {
+  appKey: string;
+  options?: AptabaseOptions;
+  children: React.ReactNode;
+};
+
+export function AptabaseProvider({ appKey, options, children }: Props) {
+  useEffect(() => {
+    init(appKey, options);
+  }, [appKey, options]);
+
+  return <AptabaseContext.Provider value={{ appKey, ...options }}>{children}</AptabaseContext.Provider>;
+}
+
+export function useAptabase(): AptabaseClient {
+  const ctx = useContext(AptabaseContext);
+  if (!ctx) {
+    throw new Error(
+      'useAptabase must be used within AptabaseProvider. Did you forget to wrap your app in <AptabaseProvider>?',
+    );
+  }
+
+  return { trackEvent };
+}

packages/react/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "types": ["@types"]
+    },
+    "declaration": true,
+    "declarationDir": "./dist"
+  }
+}

packages/react/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.tsx'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+});

packages/web/src/index.ts

@@ -1,39 +1,28 @@
-import { newSessionId } from "./session";
-
 // env.PKG_VERSION is replaced by rollup during build phase
-const sdkVersion = "aptabase-web@env.PKG_VERSION";
+const sdkVersion = 'aptabase-web@env.PKG_VERSION';
 
 export type AptabaseOptions = {
   host?: string;
   appVersion?: string;
 };
 
-// Session expires after 1 hour of inactivity
+let _appKey = '';
-const SESSION_TIMEOUT = 1 * 60 * 60;
+let _apiUrl = '';
-let _sessionId = newSessionId();
+let _locale = '';
-let _lastTouched = new Date();
-let _appKey = "";
-let _apiUrl = "";
-let _locale = "";
 let _isDebug = false;
 let _options: AptabaseOptions | undefined;
 
 const _hosts: { [region: string]: string } = {
-  US: "https://us.aptabase.com",
+  US: 'https://us.aptabase.com',
-  EU: "https://eu.aptabase.com",
+  EU: 'https://eu.aptabase.com',
-  DEV: "http://localhost:3000",
+  DEV: 'http://localhost:3000',
-  SH: "",
+  SH: '',
 };
 
-function getBaseUrl(
+function getBaseUrl(region: string, options?: AptabaseOptions): string | undefined {
-  region: string,
+  if (region === 'SH') {
-  options?: AptabaseOptions
-): string | undefined {
-  if (region === "SH") {
     if (!options?.host) {
-      console.warn(
+      console.warn(`Host parameter must be defined when using Self-Hosted App Key. Tracking will be disabled.`);
-        `Host parameter must be defined when using Self-Hosted App Key. Tracking will be disabled.`
-      );
       return;
     }
     return options.host;
@@ -46,51 +35,35 @@ export function init(appKey: string, options?: AptabaseOptions) {
   _appKey = appKey;
   _options = options;
 
-  const parts = appKey.split("-");
+  const parts = appKey.split('-');
   if (parts.length !== 3 || _hosts[parts[1]] === undefined) {
-    console.warn(
+    console.warn(`The Aptabase App Key "${appKey}" is invalid. Tracking will be disabled.`);
-      `The Aptabase App Key "${appKey}" is invalid. Tracking will be disabled.`
-    );
     return;
   }
 
   const baseUrl = getBaseUrl(parts[1], options);
   _apiUrl = `${baseUrl}/api/v0/event`;
 
-  if (typeof location !== "undefined") {
+  if (typeof location !== 'undefined') {
-    _isDebug = location.hostname === "localhost";
+    _isDebug = location.hostname === 'localhost';
   }
 
-  if (typeof navigator !== "undefined") {
+  if (typeof navigator !== 'undefined') {
-    _locale =
+    _locale = navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
-      navigator.languages && navigator.languages.length
-        ? navigator.languages[0]
-        : navigator.language;
   }
 }
 
-export function trackEvent(
+export function trackEvent(eventName: string, props?: Record<string, string | number | boolean>) {
-  eventName: string,
+  if (!_appKey || typeof window === 'undefined' || !window.fetch) return;
-  props?: Record<string, string | number | boolean>
-) {
-  if (!_appKey || typeof window === "undefined" || !window.fetch) return;
-
-  let now = new Date();
-  const diffInMs = now.getTime() - _lastTouched.getTime();
-  const diffInSec = Math.floor(diffInMs / 1000);
-  if (diffInSec > SESSION_TIMEOUT) {
-    _sessionId = newSessionId();
-  }
-  _lastTouched = now;
 
   const body = JSON.stringify({
     timestamp: new Date().toISOString(),
-    sessionId: _sessionId,
+    sessionId: 'CHANGE-THIS',
     eventName: eventName,
     systemProps: {
       isDebug: _isDebug,
       locale: _locale,
-      appVersion: _options?.appVersion ?? "",
+      appVersion: _options?.appVersion ?? '',
       sdkVersion,
     },
     props: props,
@@ -98,19 +71,17 @@ export function trackEvent(
 
   window
     .fetch(_apiUrl, {
-      method: "POST",
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json',
-        "App-Key": _appKey,
+        'App-Key': _appKey,
       },
-      credentials: "omit",
+      credentials: 'omit',
       body,
     })
     .then((response) => {
       if (response.status >= 300) {
-        console.warn(
+        console.warn(`Failed to send event "${eventName}": ${response.status} ${response.statusText}`);
-          `Failed to send event "${eventName}": ${response.status} ${response.statusText}`
-        );
       }
     })
     .catch(console.error);