Export Blocks

[Conor Keenan]

Hi guys,

I just took a shot at the custom generator code lab and got it working. However, I didn't really like the idea of having logic, loops, and math blocks defined within one file as it can become clustered.

After looking at the Blockly Master Repo I noticed that you can combine several block files into one by requiring modules and exporting them as one. 

So I implemented this into my own app. However, my web app no longer works now as I get a blank screen when I hit "npm run install".

I believe it has something to do with me importing the {blocks} from /blocks/blocks

Does anyone know how to fix this?

[Christopher Allen]

Hi Conor,

I just took a shot at the custom generator code lab and got it working.

Great!

 

However, I didn't really like the idea of having logic, loops, and math blocks defined within one file as it can become clustered.

After looking at the Blockly Master Repo I noticed that you can combine several block files into one by requiring modules and exporting them as one. 

So I implemented this into my own app. However, my web app no longer works now as I get a blank screen when I hit "npm run install".

I believe it has something to do with me importing the {blocks} from /blocks/blocks

So, the way the blocks we provide (the "library blocks") are defined will only really work within the blockly repository.  Or, more particularly: the block definitions themselves will work anywhere, but scaffolding that surrounds them (the imports and code that installs them in Blockly) will be different outside of our repository.

Now, from the sidebar of your editor it looks like you've got parts of the Blockly repository included in your own (e.g., I see a goog/base_minimal.js) but unless you're making modifications to Blockly itself (and adding new blocks and generators is not such a modification) then you probably don't want that.

Instead, define your blocks in the documented way—all you should need is an

import * as Blockly from 'blockly';

followed by some combination of

Blockly.blocks['my_block_type'] = { /* Mixin methods */ };

and/or

Blockly.defineBlocksWithJsonArray([

  { /* JSON-style block definition }, 

  // etc.

]);

You can of course do this in more than one file if you want to split your definitions up—but in general you should only need that one import statement.

Advanced topic: we are moving towards defining blocks separately from installing them, and if you prefer to do that in your own code you can.  Define blocks like this:

// my_blocks.js

export blocks = {

  my_block_type: { /* Mixin methods */ },

  // etc.

};

or:

// my_other_blocks.js

import * as Blockly from 'blockly';

export blocks = Blockly.common.createBlockDefinitionsFromJsonArray([

  { /* JSON-style block definition }, 

  // etc.

]);

and then in your main program:

import * as Blockly from 'blockly';

import {blocks} from './my_blocks.js';

import {blocks as otherBlocks} from './my_other_blocks.js';

Blockly.common.defineBlocks(blocks);

Blockly.common.defineBlocks(otherBlocks);

 

But this probably isn't useful for most developers—it's really intended to be useful to library authors (like us!) who want to be able to provide a selection of block definitions and let the library users decide which blocks to install.

I hope that helps,

Christopher 

[Conor Keenan]

Hi Christopher,

Thanks for the great explanation and quick reply!

Do you mind answering another question for me?

I've been using the sample app "npx @blockly/create-package app <application_name>" to develop my own custom language generator and I was wondering how do I move away from the sample app and how do I manually include the following files:

[Maribeth Bottorff]

Hello!

The `package.json`, `package-lock.json`, and `.npmignore` files are part of having an npm project. If you want to start a new npm project from scratch, you can use the npm init command and it will create them for you.

The `webpack.config.js` file is there because the sample app is using webpack to build the app. If you want to use webpack, you can copy our config, or you can write your own. If you don't want to use webpack, you don't need this file.

The sample app was designed to be copied and then modified to suit your needs. So if you want, there is no need to move your code away from it, and you can just customize the values in these various configurations to suit your needs. If you already have an app in another location, and are just trying to copy the code you wrote from the generator codelab into your existing app, then these files are not required unless your app needs them. You can just copy the generator-related code you wrote and adjust it for your application.

Hope that helps,

Maribeth