Korbs/Zalvena
1
Fork 0
Code Issues Pull requests Activity

reuse a bunch of stuff

Browse source
This commit is contained in:
goenning 2023-09-01 13:33:07 +01:00
parent c0a2387f76
commit e256d13c92
14 changed files with 1593 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

21
packages/nextjs/LICENSE Normal file
View file

@ -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.

3
packages/nextjs/package.json
View file

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

82
packages/nextjs/src/client.tsx
View file

@ -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}`);
}
}

2
packages/nextjs/src/index.ts
View file

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

0
packages/react/CHANGELOG.md Normal file
View file

21
packages/react/LICENSE Normal file
View file

@ -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.

0
packages/react/README.md Normal file
View file

41
packages/react/package.json Normal file
View file

@ -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"
}
}

39
packages/react/src/index.tsx Normal file
View file

@ -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 };
}

15
packages/react/tsconfig.json Normal file
View file

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

10
packages/react/tsup.config.ts Normal file
View file

@ -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,
});

81
packages/web/src/index.ts
View file

@ -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
const SESSION_TIMEOUT = 1 * 60 * 60;
let _sessionId = newSessionId();
let _lastTouched = new Date();
let _appKey = "";
let _apiUrl = "";
let _locale = "";
let _appKey = '';
let _apiUrl = '';
let _locale = '';
let _isDebug = false;
let _options: AptabaseOptions | undefined;
const _hosts: { [region: string]: string } = {
US: "https://us.aptabase.com",
EU: "https://eu.aptabase.com",
DEV: "http://localhost:3000",
SH: "",
US: 'https://us.aptabase.com',
EU: 'https://eu.aptabase.com',
DEV: 'http://localhost:3000',
SH: '',
};
function getBaseUrl(
region: string,
options?: AptabaseOptions
): string | undefined {
if (region === "SH") {
function getBaseUrl(region: string, options?: AptabaseOptions): string | undefined {
if (region === 'SH') {
if (!options?.host) {
console.warn(
`Host parameter must be defined when using Self-Hosted App Key. Tracking will be disabled.`
);
console.warn(`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(
`The Aptabase App Key "${appKey}" is invalid. Tracking will be disabled.`
);
console.warn(`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") {
_isDebug = location.hostname === "localhost";
if (typeof location !== 'undefined') {
_isDebug = location.hostname === 'localhost';
}
if (typeof navigator !== "undefined") {
_locale =
navigator.languages && navigator.languages.length
? navigator.languages[0]
: navigator.language;
if (typeof navigator !== 'undefined') {
_locale = navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
}
}
export function trackEvent(
eventName: string,
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;
export function trackEvent(eventName: string, props?: Record<string, string | number | boolean>) {
if (!_appKey || typeof window === 'undefined' || !window.fetch) return;
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",
"App-Key": _appKey,
'Content-Type': 'application/json',
'App-Key': _appKey,
},
credentials: "omit",
credentials: 'omit',
body,
})
.then((response) => {
if (response.status >= 300) {
console.warn(
`Failed to send event "${eventName}": ${response.status} ${response.statusText}`
);
console.warn(`Failed to send event "${eventName}": ${response.status} ${response.statusText}`);
}
})
.catch(console.error);