refactor: add unbuild for sdk (#96)

* refactor: add unbuild for sdk

* refactor: update sdk

* fix: remove useEffect dependency

---------

Co-authored-by: Valerii Strilets <[email protected]>
Co-authored-by: Hyteq <[email protected]>

Author: 3 people

bun.lock

@@ -0,0 +1,19 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+	name: '@databuddy/sdk',
+	entries: [
+		'./src/core/index.ts',
+		'./src/react/index.ts',
+		'./src/vue/index.ts',
+	],
+	externals: ['react', 'react-dom', 'vue'],
+	declaration: true,
+	hooks: {
+		'build:done': async () => {
+			const file = await readFile('./dist/react/index.mjs', 'utf-8');
+			await writeFile('./dist/react/index.mjs', `'use client';\n\n${file}`);
+		},
+	},
+});

packages/sdk/build.config.ts

@@ -1,34 +1,58 @@
 {
   "name": "@databuddy/sdk",
-  "version": "1.4.2",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "module": "dist/index.js",
+  "version": "2.0.0",
+  "description": "Official Databuddy Analytics SDK",
+  "main": "./dist/core/index.mjs",
+  "types": "./dist/core/index.d.ts",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "build": "unbuild"
+  },
   "devDependencies": {
     "@types/node": "^20.0.0",
-    "typescript": "catalog:"
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "18.0.0",
+    "typescript": "catalog:",
+    "unbuild": "^3.6.1",
+    "vue": "3.0.0",
+    "vue-sfc-transformer": "^0.1.16"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "default": "./dist/index.js"
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.mjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.mjs"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.mjs"
     }
   },
-  "description": "Official Databuddy Analytics SDK",
   "files": [
     "dist"
   ],
   "keywords": [
     "analytics",
     "tracking",
     "databuddy",
-    "sdk"
-  ],
-  "license": "MIT",
-  "private": false,
-  "scripts": {
-    "build": "tsc --project tsconfig.json"
-  }
+    "sdk",
+    "react",
+    "vue"
+  ]
 }

packages/sdk/package.json

@@ -0,0 +1,10 @@
+export * from './script';
+export * from './tracker';
+export * from './types';
+
+import { Databuddy as DatabuddyReact } from '../react/Databuddy';
+
+/**
+ * @deprecated Use Databuddy from `@databuddy/sdk/react` instead
+ */
+export const Databuddy = DatabuddyReact;

packages/sdk/src/Databuddy.tsx

@@ -0,0 +1,30 @@
+import { version } from '../../package.json';
+import type { DatabuddyConfig } from './types';
+
+const INJECTED_SCRIPT_ATTRIBUTE = 'data-databuddy-injected';
+
+export function isScriptInjected() {
+	return !!document.querySelector(`script[${INJECTED_SCRIPT_ATTRIBUTE}]`);
+}
+
+export function createScript({
+	scriptUrl,
+	sdkVersion,
+	...props
+}: DatabuddyConfig) {
+	const script = document.createElement('script');
+
+	script.src = scriptUrl || 'https://cdn.databuddy.cc/databuddy.js';
+	script.async = true;
+	script.crossOrigin = 'anonymous';
+	script.setAttribute(INJECTED_SCRIPT_ATTRIBUTE, 'true');
+	script.setAttribute('data-sdk-version', sdkVersion || version);
+
+	for (const [key, value] of Object.entries(props)) {
+		const dataKey = `data-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+
+		script.setAttribute(dataKey, String(value));
+	}
+
+	return script;
+}

packages/sdk/src/core/index.ts

@@ -103,10 +103,3 @@ export function trackError(
 ): Promise<void> {
 	return track('error', { message, ...properties });
 }
-
-export default {
-	track,
-	clear,
-	flush,
-	trackError,
-};

packages/sdk/src/core/script.ts

@@ -0,0 +1,17 @@
+import { createScript, isScriptInjected } from '../core/script';
+import type { DatabuddyConfig } from '../core/types';
+
+/**
+ * <Databuddy /> component for Next.js/React apps
+ * Injects the databuddy.js script with all config as data attributes
+ * Usage: <Databuddy clientId="..." trackScreenViews trackPerformance ... />
+ */
+export function Databuddy(props: DatabuddyConfig) {
+	// Only inject script on client-side and if not already injected
+	if (typeof window !== 'undefined' && !props.disabled && !isScriptInjected()) {
+		const script = createScript(props);
+		document.head.appendChild(script);
+	}
+
+	return null;
+}