@diegotsi/flint-react 2.1.3 → 2.3.0

package/dist/index.js

@@ -1,4 +1,7 @@
 // src/FlintModal.tsx
+import {
+  Flint
+} from "@diegotsi/flint-core";
 import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -196,8 +199,6 @@ function injectKeyframes() {
   document.head.appendChild(s);
 }
 function FlintModal({
-  projectKey,
-  serverUrl,
   user,
   meta,
   theme,
@@ -217,6 +218,8 @@ function FlintModal({
   onSuccess,
   onError
 }) {
+  const config = Flint.getConfig();
+  const { projectKey, serverUrl } = config;
   const { t } = useTranslation();
   const colors = resolveTheme(theme);
   const isDark = theme === "dark";
@@ -286,7 +289,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);
@@ -1142,25 +1146,13 @@ function CheckIcon({ size = 20 }) {
 }
 
 // src/FlintWidget.tsx
-import { Flint as Flint2 } from "@diegotsi/flint-core";
+import { Flint as Flint3 } from "@diegotsi/flint-core";
 import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 import { I18nextProvider, useTranslation as useTranslation2 } from "react-i18next";
 
-// src/collectors/console.ts
-import { createConsoleCollector } from "@diegotsi/flint-core";
-
 // src/collectors/environment.ts
 import { collectEnvironment } from "@diegotsi/flint-core";
 
-// src/collectors/formErrors.ts
-import { createFormErrorCollector } from "@diegotsi/flint-core";
-
-// src/collectors/frustration.ts
-import { createFrustrationCollector } from "@diegotsi/flint-core";
-
-// src/collectors/network.ts
-import { createNetworkCollector } from "@diegotsi/flint-core";
-
 // src/i18n/index.ts
 import { createInstance } from "i18next";
 import { initReactI18next } from "react-i18next";
@@ -1213,14 +1205,13 @@ var i18n_default = widgetI18n;
 // src/store.ts
 import { getSnapshot, subscribe } from "@diegotsi/flint-core";
 import { useSyncExternalStore } from "react";
-import { _setFormErrorCollector, Flint, flint } from "@diegotsi/flint-core";
+import { _setFormErrorCollector, Flint as Flint2 } from "@diegotsi/flint-core";
 function useFlintStore() {
   return useSyncExternalStore(subscribe, getSnapshot);
 }
 
 // src/FlintWidget.tsx
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var REPLAY_WINDOW_MS = 6e4;
 function FlintWidget(props) {
   const { locale = "en-US" } = props;
   useEffect3(() => {
@@ -1229,52 +1220,24 @@ function FlintWidget(props) {
   return /* @__PURE__ */ jsx3(I18nextProvider, { i18n: i18n_default, children: /* @__PURE__ */ jsx3(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 (!Flint3.isInitialized()) {
+    throw new Error("[Flint] Call Flint.init() before mounting <FlintWidget />.");
+  }
+  const config = Flint3.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 } = useTranslation2();
   const bugTimestamp = useRef3(0);
   const [open, setOpen] = useState3(false);
@@ -1324,92 +1287,11 @@ function WidgetContent({
     setOpen(true);
     onOpen?.();
   };
-  const globalInit = Flint2.isInitialized();
-  const global = Flint2.getInstance();
-  const consoleCollector = useRef3(null);
-  const networkCollector = useRef3(null);
-  const replayEvents = useRef3([]);
-  const stopReplay = useRef3(null);
-  const formErrorCollector = useRef3(null);
-  const frustrationCollector = useRef3(null);
-  if (!globalInit) {
-    if (enableConsole && !consoleCollector.current) {
-      consoleCollector.current = createConsoleCollector();
-      consoleCollector.current.start();
-    }
-    if (enableNetwork && !networkCollector.current) {
-      const flintHost = (() => {
-        try {
-          return new URL(serverUrl).hostname;
-        } catch {
-          return "";
-        }
-      })();
-      networkCollector.current = createNetworkCollector(flintHost ? [flintHost] : []);
-      networkCollector.current.start();
-    }
-    if (enableFormErrors && !formErrorCollector.current) {
-      formErrorCollector.current = createFormErrorCollector();
-      formErrorCollector.current.start();
-      _setFormErrorCollector(formErrorCollector.current);
-    }
-    if (enableFrustration && !frustrationCollector.current) {
-      frustrationCollector.current = createFrustrationCollector();
-      frustrationCollector.current.start();
-    }
+  const didInjectReplay = useRef3(false);
+  if (!didInjectReplay.current && config.enableReplay && !Flint3.getInstance()?.stopReplay) {
+    didInjectReplay.current = true;
   }
-  useEffect3(() => {
-    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();
-      _setFormErrorCollector(null);
-      frustrationCollector.current?.stop();
-      stopReplay.current?.();
-    };
-  }, [enableReplay, globalInit]);
-  useEffect3(() => {
-    if (globalInit) return;
-    if (!enableFrustration || !autoReportFrustration || !frustrationCollector.current) return;
-    const unsubscribe = frustrationCollector.current.onFrustration(async (event) => {
-      const user2 = resolvedUser;
-      await 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: 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 = Flint3.getInstance();
   const label = buttonLabel ?? t("buttonLabel");
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsxs3(
@@ -1496,10 +1378,8 @@ function WidgetContent({
     open && /* @__PURE__ */ jsx3(
       FlintModal,
       {
-        projectKey,
-        serverUrl,
         user: resolvedUser,
-        meta,
+        meta: config.meta,
         theme,
         zIndex,
         onClose: () => {
@@ -1508,11 +1388,11 @@ function WidgetContent({
           pendingSelection.current = "";
         },
         getEnvironment: 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 ? Flint2.getReplayEvents() : [...replayEvents.current],
-        getExternalReplayUrl,
+        getConsoleLogs: () => global?.console?.getEntries() ?? [],
+        getNetworkErrors: () => global?.network?.getEntries() ?? [],
+        getFormErrors: () => global?.formErrors?.getEntries() ?? [],
+        getReplayEvents: () => Flint3.getReplayEvents(),
+        getExternalReplayUrl: () => Flint3.getExternalReplayUrl(),
         initialSelection: pendingSelection.current,
         enableScreenshot,
         enableTextIssues,
@@ -1564,9 +1444,8 @@ function SparkIcon2() {
   );
 }
 export {
-  Flint,
+  Flint2 as Flint,
   FlintModal,
-  FlintWidget,
-  flint
+  FlintWidget
 };
 //# sourceMappingURL=index.js.map