What are the steps to create a language generator that's a fork of JavaScript?

[H]

It would be almost exactly the same, except for a few minor differences. There would be no "let" keyword, for example.

[Neil Fraser]

Our JavaScript generators should generate pure ES5, there is no 'let' anywhere in the output.  If there is, that's a bug we need to fix.

Am Sa., 5. März 2022 um 14:32 Uhr schrieb H <ha...@reach.sh>:

It would be almost exactly the same, except for a few minor differences. There would be no "let" keyword, for example.

--
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/63c7579e-f830-42c5-a9e1-d0cc2a6d504dn%40googlegroups.com.

--

Neil Fraser
https://neil.fraser.name

[H]

There are other differences, too. For instance, we only allow "var" immediately before a "while" loop.

[Neil Fraser]

The JavaScript language generators for the default blocks are here:

  https://github.com/google/blockly/tree/master/generators/javascript

And the higher-level constructs are here:

  https://github.com/google/blockly/blob/master/generators/javascript.js

You could just edit these files in place.  Or you could duplicate them, use search-and-replace to change "JavaScript" to "HamirScript" (or something), and treat it as a new language.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/020b833c-d94b-4508-9b57-11a1e55e2831n%40googlegroups.com.

[H]

I see. Thank you for your responses.

How do I then use the forked generators in my own web server, after duplication?

[Neil Fraser]

You should be able to just import the files in your HTML:

<script src="generators/hamirscript.js"></script>

<script src="generators/hamirscript/colour.js"></script>

<script src="generators/hamirscript/lists.js"></script>

<script src="generators/hamirscript/logic.js"></script>

...

Or, if you update the build script to compile a new bundle, then you can just import:

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

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/0469ab08-e450-4001-8ad0-1cf1549e90c2n%40googlegroups.com.

[H]

I get the "You need to run 'npm install' in order to use this playground" alert when trying to do this in a completely separate, standalone environment when I try to use tests/playgrounds/advanced_playground.html as my index.html.

Besides

<script src="generators/jsFork.js"></script>
<script src="generators/jsFork/colour.js"></script>
<script src="generators/jsFork/lists.js"></script>
<script src="generators/jsFork/logic.js"></script>
<script src="generators/jsFork/loops.js"></script>
<script src="generators/jsFork/math.js"></script>
<script src="generators/jsFork/procedures.js"></script>
<script src="generators/jsFork/text.js"></script>
<script src="generators/jsFork/variables_dynamic.js"></script>
<script src="generators/jsFork/variables.js"></script>

what other things should my standalone index.html have to have an environment like tests/playgrounds/advanced_playground.html to test out this fork of JavaScript?

[Maribeth Bottorff]

Hello,

You can read our documentation about using the advanced playground here: 

https://developers.google.com/blockly/guides/modify/web/playground#prerequisites

The playgrounds that are bundled with blockly can't be loaded directly via file URL. They need to be loaded via a web server. We have several scripts provided in core Blockly that can start the playground for you and do other tasks, but you need to use npm.

However, I would recommend not writing your generator code directly inside the Blockly directories. If you do, it will make it harder for you to update Blockly in the future, and you might have to build blockly yourself (which, trust me, you want to avoid unless you have good reason to do this). Generator code can live anywhere in your project, there is no need for it to be inside the Blockly directory. To use your generator, just call it instead of the JavaScript generator whenever you need to generate code.

You can create your own test webpage that uses Blockly by following the Getting Started directions: https://developers.google.com/blockly/guides/get-started/web#get_the_code

If you want to use the advanced playground for testing I would recommend developing your generator as a plugin. You can generate skeleton code for a plugin by running our script as described here: https://developers.google.com/blockly/guides/modify/contribute/add_a_plugin#implementation . This skeleton code will come with an advanced playground that you can start with `npm run start` as well as several other useful scripts.

Hope that helps,

Maribeth

[H]

Hello Maribeth,

I'm going with the plugin route and I've got a directory set up that looks like this.

```

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----          3/7/2022   4:10 PM                node_modules
d-----          3/7/2022   4:09 PM                src
d-----          3/7/2022   4:09 PM                test
-a----          3/7/2022   4:08 PM            593 GETSTARTED.md
-a----          3/7/2022   4:09 PM         713075 package-lock.json
-a----          3/7/2022   4:11 PM           1424 package.json
-a----          3/7/2022   4:09 PM            757 README.md

```

