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 realiza un cambio.

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

Importa un generador de códigos de idioma

Para generar código, necesitas un generador de códigos de idioma. 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. Generar código es una operación rápida, por lo que tiene un pequeño impacto en el rendimiento. Esto se hace 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 un código de preámbulo o postfijo

Después de generar el código, puedes incluir código de forma opcional antes del comienzo 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;

Por lo general, el código del preámbulo se usa para incluir definiciones externas al comienzo del código. Por lo general, el código Postscript se usa para llamar a funciones que inician 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 un postfijo.

Ejecuta código

Después de generar el código, debes descubrir 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 idiomas requieren otras herramientas.