prevent duplication of esm code

[timelyportfolio]

With the simple example provided, the esm is very concise, but I envision with more complicated anyhtmlwidgets this block could become long and unwieldy. Even with the simple example, let's say we want numerous button widgets. If I am understand correctly, this means each of these widgets will have its own esm meaning that the code is duplicated with each instance/usage. Wondering what mechanisms we might employ to avoid this duplication especially in scenarios where the esm is long and complicated. As a comparison, htmlwidgets registers each htmlwidget in window.HTMLWidgets to avoid the duplication.

library(anyhtmlwidget)

esm <- "
function render({ el, model }) {
  let count = () => model.get('count');
  let btn = document.createElement('button');
  btn.innerHTML = `count button ${count()}`;
  btn.addEventListener('click', () => {
    model.set('count', count() + 1);
    model.save_changes();
  });
  model.on('change:count', () => {
        btn.innerHTML = `count is ${count()}`;
  });
  el.appendChild(btn);
}
export default { render };
"

widget <- AnyHtmlWidget$new(.esm = esm, .mode = "dynamic", count = 1)
widget$render()

[timelyportfolio]

One probably very bad idea/hack:

library(htmltools)
library(anyhtmlwidget)
# one way to de-duplicate esm but most definitely a hack
#   and likely only works in static mode
#   and also requires tagList so widget doesn't work standalone
widget2 <- AnyHtmlWidget$new(
  .esm = htmlwidgets::JS("(function() {return document.getElementById('esm').innerText})()"),
  .mode = "static",
  .height='400px',
  count = 1
)
browsable(
  tagList(
    tags$script(
      id = "esm",
      type = "text/template",
      HTML(
"
  function render({ el, model }) {
    el.style.border = '4px solid red';
    let count = () => model.get('count');
    let btn = document.createElement('button');
    btn.innerHTML = `count is ${count()}`;
    btn.addEventListener('click', () => {
      model.set('count', count() + 1);
      model.save_changes();
    });
    model.on('change:count', () => {
      btn.innerHTML = `count is ${count()}`;
    });
    el.appendChild(btn);
  }
  export default { render };
"
      )
    ),
    lapply(1:5, function(x) widget2$render())
  )
)

prependContent for standalone

# use htmlwidgets::prependContent to make it work standalone static
htmlwidgets::prependContent(
  widget2$render(),
  tags$script(
      id = "esm",
      type = "text/template",
      HTML(
"
  function render({ el, model }) {
    el.style.border = '4px solid red';
    let count = () => model.get('count');
    let btn = document.createElement('button');
    btn.innerHTML = `count is ${count()}`;
    btn.addEventListener('click', () => {
      model.set('count', count() + 1);
      model.save_changes();
    });
    model.on('change:count', () => {
      btn.innerHTML = `count is ${count()}`;
    });
    el.appendChild(btn);
  }
  export default { render };
"
      )
    )
)

[keller-mark]

In R, I would prefer to keep .esm as a plain string, as this is part of the simplicity that makes anywidget so powerful.
I would be open to adding functionality for .esm to be a local or remote file path, as anywidget in Python supports. In the local case, we could then consider implementing hot-module reloading in development. https://anywidget.dev/en/getting-started/#progressive-development

Regarding duplication of the .esm on the JS side, I think we should wait for manzt/anywidget#628 and follow an analogous implementation to that the AnyWidget lifecycle can match (or be as close as possible) between R and Python.