feat(bloblang): Improve Bloblang playground with Go/WASM migration by iamramtin · Pull Request #570 · warpstreamlabs/bento

iamramtin · 2025-11-24T11:40:33Z

Summary

Improves the Bloblang playground by migrating core logic from JavaScript to Go/WASM.

The playground previously duplicated some of Bloblang logic in JavaScript, creating maintenance overhead and potential inconsistencies. By moving to Go/WASM, we:

Better align it with the rest of the codebase
Reuse existing Bloblang environment and validation logic directly
Eliminate duplication between Go and JS implementations
Improve type safety and error handling
Maintain a closer source of truth for Bloblang behavior

Changes

Go/WASM Migration:

Migrated execution, validation, formatting, autocompletion, and other utilities from JS to Go/WASM
Split blobl package into focused modules (core, editor, server, wasm, types)
Simplified WASM initialization and auto-register server/WASM handlers
Added elementary test suite for core playground functions (verifies playground-specific behavior without duplicating existing Bloblang tests)

JavaScript Simplification:

Extracted BloblangAPI abstraction layer for WASM/server routing
Removed unused code, dead methods, redundant functionality
Improved error handling and WASM initialization flow

Other Improvements:

Improved autocomplete with pre-rendered HTML docs and smarter context detection
Replaced hardcoded values with CSS variables and duplicate rules
Improved mobile responsive layout and overall UX

Testing

1. Run Unit Tests

make playground-test

2. Test Server Mode (Go backend via HTTP)

# Build and run playground server
go build -o bento ./cmd/bento/main.go
make playground
./bento blobl playground -p 3001 --no-open

Visit playground and verify:

Playground loads without errors
Execute mappings (try: root.name = this.name.uppercase())
Format mappings (Cmd/Ctrl+Shift+F or Format button)
Autocomplete works (type root = and trigger autocomplete)
Error messages display correctly for invalid input/mappings
Theme toggle works (light/dark mode)

3. Test WASM Mode (Client-side execution)

# Clean and rebuild
rm -rf website/static/playground
make docs
make playground
cd website && yarn start

Visit the playground in the docs and verify:

Playground loads in iframe without errors
All functionality from server mode works (execution, formatting, autocomplete)
Theme syncs with Docusaurus theme
Responsive layout works on mobile viewport (resize browser)
Full-screen mode works (click "Open in Full Screen" button)

Breaking Changes

None

- Replaced JavaScript integration with Go and WASM instead - Improved WASM API exposure and updated JS integration - Added full syntax support to formatter (operators, keywords, pipes) Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

…lidation API - Moved documentation HTML generation from JS to Go - Pre-generate docHTML for functions/methods - Added validation function - Added JSON utilities (format/minify/validate) with WASM and HTTP endpoints - Updated JS to prioritise WASM with native fallbacks - Centralized WASM function registration Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

- Tests core functions: execute, validate, syntax, format, autocomplete - Tests JSON utilities: formatJSON, minifyJSON, validateJSON Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

- Replace hardcoded values with CSS variables - Remove duplicate CSS rules - Fix mobile responsive layout - Add Bento-themed scrollbars to all editors Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

Also simplified WASM initialization and auto-register server/WASM handlers. Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

- Remove redundant JSON utilities from Go/WASM (use native JS instead) - Extract BloblangAPI abstraction layer for WASM/server routing - Remove unused code and dead methods - Improve error handling and WASM initialization flow - Improve UX Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

- Fix type mismatch in getCompletions() for functionSpecWithHTML/methodSpecWithHTML - Improve autocompletion suggestions for Bloblang keywords - Add tests to verify completion types and structure Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

iamramtin · 2026-01-22T16:15:18Z

Hey @gregfurman @jem-davies just a friendly ping to see if we can get this merged in?

gregfurman · 2026-01-22T16:17:54Z

@iamramtin hey! Thanks for the ping and sorry for delay, will give this a priority review 👍

gregfurman

I'll do another pass but have left some comments on structure and the pattern(s) used. Lmk thoughts!

gregfurman · 2026-01-22T19:08:04Z

+type FormatMappingResponse struct {
+	Success   bool   `json:"success"`
+	Formatted string `json:"formatted"`
+	Error     string `json:"error,omitempty"`


I think we can use the globally available Error function from the JS environment i.e

var errorResp FormatMappingResponse err := js.Global().Get("Error").New(errorResp.Error) panic(err) // or maybe ignore if error

Then we can treat the error case as a JS-level error and handle with a try-catch instead of this error payload approach.

Also, that way we don't need to pass around an error attribute and can focus on payload responses.

wdyt?

See 24c6fa92f2a9, lmk wyt!

gregfurman · 2026-01-22T19:10:05Z

+
+// FunctionSpecWrapper wraps query.FunctionSpec to implement Spec interface
+type FunctionSpecWrapper struct {
+	query.FunctionSpec


I don't think the entire struct needs to be embedded here since you're just using some attributes. Consider

Suggested change

query.FunctionSpec

spec query.FunctionSpec

and then

func (f FunctionSpecWrapper) GetDescription() string { return f.spec.Description }

Good call, I think this explicitness is much better 👍

gregfurman · 2026-01-22T19:12:25Z

+}
+
+// Spec represents a unified interface for function and method specs
+type Spec interface {


Why not use a dedicated Spec struct here instead with the attributes we need? Feels like 2 more structs + an interface is a bit of overkill.

How would you feel about me adding a BaseSpec to internal/bloblang/query/docs.go and having FunctionSpec and MethodSpec embed those shared attributes instead of duplicating all this logic in this file?

See commit 407ffa62b and LMK what you think, this is non-breaking and fully compatible and should let me not have to redeclare these shared attributes

And follow up 1da4e310a to see how it affects the current code

…nd MethodSpec Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

iamramtin · 2026-01-25T05:56:28Z

@gregfurman addressed comments, LMK WYT 🏁

gregfurman · 2026-01-29T13:24:59Z

+	}
+}
+
+// Test validate (Bloblang validation)


