Genera y ejecuta código

Tu aplicación puede generar código en cualquier momento. Por ejemplo, podría generar código cuando el usuario final hace clic en un botón o cada vez que el usuario realiza un cambio.

Para obtener una descripción general de la generación de código, consulta Code generation.

Importa un generador de código de lenguaje

Para generar código, necesitas un generador de código de lenguaje. Puedes importar generadores de código de lenguaje con cualquiera 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';

// Generate code for all the blocks in the workspace.
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);

Unpkg

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>

// Generate code for all the blocks in the workspace.
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>

// Generate code for all the blocks in the workspace.
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);

Generar código

Para generar código, usa la función workspaceToCode del generador.

const code = javascriptGenerator.workspaceToCode(workspace);

Actualizaciones continuas

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 tiene poco impacto en el rendimiento. Esto se realiza con 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);

Agrega código de preámbulo o posdata

Después de generar el código, puedes incluir código antes del inicio o después del final del código generado.

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
const preamble = 'import {MyLibrary} from \'/path/to/my/library\';\n'
const postscript = 'MyLibrary.myKickoffFunction();\n';
code = preamble + code + postscript;

El código de preámbulo suele usarse para incluir definiciones externas al comienzo del código. El código de posdata suele usarse para llamar a funciones para iniciar el comportamiento al final del código.

Si el código generado se puede ejecutar tal como está, no es necesario incluir un preámbulo ni una posdata.

Ejecutar código

Después de generar el código, debes averiguar cómo ejecutarlo. Decidir cómo ejecutarlo es muy específico de la aplicación y está fuera del alcance de Blockly.

Si deseas ejecutar código JavaScript, consulta Genera y ejecuta JavaScript. En este artículo, se analizan algunas funciones especiales del generador de código JavaScript, así como JSInterpreter, que el equipo de Blockly recomienda como una forma de ejecutar JavaScript de forma segura.

Otros lenguajes requieren otras herramientas.