feat: handle guides live preview content

[connorlindsey]

Description

Handles live preview update events and uses preview content if available for the given guide.

Checklist

• Tests have been added for new features or major refactors to existing features.

[linear]

KNO-9377 [JS Client] Connect to preview guides WS channel when token present

[changeset-bot]

🦋 Changeset detected

Latest commit: d397b4d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@knocklabs/client	Minor
@knocklabs/react	Minor
client-example	Patch
guide-example	Patch
@knocklabs/expo	Patch
@knocklabs/react-core	Patch
@knocklabs/react-native	Patch
ms-teams-connect-example	Patch
nextjs-app-dir-example	Patch
nextjs-example	Patch
slack-connect-example	Patch
slack-kit-example	Patch
@knocklabs/expo-example	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[connorlindsey]

• feat: add guide not rendered warning #732
• feat: handle guides live preview content #730 👈 (View in Graphite)
• feat: include force_all_guides param on socket connection when in debug mode #723
• feat: add Guide dev tools component #721
• feat: always return guide when in debug mode #720
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
javascript-ms-teams-connect-example	Ready	Preview	Comment	Sep 5, 2025 7:24pm
javascript-nextjs-example	Ready	Preview	Comment	Sep 5, 2025 7:24pm
javascript-slack-connect-example	Ready	Preview	Comment	Sep 5, 2025 7:24pm
javascript-slack-kit-example	Ready	Preview	Comment	Sep 5, 2025 7:24pm

[thomaswhyyou]

A few comments/questions.

[thomaswhyyou]

Hm I feel like JSON.stringify() can be brittle, for example:

JSON.stringify({a:1, b:2}) === JSON.stringify({b:2, a:1}) // false

For this I wonder if we can just check the key vals individually with a helper like checkDebugStageChanged(), or use something like fast-deep-equal we use in react-core? Given only two params, maybe just do this manually for now.

[connorlindsey]

Good point, I'll just do a manual check especially since we actually only care whether or not guide key is present or not (since either way, we're just sending 'force all guides' to SB)

[thomaswhyyou]

since we actually only care whether or not guide key is present or not (since either way, we're just sending 'force all guides' to SB)

Double checking, don't you send preview_session_id for subscribe() also in Line 366 though?

[connorlindsey]

I meant that specifically when comparing the guide key we just care about presence, but yeah, we still want to compare the rest of the debug state, here's what I added:

  private checkDebugStateChanged(a: DebugState, b: DebugState): boolean {
    return (
      Boolean(a.forcedGuideKey) !== Boolean(b.forcedGuideKey) ||
      a.previewSessionId !== b.previewSessionId
    );
  }

[codecov]

Codecov Report

❌ Patch coverage is 84.90566% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 63.99%. Comparing base (3558784) to head (d397b4d).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/client/src/clients/guide/client.ts	83.67%	8 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #730      +/-   ##
==========================================
+ Coverage   63.92%   63.99%   +0.06%     
==========================================
  Files         185      185              
  Lines        7513     7549      +36     
  Branches      900      907       +7     
==========================================
+ Hits         4803     4831      +28     
- Misses       2684     2692       +8     
  Partials       26       26              

Files with missing lines	Coverage Δ
packages/client/src/clients/guide/index.ts	100.00% <100.00%> (ø)
packages/client/src/clients/guide/types.ts	100.00% <ø> (ø)
...les/guide/components/GuideToolbar/GuideToolbar.tsx	66.37% <100.00%> (+0.58%)	⬆️
packages/client/src/clients/guide/client.ts	89.84% <83.67%> (-0.67%)	⬇️