@diegotsi/flint-react 1.0.1 → 1.2.0

package/dist/index.cjs

@@ -30,9 +30,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Flint: () => import_flint_core9.Flint,
   FlintModal: () => FlintModal,
   FlintWidget: () => FlintWidget,
-  flint: () => import_core8.flint
+  flint: () => import_flint_core9.flint
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -41,7 +42,7 @@ var import_react2 = require("react");
 var import_react_i18next = require("react-i18next");
 
 // src/api.ts
-var import_core = require("@flint/core");
+var import_flint_core = require("@diegotsi/flint-core");
 
 // src/ScreenAnnotator.tsx
 var import_modern_screenshot = require("modern-screenshot");
@@ -186,7 +187,7 @@ function ScreenAnnotator({ zIndex, onCapture, onCancel }) {
 }
 
 // src/theme.ts
-var import_core2 = require("@flint/core");
+var import_flint_core2 = require("@diegotsi/flint-core");
 
 // src/FlintModal.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -244,6 +245,7 @@ function FlintModal({
   getEnvironment,
   getConsoleLogs,
   getNetworkErrors,
+  getFormErrors,
   getReplayEvents,
   getExternalReplayUrl,
   initialSelection = "",
@@ -254,7 +256,7 @@ function FlintModal({
   onError
 }) {
   const { t } = (0, import_react_i18next.useTranslation)();
-  const colors = (0, import_core2.resolveTheme)(theme);
+  const colors = (0, import_flint_core2.resolveTheme)(theme);
   const isDark = theme === "dark";
   const [severity, setSeverity] = (0, import_react2.useState)("P2");
   const [description, setDescription] = (0, import_react2.useState)("");
@@ -302,7 +304,8 @@ function FlintModal({
       ...meta,
       environment: getEnvironment(),
       consoleLogs: getConsoleLogs(),
-      networkErrors: getNetworkErrors()
+      networkErrors: getNetworkErrors(),
+      formErrors: getFormErrors()
     };
     if (isText) {
       collectedMeta.textIssue = {
@@ -331,13 +334,13 @@ function FlintModal({
       }
     }
     try {
-      const res = await (0, import_core.submitReport)(serverUrl, projectKey, payload, !isText ? screenshot ?? void 0 : void 0);
+      const res = await (0, import_flint_core.submitReport)(serverUrl, projectKey, payload, !isText ? screenshot ?? void 0 : void 0);
       setResult(res);
       setStatus("success");
       onSuccess?.(res);
       const events = getReplayEvents();
       if (events.length > 0) {
-        (0, import_core.submitReplay)(serverUrl, projectKey, res.id, events).catch(() => {
+        (0, import_flint_core.submitReplay)(serverUrl, projectKey, res.id, events).catch(() => {
         });
       }
     } catch (err) {
@@ -1177,20 +1180,24 @@ function CheckIcon({ size = 20 }) {
 }
 
 // src/FlintWidget.tsx
+var import_flint_core10 = require("@diegotsi/flint-core");
 var import_react4 = require("react");
 var import_react_i18next3 = require("react-i18next");
 
 // src/collectors/console.ts
-var import_core3 = require("@flint/core");
+var import_flint_core3 = require("@diegotsi/flint-core");
 
 // src/collectors/environment.ts
-var import_core4 = require("@flint/core");
+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_core5 = require("@flint/core");
+var import_flint_core6 = require("@diegotsi/flint-core");
 
 // src/collectors/network.ts
-var import_core6 = require("@flint/core");
+var import_flint_core7 = require("@diegotsi/flint-core");
 
 // src/i18n/index.ts
 var import_i18next = require("i18next");
@@ -1242,11 +1249,11 @@ widgetI18n.use(import_react_i18next2.initReactI18next).init({
 var i18n_default = widgetI18n;
 
 // src/store.ts
-var import_core7 = require("@flint/core");
+var import_flint_core8 = require("@diegotsi/flint-core");
 var import_react3 = require("react");
-var import_core8 = require("@flint/core");
+var import_flint_core9 = require("@diegotsi/flint-core");
 function useFlintStore() {
-  return (0, import_react3.useSyncExternalStore)(import_core7.subscribe, import_core7.getSnapshot);
+  return (0, import_react3.useSyncExternalStore)(import_flint_core8.subscribe, import_flint_core8.getSnapshot);
 }
 
 // src/FlintWidget.tsx
@@ -1274,6 +1281,7 @@ function WidgetContent({
   enableScreenshot = true,
   enableConsole = true,
   enableNetwork = true,
+  enableFormErrors = true,
   enableFrustration = false,
   autoReportFrustration = false,
   onBeforeSubmit,
@@ -1308,7 +1316,7 @@ function WidgetContent({
   const [open, setOpen] = (0, import_react4.useState)(false);
   const [hovered, setHovered] = (0, import_react4.useState)(false);
   const pendingSelection = (0, import_react4.useRef)("");
-  const colors = (0, import_core2.resolveTheme)(theme);
+  const colors = (0, import_flint_core2.resolveTheme)(theme);
   const [selectionTooltip, setSelectionTooltip] = (0, import_react4.useState)(null);
   const tooltipRef = (0, import_react4.useRef)(null);
   const triggerRef = (0, import_react4.useRef)(null);
@@ -1351,31 +1359,42 @@ 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);
-  if (enableConsole && !consoleCollector.current) {
-    consoleCollector.current = (0, import_core3.createConsoleCollector)();
-    consoleCollector.current.start();
-  }
-  if (enableNetwork && !networkCollector.current) {
-    const flintHost = (() => {
-      try {
-        return new URL(serverUrl).hostname;
-      } catch {
-        return "";
-      }
-    })();
-    networkCollector.current = (0, import_core6.createNetworkCollector)(flintHost ? [flintHost] : []);
-    networkCollector.current.start();
-  }
+  const formErrorCollector = (0, import_react4.useRef)(null);
   const frustrationCollector = (0, import_react4.useRef)(null);
-  if (enableFrustration && !frustrationCollector.current) {
-    frustrationCollector.current = (0, import_core5.createFrustrationCollector)();
-    frustrationCollector.current.start();
+  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();
+    }
   }
   (0, import_react4.useEffect)(() => {
+    if (globalInit) return;
     let cancelled = false;
     if (enableReplay) {
       import("rrweb").then(({ record }) => {
@@ -1396,15 +1415,18 @@ function WidgetContent({
       cancelled = true;
       consoleCollector.current?.stop();
       networkCollector.current?.stop();
+      formErrorCollector.current?.stop();
+      (0, import_flint_core9._setFormErrorCollector)(null);
       frustrationCollector.current?.stop();
       stopReplay.current?.();
     };
-  }, [enableReplay]);
+  }, [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_core.submitReport)(serverUrl, projectKey, {
+      await (0, import_flint_core.submitReport)(serverUrl, projectKey, {
         reporterId: user2?.id ?? "anonymous",
         reporterName: user2?.name ?? "Anonymous",
         reporterEmail: user2?.email,
@@ -1412,16 +1434,17 @@ function WidgetContent({
         severity: event.type === "error_loop" ? "P1" : event.type === "rage_click" ? "P2" : "P3",
         url: event.url,
         meta: {
-          environment: (0, import_core4.collectEnvironment)(),
+          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]);
+  }, [enableFrustration, autoReportFrustration, globalInit]);
   const label = buttonLabel ?? t("buttonLabel");
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -1518,10 +1541,11 @@ function WidgetContent({
           onClose?.();
           pendingSelection.current = "";
         },
-        getEnvironment: import_core4.collectEnvironment,
-        getConsoleLogs: () => consoleCollector.current?.getEntries() ?? [],
-        getNetworkErrors: () => networkCollector.current?.getEntries() ?? [],
-        getReplayEvents: () => [...replayEvents.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,
         initialSelection: pendingSelection.current,
         enableScreenshot,
@@ -1574,6 +1598,7 @@ function SparkIcon2() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Flint,
   FlintModal,
   FlintWidget,
   flint