humanbehavior-js 0.5.16 → 0.5.18

package/README.md

@@ -2,38 +2,78 @@
 
 This is the modular version of the HumanBehavior JavaScript SDK, organized into separate packages for better maintainability and tree-shaking.
 
+## Quick Start
+
+### Simple Installation (Recommended)
+
+The easiest way to get started is with the main package:
+
+```bash
+npm install humanbehavior-js
+```
+
+This gives you everything you need to start recording user sessions and events. The package automatically includes:
+- Core session recording functionality
+- Automatic event tracking
+- User identification
+- Data redaction
+- Session persistence
+
+### Basic Usage
+
+```javascript
+import { HumanBehaviorTracker } from 'humanbehavior-js';
+
+const tracker = HumanBehaviorTracker.init('your-api-key');
+tracker.start();
+```
+
 ## Package Structure
 
-### Core Packages
+### Main Package
 
-- **`@humanbehavior/core`** - Core SDK functionality (tracker, API, utilities)
-- **`humanbehavior-js`** - Main browser SDK (re-exports from core)
+- **`humanbehavior-js`** - Complete SDK with all features (recommended for most users)
 
-### Framework Integrations
+### Framework Integrations (Optional)
 
-- **`@humanbehavior/react`** - React integration with hooks and context
-- **`@humanbehavior/vue`** - Vue.js plugin
-- **`@humanbehavior/svelte`** - Svelte integration
-- **`@humanbehavior/remix`** - Remix.js integration
-- **`@humanbehavior/angular`** - Angular integration
+These packages provide framework-specific optimizations and are **completely optional**:
 
-### Tools
+- **`@humanbehavior/react`** - React hooks and context (or use `humanbehavior-js/react`)
+- **`@humanbehavior/vue`** - Vue.js plugin (or use `humanbehavior-js/vue`)
+- **`@humanbehavior/svelte`** - Svelte integration (or use `humanbehavior-js/svelte`)
+- **`@humanbehavior/remix`** - Remix.js integration (or use `humanbehavior-js/remix`)
+- **`@humanbehavior/angular`** - Angular integration (or use `humanbehavior-js/angular`)
 
-- **`@humanbehavior/wizard`** - Installation wizard and CLI tools
+### Advanced Packages
 
-### Tooling
+- **`@humanbehavior/core`** - Core SDK functionality (for advanced users)
+- **`@humanbehavior/wizard`** - Installation wizard and CLI tools
 
-- **`@humanbehavior-tooling/tsconfig-base`** - Shared TypeScript configuration
-- **`@humanbehavior-tooling/rollup-utils`** - Shared Rollup build utilities
+## Installation Options
 
-## Installation
+### Option 1: Single Package (Simplest)
 
-### Main SDK
 ```bash
 npm install humanbehavior-js
 ```
 
-### Framework-specific packages
+Then import framework features as needed:
+
+```javascript
+// Core functionality
+import { HumanBehaviorTracker } from 'humanbehavior-js';
+
+// React features (if needed)
+import { useHumanBehavior } from 'humanbehavior-js/react';
+
+// Vue features (if needed)
+import { HumanBehaviorPlugin } from 'humanbehavior-js/vue';
+```
+
+### Option 2: Framework-Specific Packages
+
+If you prefer separate packages for better tree-shaking:
+
 ```bash
 # React
 npm install @humanbehavior/react
@@ -51,9 +91,10 @@ npm install @humanbehavior/remix
 npm install @humanbehavior/angular
 ```
 
-## Usage
+## Usage Examples
+
+### Basic Usage (Vanilla JS)
 
-### Basic Usage (Browser)
 ```javascript
 import { HumanBehaviorTracker } from 'humanbehavior-js';
 
@@ -62,22 +103,26 @@ tracker.start();
 ```
 
 ### React Integration
+
 ```jsx
-import { HumanBehaviorProvider, useHumanBehavior } from '@humanbehavior/react';
-
-function App() {
-  return (
-    <HumanBehaviorProvider apiKey="your-api-key">
-      <YourApp />
-    </HumanBehaviorProvider>
-  );
+import { useHumanBehavior } from 'humanbehavior-js/react';
+
+function MyComponent() {
+  const tracker = useHumanBehavior();
+  
+  const handleClick = () => {
+    tracker.customEvent('button_clicked');
+  };
+
+  return <button onClick={handleClick}>Click me</button>;
 }
 ```
 
 ### Vue Integration
+
 ```javascript
 import { createApp } from 'vue';
-import { HumanBehaviorPlugin } from '@humanbehavior/vue';
+import { HumanBehaviorPlugin } from 'humanbehavior-js/vue';
 
 const app = createApp(App);
 app.use(HumanBehaviorPlugin, {
@@ -86,8 +131,9 @@ app.use(HumanBehaviorPlugin, {
 ```
 
 ### Svelte Integration
