Fork me on GitHub
#devcards
<
2020-07-07
>
adriaan.callaerts15:07:44

hi everyone! I'm running devcards as an extra-main using figwheel main. The entrypoint seems to be imported fine and devcard ui is showing, but none of my cards are being shown. Anyone have any clue what might be going wrong?

oliy15:07:42

Have you done a require of your test namespaces in your runner?

oliy15:07:07

It doesn't automagically find them like the auto testing runner does, in my experience

adriaan.callaerts15:07:22

yes, I've done a require. It seems like the macro is not getting expanded into a card/is being removed

adriaan.callaerts15:07:33

ok, figured it out. The figwheel extra-main-files gave me the impression that the map for an extra entry would get merged with the settings for the main entry. So I thought I could do this:

^{:watch-dirs ["src" "env/dev" "cards" "test"]
  :auto-bundle :webpack
  :final-output-to "resources/public/js/app.js"
  :clean-outputs true
  :extra-main-files
  {:devcards {:main frontend.devcards-runner
              :devcards true}}}
{:main frontend.main
 :output-dir "resources/public/js/app"
 :output-wrapper true}
which apparently you can't. If I specify the :devcards true setting in the main map it works

bhauman15:07:42

@adriaan.callaerts oh that’s tricky

bhauman15:07:50

but its true

bhauman15:07:19

its in the docs

bhauman15:07:35

maybe I need to raise it to the top in a tdlr section

bhauman15:07:33

Also I’m hoping to have a :auto-devcards figwheel option soon

adriaan.callaerts15:07:32

Another thing that I noticed using it with figwheel main is that I kinda have to do something hacky to get it to play nice with the generated entrypoint. I wanted to achieve a similar effect as the auto-testing, in which the UI of the testing/devcards report overrides/replaces the dummy output of the extra-main html. To achieve that with devcards, I resorted to doing something like this:

(ns fleet-frontend.devcards-runner
  (:require [devcards.core]
            [devcards.system :refer [devcards-app-element-id get-element-by-id]]
            [frontend.cards]))

(defonce init
  (do
    (enable-console-print!)
    (println "Devcards are ON")
    (set! (. (get-element-by-id "app-devcards") -id) devcards-app-element-id)
    (devcards.core/start-devcard-ui!)))

bhauman15:07:47

yeah you are better off creating a landing html page that requires the devcards-runner.main.js

adriaan.callaerts15:07:06

how does figwheel achieve that effect with the testing report? I'm guessing it overrides the goog-define for the root element id that's used there?

bhauman15:07:32

it uses the app element that is already there I think

adriaan.callaerts15:07:06

wouldn't the app element be called app-auto-testing?

bhauman15:07:11

yeah your right

adriaan.callaerts15:07:28

so I'm guessing figwheel does some magic to "set" this https://github.com/bhauman/cljs-test-display/blob/master/src/cljs_test_display/core.cljs#L25 to use the alternative mount point, as opposed to devcard which has it hardcoded here https://github.com/bhauman/devcards/blob/master/src/devcards/system.cljs#L23

bhauman15:07:03

yeah a closure define can set that

bhauman15:07:44

there it is