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.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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
/links
functions.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