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
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
WalkthroughThis pull request adds a new MDX blog post at Changes
Sequence Diagram(s)Not applicable. Related Issues: None specified. Related PRs: None specified. Suggested labels: documentation, blog Suggested reviewers: None specified. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
website/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdxParsing error: "parserOptions.project" has been provided for 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
| let invoiceInput = $derived.by(() => { | ||
| const taxRate = getInput(invoiceForm, { | ||
| path: ['taxRate'] | ||
| }); | ||
|
|
||
| const discount = getInput(invoiceForm, { | ||
| path: ['discount'] | ||
| }); | ||
|
|
||
| const lineItems = getInput(invoiceForm, { | ||
| path: ['lineItems'] | ||
| }); | ||
|
|
||
| return { | ||
| taxRate, | ||
| discount, | ||
| lineItems | ||
| }; | ||
| }); | ||
|
|
||
| let totals = $derived(calculateTotals(invoiceInput)); | ||
|
|
||
| function calculateTotals(input) { | ||
| const subtotal = input.lineItems.reduce((sum, item) => { | ||
| return sum + Number(item.quantity) * Number(item.unitPrice); | ||
| }, 0); | ||
|
|
||
| const tax = subtotal * (Number(input.taxRate) / 100); | ||
|
|
||
| const discount = Number(input.discount); | ||
|
|
||
| const total = Math.max(subtotal + tax - discount, 0); | ||
|
|
||
| return { | ||
| subtotal, | ||
| tax, | ||
| discount, | ||
| total | ||
| }; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the target file around the cited lines
wc -l website/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdx
sed -n '300,390p' website/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdx
# Find the exact usages of getInput and calculateTotals in the file
rg -n "getInput|calculateTotals|Number\(" website/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdx
# Inspect nearby docs or examples for how getInput/form state is described in this repo
rg -n "getInput|validated output|raw input|onsubmit|FieldArray|insert|remove" website/src -g '*.mdx' -g '*.md'Repository: open-circle/formisch
Length of output: 211
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE='website/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdx'
# Inspect the target file around the cited lines
wc -l "$FILE"
sed -n '300,390p' "$FILE"
# Find the exact usages of getInput and calculateTotals in the file
rg -n "getInput|calculateTotals|Number\(" "$FILE"
# Search related docs/examples in the repo
rg -n "getInput|validated output|raw input|onsubmit|FieldArray|insert|remove" website/src -g '*.mdx' -g '*.md'Repository: open-circle/formisch
Length of output: 50379
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE='website/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdx'
# Show the schema section that defines taxRate/discount/lineItems types
sed -n '50,130p' "$FILE"
# Show the form-methods docs for getInput and handle submission
sed -n '1,130p' website/src/routes/(docs)/svelte/guides/(main-concepts)/form-methods/index.mdx
sed -n '1,120p' website/src/routes/(docs)/svelte/guides/(main-concepts)/handle-submission/index.mdx
# Show any direct getInput API docs in Svelte
fd -a 'getInput/index.mdx' website/src/routes/(docs)/svelte website/src/routes/(docs)/coreRepository: open-circle/formisch
Length of output: 2792
🏁 Script executed:
#!/bin/bash
set -euo pipefail
BLOG='website/src/routes/blog/(posts)/dynamic-invoice-form-svelte/index.mdx'
GETINPUT_DOC='website/src/routes/(docs)/svelte/guides/(main-concepts)/form-methods/index.mdx'
SUBMIT_DOC='website/src/routes/(docs)/svelte/guides/(main-concepts)/handle-submission/index.mdx'
# Relevant blog excerpt with line numbers
nl -ba "$BLOG" | sed -n '315,385p'
# Relevant docs excerpts
nl -ba "$GETINPUT_DOC" | sed -n '1,120p'
nl -ba "$SUBMIT_DOC" | sed -n '1,90p'Repository: open-circle/formisch
Length of output: 198
Guard the live totals calculation against invalid in-progress values. getInput reads the current form input, so Number(...) can still produce NaN while a field is empty or mid-edit. Fall back to 0 for non-finite values, or derive the totals from validated output instead.
🤖 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 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.
![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.
1 participant
Summary by CodeRabbit