Add support for variables in buttons and fix an issue where the varia…

…ble regex would only match every other time

Signed-off-by: Axel Boberg <[email protected]>

api/variables.js

@@ -6,7 +6,22 @@ const objectPath = require('object-path')
 
 const DIController = require('../shared/DIController')
 
-const VARIABLE_REGEX = /\$\((.*?)\)/g
+/**
+ * The regex used to match
+ * variables in strings
+ *
+ * @example
+ * "My string $(my_variable)" -> MATCH
+ * "My string no variable" -> NO MATCH
+ *
+ * This should NOT be made global "/g" as that will trigger
+ * an issue where the expression will only match every
+ * other time it's used – this is known behaviour in
+ * multiple browsers
+ *
+ * @type { RegExp }
+ */
+const VARIABLE_REGEX = /\$\((.*?)\)/
 
 class Variables {
   #props

plugins/button/app/App.jsx

@@ -5,8 +5,32 @@ import { QueryPath } from './components/QueryPath'
 import { ItemButton } from './components/ItemButton'
 import { ItemDropArea } from './components/ItemDropArea'
 
+/**
+ * Get the label to display in a button
+ * for an item or non-item
+ *
+ * @param { any } item 
+ * @returns { Promise.<String> }
+ */
+async function getLabel (item) {
+  if (!item) {
+    return 'Drop an item here'
+  }
+
+  if (!item?.data?.name) {
+    return 'Unnamed'
+  }
+
+  if (!bridge.variables.stringContainsVariable(item?.data?.name)) {
+    return item?.data?.name
+  }
+
+  return await bridge.items.renderValue(item.id, 'data.name')
+}
+
 export default function App () {
   const [itemId, setItemId] = React.useState()
+  const [label, setLabel] = React.useState()
   const [item, setItem] = React.useState()
 
   React.useEffect(() => {
@@ -39,6 +63,14 @@ export default function App () {
     }
   }, [item])
 
+  React.useEffect(() => {
+    async function render () {
+      const label = await getLabel(item)
+      setLabel(label)
+    }
+    render()
+  }, [itemId, item])
+
   function handleItemChange (itemId) {
     window.WIDGET_UPDATE({
       'itemId': itemId
@@ -60,8 +92,6 @@ export default function App () {
     bridge.items.stopItem(itemId)
   }
 
-  const label = item ? (item?.data?.name || 'Unnamed') : 'Drop an item here'
-
   return (
     <>
       <QueryPath path='play'>