How to use Lexical/Logical variables with UNPKG?

[Sketch]

Hi all I am trying to install the lexical/logical variable.

but I am having some trouble.

Everytime I try to add it i get this error:  LexicalVariables is not defined.

 How do I solve this error is there anything I am missing?

Here is my code:

Import: <script src="https://unpkg.com/@mit-app-inventor/blockly-block-lexical-variables"></script>

JS: // Inject Blockly.

const workspace = Blockly.inject("blocklyDiv", {

  trashcan: false,

  toolbox: document.getElementById("toolbox"),

  plugins: {

    // These are both required.

    blockDragger: ScrollBlockDragger,

    metricsManager: ScrollMetricsManager

  },

  move: {

    scrollbars: {

      horizontal: true,

      vertical: true

    },

    drag: true,

    wheel: true

  },

  zoom: {

    controls: false,

    wheel: false,

    startScale: 1,

    maxScale: 3,

    minScale: 0.3,

    scaleSpeed: 1.2,

    pinch: false

  },

  horizontalLayout: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(

    navigator.userAgent

  ),

  toolboxPosition: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(

    navigator.userAgent

  )

    ? "end"

    : "start"

});

// Load lexical variable plugin

LexicalVariables.init(workspace);

// Initialize scroll plugin.

const scrollOptionsPlugin = new ScrollOptions(workspace);

scrollOptionsPlugin.init({ enableWheelScroll: true, enableEdgeScroll: true });

// Add the disableOrphans event handler. This is not done automatically by

// the plugin and should be handled by your application.

workspace.addChangeListener(Blockly.Events.disableOrphans);

// The plugin must be initialized before it has any effect.

const disableTopBlocksPlugin = new DisableTopBlocks();

disableTopBlocksPlugin.init();

//initilize menu

workspace.configureContextMenu = configureContextMenu;

Thanks

[Mark Friedman]

I'm afraid that we have not tested the blockly-block-lexical-variables plugin using unpkg.  We've only tested it with npm, ES6 modules and Webpack (see an example implementation here).  If someone figures out how to use it with unpkg, that would be great!

One thing to note is that the library itself does not define LexicalVariables; that's done via an ES6 module import statement.  So, you'll need to do the equivalent of

import * as LexicalVariables from '@mit-app-inventor/blockly-block-lexical-variables';

but using unpkg.

If you do figure it out, or if we need to make a change to the blockly-block-lexical-variables plugin to get unpkg to work, please let me know.

-Mark

--
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/4e079185-ac70-4ea1-b3b3-16bc441f627an%40googlegroups.com.

[Sketch]

Hi Mark thanks for writing back,

I do think the LexicalVariables plugin should be made aviable to unpkg aswel.

However can you share An example of creating such a field.

Maybe I can create My own blocks.

Thanks

Op woensdag 1 december 2021 om 21:47:13 UTC+1 schreef mark.f...@gmail.com:

[Mark Friedman]

Can you give me a sense of what you want your block to do?  That will help me in guiding you. 

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/f4a24b2d-bc82-421a-bce7-ea6a90a8f9edn%40googlegroups.com.

[Sketch]

Hi Mark,

I have a few event blocks wich for example do some statements When An error occurs, the page finishen loading, the user presses a keyboard key or click somewhere on the screen.

Depending on What dropdown value is selected e.g. the page finishes loading i want no lexical variables output.

But When An error occurs i want to be able to add a lexical variables output providing the user with the error message of When a keyboard key is pressed i want to have 2 lexical variables output providing the key name and the key code.

And possiy create An alternative for the plugin.

Thanks

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

[Mark Friedman]

Thanks.  I think I have a decent idea of what you are looking for.  I'll attempt to create a simple version of your block using the plugin and then we can discuss.

BTW, I don't have a solution yet for the unpkg issue, but there appears to be a CDN similar to unpkg, but which is friendlier to ES6 modules, called Skypack.  I tested it with a non-Webpack-ed version of the Lexical Variable Demo and it appears to work.

Basically, you can just put the following in one of your JS files:

import * as LexicalVariables from 'https://cdn.skypack.dev/@mit-app-inventor/blockly-block-lexical-variables';

Also note that while I think it work just fine to mix and match Skypack packages with your other unpkg files (like Blockly) you can also obtain them from Skypack, e.g.:

import Blockly from 'https://cdn.skypack.dev/blockly';

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAO%3D4%3DfkBvXw%3DTCQ%2BiCu0W2bYEf-z3kBh-s2mx%3DAKFsztjq8w1A%40mail.gmail.com.

[Sketch]

Thanks Mark!!

Just a question do i have to rewrite the block defenitions?

Because the blocks don't seem to appear.

Thanks

