first commit

packages/web/CHANGELOG.md

@@ -0,0 +1,48 @@
+## 0.4.3
+
+- Move browser locale and is debug reads from import to first event to better support SSR
+
+## 0.4.2
+
+- Fix error when running on chrome
+
+## 0.4.1
+
+- Support for custom API path
+
+## 0.4.0
+
+- Internal refactor
+
+## 0.3.2
+
+- better version of the session id generator
+
+## 0.3.1
+
+- use new session id format
+
+## 0.3.0
+
+- Added an option to specify `isDebug` at init time
+
+## 0.2.0
+
+- Some internal refactor to support the new `@aptabase/react` package
+
+## 0.1.3
+
+- Add automatic session timeout after 1 hour of inactivity
+
+## 0.1.2
+
+- Added support for automatic segregation of Debug/Release events
+
+## 0.1.1
+
+- Refactor on session generator
+
+## 0.1.0
+
+- Move to Rollup 3
+- Output both CJS and ESM modules

packages/web/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/web/README.md

@@ -0,0 +1,52 @@
+![Aptabase](https://aptabase.com/og.png)
+
+# Aptabase SDK for Web Apps
+
+A tiny SDK (1 kB) to instrument your web app with Aptabase, an Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps.
+
+Building a React app? Use the `@aptabase/react` package instead.
+
+> 👉 **IMPORTANT**
+>
+> This SDK is for **Web Applications**, not websites. There's a subtle, but important difference. A web app is often a lot more interactive and does not cause a full page reload when the user interacts with it. It's often called a **Single-Page Application**. A website, on the other hand, is a lot more content-focused like marketing sites, landing pages, blogs, etc. While you can certainly use Aptabase to track events on websites, please be aware that each page reload will be considered a new session.
+
+## Install
+
+Install the SDK using npm or your preferred JavaScript package manager
+
+```bash
+npm add @aptabase/web
+```
+
+## Usage
+
+First you need to get your `App Key` from Aptabase, you can find it in the `Instructions` menu on the left side menu.
+
+Initialize the SDK using your `App Key`:
+
+```js
+import { init } from '@aptabase/web';
+
+init('<YOUR_APP_KEY>'); // 👈 this is where you enter your App Key
+```
+
+The init function also supports an optional second parameter, which is an object with the `appVersion` property.
+
+It's up to you to decide how to get the version of your app, but it's generally recommended to use your bundler (like Webpack, Vite, Rollup, etc.) to inject the values at build time. Alternatively you can also pass it in manually.
+
+Afterwards you can start tracking events with `trackEvent`:
+
+```js
+import { trackEvent } from '@aptabase/web';
+
+trackEvent('connect_click'); // An event with no properties
+trackEvent('play_music', { name: 'Here comes the sun' }); // An event with a custom property
+```
+
+A few important notes:
+
+1. The SDK will automatically enhance the event with some useful information, like the OS and other properties.
+2. You're in control of what gets sent to Aptabase. This SDK does not automatically track any events, you need to call `trackEvent` manually.
+   - Because of this, it's generally recommended to at least track an event at startup
+3. You do not need to await the `trackEvent` function, it'll run in the background.
+4. Only strings and numeric values are allowed on custom properties

packages/web/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@aptabase/web",
+  "version": "0.4.3",
+  "type": "module",
+  "description": "JavaScript 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/web"
+  },
+  "bugs": {
+    "url": "https://github.com/aptabase/aptabase-js/issues"
+  },
+  "homepage": "https://github.com/aptabase/aptabase-js",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "README.md",
+    "LICENSE",
+    "dist",
+    "package.json"
+  ],
+  "devDependencies": {
+    "@types/chrome": "0.0.254",
+    "@types/node": "20.5.7"
+  }
+}

packages/web/src/index.ts

@@ -0,0 +1,36 @@
+import { getApiUrl, inMemorySessionId, sendEvent, validateAppKey, type AptabaseOptions } from '../../shared';
+
+// Session expires after 1 hour of inactivity
+const SESSION_TIMEOUT = 1 * 60 * 60;
+const sdkVersion = `aptabase-web@${process.env.PKG_VERSION}`;
+
+let _appKey = '';
+let _apiUrl: string | undefined;
+let _options: AptabaseOptions | undefined;
+
+export { type AptabaseOptions };
+
+export function init(appKey: string, options?: AptabaseOptions) {
+  if (!validateAppKey(appKey)) return;
+
+  _apiUrl = options?.apiUrl ?? getApiUrl(appKey, options);
+  _appKey = appKey;
+  _options = options;
+}
+
+export async function trackEvent(eventName: string, props?: Record<string, string | number | boolean>): Promise<void> {
+  if (!_apiUrl) return;
+
+  const sessionId = inMemorySessionId(SESSION_TIMEOUT);
+
+  await sendEvent({
+    apiUrl: _apiUrl,
+    sessionId,
+    appKey: _appKey,
+    isDebug: _options?.isDebug,
+    appVersion: _options?.appVersion,
+    sdkVersion,
+    eventName,
+    props,
+  });
+}

packages/web/tsconfig.json

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

packages/web/tsup.config.ts

@@ -0,0 +1,55 @@
+import { defineConfig } from 'tsup'
+
+const { version } = require('./package.json');
+
+export default defineConfig([
+  // Modern ESM and CJS bundles
+  {
+    entry: ['src/index.ts'],
+    format: ['esm', 'cjs'],
+    dts: true,
+    splitting: false,
+    sourcemap: true,
+    clean: true,
+    env: {
+      PKG_VERSION: version,
+    },
+  },
+  // IIFE bundle (for browser scripts)
+  {
+    entry: {
+      'aptabase.debug': 'src/index.ts',
+    },
+    format: ['iife'],
+    globalName: 'aptabase',
+    outExtension() {
+      return { js: `.js` }
+    },
+    splitting: false,
+    sourcemap: true,
+    clean: false, // has been cleaned in previous step
+    define: {
+      'process.env.PKG_VERSION': JSON.stringify(version),
+      'process.env.NODE_ENV': JSON.stringify('development'),
+    },
+  },
+  // Minified IIFE bundle
+  {
+    entry: {
+      'aptabase.min': 'src/index.ts',
+    },
+    format: ['iife'],
+    globalName: 'aptabase',
+    minify: true,
+    outExtension() {
+      return { js: `.js` }
+    },
+    splitting: false,
+    sourcemap: true,
+    clean: false, // has been cleaned in previous step
+    define: {
+      'process.env.PKG_VERSION': JSON.stringify(version),
+      'process.env.NODE_ENV': JSON.stringify('development'),
+    },
+  }
+])