diff --git a/package.json b/package.json index 14ef3656..a6a9d970 100644 --- a/package.json +++ b/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", diff --git a/packages/browser-sdk/eslint.config.js b/packages/browser-sdk/eslint.config.js index 75295e2d..53da33e1 100644 --- a/packages/browser-sdk/eslint.config.js +++ b/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/"] }, +]; diff --git a/packages/browser-sdk/package.json b/packages/browser-sdk/package.json index 9757176a..a2cf813b 100644 --- a/packages/browser-sdk/package.json +++ b/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", diff --git a/packages/browser-sdk/src/feature/featureCache.ts b/packages/browser-sdk/src/feature/featureCache.ts index 70f26159..7e851f22 100644 --- a/packages/browser-sdk/src/feature/featureCache.ts +++ b/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; diff --git a/packages/browser-sdk/src/feature/features.ts b/packages/browser-sdk/src/feature/features.ts index 27a8e814..75bc696a 100644 --- a/packages/browser-sdk/src/feature/features.ts +++ b/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 } diff --git a/packages/browser-sdk/src/feedback/promptStorage.ts b/packages/browser-sdk/src/feedback/promptStorage.ts index bea0ed9d..905e9da0 100644 --- a/packages/browser-sdk/src/feedback/promptStorage.ts +++ b/packages/browser-sdk/src/feedback/promptStorage.ts @@ -51,7 +51,7 @@ export const getAuthToken = (userId: string) => { channel, token, }; - } catch (e) { + } catch { return undefined; } }; diff --git a/packages/browser-sdk/src/feedback/ui/Button.css b/packages/browser-sdk/src/feedback/ui/Button.css index acf690f3..859a662e 100644 --- a/packages/browser-sdk/src/feedback/ui/Button.css +++ b/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 { diff --git a/packages/browser-sdk/src/feedback/ui/FeedbackDialog.tsx b/packages/browser-sdk/src/feedback/ui/FeedbackDialog.tsx index 2893ebbe..f551045f 100644 --- a/packages/browser-sdk/src/feedback/ui/FeedbackDialog.tsx +++ b/packages/browser-sdk/src/feedback/ui/FeedbackDialog.tsx @@ -41,12 +41,20 @@ export const FeedbackDialog: FunctionComponent = ({ "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) => { 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 = ({ 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 = ({ return ( <> - + + +