Pull homepage suggestions from edge config #141
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds Vercel Flags discovery route, Statsig-backed domain suggestions flag, Vercel Toolbar integration, refactors domain suggestions into server/client components with a home-search context and coordination component, updates DomainSearch API to accept external navigation, and introduces new env vars and package dependencies. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HSS as HomeSearchSection
participant DS as DomainSearch
participant Ctx as HomeSearchContext
participant DSS as DomainSuggestionsServer
participant DSC as DomainSuggestionsClient
Note over DSS: Server startup / render
DSS->>DSS: await domainSuggestionsFlag()
DSS->>DSC: provide suggestions
User->>DSC: Click suggestion
DSC->>Ctx: onSuggestionClickAction(domain)
Ctx->>HSS: forward(domain)
HSS->>HSS: set externalNavigation
HSS->>DS: pass externalNavigation prop
DS->>DS: populate input, trigger navigation
DS->>HSS: call onNavigationCompleteAction()
HSS->>HSS: clear externalNavigation
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (6)
🧰 Additional context used📓 Path-based instructions (6)components/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,css,json}📄 CodeRabbit inference engine (AGENTS.md)
Files:
components/**/*.{tsx,jsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.test.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
hooks/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧬 Code graph analysis (4)components/domain/domain-search.test.tsx (1)
components/domain/domain-suggestions-server.tsx (2)
components/domain/domain-search.tsx (1)
components/home-search-section.tsx (3)
🔇 Additional comments (6)
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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #141 +/- ##
==========================================
+ Coverage 68.39% 68.46% +0.06%
==========================================
Files 102 103 +1
Lines 2772 2778 +6
Branches 893 892 -1
==========================================
+ Hits 1896 1902 +6
Misses 531 531
Partials 345 345 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (17)
.env.example(1 hunks)app/.well-known/vercel/flags/route.ts(1 hunks)app/layout.tsx(2 hunks)app/not-found.tsx(1 hunks)app/page.tsx(1 hunks)components/domain/domain-search.test.tsx(1 hunks)components/domain/domain-search.tsx(2 hunks)components/domain/domain-suggestions-client.tsx(1 hunks)components/domain/domain-suggestions-server.tsx(1 hunks)components/domain/domain-suggestions.test.tsx(4 hunks)components/domain/domain-suggestions.tsx(3 hunks)components/home-search-context.tsx(1 hunks)components/home-search-section.tsx(1 hunks)flags.ts(1 hunks)lib/constants.ts(0 hunks)next.config.ts(2 hunks)package.json(3 hunks)
💤 Files with no reviewable changes (1)
- lib/constants.ts
🧰 Additional context used
📓 Path-based instructions (10)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: TypeScript only; keep modules small, pure, and roughly ≤300 LOC
Consolidate imports using @/... path aliases
Files:
flags.tscomponents/home-search-section.tsxcomponents/domain/domain-search.test.tsxcomponents/domain/domain-suggestions-client.tsxapp/not-found.tsxapp/layout.tsxcomponents/domain/domain-suggestions-server.tsxcomponents/domain/domain-suggestions.tsxcomponents/home-search-context.tsxapp/page.tsxnext.config.tscomponents/domain/domain-search.tsxcomponents/domain/domain-suggestions.test.tsx
**/*.{ts,tsx,css,json}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation across the codebase
Files:
flags.tscomponents/home-search-section.tsxcomponents/domain/domain-search.test.tsxcomponents/domain/domain-suggestions-client.tsxpackage.jsonapp/not-found.tsxapp/layout.tsxcomponents/domain/domain-suggestions-server.tsxcomponents/domain/domain-suggestions.tsxcomponents/home-search-context.tsxapp/page.tsxnext.config.tscomponents/domain/domain-search.tsxcomponents/domain/domain-suggestions.test.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
components/ contains reusable UI primitives with kebab-case file names and PascalCase exports
Files:
components/home-search-section.tsxcomponents/domain/domain-search.test.tsxcomponents/domain/domain-suggestions-client.tsxcomponents/domain/domain-suggestions-server.tsxcomponents/domain/domain-suggestions.tsxcomponents/home-search-context.tsxcomponents/domain/domain-search.tsxcomponents/domain/domain-suggestions.test.tsx
components/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Client components in components/ must begin with "use client" when needed
Files:
components/home-search-section.tsxcomponents/domain/domain-search.test.tsxcomponents/domain/domain-suggestions-client.tsxcomponents/domain/domain-suggestions-server.tsxcomponents/domain/domain-suggestions.tsxcomponents/home-search-context.tsxcomponents/domain/domain-search.tsxcomponents/domain/domain-suggestions.test.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.test.{ts,tsx}: In tests, replace @/server/db/client with a PGlite-backed instance when DB access is needed
Do not use global Redis in tests; mock per-suite with @/lib/redis-mock and reset between tests
Mock Radix UI primitives (e.g., Accordion, Tooltip) when testing domain sections
Mock TRPC/React Query for components like Favicon and Screenshot in tests
Prefer vi.hoisted for ESM module mocks in server tests (e.g., node:tls)
Use unique cache keys/domains in server tests and call resetInMemoryRedis() in afterEach
For R2 storage, mock @aws-sdk/client-s3 (S3Client with mocked send) and set R2_* env vars with vi.stubEnv in suites touching uploads/deletes
Mock URL.createObjectURL and URL.revokeObjectURL with vi.fn() in tests that need them
Files:
components/domain/domain-search.test.tsxcomponents/domain/domain-suggestions.test.tsx
package.json
📄 CodeRabbit inference engine (AGENTS.md)
Require Node.js >= 22 via package.json engines
Files:
package.json
app/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
app/**/*.{tsx,jsx}: In Next.js App Router, default to server components in app/
Client components in app/ must begin with "use client" when needed
Files:
app/not-found.tsxapp/layout.tsxapp/page.tsx
.env.example
📄 CodeRabbit inference engine (AGENTS.md)
Maintain .env.example with required variables
Files:
.env.example
app/{page.tsx,api/**}
📄 CodeRabbit inference engine (AGENTS.md)
Keep app/page.tsx and all app/api/* handlers thin; delegate logic to server/ or lib/
Files:
app/page.tsx
app/**/page.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Keep Next.js page roots (app/**/page.tsx) lean
Files:
app/page.tsx
🧠 Learnings (1)
📚 Learning: 2025-10-20T02:11:42.179Z
Learnt from: CR
PR: jakejarvis/domainstack.io#0
File: AGENTS.md:0-0
Timestamp: 2025-10-20T02:11:42.179Z
Learning: Applies to vitest.setup.ts : Provide global test setup in vitest.setup.ts (mock analytics, server-only, unstable_cache no-op)
Applied to files:
components/domain/domain-suggestions.test.tsx
🧬 Code graph analysis (7)
components/home-search-section.tsx (2)
components/home-search-context.tsx (1)
HomeSearchProvider(11-23)components/domain/domain-search.tsx (1)
DomainSearch(28-201)
components/domain/domain-search.test.tsx (1)
components/domain/domain-search.tsx (1)
DomainSearch(28-201)
components/domain/domain-suggestions-client.tsx (2)
components/home-search-context.tsx (1)
useHomeSearch(25-31)components/domain/domain-suggestions.tsx (1)
DomainSuggestions(10-80)
app/not-found.tsx (1)
components/domain/domain-search.tsx (1)
DomainSearch(28-201)
components/domain/domain-suggestions-server.tsx (2)
flags.ts (1)
domainSuggestionsFlag(7-20)components/domain/domain-suggestions-client.tsx (1)
DomainSuggestionsClient(19-25)
app/page.tsx (2)
components/home-search-section.tsx (1)
HomeSearchSection(22-46)components/domain/domain-suggestions-server.tsx (1)
DomainSuggestionsServer(18-24)
components/domain/domain-suggestions.test.tsx (1)
components/domain/domain-suggestions.tsx (1)
DomainSuggestions(10-80)
🔇 Additional comments (17)
app/not-found.tsx (1)
27-27: DomainSearch API update looks good.Switch to variant="lg" aligns with the new props and keeps this page server-safe.
components/domain/domain-search.tsx (1)
21-26: showSuggestions removal verified—no stale usages found.Audit confirms the prop has been cleanly removed from
components/domain/domain-search.tsxwith no remaining references in the codebase.package.json (1)
39-39: Verified: packages are correct and safe for production.The npm package "flags" (imported as "flags/next") is the official Vercel Flags SDK core. The @vercel/toolbar is not automatically injected in production—it is disabled by default unless explicitly enabled via dashboard or browser extension. No action required.
.env.example (1)
38-47: Env additions look correct.Secrets aren’t public; guidance is clear. Consider noting intended scopes: FLAGS_SECRET/EDGE_CONFIG required in all envs; STATSIG_* optional for Flags Explorer.
app/page.tsx (1)
1-3: Imports/composition match new split — LGTM.app/layout.tsx (1)
50-51: Vercel Toolbar gated to dev — verified and approved.Configuration wrapper (
withVercelToolbar()) confirmed in next.config at line 42, dependency@vercel/toolbarversion ^0.1.41 installed, import properly referenced, and dev-only conditional guard in place. All setup complete.components/domain/domain-suggestions.tsx (3)
10-22: LGTM! Clean prop-based refactor.The addition of the
suggestionsprop successfully decouples this component from hardcoded defaults, enabling dynamic configuration via feature flags or edge config.
39-45: Efficient memoization with correct dependencies.The memo correctly merges history with the provided suggestions and includes all dependencies. The rename to
displayedSuggestionsimproves clarity.
61-61: Smart initial render strategy.Showing raw
suggestionsbeforehistoryLoadedprevents a flash of empty content, while theinvisibleclass (line 68) prevents layout shift. This ensures a smooth UX during the async localStorage read.components/home-search-section.tsx (3)
7-10: Well-defined navigation trigger type.The
NavigationTriggertype clearly captures the source of navigation events, enabling proper analytics and flow tracking.
26-32: Proper memoization prevents unnecessary re-renders.Both callbacks are correctly memoized with
useCallbackand have appropriate dependency arrays (empty, since they only update local state).
34-45: Clean composition pattern.The component effectively coordinates between
DomainSearchand suggestions by:
- Providing click handlers via context
- Managing navigation state
- Accepting server components as children
This separation of concerns aligns well with React Server Components architecture.
components/domain/domain-suggestions-client.tsx (2)
6-11: Type-safe props definition.The props type correctly mirrors the configurable subset of
DomainSuggestionsprops, excludingonSelectActionwhich is provided by context.
19-25: Clean context-to-props bridge.This wrapper effectively decouples the server-rendered suggestions data from the client-side interaction handlers, following the React Server Components pattern.
components/domain/domain-suggestions.test.tsx (2)
8-14: Well-defined test fixtures.The
TEST_SUGGESTIONSconstant provides predictable test data and includesjarv.iswhich is used in assertions throughout the suite.
34-76: Comprehensive test coverage for the prop-based refactor.The tests correctly verify:
- Rendering of provided suggestions
- Merging and deduplication logic with localStorage history
- Click handler invocation via
onSelectActionAll tests now explicitly pass the
suggestionsprop, aligning with the new API.next.config.ts (1)
42-51: API usage is correct and matches official Vercel documentation.The withVercelToolbar helper uses a two-step pattern: first call the plugin factory with
(), then pass the Next.js config to the returned wrapper function. The code at lines 42-51 correctly implements this by invokingwithVercelToolbar()and passing the wrapped config as its argument.
…ainSearch component and update related tests
… defaults to an empty array if the value is not an array.
…ures from interrupting the process
…sClient, excluding 'suggestions' prop for improved type safety.
…sure proper navigation and callback assertions
…nts to use the exported Source type from use-domain-search for improved consistency and type safety.
…ature flags in AGENTS.md and README.md
Summary by CodeRabbit
New Features
Bug Fixes / UX
Chores