tsunami -- handle onSubmit and onChange for file inputs #2541
Conversation
WalkthroughThis pull request implements form and file upload support in the VDOM system by introducing new type definitions and event handling logic across TypeScript and Go codebases. It adds VDomFormData and VDomFileData types, extends VDomEvent to carry form and file metadata, and updates TsunamiModel with async event processing for form submissions and file field changes. A new base64 utility module is added to support file data encoding, with files limited to 5MB and stored as Base64 content within VDOM payloads. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. 🔧 golangci-lint (2.5.0)Error: unknown linters: 'unusedfunc,unusedparams', run 'golangci-lint help linters' to see the list of supported linters 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: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
tsunami/frontend/src/model/tsunami-model.tsx(6 hunks)tsunami/frontend/src/types/vdom.d.ts(2 hunks)tsunami/frontend/src/util/base64.ts(1 hunks)tsunami/vdom/vdom_types.go(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
tsunami/frontend/src/model/tsunami-model.tsx (2)
tsunami/vdom/vdom_types.go (3)
VDomFileData(138-145)VDomEvent(65-77)VDomFormData(117-125)tsunami/frontend/src/util/base64.ts (1)
arrayBufferToBase64(34-37)
tsunami/frontend/src/types/vdom.d.ts (1)
tsunami/vdom/vdom_types.go (2)
VDomFileData(138-145)VDomFormData(117-125)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (go)
- GitHub Check: Build for TestDriver.ai
| const needsAsync = | ||
| propName == "onSubmit" || | ||
| (propName == "onChange" && (e.target as HTMLInputElement)?.type === "file"); | ||
| if (needsAsync) { | ||
| asyncAnnotateEvent(vdomEvent, propName, e) | ||
| .then(() => { | ||
| this.batchedEvents.push(vdomEvent); | ||
| this.queueUpdate(true, "event"); | ||
| }) | ||
| .catch((err) => { | ||
| console.error("Error processing event:", err); | ||
| }); | ||
| } else { |
There was a problem hiding this comment.
Restore deterministic ordering for async form/file events
Line 724 introduces an async branch that only pushes the event after fileToVDomFileData resolves. Because each handler now resolves independently, a later (smaller) file can finish first, enter the batch, and trigger queueUpdate before an earlier (larger) file has finished reading. The backend will then observe the events out of chronological order, breaking correctness for workflows that depend on deterministic sequencing of changes/submits. Please serialize these asynchronous annotations so they flush to batchedEvents in the exact order the handlers fire.
Apply this diff to chain async work per event:
if (needsAsync) {
- asyncAnnotateEvent(vdomEvent, propName, e)
- .then(() => {
- this.batchedEvents.push(vdomEvent);
- this.queueUpdate(true, "event");
- })
- .catch((err) => {
- console.error("Error processing event:", err);
- });
+ this.pendingAsyncEventChain = this.pendingAsyncEventChain
+ .then(async () => {
+ await asyncAnnotateEvent(vdomEvent, propName, e);
+ this.batchedEvents.push(vdomEvent);
+ this.queueUpdate(true, "event");
+ })
+ .catch((err) => {
+ console.error("Error processing event:", err);
+ });And add the supporting field in the class body:
pendingAsyncEventChain: Promise<void> = Promise.resolve();🤖 Prompt for AI Agents
In tsunami/frontend/src/model/tsunami-model.tsx around lines 720 to 732, async
event annotation for file/onSubmit handlers currently races and can flush
batchedEvents out of chronological order; add a class field
pendingAsyncEventChain: Promise<void> = Promise.resolve() and change the
needsAsync branch to serialize work by chaining onto pendingAsyncEventChain
(e.g. pendingAsyncEventChain = this.pendingAsyncEventChain.then(() =>
asyncAnnotateEvent(vdomEvent, propName, e).then(() => {
this.batchedEvents.push(vdomEvent); this.queueUpdate(true, "event");
}).catch(err => { console.error("Error processing event:", err); }))); this
preserves ordering by ensuring each async annotation+push/queue runs only after
the previous one completes and errors are handled so the chain continues.
new VDomFormData and VDomFileData (and an async path for event handling on the FE)