+
 ```javascript
-import { humanBehaviorStore } from '@humanbehavior/svelte';
+import { humanBehaviorStore } from 'humanbehavior-js/svelte';
 
 const tracker = humanBehaviorStore.init('your-api-key');
 ```
@@ -118,11 +164,13 @@ npm run dev
 
 This modular structure provides several benefits:
 
-1. **Tree-shaking**: Only import what you need
-2. **Framework-specific optimizations**: Each framework package is optimized for its target
-3. **Better maintainability**: Clear separation of concerns
-4. **Reduced bundle size**: Smaller packages for specific use cases
-5. **Easier testing**: Isolated packages are easier to test
+1. **Simple Start**: Install just `humanbehavior-js` and everything works
+2. **Progressive Enhancement**: Add framework-specific features as needed
+3. **Tree-shaking**: Only import what you need
+4. **Framework-specific optimizations**: Each framework package is optimized for its target
+5. **Better maintainability**: Clear separation of concerns
+6. **Reduced bundle size**: Smaller packages for specific use cases
+7. **Easier testing**: Isolated packages are easier to test
 
 ## Migration from v1
 
@@ -132,10 +180,11 @@ The API remains the same, but the import paths have changed:
 // Old
 import { HumanBehaviorTracker } from 'humanbehavior-js';
 
-// New
+// New - Same as before!
 import { HumanBehaviorTracker } from 'humanbehavior-js';
-// or for framework-specific packages
-import { HumanBehaviorProvider } from '@humanbehavior/react';
+
+// Or for framework-specific features
+import { useHumanBehavior } from 'humanbehavior-js/react';
 ```
 
 ## Contributing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "humanbehavior-js",
-  "version": "0.5.16",
+  "version": "0.5.18",
   "description": "SDK for HumanBehavior session and event recording",
   "private": false,
   "packageManager": "npm@10.0.0",
@@ -8,10 +8,12 @@
     "packages/*",
     "tooling/*"
   ],
-  "main": "packages/browser/dist/index.js",
+  "main": "packages/browser/dist/index.min.js",
   "browser": "packages/browser/dist/index.min.js",
   "module": "packages/browser/dist/index.mjs",
   "types": "packages/browser/dist/index.d.ts",
+  "unpkg": "packages/browser/dist/index.min.js",
+  "jsdelivr": "packages/browser/dist/index.min.js",
   "files": [
     "packages/browser/dist",
     "packages/react/dist",
@@ -53,24 +55,14 @@
   "exports": {
     ".": {
       "import": "./packages/browser/dist/index.mjs",
-      "require": "./packages/browser/dist/index.js",
+      "require": "./packages/browser/dist/index.min.js",
       "types": "./packages/browser/dist/index.d.ts"
     },
-    "./core": {
-      "import": "./packages/core/dist/index.mjs",
-      "require": "./packages/core/dist/index.js",
-      "types": "./packages/core/dist/index.d.ts"
-    },
     "./react": {
       "import": "./packages/react/dist/index.mjs",
       "require": "./packages/react/dist/index.js",
       "types": "./packages/react/dist/index.d.ts"
     },
-    "./react/index": {
-      "import": "./packages/react/dist/index.mjs",
-      "require": "./packages/react/dist/index.js",
-      "types": "./packages/react/dist/index.d.ts"
-    },
     "./vue": {
       "import": "./packages/vue/dist/index.mjs",
       "require": "./packages/vue/dist/index.js",
@@ -91,6 +83,11 @@
       "require": "./packages/angular/dist/index.js",
       "types": "./packages/angular/dist/index.d.ts"
     },
+    "./core": {
+      "import": "./packages/core/dist/index.mjs",
+      "require": "./packages/core/dist/index.js",
+      "types": "./packages/core/dist/index.d.ts"
+    },
     "./wizard": {
       "import": "./packages/wizard/dist/index.mjs",
       "require": "./packages/wizard/dist/index.js",

package/packages/browser/dist/cdn.d.ts

@@ -0,0 +1,8 @@
+/**
+ * CDN entry point for HumanBehavior SDK
+ * This file is specifically designed for IIFE builds used in CDN/script tags
+ */
+import { HumanBehaviorTracker } from '@humanbehavior/core';
+export { HumanBehaviorTracker };
+export default HumanBehaviorTracker;
+//# sourceMappingURL=cdn.d.ts.map

package/packages/browser/dist/cdn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/entrypoints/cdn.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAgB1D,OAAO,EAAE,oBAAoB,EAAE,CAAA;AAC/B,eAAe,oBAAoB,CAAA"}