Allow customization of built-in IDOM client #253

Activity

1. rmorshea

   added

   enhancement

   on Oct 29, 2020
2. rmorshea

   self-assigned this

   on Oct 29, 2020
3. rmorshea commented on Jun 15, 2021

   

   rmorshea

   on Jun 15, 2021

   CollaboratorAuthor

   More actions

   This came up again: #400
4. rmorshea commented on Jun 16, 2021

   

   rmorshea

   on Jun 16, 2021

   CollaboratorAuthor

   More actions

   @brentbaum The least brittle option I've been able to think of is to try and load a /custom.js script in index.html:

   <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 custom.js file that could manipulate the page in any way you might want:

   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?
5. rmorshea commented on Jun 16, 2021

   

   rmorshea

   on Jun 16, 2021

   CollaboratorAuthor

   More actions

   I suppose some of these details could be abstracted away by making this a server_config option:

   import idom
   
   idom.run(MyComponent, server_config={"custom_js": "path/to/custom.js"})
6. brentbaum commented on Jun 17, 2021

   

   brentbaum

   on Jun 17, 2021

   More actions

   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 <script>alert("hi!")</script> example to run before remembering. If I could run js inline the same way I can define inline css this wouldn't be a problem.
7. rmorshea commented on Jul 16, 2021

   

   rmorshea

   on Jul 16, 2021

   CollaboratorAuthor

   More actions

   @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_javascript = Javascript("path/to/my/script.js")
   
   @idom.component
   def MyApp():
       return idom.html.div(my_script, ...)
8. rmorshea

   added a commit that references this issue on Jul 17, 2021

   Enable standard JS scripts to be linked

   ...

   This issue will close once commit f6067f5 is merged into the 'main' branch.

   f6067f5
9. reactive-python

   locked and limited conversation to collaborators on Aug 28, 2021
10. rmorshea

    closed this as completedon Aug 28, 2021