Replies: 9 comments
-
|
Would love to see better support too! I have disabled |
Beta Was this translation helpful? Give feedback.
-
|
Another use case for this is eg. pyodide: https://pyodide.org/en/stable/usage/quickstart.html#complete-example There you need to load their JS in a |
Beta Was this translation helpful? Give feedback.
-
|
Right now, instead of using |
Beta Was this translation helpful? Give feedback.
-
|
@sergiodxa Sorry if I'm missing something really obvious, but if you have a resource route that is caching + generating a script, how would you include that script in a single page? The docs only talk about linking to them. It's obvious how other use cases like a CSS with |
Beta Was this translation helpful? Give feedback.
-
You can add a script tag with the src pointing to the resource route and render that script in the head. <script src="/path/to/resource/route" /> |
Beta Was this translation helpful? Give feedback.
-
Thanks, that's definitely what I'd like to do! Is there any documentation of how to add to the head of a single page in remix? In the docs I've only seen Reading the docs a bit more I think I might be able to do it in |
Beta Was this translation helpful? Give feedback.
-
|
@mcintyre94 in Remix Utils I build a component and type to do it https://github.com/sergiodxa/remix-utils#externalscripts You can also check the code in the repo if you don’t want to add a package, it uses useMatches and the handle export to work. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, that's really helpful! Remix-utils looks cool too, will have to check it out :) |
Beta Was this translation helpful? Give feedback.
-
|
It would be great to have the first-class support for this that
While it's maybe possible to achieve all the above with ResourceRoutes, it would be clunky and require a lot of boilerplate. |
Beta Was this translation helpful? Give feedback.
-
What is the new or updated feature that you are suggesting?
Allowing adding of external scripts to routes. Can be either by inlining script tag or via a separate file. The API would look similar to
meta/linksfunctions.Why should this feature be included?
I'm mainly thinking about JS-light web pages with hints of interactivity e.g. dark mode switch, canvas app, or usage of any imperative JS library where React is not needed.
Currently, there is
<script dangerouslySetInnerHTML>. However, this is not the most ergonomic due to lack of syntax highlighting, linting & minification.Alternatively, a separate process can be set up to build external script files, which can be added via
<script src>. This allows syntax highlighting and minification. However, to further optimize loading speed, we also need to set up filename hashing and add caching header manually.By making it a first class feature, we can overcome above limitations. This also fits in with Remix's vision of a progressive enhancement framework.
Beta Was this translation helpful? Give feedback.
All reactions