Skip to content

Conversation

@iamramtin
Copy link
Contributor

@iamramtin iamramtin commented Nov 24, 2025

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 <[email protected]>
…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 <[email protected]>
  - Tests core functions: execute, validate, syntax, format, autocomplete
  - Tests JSON utilities: formatJSON, minifyJSON, validateJSON

Signed-off-by: Ramtin Mesgari <[email protected]>
- 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 <[email protected]>
Also simplified WASM initialization and auto-register server/WASM handlers.

Signed-off-by: Ramtin Mesgari <[email protected]>
- 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 <[email protected]>
@iamramtin iamramtin marked this pull request as ready for review November 25, 2025 03:54
- 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 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants