fix(core): fix web hydration for standalone mode#19
Conversation
The app can run on web in two modes:
1. WordPress embedded: initialProps injected by woocommerce-pos plugin
2. Standalone: User connects to a site manually via the auth flow
This commit fixes three issues that broke standalone mode:
1. initialProps detection: Changed from exporting empty object {} to
exporting null when no valid WordPress props are present. An empty
object was truthy, causing hydration steps to execute incorrectly.
2. Hydration step conditions: Updated shouldExecute checks to verify
initialProps?.site exists rather than just truthy initialProps.
This ensures processInitialPropsStep and testAuthorizationStep
are properly skipped in standalone mode.
3. Web logout: In standalone mode, logout now properly clears the
session state (like native does) instead of just reloading the page.
Previously, reloading kept the user logged in since IndexedDB
persisted the session.
Tests verify:
- Returns null when globalThis.initialProps is undefined
- Returns null for empty object {}
- Returns null when missing required site property
- Returns null when missing required wp_credentials property
- Returns frozen object when valid WordPress props exist
Also:
- Add testing-requirements rule to .cursor/rules
- Fix .gitignore to properly include .cursor/rules/
- Add lint job to test.yml that runs before unit tests - Update testing-requirements.mdc to include linting requirements - Pre-commit checklist: run pnpm lint:fix, then pnpm test The lint job uses the existing @wcpos/eslint-config which includes: - Prettier (tabs, single quotes, trailing commas) - Import ordering rules - React Compiler rules
Run `pnpm lint:fix` to auto-fix formatting and import ordering issues. Manual fixes: - Extract `navigateToUrl()` helper in app-state/index.tsx to fix React Compiler warning about window.location.href assignment - Extract `navigateToUrl()` helper in use-wcpos-auth/index.web.ts - Remove unused `appLogger` import in app-state/index.tsx Note: Some pre-existing lint errors remain that require larger refactoring: - React Compiler mutation warnings (ui-settings-form files) - Module resolution issues (styled-components, expo modules) - Unescaped entities in error messages - Conditional hooks in some components These should be addressed in separate PRs.
|
Important Review skippedToo many files! This PR contains 226 files, which is 126 over the limit of 100. You can disable this status message by setting the
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🚀 Deployment Summary
🤖 Updated by GitHub Actions |
E2E Test Failure Investigation 🔍The e2e tests are failing because the app is stuck on the splash screen during hydration: Error context from test: - generic [ref=e7]:
- img [ref=e9]
- progressbar [ref=e18]The app never progresses past the splash screen to show the Connect/Auth screen. Root Cause AnalysisThe changes to
While the Next StepsInvestigating the hydration steps to find where it's hanging... |
The e2e tests were failing because they only waited for 'domcontentloaded' which fires before React hydration completes. The app shows a splash screen during hydration which can take several seconds. Fixed by: - Adding proper wait in beforeEach for auth elements to be visible - Increased timeout to 60s to account for slow preview deployments - Using more specific selectors (input[type="url"], button:has-text)
Update: E2E Test Fix Pushed ✅The e2e tests were failing because they weren't waiting for React hydration to complete. The tests only waited for Fix applied:
The CI should re-run automatically. 🤞 |
- Add JSON reporter to capture structured test results - Generate GitHub Step Summary with test metrics and failures - Parse test results in PR comment to show failed test names - Add direct links to download screenshots and view reports Now when e2e tests fail, you'll see: 1. Test summary directly in the Actions job summary 2. Failed test names and error messages in PR comments 3. Links to download screenshots and full HTML report
Summary
Fixes the web hydration flow for standalone mode (without WordPress initialProps). The app can run on web in two modes:
initialPropsare injected by the woocommerce-pos plugin before React loadsIssues Fixed
{}tonullwhen no valid WordPress props exist. An empty object was truthy, causing hydration steps to execute incorrectly.shouldExecutechecks to verifyinitialProps?.siteexists rather than just truthyinitialProps.Additional Changes
.cursor/rules/testing-requirements.mdcfor pre-commit lint/test requirementswindow.location.hrefassignmentsTest plan
pnpm testpnpm lint