HumanBehavior JS - Modular Edition

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:

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

import { HumanBehaviorTracker } from 'humanbehavior-js';

const tracker = HumanBehaviorTracker.init('your-api-key');
tracker.start();

Package Structure

Main Package

• humanbehavior-js - Complete SDK with all features (recommended for most users)

Framework Integrations (Optional)

These packages provide framework-specific optimizations and are completely optional:

• @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)

Advanced Packages

• @humanbehavior/core - Core SDK functionality (for advanced users)
• @humanbehavior/wizard - Installation wizard and CLI tools

Installation Options

Option 1: Single Package (Simplest)

npm install humanbehavior-js

Then import framework features as needed:

// 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:

# React
npm install @humanbehavior/react

# Vue
npm install @humanbehavior/vue

# Svelte
npm install @humanbehavior/svelte

# Remix
npm install @humanbehavior/remix

# Angular
npm install @humanbehavior/angular

Usage Examples

Basic Usage (Vanilla JS)

import { HumanBehaviorTracker } from 'humanbehavior-js';

const tracker = HumanBehaviorTracker.init('your-api-key');
tracker.start();

React Integration

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

import { createApp } from 'vue';
import { HumanBehaviorPlugin } from 'humanbehavior-js/vue';

const app = createApp(App);
app.use(HumanBehaviorPlugin, {
  apiKey: 'your-api-key'
});

Svelte Integration

import { humanBehaviorStore } from 'humanbehavior-js/svelte';

const tracker = humanBehaviorStore.init('your-api-key');

Development

Setup

npm install

Build all packages

npm run build

Build specific package

npm run build --workspace=@humanbehavior/core

Development mode

npm run dev

Architecture

This modular structure provides several benefits:

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

The API remains the same, but the import paths have changed:

// Old
import { HumanBehaviorTracker } from 'humanbehavior-js';

// New - Same as before!
import { HumanBehaviorTracker } from 'humanbehavior-js';

// Or for framework-specific features
import { useHumanBehavior } from 'humanbehavior-js/react';

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

License

ISC