Blockly is now publishing to NPM!!

254 views
Skip to first unread message

Sam El-Husseini

unread,
Aug 13, 2019, 12:54:49 PM8/13/19
to Blockly
Hey all,

We wanted to let you know that we are now officially publishing Blockly releases on NPM.

Our npm package wraps each of our compressed files into a UMD module to allow you to do something like this in your web apps: 
import * as Blockly from 'blockly';

We have also built up a number of different samples to demonstrate how to integrate Blockly into your projects. 
Currently there are samples for React, Node, Webpack, Angular, Vue, UMD, and RequireJS. You can find the samples here:

As always, we'd very much appreciate your feedback.

Cheers,
Sam

Noah G

unread,
Aug 13, 2019, 1:37:42 PM8/13/19
to blo...@googlegroups.com
Great work!!!

Quick question how would you create your own custom blocks and generators.  I know this is a lot to ask but could you create a demo of that?

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/ac876560-4465-4f05-90b1-56156204dae2%40googlegroups.com.

Coda Highland

unread,
Aug 13, 2019, 1:46:01 PM8/13/19
to blo...@googlegroups.com
Creating your own custom blocks should be the same -- after importing Blockly, you just add your definition to Blockly.Blocks and Blockly.JavaScript (or Blockly.Python or whatever).

Creating your own generator from the ground up instead of extending an existing one... Well, you can't really put it inside the "Blockly" namespace, but other than that it shouldn't be different, either.

I'm not a fan of `import * as Blockly`, though. I would rather Blockly add a `default` export that is the Blockly object. `import *` is generally considered bad practice, and while `as Blockly` addresses the main reason not to do that (`import *` screws with static analysis so you can't tell what names are in scope at any given time, but assigning it to a name fixes that) it's still not the way it's usually done.

/s/ Adam

Nat Budin

unread,
Aug 13, 2019, 2:02:49 PM8/13/19
to Blockly
Following onto this, I wanted to also let people know that react-blockly (formerly react-blockly-component) has just released version 4.0.0 to take advantage of this new npm package!  You can check it out here: https://github.com/nbudin/react-blockly

Nat

Sam El-Husseini

unread,
Aug 13, 2019, 2:17:53 PM8/13/19
to Blockly
Hey Adam, 

Thanks for your feedback. Good to know about the bad practice with `import *`.
I do have a default export. Instead you can do `import Blockly from 'blockly'` to get that.
Am I missing something?

Cheers,
Sam

On Tuesday, August 13, 2019 at 10:46:01 AM UTC-7, Coda Highland wrote:
Creating your own custom blocks should be the same -- after importing Blockly, you just add your definition to Blockly.Blocks and Blockly.JavaScript (or Blockly.Python or whatever).

Creating your own generator from the ground up instead of extending an existing one... Well, you can't really put it inside the "Blockly" namespace, but other than that it shouldn't be different, either.

I'm not a fan of `import * as Blockly`, though. I would rather Blockly add a `default` export that is the Blockly object. `import *` is generally considered bad practice, and while `as Blockly` addresses the main reason not to do that (`import *` screws with static analysis so you can't tell what names are in scope at any given time, but assigning it to a name fixes that) it's still not the way it's usually done.

/s/ Adam

On Tue, Aug 13, 2019 at 12:37 PM Noah G <glase...@gmail.com> wrote:
Great work!!!

Quick question how would you create your own custom blocks and generators.  I know this is a lot to ask but could you create a demo of that?

On Tue, Aug 13, 2019 at 9:54 AM 'Sam El-Husseini' via Blockly <blo...@googlegroups.com> wrote:
Hey all,

We wanted to let you know that we are now officially publishing Blockly releases on NPM.

Our npm package wraps each of our compressed files into a UMD module to allow you to do something like this in your web apps: 
import * as Blockly from 'blockly';

We have also built up a number of different samples to demonstrate how to integrate Blockly into your projects. 
Currently there are samples for React, Node, Webpack, Angular, Vue, UMD, and RequireJS. You can find the samples here:

As always, we'd very much appreciate your feedback.

Cheers,
Sam

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.

Coda Highland

unread,
Aug 13, 2019, 2:20:35 PM8/13/19
to blo...@googlegroups.com
Nope, you're not missing anything. I hadn't actually tried it yet; I was just going by what you had said in the initial message. Good to hear it works as expected!

/s/ Adam

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/cea22619-2f2e-4cba-b83f-a0e0fcafdf8f%40googlegroups.com.

Uwe K

unread,
Aug 14, 2019, 7:51:31 AM8/14/19
to Blockly
That's great news, thank you!
How do I build the UMD module? Run the gulp release script?

Erik Pasternak

unread,
Aug 14, 2019, 3:53:58 PM8/14/19
to Blockly
Yep, if you need to build it yourself you can npm install in Blocky and then run the gulp umd task.

Cheers,
Erik

Savvystic

unread,
Aug 20, 2019, 8:41:28 PM8/20/19
to Blockly
Thats just awesome ... exactly what I was looking for :-)

I have quickly tested the react sample , It works perfectly on my local server but when I executed run build and deployed it to a shared hosting (savvystic.com) , it didnt work !
the console shows " Uncaught SyntaxError: Unexpected token < " twice !
I have changed nothing yet so I am not sure whats the issue ... thought ?

Sam El-Husseini

unread,
Aug 20, 2019, 11:20:15 PM8/20/19
to Blockly
Hey, 

I think there's something wrong with your hosting service / configuration. 
The JS files are returning the HTML file instead, see: http://www.savvystic.com/static/js/main.c4d0017b.chunk.js

Cheers, 
Sam

Savvystic

unread,
Sep 17, 2019, 8:47:36 PM9/17/19
to Blockly
You were right Sam , it was my hosting.
thanks

Savvystic

unread,
Sep 29, 2019, 3:34:29 AM9/29/19
to Blockly
Hi Sam & Everyone , 

what does the error below mean ? 

I am trying to build a custom block using react component sample provided. the custom block should have no output , instead a connection from button and one from the top.

block definition :
Blockly.defineBlocksWithJsonArray([{type:"motoriot",message0:"Choose an Motor %1 %2 Trun %3",args0:[{type:"field_dropdown",name:"motor",options:[["M1","M1"],["M2","M2"],["M3","M3"],["M4","M4"]]},{type: "input_dummy",align:"CENTRE"},{type: "field_dropdown",name: "action",options:[["+","+"],["-","-"]]}],previousStatement:null ,nextStatement: null,inputsInline: "false",colour: 180 ,tooltip:"IOT Control",helpUrl:""}]);

my java script code :
Blockly.JavaScript.motoriot=function(a){var b="+"==a.getFieldValue("motor")?true:false; return["Hello World"]};

if i just replace previousStatement:null ,nextStatement: null with  output:"Boolean"  , it works !!!! but this is not the block i want .

Thank you in advance


TypeError: Expecting string from statement block: motoriot
Blockly.Generator.blockToCode
26315 | c = c.call(a, a);
26316 |
26317 | if (Array.isArray(c)) {
> 26318 | if (!a.outputConnection) throw TypeError("Expecting string from statement block: " + a.type);
| ^ 26319 | return [this.scrub_(a, c[0], b), c[1]];
26320 | }
26321 |

Coda Highland

unread,
Sep 29, 2019, 10:01:29 AM9/29/19
to blo...@googlegroups.com
In truth, this doesn't have anything to do with the npm version of Blockly. Rather, the error message is telling you exactly what you need to know: statement blocks need to have their code generator functions return a string. You're returning an array, which is what value blocks do. Just take out the [] and it should work.

/s/ Adam

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

Kyota Nagao

unread,
Oct 1, 2019, 10:30:33 AM10/1/19
to Blockly
That's good to know!

I'm Japanese engineer. I use Blockly with React.js for work.
Last month, I wrote web application development fanzine using Blockly.

I want to work hard on development!


2019年8月14日水曜日 1時54分49秒 UTC+9 Sam El-Husseini:
Reply all
Reply to author
Forward
0 new messages