Rework `golem::add_js_input_binding`

[ColinFay]

golem::add_js_input_binding()

should build a working input

[ColinFay]

also, it should harmonize the namings

[ColinFay]

golem::add_js_input_binding("custom")

Should output:

JavaScript Code (inst/app/www/custom-input.js)

var customInput = new Shiny.InputBinding();
$.extend(customInput, {
  find: function(scope) {
    // Find all elements with data-input-type="custom"
    return $(scope).find('[data-input-type="custom"]');
  },
  
  getValue: function(el) {
    // Get the current value from the input element
    return $(el).val();
  },
  
  setValue: function(el, value) {
    // Set the value of the input element
    $(el).val(value);
  },
  
  subscribe: function(el, callback) {
    // Listen to changes and trigger callback
    $(el).on('change.customInput', function(e) {
      callback();
    });
    // Also listen to input event for real-time updates
    $(el).on('input.customInput', function(e) {
      callback();
    });
  },
  
  unsubscribe: function(el) {
    // Clean up event listeners
    $(el).off('.customInput');
  },
  
  receiveMessage: function(el, data) {
    // Handle messages from R using updateCustomInput()
    if (data.hasOwnProperty('value')) {
      this.setValue(el, data.value);
    }
    if (data.hasOwnProperty('label')) {
      $(el).prev('label').text(data.label);
    }
  }
});

Shiny.inputBindings.register(customInput, 'shiny.customInput');

R Code (R/fct_inputs.R)

#' Create a Custom Input
#'
#' @param inputId The input slot that will be used to access the value.
#' @param label Display label for the input.
#' @param value Initial value.
#' @param ... Additional HTML attributes.
#'
#' @export
customInput <- function(inputId, label, value = "", ...) {
  shiny::tags$div(
    shiny::tags$label(label),
    shiny::tags$input(
      id = inputId,
      type = "text",
      value = value,
      `data-input-type` = "custom",
      class = "form-control",
      ...
    )
  )
}

#' Update a Custom Input
#'
#' @param session Shiny session object.
#' @param inputId The id of the input object.
#' @param label New label (optional).
#' @param value New value (optional).
#'
#' @export
updateCustomInput <- function(session, inputId, label = NULL, value = NULL) {
  data <- list()
  if (!is.null(label)) data$label <- label
  if (!is.null(value)) data$value <- value
  
  session$sendInputMessage(inputId, data)
}

How to use in your Golem app:

In UI (app_ui.R or module):

customInput("myCustom", "Enter something:", value = "Hello")

In Server (app_server.R or module):

observeEvent(input$myCustom, {
  print(paste("User entered:", input$myCustom))
})
```

```
# To update from server:
updateCustomInput(session, "myCustom", value = "New Value")
```

Key points:
- JavaScript binding name (shiny.customInput) must match what you use in R
- find() locates elements with your custom attribute
- getValue/setValue handle getting/setting values
- subscribe/unsubscribe manage event listeners
- The R input function creates the HTML element
- The update function sends messages back to the input binding

Save the JS file in inst/app/www/ and it will be auto-loaded by Golem's bundle_resources().

[ColinFay]

Closed via #1239