La generación de código es el proceso de convertir los bloques de un lugar de trabajo en un cadena de código que puede ejecutarse.
La generación de código es muy importante, porque es lo que permite que tus bloques realmente realizan acciones, como evaluar expresiones aritméticas, mover un carácter pasar por un laberinto o configurar una tienda en línea.
No puedes "correr" directamente. En su lugar, generas cadenas de código y, luego, ejecutarlas.
Generadores de código
Para generar el código, debes elegir qué lenguaje basado en texto deseas generar.
Un generador de código es una clase que maneja las reglas para generar código que se específicas de un idioma determinado, pero no de un bloque individual. Para ejemplo, maneja cosas como dar formato a comentarios, aplicar sangría a las sentencias y entre 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 con 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);
Sin empaquetar
Debes incluir el generador después de incluir 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 incluir 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 idioma para el que deseas generar el código, puedes también crear un generador de código personalizado
Generadores de códigos de bloque
La segunda parte de la generación de código es definir qué código de los bloques individuales generar. Esto se debe hacer en cada bloque, para cada idioma individual queremos generar.
javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }
El funcionamiento de los generadores de código es diferente para los diferentes tipos de bloques:
Sin embargo, todos requieren recopilar los valores de los campos, recopilar bloques internos códigoy, luego, concatenar esas cadenas.
Generación
La generación se puede realizar cuando el usuario final lo solicita (por ejemplo, cuando hacer clic en un botón) o que se pueda hacer continuamente.
Las actualizaciones continuas te permiten mostrar o ejecutar el código cada vez que el usuario realiza una cambio. La generación de código es una operación rápida, por lo que hay poco rendimiento. impacto para hacer esto. Para ello, se utiliza 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);
Código del preámbulo o postscript
Después de que hayas generado tu código, puedes incluir el preámbulo (opcional) o el código 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`;
Por lo general, el código del preámbulo se usa para incluir definiciones externas al comienzo. del código. El código Postscript suele usarse para llamar a funciones para iniciar del modelo al final del código.
Si el código generado se puede ejecutar tal como está, no es necesario incluir un preámbulo o postscript.
Ejecución
Después de generar el código, debes descifrar cómo ejecutarlo. Decidir cómo ejecutarlo es muy específico de la aplicación y está fuera del alcance. de Blockly.
Para el código JavaScript, el equipo de Blockly recomienda utilizar la JSInterpreter. Otros lenguajes requieren otras herramientas.