Replies: 7 comments 7 replies
-
|
This came up again: #400 |
Beta Was this translation helpful? Give feedback.
-
|
@brentbaum The least brittle option I've been able to think of is to try and load a <script>
import("/custom.js")
.then(() => console.log("Loaded custom.js script"))
.catch(() => console.log("No custom.js script found"));
</script>This would allow you to serve a from tempfile import NamedTemporaryFile
from sanic import Sanic
import idom
from idom.server.sanic import PerClientStateServer
temp = NamedTemporaryFile()
open(temp.name, "w+").write("document.title = 'Hello World';") # set the page title on load
app = Sanic()
app.static("/custom.js", temp.name, name="custom_js", content_type="text/javascript")
HelloWorld = idom.component(lambda: idom.html.h1("Hello World"))
PerClientStateServer(HelloWorld, app=app).run("127.0.0.1", 8000)Thoughts on this approach? |
Beta Was this translation helpful? Give feedback.
-
|
I suppose some of these details could be abstracted away by making this a import idom
idom.run(MyComponent, server_config={"custom_js": "path/to/custom.js"}) |
Beta Was this translation helpful? Give feedback.
-
|
I like the second approach quite a bit! The killer here is that React doesn't allow you to render and execute <script> tags by default - I tried for an hour yesterday to get a simple |
Beta Was this translation helpful? Give feedback.
-
|
@brentbaum what do you think about making something like this into a component that you'd just include in your layout? from idom import Javascript
my_script = Javascript("path/to/my/script.js")
@idom.component
def MyApp():
return idom.html.div(my_script, ...) |
Beta Was this translation helpful? Give feedback.
-
|
IDOM now has a |
Beta Was this translation helpful? Give feedback.
-
|
OK I have been thinking about this too, currently I load tailwind CSS like this: html.div(html.link({"href": "/static/tailwind.css", "rel": "stylesheet"})),Not ideal. This should be in from idom import Javascript
js = """var head= document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = '/static/tailwind.css';
head.appendChild(link);
"""
@idom.component
def MyApp():
return idom.html.script(content=js) |
Beta Was this translation helpful? Give feedback.
-
|
To add on to what Ryan said, serving all of your CSS in head is bad for another reason. You generally want to defer CSS/JS load until they are needed for the sake of performance. Also @rmorshea , I think it should behave as a normal script by default and maybe have a parameter for modifying the behavior? |
Beta Was this translation helpful? Give feedback.
-
|
Agreed. Instead of assuming the script is like an effect, we should be able to check if the script evals to a function, and if it does, we'll call it like an effect. Could you write up an issue for that? |
Beta Was this translation helpful? Give feedback.
-
|
Will do. Also, does the current script accept the |
Beta Was this translation helpful? Give feedback.
-
|
Hmm, hadn't considered that. Yeah, I'll probably want to rework the script a bit to make it map into a normal |
Beta Was this translation helpful? Give feedback.
-
|
I agree with all your points, we could document that for CSS and other things that go into |
Beta Was this translation helpful? Give feedback.
-
It would be great if it were possible to do some basic templating on the IDOM client web page. Without this, if you want to include custom styles or JS in the
<head />of the HTML markup you have to completely re-create the client.The alternative I suppose would be to make it easier to create custom clients. I'm not entirely sure what that would look like though. Maybe just a cookie cutter repo? The downside there of course is that you can't automatically update the repo if you update the template.
Beta Was this translation helpful? Give feedback.
All reactions