@ewjdev/anyclick-core

Framework-agnostic core library for UI / UX events with DOM context

Overview

@ewjdev/anyclick-core provides the foundational utilities for capturing UI/UX events with full DOM context. It's framework-agnostic and can be used with any JavaScript framework or vanilla JavaScript.

Installation

yarn install @ewjdev/anyclick-core

Features

• 🎯 DOM Capture - Extract selectors, data attributes, and ancestor information
• 📸 Screenshot Utilities - Capture element and page screenshots
• 📦 Payload Building - Construct structured lightweight payloads
• 🔌 Adapter Interface - Flexible adapter pattern for custom integrations

Basic Usage

import { createAnyclickClient } from "@ewjdev/anyclick-core";

// Create a anyclick client with your adapter
const client = createAnyclickClient({
  adapter: {
    async submit(payload) {
      // Your submission logic
      return { success: true };
    },
  },
});

// Attach to DOM (starts listening for context menu events)
client.attach();

// Later, submit analytic programmatically
await client.submitAnalytic(element, "issue", {
  comment: "This button is broken",
});

// Cleanup
client.detach();

HTTP Adapter

import { createHttpAdapter } from "@ewjdev/anyclick-core";

const adapter = createHttpAdapter({
  endpoint: "/api/feedback",
});

API Reference

DOM Utilities

import {
  getUniqueSelector,
  getAncestors,
  getDataAttributes,
  buildElementContext,
} from "@ewjdev/anyclick-core";

// Get a unique CSS selector for an element
const selector = getUniqueSelector(element);

// Get ancestor elements with context
const ancestors = getAncestors(element, { maxAncestors: 5 });

// Get all data-* attributes
const dataAttrs = getDataAttributes(element);

// Build full element context
const context = buildElementContext(element);

Screenshot Capture

import {
  captureScreenshot,
  captureAllScreenshots,
  isScreenshotSupported,
} from "@ewjdev/anyclick-core";

if (isScreenshotSupported()) {
  // Capture a single element
  const screenshot = await captureScreenshot(element, {
    quality: 0.9,
    format: "png",
  });

  // Capture target, container, and full page
  const screenshots = await captureAllScreenshots(
    targetElement,
    containerElement,
  );
}

Payload Building

import { buildAnyclickPayload, buildPageContext } from "@ewjdev/anyclick-core";

const payload = buildAnyclickPayload({
  element,
  type: "issue",
  comment: "Something is wrong here",
  metadata: { userId: "123" },
});

Types

AnyclickPayload

interface AnyclickPayload {
  type: AnyclickType;
  timestamp: string;
  page: PageContext;
  element: ElementContext;
  comment?: string;
  metadata?: Record<string, unknown>;
  screenshots?: ScreenshotData;
}

AnyclickAdapter

interface AnyclickAdapter {
  submit(payload: AnyclickPayload): Promise<AnyclickResult>;
}

interface AnyclickResult {
  success: boolean;
  id?: string;
  url?: string;
  error?: string;
}

Configuration

const client = createAnyclickClient({
  adapter: myAdapter,
  targetFilter: (event, target) => true,
  maxInnerTextLength: 500,
  maxOuterHTMLLength: 2000,
  maxAncestors: 5,
  cooldownMs: 1000,
  stripAttributes: ["data-sensitive"],
});

Documentation

For full documentation, visit anyclick.ewj.dev/docs/core

Related Packages

• @ewjdev/anyclick-react - React provider and UI
• @ewjdev/anyclick-github - GitHub Issues integration
• @ewjdev/anyclick-cursor - Cursor AI integration
• @ewjdev/anyclick-cursor-local - Local Cursor development

License

MIT © anyclick