Block Libraries - initial implementation

[ghys]

This adds a new UI component namespace (ui:blocks) allowing to define user-defined Blockly libraries declaratively using the component/config/slots paradigm and templating for code generation, and ultimately to share them on the Marketplace.
Also adds a dedicated editor for them in the developer tools.

Example YAML

uid: blocklibrary_1e0855d1e4
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Dec 10, 2021, 4:07:34 AM
component: BlockLibrary
config:
  name: Block Library 2
slots:
  blocks:
    - component: BlockType
      config:
        type: block1
        message0: Do %1 with %2 %3
        args0:
          - type: field_dropdown
            name: OPTION1
            options:
              - - something
                - do_something
              - - something else
                - do_something_else
          - type: field_input
            name: TEXT1
            text: text value
          - type: input_value
            name: NAME
        colour: 180
        previousStatement: ""
        nextStatement: ""
        tooltip: ""
        helpUrl: ""
      slots:
        code:
          - component: BlockCodeTemplate
            config:
              template: "{{field:OPTION1}}('{{field:TEXT1}}', {{input:NAME:ORDER_NONE}});"
    - component: BlockType
      config:
        type: radius
        message0: area of circle with radius %1
        args0:
          - type: input_value
            name: RADIUS
            check: Number
        colour: 70
        output: ""
        tooltip: Returns the circumference of a circle given its radius
      slots:
        code:
          - component: BlockCodeTemplate
            config:
              template: 2 * Math.PI * {{input:RADIUS:ORDER_MULTIPLICATION}}
              order: ORDER_MULTIPLICATION
    - component: BlockType
      config:
        type: arc_length
        message0: arc length with angle %1 and radius %2
        args0:
          - type: field_angle
            name: ANGLE
            angle: 45
          - type: input_value
            name: RADIUS
            check: Number
        colour: 50
        output: ""
        tooltip: Returns the length of a arc given its radius and angle
      slots:
        code:
          - component: BlockCodeTemplate
            config:
              template: "{{function:degrees_to_radians}}({{field:ANGLE:ORDER_ATOMIC}}) * {{input:RADIUS}}"
              order: ORDER_MULTIPLICATION
    - component: BlockType
      config:
        type: only_before_noon
        message0: only before noon do %1 %2
        args0:
          - type: input_dummy
          - type: input_statement
            name: CODE
        colour: 240
        previousStatement: ""
        nextStatement: ""
        tooltip: ""
        helpUrl: ""
      slots:
        code:
          - component: BlockCodeTemplate
            config:
              template: >-
                if (new Date().getHours() < 12) {
                  {{statements:CODE}}
                }
  functions:
    - component: UtilityFunction
      config:
        name: degrees_to_radians
        code: >-
          function {{name}}(degrees) {
            var pi = Math.PI;
            return degrees * (pi/180);
          }

Generated code:

[relativeci]

Job #279: Bundle Size — 10.62MB (-6.47%).

861f883 vs 67320e2

Changed metrics (2/8)

Metric	Current	Baseline
Cache Invalidation	20.96%	15.44%
Modules	1534(-0.13%)	1536

Changed assets by type (1/7)

	Current	Baseline
JS	8.57MB (-7.9%)	9.3MB

---

View Job #279 report on app.relative-ci.com