feat: improve mocking and add react devtools#65
Draft
fwal wants to merge 5 commits into
Draft
Conversation
…mulated states Replaces the aspirational mock README with a real implementation: - layer(): in-memory FirestoreService backed by a SubscriptionRef, so streamDoc/streamQuery are live — writes and state toggles re-emit through already-subscribed streams like onSnapshot - fixture()/rawFixture(): seed hard-coded models encoded through the real schema pipeline so reads exercise actual decoding - MockController service (provided by the same layer): toggle collections between data/empty/loading/error at runtime, seed docs, simulate latency, reset — the control surface for a future devtools panel - In-process query evaluation (where/orderBy/limits/cursors/and/or) with Firestore type ordering - Write fidelity: ServerTimestamp materialized via Clock, Delete/ ArrayUnion/ArrayRemove sentinels honored, not-found on update, recursive delete The existing MockFirestoreService stub remains exported for backwards compatibility. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NFRv4LXEZkuAb5EzX5mhV6
- @effect-firebase/devtools: new package with MockDevtoolsPanel, a React
panel that lists collections with doc counts and toggles each between
data/empty/loading/error, picks the simulated error code, controls
latency, and resets to fixtures — subscribed live to the mock store
- firestoreMockPlugin(controller): plugin factory for
<TanStackDevtools plugins={[...]}>; the plugin interface is declared
structurally so TanStack Devtools is not a dependency
- mock: add make() returning { layer, controller } so code outside the
Effect runtime (devtools, Storybook, tests) can drive the same store
the app's layer provides; layer() now builds on make() with
fresh-per-provide semantics preserved
- mock: add controller.latency getter for the panel's latency display
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NFRv4LXEZkuAb5EzX5mhV6
…nto claude/react-effect-atoms-mock-4lzbf8
Based on the atom-based example app from claude/vigilant-pascal-qgjsm4 (merged): the Firestore layer is swappable at the registry boundary via firestoreLayerAtom, so mock mode is one initialValues entry. - example/app/src/lib/mock.ts: mock backend handle with schema-encoded Post/Author fixtures - app.tsx: VITE_MOCK_BACKEND=1 seeds firestoreLayerAtom with the mock layer instead of the emulator client; a single TanStack Devtools shell now hosts the router panel plus the Firestore Mock panel, with onStateChange refreshing latestPostsAtom so streams that ended on a simulated error re-subscribe - mock: implement withTransaction/withBatch (pass-through — no concurrency or staging semantics to simulate) - devtools: pin explicit heights on panel elements so shell CSS resets that stretch divs cannot distort the layout - pnpm example:mock script; REACT.md section 7 documents the workflow Verified end-to-end in a real browser: fixtures render through atoms, empty/loading/error toggle live from the panel, data recovers after a terminal stream error via refresh, and form writes flow through the repository into the live stream (doc counts update in the panel). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NFRv4LXEZkuAb5EzX5mhV6
…toms-mock-4lzbf8 # Conflicts: # example/app/package.json # pnpm-lock.yaml
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: ASSERTIVE Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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 |
fwal
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Develop pages against a static mock backend: seed hard-coded models through your real schemas, then toggle collections between data / empty / loading / error live from a devtools panel — no emulator required.
@effect-firebase/mock— implements the in-memory backend the README already described. ReactiveSubscriptionRefstore, so live streams re-emit on writes and state toggles.fixture()encodes models through their schema,MockControllerdrives states/latency/seeding at runtime, andmake()returns{ layer, controller }for use outside the Effect runtime. Queries are evaluated in-process; server timestamps and field sentinels are honored. The existing stub stays exported.@effect-firebase/devtools— new package:MockDevtoolsPanel(React) plusfirestoreMockPlugin()for<TanStackDevtools>(structural interface, no TanStack dependency).onStateChangelets consumers re-subscribe streams that ended on a simulated error (terminal, likeonSnapshot).Example app —
pnpm example:mockseedsfirestoreLayerAtomwith the mock layer and mounts one devtools shell with the Router and Firestore Mock panels. Documented in REACT.md §7.Testing
55 new specs (mock + devtools) and a Playwright run against
pnpm example:mockcovering live toggles, error recovery via refresh, and form writes flowing through the store.nx run-many -t lint,build,testgreen across all projects.🤖 Generated with Claude Code
https://claude.ai/code/session_01NFRv4LXEZkuAb5EzX5mhV6