rewrite Blockly.inject

622 views
Skip to first unread message

vantest...@gmail.com

unread,
Apr 11, 2017, 5:13:27 AM4/11/17
to Blockly
Hi

When I try to integrate Blockly into my application, it fails on Blockly.inject.
The part where the workspace is constructed.

workspace = Blockly.inject('blocklyDiv',
          {comments: true,
           collapse: true,
           disable: true,
           grid:
             {spacing: 25,
              length: 3,
              colour: '#ccc',
              snap: true},
           horizontalLayout: side == 'top' || side == 'bottom',
           maxBlocks: Infinity,
           media: '../media/',
           oneBasedIndex: true,
           readOnly: false,
           rtl: rtl,
           scrollbars: true,
           toolbox: toolbox,
           toolboxPosition: side == 'top' || side == 'start' ? 'start' : 'end',
           zoom:
             {controls: true,
              wheel: true,
              startScale: 1.0,
              maxScale: 4,
              minScale: .25,
              scaleSpeed: 1.1}
          });

Is there a possibility to rewrite this piece of code so I can make it work?

Thanks,
Walter

Neil Fraser

unread,
Apr 11, 2017, 5:28:49 AM4/11/17
to blo...@googlegroups.com
Can you be more specific about what "it fails" means?  As in give us the actual error?  Thanks.

--
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.
For more options, visit https://groups.google.com/d/optout.



--

vantest...@gmail.com

unread,
Apr 11, 2017, 5:34:08 AM4/11/17
to Blockly, ro...@neil.fraser.name
Hi

The error I'm getting is:
VM358:28


Uncaught TypeError: Blockly.inject is not a function at start (<anonymous>:28:23)

Thanks,
Walter

Op dinsdag 11 april 2017 11:28:49 UTC+2 schreef Neil Fraser:
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Neil Fraser

unread,
Apr 11, 2017, 5:52:13 AM4/11/17
to blo...@googlegroups.com
Interesting, this implies that Blockly exists, but the function isn't there.  What are your script tags for loading Blockly?  Should be something like:
<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script
src="msg/js/en.js"></script>
Can you also verify that whatever files you are loading are actually being found?  Check your console for 404 errors.


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

For more options, visit https://groups.google.com/d/optout.

vantest...@gmail.com

unread,
Apr 11, 2017, 5:57:54 AM4/11/17
to Blockly, ro...@neil.fraser.name
Hi

I'm loading these scripts:

<script src="/blockly/blockly/original/blockly-master/blockly_compressed.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks_compressed.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/logic.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/loops.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/math.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/text.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/lists.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/colour.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/variables.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/custom.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/procedures.js"></script>
<script src="/blockly/blockly/original/blockly-master/msg/messages.js"></script>
<script src="/blockly/blockly/original/blockly-master/msg/js/en.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/logic.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/loops.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/math.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/text.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/lists.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/colour.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/custom.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/variables.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/procedures.js"></script>

The files I'm loading are in the scripts and everything is status code 200.
The only problem is the error that it's not a function.

Thanks,
Walter

Op dinsdag 11 april 2017 11:52:13 UTC+2 schreef Neil Fraser:

Neil Fraser

unread,
Apr 11, 2017, 6:07:13 AM4/11/17
to blo...@googlegroups.com
So there's some duplication here:

<script src="/blockly/blockly/original/blockly-master/msg/messages.js"></script>
<script src="/blockly/blockly/original/blockly-master/msg/js/en.js"></script>
You only want one of these, presumably en.js (or nl.js).

Also, all of these files (not including custom.js):

<script src="/blockly/blockly/original/blockly-master/blocks/logic.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/loops.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/math.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/text.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/lists.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/colour.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/variables.js"></script>
<script src="/blockly/blockly/original/blockly-master/blocks/procedures.js"></script>
are already included as part of:
<script src="/blockly/blockly/original/blockly-master/blocks_compressed.js"></script>

Likewise, the following files (not including custom.js):
<script src="/blockly/blockly/original/blockly-master/generators/javascript.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/logic.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/loops.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/math.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/text.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/lists.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/colour.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/variables.js"></script>
<script src="/blockly/blockly/original/blockly-master/generators/javascript/procedures.js"></script>
can be replaced with:
<script src="/blockly/blockly/original/blockly-master/javascript_compressed.js"></script>

See what happens if you remove the duplication.  I'm not entirely clear how the duplication could cause this error, but at least the amount of code can be greatly reduced.

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

