Generators in the advanced playground do not work

[BeksOmega]

Describe the bug

The generators in the advanced playground are not generating code.

To Reproduce

Steps to reproduce the behavior:

1. Go to the advanced playground in core (works in samples).
2. Drag out a block.
3. Switch to any of the language generators.
4. Observe the warning in the console:

TypeError: Cannot read properties of undefined (reading 'pythonGenerator')
    at index.js:273:24
    at generate (index.js:163:22)
    at N (index.js:231:15)
    at HTMLDivElement.<anonymous> (index.js:306:11)

Expected behavior

Generators generate code.

Additional context

N/A

[BeksOmega]

More context in this thread: https://groups.google.com/g/blockly/c/hV-nDzyMU74

[Hamilton-dfp]

I believe both of the issues in that group are caused by the same root issue, and each user has tried a different work around that has led to further issues.

Here are the steps to reproduce what I believe is the core issue:

1. create custom_generator.js as described in codelab.
2. Add <script src="./custom_generator.js"></script> to the advanced_playground.html as described in the above codelab tutorial.

---

Issue 1

The codelab says:

Note: you must include your custom code after including the Blockly library.

This generated two expected results:

1. As a new user, I suspected this was out of date documentation, and that an explicit import of blockly was included in the bootstrap.js tag. Based on KI's post I believe he assumed the same thing.
2. Per this post from Abel it seems this line was interpreted to mean we also need to include a script tag that explicitly imports blockly.

---

4. Add custom block definition to custom_generator.js as described in the same codelab tutorial.
5. Add toolbox definition as described in the same codelab tutorial. Note, the tutorial suggests the variable name should be codelabToolbox.
6. Set codelabToolbox as the default toolbox in the defaultOptions var in advanced_playground.html
7. Refresh advanced_playground to see newly created blocks.

---

Issue 2

No toolbox is displayed. Continue steps to reproduce for more troubleshooting steps.

---

8. Change name of codelabToolbox var to something else, like myToolbox. Apply this change in both the custom_generator.js and advanced_playground.html files.
9. Refresh advanced playground in the browser.

---

Issue 3

Browser displays empty lavender background.

I suspect that the var codelabToobox may be defined somewhere else in the code base (???) but I have not been able to find it. Changing the name of the variable however seems to expose the real issue which is some conflict with importing the custom_generator.js script when following the instructions as they are written.

---

Work around:
Make all requested changes in the codelab tutorial directly in the advanced_playground.html in the module script instead of in a separate file.

[maribethb]

Hey @Hamilton-dfp thanks for sharing your issues with the codelab. The codelab issue is actually separate from the issue Beka is reporting here. You can follow long on the codelab-specific issue here: google/blockly-samples#1376

You can also see my forum post here with another workaround suggestion. https://groups.google.com/g/blockly/c/NfZ4rW7Liyk

[maribethb]

As for the original issue, it happens currently in both compressed and uncompressed mode of the advanced playground. I didn't do a full bisect, but it was happening before the change to remove compiled build products from the repository.

I also tried force installing @blockly/dev-tools@4 to try to use a version from before we changed the generator imports. In this case, it is broken in uncompressed mode but it actually does work in compressed mode. That makes some sense to me intuitively because in compressed mode we're loading the same python_compressed.js file that would be loaded into the plugin itself.

So I don't think this has worked in uncompressed mode for quite a while, and in compressed mode it broke when we changed the generator imports. I'm not sure how to fix this because this is such a non-standard way of loading the code, and the webpacked plugin code is expecting Blockly in a different form than we're giving it. @cpcallen any ideas?

[cpcallen]

OK, I've looked into this.

Generator loading was broken in compressed mode for all the other playgrounds; that's fixed in #6703. Fixing it for the advanced playground appears to involve figuring out how to untangle the mess that's caused by dev-tools pulling in (and using!) the blockly npm, resulting in the advanced playground using two different copies of Blockly simultaneously.

[Peter-Pinkster]

https://blockly-demo.appspot.com/static/tests/playgrounds/advanced_playground.html

I hope the php generator will be fixed