@mhosaic/feedback 0.3.0

package/dist/index-BYZZDht1.d.ts

@@ -0,0 +1,10 @@
+import { a as FeedbackConfig, F as FeedbackApi, R as ReportTransformer } from './types-HSdlLTzw.js';
+
+interface InternalConfig extends FeedbackConfig {
+    fetchImpl?: typeof fetch;
+}
+declare function createFeedback(config: InternalConfig): FeedbackApi & {
+    _registerTransformer(fn: ReportTransformer): void;
+};
+
+export { type InternalConfig as I, createFeedback as c };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { c as createFeedback } from './index-BYZZDht1.js';
+export { C as CapturedContext, F as FeedbackApi, a as FeedbackConfig, b as FeedbackEnv, c as FeedbackSeverity, d as FeedbackType, e as ReportPayload, S as SubmittedReport, U as UserIdentity } from './types-HSdlLTzw.js';

package/dist/index.mjs

@@ -0,0 +1,7 @@
+import {
+  createFeedback
+} from "./chunk-RSBFN26C.mjs";
+export {
+  createFeedback
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/react.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { I as InternalConfig } from './index-BYZZDht1.js';
+import { F as FeedbackApi } from './types-HSdlLTzw.js';
+
+interface FeedbackProviderProps extends InternalConfig {
+    children?: ReactNode;
+}
+declare function FeedbackProvider({ children, ...config }: FeedbackProviderProps): react_jsx_runtime.JSX.Element | null;
+
+declare function useFeedback(): FeedbackApi;
+
+export { FeedbackProvider, useFeedback };

package/dist/react.mjs

@@ -0,0 +1,34 @@
+import {
+  createFeedback
+} from "./chunk-RSBFN26C.mjs";
+
+// src/react/FeedbackProvider.tsx
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var FeedbackContext = createContext(null);
+function FeedbackProvider({ children, ...config }) {
+  const apiRef = useRef(null);
+  const [api, setApi] = useState(null);
+  useEffect(() => {
+    const instance = createFeedback(config);
+    apiRef.current = instance;
+    setApi(instance);
+    return () => {
+      instance.shutdown();
+      apiRef.current = null;
+      setApi(null);
+    };
+  }, [config.apiKey]);
+  if (!api) return null;
+  return /* @__PURE__ */ jsx(FeedbackContext.Provider, { value: api, children });
+}
+function useFeedback() {
+  const api = useContext(FeedbackContext);
+  if (!api) throw new Error("useFeedback must be used inside <FeedbackProvider>");
+  return api;
+}
+export {
+  FeedbackProvider,
+  useFeedback
+};
+//# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/FeedbackProvider.tsx"],"sourcesContent":["/** @jsxImportSource react */\nimport { createContext, useContext, useEffect, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\n\nimport { createFeedback, type InternalConfig } from '../core'\nimport type { FeedbackApi } from '../types'\n\nconst FeedbackContext = createContext<FeedbackApi | null>(null)\n\ninterface FeedbackProviderProps extends InternalConfig {\n  children?: ReactNode\n}\n\nexport function FeedbackProvider({ children, ...config }: FeedbackProviderProps) {\n  const apiRef = useRef<FeedbackApi | null>(null)\n  const [api, setApi] = useState<FeedbackApi | null>(null)\n\n  useEffect(() => {\n    const instance = createFeedback(config)\n    apiRef.current = instance\n    setApi(instance)\n    return () => {\n      instance.shutdown()\n      apiRef.current = null\n      setApi(null)\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [config.apiKey])\n\n  // Only render children once the api instance is ready so useFeedback()\n  // never sees a null context value.\n  if (!api) return null\n\n  return <FeedbackContext.Provider value={api}>{children}</FeedbackContext.Provider>\n}\n\nexport { FeedbackContext }\n\nexport function useFeedback(): FeedbackApi {\n  const api = useContext(FeedbackContext)\n  if (!api) throw new Error('useFeedback must be used inside <FeedbackProvider>')\n  return api\n}\n"],"mappings":";;;;;AACA,SAAS,eAAe,YAAY,WAAW,QAAQ,gBAAgB;AAgC9D;AA1BT,IAAM,kBAAkB,cAAkC,IAAI;AAMvD,SAAS,iBAAiB,EAAE,UAAU,GAAG,OAAO,GAA0B;AAC/E,QAAM,SAAS,OAA2B,IAAI;AAC9C,QAAM,CAAC,KAAK,MAAM,IAAI,SAA6B,IAAI;AAEvD,YAAU,MAAM;AACd,UAAM,WAAW,eAAe,MAAM;AACtC,WAAO,UAAU;AACjB,WAAO,QAAQ;AACf,WAAO,MAAM;AACX,eAAS,SAAS;AAClB,aAAO,UAAU;AACjB,aAAO,IAAI;AAAA,IACb;AAAA,EAEF,GAAG,CAAC,OAAO,MAAM,CAAC;AAIlB,MAAI,CAAC,IAAK,QAAO;AAEjB,SAAO,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,KAAM,UAAS;AACzD;AAIO,SAAS,cAA2B;AACzC,QAAM,MAAM,WAAW,eAAe;AACtC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,oDAAoD;AAC9E,SAAO;AACT;","names":[]}

package/dist/replay.d.ts

@@ -0,0 +1,12 @@
+import { F as FeedbackApi } from './types-HSdlLTzw.js';
+
+interface ReplayOptions {
+    durationMs?: number;
+    maskAllText?: boolean;
+    maskAllInputs?: boolean;
+    maskTextSelector?: string;
+    blockSelector?: string;
+}
+declare function withReplay(fb: FeedbackApi, options?: ReplayOptions): FeedbackApi;
+
+export { type ReplayOptions, withReplay };

package/dist/replay.mjs

@@ -0,0 +1,53 @@
+// src/modules/replay.ts
+function withReplay(fb, options = {}) {
+  const internal = fb;
+  if (typeof internal._registerTransformer !== "function") return fb;
+  const duration = options.durationMs ?? 6e4;
+  const events = [];
+  let stopFn = null;
+  function evictOld() {
+    const cutoff = Date.now() - duration;
+    while (events.length > 0 && (events[0].timestamp ?? 0) < cutoff) events.shift();
+  }
+  void (async () => {
+    try {
+      const { record } = await import("rrweb");
+      stopFn = record({
+        emit(event) {
+          events.push(event);
+          evictOld();
+        },
+        maskAllInputs: options.maskAllInputs ?? true,
+        ...options.maskAllText === true && { maskTextClass: new RegExp(".*") },
+        ...options.maskTextSelector !== void 0 && { maskTextSelector: options.maskTextSelector },
+        blockSelector: options.blockSelector ?? "[data-mfb-block]"
+      }) ?? null;
+    } catch {
+    }
+  })();
+  internal._registerTransformer((payload) => {
+    if (events.length === 0) return payload;
+    evictOld();
+    const blob = {
+      events: events.slice(),
+      durationMs: Math.min(duration, Date.now() - (events[0]?.timestamp ?? Date.now()))
+    };
+    return {
+      ...payload,
+      technical_context: { ...payload.technical_context, replay: blob }
+    };
+  });
+  const originalShutdown = fb.shutdown.bind(fb);
+  fb.shutdown = () => {
+    try {
+      stopFn?.();
+    } catch {
+    }
+    originalShutdown();
+  };
+  return fb;
+}
+export {
+  withReplay
+};
+//# sourceMappingURL=replay.mjs.map

package/dist/replay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modules/replay.ts"],"sourcesContent":["import type { FeedbackApi, FeedbackApiInternal, ReplayBlob } from '../types'\n\nexport interface ReplayOptions {\n  durationMs?: number\n  maskAllText?: boolean\n  maskAllInputs?: boolean\n  maskTextSelector?: string\n  blockSelector?: string\n}\n\ntype RrwebEvent = { timestamp: number } & Record<string, unknown>\n\nexport function withReplay(fb: FeedbackApi, options: ReplayOptions = {}): FeedbackApi {\n  const internal = fb as FeedbackApiInternal\n  if (typeof internal._registerTransformer !== 'function') return fb\n\n  const duration = options.durationMs ?? 60_000\n  const events: RrwebEvent[] = []\n  let stopFn: (() => void) | null = null\n\n  function evictOld() {\n    const cutoff = Date.now() - duration\n    while (events.length > 0 && (events[0]!.timestamp ?? 0) < cutoff) events.shift()\n  }\n\n  void (async () => {\n    try {\n      const { record } = await import('rrweb')\n      stopFn = record({\n        emit(event: RrwebEvent) {\n          events.push(event)\n          evictOld()\n        },\n        maskAllInputs: options.maskAllInputs ?? true,\n        ...(options.maskAllText === true && { maskTextClass: new RegExp('.*') }),\n        ...(options.maskTextSelector !== undefined && { maskTextSelector: options.maskTextSelector }),\n        blockSelector: options.blockSelector ?? '[data-mfb-block]',\n      }) ?? null\n    } catch { /* rrweb unavailable */ }\n  })()\n\n  internal._registerTransformer((payload) => {\n    if (events.length === 0) return payload\n    evictOld()\n    const blob: ReplayBlob = {\n      events: events.slice(),\n      durationMs: Math.min(duration, Date.now() - (events[0]?.timestamp ?? Date.now())),\n    }\n    return {\n      ...payload,\n      technical_context: { ...payload.technical_context, replay: blob },\n    }\n  })\n\n  const originalShutdown = fb.shutdown.bind(fb)\n  fb.shutdown = () => {\n    try { stopFn?.() } catch { /* noop */ }\n    originalShutdown()\n  }\n\n  return fb\n}\n"],"mappings":";AAYO,SAAS,WAAW,IAAiB,UAAyB,CAAC,GAAgB;AACpF,QAAM,WAAW;AACjB,MAAI,OAAO,SAAS,yBAAyB,WAAY,QAAO;AAEhE,QAAM,WAAW,QAAQ,cAAc;AACvC,QAAM,SAAuB,CAAC;AAC9B,MAAI,SAA8B;AAElC,WAAS,WAAW;AAClB,UAAM,SAAS,KAAK,IAAI,IAAI;AAC5B,WAAO,OAAO,SAAS,MAAM,OAAO,CAAC,EAAG,aAAa,KAAK,OAAQ,QAAO,MAAM;AAAA,EACjF;AAEA,QAAM,YAAY;AAChB,QAAI;AACF,YAAM,EAAE,OAAO,IAAI,MAAM,OAAO,OAAO;AACvC,eAAS,OAAO;AAAA,QACd,KAAK,OAAmB;AACtB,iBAAO,KAAK,KAAK;AACjB,mBAAS;AAAA,QACX;AAAA,QACA,eAAe,QAAQ,iBAAiB;AAAA,QACxC,GAAI,QAAQ,gBAAgB,QAAQ,EAAE,eAAe,IAAI,OAAO,IAAI,EAAE;AAAA,QACtE,GAAI,QAAQ,qBAAqB,UAAa,EAAE,kBAAkB,QAAQ,iBAAiB;AAAA,QAC3F,eAAe,QAAQ,iBAAiB;AAAA,MAC1C,CAAC,KAAK;AAAA,IACR,QAAQ;AAAA,IAA0B;AAAA,EACpC,GAAG;AAEH,WAAS,qBAAqB,CAAC,YAAY;AACzC,QAAI,OAAO,WAAW,EAAG,QAAO;AAChC,aAAS;AACT,UAAM,OAAmB;AAAA,MACvB,QAAQ,OAAO,MAAM;AAAA,MACrB,YAAY,KAAK,IAAI,UAAU,KAAK,IAAI,KAAK,OAAO,CAAC,GAAG,aAAa,KAAK,IAAI,EAAE;AAAA,IAClF;AACA,WAAO;AAAA,MACL,GAAG;AAAA,MACH,mBAAmB,EAAE,GAAG,QAAQ,mBAAmB,QAAQ,KAAK;AAAA,IAClE;AAAA,EACF,CAAC;AAED,QAAM,mBAAmB,GAAG,SAAS,KAAK,EAAE;AAC5C,KAAG,WAAW,MAAM;AAClB,QAAI;AAAE,eAAS;AAAA,IAAE,QAAQ;AAAA,IAAa;AACtC,qBAAiB;AAAA,EACnB;AAEA,SAAO;AACT;","names":[]}

package/dist/types-HSdlLTzw.d.ts

@@ -0,0 +1,120 @@
+type FeedbackEnv = 'dev' | 'staging' | 'prod' | (string & {});
+type FeedbackType = 'bug' | 'feature' | 'question' | 'praise' | 'typo';
+type FeedbackSeverity = 'blocker' | 'high' | 'medium' | 'low';
+type CaptureMethod = 'html2canvas' | 'display_media' | 'manual' | 'none';
+interface UserIdentity {
+    id?: string | number;
+    email?: string;
+    name?: string;
+}
+interface FeedbackConfig {
+    apiKey: string;
+    env?: FeedbackEnv;
+    endpoint?: string;
+    user?: UserIdentity;
+    metadata?: Record<string, unknown>;
+    beforeSend?: (payload: ReportPayload) => ReportPayload | false | Promise<ReportPayload | false>;
+    onSubmitSuccess?: (report: SubmittedReport) => void;
+    onError?: (err: Error) => void;
+    maskAllInputs?: boolean;
+    sanitizeUrl?: (url: string) => string;
+    showFAB?: boolean;
+    attachTo?: string | Element;
+    locale?: string;
+    translations?: Record<string, string>;
+    theme?: 'light' | 'dark' | 'auto' | 'none';
+}
+interface ConsoleEntry {
+    level: string;
+    message: string;
+    ts: number;
+    stack?: string;
+}
+interface NetworkEntry {
+    url: string;
+    method: string;
+    status: number;
+    durationMs: number;
+    ts: number;
+    error?: string;
+}
+interface ErrorEntry {
+    message: string;
+    stack?: string;
+    ts: number;
+    source: 'window.error' | 'unhandledrejection';
+}
+interface DeviceContext {
+    viewport: {
+        w: number;
+        h: number;
+        dpr: number;
+    };
+    screen?: {
+        w: number;
+        h: number;
+    };
+    platform?: string;
+    language?: string;
+    timezone?: string;
+    timezoneOffset?: number;
+    connection?: string;
+    online?: boolean;
+    deviceMemory?: number;
+    hardwareConcurrency?: number;
+    referrer?: string;
+    title?: string;
+    pathname?: string;
+}
+interface WebVitalEntry {
+    name: 'CLS' | 'INP' | 'LCP' | 'FCP' | 'TTFB';
+    value: number;
+    rating: 'good' | 'needs-improvement' | 'poor';
+    attribution?: unknown;
+}
+interface ReplayBlob {
+    events: unknown[];
+    durationMs: number;
+}
+interface CapturedContext {
+    consoleLogs: ConsoleEntry[];
+    networkRequests: NetworkEntry[];
+    errors: ErrorEntry[];
+    device: DeviceContext;
+    capturedAt: number;
+    webVitals?: WebVitalEntry[];
+    replay?: ReplayBlob;
+}
+interface ReportPayload {
+    description: string;
+    feedback_type: FeedbackType;
+    severity: FeedbackSeverity;
+    env: FeedbackEnv;
+    page_url: string;
+    user_agent: string;
+    capture_method: CaptureMethod;
+    technical_context: CapturedContext;
+    screenshot?: Blob;
+}
+interface SubmittedReport {
+    id: string;
+    status: string;
+    created_at: string;
+}
+interface FeedbackApi {
+    show(): void;
+    hide(): void;
+    open(options?: {
+        type?: FeedbackType;
+        description?: string;
+    }): void;
+    submit(partial: Partial<ReportPayload> & {
+        description: string;
+    }): Promise<SubmittedReport>;
+    identify(user: UserIdentity): void;
+    setMetadata(kv: Record<string, unknown>): void;
+    shutdown(): void;
+}
+type ReportTransformer = (payload: ReportPayload) => ReportPayload | Promise<ReportPayload>;
+
+export type { CapturedContext as C, FeedbackApi as F, ReportTransformer as R, SubmittedReport as S, UserIdentity as U, FeedbackConfig as a, FeedbackEnv as b, FeedbackSeverity as c, FeedbackType as d, ReportPayload as e };

package/dist/webvitals.d.ts

@@ -0,0 +1,8 @@
+import { F as FeedbackApi } from './types-HSdlLTzw.js';
+
+interface WebVitalsOptions {
+    reportAllChanges?: boolean;
+}
+declare function withWebVitals(fb: FeedbackApi, options?: WebVitalsOptions): FeedbackApi;
+
+export { type WebVitalsOptions, withWebVitals };

package/dist/webvitals.mjs

@@ -0,0 +1,36 @@
+// src/modules/webvitals.ts
+import { onCLS, onFCP, onINP, onLCP, onTTFB } from "web-vitals/attribution";
+function withWebVitals(fb, options = {}) {
+  const internal = fb;
+  if (typeof internal._registerTransformer !== "function") return fb;
+  const entries = /* @__PURE__ */ new Map();
+  const record = (metric) => {
+    entries.set(metric.name, {
+      name: metric.name,
+      value: metric.value,
+      rating: metric.rating,
+      ...metric.attribution !== void 0 && { attribution: metric.attribution }
+    });
+  };
+  const opts = { reportAllChanges: options.reportAllChanges ?? false };
+  try {
+    onCLS(record, opts);
+    onINP(record, opts);
+    onLCP(record, opts);
+    onFCP(record, opts);
+    onTTFB(record, opts);
+  } catch {
+  }
+  internal._registerTransformer((payload) => ({
+    ...payload,
+    technical_context: {
+      ...payload.technical_context,
+      webVitals: Array.from(entries.values())
+    }
+  }));
+  return fb;
+}
+export {
+  withWebVitals
+};
+//# sourceMappingURL=webvitals.mjs.map

package/dist/webvitals.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modules/webvitals.ts"],"sourcesContent":["import { onCLS, onFCP, onINP, onLCP, onTTFB } from 'web-vitals/attribution'\n\nimport type { FeedbackApi, FeedbackApiInternal, WebVitalEntry } from '../types'\n\nexport interface WebVitalsOptions {\n  reportAllChanges?: boolean\n}\n\nexport function withWebVitals(fb: FeedbackApi, options: WebVitalsOptions = {}): FeedbackApi {\n  const internal = fb as FeedbackApiInternal\n  if (typeof internal._registerTransformer !== 'function') return fb\n\n  const entries = new Map<string, WebVitalEntry>()\n  const record = (metric: { name: string; value: number; rating: string; attribution?: unknown }) => {\n    entries.set(metric.name, {\n      name: metric.name as WebVitalEntry['name'],\n      value: metric.value,\n      rating: metric.rating as WebVitalEntry['rating'],\n      ...(metric.attribution !== undefined && { attribution: metric.attribution }),\n    })\n  }\n\n  const opts = { reportAllChanges: options.reportAllChanges ?? false }\n  try {\n    onCLS(record, opts)\n    onINP(record, opts)\n    onLCP(record, opts)\n    onFCP(record, opts)\n    onTTFB(record, opts)\n  } catch { /* unsupported env */ }\n\n  internal._registerTransformer((payload) => ({\n    ...payload,\n    technical_context: {\n      ...payload.technical_context,\n      webVitals: Array.from(entries.values()),\n    },\n  }))\n\n  return fb\n}\n"],"mappings":";AAAA,SAAS,OAAO,OAAO,OAAO,OAAO,cAAc;AAQ5C,SAAS,cAAc,IAAiB,UAA4B,CAAC,GAAgB;AAC1F,QAAM,WAAW;AACjB,MAAI,OAAO,SAAS,yBAAyB,WAAY,QAAO;AAEhE,QAAM,UAAU,oBAAI,IAA2B;AAC/C,QAAM,SAAS,CAAC,WAAmF;AACjG,YAAQ,IAAI,OAAO,MAAM;AAAA,MACvB,MAAM,OAAO;AAAA,MACb,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,MACf,GAAI,OAAO,gBAAgB,UAAa,EAAE,aAAa,OAAO,YAAY;AAAA,IAC5E,CAAC;AAAA,EACH;AAEA,QAAM,OAAO,EAAE,kBAAkB,QAAQ,oBAAoB,MAAM;AACnE,MAAI;AACF,UAAM,QAAQ,IAAI;AAClB,UAAM,QAAQ,IAAI;AAClB,UAAM,QAAQ,IAAI;AAClB,UAAM,QAAQ,IAAI;AAClB,WAAO,QAAQ,IAAI;AAAA,EACrB,QAAQ;AAAA,EAAwB;AAEhC,WAAS,qBAAqB,CAAC,aAAa;AAAA,IAC1C,GAAG;AAAA,IACH,mBAAmB;AAAA,MACjB,GAAG,QAAQ;AAAA,MACX,WAAW,MAAM,KAAK,QAAQ,OAAO,CAAC;AAAA,IACxC;AAAA,EACF,EAAE;AAEF,SAAO;AACT;","names":[]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@mhosaic/feedback",
+  "version": "0.3.0",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.mjs"
+    },
+    "./webvitals": {
+      "types": "./dist/webvitals.d.ts",
+      "import": "./dist/webvitals.mjs"
+    },
+    "./replay": {
+      "types": "./dist/replay.d.ts",
+      "import": "./dist/replay.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "preact": "^10.24.0",
+    "html2canvas-pro": "^1.5.8",
+    "web-vitals": "^4.2.0",
+    "rrweb": "^2.0.0-alpha.18"
+  },
+  "devDependencies": {
+    "@testing-library/preact": "^3.2.4",
+    "@testing-library/react": "^14.0.0",
+    "@types/node": "^22.5.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "jsdom": "^25.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "size-limit": "^11.1.5",
+    "@size-limit/preset-small-lib": "^11.1.5",
+    "tsup": "^8.3.0",
+    "typescript": "5.6.3",
+    "vitest": "^2.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit",
+    "size": "size-limit"
+  }
+}