NPM + Blockly Code generation

[Frederik Obe]

Hello everybody, 

at the moment I am using Blockly in my Angular 9+ project via the official npm package.

I have managed to integrate the workspace/ toolbox and generate my custom blocks (to some extent). However, generating php code has a blocker: The Blockly.PHP package "does not seem to exist". Same with Mutator related elements btw.

It seems like I am missing some packages, do I need to do extra steps after "npm i blockly"?

Thanks in advance for your help
Fred

[Sam El-Husseini]

Hello Fred, 

What do your import statements look like? I assume you're doing something like 

import Blockly from 'blockly';

If so, the default package includes Blockly core, Blockly blocks, the JavaScript generator and the English locale files.

Since you're after the PHP generator, you'll need to import that yourself. 

You can add:

import 'blockly/php';

to import the php generator.

If you have no use for the JavaScript generator and want to ensure that it doesn't get included in your bundle, you can instead be explicit about what you're including, like so:

import Blockly from 'blockly/core'; // Blockly core
import 'blockly/blocks'; // Blockly blocks
import 'blockly/php'; // PHP Generator
import * as En from 'blockly/msg/en'; // English locale files
Blockly.setLocale(En);

You can find more info about this at https://www.npmjs.com/package/blockly.

You can also find samples on integrating Blockly from npm into your project at https://github.com/google/blockly-samples

Cheers,

Sam