La generación de código es el proceso de convertir los bloques de un lugar de trabajo en una cadena de código que se puede ejecutar.
La generación de código es extremadamente importante, ya que es lo que permite que los bloques realmente tareas, como evaluar expresiones aritméticas, mover un personaje por un laberinto o configurar una tienda en línea.
No puedes "ejecutar" bloques directamente. En su lugar, generas cadenas de código y, luego, ejecútalas.
Generadores de código
Para generar código, debes elegir qué lenguaje basado en texto quieres generar.
Un generador de código es una clase que maneja las reglas para generar código específico de un lenguaje determinado, pero no específico de un bloque en particular. Por ejemplo, controla aspectos como el formato de comentarios, las sentencias de sangría y las strings de comillas.
// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';
const code = javascriptGenerator.workspaceToCode(myWorkspace);
Blockly proporciona 5 generadores de código integrados:
- JavaScript ES5
- Python 3
- Lua 5.1
- Dart 2
- PHP 7
Puedes importar y usar los generadores mediante uno de los siguientes métodos.
Módulos
import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';
const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);
No empaquetado
Debes incluir el generador después de agregar Blockly.
<script src="https://unpkg.com/blockly"></script>
<script src="https://unpkg.com/blockly/javascript_compressed"></script>
<script src="https://unpkg.com/blockly/python_compressed"></script>
<script src="https://unpkg.com/blockly/php_compressed"></script>
<script src="https://unpkg.com/blockly/lua_compressed"></script>
<script src="https://unpkg.com/blockly/dart_compressed"></script>
const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);
Secuencias de comandos locales
Debes incluir el generador después de agregar Blockly.
<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>
const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);
Si esta lista no incluye el lenguaje para el que quieres generar el código, también puedes crear un generador de códigos personalizados.
Generadores de código de bloque
La segunda parte para generar código es definir el código que generan los bloques individuales. Esto debe hacerse para cada bloque y para cada lenguaje individual que desees generar.
javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }
La forma en que funcionan los generadores de código es diferente para distintos tipos de bloques:
Sin embargo, todas requieren recopilar los valores de los campos y recopilar el código de los bloques internos y, luego, concatenar esas strings.
Generación
La generación se puede realizar cuando el usuario final la solicita (por ejemplo, cuando hace clic en un botón) o se puede hacer de forma continua.
Las actualizaciones continuas te permiten mostrar o ejecutar el código cada vez que el usuario realiza un cambio. La generación de código es una operación rápida, por lo que su impacto en el rendimiento es bajo. Para ello, se usa un objeto de escucha de eventos.
const supportedEvents = new Set([
Blockly.Events.BLOCK_CHANGE,
Blockly.Events.BLOCK_CREATE,
Blockly.Events.BLOCK_DELETE,
Blockly.Events.BLOCK_MOVE,
]);
function updateCode(event) {
if (workspace.isDragging()) return; // Don't update while changes are happening.
if (!supportedEvents.has(event.type)) return;
const code = javascriptGenerator.workspaceToCode(workspace);
document.getElementById('textarea').value = code;
}
workspace.addChangeListener(updateCode);
Preámbulo o código postscript
Después de generar tu código, puedes incluir un preámbulo (opcional) o un código de preámbulo al principio o al final del código generado.
let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;
El código de preámbulo generalmente se usa para incluir definiciones externas al comienzo del código. Por lo general, el código Postscript se usa para llamar a funciones a fin de iniciar el comportamiento al final del código.
Si el código generado se puede ejecutar sin modificaciones, no es necesario incluir un preámbulo o una postscript.
Ejecución
Después de generar el código, necesitas descifrar cómo ejecutarlo. Decidir cómo ejecutarlo es específico de la aplicación y está fuera del alcance de Blockly.
Para el código JavaScript, el equipo de Blockly recomienda usar JSInterpreter. Otros lenguajes requieren otras herramientas.