Génération de code

La génération de code consiste à transformer les blocs d'un espace de travail en chaîne de code pouvant être exécutée.

La génération de code est extrêmement importante, car c'est elle qui permet à vos blocs effectuer des actions, comme évaluer des expressions arithmétiques, déplacer un caractère dans un labyrinthe ou configurer une boutique en ligne !

Vous ne pouvez pas « courir » les blocs directement. Au lieu de cela, vous générez des chaînes de code, puis les exécuter.

Générateurs de code

Pour générer du code, vous devez choisir le langage textuel générer.

Un générateur de code est une classe qui gère les règles permettant de générer du code est spécifique à une langue donnée, mais pas à un blocage individuel. Pour exemple, il gère des choses comme la mise en forme des commentaires, les retraits d’énoncés et entre guillemets.

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

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly fournit cinq générateurs de code intégrés:

JavaScript ES5
Python 3
Lua 5.1
Dart 2
PHP 7

Vous pouvez importer et utiliser les générateurs en utilisant l'une des méthodes suivantes.

Modules

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

Déballer

Vous devez inclure le générateur après avoir inclus 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 locaux

Vous devez inclure le générateur après avoir inclus 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 le langage pour lequel vous souhaitez générer du code n'apparaît pas dans cette liste, vous pouvez et créer un générateur de code personnalisé.

Générateurs de code de bloc

La deuxième partie de la génération de code consiste à définir le code générer. Cette opération doit être effectuée pour chaque bloc, pour chaque langue que vous voulez générer.

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

Le fonctionnement des générateurs de code varie selon les types de blocs:

Toutefois, elles nécessitent toutes de collecter les valeurs des champs, collecter les blocs internes , puis de concaténer ces chaînes.

Génération

La génération peut être effectuée lorsque l'utilisateur final en fait la demande (par exemple, lorsqu'il cliquer sur un bouton) ou en continu.

Les mises à jour continues vous permettent d'afficher ou d'exécuter le code chaque fois que l'utilisateur effectue le changement. La génération de code étant une opération rapide, les performances sont faibles d'impact pour cela. Pour ce faire, utilisez un écouteur d'événements.

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

Code de préambule ou postscript

Après avoir généré votre code, vous pouvez inclure un préambule (facultatif) ou code de préambule au début ou à la fin du code généré.

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

Le code de préambule est généralement utilisé pour inclure des définitions externes au début du code. Le code PostScript est généralement utilisé pour appeler des fonctions pour démarrer à la fin du code.

Si votre code généré est exécutable en l'état, il n'est pas nécessaire d'inclure un un préambule ou un post-scriptum.

Exécution

Après avoir généré le code, vous devez déterminer comment l'exécuter. Le choix de la méthode d'exécution dépend de l'application et n'entre pas dans le cadre de Blockly.

Pour le code JavaScript, l'équipe Blockly recommande d'utiliser le JSInterpreter. Les autres langages nécessitent d'autres outils.