Where do I put the following?

```

<script src="generators/jsFork.js"></script>
<script src="generators/jsFork/colour.js"></script>
<script src="generators/jsFork/lists.js"></script>
<script src="generators/jsFork/logic.js"></script>
<script src="generators/jsFork/loops.js"></script>
<script src="generators/jsFork/math.js"></script>
<script src="generators/jsFork/procedures.js"></script>
<script src="generators/jsFork/text.js"></script>
<script src="generators/jsFork/variables_dynamic.js"></script>
<script src="generators/jsFork/variables.js"></script>

```

Thank you for your help!

[Maribeth Bottorff]

Is your generator code in the src directory? If so, then you don't need to put that html anywhere. Webpack compiles all of the code in the src and test directories into a bundle called `test_bundle` which is already imported on the test/index.html page.

Let's say your generator is declared like this (inside of the src directory)

export const MyScript = new Blockly.Generator('MyScript');

then you can import MyScript into a different file, say your test/index.js file, and call any of the functions on it.

import {MyScript} from '../src/myscript'

// Do whatever you want with your generator here, such as add a button that calls workspaceToCode

MyScript.workspaceToCode(workspace);

The plugin scripts aren't super well documented yet and that's something we need to fix, but for now let us know if you have other questions and I'd encourage you to poke around blockly-samples to see how the existing plugins work and follow their example.

[H]

I'm having some trouble. `myLang/test/index.html` does have `<script src="../build/test_bundle.js"></script>`, but `myLang/` doesn't have a `build/` directory, only a `dist/` directory, even after doing `npm run build` in `myLang` and `blockly$ npm run build` in the main directory.

`http://localhost:3000/` does run if I do `blockly/myLang$ npm start`, but `myLang` doesn't show up. How do I get `myLang` to show up there? And then afterward, if we can do that, my next step would be to "export" the playground if such a thing is possible, so we could have that playground available on our site for people to try out our language.

These are the contents of `myLang/`.

```

total 752
drwxr-xr-x   6   4096 Mar  7 19:41 .
drwxr-xr-x  19   4096 Mar  7 19:36 ..
-rw-r--r--   1    593 Mar  7 19:36 GETSTARTED.md
-rw-r--r--   1    741 Mar  7 19:36 README.md
drwxr-xr-x   2   4096 Mar  7 19:41 dist
drwxr-xr-x 546  20480 Mar  7 19:36 node_modules
-rw-r--r--   1 713067 Mar  7 19:36 package-lock.json
-rw-r--r--   1   1412 Mar  7 19:36 package.json
drwxr-xr-x   3   4096 Mar  7 19:40 src
drwxr-xr-x   2   4096 Mar  7 19:36 test

```

```

myLang$ ls dist/
index.js  index.js.LICENSE.txt  index.js.map

myLang$ ls src/
index.js  myLang  myLang.js

myLang$ ls test/
index.html  index.js

```

[H]

```

myLang$ ls src/myLang
all.js  colour.js  lists.js  logic.js  loops.js  math.js  procedures.js  text.js  variables.js  variables_dynamic.js

```

[Maribeth Bottorff]

When you say "`http://localhost:3000/` does run if I do `blockly/myLang$ npm start`, but `myLang` doesn't show up." what do you mean by "doesn't show up"? Do you mean the playground is running successfully but your generator isn't in the list of generators on the side? if so, that's to be expected as you haven't integrated the generator into the playground yet.

I would start by ignoring the sidebar and just add your own button to the page that uses your generator, like I described above, so that you can make sure it works as you expect. If that's working, it's possible to add your generator to the option in the advanced playground. This isn't well documented yet (sorry) but you can call the addGenerator method on the playground API: https://github.com/google/blockly-samples/blob/master/plugins/dev-tools/src/playground/index.js#L403 you'll have to play around with that to figure out exactly what to call but I think it would look like in your test page

