Upgrade to Blockly v11 and respective plugin versions

bundles/org.openhab.ui/web/package.json

@@ -58,12 +58,14 @@
     "Samsung >= 5"
   ],
   "dependencies": {
-    "@blockly/field-slider": "^6.1.4",
-    "@blockly/plugin-typed-variable-modal": "^7.0.15",
-    "@blockly/plugin-workspace-search": "^8.1.2",
-    "@blockly/shadow-block-converter": "^5.0.0",
-    "@blockly/theme-dark": "^6.0.5",
-    "@blockly/zoom-to-fit": "^5.0.11",
+    "@blockly/field-colour": "^5.0.19",
+    "@blockly/field-multilineinput": "^5.0.17",
+    "@blockly/field-slider": "^7.0.16",
+    "@blockly/plugin-typed-variable-modal": "^8.0.16",
+    "@blockly/plugin-workspace-search": "^9.1.10",
+    "@blockly/shadow-block-converter": "^6.0.17",
+    "@blockly/theme-dark": "^7.0.12",
+    "@blockly/zoom-to-fit": "^6.0.16",
     "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/commands": "^6.8.1",
     "@codemirror/lang-css": "^6.3.1",
@@ -82,11 +84,11 @@
     "@jsep-plugin/object": "^1.2.1",
     "@jsep-plugin/regex": "^1.0.3",
     "@jsep-plugin/template": "^1.0.4",
-    "@mit-app-inventor/blockly-plugin-workspace-multiselect": "^0.1.12",
+    "@mit-app-inventor/blockly-plugin-workspace-multiselect": "^1.0.2",
     "@replit/codemirror-indentation-markers": "^6.5.3",
     "@uiw/codemirror-theme-gruvbox-dark": "^4.24.2",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
-    "blockly": "^10.4.2",
+    "blockly": "^11.2.2",
     "codemirror": "^6.0.2",
     "cronstrue": "^2.50.0",
     "crypto-browserify": "^3.12.0",

bundles/org.openhab.ui/web/src/assets/definitions/blockly/_tmp/blocks-exec.js

@@ -1,5 +1,6 @@
-import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript.js'
+import * as Blockly from 'blockly'
+import { javascriptGenerator } from 'blockly/javascript'
+import { valueToCode } from '@/assets/definitions/blockly/utils.js'
 
 export default function defineOHBlocks_Exec (f7) {
   Blockly.Blocks['oh_exec'] = {
@@ -24,7 +25,7 @@ export default function defineOHBlocks_Exec (f7) {
 
   javascriptGenerator.forBlock['oh_exec'] = function (block) {
     let runCommand = block.getFieldValue('execCommand')
-    const itemName = javascriptGenerator.valueToCode(block, 'sendTo', javascriptGenerator.ORDER_ATOMIC)
+    const itemName = valueToCode(block, 'sendTo', javascriptGenerator.ORDER_ATOMIC)
     let code = 'var exec = Java.type("org.openhab.core.model.script.actions.Exec");\n'
     code += 'var duration = Java.type("java.time.Duration");\n'
     code += 'var results = exec.executeCommandLine(duration.ofSeconds(1), "' + runCommand + '", "")\n'

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-audio.js

@@ -10,9 +10,10 @@
 * supports jsscripting
 */
 
-import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript.js'
+import * as Blockly from 'blockly'
+import { javascriptGenerator } from 'blockly/javascript'
 import { FieldSlider } from '@blockly/field-slider'
+import { valueToCode } from '@/assets/definitions/blockly/utils.js'
 
 export default function (f7, sinks, voices) {
   Blockly.Blocks['oh_volumeslider'] = {
@@ -57,8 +58,8 @@ export default function (f7, sinks, voices) {
   * Code part
   */
   javascriptGenerator.forBlock['oh_playmedia_sink'] = function (block) {
-    let fileName = javascriptGenerator.valueToCode(block, 'fileName', javascriptGenerator.ORDER_ATOMIC)
-    let sinkName = javascriptGenerator.valueToCode(block, 'sinkName', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
+    let fileName = valueToCode(block, 'fileName', javascriptGenerator.ORDER_ATOMIC)
+    let sinkName = valueToCode(block, 'sinkName', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
 
     return `actions.Audio.playSound(${sinkName}, ${fileName});\n`
   }
@@ -93,9 +94,9 @@ export default function (f7, sinks, voices) {
   * Code part
   */
   javascriptGenerator.forBlock['oh_playmedia_sink_volume'] = function (block) {
-    let fileName = javascriptGenerator.valueToCode(block, 'fileName', javascriptGenerator.ORDER_ATOMIC)
-    let sinkName = javascriptGenerator.valueToCode(block, 'sinkName', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
-    let volume = javascriptGenerator.valueToCode(block, 'volume', javascriptGenerator.ORDER_ATOMIC).replace(/'/g, '')
+    let fileName = valueToCode(block, 'fileName', javascriptGenerator.ORDER_ATOMIC)
+    let sinkName = valueToCode(block, 'sinkName', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
+    let volume = valueToCode(block, 'volume', javascriptGenerator.ORDER_ATOMIC).replace(/'/g, '')
 
     return `actions.Audio.playSound(${sinkName}, ${fileName}, (${volume}/100));\n`
   }
@@ -126,8 +127,8 @@ export default function (f7, sinks, voices) {
   * Blockly part
   */
   javascriptGenerator.forBlock['oh_playstream_sink'] = function (block) {
-    let url = javascriptGenerator.valueToCode(block, 'url', javascriptGenerator.ORDER_ATOMIC)
-    let sinkName = javascriptGenerator.valueToCode(block, 'sinkName', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
+    let url = valueToCode(block, 'url', javascriptGenerator.ORDER_ATOMIC)
+    let sinkName = valueToCode(block, 'sinkName', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
 
     return `actions.Audio.playStream(${sinkName}, ${url});\n`
   }
@@ -156,7 +157,7 @@ export default function (f7, sinks, voices) {
   */
   javascriptGenerator.forBlock['oh_stopstream_sink'] = function (block) {
     let url = block.getFieldValue('url')
-    let sinkName = javascriptGenerator.valueToCode(block, 'sinkName', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
+    let sinkName = valueToCode(block, 'sinkName', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
 
     return `actions.Audio.playStream(${sinkName}, null);\n`
   }
@@ -189,9 +190,9 @@ export default function (f7, sinks, voices) {
   * Code part
   */
   javascriptGenerator.forBlock['oh_say'] = function (block) {
-    const textToSay = javascriptGenerator.valueToCode(block, 'textToSay', javascriptGenerator.ORDER_ATOMIC)
-    const voiceName = javascriptGenerator.valueToCode(block, 'voice', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
-    const deviceSink = javascriptGenerator.valueToCode(block, 'deviceSink', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
+    const textToSay = valueToCode(block, 'textToSay', javascriptGenerator.ORDER_ATOMIC)
+    const voiceName = valueToCode(block, 'voice', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
+    const deviceSink = valueToCode(block, 'deviceSink', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
 
     return `actions.Voice.say(${textToSay}, ${voiceName}, ${deviceSink});\n`
   }

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-color.js

@@ -3,9 +3,9 @@
 * supports jsscripting
 */
 
-import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript.js'
-import { blockGetCheckedInputType } from '@/assets/definitions/blockly/utils.js'
+import * as Blockly from 'blockly'
+import { javascriptGenerator } from 'blockly/javascript'
+import { blockGetCheckedInputType, valueToCode } from '@/assets/definitions/blockly/utils.js'
 
 export default function (f7) {
   /*
@@ -31,7 +31,7 @@ export default function (f7) {
   */
   javascriptGenerator.forBlock['oh_color_to_hsb'] = function (block) {
     let conversionFunction = addConvertColourHexToHSB()
-    const hexColor = javascriptGenerator.valueToCode(block, 'hexColor', javascriptGenerator.ORDER_ATOMIC)
+    const hexColor = valueToCode(block, 'hexColor', javascriptGenerator.ORDER_ATOMIC)
     let code = `${conversionFunction}(${hexColor})`
     return [code, 0]
   }
@@ -65,7 +65,7 @@ export default function (f7) {
   }
 
   javascriptGenerator.forBlock['oh_color_item'] = function (block) {
-    const theItem = javascriptGenerator.valueToCode(block, 'item', javascriptGenerator.ORDER_ATOMIC)
+    const theItem = valueToCode(block, 'item', javascriptGenerator.ORDER_ATOMIC)
     const inputType = blockGetCheckedInputType(block, 'item')
     let attributeName = block.getFieldValue('attributeName')
 

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-dateoffsets.js

@@ -1,10 +1,10 @@
 /**
  * supports jsscripting
  */
-import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript.js'
+import * as Blockly from 'blockly'
+import { javascriptGenerator } from 'blockly/javascript'
 import { FieldDatePicker } from './fields/date-field.js'
-import { addDateComparisonSupport } from './utils.js'
+import { addDateComparisonSupport, valueToCode } from './utils.js'
 
 export default function (f7) {
   /*
@@ -55,7 +55,7 @@ export default function (f7) {
   * Code part
   */
   javascriptGenerator.forBlock['oh_dayoffset'] = function (block) {
-    let offsetValue = javascriptGenerator.valueToCode(block, 'offset', javascriptGenerator.ORDER_ATOMIC)
+    let offsetValue = valueToCode(block, 'offset', javascriptGenerator.ORDER_ATOMIC)
     let code = `${offsetValue}`
     return [code, javascriptGenerator.ORDER_NONE]
   }
@@ -112,7 +112,7 @@ export default function (f7) {
   * Code part
   */
   javascriptGenerator.forBlock['oh_zdt_plusminus'] = function (block) {
-    const offsetValue = javascriptGenerator.valueToCode(block, 'offset', javascriptGenerator.ORDER_ATOMIC)
+    const offsetValue = valueToCode(block, 'offset', javascriptGenerator.ORDER_ATOMIC)
     const plusMinus = block.getFieldValue('plusminus')
     const period = block.getFieldValue('period')
 
@@ -159,12 +159,12 @@ export default function (f7) {
   * Code part
   */
   javascriptGenerator.forBlock['oh_zdt_create'] = function (block) {
-    const year = javascriptGenerator.valueToCode(block, 'year', javascriptGenerator.ORDER_ATOMIC)
-    const month = javascriptGenerator.valueToCode(block, 'month', javascriptGenerator.ORDER_ATOMIC)
-    const day = javascriptGenerator.valueToCode(block, 'day', javascriptGenerator.ORDER_ATOMIC)
-    const hour = javascriptGenerator.valueToCode(block, 'hour', javascriptGenerator.ORDER_ATOMIC)
-    const minute = javascriptGenerator.valueToCode(block, 'minute', javascriptGenerator.ORDER_ATOMIC)
-    const second = javascriptGenerator.valueToCode(block, 'second', javascriptGenerator.ORDER_ATOMIC)
+    const year = valueToCode(block, 'year', javascriptGenerator.ORDER_ATOMIC)
+    const month = valueToCode(block, 'month', javascriptGenerator.ORDER_ATOMIC)
+    const day = valueToCode(block, 'day', javascriptGenerator.ORDER_ATOMIC)
+    const hour = valueToCode(block, 'hour', javascriptGenerator.ORDER_ATOMIC)
+    const minute = valueToCode(block, 'minute', javascriptGenerator.ORDER_ATOMIC)
+    const second = valueToCode(block, 'second', javascriptGenerator.ORDER_ATOMIC)
 
     const code = `time.ZonedDateTime.now().withYear(${year}).withMonth(${month}).withDayOfMonth(${day}).withHour(${hour}).withMinute(${minute}).withSecond(${second}).withNano(0)`
     return [code, javascriptGenerator.ORDER_ATOMIC]
@@ -233,7 +233,7 @@ export default function (f7) {
   * Code part
   */
   javascriptGenerator.forBlock['oh_zdt_fromText'] = function (block) {
-    const day = javascriptGenerator.valueToCode(block, 'day', javascriptGenerator.ORDER_ATOMIC)
+    const day = valueToCode(block, 'day', javascriptGenerator.ORDER_ATOMIC)
     return [`time.toZDT(${day})`, javascriptGenerator.ORDER_NONE]
   }
 
@@ -259,7 +259,7 @@ export default function (f7) {
   * Code part
   */
   javascriptGenerator.forBlock['oh_zdt_fromItem'] = function (block) {
-    const itemName = javascriptGenerator.valueToCode(block, 'itemName', javascriptGenerator.ORDER_ATOMIC)
+    const itemName = valueToCode(block, 'itemName', javascriptGenerator.ORDER_ATOMIC)
     return [`time.toZDT(items.getItem(${itemName}))`, javascriptGenerator.ORDER_NONE]
   }
 
@@ -496,7 +496,7 @@ export default function (f7) {
       for (i = 0; i < this.itemCount_; i++) {
         if (!this.getInput('ADD' + i)) {
           let input = this.appendValueInput('ADD' + i)
-            .setAlign(Blockly.ALIGN_RIGHT)
+            .setAlign(Blockly.inputs.Align.RIGHT)
             .setCheck('zdtTemporalUnit')
           if (i === 0) {
             input.appendField(new Blockly.FieldDropdown([['set', 'with'], ['add', 'plus'], ['subtract', 'minus']]), 'operation')

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-dicts.js

@@ -2,9 +2,13 @@
  * supports jsscripting
  */
 
-import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript.js'
-import { blockGetCheckedInputType } from '@/assets/definitions/blockly/utils.js'
+import * as Blockly from 'blockly'
+import { javascriptGenerator } from 'blockly/javascript'
+import {
+  blockGetCheckedInputType,
+  statementToCode,
+  valueToCode
+} from '@/assets/definitions/blockly/utils.js'
 
 export default function (f7) {
   Blockly.Blocks['dicts_create_with'] = {
@@ -121,7 +125,7 @@ export default function (f7) {
       for (i = 0; i < this.itemCount_; i++) {
         if (!this.getInput('ADD' + i)) {
           let input = this.appendValueInput('ADD' + i)
-            .setAlign(Blockly.ALIGN_RIGHT)
+            .setAlign(Blockly.inputs.Align.RIGHT)
           if (i === 0) {
             input.appendField('dictionary of')
           }
@@ -172,7 +176,7 @@ export default function (f7) {
     let elements = new Array(block.itemCount_)
     for (let i = 0; i < block.itemCount_; i++) {
       elements[i] = '\'' + block.getFieldValue('KEY' + i) + '\': '
-      elements[i] += javascriptGenerator.valueToCode(block, 'ADD' + i,
+      elements[i] += valueToCode(block, 'ADD' + i,
         javascriptGenerator.ORDER_NONE) || 'null'
     }
     let code = '{' + elements.join(', ') + '}'
@@ -205,9 +209,9 @@ export default function (f7) {
   * Code part
   */
   javascriptGenerator.forBlock['dicts_get'] = function (block) {
-    const key = javascriptGenerator.valueToCode(block, 'key', javascriptGenerator.ORDER_ATOMIC)
+    const key = valueToCode(block, 'key', javascriptGenerator.ORDER_ATOMIC)
     // note: even though the dict can be directly used without a variable, we need to keep the variable name as "varName" for backwards compatibility
-    let varName = javascriptGenerator.valueToCode(block, 'varName', javascriptGenerator.ORDER_ATOMIC)
+    let varName = valueToCode(block, 'varName', javascriptGenerator.ORDER_ATOMIC)
     const varNameType = blockGetCheckedInputType(block, 'varName')
     if (varNameType !== 'Dictionary') {
       varName = varName.replace(/'/g, '')
@@ -238,12 +242,12 @@ export default function (f7) {
   }
 
   javascriptGenerator.forBlock['dicts_set'] = function (block) {
-    const dict = javascriptGenerator.valueToCode(block, 'dictionary', javascriptGenerator.ORDER_ATOMIC).replace(/'/g, '')
-    const key = javascriptGenerator.valueToCode(block, 'key', javascriptGenerator.ORDER_ATOMIC)
+    const dict = valueToCode(block, 'dictionary', javascriptGenerator.ORDER_ATOMIC).replace(/'/g, '')
+    const key = valueToCode(block, 'key', javascriptGenerator.ORDER_ATOMIC)
     if (dict === '' || key === '\'\'') {
       throw new Error('dictionary and key name need to be provided')
     }
-    const value = javascriptGenerator.valueToCode(block, 'value', javascriptGenerator.ORDER_ATOMIC).replace(/'/g, '')
+    const value = valueToCode(block, 'value', javascriptGenerator.ORDER_ATOMIC).replace(/'/g, '')
     let code = `${dict}[${key}] = '${value}';\n`
     return code
   }
@@ -282,8 +286,8 @@ export default function (f7) {
     */
   javascriptGenerator.forBlock['dicts_for'] = function (block) {
     const loopVar = block.getField('loopVar').getVariable().name
-    const dict = javascriptGenerator.valueToCode(block, 'dict', javascriptGenerator.ORDER_ATOMIC)
-    const dictForCode = javascriptGenerator.statementToCode(block, 'dictForCode')
+    const dict = valueToCode(block, 'dict', javascriptGenerator.ORDER_ATOMIC)
+    const dictForCode = statementToCode(block, 'dictForCode')
 
     const dictCheck = block.getInput('dict').connection.targetBlock().outputConnection.getCheck()
     const dictType = (dictCheck) ? block.getInput('dict').connection.targetBlock().outputConnection.getCheck()[0] : ''

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-ephemeris.js

@@ -6,8 +6,9 @@
 * See usage discussion here: https://community.openhab.org/t/wip-ephemeris-documentation/84536
 * supports jsscripting
 */
-import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript.js'
+import * as Blockly from 'blockly'
+import { javascriptGenerator } from 'blockly/javascript'
+import { valueToCode } from '@/assets/definitions/blockly/utils.js'
 
 export default function (f7) {
   /*
@@ -38,7 +39,7 @@ export default function (f7) {
   * Code part
   */
   javascriptGenerator.forBlock['oh_ephemeris_check'] = function (block) {
-    const dayInfo = javascriptGenerator.valueToCode(block, 'dayInfo', javascriptGenerator.ORDER_NONE)
+    const dayInfo = valueToCode(block, 'dayInfo', javascriptGenerator.ORDER_NONE)
     const checkType = block.getFieldValue('checkType')
     let code = ''
 
@@ -79,7 +80,7 @@ export default function (f7) {
   * Code part
   */
   javascriptGenerator.forBlock['oh_ephemeris_getHolidayName'] = function (block) {
-    const dayInfo = javascriptGenerator.valueToCode(block, 'dayInfo', javascriptGenerator.ORDER_NONE)
+    const dayInfo = valueToCode(block, 'dayInfo', javascriptGenerator.ORDER_NONE)
     return [`actions.Ephemeris.getBankHolidayName(${dayInfo})`, javascriptGenerator.ORDER_NONE]
   }
 
@@ -105,7 +106,7 @@ export default function (f7) {
   * Code part
   */
   javascriptGenerator.forBlock['oh_ephemeris_getDaysUntilHoliday'] = function (block) {
-    const holidayName = javascriptGenerator.valueToCode(block, 'holidayName', javascriptGenerator.ORDER_NONE)
+    const holidayName = valueToCode(block, 'holidayName', javascriptGenerator.ORDER_NONE)
     return [`actions.Ephemeris.getDaysUntil(${holidayName})`, javascriptGenerator.ORDER_NONE]
   }
 }

bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-eventbus.js

@@ -3,9 +3,9 @@
  * supports jsscripting
  */
 
-import Blockly from 'blockly'
-import { javascriptGenerator } from 'blockly/javascript.js'
-import { blockGetCheckedInputType } from './utils.js'
+import * as Blockly from 'blockly'
+import { javascriptGenerator } from 'blockly/javascript'
+import { blockGetCheckedInputType, valueToCode } from './utils.js'
 
 export default function (f7) {
   /*
@@ -19,7 +19,7 @@ export default function (f7) {
         .appendField(new Blockly.FieldDropdown([['send command', 'sendCommand'], ['post update', 'postUpdate']]), 'eventType')
       this.appendValueInput('itemName')
         .appendField('to')
-        .setAlign(Blockly.ALIGN_RIGHT)
+        .setAlign(Blockly.inputs.Align.RIGHT)
         .setCheck(['String', 'oh_item', 'oh_itemtype'])
       this.setInputsInline(true)
       this.setPreviousStatement(true, null)
@@ -32,8 +32,8 @@ export default function (f7) {
 
   javascriptGenerator.forBlock['oh_event'] = function (block) {
     const eventType = block.getFieldValue('eventType')
-    const itemName = javascriptGenerator.valueToCode(block, 'itemName', javascriptGenerator.ORDER_ATOMIC)
-    const value = javascriptGenerator.valueToCode(block, 'value', javascriptGenerator.ORDER_ATOMIC)
+    const itemName = valueToCode(block, 'itemName', javascriptGenerator.ORDER_ATOMIC)
+    const value = valueToCode(block, 'value', javascriptGenerator.ORDER_ATOMIC)
 
     const inputType = blockGetCheckedInputType(block, 'itemName')