You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/V4RJ9o03qyQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAOk7GcS1RORTNC9%2BOpXh5VF5WY8vk07GEXnmWjKuhn_cQsV1fA%40mail.gmail.com.

[Mark Friedman]

If you just want to use the blocks that are included with the plugin then you shouldn't need to create or rewrite any block definitions.  Note that you will, as usual, need to define your toolbox.  Have you taken a look at the code for the lexical variable plugin demo (here).  It's a decent guide for how to use the builtin blocks.  You should be able to do something similar without using npm or webpack.  I was able to get the demo to work without those by replacing the imports at the top of src/index.js with:

import Blockly from 'https://cdn.skypack.dev/blockly';

import * as LexicalVariables from 'https://cdn.skypack.dev/@mit-app-inventor/blockly-block-lexical-variables';

and replacing the script tag in public.index.html with:

<script type='module' src='../src/index.js'></script>

If the above doesn't help you then please provide a link to your code and I can take a look at it and try to figure out what's happening.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAO%3D4%3DfkOw5LO%3DFk0peK%3Dhd0a%2BQEN%2Be3boZ%2BBNp5OVLoyYnEjRA%40mail.gmail.com.

[Sketch]

Hi Mark,

I still haven't made the plugin get to work so here is a link to the Pen: https://codepen.io/lukeplays33/pen/KKvGBPL

Thanks

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

[Mark Friedman]

Also note that there is now a special branch of the lexical variable plugin demo that works without Webpack.  It's the "works-without-webpack" branch.  

Further note that there was a typo below in the link to the main plugin demo.  It should have pointed here. 

-Mark

[Mark Friedman]

Luke,

  I'm sorry that this has not gone as smoothly as we would like.  I am not an expert on package managers, bundlers, or module systems.  However, I played around with your Pen and I believe that I discovered that using unpkg with code that assumes the use of ES6 modules is problematic.  Moreover, I discovered that Skypack appears to bundle its own version of Blockly with my plugin, so it doesn't play nicely with any existing loading of Blockly, as you do in your HTML file.  

The good-ish news, however, is that I was able to create a version of your Pen which successfully uses the plugin.  You can see it at https://codepen.io/mark-friedman/pen/jOGbMKO.  You'll notice that I tried to import the disable-top-blocks and plugin-scroll-options plugins that you want to use, but was unable to do so.

Given the general difficulties of mixing libraries and plugins loaded via script tags with libraries and plugins loaded via ES6 imports, I would suggest that you move toward using npm, Webpack (or some other bundler) and ES6 modules.  AFAICT, most, if not all, Blockly plugins are built and intended to be used that way.  Feel free to copy/fork the code of my plugin demo and add your own code.  That demo was originally forked from Blockly's Webpack sample (here), so you could start with that as well, if you like, but I think that my demo code will give you a bit more of a head start.

One more thing to note.   In the Usage section of the plugin's README (and in the npm documentation for the package) it says:

Note that unlike with standard Blockly, you should not use a custom toolbox category for your variable, as this would interfere with the way that variables are declared and used with this plugin. Just create an ordinary Variables category, if you want, and place the lexical-variable-get and lexical-variable-set blocks in there.

If you want to use the variable declaration mechanisms of the plugin you'll need to remember that.  Otherwise, feel free to use the standard Blockly mechanism.  I think that that can co-exist with the rest of the plugin ;-)

 

BTW, forgive me if Luke is not in fact your name.  Your email address suggests that it is, but I can't be entirely sure.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAO%3D4%3Df%3DB2a4Qee3QOAGrmMyY201-nJZwWLOdYOb7ieEF8nCM-w%40mail.gmail.com.

[Sketch]

Thanks Mark,

