Custom Renderer Codelab

[Ikum Kandola]

I am trying to complete the custom renderer codelab but I am stuck very early on.

I have completed up to the very end of the 3rd page of instructions where I should be able to "open the playground in your browser and drag out a repeat block. The resulting block looks close to normal, but with slightly different alignment than Geras or Thrasos."

However, I receive an error stating: "Uncaught TypeError: Class constructor Renderer cannot be invoked without 'new'"

and another one:

"Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received"

I followed the instructions:

1. Cloning the blockly repo and using the latest version of tests/playground.html.

2.Adding the 'tests/playgrounds/custom_renderer.js', to the head of the playground.html page (slightly different to the instructions which are out of date):

<script>

  var BLOCKLY_BOOTSTRAP_OPTIONS = {

    additionalScripts: [

      'build/msg/en.js',

      'tests/playgrounds/screenshot.js',

      'node_modules/@blockly/dev-tools/dist/index.js',

      'tests/playgrounds/custom_renderer.js',

    ],

  }

</script>

3. Adding the following code to my "custom_renderer.js" file:

CustomRenderer = function(name) {

    CustomRenderer.superClass_.constructor.call(this, name);

  };

  Blockly.utils.object.inherits(CustomRenderer,

      Blockly.blockRendering.Renderer);

Blockly.blockRendering.register('custom_renderer', CustomRenderer);

4. Changing the line "renderer: 'custom_renderer'," as shown below:

toolbox: toolbox,

        toolboxPosition: 'start',

        renderer: 'custom_renderer',

        zoom:

          {

            controls: true,

            wheel: true,

            startScale: 1.0,

            maxScale: 4,

            minScale: 0.25,

            scaleSpeed: 1.1

          }

I also updated my versions of npm and node.

Below is a screenshot of the errors:

[Mark Friedman]

Ikum,

  I think that the custom renderer codelab is currently a bit out of date. The mechanism for sub-classing existing Blockly classes changed in v9.0.0 and the existing old mechanism will no longer work with v9.  Unless I missed something, you can no longer define your classes as functions and use the Blockly.utils.object.inherits function to make your class a subclass of a Blockly class.  You'll see various errors relating to superclass constructors and calls to superclass methods.  

  Basically, you will now need to use the ES6 class ... extends ... syntax to create your class and use the super keyword to call the superclass constructor and methods.

  There are a bunch of changes that will need to be made to the codelab, so you might want to take a look at the ES6 version of the complete custom renderer codelab code at https://github.com/google/blockly-samples/blob/master/codelabs/custom_renderer/sample_code_es6.js.  You can compare that to the ES5 version (here) which the text of the codelab is using.

  Hope this helps.

-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/85622e68-43ea-4a09-b6b0-e496b15d5f0dn%40googlegroups.com.