@diegotsi/flint-react 2.1.3 → 2.3.0

package/dist/index.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,27 +15,19 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Flint: () => import_flint_core9.Flint,
+  Flint: () => import_flint_core6.Flint,
   FlintModal: () => FlintModal,
-  FlintWidget: () => FlintWidget,
-  flint: () => import_flint_core9.flint
+  FlintWidget: () => FlintWidget
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/FlintModal.tsx
+var import_flint_core3 = require("@diegotsi/flint-core");
 var import_react2 = require("react");
 var import_react_i18next = require("react-i18next");
 
@@ -235,8 +225,6 @@ function injectKeyframes() {
   document.head.appendChild(s);
 }
 function FlintModal({
-  projectKey,
-  serverUrl,
   user,
   meta,
   theme,
@@ -256,6 +244,8 @@ function FlintModal({
   onSuccess,
   onError
 }) {
+  const config = import_flint_core3.Flint.getConfig();
+  const { projectKey, serverUrl } = config;
   const { t } = (0, import_react_i18next.useTranslation)();
   const colors = (0, import_flint_core2.resolveTheme)(theme);
   const isDark = theme === "dark";
@@ -325,7 +315,8 @@ function FlintModal({
       severity: isText ? "P3" : severity,
       url: window.location.href,
       meta: collectedMeta,
-      label: isText ? "TEXT" : void 0
+      label: isText ? "TEXT" : void 0,
+      source: isText ? "text_issue" : "widget"
     };
     if (onBeforeSubmit) {
       const proceed = await onBeforeSubmit(payload);
@@ -1181,25 +1172,13 @@ function CheckIcon({ size = 20 }) {
 }
 
 // src/FlintWidget.tsx
-var import_flint_core10 = require("@diegotsi/flint-core");
+var import_flint_core7 = require("@diegotsi/flint-core");
 var import_react4 = require("react");
 var import_react_i18next3 = require("react-i18next");
 
-// src/collectors/console.ts
-var import_flint_core3 = require("@diegotsi/flint-core");
-
 // src/collectors/environment.ts
 var import_flint_core4 = require("@diegotsi/flint-core");
 
-// src/collectors/formErrors.ts
-var import_flint_core5 = require("@diegotsi/flint-core");
-
-// src/collectors/frustration.ts
-var import_flint_core6 = require("@diegotsi/flint-core");
-
-// src/collectors/network.ts
-var import_flint_core7 = require("@diegotsi/flint-core");
-
 // src/i18n/index.ts
 var import_i18next = require("i18next");
 var import_react_i18next2 = require("react-i18next");
@@ -1250,16 +1229,15 @@ widgetI18n.use(import_react_i18next2.initReactI18next).init({
 var i18n_default = widgetI18n;
 
 // src/store.ts
-var import_flint_core8 = require("@diegotsi/flint-core");
+var import_flint_core5 = require("@diegotsi/flint-core");
 var import_react3 = require("react");
-var import_flint_core9 = require("@diegotsi/flint-core");
+var import_flint_core6 = require("@diegotsi/flint-core");
 function useFlintStore() {
-  return (0, import_react3.useSyncExternalStore)(import_flint_core8.subscribe, import_flint_core8.getSnapshot);
+  return (0, import_react3.useSyncExternalStore)(import_flint_core5.subscribe, import_flint_core5.getSnapshot);
 }
 
 // src/FlintWidget.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var REPLAY_WINDOW_MS = 6e4;
 function FlintWidget(props) {
   const { locale = "en-US" } = props;
   (0, import_react4.useEffect)(() => {
@@ -1268,52 +1246,24 @@ function FlintWidget(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_i18next3.I18nextProvider, { i18n: i18n_default, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WidgetContent, { ...props }) });
 }
 function WidgetContent({
-  projectKey,
-  serverUrl,
-  user,
-  meta,
-  extraFields,
   buttonLabel,
   theme = "dark",
   zIndex = 9999,
   statusPageUrl,
-  datadogSite,
-  enableReplay = true,
   enableScreenshot = true,
-  enableConsole = true,
-  enableNetwork = true,
   enableTextIssues = true,
-  enableFormErrors = true,
-  enableFrustration = false,
-  autoReportFrustration = false,
   onBeforeSubmit,
   onSuccess,
   onError,
   onOpen,
   onClose
 }) {
+  if (!import_flint_core7.Flint.isInitialized()) {
+    throw new Error("[Flint] Call Flint.init() before mounting <FlintWidget />.");
+  }
+  const config = import_flint_core7.Flint.getConfig();
   const globalState = useFlintStore();
-  const resolvedUser = user ?? globalState.user;
-  const resolvedSessionReplay = extraFields?.sessionReplay ?? globalState.sessionReplay;
-  const getExternalReplayUrl = () => {
-    const src = resolvedSessionReplay;
-    const explicit = typeof src === "function" ? src() : src;
-    if (explicit) return explicit;
-    if (datadogSite) {
-      try {
-        const ddRum = window.DD_RUM;
-        const ctx = ddRum?.getInternalContext?.();
-        if (ctx?.session_id) {
-          const ts = bugTimestamp.current || Date.now();
-          const fromTs = ts - 3e4;
-          const toTs = ts + 5e3;
-          return `https://${datadogSite}/rum/replay/sessions/${ctx.session_id}?from_ts=${fromTs}&to_ts=${toTs}&tab=replay&live=false`;
-        }
-      } catch {
-      }
-    }
-    return void 0;
-  };
+  const resolvedUser = globalState.user ?? config.user;
   const { t } = (0, import_react_i18next3.useTranslation)();
   const bugTimestamp = (0, import_react4.useRef)(0);
   const [open, setOpen] = (0, import_react4.useState)(false);
@@ -1363,92 +1313,11 @@ function WidgetContent({
     setOpen(true);
     onOpen?.();
   };
-  const globalInit = import_flint_core10.Flint.isInitialized();
-  const global = import_flint_core10.Flint.getInstance();
-  const consoleCollector = (0, import_react4.useRef)(null);
-  const networkCollector = (0, import_react4.useRef)(null);
-  const replayEvents = (0, import_react4.useRef)([]);
-  const stopReplay = (0, import_react4.useRef)(null);
-  const formErrorCollector = (0, import_react4.useRef)(null);
-  const frustrationCollector = (0, import_react4.useRef)(null);
-  if (!globalInit) {
-    if (enableConsole && !consoleCollector.current) {
-      consoleCollector.current = (0, import_flint_core3.createConsoleCollector)();
-      consoleCollector.current.start();
-    }
-    if (enableNetwork && !networkCollector.current) {
-      const flintHost = (() => {
-        try {
-          return new URL(serverUrl).hostname;
-        } catch {
-          return "";
-        }
-      })();
-      networkCollector.current = (0, import_flint_core7.createNetworkCollector)(flintHost ? [flintHost] : []);
-      networkCollector.current.start();
-    }
-    if (enableFormErrors && !formErrorCollector.current) {
-      formErrorCollector.current = (0, import_flint_core5.createFormErrorCollector)();
-      formErrorCollector.current.start();
-      (0, import_flint_core9._setFormErrorCollector)(formErrorCollector.current);
-    }
-    if (enableFrustration && !frustrationCollector.current) {
-      frustrationCollector.current = (0, import_flint_core6.createFrustrationCollector)();
-      frustrationCollector.current.start();
-    }
+  const didInjectReplay = (0, import_react4.useRef)(false);
+  if (!didInjectReplay.current && config.enableReplay && !import_flint_core7.Flint.getInstance()?.stopReplay) {
+    didInjectReplay.current = true;
   }
-  (0, import_react4.useEffect)(() => {
-    if (globalInit) return;
-    let cancelled = false;
-    if (enableReplay) {
-      import("rrweb").then(({ record }) => {
-        if (cancelled) return;
-        const stopFn = record({
-          emit(event) {
-            replayEvents.current.push(event);
-            const cutoff = Date.now() - REPLAY_WINDOW_MS;
-            while (replayEvents.current.length > 0 && replayEvents.current[0].timestamp < cutoff) {
-              replayEvents.current.shift();
-            }
-          }
-        });
-        stopReplay.current = stopFn ?? null;
-      });
-    }
-    return () => {
-      cancelled = true;
-      consoleCollector.current?.stop();
-      networkCollector.current?.stop();
-      formErrorCollector.current?.stop();
-      (0, import_flint_core9._setFormErrorCollector)(null);
-      frustrationCollector.current?.stop();
-      stopReplay.current?.();
-    };
-  }, [enableReplay, globalInit]);
-  (0, import_react4.useEffect)(() => {
-    if (globalInit) return;
-    if (!enableFrustration || !autoReportFrustration || !frustrationCollector.current) return;
-    const unsubscribe = frustrationCollector.current.onFrustration(async (event) => {
-      const user2 = resolvedUser;
-      await (0, import_flint_core.submitReport)(serverUrl, projectKey, {
-        reporterId: user2?.id ?? "anonymous",
-        reporterName: user2?.name ?? "Anonymous",
-        reporterEmail: user2?.email,
-        description: `[Auto-detected] ${event.type.replace(/_/g, " ")}: ${event.details}`,
-        severity: event.type === "error_loop" ? "P1" : event.type === "rage_click" ? "P2" : "P3",
-        url: event.url,
-        meta: {
-          environment: (0, import_flint_core4.collectEnvironment)(),
-          consoleLogs: consoleCollector.current?.getEntries() ?? [],
-          networkErrors: networkCollector.current?.getEntries() ?? [],
-          formErrors: formErrorCollector.current?.getEntries() ?? [],
-          frustrationEvent: event
-        }
-      }).catch(() => {
-      });
-    });
-    return unsubscribe;
-  }, [enableFrustration, autoReportFrustration, globalInit, projectKey, resolvedUser, serverUrl]);
+  const global = import_flint_core7.Flint.getInstance();
   const label = buttonLabel ?? t("buttonLabel");
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -1535,10 +1404,8 @@ function WidgetContent({
     open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       FlintModal,
       {
-        projectKey,
-        serverUrl,
         user: resolvedUser,
-        meta,
+        meta: config.meta,
         theme,
         zIndex,
         onClose: () => {
@@ -1547,11 +1414,11 @@ function WidgetContent({
           pendingSelection.current = "";
         },
         getEnvironment: import_flint_core4.collectEnvironment,
-        getConsoleLogs: () => globalInit ? global?.console?.getEntries() ?? [] : consoleCollector.current?.getEntries() ?? [],
-        getNetworkErrors: () => globalInit ? global?.network?.getEntries() ?? [] : networkCollector.current?.getEntries() ?? [],
-        getFormErrors: () => globalInit ? global?.formErrors?.getEntries() ?? [] : formErrorCollector.current?.getEntries() ?? [],
-        getReplayEvents: () => globalInit ? import_flint_core10.Flint.getReplayEvents() : [...replayEvents.current],
-        getExternalReplayUrl,
+        getConsoleLogs: () => global?.console?.getEntries() ?? [],
+        getNetworkErrors: () => global?.network?.getEntries() ?? [],
+        getFormErrors: () => global?.formErrors?.getEntries() ?? [],
+        getReplayEvents: () => import_flint_core7.Flint.getReplayEvents(),
+        getExternalReplayUrl: () => import_flint_core7.Flint.getExternalReplayUrl(),
         initialSelection: pendingSelection.current,
         enableScreenshot,
         enableTextIssues,
@@ -1606,7 +1473,6 @@ function SparkIcon2() {
 0 && (module.exports = {
   Flint,
   FlintModal,
-  FlintWidget,
-  flint
+  FlintWidget
 });
 //# sourceMappingURL=index.cjs.map