Svelte 5 dynamic form building with formisch #154
Conversation
Refactor content for clarity and conciseness, removing redundant explanations about form model and validation logic.
dosubot
Bot
added
size:L
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThis pull request adds a standalone Svelte 5 invoice form example using Formisch and Valibot, with schema-driven validation, transformed numeric output, nested fields, dynamic line items, reactive totals, submission handling, reset behavior, styling, and project configuration. It also adds an MDX blog post documenting the implementation from schema setup through submission and closing guidance. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
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: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@website/src/routes/blog/`(posts)/dynamic-invoice-form-svelte/index.mdx:
- Around line 389-397: The submit handler currently loses the schema-derived
type at the boundary, so update submitInvoice to explicitly type its argument
using InvoiceOutput or SubmitHandler<typeof InvoiceSchema>. Keep the typing
aligned with the typed onsubmit pattern used in the example, and preserve the
existing submittedInvoice assignment and logging inside submitInvoice.
- Around line 325-364: The live totals computation in calculateTotals is still
using raw getInput values, so Number(...) can yield NaN while fields are empty
or mid-edit. Update invoiceInput/totals so invalid or non-finite inputs fall
back to 0 before arithmetic, or switch calculateTotals to consume validated form
output instead of the in-progress input values. Keep the fix centered around
calculateTotals, invoiceInput, and getInput so the derived totals remain stable
during editing.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 86239cde-0515-4b06-8003-b3835a94537a
📒 Files selected for processing (1)
website/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdx
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 1 file
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
Expanded the explanation of Formisch to emphasize its schema-native approach, benefits for complex forms, and integration with Svelte 5 reactivity. Clarified its headless nature and future support for SvelteKit.
|
Should we add the example as a Vite based Svelte project in |
Sure, I can do that. I haven't added an example to the repo before though. Should I copy the StackBlitz project as-is into |
|
Yes you can do that. But I can also take care of it if you prefer that. Let's plan this post for early next week. |
dosubot
Bot
added
size:XXL
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@examples/svelte-invoice-form/README.md`:
- Around line 33-39: Update the project structure tree in the README to
reference src/schema.ts instead of src/lib/schema.ts, matching the actual schema
file location.
In `@examples/svelte-invoice-form/src/App.svelte`:
- Line 82: Remove the console.log statement for submitted invoice output in the
App submission handler, and remove the corresponding UI claim that invoice data
is logged. Do not log client or invoice data elsewhere in this flow.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 836c9729-000a-4d5b-9dbe-f9459b995934
⛔ Files ignored due to path filters (1)
examples/svelte-invoice-form/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (13)
examples/svelte-invoice-form/.gitignoreexamples/svelte-invoice-form/README.mdexamples/svelte-invoice-form/index.htmlexamples/svelte-invoice-form/package.jsonexamples/svelte-invoice-form/src/App.svelteexamples/svelte-invoice-form/src/app.cssexamples/svelte-invoice-form/src/main.tsexamples/svelte-invoice-form/src/schema.tsexamples/svelte-invoice-form/src/vite-env.d.tsexamples/svelte-invoice-form/svelte.config.jsexamples/svelte-invoice-form/tsconfig.jsonexamples/svelte-invoice-form/vite.config.tswebsite/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdx
🚧 Files skipped from review as they are similar to previous changes (1)
- website/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdx
|
|
||
| const submitInvoice: SubmitHandler<typeof InvoiceSchema> = (output) => { | ||
| submittedInvoice = output; | ||
| console.log('Invoice submitted:', output); |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟡 Minor | ⚡ Quick win
Avoid logging client and invoice data to the console.
The output contains client names, email addresses, and invoice details. Remove the debug log and the corresponding UI claim.
const submitInvoice: SubmitHandler<typeof InvoiceSchema> = (output) => {
submittedInvoice = output;
- console.log('Invoice submitted:', output);
};- Typed, validated schema output (also logged to the console).
+ Typed, validated schema output.Also applies to: 383-385
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/svelte-invoice-form/src/App.svelte` at line 82, Remove the
console.log statement for submitted invoice output in the App submission
handler, and remove the corresponding UI claim that invoice data is logged. Do
not log client or invoice data elsewhere in this flow.
There was a problem hiding this comment.
1 issue found across 14 files (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="examples/svelte-invoice-form/src/app.css">
<violation number="1" location="examples/svelte-invoice-form/src/app.css:2">
P2: Form controls and section boundaries are barely distinguishable from their white surfaces because `--border` has very low contrast. A darker border token meeting at least 3:1 contrast against both `--surface` and `--bg` would make the fields and buttons identifiable for users with low vision.</violation>
</file>
Tip: Review your code locally with the cubic CLI to iterate faster.
Re-trigger cubic
| @@ -0,0 +1,205 @@ | |||
| :root { | |||
| --border: #e2e8f0; | |||
There was a problem hiding this comment.
P2: Form controls and section boundaries are barely distinguishable from their white surfaces because --border has very low contrast. A darker border token meeting at least 3:1 contrast against both --surface and --bg would make the fields and buttons identifiable for users with low vision.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At examples/svelte-invoice-form/src/app.css, line 2:
<comment>Form controls and section boundaries are barely distinguishable from their white surfaces because `--border` has very low contrast. A darker border token meeting at least 3:1 contrast against both `--surface` and `--bg` would make the fields and buttons identifiable for users with low vision.</comment>
<file context>
@@ -0,0 +1,205 @@
+:root {
+ --border: #e2e8f0;
+ --muted: #64748b;
+ --text: #0f172a;
</file context>
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
website/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdx (1)
322-347: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winStill unaddressed: guard live totals against
NaNfrom in-progress input values.This was previously flagged and remains open.
getInputreturns raw input state, soNumber(...)can produceNaNif a field value isundefinedor a non-numeric string mid-edit. Consider falling back to0for non-finite values, e.g.Number(value) || 0orisFinite(Number(value)) ? Number(value) : 0.Also applies to: 355-361
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@website/src/routes/blog/`(posts)/dynamic-invoice-form-svelte/index.mdx around lines 322 - 347, Update calculateTotals to normalize every numeric value from invoiceInput—line item quantity and unitPrice, taxRate, and discount—before arithmetic, falling back to 0 for undefined, non-numeric, or otherwise non-finite values so live totals never become NaN.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@website/src/routes/blog/`(posts)/dynamic-invoice-form-svelte/index.mdx:
- Around line 322-347: Update calculateTotals to normalize every numeric value
from invoiceInput—line item quantity and unitPrice, taxRate, and discount—before
arithmetic, falling back to 0 for undefined, non-numeric, or otherwise
non-finite values so live totals never become NaN.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1e3333e2-b979-4337-a39f-c64f1c672359
📒 Files selected for processing (1)
website/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdx
There was a problem hiding this comment.
All reported issues were addressed across 1 file (changes from recent commits).
Tip: Review your code locally with the cubic CLI to iterate faster.
Re-trigger cubic
2 participants
Summary by CodeRabbit