devcards

Devcards aims to provide a visual REPL experience for ClojureScript https://github.com/bhauman/devcards
Adriaan Callaerts 2020-07-07T15:08:44.002300Z

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?

2020-07-07T15:16:42.003Z

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

2020-07-07T15:17:07.003700Z

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

Adriaan Callaerts 2020-07-07T15:23:22.004500Z

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

Adriaan Callaerts 2020-07-07T15:35:33.007100Z

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

bhauman 2020-07-07T15:36:42.007600Z

@adriaan.callaerts oh that’s tricky

bhauman 2020-07-07T15:36:50.007800Z

but its true

bhauman 2020-07-07T15:37:19.008600Z

its in the docs

bhauman 2020-07-07T15:37:35.009300Z

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

bhauman 2020-07-07T15:38:33.011Z

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

2👍
Adriaan Callaerts 2020-07-07T15:39:32.011900Z

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!)))

bhauman 2020-07-07T15:40:47.012800Z

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

Adriaan Callaerts 2020-07-07T15:42:06.013900Z

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?

bhauman 2020-07-07T15:45:32.014600Z

it uses the app element that is already there I think

bhauman 2020-07-07T15:46:05.015400Z

hmmm wait

Adriaan Callaerts 2020-07-07T15:46:06.015500Z

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

bhauman 2020-07-07T15:46:11.015700Z

yeah your right

Adriaan Callaerts 2020-07-07T15:47:28.016600Z

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

bhauman 2020-07-07T15:49:03.017100Z

yeah a closure define can set that

bhauman 2020-07-07T15:50:44.017600Z

there it is