For more options, visit https://groups.google.com/d/optout.

vantest...@gmail.com

unread,
Apr 11, 2017, 7:38:04 AM4/11/17
to Blockly, ro...@neil.fraser.name
Hi

This doesn't fix the problem, but thanks for the code reduction.
It looks more clean already.

Walter

Op dinsdag 11 april 2017 12:07:13 UTC+2 schreef Neil Fraser:

Neil Fraser

unread,
Apr 11, 2017, 7:50:48 AM4/11/17
to blo...@googlegroups.com
blockly_compressed.js should define Blockly.inject.  My best guess at this point is that something is overwriting the Blockly namespace after Blockly.inject has been created.

What happens if you open your JavaScript console and type:
  Blockly.inject
We want it to say that it's a function.  It should not say "undefined" or "Blockly is not defined".

Assuming it says it is "undefined", try commenting out the script tags for your two custom.js files, as well as javascript_compressed.js, and blocks_compressed.js.  Then try "Blockly.inject" on the console again.

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

For more options, visit https://groups.google.com/d/optout.

vantest...@gmail.com

unread,
Apr 11, 2017, 7:58:27 AM4/11/17
to Blockly, ro...@neil.fraser.name
Hi

In both cases it said undefined.

Thanks,
Walter

Op dinsdag 11 april 2017 13:50:48 UTC+2 schreef Neil Fraser:

Neil Fraser

unread,
Apr 11, 2017, 8:06:23 AM4/11/17
to blo...@googlegroups.com
Is there somewhere public we can see this?  I'd like to poke at it interactively.

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

For more options, visit https://groups.google.com/d/optout.

vantest...@gmail.com

unread,
Apr 11, 2017, 10:32:39 AM4/11/17
to Blockly, ro...@neil.fraser.name
Hi

It's practically impossible to show you my project. It's integrated in Servoy.
I'm going to try to talk you through the problem and what I can see.

When I call Blockly in the console through my application (wrapped in a component) it gives me:

Object { Xml: Object, Mutator: Object, getMainWorkspace: Blockly.getMainWorkspace(), addChangeListener: Blockly.addChangeListener() }

When I start it normaly (through the playground.html) it gives me:

Object { Blocks: Object, Touch: Object, longPid_: 0, longStart_: Blockly.longStart_(), longStop_: Blockly.longStop_(), onMouseUp_: Blockly.onMouseUp_(), onMouseMove_: Blockly.onMouseMove_(), Workspace: Blockly.Workspace(), Bubble: Blockly.Bubble(), Icon: Blockly.Icon(), 108 more… }

Thanks,
Walter



Op dinsdag 11 april 2017 14:06:23 UTC+2 schreef Neil Fraser:

Neil Fraser

unread,
Apr 11, 2017, 11:00:15 AM4/11/17
to blo...@googlegroups.com
Perfect debugging.

That's the signature that your blockly_compressed.js got compressed way too hard.  In particular, it looks like tree-shaking trimmed of almost all the code.  I'll bet it is really small too.  I hope that you built this file yourself and it's not from Google's GitHub repo?  If you built it yourself, then try using the one on GitHub.  If you got this one from GitHub, then the folks in Mountain View are about to be busy when they wake up in an hour or so.  :)

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

For more options, visit https://groups.google.com/d/optout.

vantest...@gmail.com

unread,
Apr 12, 2017, 1:55:55 AM4/12/17
to Blockly, ro...@neil.fraser.name
Hi Neil

Sadly enough it's the one from GitHub.

Thanks for all the help,
Walter

Op dinsdag 11 april 2017 17:00:15 UTC+2 schreef Neil Fraser:

Neil Fraser

unread,
Apr 12, 2017, 5:36:58 AM4/12/17
to blo...@googlegroups.com
Three questions:
1) Are you pulling from Blockly's master or the develop branch?
2) What is the file size of blockly_compressed.js (should be about 650kb)
3) How old is the file?  Does the problem resolve if you get the latest version of Blockly from GitHub?

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

For more options, visit https://groups.google.com/d/optout.

vantest...@gmail.com

unread,
Apr 12, 2017, 6:05:12 AM4/12/17
to Blockly, ro...@neil.fraser.name
Hi Neil

I fixed the problem. It was all Servoy who couldn't find and load the right scripts.

Thanks,
Walter

Op woensdag 12 april 2017 11:36:58 UTC+2 schreef Neil Fraser:
Reply all
Reply to author
Forward
0 new messages