-
Notifications
You must be signed in to change notification settings - Fork 1
Description
All of the functions and variables we're declaring at the root level in our JS files end up just hanging out in the global scope, accessible to any other JS running in the same context. For example, any script loaded on the index page can access createOptionElement from query_form.js:
portmap/static/js/query_form.js
Lines 1 to 4 in 923f56b
| function createOptionElement(text, value = text) { | |
| const element = document.createElement("option"); | |
| return Object.assign(element, { text, value }); | |
| } |
This isn't ideal since it can potentially lead to issues if two scripts (either our own or third-party scripts like lucide/htmx) try to use the same function/variable names in the global scope, and it can also prevent garbage collection.
Continuing the theme of keeping this project nice and simple, and considering we don't have a ton of JS, let's go old-school and just make sure we wrap our own JS files in IIFEs. If/when we decide to introduce build tools for our JS, we can make this happen automatically. We can probably enforce this with ESLint too (#41).