upstream

[willymwai]

PR Type

Enhancement, Tests, Bug fix, Configuration changes

---

Description

• Major enhancements to comment, notification, and CMS row management logic, including improved notification grouping, new notification types, and better error handling for CMS operations.

• Added a new HTML parser for the web importer, supporting style extraction, CSS parsing, and DOM traversal with style inheritance and sanitization.

• Refactored loader bundler to remove Rollup support and use esbuild exclusively, with added support for the "tanstack" platform and improved error handling.

• Enhanced code component prop type validation and custom function registration, improving type safety and code generation.

• Added support for TanStack Router and server query integration in React code generation.

• Extensive expansion and modernization of test coverage:

  • Comprehensive Playwright and Cypress test suites for React Aria components, auto-open functionality, Plexus installation, and multiple interaction conflicts.
  • Major refactor and expansion of comment notification tests and utilities, including new edge cases and notification types.
  • Expanded and modernized tests for comment notification email grouping and content.
  • Refactored and improved reliability of existing Cypress tests, including better setup/teardown and utility functions.
  • Updated tests to match new APIs and function signatures.

• Fixed import path for Analytics types in AmplitudeAnalytics.

• Added .npmignore to exclude internal README from the rive package.

• Organized and expanded imports in SlotUtils for better code clarity.

---

Changes walkthrough 📝

	Relevant files
Tests	10 files send-comments-notifications.spec.ts Major refactor and expansion of comment notification tests and utilities platform/wab/src/wab/server/scripts/send-comments-notifications.spec.ts Refactored test utility functions for comments, thread status, and reactions (renamed and enhanced). Replaced legacy notification structure assertions with new, more explicit notification map structures using createNotification. Added comprehensive new test cases for notifications, including reactions, thread resolution, mentions, and notification preferences. Improved test coverage for edge cases (e.g., self-mentions, reaction removals, combined notifications). Updated test assertions to match new notification logic and data structures. +1842/-393 nextjs-plasmic-react-aria.spec.ts Add Playwright tests for React Aria code components in Next.js platform/loader-tests/src/playwright-tests/nextjs/nextjs-plasmic-react-aria.spec.ts Added a comprehensive Playwright test suite for @plasmicpkgs/react-aria code components in Next.js loader projects. Implemented detailed state and interaction checks for various components (Button, Checkbox, Radio, Switch, Text Field, Select, Dialogs, Slider, etc.). Introduced utility classes (StateChecker, LeafElementStateChecker) for reusable, fine-grained state assertions. Included visual and accessibility state checks, keyboard navigation, and variant toggling. [link]    multiple-interactions-with-conflicts.spec.ts Add tests for multiple interaction conflicts in site diffs platform/wab/src/wab/shared/site-diffs/tests/multiple-interactions-with-conflicts.spec.ts Added a new test suite to verify detection and resolution of conflicts involving multiple interactions in site diffs. Tests both conflict detection and correct merging after conflict resolution. Validates the structure and correctness of merged event handlers and interactions. +131/-0  auto-open.spec.ts Add comprehensive Cypress tests for auto-open feature        platform/wab/cypress/e2e/auto-open.spec.ts Added a comprehensive new Cypress test suite for auto-open functionality. Tests cover code components, Plasmic components, nested/nesting scenarios, and various visibility states. Includes utility functions for asserting auto-opened/hidden states and simulating user interactions. Covers undo functionality, multi-selection, and interaction with live/interactive modes. +799/-0  tutorial.spec.ts Refactor tutorial Cypress test for better setup/teardown  platform/wab/cypress/e2e/tutorial.spec.ts Refactored tutorial test to use beforeEach/afterEach for dev flags and project setup/teardown. Ensured dev flags are reset after test completion. Improved test reliability by cleaning up projects before and after tests. No changes to the core tutorial steps, but improved test hygiene and isolation. +338/-348 host-app.spec.ts Refactor host-app Cypress test to use new utility                platform/wab/cypress/e2e/host-app.spec.ts Refactored test utility usage to use configureProjectAppHost instead of configureProject. Ensured consistent usage of the new utility for all host configuration steps. No changes to test logic, only to helper function usage. +7/-30    plexus-installation.spec.ts Add Cypress E2E tests for Plexus component installation workflows platform/wab/cypress/e2e/plexus-installation.spec.ts Added a comprehensive Cypress E2E test suite for Plexus component installation. Tests standalone and installable Plexus components, including drag-and-drop, "Install All", and undo functionality. Verifies project panel state, default components, project dependencies, and style tokens after installation and undo. Includes utility functions and assertions for component presence, dependencies, and project state. +609/-0  util.ts Extend Cypress test utilities for project panel, props, variants, and UI control platform/wab/cypress/support/util.ts Added numerous utility functions for Cypress tests, including project panel, component prop, variant, and visibility helpers. Enhanced functions for interacting with the UI, such as toggling modes, handling frames, and managing undo/redo. Improved project panel and prop manipulation, including new helpers for counting components/arenas and configuring app host. Added functions for handling auto-open banners, style tokens tab, and more robust element/variant interactions. +322/-40 comment-notification-email.spec.ts Expand and modernize tests for comment notification email grouping and content platform/wab/src/wab/server/emails/comment-notification-email.spec.ts Rewrote and expanded tests for sendUserNotificationEmail to cover multiple notification scenarios. Added tests for grouping notifications by project, multiple notifications, multiple projects, and multiple branches. Utilized real project/user setup and notification creation for more realistic test coverage. Improved HTML normalization and assertions for email content and properties. +568/-105 prefill-cloudfront.spec.ts Update test for prefill-cloudfront to match new publishment API signature platform/wab/src/wab/server/workers/prefill-cloudfront.spec.ts Updated test to remove minLoaderVersion argument from getRecentLoaderPublishmentsMock call. Ensured test reflects updated function signature. +1/-6
Enhancement	6 files DbMgr.ts Major enhancements to comment, notification, and CMS row management logic platform/wab/src/wab/server/db/DbMgr.ts Refactored and enhanced comment, thread, and reaction management, including notification tracking and update logic. Improved unique field checking for CMS rows, including new error handling for unique constraint violations. Updated project and workspace creation logic, including default access levels and removal of deprecated fields. Added new helper functions and improved ID stamping for entities, supporting explicit IDs and short UUIDs. Adjusted permissions checks and access levels for various operations. Enhanced methods to support new notification and comment history features. Added Sentry logging for large query results. Improved handling of auto-open and visibility for CMS and comment-related entities. +355/-110 html-parser.ts Add HTML parser for web importer with style extraction      platform/wab/src/wab/client/web-importer/html-parser.ts Added a new HTML parser module for the web importer, including style extraction, CSS parsing, and DOM traversal. Implements logic to convert HTML/CSS into a structured tree with style inheritance, sanitization, and variable resolution. Handles special cases for containers, SVG, text, and component nodes. Provides utility functions for CSS value normalization and style safety checks. +852/-0  module-bundler.ts Remove Rollup, refactor loader bundler to use esbuild only platform/wab/src/wab/server/loader/module-bundler.ts Removed deprecated Rollup bundling logic, now only supports esbuild for loader bundling. Added support for a new "tanstack" platform in bundle options. Ensured serverQueriesExecFuncFileName is included in component meta. Improved error handling and logging for esbuild bundling failures. Cleaned up imports and removed unused dependencies. +52/-282 send-comments-notifications.ts Refactor and extend comment notification processing for new types and grouping platform/wab/src/wab/server/scripts/send-comments-notifications.ts Refactored notification processing logic to support new notification types (comments, thread histories, reactions). Introduced a Context class to cache and organize thread/comment data for efficient notification grouping. Improved grouping of notifications by user, project, and thread, and enhanced notification filtering logic. Updated email sending and notification marking to use new grouped structures and notification timestamps. Enhanced type safety and modularized helper functions for notification processing. +431/-199 code-components.ts Enhance code component prop type validation and custom function registration platform/wab/src/wab/shared/code-components/code-components.ts Improved type checking for code component prop registrations, including more exhaustive and type-safe checks. Added/updated utility types for prop type extraction and type guards. Enhanced function registration and parameter type mapping for custom functions. Improved handling of className prop updates and variant prop changes. Added/updated helper functions for prop type handling and code generation. +231/-111 index.ts Add TanStack Router support and server query integration to React codegen platform/wab/src/wab/shared/codegen/react-p/index.ts Added support for TanStack Router platform in code generation, including route info and head serialization. Integrated server query handling and RSC metadata into generated modules. Improved handling of className prop inclusion for code components with variants or style sections. Refactored code to support new platform options and improved modularity. +141/-47
Bug fix	1 files AmplitudeAnalytics.ts Fix import path for Analytics types in AmplitudeAnalytics platform/wab/src/wab/shared/observability/AmplitudeAnalytics.ts Fixed import path for Analytics and Properties types to use the correct observability directory. No functional changes, only import correction. +4/-4
Formatting	1 files SlotUtils.ts Organize and expand imports in SlotUtils for slot and Tpl utilities platform/wab/src/wab/shared/SlotUtils.ts Added and reordered imports for new slot and Tpl utility functions. No functional code changes, only import organization. +29/-26
Configuration changes	1 files .npmignore Add .npmignore to exclude internal README from rive package plasmicpkgs/rive/.npmignore Added .npmignore file to exclude README.internal from npm package. +1/-0
Additional files	101 files 01-config-tooling.md +0/-16    README +0/-5      .browserslistrc +0/-16    .editorconfig +0/-16    README.md +0/-27    angular.json +0/-94    3rdpartylicenses.txt +0/-256  index.html +0/-12    main.ef91450b26733d80.js +0/-7360 polyfills.5cf9041adbc6958d.js +0/-2045 runtime.6263bc5acf5b193e.js +0/-64    styles.ef46db3751d8e999.css [link]    karma.conf.js +0/-41    package.json +0/-39    app.component.css [link]    app.component.html +0/-831  app.component.spec.ts +0/-31    app.component.ts +0/-11    app.module.ts +0/-22    .gitkeep [link]    environment.prod.ts +0/-3      environment.ts +0/-16    index.html +0/-13    main.ts +0/-13    polyfills.ts +0/-52    styles.css +0/-1      test.ts +0/-30    tsconfig.app.json +0/-10    tsconfig.json +0/-29    tsconfig.spec.json +0/-10    .eslintrc.json +0/-3      AngularTest.tsx +0/-33    next.config.js +0/-9      ng +0/-1      package.json +0/-25    plasmic-host.tsx +0/-6      test-ng.tsx +0/-5      Home.module.css +0/-129  globals.css +0/-26    tsconfig.json +0/-20    .eslintrc.json +3/-0      README.md +1/-1      next.config.mjs +19/-0    package.json +26/-0    [[...catchall]].tsx +22/-12  hello.ts +1/-1      plasmic-host.tsx +7/-0      plasmic-init.ts +8/-9      Home.module.css +165/-0  globals.css +42/-0    tsconfig.json +34/-0    README.md +0/-46    env.d.ts +0/-1      package.json +0/-32    App.vue +0/-25    base.css +0/-75    main.css +0/-35    HelloWorld.vue +0/-40    TheWelcome.vue +0/-86    WelcomeItem.vue +0/-86    HelloWorld.spec.ts +0/-11    IconCommunity.vue +0/-7      IconDocumentation.vue +0/-7      IconEcosystem.vue +0/-7      IconSupport.vue +0/-7      IconTooling.vue +0/-19    main.ts +0/-14    plasmic-init.ts +0/-15    index.jsx +0/-47    counter.ts +0/-12    AboutView.vue +0/-15    HomeView.vue +0/-9      tsconfig.app.json +0/-12    tsconfig.config.json +0/-8      tsconfig.json +0/-14    tsconfig.vitest.json +0/-9      vite.config.ts +0/-15    knip.ts +58/-0    package.json +9/-3      package.json +1/-1      file-utils.spec.ts +47/-0    export.ts +1/-1      init.ts +51/-4    sync-components.ts +26/-1    sync.ts +3/-3      api.ts +15/-2    code-utils.ts +103/-2  config-utils.ts +22/-2    envdetect.ts +9/-0      file-utils.ts +29/-3    rsc-config.ts +56/-0    gatsby-browser.jsx +2/-1      gatsby-ssr.jsx +2/-1      package.json +4/-4      plasmic.json +14/-8    Button.jsx +1/-3      PlasmicButton.jsx +53/-100 PlasmicDynamicPage.jsx +36/-30  PlasmicGlobalVariant__Screen.jsx +3/-15    PlasmicHomepage.jsx +25/-25  Additional files not shown

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[qodo-code-review]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Error Handling The HTML parser has several places where errors are silently caught or ignored. For example, line 46 has an empty catch block, and there are several places where potentially undefined values are accessed without proper checks. const styleSheetsContent = [...document.styleSheets].map((ss) => { let content = ""; try { content = [...ss.cssRules] .map((cssRule) => { return cssRule.cssText; }) .join("\n"); } catch (e) {} return { Performance Concern The function traverseNodes recursively processes all DOM nodes which could lead to performance issues with large HTML documents. Consider implementing a more efficient traversal method or adding pagination/chunking for large documents. function traverseNodes(node: Node, callback: (node: Node) => void) { if (isElement(node)) { callback(node); // We don't want to traverse the children of a component if ((node as any).__wi_component) { return; } for (let i = 0; i < node.childNodes.length; i++) { traverseNodes(node.childNodes[i], callback); } } } Test Complexity The test file has grown significantly with many similar test cases. Consider refactoring to use parameterized tests or test factories to reduce duplication and improve maintainability. it("should notify user if thread is resolved and user have participated", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { await sudo.updateNotificationSettings(users[2].id, project.id, { notifyAbout: "none", }); // Do not notify at all // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await addComment( userDbs[1](), project.id, user0comment.commentThreadId ); // user 0 resolved his thread which should notify user1 because he has participated const commentThreadResolvedHistoryForUser0Comment = await updatedThreadStatus( userDbs[0](), user0comment.commentThreadId, true ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); // Check if the notificationsByUser structure is correct const expectedNotification: NotificationsByUser = new Map([ [ users[1].id, new Map([ [ project.id, new Map([ [ user0comment.commentThreadId, [ await createNotification( user0comment.commentThreadId, users[1], project, commentThreadResolvedHistoryForUser0Comment.createdAt, { type: "THREAD_HISTORY", history: commentThreadResolvedHistoryForUser0Comment, }, sudo ), ], ], ]), ], ]), ], [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user1Comment.commentThreadId, user0comment.commentThreadId, ]); } ); }); it("should notify user if thread is resolved/unresolved multiple times and user have participated", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await addComment( userDbs[1](), project.id, user0comment.commentThreadId ); // user 0 resolved his thread which should notify user1 because he has participated const commentThreadResolvedHistoryForUser0Comment = await updatedThreadStatus( userDbs[0](), user0comment.commentThreadId, true ); const commentThreadUnResolvedHistoryForUser0Comment = await updatedThreadStatus( userDbs[0](), user0comment.commentThreadId, false ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); // Check if the notificationsByUser structure is correct const expectedNotification: NotificationsByUser = new Map([ [ users[1].id, new Map([ [ project.id, new Map([ [ user0comment.commentThreadId, [ await createNotification( user0comment.commentThreadId, users[1], project, commentThreadResolvedHistoryForUser0Comment.createdAt, { type: "THREAD_HISTORY", history: commentThreadResolvedHistoryForUser0Comment, }, sudo ), await createNotification( user0comment.commentThreadId, users[1], project, commentThreadUnResolvedHistoryForUser0Comment.createdAt, { type: "THREAD_HISTORY", history: commentThreadUnResolvedHistoryForUser0Comment, }, sudo ), ], ], ]), ], ]), ], [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user1Comment.commentThreadId, user0comment.commentThreadId, ]); } ); }); it("should notify user if thread is resolved/unresolved if notification preference is mentions-and-replies", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { await sudo.updateNotificationSettings(users[1].id, project.id, { notifyAbout: "mentions-and-replies", }); // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await addComment( userDbs[1](), project.id, user0comment.commentThreadId ); // user 0 resolved his thread which should notify user1 because he has participated const commentThreadResolvedHistoryForUser0Comment = await updatedThreadStatus( userDbs[0](), user0comment.commentThreadId, true ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); // Check if the notificationsByUser structure is correct const expectedNotification: NotificationsByUser = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], [ users[1].id, new Map([ [ project.id, new Map([ [ user0comment.commentThreadId, [ await createNotification( user0comment.commentThreadId, users[1], project, commentThreadResolvedHistoryForUser0Comment.createdAt, { type: "THREAD_HISTORY", history: commentThreadResolvedHistoryForUser0Comment, }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user1Comment.commentThreadId, user0comment.commentThreadId, ]); } ); }); it("should not notify user if thread is resolved/unresolved by user himself", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await addComment( userDbs[1](), project.id, user0comment.commentThreadId ); // user 1 resolved his thread and user should not be notified const commentThreadResolvedHistoryForUser0Comment = await updatedThreadStatus( userDbs[1](), user1Comment.commentThreadId, true ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); // Check if the notificationsByUser structure is correct const expectedNotification: NotificationsByUser = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user0comment.commentThreadId, user1Comment.commentThreadId, ]); } ); }); it("should notify user if another user react to their comment", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await addComment( userDbs[1](), project.id, user0comment.commentThreadId ); // user 0 reacted to user 1 comment, user 1 should be notified const user0CommentReaction = await reactOnComment( userDbs[0](), user1Comment.id ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); // Check if the notificationsByUser structure is correct const expectedNotification: NotificationsByUser = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], [ users[1].id, new Map([ [ project.id, new Map([ [ user1Comment.commentThreadId, [ await createNotification( user1Comment.commentThreadId, users[1], project, user0CommentReaction.createdAt, { type: "REACTION", reaction: user0CommentReaction, }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user0comment.commentThreadId, user1Comment.commentThreadId, ]); } ); }); it("should not be notified user if reaction is removed", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await addComment( userDbs[1](), project.id, user0comment.commentThreadId ); // user 0 reacted to user 1 comment, user 1 const user0CommentReaction = await reactOnComment( userDbs[0](), user1Comment.id ); // removed the reaction now user should not be notified for this reaction await removeReactionOnComment(userDbs[0](), user0CommentReaction.id); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); // Check if the notificationsByUser structure is correct const expectedNotification: NotificationsByUser = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user0comment.commentThreadId, user1Comment.commentThreadId, ]); } ); }); it("should notify new reaction on old comment", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await addComment( userDbs[1](), project.id, user0comment.commentThreadId ); const { notificationsByUser, recentCommentThreads, notifiedDate } = await processUnnotifiedCommentsNotifications(sudo); // Check if the notificationsByUser structure is correct const expectedNotification: NotificationsByUser = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user1Comment.commentThreadId, user0comment.commentThreadId, ]); // Simulate sending notifications, after which the threads should be marked as notified // You can either mark them as notified in the system or simulate this in your mock logic await sudo.markCommentThreadsAsNotified( [user1Comment.commentThreadId, user0comment.commentThreadId], notifiedDate ); // users are notified now we add a reaction on an old comment, it should only notify for reaction // user 0 reacted to user 1 comment, user 1 const user0CommentReaction = await reactOnComment( userDbs[0](), user1Comment.id ); const { notificationsByUser: notificationsByUser2, recentCommentThreads: recentCommentThreads2, } = await processUnnotifiedCommentsNotifications(sudo); // Check if the notificationsByUser structure is correct const expectedNotification2: NotificationsByUser = new Map([ [ users[1].id, new Map([ [ project.id, new Map([ [ user1Comment.commentThreadId, [ await createNotification( user1Comment.commentThreadId, users[1], project, user0CommentReaction.createdAt, { type: "REACTION", reaction: user0CommentReaction, }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser2).toEqual(expectedNotification2); // Check if the processed threads match the recentThreads expect(recentCommentThreads2).toEqual([user1Comment.commentThreadId]); } ); }); it("should notify reaction and comment combined if both are new", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await addComment( userDbs[1](), project.id, user0comment.commentThreadId ); // user 0 reacted to user 1 comment, user 1 const user0CommentReaction = await reactOnComment( userDbs[0](), user1Comment.id ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); // user 0 for user 1 reply, while user 1 will be notified for user 0 reaction on user 1 comment // Check if the notificationsByUser structure is correct const expectedNotification: NotificationsByUser = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], [ users[1].id, new Map([ [ project.id, new Map([ [ user1Comment.commentThreadId, [ await createNotification( user1Comment.commentThreadId, users[1], project, user0CommentReaction.createdAt, { type: "REACTION", reaction: user0CommentReaction, }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user0comment.commentThreadId, user1Comment.commentThreadId, ]); } ); }); it("should notify for resolving an old thread", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await addComment( userDbs[1](), project.id, user0comment.commentThreadId ); const { notificationsByUser, recentCommentThreads, notifiedDate } = await processUnnotifiedCommentsNotifications(sudo); // Check if the notificationsByUser structure is correct const expectedNotification: NotificationsByUser = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user1Comment.commentThreadId, user0comment.commentThreadId, ]); // Simulate sending notifications, after which the threads should be marked as notified // You can either mark them as notified in the system or simulate this in your mock logic await sudo.markCommentThreadsAsNotified( [user1Comment.commentThreadId, user0comment.commentThreadId], notifiedDate ); // users are notified now we resolved an old thread, it should only notify for thread history // user 0 resolved their thread const user0CommentThreadHistory = await updatedThreadStatus( userDbs[0](), user0comment.commentThreadId, true ); const { notificationsByUser: notificationsByUser2, recentCommentThreads: recentCommentThreads2, } = await processUnnotifiedCommentsNotifications(sudo); // Check if the notificationsByUser structure is correct // only user 1 has participated, user 0 is not notified for it's self thread history updated const expectedNotification2: NotificationsByUser = new Map([ [ users[1].id, new Map([ [ project.id, new Map([ [ user0comment.commentThreadId, [ await createNotification( user0comment.commentThreadId, users[1], project, user0CommentThreadHistory.createdAt, { type: "THREAD_HISTORY", history: user0CommentThreadHistory, }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser2).toEqual(expectedNotification2); // Check if the processed threads match the recentThreads expect(recentCommentThreads2).toEqual([user0comment.commentThreadId]); } ); }); it("should notify thread history and comment combined if both are new", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await addComment( userDbs[1](), project.id, user0comment.commentThreadId ); // user 0 resolved their thread const user0CommentThreadHistory = await updatedThreadStatus( userDbs[0](), user0comment.commentThreadId, true ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); // user 0 and 2 will be notified for user 1 comment, while user 1 will be notified for user 0 reaction on user 1 comment // only user 1 has participated, user 1 will be notified for thread history and comment, user 0 is not notified for it's self thread history updated const expectedNotification: NotificationsByUser = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], [ users[1].id, new Map([ [ project.id, new Map([ [ user0comment.commentThreadId, [ await createNotification( user0comment.commentThreadId, users[1], project, user0CommentThreadHistory.createdAt, { type: "THREAD_HISTORY", history: user0CommentThreadHistory, }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user1Comment.commentThreadId, user0comment.commentThreadId, ]); } ); }); it("should notify user if mentioned", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // user 2 is mentioned so user 2 should be notified // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await userDbs[1]().postCommentInThread( { projectId: project.id }, { body: `@<${users[2].email}> should check`, threadId: user0comment.commentThreadId, id: uuid.v4() as CommentId, } ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); const expectedNotification = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], [ users[2].id, new Map([ [ project.id, new Map([ [ user0comment.commentThreadId, [ // user 2 is mentioned because user was mentioned await createNotification( user0comment.commentThreadId, users[2], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], ]); // Check if the notificationsByUser structure is correct expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user1Comment.commentThreadId, user0comment.commentThreadId, ]); } ); }); it("should not notify if user mentioned self", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // user 1 mentioned self so user 1 should not be notified // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await userDbs[1]().postCommentInThread( { projectId: project.id }, { body: `@<${users[1].email}> should check`, threadId: user0comment.commentThreadId, id: uuid.v4() as CommentId, } ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); const expectedNotification = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], ]); // Check if the notificationsByUser structure is correct expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user1Comment.commentThreadId, user0comment.commentThreadId, ]); } ); }); it("should notify user with 'mentions-and-replies'", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // Set user 2's preference to 'mentions-and-replies' await sudo.updateNotificationSettings(users[2].id, project.id, { notifyAbout: "mentions-and-replies", }); // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // user 2 is mentioned so user 2 should be notified // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await userDbs[1]().postCommentInThread( { projectId: project.id }, { body: `@<${users[2].email}> should check`, threadId: user0comment.commentThreadId, id: uuid.v4() as CommentId, } ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); const expectedNotification = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], [ users[2].id, new Map([ [ project.id, new Map([ [ user0comment.commentThreadId, [ // user 2 is mentioned because user was mentioned await createNotification( user0comment.commentThreadId, users[2], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], ]); // Check if the notificationsByUser structure is correct expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user1Comment.commentThreadId, user0comment.commentThreadId, ]); } ); }); it("should not notify user if mentioned without preceding @", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // user 2 is mentioned but without preceding @ so user 2 should not be notified // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await userDbs[1]().postCommentInThread( { projectId: project.id }, { body: `<${users[2].email}> should check`, threadId: user0comment.commentThreadId, id: uuid.v4() as CommentId, } ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); const expectedNotification = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], ]); // Check if the notificationsByUser structure is correct expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user1Comment.commentThreadId, user0comment.commentThreadId, ]); } ); }); it("should notify user for all recent notifications with 'all' notification preference", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // Set user 0's preference to 'all' await sudo.updateNotificationSettings(users[0].id, project.id, { notifyAbout: "all", }); // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // user 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // user 2 reply to user 1 comment const user2Reply = await addComment( userDbs[2](), project.id, user1Comment.commentThreadId ); // user 2 mentioned user 1 const user2MentionUser1 = await userDbs[2]().postCommentInThread( { projectId: project.id }, { body: `@<${users[1].email}> should check`, threadId: user0comment.commentThreadId, id: uuid.v4() as CommentId, } ); // user 2 resolved a thread that user has participated const commentThreadUnResolvedHistoryForUser1Comment = await updatedThreadStatus( userDbs[2](), user1Comment.commentThreadId, false ); // user 1 reacted to user 0 comment const user1Reaction = await reactOnComment( userDbs[1](), user0comment.id ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); const expectedNotification = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1Comment.commentThreadId, [ await createNotification( user1Comment.commentThreadId, users[0], project, user1Comment.createdAt, { type: "COMMENT", comment: user1Comment }, sudo ), await createNotification( user2Reply.commentThreadId, users[0], project, user2Reply.createdAt, { type: "COMMENT", comment: user2Reply }, sudo ), await createNotification( commentThreadUnResolvedHistoryForUser1Comment.commentThreadId, users[0], project, commentThreadUnResolvedHistoryForUser1Comment.createdAt, { type: "THREAD_HISTORY", history: commentThreadUnResolvedHistoryForUser1Comment, }, sudo ), ], ], [ user0comment.commentThreadId, [ await createNotification( user0comment.commentThreadId, users[0], project, user2MentionUser1.createdAt, { type: "COMMENT", comment: user2MentionUser1, }, sudo ), await createNotification( user0comment.commentThreadId, users[0], project, user1Reaction.createdAt, { type: "REACTION", reaction: user1Reaction }, sudo ), ], ], ]), ], ]), ], [ users[1].id, new Map([ [ project.id, new Map([ [ user2Reply.commentThreadId, [ await createNotification( user2Reply.commentThreadId, users[1], project, user2Reply.createdAt, { type: "COMMENT", comment: user2Reply }, sudo ), await createNotification( commentThreadUnResolvedHistoryForUser1Comment.commentThreadId, users[1], project, commentThreadUnResolvedHistoryForUser1Comment.createdAt, { type: "THREAD_HISTORY", history: commentThreadUnResolvedHistoryForUser1Comment, }, sudo ), ], ], [ user2MentionUser1.commentThreadId, [ await createNotification( user2MentionUser1.commentThreadId, users[1], project, user2MentionUser1.createdAt, { type: "COMMENT", comment: user2MentionUser1 }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user1Comment.commentThreadId, user0comment.commentThreadId, ]); } ); }); it("should not notify user if reacted to self comment", async () => { await withEndUserNotificationSetup( async ({ sudo, users, project, userDbs }) => { // user 0 comment const user0comment = await addComment(userDbs[0](), project.id); // User 1 comment const user1Comment = await addComment(userDbs[1](), project.id); // User 1 reply to user 0 comment const user1ReplyToUser0Comment = await addComment( userDbs[1](), project.id, user0comment.commentThreadId ); // user 0 reacted to self comment, user 0 should not be notified const user0CommentReaction = await reactOnComment( userDbs[0](), user0comment.id ); // user 0 reacted to user 1 comment, user 1 should be notified const user1CommentReaction = await reactOnComment( userDbs[0](), user1Comment.id ); const { notificationsByUser, recentCommentThreads } = await processUnnotifiedCommentsNotifications(sudo); // Check if the notificationsByUser structure is correct // user 1 not be notified of self reaction const expectedNotification: NotificationsByUser = new Map([ [ users[0].id, new Map([ [ project.id, new Map([ [ user1ReplyToUser0Comment.commentThreadId, [ await createNotification( user1ReplyToUser0Comment.commentThreadId, users[0], project, user1ReplyToUser0Comment.createdAt, { type: "COMMENT", comment: user1ReplyToUser0Comment }, sudo ), ], ], ]), ], ]), ], [ users[1].id, new Map([ [ project.id, new Map([ [ user1Comment.commentThreadId, [ await createNotification( user1Comment.commentThreadId, users[1], project, user1CommentReaction.createdAt, { type: "REACTION", reaction: user1CommentReaction }, sudo ), ], ], ]), ], ]), ], ]); expect(notificationsByUser).toEqual(expectedNotification); // Check if the processed threads match the recentThreads expect(recentCommentThreads).toEqual([ user0comment.commentThreadId, user1Comment.commentThreadId, ]); } ); }); });

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix CSS value parsing The style parsing logic fails when CSS values contain colons (e.g., in URLs or data URIs). The current implementation splits on the first colon, which breaks values like "background-image: url(http://example.com)". platform/wab/src/wab/client/web-importer/html-parser.ts [142-151] function addSelfStyleRule(_node: Node) { if (!isElement(_node)) { return; } const cssText = (_node as HTMLElement).style.cssText; if (!cssText) { return; } const styles = cssText.split(";").reduce((acc, style) => { - const [key, value] = style.split(":"); + if (!style.trim()) { + return acc; + } + const colonIndex = style.indexOf(":"); + if (colonIndex === -1) { + console.log("Invalid style", style); + return acc; + } + const key = style.substring(0, colonIndex).trim(); + const value = style.substring(colonIndex + 1).trim(); if (!key || !value) { console.log("Invalid style", style); return acc; } - acc[key.trim()] = value.trim(); + acc[key] = value; return acc; }, {} as Record<string, string>); [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: This suggestion fixes a real parsing bug where CSS values containing colons (such as URLs) would be incorrectly split, leading to incorrect style extraction. The fix is accurate and important for correct style parsing.	Medium
	Incomplete test assertion The test is only checking if user[1]'s notifications match the expected structure, but ignores user[0]'s notifications. This could hide bugs where user[0] receives incorrect notifications. Verify the entire notification structure against the expected value. platform/wab/src/wab/server/scripts/send-comments-notifications.spec.ts [562-564] -expect(notificationsByUser.get(users[1].id)).toEqual( - expectedNotification.get(users[1].id) -); +expect(notificationsByUser).toEqual(expectedNotification); [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The suggestion improves the test by asserting the entire notificationsByUser object instead of just a single user's notifications, increasing confidence that the notification logic works for all users. This is a moderate but meaningful improvement to test coverage and correctness.	Medium
	Insufficient test verification The test only checks the length of notifications but doesn't verify the actual content. This could allow incorrect notification content to pass the test. Use a more specific assertion to verify both the count and content of notifications. platform/wab/src/wab/server/scripts/send-comments-notifications.spec.ts [308-313] // user 1 will be notified about user 0 reply to their comment expect( notificationsByUser .get(users[1].id) ?.get(project.id) - ?.get(user1Comment.commentThreadId)?.length -).toBe(1); + ?.get(user1Comment.commentThreadId) +).toEqual([ + await createNotification( + user1Comment.commentThreadId, + users[1], + project, + user0Replied.createdAt, + { type: "COMMENT", comment: user0Replied }, + sudo + ), +]); [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The suggestion enhances the test by checking both the count and the actual content of the notifications, making the test more robust and less likely to miss subtle bugs. This is a moderate improvement in test quality and reliability.	Medium
	Handle empty array case Add a check to prevent processing empty arrays of thread IDs. When an empty array is passed to the In operator in TypeORM, it can cause SQL errors in some database engines or unexpected behavior. platform/wab/src/wab/server/db/DbMgr.ts [9821-9829] async markCommentThreadsAsNotified( commentThreadIds: string[], notifiedDate: Date ): Promise<void> { this.checkSuperUser(); + if (commentThreadIds.length === 0) { + return; + } await this.commentThreads().update( { id: In(commentThreadIds) }, { lastEmailedAt: notifiedDate } ); } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The suggestion to short-circuit when commentThreadIds is empty prevents unnecessary database operations and potential SQL errors, improving robustness. This is a minor but meaningful improvement for defensive programming.	Medium
	Handle potential null values The function uses non-null assertion (!) when finding terms with specific units, but there's no guarantee the find() operation will return a non-null value even after checking with some(). This could lead to runtime errors if the regex pattern matches differently. platform/wab/src/wab/client/web-importer/html-parser.ts [200-215] function getFixedValue() { if (value.startsWith("calc(")) { const combination = value.slice(5, -1); // split all terms of mathematical combination const terms = combination.split(/([+\-*/])/); // get the likely biggest term if (terms.some((term) => term.includes("vh"))) { - return terms.find((term) => term.includes("vh"))!.trim(); + const vhTerm = terms.find((term) => term.includes("vh")); + return vhTerm ? vhTerm.trim() : terms[0].trim(); } if (terms.some((term) => term.includes("vw"))) { - return terms.find((term) => term.includes("vw"))!.trim(); + const vwTerm = terms.find((term) => term.includes("vw")); + return vwTerm ? vwTerm.trim() : terms[0].trim(); } if (terms.some((term) => term.includes("px"))) { - return terms.find((term) => term.includes("px"))!.trim(); + const pxTerm = terms.find((term) => term.includes("px")); + return pxTerm ? pxTerm.trim() : terms[0].trim(); } return terms[0].trim(); } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The suggestion improves robustness by removing unsafe non-null assertions and providing a fallback, reducing the risk of runtime errors. While not critical, it is a solid defensive programming improvement.	Medium
	Trim CSS values The function doesn't trim the input values, which can lead to unexpected behavior when handling CSS values with leading or trailing whitespace. This is particularly problematic when parsing style attributes from HTML elements. platform/wab/src/wab/client/web-importer/html-parser.ts [176-199] function fixCSSValue(key: string, value: string) { if (!value) { return {}; } - - if (key === "content") { + + const trimmedKey = key.trim(); + const trimmedValue = value.trim(); + + if (trimmedKey === "content") { return {}; } - + function getFixedKey() { - const val = camelCase(key); + const val = camelCase(trimmedKey); if (val in translationTable) { return translationTable[val as keyof typeof translationTable]; } return val; } - + const fixedKey = getFixedKey(); - + if (ignoredStyles.has(fixedKey)) { return {}; } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 6 __ Why: Trimming whitespace from CSS keys and values can prevent subtle bugs when parsing inline styles, especially from user-generated or inconsistent HTML. This is a moderate improvement for robustness, though not critical for correctness.	Low
More