Geração de código

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

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

Não é possível executar blocos diretamente. Em vez disso, você gera strings de código e depois as executa.

Geradores de código

Para gerar um código, escolha qual idioma baseado em texto você quer gerar.

Um gerador de código é uma classe que processa as regras para gerar códigos específicos de uma determinada linguagem, mas não de um bloco individual. Por exemplo, ela processa comentários de formatação, instruções de recuo e citação de strings.

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

const code = javascriptGenerator.workspaceToCode(myWorkspace);

O Blockly oferece cinco geradores de código integrados:

  • JavaScript ES5
  • Python 3
  • Lua 5.1
  • Dardo 2
  • PHP 7

É possível importar e usar os geradores com 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);

Pacote

Inclua o gerador depois de incluir o 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

Inclua o gerador depois de incluir o 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 a linguagem para a qual você quer gerar o código, também será possível criar um gerador de código personalizado.

Geradores de código de bloco

A segunda parte da geração do código é definir qual código os blocos individuais geram. Isso precisa ser feito para cada bloco, para cada linguagem individual que você quer gerar.

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

A forma como os geradores de código funcionam é diferente para diferentes tipos de blocos:

No entanto, todos eles exigem a coleta dos valores dos campos, a coleta do código de blocos internos e a concatenação dessas strings.

Geração

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

As atualizações contínuas permitem mostrar ou executar o código sempre que o usuário fizer uma mudança. A geração de código é uma operação rápida, por isso há pouco impacto no desempenho. 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 do preâmbulo ou pós-script

Depois de gerar o código, é possível incluir (opcional) o código do preâmbulo ou do preâmbulo no início ou no final 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 a fim de iniciar o comportamento 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 um postscript.

Execução

Depois de gerar o código, você precisa descobrir como executá-lo. A decisão de como executá-lo é muito específica do aplicativo e fora do escopo do Blockly.

Para código JavaScript, a equipe do Blockly recomenda o uso do JSInterpreter. Outras linguagens exigem outras ferramentas.