feat!: add block definitions to colour field plugin (#2162)

* feat: export functions to register some angle, colour, and multiline input fields

* feat: add block definitions to colour and multiline input fields

* feat: add block generators for the colour_picker block

* fix: use Blockly.common.defineBlocksWithJsonArray

* feat: add block generators for colour_random block

* feat: add generators type and standardize exports for block files

* chore: update to blockly@beta and fix types

* chore: move all colour blocks to separate files and add more generator-related types

* feat: finish adding block code generators for colour blocks

* fix: PR feedback

* fix: remove immediate registration of blocks and fields in field_colour

* chore: use named imports and numbered TODOs

* feat: add usage information about blocks to README

* chore: revert changes outside of field_colour

* chore: clean up tsdoc and exports

* cgire: clean up README

* chore: respond to PR feedback on names and comments

* feat(tests): add and improve tests

* chore(format): run formatter

* fix: respond to PR feedback about names and file structure

* fix: allow const variables to have UPPER_CASE names

* fix: respond to PR feedback

* chore: format

* fix: line length

eslint.config.js

@@ -230,6 +230,11 @@ module.exports = [
             match: false,
           },
         },
+        {
+          selector: 'variable',
+          modifiers: ['const'],
+          format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+        },
       ],
       '@typescript-eslint/consistent-type-assertions': 'error',
 

plugins/block-dynamic-connection/src/dynamic_if.ts

@@ -35,7 +35,6 @@ interface IfExtraState {
   hasElse?: boolean;
 }
 
-/* eslint-disable @typescript-eslint/naming-convention */
 const DYNAMIC_IF_MIXIN = {
   /**
    * Minimum number of inputs for this block.

plugins/block-dynamic-connection/src/dynamic_list_create.ts

@@ -19,9 +19,7 @@ interface DynamicListCreateMixin extends DynamicListCreateMixinType {}
 /* eslint-enable @typescript-eslint/no-empty-interface */
 type DynamicListCreateMixinType = typeof DYNAMIC_LIST_CREATE_MIXIN;
 
-/* eslint-disable @typescript-eslint/naming-convention */
 const DYNAMIC_LIST_CREATE_MIXIN = {
-  /* eslint-enable @typescript-eslint/naming-convention */
   /** Minimum number of inputs for this block. */
   minInputs: 2,
 

plugins/block-dynamic-connection/src/dynamic_text_join.ts

@@ -19,9 +19,7 @@ interface DynamicTextJoinMixin extends DynamicTextJoinMixinType {}
 /* eslint-enable @typescript-eslint/no-empty-interface */
 type DynamicTextJoinMixinType = typeof DYNAMIC_TEXT_JOIN_MIXIN;
 
-/* eslint-disable @typescript-eslint/naming-convention */
 const DYNAMIC_TEXT_JOIN_MIXIN = {
-  /* eslint-enable @typescript-eslint/naming-convention */
   /** Minimum number of inputs for this block. */
   minInputs: 2,
 

plugins/field-colour/README.md

@@ -1,6 +1,7 @@
 # @blockly/field-colour [![Built on Blockly](https://tinyurl.com/built-on-blockly)](https://github.com/google/blockly)
 
-A [Blockly](https://www.npmjs.com/package/blockly) colour field.
+A [Blockly](https://www.npmjs.com/package/blockly) field and blocks for
+choosing and combining colours.
 
 ## Installation
 
@@ -18,7 +19,9 @@ npm install @blockly/field-colour --save
 
 ## Usage
 
-This field accepts up to 4 parameters:
+### Field
+
+The colour field accepts up to 4 parameters:
 
 - "colour" to specify the default colour. Defaults to the first value in the
   "colourOptions" array. Should be a "#rrggbb" string.
@@ -30,11 +33,17 @@ This field accepts up to 4 parameters:
 - "columns" to specify the number of columns the colour dropdown should have.
   Defaults to 7.
 
-### JavaScript
+If you want to use only the field, you must register it with Blockly. You can
+do this by calling `registerFieldColour` before instantiating your blocks. If
+another field is registered under the same name, this field will overwrite it.
+
+#### JavaScript
 
 ```js
 import * as Blockly from 'blockly';
-import {FieldColour} from '@blockly/field-colour';
+import {registerFieldColour} from '@blockly/field-colour';
+
+registerFieldColour();
 Blockly.Blocks['test_field_colour'] = {
   init: function () {
     this.appendDummyInput()
@@ -44,11 +53,13 @@ Blockly.Blocks['test_field_colour'] = {
 };
 ```
 
-### JSON
+#### JSON
 
 ```js
 import * as Blockly from 'blockly';
-import '@blockly/field-colour';
+import {registerFieldColour} from '@blockly/field-colour';
+
+registerFieldColour();
 Blockly.defineBlocksWithJsonArray([
   {
     type: 'test_field_colour',
@@ -64,6 +75,55 @@ Blockly.defineBlocksWithJsonArray([
 ]);
 ```
 
+### Blocks
+
+This package also provides four blocks related to the colour field. Each block
+has generators in JavaScript, Python, PHP, Lua, and Dart.
+
+- "colour_blend" takes in two colours and a ratio and outputs a single colour.
+- "colour_picker" is a simple block with just the colour field and an output.
+- "colour_random" generates a random colour.
+- "colour_rgb" generates a colour based on red, green, and blue values.
+
+You can install all four blocks by calling `installAllBlocks`. This will
+install the blocks and all of their dependencies, including the colour field.
+When calling `installAllBlocks`—or any of the individual `installSomeBlock`
+functions—you can supply one or more `CodeGenerator` instances (e.g.
+`javascriptGenerator`), and the install function will also install the correct
+generator function for each block for the corresponding language(s).
+
+```js
+import {javascriptGenerator} from 'blockly/javascript';
+import {dartGenerator} from 'blockly/dart';
+import {phpGenerator} from 'blockly/php';
+import {pythonGenerator} from 'blockly/python';
+import {luaGenerator} from 'blockly/lua';
+import {installAllBlocks as installColourBlocks} from '@blockly/field-colour';
+
+// Installs all four blocks, the colour field, and all of the language generators.
+installColourBlocks({
+  javascript: javascriptGenerator,
+  dart: dartGenerator,
+  lua: luaGenerator,
+  python: pythonGenerator,
+  php: phpGenerator,
+});
+```
+
+If you only want to install a single block, you can call that block's
+`installBlock` function. The `generators` parameter is the same.
+
+```js
+import {javascriptGenerator} from 'blockly/javascript';
+import {colourBlend} from '@blockly/field-colour';
+
+// Installs the colour_blend block, the colour field,
+// and the generator for colour_blend in JavaScript.
+colourBlend.installBlock({
+  javascript: javascriptGenerator,
+});
+```
+
 ### API Reference
 
 - `setColours`: Sets the colour options, and optionally the titles for the