Geração de códigos

A geração de código é o processo de transformar os blocos de um espaço de trabalho em um string de código que pode ser executada.

A geração de código é extremamente importante, porque é o que permite que seus blocos realizar ações, como avaliar expressões aritméticas, mover um caractere em um labirinto ou configurar uma loja on-line!

Não é possível "correr" diretamente. Em vez disso, você gera strings de código executá-las.

Geradores de código

Para gerar código, é preciso escolher qual idioma baseado em texto você quer gerar.

Um gerador de código é uma classe que lida com as regras para gerar código que são específicas para um determinado idioma, mas não para um bloco individual. Para exemplo, ele lida com coisas como formatação de comentários, instruções de recuo e citar strings.

// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';

const code = javascriptGenerator.workspaceToCode(myWorkspace);

O Blockly fornece cinco geradores de código integrados:

JavaScript ES5
Python 3
Lua 5.1
Dardo 2
PHP 7

É possível importar e usar os geradores usando um dos métodos a seguir.

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);

Remover pacote

É preciso incluir o gerador após a inclusão do 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);

Scripts locais

É preciso incluir o gerador após a inclusão do 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);

Se essa lista não incluir o idioma para o qual você deseja gerar código, será possível criar também um gerador de código personalizado.

Geradores de código de bloco

A segunda parte da geração de código é definir quais blocos individuais de código gerar. Isso deve ser feito para cada bloco, para cada idioma individual que você queremos gerar.

javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }

A forma como os geradores de código funcionam é diferente para cada tipo de bloco:

Mas todas elas exigem a coleta dos valores de campos, coletar blocos internos' código e, em seguida, concatenando essas strings.

Geração

A geração pode ser feita quando o usuário final a solicitar (por exemplo, quando clicar em um botão) ou isso pode ser feito continuamente.

As atualizações contínuas permitem que você mostre ou execute o código sempre que o usuário fizer uma mudar. Como a geração de código é uma operação rápida, há pouco desempenho impacto para fazer isso. Isso é feito com um listener 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 de preâmbulo ou postscript

Depois de gerar seu código, você pode incluir (opcional) preâmbulo ou código de preâmbulo no início ou no fim do código gerado.

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;

O código do preâmbulo geralmente é usado para incluir definições externas no início do código. O código PostScript geralmente é usado para chamar funções para iniciar ao final do código.

Se o código gerado puder ser executado no estado em que se encontra, não será necessário incluir um preâmbulo ou postscript.

Execução

Depois de gerar o código, você precisa descobrir como executá-lo. Decidir como executá-lo é muito específico do aplicativo e está fora do escopo da Blockly.

Para códigos JavaScript, a equipe do Blockly recomenda o uso do JSInterpreter (em inglês). Outras linguagens exigem outras ferramentas.