Should elm-pages have an API for script and link tag? #195
Replies: 1 comment
-
|
Hi Dillon, This is probably not the normal experience, since I am new to front-end/web development. I started with the Beta 2.0 Setup Instructions to create the basic site. Although I am familiar with As I learned more about CSS, I contemplated replacing the I have limited elm/front-end/web/JS experience/knowledge, but it seems to me that having an API that provides that ability to add |
Beta Was this translation helpful? Give feedback.
-
Some ideas:
Global-Only
<script>and<link>tags are global, not page-specific. If they were page-specific, then you could rely on the page loading order. For example, if you load the JavaScript for the site's web components on the page/blog, but not on/blog/introducing-elm-pages. But then you rely on that script being loaded to render the individual blog post page. In that case, you would have a bug where the page would display correctly when you navigate first to/blogand then click through to the specific post, but it wouldn't render correctly (wouldn't load the web component) if you navigated directly to the blog post's URL.Enforcing Best Practices
NextJS 11 introduced a few ESLint checks and an API for loading scripts to ensure some best practices, and for providing some more nuanced ways to specify script loading.
The nuanced script loading may be beyond the scope of this design, but I think a good goal would be to provide an API where it makes the right thing easy and invalid things impossible or unlikely.
Some examples of things that should be easy to get right:
I think an API like this is worth doing right, which to me means not exposing a general-purpose API for adding anything to the head tag, but rather providing some useful common ways to do the core tasks of including CSS and JavaScript on a page, and encapsulating them nicely to make it feel safer to do so for users.
For other use cases, like lazy-loading JS or only loading it on specific pages, there's a better tool for that, which is ESM imports. The browser supports this natively, and using promises you can ensure that you're referring to loaded code after it's available, and that you've required it when you need it.
Feedback/Ideas
Are there any other considerations? I'd love to hear feedback, use cases, and references to other APIs that could be a source of inspiration here. Let me know you're thoughts!
Beta Was this translation helpful? Give feedback.
All reactions