Skip to content

fix(core): fix web hydration for standalone mode#19

Merged
kilbot merged 7 commits intomainfrom
feature/fix-web-hydration-standalone
Jan 29, 2026
Merged

fix(core): fix web hydration for standalone mode#19
kilbot merged 7 commits intomainfrom
feature/fix-web-hydration-standalone

Conversation

@kilbot
Copy link
Copy Markdown
Contributor

@kilbot kilbot commented Jan 29, 2026

Summary

Fixes the web hydration flow for standalone mode (without WordPress initialProps). The app can run on web in two modes:

  1. WordPress embedded: initialProps are injected by the woocommerce-pos plugin before React loads
  2. Standalone: User navigates directly to the app URL and connects to a site manually via the auth flow

Issues Fixed

  • initialProps detection: Changed from exporting empty object {} to null when no valid WordPress props exist. An empty object was truthy, causing hydration steps to execute incorrectly.
  • Hydration step conditions: Updated shouldExecute checks to verify initialProps?.site exists rather than just truthy initialProps.
  • Web logout in standalone mode: Now properly clears the session state (like native) instead of just reloading the page (which kept the user logged in due to IndexedDB persistence).

Additional Changes

  • Add lint job to CI workflow (runs before unit tests)
  • Add .cursor/rules/testing-requirements.mdc for pre-commit lint/test requirements
  • Apply ESLint auto-fixes across 218 files
  • Fix React Compiler warnings for window.location.href assignments

Test plan

  • Test standalone web mode: Load app without WordPress, connect to a WooCommerce site via URL input
  • Test WordPress embedded mode: Load app from WordPress admin with initialProps
  • Test logout in standalone mode: Verify session is cleared and user returns to auth screen
  • Verify unit tests pass: pnpm test
  • Verify lint passes: pnpm lint

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.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Jan 29, 2026

Important

Review skipped

Too many files!

This PR contains 226 files, which is 126 over the limit of 100.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

  • 🔍 Trigger a full review

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 29, 2026

🚀 Deployment Summary

Item Status
Preview URL ❌ Failed to deploy
E2E Tests 🚫 Cancelled
Commit 3477350

🤖 Updated by GitHub Actions

@kilbot
Copy link
Copy Markdown
Contributor Author

kilbot commented Jan 29, 2026

E2E Test Failure Investigation 🔍

The e2e tests are failing because the app is stuck on the splash screen during hydration:

Splash screen stuck

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 Analysis

The changes to initial-props.web.ts may be causing an issue in the hydration flow:

  1. Previously: initialProps was {} (empty object) when not in WordPress
  2. Now: initialProps is null when not in WordPress

While the shouldExecute conditions were updated to check initialProps?.site, there may be something else in the hydration that's failing when initialProps is null.

Next Steps

Investigating 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)
@kilbot
Copy link
Copy Markdown
Contributor Author

kilbot commented Jan 29, 2026

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 domcontentloaded which fires before the splash screen finishes.

Fix applied:

  • Added proper wait in beforeEach for auth elements to be visible (60s timeout)
  • This waits for the splash screen to disappear and actual UI elements to render

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
@kilbot kilbot merged commit 2afdd2c into main Jan 29, 2026
2 of 3 checks passed
@kilbot kilbot deleted the feature/fix-web-hydration-standalone branch January 29, 2026 00:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant