Code generation is the process of turning the blocks on a workspace into a string of code that can be executed.
Code generation is extremely important, because it is what allows your blocks to actually do things, like evaluate arithmetic expressions, move a character through a maze, or configure an online shop!
You can't "run" blocks directly. Instead you generate code strings, and then execute those.
Language code generators
To generate code, you have to pick what text-based language you want to generate. This is because each language has its own code generator.
A language code generator (commonly called a code generator) is a class that handles the rules for generating code that are specific to a given language, but not specific to an individual block. For example, it handles things like formatting comments, indenting statements, and quoting strings.
Blockly provides 5 built-in code generators:
- JavaScript ES5
- Python 3
- Lua 5.1
- Dart 2
- PHP 7
If this list doesn't include the language you want to generate code for, you can create a custom language code generator. For a simple example, see the Build a custom generator codelab, which creates a JSON language code generator. For a more complex example, see the JavaScript code generator. Note that you also need to write block-code generators for any built-in blocks that you want to use.
Block-code generators
Each block is responsible for generating its own code. When you create a block, you need to write a separate block-code generator for each language you want to support.
A block-code generator is a function that returns the code for that block as
a string. For example, a block that compares two numbers returns a string of the
form 'a < b'
and a block that represents an if statement returns a string of
the form 'if (...) {\n...\n};\n'
.
import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
// Write block-code generators for JavaScript and Python.
javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };
pythonGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };
Block-code generators are called by language code generators.
For more information, see Block-code generators.
Generate and run code
Your application can generate code at any time. For example, it might generate code when the end-user clicks a button or every time the user makes a change.
After you've generated the code, you need to figure out how to execute it. Deciding how to execute it is very application-specific, and outside the scope of Blockly.
For more information, see Generate and run code.