Blockly.javascript is undefined

[frm...@gmail.com]

In a react based blockly app am able to add blocks dynamically using:

Blockly.JavaScript['some_block_type'] = function () {....

Problem arises when testing such, in which Blockly seems to be present yet while testing the Blockly object exists yet Blockly.javascript is undefined. (See bellow.)

Any obvious suggestion?

_______________________________

// @ts-ignore
console.log("Blockly.Blocks", Blockly.Blocks);
// @ts-ignore
console.log("Blockly.JavaScript", Blockly.JavaScript);

Yields:

    console.log
      Blockly.Blocks [Object: null prototype] {
        data_array_implementation: { init: [Function: init] },
        tiny_object: { init: [Function: init] },
        string_block: { init: [Function: init] }
      }

      at Object.<anonymous> (src/Blockly/BlocklyLogic/generateContentFromXML.test.ts:114:13)

    console.log
      Blockly.JavaScript undefined

[Neil Fraser]

Don't forget to import the JavaScript generator:

<script src="javascript_compressed.js"></script>

--
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/4f222879-6b8b-4af5-8407-c729d6933c97n%40googlegroups.com.

--

Neil Fraser
https://neil.fraser.name

[Oded Fuhrmann]

Thanks Neil.

The context that I am running is a node application based on a Blockly React Component by Sam El-Husseini, which I believe was the recommended react component 2 years ago.

(I am not able to find it again in his git repo https://github.com/samelhusseini?tab=repositories.)

Pretty confused regarding what is going on.

Inside the code base I can not find an explicit reference to javascript_compressed, 

While running my code (yarn run).

// @ts-ignore
console.log("Blockly.JavaScript", Blockly.JavaScript);

yields:

Blockly.JavaScript undefined

yet doing the same thing within a file samelhusseini has created (generator.js)

console.log("MMM Blockly.JavaScript", Blockly.JavaScript);

yields:

Blockly.JavaScript Blockly.Generator {name_: 'JavaScript', FUNCTION_NAME_PLACEHOLDER_REGEXP_: /{leCUI8hutHZI4480Dc}/g, RESERVED_WORDS_: 'break,case,catch,class,const,continue,debugger,

....

Wondering how to get this functionality while testing / outside the generator file.

(adding the following:

<script src="javascript_compressed.js"></script>

did not do the job :))

 

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAEx9HWHgc0XjuQyK4B4XpfWnbiAF1T%3D87BKeZc71ira3n-P95A%40mail.gmail.com.

[Maribeth Bottorff]

Hi,

I think we need more information about how you're importing Blockly before we can help. Can you paste code where you import Blockly? Since you said it's a node application I'll assume you are using some flavor of import or require statements. The JavaScript generator should be included automatically if you import `blockly` but *not* if you import `blockly/core`. In the latter case you'll need to also import the generator from `blockly/javascript`.

Perhaps this is the example code you're using? https://github.com/google/blockly-samples/tree/master/examples/blockly-react In this code you'll notice in generator.js it imports the generator separately as I've described above.

There is also the blockly-react project which might be useful to you: https://github.com/nbudin/react-blockly

Hope that helps,

Maribeth

[Mark Friedman]

Oded, 

  I think that Sam's React component was a fork of the code from the react-blockly NPM package.  Sam's component is somewhat old (by almost 3 years) at this point, though, so I would suggest switching to the react-blockly NPM package.  That might solve your issues.  Note, though, that the config and API of the react-blockly component has changed a bit since Sam's fork, so take a close look at the usage instructions at react-blockly.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAFOSy8TPNdpxZZ_SxQ6roLzuXp7j3u7epx6w01WTs4MXPLr5iQ%40mail.gmail.com.

[Oded Fuhrmann]

Thanks Maribeth!

Indeed,  https://github.com/google/blockly-samples/tree/master/examples/blockly-react  is a newer version of the one I am using.  (Used a class based BlocklyComponent rather than the newer functional component.)

In generator.js the imports are exactly as you described, with 2 import statements.

Both generator.js and my_test.test.ts start with the same content, but the execution is triggered differently (yarn start vs yarn test)

Only the my_test.test.ts logs undefined :(.

import * as Blockly from "blockly/core";
import 'blockly/javascript';

// @ts-ignore
console.log("Blockly.Blocks", Blockly.Blocks);
// @ts-ignore
console.log("Blockly.JavaScript", Blockly.JavaScript);

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/94433cec-d1c8-4e0a-9950-8f13b828117an%40googlegroups.com.

[Oded Fuhrmann]

Thanks Mark!

Even though this is probably the right thing to do, \will do so, as a last resort...

Cheers,

Oded.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAOk7GcS5LAcn1NZ5huWRyHW5zFYD8Pk9L745PYgfvYXDcVYEaA%40mail.gmail.com.

[Mark Friedman]

My bad.  I saw a fork of the react-blockly repo in Sam's repo list and wrongly assumed that that was what you were using.  Sorry about that.  

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAFOSy8Srof2nE9xaVt7C%2B6K-21ffJFWHs%2BnDdW-t2Jy--gPH0g%40mail.gmail.com.

[Maribeth Bottorff]

Hmm, what command is `yarn test` actually running? Is it possible that script is somehow not compiling your code or is trimming this dependency? Also, what version of Blockly are you using?

The other thing you can try is `import * as JsGenerator from 'blockly/javascript'` and then reference it as `JsGenerator` in your code instead of `Blockly.JavaScript`. (And that `JsGenerator` name is up to you, so call it whatever you like)

Maribeth