Upgrade ESLint and Prettier

package.json

@@ -24,7 +24,7 @@
   "packageManager": "yarn@4.1.1",
   "devDependencies": {
     "lerna": "^8.1.3",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.2",
     "typedoc": "0.27.6",
     "typedoc-plugin-frontmatter": "^1.1.2",
     "typedoc-plugin-markdown": "^4.4.2",

packages/browser-sdk/eslint.config.js

@@ -1,3 +1,23 @@
-const base = require("@bucketco/eslint-config/base");
+const base = require("@bucketco/eslint-config");
 
-module.exports = [...base, { ignores: ["dist/", "example/"] }];
+module.exports = [
+  ...base,
+  {
+    // Preact projects
+    files: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
+    settings: {
+      react: {
+        // We only care about marking h() as being a used variable.
+        pragma: "h",
+        // We use "react 16.0" to avoid pushing folks to UNSAFE_ methods.
+        version: "16.0",
+      },
+    },
+    rules: {
+      // Ignore React attributes that are not valid in Preact.
+      // Alternatively, we could use the preact/compat alias or turn off the rule.
+      "react/no-unknown-property": ["off"],
+    },
+  },
+  { ignores: ["dist/", "example/"] },
+];

packages/browser-sdk/package.json

@@ -47,15 +47,17 @@
     "@playwright/test": "^1.49.1",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.12.0",
-    "css-loader": "^6.9.0",
-    "eslint": "^8.57.0",
+    "@vitest/coverage-v8": "^2.0.4",
+    "c8": "~10.1.3",
+    "eslint": "^9.21.0",
+    "http-server": "^14.1.1",
     "jsdom": "^24.1.0",
     "msw": "^2.3.4",
     "nock": "^14.0.1",
     "postcss": "^8.4.33",
     "postcss-nesting": "^12.0.2",
     "postcss-preset-env": "^9.3.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.5.2",
     "typescript": "^5.7.3",
     "vite": "^5.3.5",
     "vite-plugin-dts": "^4.0.0-beta.1",

packages/browser-sdk/src/feature/featureCache.ts

@@ -88,7 +88,7 @@ export class FeatureCache {
       if (cachedResponseRaw) {
         cacheData = validateCacheData(JSON.parse(cachedResponseRaw)) ?? {};
       }
-    } catch (e) {
+    } catch {
       // ignore errors
     }
 
@@ -123,7 +123,7 @@ export class FeatureCache {
           };
         }
       }
-    } catch (e) {
+    } catch {
       // ignore errors
     }
     return;

packages/browser-sdk/src/feature/features.ts

@@ -331,7 +331,7 @@ export class FeaturesClient {
         let errorBody = null;
         try {
           errorBody = await res.json();
-        } catch (e) {
+        } catch {
           // ignore
         }
 

packages/browser-sdk/src/feedback/promptStorage.ts

@@ -51,7 +51,7 @@ export const getAuthToken = (userId: string) => {
       channel,
       token,
     };
-  } catch (e) {
+  } catch {
     return undefined;
   }
 };

packages/browser-sdk/src/feedback/ui/Button.css

@@ -21,8 +21,8 @@
     0 1px 1px 0 rgba(0, 0, 0, 0.01);
   border-radius: var(--bucket-feedback-dialog-border-radius, 6px);
   transition-duration: 200ms;
