Skip to main content

Build a custom generator

6. Member block generator​

This step will build the generator for the member block. It will use the function getFieldValue, and introduce the function valueToCode.

The member block has a text input field and a value input.

The member block is for JSON properties with a name and a value. The value comes from a connected block.

The generated code looks like "property name": "property value".

Field value​

The property name is the value of the text input, which is fetched via getFieldValue:

const name = block.getFieldValue('MEMBER_NAME');

Recall: the name of the value being fetched is MEMBER_NAME because that is how it was defined in src/blocks/json.js.

Input value​

The property value is whatever is attached to the value input. A variety of blocks could be attached there: logic_null, text, math_number, logic_boolean, or even an array (lists_create_with). Use valueToCode to get the correct value:

const value = generator.valueToCode(block, 'MEMBER_VALUE', Order.ATOMIC);

valueToCode does three things:

  • Finds the blocks connected to the named value input (the second argument)
  • Generates the code for that block
  • Returns the code as a string

If no block is attached, valueToCode returns null. In another generator, valueToCode might need to replace null with a different default value; in JSON, null is fine.

The third argument is related to operator precedence. It is used to determine if parentheses need to be added around the value. In JSON, parentheses will never be added, as discussed in an earlier section.

Build the code string​

Next, assemble the arguments name and value into the correct code, of the form "name": value.

const code = `"${name}": ${value}`;

Put it all together​

All together, here is block generator for the member block:

jsonGenerator.forBlock['member'] = function (block, generator) {
  const name = block.getFieldValue('MEMBER_NAME');
  const value = generator.valueToCode(block, 'MEMBER_VALUE', Order.ATOMIC);
  const code = `"${name}": ${value}`;
  return code;
};