However I am still confused because the example you shared doesnt work either :(

I think it's best to write my own sort of version i guess.

Anyways Thanks for all your help!!

P.S. My name is indeed Luke

Op zaterdag 4 december 2021 om 01:22:47 UTC+1 schreef mark.f...@gmail.com:

[Mark Friedman]

Luke,

  I am also confused, because those non-Webpack examples that I linked to yesterday worked then but don't work now.  Maybe Skypack changed something in the packaging - I don't know.  In any case, this just strengthens my suggestion that you use npm, Webpack (or some other bundler) and ES6 modules as in my original plugin demo code.  If you need help in adapting your code to that framework, let me know.  

  BTW, I haven't forgotten that I still owe you some example code for your "when error" block, using the fields in the plugin.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/a4db6c24-7cac-4822-be28-43350fae9378n%40googlegroups.com.

[Sketch]

Hi Mark.

Here is the example definition:

Blockly.Blocks['events'] = {

  init: function() {

    this.appendDummyInput()

        .appendField("when")

        .appendField(new Blockly.FieldDropdown([["PageFinishedLoading","load"], ["ErrorOccured","error"], ["PageScroll","scroll"], ["PageResized","resize"], ["GamePadConnected","gamepadconnected"], ["GamePadDisconnected","gamepaddisconnected"], ["KeyboardKeyPressedDown","keydown"], ["KeyboardKeyPressedUp","keyup"], ["AnyKeyboardKeyPressed","keypress"], ["MouseUp","mouseup"], ["MouseDown","mousedown"], ["MouseMove","mousemove"], ["MouseClick","click"]]), "NAME");

    this.appendStatementInput("NAME")

        .setCheck(null)

        .appendField("do");

    this.setColour(20);

 this.setTooltip("");

 this.setHelpUrl("");

  }

};

Hope that helps.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAOk7GcSApPZFdZDkbRPX-n%2Br_NDXuwE7Egae%3DDKSUhR8sffmsw%40mail.gmail.com.

[Sketch]

Hi Mark.

I've tried many times to move to npm but i was unsuccessful in it.

Could you please help me?

P.S.I am very new to npm and nodeJS so it may take a while.

Thanks!!

Op zo 5 dec. 2021 om 09:35 schreef Sketch <lukehoo...@gmail.com>:

[Mark Friedman]

Thanks, Luke.  Initially I'll probably just code up a "when ErrorOccured" block for you with a lexically scoped "message" parameter and we can proceed from there.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAO%3D4%3Dfn08YDy7gkLZBKrr8vN1mjPwPY7e%2BTivpRT9iQoaLv7DA%40mail.gmail.com.

[Mark Friedman]

Sure, Luke.  Glad to help.  I'll briefly list all the steps to take.  You may have already done some of this.

1. Install npm.  In actuality, you will be installing node + npm.
2. Download the lexical plugin demo code.  You can either fork the repo, if you're comfortable with Git, or you can just download a zip file of the code by clicking the green "Code" button and selecting "Download zip".
3. In the directory that you put the demo code, execute the following commands to install the demo code's dependencies, which includes Blockly and the lexical block plugin. Note that these steps are also specified in the README file:
1. npm update @mit-app-inventor/blockly-block-lexical-variables
   
2. npm install
   
4. Test that everything is installed correctly by running the demo:
1. npm run start
2. Go to http://localhost:3000/index.html in your browser
5. Incorporate your code into the demo code.  Note that as long as the "npm run start" command is running, changes to the code should cause the browser to reload the latest changes that you've made.  If, for some reason, it doesn't, you can just stop it and rerun the "npm run start" command.  Note that you generally do not have to rerun the "npm install" command until you add any other plugins or libraries (see below).  Also note that you don't have to do anything extra to load Blockly or the lexical block plugin.  They are already imported in the demo code.

I would advise first getting your basic code to work with the above without adding any other Blockly plugins.  Once you have got it working reasonably then follow the commands listed in the npmjs entry or GitHub README files for each of the other plugins that you want to use.  Generally that will consist of some "npm install <plugin package name>" command (which will install that plugin and its dependencies) and some code that you need to put in your JS code in order to import (i.e. load) and initialize the plugin.

Once this is going we can talk about how to build/package your code and how to deploy it.

Good luck and feel free to ask questions if you have any difficulties.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAO%3D4%3DfmbNoTQHFKjNZ_d3tCO%2BT-gFkKvnpaGdRp%2BVY0etaD%3DPg%40mail.gmail.com.

[Sketch]

Mark You Genius.

That helped a lot. I managed to make the plugin Work!!

Just need to make it work with the Devs tools.

Thank you!!

Op ma 6 dec. 2021 om 01:20 schreef Mark Friedman <mark.f...@gmail.com>:

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAOk7GcSpXZModw%3DW%2BHj12r0135BTD7W5NUDXSSnXQjAdO7Kf6g%40mail.gmail.com.

[Mark Friedman]

Glad to hear it, Luke!

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAO%3D4%3DfkSNf9Hc6W8JfTGNPnMzEX7y9F%3DWc35HJ6pUVNYWFKRag%40mail.gmail.com.

[Sketch]

Hi Mark,

I still have on question how do i packages it for publishing to e.g. Github?

Thanks

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAOk7GcQRZjTm-7PZ3UAL-gbQ7C_L%2Brtqr_UKu_Q2K9XwdqLnXg%40mail.gmail.com.

[Mark Friedman]

Assuming that you've downloaded/forked the plugin demo code, executing "npm build" will build/package the app and place the result in the docs directory.  You can then copy/upload the contents of that directory to whatever web server you want.

In the specific case of GitHub pages, just make sure that the docs directory is part of your repo (which it will be if you forked the plugin demo).  To setup the repo for publishing to GitHub Pages just go to the repo's "Settings" page, and click "Pages" in the pane on the left.  From there you should be able to relatively easily enable publishing the repo.  Just make sure that you've selected the "/docs" directory as the location in the dropdown that specifies the folder to use.  Let me know if you run into any issues.

Note that you'll need to rerun "npm build" and push your changes to your GitHub site each time you make any changes in order to have the changes take effect on your GitHub page.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAO%3D4%3Dfnc4jyMoUpH%3D99Fqfu-gm7_QFnn1L-%3Dzmy3NwKBccS%3Dzg%40mail.gmail.com.

[Sketch]

Hi Mark,

It's a bit of a silly qeustion but how do upload the files to github it doesn't seem to work properly with what I've tried.

Thanks

Op maandag 6 december 2021 om 23:31:05 UTC+1 schreef mark.f...@gmail.com:

[Mark Friedman]

Luke,

  I'm not sure that this Blockly forum is the right place to get into a discussion about GitHub ;-)  I'll email you privately about this.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/164f5359-1f74-42c1-8f2e-d2fd030cad29n%40googlegroups.com.

[Mark Friedman]

Luke,

  You can see an example of a couple of blocks that I created for error and keypress handling in this branch of the plugin demo.  The block definition is in the blocks.js file.  The code loading the block is in the index.js file and the block is added to the toolbox in the index.html file.

  BTW, I am fully aware that the set of functions that you have to define on a block type in order to implement this is opaque and way too complicated.  I definitely need to do some work to make it easier and to document it. I also need to add more exports to the plugin so that you don't have to import from the plugin's src folder.  The above should work now, though, and should give you a decent starting point.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAO%3D4%3Dfn08YDy7gkLZBKrr8vN1mjPwPY7e%2BTivpRT9iQoaLv7DA%40mail.gmail.com.

[Sketch]

Thanks Mark,

I'll have a look at the code you shared.

Anyways here is the error when i use "/Sketch$ git push origin Sketch":

error: src refspec Sketch does not match any.
error: failed to push some refs to 'https://github.com/lukeplays33/Sketch.git'

P.S. If you want to we can continue this with private emails.

Thanks

Op di 7 dec. 2021 om 22:07 schreef Mark Friedman <mark.f...@gmail.com>:

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

[Mark Friedman]

Yes, I'll reply via private email.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAO%3D4%3Dfmc_J2ceRDpBQoeierobuk%3DoOBbYo9t8xZsukmZdkda0Q%40mail.gmail.com.

[Sketch]

Hi Mark,

I've found a problem in the code generation of the blocks.

The for each item in the list block throws an error: item is not defined and the for each number block does not have the right values.

As shown in the video.

Thanks

Op wo 8 dec. 2021 om 19:04 schreef Sketch <lukehoo...@gmail.com>:

[Sketch]

P.S. Mark Function blocks don't work either.

Op wo 8 dec. 2021 om 19:44 schreef Sketch <lukehoo...@gmail.com>:

[Mark Friedman]

Thanks for finding that bug, Luke.  Any chance you could file a GitHub issue for it at https://github.com/mit-cml/blockly-plugins/issues?

-Mark

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

[Mark Friedman]

Thanks for finding this, Luke!  I obviously did not do enough code generation testing :-(

As before, it would be great if you could create a GitHub issue for this at https://github.com/mit-cml/blockly-plugins/issues.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAO%3D4%3DfkHiV%2BK%3DoHuQzN7QEJbCnUWiWTHReXCnRVJVA9g%3DD33Vg%40mail.gmail.com.

[Sketch]

Sure here is the commit: https://github.com/mit-cml/blockly-plugins/issues/18#issue-1074753115

Anyways thanks for staring the git thingy.

I did look at the docs.

Perhaps i used the wrong documentation.

Thanks.

P.S. most issues are solved now.

Is there Any way i can pay you back for the help?

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

[Mark Friedman]

Consider your debt paid by using the plugin and by discovering and reporting bugs!

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAO%3D4%3Df%3Da6cZ5AfHcW2ocu4qhM_MHzHoKWBxnknmqYpMX%2B2xJFg%40mail.gmail.com.

[Mark Friedman]

I believe that the code generation issues that you pointed out have been fixed in the new version (i.e. 0.0.10) of the plugin.  If you have been using a previous version (i.e. 0.0.9 or older) of the blockly-block-lexical-variables plugin then you'll need to execute:

npm install @mit-app-inventor/blockly-block-lexical-variables@^0.0.10

and rebuild if necessary.

-Mark

[Sketch]

Thanks Mark,

The code generation has been fixed now.

Op zo 12 dec. 2021 om 20:42 schreef Mark Friedman <mark.f...@gmail.com>:

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