createPlayground(// your options here)

  .then((playground) => {

      playground.addGenerator('Label here', MyLang);

});

The build directory should be created during `npm run build`. Are there errors output during the build? Or errors in the console when you run the playground?

As for "exporting": You can publish the generator as an npm module if you want other people to be able to use it, or you can just use import it into your own project the same way you're importing it into the test page, or using some other method if you don't want to use webpack. If you want to host the test page, you can do that however you want. For example, we host the test pages for all of the plugins on GitHub Pages, but you could put it onto your own existing site if you want to. How to host your project is up to you and isn't specific to Blockly so I can't offer you more specific advice there as there are many options for architecting, building, and hosting your application.

Maribeth

[H]

`npm run build` runs successfully, without errors, regardless of whether I do it in the root directory or in `myLang/`.

There's no build folder in `myLang/`, though, just a `dist/` directory. I assume this might be causing issues because the autogenerated

`myLang/test/index.html' looks for a `build/` directory with

``` <script src="../build/test_bundle.js"></script> ```

if I'm not mistaken.

```

h@WSL2:~/repositories/blockly$ batcat myLang/test/index.html

───────┬───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

       │ File: myLang/test/index.html

───────┼───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

   1   │ <!DOCTYPE html>

   2   │ <html>

   3   │

   4   │ <head>

   5   │   <meta charset="utf-8">

   6   │   <title>Blockly Plugin Test</title>

   7   │   <style>

   8   │     html, body {

   9   │       margin: 0;

  10   │     }

  11   │   </style>

  12   │ </head>

  13   │

  14   │ <body>

  15   │   <div id="root"></div>

  16   │   <script src="../build/test_bundle.js"></script>

  17   │ </body>

  18   │

  19   │ </html>

───────┴───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

h@WSL2:~/repositories/blockly$

```

```

h@WSL2:~/repositories/blockly$ npm run build

> blo...@7.20211209.4 build

> gulp build

[21:58:04] Using gulpfile ~/repositories/blockly/gulpfile.js

[21:58:04] Starting 'build'...

[21:58:04] Starting 'buildLangfiles'...

[21:58:04] Starting 'buildDeps'...

[21:58:04] Finished 'buildLangfiles' after 416 ms

[21:58:11] Finished 'buildDeps' after 7.46 s

[21:58:11] Starting 'buildCompiled'...

[21:58:19] Finished 'buildCompiled' after 7.88 s

[21:58:19] Finished 'build' after 15 s

h@WSL2:~/repositories/blockly$ cd myLang/

h@WSL2:~/repositories/blockly/myLang$ npm run build

> blockly-pl...@0.0.0 build

> blockly-scripts build

Running production build for blockly-plugin-myLang

Compiled successfully!

h@WSL2:~/repositories/blockly/myLang$

```

[H]

>  When you say "`http://localhost:3000/` does run if I do `blockly/myLang$ npm start`, but `myLang` doesn't show up." what do you mean by "doesn't show up"? Do you mean the playground is running successfully but your generator isn't in the list of generators on the side?

This is exactly correct.

[H]

The autogenerated files I mentioned previously are a result of running `npx @blockly/create-package myLang`, I believe.

[H]

If I try to load `myLang/test/index.html`, that doesn't work. I get

```

GET http://127.0.0.1:5500/myLang/build/test_bundle.js net::ERR_ABORTED 404 (Not Found)

```

in the console for http://127.0.0.1:5500/myLang/test/index.html, with the main window just being a blank page.

[Maribeth Bottorff]

Apologies for the late response, I was out sick at the end of last week.

1. Your plugin (generator) shouldn't be inside the blockly directory. With this method there is no need for you to have the blockly code downloaded manually at all. npm will download a copy of it when you run npm install, and otherwise you don't need to modify it in any way just to add a generator. There might be some unexpected interaction here by having the plugin inside the blockly directory. So at least move your plugin to be a sibling of the blockly directory you downloaded.

1b. Similarly, there is no need to run `npm run build` from blockly itself. The plugin is automatically set up to get blockly from npm (not from your local machine) and the code from npm is already built and packaged.

2. Loading the index.html page directly as a file URL isn't going to work, due to using modules, these have to be loaded via a server. I don't think any of our scripts use port 5500 so I'm not sure how you're loading it that way. Our start script compiles the plugin code using webpack. If you aren't using our scripts then you will need to add your own compilation method.

3. If you run `npm run start` from inside the plugin directory, and it starts up and shows a playground, then webpack must have compiled your code correctly in order for that playground to show up. If that's the case then I wouldn't worry about the build directory and just follow the steps above to add your generator.

Hope that helps. I know our documentation around this area is a little lacking so this can be confusing.

Maribeth