feat(create): add React PowerSync scaffolding add-on#407
Open
devagrawal09 wants to merge 3 commits intoTanStack:mainfrom
Open
feat(create): add React PowerSync scaffolding add-on#407devagrawal09 wants to merge 3 commits intoTanStack:mainfrom
devagrawal09 wants to merge 3 commits intoTanStack:mainfrom
Conversation
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a new PowerSync React add-on: schema, backend connector, React provider, Vite plugin and env assets, package template and info manifest, plus a demo route and README scaffolding. Changes
Sequence Diagram(s)sequenceDiagram
participant Browser as Browser (UI)
participant ClientLib as PowerSync Client
participant DB as WASQLite DB
participant Connector as BackendConnector
participant Remote as PowerSync Remote API
Browser->>ClientLib: insert todo (execute SQL)
ClientLib->>DB: create CRUD transaction
ClientLib->>Connector: request upload (uploadData)
Connector->>DB: getNextCrudTransaction()
DB-->>Connector: transaction with CRUD ops
Connector->>Remote: fetchCredentials() -> endpoint + token
Connector->>Remote: send CRUD operations (PUT/PATCH/DELETE)
Remote-->>Connector: ack
Connector->>DB: transaction.complete()
Connector-->>ClientLib: upload complete
ClientLib-->>Browser: update UI / status
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@packages/create/src/frameworks/react/add-ons/powersync/assets/src/lib/powersync/BackendConnector.ts`:
- Around line 47-50: The catch block in BackendConnector's upload flow (in
BackendConnector.ts) currently calls await transaction.complete() on error which
finalizes the transaction and discards failed work; remove that call from the
catch, keep or improve the console.error logging, and re-throw the caught error
so PowerSync's retry mechanism can run (ensure transaction.complete() is only
invoked on successful completion—e.g. after the try or guarded in a finally only
when no error occurred).
In
`@packages/create/src/frameworks/react/add-ons/powersync/assets/src/routes/demo/powersync.tsx`:
- Around line 68-74: The todo input lacks a programmatic label; update the form
in the component that uses addTodo, setDescription, and description to provide
an accessible label—either add a visible <label> tied to the input via
htmlFor/id or add an aria-label/aria-labelledby attribute on the input—so screen
readers can identify the field (ensure the id you add matches the htmlFor if
using a label and keep event handler setDescription and value={description}
unchanged).
- Around line 25-39: The addTodo function currently awaits powerSync.execute but
has no error handling, causing failures to be silent; wrap the call to
powerSync.execute in a try/catch inside addTodo and on error show user feedback
(e.g., set an error state or call a notification/toast), log the error (include
the thrown error) and ensure form state is restored (e.g., keep description or
reset via setDescription only on success); reference the addTodo function, the
powerSync.execute call, and setDescription when implementing this fix.
In `@packages/create/src/frameworks/react/add-ons/powersync/info.json`:
- Around line 19-23: The manifest marks VITE_POWERSYNC_TOKEN as a secret but
VITE_* vars are exposed to the client; update the JSON entry for
"VITE_POWERSYNC_TOKEN" to set "secret": false (or remove the key) so it is not
advertised as safe for secrets, and instead add or document a non-client key
(e.g., "POWERSYNC_TOKEN") that is marked "secret": true for server-only usage;
ensure the change targets the "VITE_POWERSYNC_TOKEN" JSON object in info.json
and add a note in the manifest/comments that VITE_* variables are public in
Vite.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0564509f-44b4-4d73-982e-0c839b0b7a89
⛔ Files ignored due to path filters (1)
packages/create/src/frameworks/react/add-ons/powersync/small-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (9)
packages/create/src/frameworks/react/add-ons/powersync/README.md.ejspackages/create/src/frameworks/react/add-ons/powersync/assets/_dot_env.local.appendpackages/create/src/frameworks/react/add-ons/powersync/assets/powersync-vite-plugin.tspackages/create/src/frameworks/react/add-ons/powersync/assets/src/integrations/powersync/provider.tsxpackages/create/src/frameworks/react/add-ons/powersync/assets/src/lib/powersync/AppSchema.tspackages/create/src/frameworks/react/add-ons/powersync/assets/src/lib/powersync/BackendConnector.tspackages/create/src/frameworks/react/add-ons/powersync/assets/src/routes/demo/powersync.tsxpackages/create/src/frameworks/react/add-ons/powersync/info.jsonpackages/create/src/frameworks/react/add-ons/powersync/package.json.ejs
...s/create/src/frameworks/react/add-ons/powersync/assets/src/lib/powersync/BackendConnector.ts
Show resolved
Hide resolved
packages/create/src/frameworks/react/add-ons/powersync/assets/src/routes/demo/powersync.tsx
Show resolved
Hide resolved
packages/create/src/frameworks/react/add-ons/powersync/assets/src/routes/demo/powersync.tsx
Show resolved
Hide resolved
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
1 participant
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
packages/create/src/frameworks/react/add-ons/powersyncvite-pluginintegration (powersyncVite()) so generated apps include PowerSync-required Vite worker/dependency configVerification
pnpm buildpnpm test:unitpnpm nx affected --target=test:e2e --parallel=3node packages/cli/dist/index.js create powersync-app --framework react --add-ons powersync --target-dir /tmp/powersync-ci-verify-YDFAth --no-install --no-git --examplespnpm installpnpm buildNotes
BackendConnectoris intentionally scaffold-level and still requires project-specific auth + upload implementation.Summary by CodeRabbit
New Features
Documentation