How to render devcards into a HTML element other than #com-rigsomelight-devcards-main? #148
Comments
|
Correct me if I'm wrong but devcards seems to just insert itself as first child of the body element, once it loads the JS script containing devcards does work with extra mains (it's one of the motivating examples mentioned in the docs you linked). You start the devcards UI in the extra main file. For example declare an extra main in your Re-reading the docs you linked and referencing the devcards docs you should be able to sort it out. Also check out this project's README (devcards section) and the project files for an example: https://github.com/onetom/clj-figwheel-main-devcards/blob/master/README.md |
|
What I saw happening was that the devcards are rendered atop the figwheel-extra-main page instead of into the designated element it reserves for content to be displayed. This creates a really crappy UI. If devcards would support specifying the target element, I could make it render into the appropriate place and figwheel-extra-main and devcards would play well together. |
|
I am experiencing this also. You end up with this:
Not the end of the world, but thought an image might help 🤷♂️ |
|
And for anyone who might find it useful, I changed the render function in my devcards main to update the id of the target div to the one devcards is expecting: (ns ^:figwheel-hooks budget-devcards.core
(:require [devcards.core]
[clojure.browser.dom :as dom]
[budget-devcards.components]))
(defn render []
(let [element (dom/get-element "app-devcards")]
(when element
(-> element
(. -id)
(set! "com-rigsomelight-devcards-main")))
(devcards.core/start-devcard-ui!)))
(defn ^:after-load render-on-reload []
(render))
(render)
|
|
anyone find a less hacky way to fix this than deleting the element, seems there must be something in there by default or a way to replace the default html template for devcards ? |
|
Shortly after writing that, I found out you just create a html file next to the index file but make sure it includes the generate devcards javascript. So this for example then just access http://localhost:9500/cards.html not sure why by default it gives you a html page then renders above like in the screenshot but this is good enough for me. |
I would like to render my devcards into a HTML element that is not
#com-rigsomelight-devcards-main(but#app-devcards, to use it with figwheel-extra-mains). How do I do that?It would be nice if I could set
:devcards {:target-element :#app-devcards}(instead of:devcards true) in the CLJS compiler options.The text was updated successfully, but these errors were encountered: