working version of appRouter

packages/next/rollup.config.mjs

@@ -1,38 +0,0 @@
-import replace from '@rollup/plugin-replace';
-import terser from '@rollup/plugin-terser';
-import typescript from '@rollup/plugin-typescript';
-import pkg from './package.json' assert { type: 'json' };
-
-const plugins = [
-  terser(),
-  replace({
-    'env.PKG_VERSION': pkg.version,
-    preventAssignment: true,
-  }),
-  typescript({
-    tsconfig: './tsconfig.json',
-    moduleResolution: 'node',
-  }),
-];
-
-const cjs = {
-  input: './src/index.ts',
-  output: {
-    dir: './dist',
-    entryFileNames: '[name].js',
-    format: 'cjs',
-  },
-  plugins,
-};
-
-const es = {
-  input: './src/index.ts',
-  output: {
-    dir: './dist',
-    entryFileNames: '[name].mjs',
-    format: 'es',
-  },
-  plugins,
-};
-
-export default [cjs, es];

packages/next/src/index.ts

@@ -1,3 +0,0 @@
-export function getName() {
-    return "next"
-}

packages/next/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES5",
-    "strict": true,
-    "allowJs": true,
-    "esModuleInterop": true,
-    "baseUrl": ".",
-    "paths": {
-      "types": ["@types"]
-    },
-    "declaration": true,
-    "declarationDir": "./dist",
-    "rootDir": "./src"
-  },
-  "include": ["./"]
-}

packages/nextjs/package.json

@@ -1,23 +1,23 @@
 {
-  "name": "@aptabase/next",
+  "name": "@aptabase/nextjs",
   "version": "0.0.1",
-  "private": false,
   "type": "module",
   "description": "Next.js SDK for Aptabase: Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "default": "./dist/server.js"
     }
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/aptabase/aptabase-js.git",
-    "directory": "packages/js"
+    "directory": "packages/nextjs"
   },
   "bugs": {
     "url": "https://github.com/aptabase/aptabase-js/issues"
@@ -25,10 +25,7 @@
   "homepage": "https://github.com/aptabase/aptabase-js",
   "license": "MIT",
   "scripts": {
-    "build": "rollup -c ./rollup.config.mjs",
-    "watch": "rollup -c ./rollup.config.mjs -w",
-    "prepublishOnly": "npm run build",
-    "pretest": "npm run build"
+    "build": "tsc"
   },
   "files": [
     "README.md",
@@ -43,5 +40,9 @@
     "@rollup/plugin-terser": "0.4.3",
     "tslib": "2.6.2",
     "typescript": "5.2.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "next": "^13.0.0"
   }
 }

packages/nextjs/src/client.tsx

@@ -0,0 +1,82 @@
+'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/global.d.ts

@@ -0,0 +1,5 @@
+type AptabaseState = {
+  appKey?: string;
+};
+
+declare var __APTABASE__: AptabaseState;

packages/nextjs/src/index.ts

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

packages/nextjs/src/server.ts

@@ -0,0 +1,39 @@
+import { headers } from 'next/headers';
+
+export async function trackEvent(eventName: string, props?: Record<string, string | number | boolean>): Promise<void> {
+  const appKey = globalThis.__APTABASE__.appKey;
+  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: {
+        'User-Agent': headers().get('User-Agent') ?? '',
+        '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/types.ts

@@ -0,0 +1,4 @@
+export type AptabaseOptions = {
+  host?: string;
+  appVersion?: string;
+};

packages/nextjs/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "strict": true,
+    "target": "es2020",
+    "types": ["node"],
+  },
+  "include": ["src/*", "src/global.d.ts"],
+  "exclude": ["node_modules"]
+}

packages/web/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@aptabase/web",
   "version": "0.1.3",
-  "private": false,
   "type": "module",
   "description": "JavaScript SDK for Aptabase: Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps",
   "main": "./dist/index.js",
@@ -17,7 +16,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/aptabase/aptabase-js.git",
-    "directory": "packages/js"
+    "directory": "packages/web"
   },
   "bugs": {
     "url": "https://github.com/aptabase/aptabase-js/issues"

packages/web/tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "target": "ES5",
     "strict": true,
-    "allowJs": true,
     "esModuleInterop": true,
     "baseUrl": ".",
     "paths": {