Suggested change

// Test validate (Bloblang validation)

gregfurman · 2026-01-29T15:00:15Z

+}
+
+// formatBloblang formats Bloblang code with indentation and consistent spacing
+func formatBloblang(originalMapping string) (string, error) {


ok wow I can't pretend to say I understand much of what is happening here re: all of this parsing. How did we do it previously in the playground?

gregfurman · 2026-01-29T15:13:50Z

Would it be possible to revert this refactor? I'm finding it a bit tough to see what was added versus what was refactored

I understand the difficulty in reviewing this as a mixed change, but I'd prefer not to revert as most of the diff is structural rather than behavioural

The refactor separates server lifecycle, routing, and handlers into explicit types and methods, removes large inline closures, and centralises the state into a server type. This was necessary to make this file more idiomatic when adding the new endpoints cleanly without further growing what was previously essentially just a single function

Functionally, behaviuor is the same, main change is turning implicit structure into explicit structure so future additions don't compound the layout

I’m happy to walk through the structure or split follow-ups if that helps

gregfurman · 2026-01-29T15:17:09Z

+// ------------------------------------------------------------------------------
+
+// BaseSpec contains fields shared by function and method specifications.
+type BaseSpec struct {


Thoughts on just having a custom struct inside the blobl package that maps FunctionSpec or MethodSpec to a common single type? That way, the internal/bloblang functionality does not need to be touched at all and we can keep this unified approach logic where its needed

…etions

…ompilations

…emove dead code

iamramtin added 7 commits October 2, 2025 18:43

feat(bloblang): Improve Bloblang autocomplete system

effe2d2

Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

test(bloblang): Add tests for core playground functions

7c404c6

- Tests core functions: execute, validate, syntax, format, autocomplete - Tests JSON utilities: formatJSON, minifyJSON, validateJSON Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

refactor(bloblang): Consolidate playground CSS

fd279e9

- Replace hardcoded values with CSS variables - Remove duplicate CSS rules - Fix mobile responsive layout - Add Bento-themed scrollbars to all editors Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

refactor(bloblang): Split blobl package into focused modules

63d17c1

Also simplified WASM initialization and auto-register server/WASM handlers. Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

iamramtin force-pushed the playground-v2 branch from 0b9da37 to 0d0b520 Compare November 25, 2025 03:36

iamramtin marked this pull request as ready for review November 25, 2025 03:54

iamramtin requested review from gregfurman and jem-davies as code owners November 25, 2025 03:54

iamramtin force-pushed the playground-v2 branch from 0d0b520 to fe4aa15 Compare November 25, 2025 04:02

gregfurman self-assigned this Nov 25, 2025

iamramtin mentioned this pull request Dec 4, 2025

Playground V3: Feature enhancements #600

Open

iamramtin force-pushed the playground-v2 branch from a6dd66b to 4e96b2c Compare December 6, 2025 06:22

refactor(bloblang): Improve server and WASM implementation

b98ab91

Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

iamramtin force-pushed the playground-v2 branch from 4e96b2c to b98ab91 Compare December 6, 2025 06:47

gregfurman reviewed Jan 22, 2026

View reviewed changes

iamramtin added 5 commits January 25, 2026 10:57

Refactor(bloblang): Introduce BaseSpec and embed it in FunctionSpec a…

407ffa6

…nd MethodSpec Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

Refactor(bloblang): Remove function and method spec wrappers

1da4e31

Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

Refactor(bloblang): Make environment injection explicit

8efe5ab

Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

Refactor(bloblang): Shift error handling to JS/Go boundary

24c6fa9

Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

Refactor(bloblang): Create separate WASM subpackage

2ee4747

Signed-off-by: Ramtin Mesgari <26694963+iamramtin@users.noreply.github.com>

iamramtin requested a review from gregfurman January 25, 2026 05:55

gregfurman requested changes Jan 29, 2026

View reviewed changes

refactor(playground): Simplify editor logic and improve WASM integration

97ed060

iamramtin added 6 commits March 14, 2026 10:37

test(playground): Accept Walker interface and add deterministic tests

e1037b6

refactor(playground): Remove global syntax cache and untyped getCompl…

21305e1

…etions

fix(playground): Return structured error objects across WASM/JS boundary

98f940a

fix(playground): Protect string literals before brace counting

96d6230

refactor(playground): Simplify formatting by reworking inline regex c…

7f53c30

…ompilations

refactor(playground): Encode ExecutionResult directly and tighten types

5192ce2

iamramtin requested a review from gregfurman March 14, 2026 10:32

refactor(playground): Move autocomplete context detection to JS and r…

62a32b8

…emove dead code

iamramtin force-pushed the playground-v2 branch from 6503d67 to 62a32b8 Compare March 14, 2026 10:39

refactor(playground): Cleanup and remove dead code

bf9d364

iamramtin force-pushed the playground-v2 branch from 78f3ab1 to bf9d364 Compare March 14, 2026 12:47

fix(playground): Update rendered spec descriptions

25bdfb0

Conversation

iamramtin commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Testing

1. Run Unit Tests

2. Test Server Mode (Go backend via HTTP)

3. Test WASM Mode (Client-side execution)

Breaking Changes

Uh oh!

iamramtin commented Jan 22, 2026

Uh oh!

gregfurman commented Jan 22, 2026

Uh oh!

gregfurman left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

iamramtin commented Jan 25, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

iamramtin commented Nov 24, 2025 •

edited

Loading