Add Blockly visual programming tools for JSON, Justin, and Jessie

[Copilot]

Implements visual block-based programming interfaces for the three Jessie language layers (JSON → Justin → Jessie) to support educational use cases.

Implementation

• New package: packages/blockly-tools with Vite-based build system
• Block definitions: Custom Blockly blocks matching grammar specifications in packages/parse/src/quasi-*.js
  • JSON: 8 blocks (primitives, arrays, objects)
  • Justin: 20 blocks (JSON + undefined, NaN, Infinity, BigInt, operators, property access, template literals)
  • Jessie: 30 blocks (Justin + variables, destructuring, functions, control flow, error handling, imports, modules, compound assignments)
• Code generators: Real-time conversion from blocks to syntactically valid code
• UI: Tabbed interface with live preview and clipboard integration
• Scripts: yarn dev (HMR), yarn build (static deployment), yarn test (Vitest), yarn test:watch (watch mode)
• Test suite: 42 tests passing + 2 test.todo using Vitest with data-driven JSON block definitions

Structure

packages/blockly-tools/
├── src/
│   ├── blocks/          # Block definitions (json|justin|jessie)-blocks.js
│   ├── generators/      # Code generation logic
│   ├── toolbox/         # Block palette configurations
│   └── main.js          # Entry point, workspace initialization
├── test/
│   ├── test-data.json      # Test cases with JSON block definitions
│   └── generators.test.js  # Vitest test suite (42 passing tests)
├── public/index.html    # Single-page app
├── vitest.config.js     # Vitest configuration
└── README.md            # User docs (students/learners)
    CONTRIBUTING.md      # Developer docs with testing conventions

Testing

Tests use Vitest (Vite's official test framework) with comprehensive data-driven coverage:

• 42 passing tests validating block definitions and code generation
• Test data: test-data.json using Blockly's JSON serialization format
• Test runner: test/generators.test.js with Vitest
• Coverage includes:
  • Examples from Hardened JavaScript intro slides (emoji strings, arrays, objects, ternary, typeof)
  • Parse package test examples
  • Edge cases (special characters, escaping, formatting)
  • makeCounter example (partial - demonstrates compound assignments and arrow functions)
• Test TODOs: makeMint (complex), makeCounter full implementation

Watch mode available: yarn test:watch

Key Features

• JSON-compliant: Object keys properly quoted in JSON tool, unquoted in Jessie/Justin tools per language specs
• Template literals: Full support for Justin template literals with interpolation
• Destructuring: Object and array destructuring patterns for Jessie
• Module imports: Named, aliased, and namespace imports for Jessie
• Arrow functions: Both expression-body and block-body arrow functions with proper parenthesization
  • Single parameter: init => ... (no parentheses)
  • Empty or multiple parameters: () => ... and (a, b) => ... (with parentheses)
• Compound assignments: +=, -=, *=, /=, %= operators with assignment expression block
• Assignment expressions: Properly parenthesized for precedence: () => (value += 1)
• Proper formatting: 2-space indentation, correct comma handling in arrays/objects
• Comprehensively tested: 42 tests covering generators and real-world examples from slides

Screenshots

JSON Tool - Data Structures

Justin Tool - Pure Expressions

Jessie Tool - Full Language

Deployment-ready for GitHub Pages, Netlify, Vercel, Cloudflare via dist/ output.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>blockly tools for playing with Jessie, Justin, JSON</issue_title> <issue_description>In packages/parse/src, we have grammars for each of 3 layered languages:

• JSON - quasi-json.js.ts - the base object grammar.
• Justin - quasi-justin.js.ts the pure expression grammar (no loops).
• Jessie - quasi-jessie.js.ts the top-level module grammar.

In a new package, make Blockly-based tooling (including web-based tools for use by students learning the language) for each. For reference:

• Define custom blocks  |  Blockly
• Generate code  |  Blockly

Separate material for users such as getting started in the README.md vs for developers such as how to test in CONTRIBUTING.md.

The code should be documented concisely: don't repeat what the code says. Only add docs that an experienced JS dev would find cost-effective to maintain. For each file, include a brief @file comment at the top with @see references to the main exports / functions, which have documentation that's visible in IDEs.

Include a para such as the above in CONTRIBUTING.md.

The new package should have npm scripts to

• run the tools in dev mode with hot module reloading
• build for deployment to static site hosting such as github pages, netflify, vercel, cloudflare, etc.

stretch goal:

• unit tests, especially re-using any existing examples or test materials
• batch tooling, to the extent that's conventional in the Blockly community

Don't go nutso with frameworks such as react. Vanilla JS should suffice.

By way of example, this is a blockly tool for the rho calculus subset of rholang.

• https://github.com/rchain/developer.rchain.coop/blob/master/rho-blockly.html
• https://github.com/rchain/developer.rchain.coop/blob/master/js/rhocalc-blocks.js
• https://github.com/rchain/developer.rchain.coop/blob/master/js/rhocalc-blocks.json

---

FYI: recent relevant news:

• Building the future with Blockly at Raspberry Pi Foundation | Google Open Source Blog</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes endojs/Jessie#126

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• developers.google.com
  • Triggering command: /usr/bin/curl curl -s REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[dckc]

@kriskowal @michaelfig PTAL.

trial deployment: https://jessie-blockly1.netlify.app/

The test suite includes the bulk of the examples from

• Intro to Hardened JavaScript

makeCounter is working but for an indentation quirk: