Feat/upstream changes

[willymwai]

PR Type

Enhancement, Tests, Bug fix

---

Description

• Major enhancements to CMS, comments, reactions, and notification logic, including improved notification grouping, reaction handling, and CMS row management.

• Added and refactored utilities and logic for processing and sending comment notifications, with improved grouping by user/project/thread and support for reactions and thread histories.

• Introduced a new HTML parser utility for the web importer, supporting style extraction, specificity, and CSS edge cases.

• Improved code component prop registration with enhanced type checking, validation, and support for new prop types.

• Added support for TanStack Router and server query features in React code generation and loader bundling.

• Removed deprecated Rollup bundling logic, enforcing esbuild for loader, and added "tanstack" platform support.

• Extended Cypress support utilities and added comprehensive E2E test suites for features such as Auto Open, Plexus component installation, and project panel manipulation.

• Refactored and expanded tests for comment notification emails and notification logic, improving coverage and reliability.

• Added Playwright tests for react-aria code components in Next.js loader projects, covering accessibility and variant support.

• Refactored literal expression helpers for improved type safety and clarity.

• Fixed import path for Analytics types in AmplitudeAnalytics.

• Various code cleanups, import updates, and removal of unused/deprecated files and logic.

---

Changes walkthrough 📝

	Relevant files
Tests	8 files send-comments-notifications.spec.ts Major refactor and expansion of comment notification tests with new helpers and scenarios platform/wab/src/wab/server/scripts/send-comments-notifications.spec.ts Refactored test utility functions: replaced postComment with addComment, added updatedThreadStatus, reactOnComment, and removeReactionOnComment. Updated test cases to use new helper functions and improved notification structure assertions. Replaced manual notification structure expectations with dynamic createNotification calls and Maps. Added comprehensive new test cases for notifications, including thread resolution, reactions, mentions, and notification preferences. Improved test coverage for edge cases and notification logic. +1842/-393 nextjs-plasmic-react-aria.spec.ts Add Playwright tests for react-aria code components in Next.js loader 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 tests for various components (Button, Checkbox, Radio, Switch, Text Field, Select, Combobox, Dialogs, Tooltip, Slider, Range Slider) across multiple Next.js and loader versions. Introduced utility classes (StateChecker, LeafElementStateChecker) for asserting UI state and style. Included detailed state and interaction checks for accessibility and variant support. [link]    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 the "Auto Open" feature. Tests cover code components, Plasmic components, nested auto-open scenarios, and various visibility states. Includes utility functions for asserting auto-open behavior and handling edge cases. Covers undo functionality, multi-selection (skipped), and live mode checks. +799/-0  tutorial.spec.ts Refactor and improve reliability of tutorial Cypress test platform/wab/cypress/e2e/tutorial.spec.ts Refactored tutorial test to use beforeEach/afterEach for setup/teardown and dev flag management. Improved test reliability by ensuring dev flags and projects are reset after each test. Streamlined the test flow for completing the tutorial, reducing nesting and improving readability. Minor import and structure improvements. +338/-348 host-app.spec.ts Use configureProjectAppHost in host-app Cypress tests        platform/wab/cypress/e2e/host-app.spec.ts Replaced calls to configureProject with configureProjectAppHost for clarity and consistency. Updated all relevant test cases to use the new utility function. +7/-30    plexus-installation.spec.ts Add Cypress E2E tests for Plexus component installation and behaviors 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, copy, undo, and dependency checks. Covers installation dialogs, default components, project dependency assertions, and undo/redo flows. Includes utility functions and assertions for project panel state and component verification. +609/-0  comment-notification-email.spec.ts Rewrite and expand tests for comment notification email grouping logic platform/wab/src/wab/server/emails/comment-notification-email.spec.ts Rewrote and expanded tests for sendUserNotificationEmail to cover new notification grouping logic. Added tests for notifications across projects, branches, and multiple notification types (comments, reactions, thread histories). Utilized new test utilities and improved assertions for email content and recipients. Removed old test logic and replaced with more comprehensive, scenario-based tests. +568/-105 prefill-cloudfront.spec.ts Update test for prefill cloudfront to match new function signature platform/wab/src/wab/server/workers/prefill-cloudfront.spec.ts Updated test expectation for getRecentLoaderPublishmentsMock to remove the minLoaderVersion argument. Ensured test reflects updated function signature. +1/-6
Enhancement	8 files exprs.ts Refactor and enhance literal extraction and code helpers for expressions platform/wab/src/wab/shared/core/exprs.ts Refactored literal expression helpers: simplified codeLit and removed unused variants. Improved type safety and clarity for literal extraction helpers (tryExtractJson, tryExtractString, tryExtractBoolean). Updated tryExtractJson to use a safer JSON parser and return correct types. Added tryExtractBoolean for extracting boolean literals from expressions. Removed unused or redundant code and improved documentation. +24/-29  DbMgr.ts Major enhancements to CMS, comments, reactions, and notification logic platform/wab/src/wab/server/db/DbMgr.ts Refactored and enhanced comment, thread, and reaction handling, including notification and update logic. Improved unique field checking and error handling for CMS rows, including new utility methods and error throws. Updated permissions checks for various project and workspace actions (e.g., using "commenter" instead of "viewer"). Added support for passing custom IDs to entity creation methods and improved stamping logic. Added new methods for retrieving published CMS rows and handling large result sets with Sentry logging. Enhanced merge commit logic to accept descriptions and tags. Updated project creation and update logic, removing unused fields and improving workspace/team lookup. Improved handling of deleted comments and threads, including updating thread deletion when all comments are deleted. Refined notification and reaction update logic to ensure accurate lastEmailedAt tracking. Improved code formatting, removed unused code, and updated imports. +355/-110 html-parser.ts Add HTML parser utility for web importer with style extraction platform/wab/src/wab/client/web-importer/html-parser.ts Added a new HTML parser utility for the web importer, converting HTML/CSS into a structured tree. Handles style extraction, specificity, variable resolution, and sanitization. Supports media queries, font-face rules, and various CSS edge cases. Provides utilities for traversing nodes, extracting styles, and building a WIElement tree. +852/-0  module-bundler.ts Remove Rollup, enforce esbuild for loader, add tanstack support platform/wab/src/wab/server/loader/module-bundler.ts Removed deprecated Rollup bundling logic; now only supports esbuild for loaderVersion >= 7. Added support for "tanstack" platform in BundleOpts. Ensured serverQueriesExecFuncFileName is included in component meta and output. Improved error handling and logging for esbuild bundling failures. Cleaned up imports and removed unused dependencies. +52/-282 util.ts Extend Cypress support utilities for project, prop, and variant testing platform/wab/cypress/support/util.ts Added numerous new utility functions for Cypress E2E tests, including project panel, component prop, frame, and variant helpers. Enhanced existing utilities for better frame selection, undo/redo, visibility toggling, and project configuration. Improved selectors and added documentation for new helpers. Refactored and expanded support for project panel and component manipulation. +322/-40 send-comments-notifications.ts Refactor comment notification processing and grouping logic for emails platform/wab/src/wab/server/scripts/send-comments-notifications.ts Refactored and expanded the logic for processing and sending comment notifications. Introduced new types and context class to manage notification grouping and user/project/thread mapping. Improved notification grouping by user, project, and thread, and added support for reactions and thread histories. Enhanced notification settings handling and made notification processing more modular and robust. +431/-199 code-components.ts Improve code component prop registration type checking and handling platform/wab/src/wab/shared/code-components/code-components.ts Enhanced type checking and validation for code component prop registrations. Added new type helpers and improved error messages for prop registration errors. Improved handling of prop types, options, and custom function registration. Added support for new prop types and improved comparison logic for component props. Refactored and expanded logic for updating component props and handling className prop changes. +231/-111 index.ts Add TanStack Router and server query support to React codegen platform/wab/src/wab/shared/codegen/react-p/index.ts Added support for TanStack Router platform in code generation. Enhanced server query and RSC (React Server Components) support in generated code. Improved imports, prop typing, and head/meta serialization for new platforms. Refactored skeleton wrapper and page-aware wrapper generation for new routing and server query paradigms. +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. +4/-4
Formatting	1 files SlotUtils.ts Update imports for slot and Tpl utilities in SlotUtils      platform/wab/src/wab/shared/SlotUtils.ts Added and reordered imports to include new utilities and types for slot and Tpl processing. No functional changes, only import adjustments. +29/-26
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, in the getStyleSheet function (lines 38-53), there's a try/catch block that silently ignores errors when accessing cssRules. This could lead to unexpected behavior if stylesheets fail to load properly. try { content = [...ss.cssRules] .map((cssRule) => { return cssRule.cssText; }) .join("\n"); } catch (e) {} Performance Concern The HTML parser performs multiple DOM queries and style computations which could be expensive for large documents. The storeRuleRelationToNodes function (lines 762-781) queries the document for each CSS selector, which might cause performance issues with complex stylesheets. function storeRuleRelationToNodes( context: string, selector: string, rule: CssRuleAST ) { const nodes = document.querySelectorAll(selector); if (nodes.length === 0) { return; } for (const node of nodes) { const wiID = getInternalId(node); if (!wiID) { continue; } addNodeWIRule(context, selector, rule, node); } }

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Missing relation in query The query is missing the leftJoinAndSelect for comments, which are needed for notification processing. Without this, the returned threads won't have their comments loaded, causing potential issues when generating notifications. platform/wab/src/wab/server/db/DbMgr.ts [9734-9746] async getUnnotifiedCommentThreads(before: Date): Promise<CommentThread[]> { this.checkSuperUser(); return await this.commentThreads() .createQueryBuilder("thread") .where("thread.deletedAt IS NULL") .leftJoinAndSelect("thread.branch", "branch") + .leftJoinAndSelect("thread.comments", "comment") .andWhere( "(thread.lastEmailedAt is NULL OR (thread.updatedAt > thread.lastEmailedAt AND thread.updatedAt <= :before))", { before } ) .orderBy("thread.updatedAt", "ASC") .getMany(); } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The suggestion correctly points out that the query should include a leftJoinAndSelect for comments to ensure that comments are loaded with each thread, which is important for notification processing. This improves the correctness and reliability of the notification logic, but is not a critical bug fix, so a score of 7 is appropriate.	Medium
General	Add timeout to assertions The assertHidden function has a potential race condition. When checking for hidden content, it's better to use Cypress's built-in timeout mechanism with explicit assertions rather than assuming the element is immediately not present. platform/wab/cypress/e2e/auto-open.spec.ts [380-389] function assertHidden( frame: Framed, hiddenContent: string, visibleContent?: string ) { if (visibleContent) { frame.base().contains(visibleContent).should("exist"); } - frame.base().contains(hiddenContent).should("not.exist"); + frame.base().contains(hiddenContent).should("not.exist", { timeout: 2000 }); + cy.autoOpenBanner().should("not.exist"); } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 6 __ Why: Adding a timeout to the assertion for hidden content in assertHidden improves test reliability by accounting for asynchronous UI updates, but the change is minor and not critical for correctness.	Low
	Add error logging The function silently ignores any errors when accessing cssRules without logging them. This could hide CORS-related issues or other stylesheet access problems. Consider adding error logging to help with debugging. platform/wab/src/wab/client/web-importer/html-parser.ts [37-54] function getStyleSheet(document: Document) { const styleSheetsContent = [...document.styleSheets].map((ss) => { let content = ""; try { content = [...ss.cssRules] .map((cssRule) => { return cssRule.cssText; }) .join("\n"); - } catch (e) {} + } catch (e) { + console.warn(`Could not access cssRules for stylesheet ${ss.href}:`, e); + } return { href: ss.href, content, }; }); return styleSheetsContent.map((s) => s.content).join("\n"); } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 5 __ Why: Logging errors when accessing cssRules can aid debugging, especially for CORS issues, but it does not affect functionality or correctness; it's a moderate improvement for maintainability.	Low
Update