-  transition-property: background-color, border-color, color, opacity,
-    box-shadow, transform;
+  transition-property:
+    background-color, border-color, color, opacity, box-shadow, transform;
 
   &.primary {
     background-color: var(
@@ -40,8 +40,8 @@
     border-color: var(--bucket-feedback-dialog-primary-border-color, #d8d9df);
 
     transition-duration: 200ms;
-    transition-property: background-color, border-color, color, opacity,
-      box-shadow, transform;
+    transition-property:
+      background-color, border-color, color, opacity, box-shadow, transform;
   }
 
   &:focus {

packages/browser-sdk/src/feedback/ui/FeedbackDialog.tsx

@@ -41,12 +41,20 @@ export const FeedbackDialog: FunctionComponent<FeedbackDialogProps> = ({
     "idle" | "submitting" | "submitted"
   >("idle");
 
+  const { isOpen, close } = useDialog({ onClose, initialValue: true });
+
+  const autoClose = useTimer({
+    enabled: position.type === "DIALOG",
+    initialDuration: INACTIVE_DURATION_MS,
+    onEnd: close,
+  });
+
   const submit = useCallback(
     async (data: Omit<FeedbackSubmission, "feedbackId">) => {
       await onSubmit({ ...data, feedbackId });
       autoClose.startWithDuration(SUCCESS_DURATION_MS);
     },
-    [feedbackId, onSubmit],
+    [autoClose, feedbackId, onSubmit],
   );
 
   const submitScore = useCallback(
@@ -59,17 +67,8 @@ export const FeedbackDialog: FunctionComponent<FeedbackDialogProps> = ({
         setScoreState("submitted");
       }
     },
-    [feedbackId, onSubmit],
+    [feedbackId, onScoreSubmit],
   );
-
-  const { isOpen, close } = useDialog({ onClose, initialValue: true });
-
-  const autoClose = useTimer({
-    enabled: position.type === "DIALOG",
-    initialDuration: INACTIVE_DURATION_MS,
-    onEnd: close,
-  });
-
   const dismiss = useCallback(() => {
     autoClose.stop();
     close();
@@ -78,25 +77,25 @@ export const FeedbackDialog: FunctionComponent<FeedbackDialogProps> = ({
 
   return (
     <>
-      <style dangerouslySetInnerHTML={{ __html: styles }}></style>
+      <style dangerouslySetInnerHTML={{ __html: styles }} />
       <Dialog
-        isOpen={isOpen}
-        containerId={feedbackContainerId}
         key={key}
-        position={position}
         close={close}
+        containerId={feedbackContainerId}
+        isOpen={isOpen}
+        position={position}
         onDismiss={onDismiss}
       >
         <>
           <FeedbackForm
-            t={{ ...DEFAULT_TRANSLATIONS, ...translations }}
             key={key}
-            question={title}
             openWithCommentVisible={openWithCommentVisible}
-            onSubmit={submit}
-            onScoreSubmit={submitScore}
+            question={title}
             scoreState={scoreState}
+            t={{ ...DEFAULT_TRANSLATIONS, ...translations }}
             onInteraction={autoClose.stop}
+            onScoreSubmit={submitScore}
+            onSubmit={submit}
           />
 
           <button class="close" onClick={dismiss}>

packages/browser-sdk/src/feedback/ui/FeedbackForm.tsx

@@ -153,35 +153,35 @@ export const FeedbackForm: FunctionComponent<FeedbackFormProps> = ({
   return (
     <div ref={containerRef} class="container">
       <div ref={submittedRef} class="submitted">
-        <div className="submitted-check">
-          <CheckCircle width={24} height={24} />
+        <div class="submitted-check">
+          <CheckCircle height={24} width={24} />
         </div>
-        <p className="text">{t.SuccessMessage}</p>
+        <p class="text">{t.SuccessMessage}</p>
         <Plug />
       </div>
       {showForm && (
         <form
           ref={formRef}
-          onSubmit={handleSubmit}
-          method="dialog"
           class="form"
+          method="dialog"
+          style={{ opacity: 1 }}
+          onClick={onInteraction}
           onFocus={onInteraction}
           onFocusCapture={onInteraction}
-          onClick={onInteraction}
-          style={{ opacity: 1 }}
+          onSubmit={handleSubmit}
         >
           <div
             ref={headerRef}
-            role="group"
-            class="form-control"
             aria-labelledby="bucket-feedback-score-label"
+            class="form-control"
+            role="group"
           >
-            <div id="bucket-feedback-score-label" class="title">
+            <div class="title" id="bucket-feedback-score-label">
               {question}
             </div>
             <StarRating
-              t={t}
               name="score"
+              t={t}
               onChange={async (e) => {
                 setHasRating(true);
                 await onScoreSubmit({
@@ -191,14 +191,14 @@ export const FeedbackForm: FunctionComponent<FeedbackFormProps> = ({
               }}
             />
 
-            <ScoreStatus t={t} scoreState={scoreState} />
+            <ScoreStatus scoreState={scoreState} t={t} />
           </div>
 
           <div ref={expandedContentRef} class="form-expanded-content">
             <div class="form-control">
               <textarea
-                id="bucket-feedback-comment-label"
                 class="textarea"
+                id="bucket-feedback-comment-label"
                 name="comment"
                 placeholder={t.QuestionPlaceholder}
                 rows={4}
@@ -208,12 +208,12 @@ export const FeedbackForm: FunctionComponent<FeedbackFormProps> = ({
             {error && <p class="error">{error}</p>}
 
             <Button
-              type="submit"
               disabled={
                 !hasRating ||
                 status === "submitting" ||
                 scoreState === "submitting"
               }
+              type="submit"
             >
               {t.SendButton}
             </Button>
@@ -265,17 +265,17 @@ const ScoreStatus: FunctionComponent<{
   const showSubmitted = scoreState === "submitted" || hasBeenSubmitted;
 
   return (
-    <div className="score-status-container">
-      <span className="score-status" style={{ opacity: showIdle ? 1 : 0 }}>
+    <div class="score-status-container">
+      <span class="score-status" style={{ opacity: showIdle ? 1 : 0 }}>
         {t.ScoreStatusDescription}
       </span>
 
-      <div className="score-status" style={{ opacity: showLoading ? 1 : 0 }}>
+      <div class="score-status" style={{ opacity: showLoading ? 1 : 0 }}>
         {t.ScoreStatusLoading}
       </div>
 
-      <span className="score-status" style={{ opacity: showSubmitted ? 1 : 0 }}>
-        <Check width={14} height={14} style={{ marginRight: 3 }} />{" "}
+      <span class="score-status" style={{ opacity: showSubmitted ? 1 : 0 }}>
+        <Check height={14} style={{ marginRight: 3 }} width={14} />{" "}
         {t.ScoreStatusReceived}
       </span>
     </div>

packages/browser-sdk/src/feedback/ui/Plug.tsx

@@ -5,7 +5,7 @@ import { Logo } from "../../ui/icons/Logo";
 export const Plug: FunctionComponent = () => {
   return (
     <footer class="plug">
-      <a href="https://bucket.co" target="_blank">
+      <a href="https://bucket.co" rel="noreferrer" target="_blank">
         Powered by <Logo height="10px" width="10px" /> Bucket
       </a>
     </footer>

packages/browser-sdk/src/feedback/ui/RadialProgress.tsx

@@ -10,15 +10,15 @@ export const RadialProgress: FunctionComponent<{
   const filled = circumference * progress;
 
   return (
-    <svg className="radial-progress" width={diameter} height={diameter}>
+    <svg class="radial-progress" height={diameter} width={diameter}>
       <circle
-        fill="transparent"
         cx={radius + stroke}
         cy={radius + stroke}
+        fill="transparent"
         r={radius}
-        stroke-width={stroke}
         stroke-dasharray={circumference}
         stroke-dashoffset={filled}
+        stroke-width={stroke}
         transform={`rotate(-90) translate(-${radius * 2 + stroke * 2} 0)`}
       />
     </svg>

packages/browser-sdk/src/feedback/ui/StarRating.tsx

@@ -95,11 +95,12 @@ export const StarRating: FunctionComponent<StarRatingProps> = ({
       <div class="star-rating-icons">
         {scores.map((score) => (
           <Score
+            key={score.value}
             isSelected={score.value === selectedValue}
             name={name}
-            onChange={onChange}
             score={score}
             t={t}
+            onChange={onChange}
           />
         ))}
       </div>
@@ -134,19 +135,19 @@ const Score = ({
   return (
     <>
       <input
+        defaultChecked={isSelected}
         id={`bucket-feedback-score-${score.value}`}
-        type="radio"
         name={name}
+        type="radio"
         value={score.value}
-        defaultChecked={isSelected}
         onChange={onChange}
       />
       <label
         ref={refs.setReference}
-        for={`bucket-feedback-score-${score.value}`}
+        aria-label={score.getLabel(t)}
         class="button"
+        for={`bucket-feedback-score-${score.value}`}
         style={{ color: score.color }}
-        aria-label={score.getLabel(t)}
       >
         <div
           style={{
@@ -178,7 +179,7 @@ const Score = ({
                 ? `${middlewareData.arrow.y}px`
                 : "",
           }}
-        ></div>
+        />
       </div>
     </>
   );

packages/browser-sdk/src/feedback/ui/hooks/useTimer.ts

@@ -38,7 +38,7 @@ export const useTimer = ({
     return () => {
       clearTimeout(t);
     };
-  }, [stopped]);
+  }, [duration, onEnd, startTime, stopped]);
 
   const stop = useCallback(() => {
     setStopped(true);

packages/browser-sdk/src/toolbar/Features.css

@@ -15,7 +15,8 @@
     width: 8px;
     height: 8px;
     margin-left: 10px;
-    background: linear-gradient(
+    background:
+      linear-gradient(
         45deg,
         rgba(0, 0, 0, 0) 0%,
         rgba(0, 0, 0, 0) 43%,