Automatically wrap JS in self-invoking function

[JuroOravec]

Description

Seeing the example JS script in README:

/* In a file called [project root]/components/calendar/script.js */
(function () {
  if (document.querySelector(".calendar-component")) {
    document.querySelector(".calendar-component").onclick = function () {
      alert("Clicked calendar!");
    };
  }
})();

I thought it could be a nice quality of life addition to automatically wrap JS in self-invoking functions. So users could write just

/* In a file called [project root]/components/calendar/script.js */
if (document.querySelector(".calendar-component")) {
  document.querySelector(".calendar-component").onclick = function () {
    alert("Clicked calendar!");
  };
}

and we would wrap it in a function for them to scope the variables:

js_content = "..."
return "(function () {\n" + js_content + "\n})()"

Considerations

• To make it easy to override, it should be it's own method on the Component class, e.g. render_js and render_css.

• While it should be easy to do this for JS/CSS defined directly on the Component class (Component.js / Component.css), I'm not sure if this would be possible for JS/CSS referenced by file paths (Component.Media.js, Component.Media.css)