Blockly: Upgrade to v9, add JSScripting (GraalVM) implementations, UoM block types

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

@@ -61,13 +61,15 @@
     "Samsung >= 5"
   ],
   "dependencies": {
-    "@blockly/field-slider": "^2.1.10",
-    "@blockly/zoom-to-fit": "^2.0.24",
+    "@blockly/field-slider": "^4.0.3",
+    "@blockly/plugin-cross-tab-copy-paste": "^2.0.4",
+    "@blockly/theme-dark": "^4.0.1",
+    "@blockly/zoom-to-fit": "^3.0.3",
     "@jsep-plugin/arrow": "^1.0.5",
     "@jsep-plugin/object": "^1.2.1",
     "@jsep-plugin/regex": "^1.0.3",
     "@jsep-plugin/template": "^1.0.2",
-    "blockly": "^6.20210701.0",
+    "blockly": "^9.2.0",
     "cronstrue": "^1.100.0",
     "dayjs": "^1.9.6",
     "dom7": "^2.1.5",

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

@@ -1,4 +1,5 @@
 import Blockly from 'blockly'
+import { javascriptGenerator } from 'blockly/javascript'
 import { FieldItemModelPicker } from './ohitemfield'
 
 export default function defineOHBlocks_Exec (f7) {
@@ -22,9 +23,9 @@ export default function defineOHBlocks_Exec (f7) {
     }
   }
 
-  Blockly.JavaScript['oh_exec'] = function (block) {
+  javascriptGenerator['oh_exec'] = function (block) {
     let runCommand = block.getFieldValue('execCommand')
-    const itemName = Blockly.JavaScript.valueToCode(block, 'sendTo', Blockly.JavaScript.ORDER_ATOMIC)
+    const itemName = javascriptGenerator.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'
@@ -48,17 +49,17 @@ export default function defineOHBlocks_Exec (f7) {
     }
   }
 
-  Blockly.JavaScript['oh_exec2'] = function (block) {
-    const exec = Blockly.JavaScript.provideFunction_(
+  javascriptGenerator['oh_exec2'] = function (block) {
+    const exec = javascriptGenerator.provideFunction_(
       'exec',
-      ['var ' + Blockly.JavaScript.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type("org.openhab.core.model.script.actions.Exec");'])
-    const duration = Blockly.JavaScript.provideFunction_(
+      ['var ' + javascriptGenerator.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type("org.openhab.core.model.script.actions.Exec");'])
+    const duration = javascriptGenerator.provideFunction_(
       'duration',
-      ['var ' + Blockly.JavaScript.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type("java.time.Duration");'])
+      ['var ' + javascriptGenerator.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type("java.time.Duration");'])
     let runCommand = block.getFieldValue('cmdExecute').replace(/ /g, '","')
     let timeout = block.getFieldValue('timeout')
     let code = exec + '.executeCommandLine(' + duration + '.ofSeconds(' + timeout + '),"' + runCommand + '")\n'
-    return [code, Blockly.JavaScript.ORDER_NONE]
+    return [code, javascriptGenerator.ORDER_NONE]
   }
 
   Blockly.Blocks['oh_exec3'] = {
@@ -78,16 +79,16 @@ export default function defineOHBlocks_Exec (f7) {
     }
   }
 
-  Blockly.JavaScript['oh_exec3'] = function (block) {
-    const exec = Blockly.JavaScript.provideFunction_(
+  javascriptGenerator['oh_exec3'] = function (block) {
+    const exec = javascriptGenerator.provideFunction_(
       'exec',
-      ['var ' + Blockly.JavaScript.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type(\'org.openhab.core.model.script.actions.Exec\');'])
-    const duration = Blockly.JavaScript.provideFunction_(
+      ['var ' + javascriptGenerator.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type(\'org.openhab.core.model.script.actions.Exec\');'])
+    const duration = javascriptGenerator.provideFunction_(
       'duration',
-      ['var ' + Blockly.JavaScript.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type(\'java.time.Duration\');'])
+      ['var ' + javascriptGenerator.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type(\'java.time.Duration\');'])
     let runCommand = block.getFieldValue('cmdExecute').replace(/ /g, '","')
     let timeout = block.getFieldValue('timeout')
     let code = exec + '.executeCommandLine(' + duration + '.ofSeconds(' + timeout + '),"' + runCommand + '")\n'
-    return [code, Blockly.JavaScript.ORDER_NONE]
+    return [code, javascriptGenerator.ORDER_NONE]
   }
 }

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

@@ -1,4 +1,5 @@
 import Blockly from 'blockly'
+import { javascriptGenerator } from 'blockly/javascript'
 import { FieldItemModelPicker } from './ohitemfield'
 
 export default function defineOHBlocks_HTTP (f7, scripts) {
@@ -22,21 +23,21 @@ export default function defineOHBlocks_HTTP (f7, scripts) {
     }
   }
 
-  Blockly.JavaScript['oh_httprequest'] = function (block) {
-    const http = Blockly.JavaScript.provideFunction_(
+  javascriptGenerator['oh_httprequest'] = function (block) {
+    const http = javascriptGenerator.provideFunction_(
       'http',
-      ['var ' + Blockly.JavaScript.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type(\'org.openhab.core.model.script.actions.HTTP\');'])
+      ['var ' + javascriptGenerator.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type(\'org.openhab.core.model.script.actions.HTTP\');'])
     let requesttype = block.getFieldValue('requestType')
     let contenttype = block.getFieldValue('contentType')
-    let url = Blockly.JavaScript.valueToCode(block, 'url', Blockly.JavaScript.ORDER_ATOMIC)
-    let payload = Blockly.JavaScript.valueToCode(block, 'payload', Blockly.JavaScript.ORDER_ATOMIC)
+    let url = javascriptGenerator.valueToCode(block, 'url', javascriptGenerator.ORDER_ATOMIC)
+    let payload = javascriptGenerator.valueToCode(block, 'payload', javascriptGenerator.ORDER_ATOMIC)
     let code = ''
     if (contenttype === 'none') {
       code = http + '.' + requesttype + '("' + url + '",60)'
     } else {
       code = http + '.' + requesttype + '(' + url + ',"' + contenttype + '","' + payload + '")'
     }
-    return [code, Blockly.JavaScript.ORDER_NONE]
+    return [code, javascriptGenerator.ORDER_NONE]
   }
 
   Blockly.Blocks['oh_script_dropdown'] = {
@@ -58,10 +59,10 @@ export default function defineOHBlocks_HTTP (f7, scripts) {
     }
   }
 
-  Blockly.JavaScript['oh_script_dropdown'] = function (block) {
+  javascriptGenerator['oh_script_dropdown'] = function (block) {
     let scriptName = block.getFieldValue('script')
     let code = scriptName
-    return [code, Blockly.JavaScript.ORDER_NONE]
+    return [code, javascriptGenerator.ORDER_NONE]
   }
 
   Blockly.Blocks['oh_ping'] = {
@@ -76,12 +77,12 @@ export default function defineOHBlocks_HTTP (f7, scripts) {
     }
   }
 
-  Blockly.JavaScript['oh_ping'] = function (block) {
-    const actions = Blockly.JavaScript.provideFunction_(
+  javascriptGenerator['oh_ping'] = function (block) {
+    const actions = javascriptGenerator.provideFunction_(
       'actions',
-      ['var ' + Blockly.JavaScript.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type("org.openhab.core.model.script.actions.Ping");'])
-    let hostname = Blockly.JavaScript.valueToCode(block, 'hostName', Blockly.JavaScript.ORDER_ATOMIC)
+      ['var ' + javascriptGenerator.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type("org.openhab.core.model.script.actions.Ping");'])
+    let hostname = javascriptGenerator.valueToCode(block, 'hostName', javascriptGenerator.ORDER_ATOMIC)
     let code = actions + '.checkVitality(' + hostname + ',0,10)'
-    return [code, Blockly.JavaScript.ORDER_NONE]
+    return [code, javascriptGenerator.ORDER_NONE]
   }
 }

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

@@ -6,12 +6,15 @@
 * - Even though "enhancedjavasound" is provided as a sink, currently it is not clear what the intention is
 *
 * See more background info on openHAB multimedia here: https://www.openhab.org/docs/configuration/multimedia.html
+*
+* supports jsscripting
 */
 
 import Blockly from 'blockly'
+import { javascriptGenerator } from 'blockly/javascript'
 import { FieldSlider } from '@blockly/field-slider'
 
-export default function (f7, sinks, voices) {
+export default function (f7, isGraalJs, sinks, voices) {
   Blockly.Blocks['oh_volumeslider'] = {
     init: function () {
       this.appendDummyInput()
@@ -22,7 +25,7 @@ export default function (f7, sinks, voices) {
     }
   }
 
-  Blockly.JavaScript['oh_volumeslider'] = function (block) {
+  javascriptGenerator['oh_volumeslider'] = function (block) {
     const fieldName = block.getFieldValue('volume')
     let code = `'${fieldName}'`
     return [code, 0]
@@ -53,13 +56,12 @@ export default function (f7, sinks, voices) {
   * Plays a file (like mp3) which resides in conf/sounds to the given sink
   * Code part
   */
-  Blockly.JavaScript['oh_playmedia_sink'] = function (block) {
-    const audio = addAudio()
-    let fileName = Blockly.JavaScript.valueToCode(block, 'fileName', Blockly.JavaScript.ORDER_ATOMIC)
-    let sinkName = Blockly.JavaScript.valueToCode(block, 'sinkName', Blockly.JavaScript.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
+  javascriptGenerator['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 code = `${audio}.playSound(${sinkName}, ${fileName});\n`
-    return code
+    const audio = (isGraalJs) ? 'actions.Audio' : addAudio()
+    return `${audio}.playSound(${sinkName}, ${fileName});\n`
   }
 
   /*
@@ -91,14 +93,17 @@ export default function (f7, sinks, voices) {
   * Note: In general, though more complex, rather create a volume item for that device and set the volume first as it is more reliable.
   * Code part
   */
-  Blockly.JavaScript['oh_playmedia_sink_volume'] = function (block) {
-    const audio = addAudio()
-    let fileName = Blockly.JavaScript.valueToCode(block, 'fileName', Blockly.JavaScript.ORDER_ATOMIC)
-    let sinkName = Blockly.JavaScript.valueToCode(block, 'sinkName', Blockly.JavaScript.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
-    let volume = Blockly.JavaScript.valueToCode(block, 'volume', Blockly.JavaScript.ORDER_ATOMIC).replace(/'/g, '')
+  javascriptGenerator['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 code = `${audio}.playSound(${sinkName}, ${fileName}, new PercentType(${volume}));\n`
-    return code
+    if (isGraalJs) {
+      return `actions.Audio.playSound(${sinkName}, ${fileName}, new runtime.PercentType(${volume}));\n`
+    } else {
+      const audio = addAudio()
+      return `${audio}.playSound(${sinkName}, ${fileName}, new PercentType(${volume}));\n`
+    }
   }
 
   /*
@@ -126,12 +131,12 @@ export default function (f7, sinks, voices) {
   * Plays a stream from a URL on a specific sink
   * Blockly part
   */
-  Blockly.JavaScript['oh_playstream_sink'] = function (block) {
-    const audio = addAudio()
-    let url = Blockly.JavaScript.valueToCode(block, 'url', Blockly.JavaScript.ORDER_ATOMIC)
-    let sinkName = Blockly.JavaScript.valueToCode(block, 'sinkName', Blockly.JavaScript.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
-    let code = `${audio}.playStream(${sinkName}, ${url});\n`
-    return code
+  javascriptGenerator['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, '')
+
+    const audio = (isGraalJs) ? 'actions.Audio' : addAudio()
+    return `${audio}.playStream(${sinkName}, ${url});\n`
   }
 
   /*
@@ -156,12 +161,12 @@ export default function (f7, sinks, voices) {
   * Stops a stream on a specific sink
   * Blockly part
   */
-  Blockly.JavaScript['oh_stopstream_sink'] = function (block) {
-    const audio = addAudio()
+  javascriptGenerator['oh_stopstream_sink'] = function (block) {
     let url = block.getFieldValue('url')
-    let sinkName = Blockly.JavaScript.valueToCode(block, 'sinkName', Blockly.JavaScript.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
-    let code = `${audio}.playStream(${sinkName}, null);\n`
-    return code
+    let sinkName = javascriptGenerator.valueToCode(block, 'sinkName', javascriptGenerator.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
+
+    const audio = (isGraalJs) ? 'actions.Audio' : addAudio()
+    return `${audio}.playStream(${sinkName}, null);\n`
   }
 
   /*
@@ -191,17 +196,13 @@ export default function (f7, sinks, voices) {
   * Says some text via a device sink - TTS has to be installed for that
   * Code part
   */
-  Blockly.JavaScript['oh_say'] = function (block) {
-    const voice = Blockly.JavaScript.provideFunction_(
-      'voice',
-      ['var ' + Blockly.JavaScript.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type(\'org.openhab.core.model.script.actions.Voice\');'])
+  javascriptGenerator['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 = Blockly.JavaScript.valueToCode(block, 'textToSay', Blockly.JavaScript.ORDER_ATOMIC)
-    const voiceName = Blockly.JavaScript.valueToCode(block, 'voice', Blockly.JavaScript.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
-    const deviceSink = Blockly.JavaScript.valueToCode(block, 'deviceSink', Blockly.JavaScript.ORDER_ATOMIC).replace('(', '').replace(/[()]/g, '')
-
-    const code = `${voice}.say(${textToSay}, ${voiceName}, ${deviceSink});\n`
-    return code
+    const voice = (isGraalJs) ? 'actions.Voice' : addVoice()
+    return `${voice}.say(${textToSay}, ${voiceName}, ${deviceSink});\n`
   }
 
   /*
@@ -228,9 +229,9 @@ export default function (f7, sinks, voices) {
     }
   }
 
-  Blockly.JavaScript['oh_audiosink_dropdown'] = function (block) {
+  javascriptGenerator['oh_audiosink_dropdown'] = function (block) {
     let sinkName = block.getFieldValue('sinks')
-    return [`'${sinkName}'`, Blockly.JavaScript.ORDER_NONE]
+    return [`'${sinkName}'`, javascriptGenerator.ORDER_NONE]
   }
 
   /*
@@ -258,14 +259,20 @@ export default function (f7, sinks, voices) {
     }
   }
 
-  Blockly.JavaScript['oh_voices_dropdown'] = function (block) {
+  javascriptGenerator['oh_voices_dropdown'] = function (block) {
     let voiceName = block.getFieldValue('voiceName')
-    return [`'${voiceName}'`, Blockly.JavaScript.ORDER_NONE]
+    return [`'${voiceName}'`, javascriptGenerator.ORDER_NONE]
   }
 
   function addAudio () {
-    return Blockly.JavaScript.provideFunction_(
+    return javascriptGenerator.provideFunction_(
       'audio',
-      ['var ' + Blockly.JavaScript.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type(\'org.openhab.core.model.script.actions.Audio\');'])
+      ['var ' + javascriptGenerator.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type(\'org.openhab.core.model.script.actions.Audio\');'])
+  }
+
+  function addVoice () {
+    return javascriptGenerator.provideFunction_(
+      'voice',
+      ['var ' + javascriptGenerator.FUNCTION_NAME_PLACEHOLDER_ + ' = Java.type(\'org.openhab.core.model.script.actions.Voice\');'])
   }
 }

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

@@ -1,10 +1,12 @@
 /*
 * Adds new blocks to the colour section
+* supports jsscripting
 */
 
 import Blockly from 'blockly'
+import { javascriptGenerator } from 'blockly/javascript'
 
-export default function (f7) {
+export default function (f7, isGraalJs) {
   /*
   * converts a hex color string in to an openHAB hue-saturation-brightness string
   * Block
@@ -26,9 +28,9 @@ export default function (f7) {
   * converts a hex color string in to an openHAB hue-saturation-brightness string
   * Code generation
   */
-  Blockly.JavaScript['oh_color_to_hsb'] = function (block) {
+  javascriptGenerator['oh_color_to_hsb'] = function (block) {
     let conversionFunction = addConvertColourHexToHSB()
-    const hexColor = Blockly.JavaScript.valueToCode(block, 'hexColor', Blockly.JavaScript.ORDER_ATOMIC)
+    const hexColor = javascriptGenerator.valueToCode(block, 'hexColor', javascriptGenerator.ORDER_ATOMIC)
     let code = `${conversionFunction}(${hexColor})`
     return [code, 0]
   }
@@ -37,10 +39,10 @@ export default function (f7) {
   * converts rgb to hsb (thanks to https://www.30secondsofcode.org/js/s/rgb-to-hsb)
   */
   function addConvertColourHexToHSB () {
-    const hsbConversion = Blockly.JavaScript.provideFunction_(
+    const hsbConversion = javascriptGenerator.provideFunction_(
       'colorHexToHSB',
       [
-        'function ' + Blockly.JavaScript.FUNCTION_NAME_PLACEHOLDER_ + ' (hexColor) {',
+        'function ' + javascriptGenerator.FUNCTION_NAME_PLACEHOLDER_ + ' (hexColor) {',
         '  var rgb = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hexColor);',
         '  if (!rgb) return \'\';',
         '  var r = parseInt(rgb[1], 16) / 255, g = parseInt(rgb[2], 16) / 255, b = parseInt(rgb[3], 16) / 255;',