search

bhauman / devcards

Devcards aims to provide a visual REPL experience for ClojureScript
1.53k stars 116 forks source link

How to render devcards into a HTML element other than #com-rigsomelight-devcards-main? #148

Open ghost opened 5 years ago

ghost commented 5 years ago

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.

vaz commented 5 years ago

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 start-devcard-ui!. The element it creates and inserts is #com-rigsomelight-devcards-main, yes, but the target element is just the body.

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 dev.cljs.edn build, ^{:extra-main-files {:devcards {:main yourapp.devcards}}}, then in yourapp.devcards you require modules with defcard in them and run (devcards.core/start-devcard-ui!) in there as usual. The devcards should be at /figwheel-extra-main/devcards, which should be loading the script /cljs-out/dev-main-devcards.js.

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

ghost commented 5 years ago

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.

brianium commented 5 years ago

I am experiencing this also. You end up with this:

screen shot 2019-02-20 at 9 50 59 pm

Not the end of the world, but thought an image might help 🤷‍♂️

brianium commented 5 years ago

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)
olymk2 commented 5 years ago

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 ?

olymk2 commented 5 years ago

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.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <link href="/css/example.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"

  </head>
  <body>
    <script src="/cljs-out/dev-main-devcards.js" type="text/javascript"></script>
  </body>
</html>