Devcards aims to provide a visual REPL experience for ClojureScript
kauko 2016-05-07T12:23:14.000039Z

Hello! Is it possible to setup my project in such a way that devcards are created alongside the rest of the application? I'd like to have a route "/devcards" that would serve a devcards.html where the devcards are mounted.

kauko 2016-05-07T12:23:23.000040Z

If I don't go to /devcards, the app will work normally

kauko 2016-05-07T12:32:21.000041Z

Looking at the devcards-template, I get the feeling that the intended workflow is that I start with lein figwheel devcards if I want to use devcards, and then switch to lein figwheel dev if I want to use the actual app.. but that can't be right

kauko 2016-05-07T12:32:38.000042Z

or maybe I'm supposed to do lein cljsbuild devcards once, figwheel dev?

bhauman 2016-05-07T12:35:25.000043Z

@kauko So figwheel can run two builds at once. lein figwheel dev cards

bhauman 2016-05-07T12:35:56.000044Z

So you configure two builds

bhauman 2016-05-07T12:36:08.000045Z

And run them at the same time

kauko 2016-05-07T12:36:13.000046Z

Hah, the man himself 😄 Ok :simple_smile:

kauko 2016-05-07T12:37:00.000047Z

What logic does devcards use for.. mounting itself? It feels like it just attaches itself to the page

kauko 2016-05-07T12:38:47.000048Z

I mean, I'm used to having a `<div id="app"></div>" somewhere, and then mounting the entry point there client-side

kauko 2016-05-07T12:38:54.000049Z

but it seems devcards doesn't need anything like that

kauko 2016-05-07T12:39:02.000050Z

just curious, that's all :simple_smile:

bhauman 2016-05-07T12:39:05.000051Z

You need to have a separate html page to host the cards

bhauman 2016-05-07T12:39:29.000052Z

And it creates a div to mount if it isn't there

kauko 2016-05-07T12:39:43.000053Z


kauko 2016-05-07T12:40:05.000054Z

Yeah, that's what I think I'm doing.. I mean, having a separate html page for it

kauko 2016-05-07T12:40:33.000055Z

I've been using clojure for a year now, but this is the first time I'm actually starting a project from scratch by myself, so I'm a bit lost still. but making progress! 😄

kauko 2016-05-07T12:41:17.000056Z

Woot, seems to work. Though the actual card doesn't show up. Should devcards work with Rum?

bhauman 2016-05-07T12:42:58.000057Z

I would check to make sure you have everything setup correctly

bhauman 2016-05-07T12:43:17.000058Z

Don't use rum to check.

bhauman 2016-05-07T12:43:54.000059Z

Return a react element

bhauman 2016-05-07T12:44:29.000060Z

Or just a cljs map

bhauman 2016-05-07T12:45:46.000061Z

The most common mistake is not requiring the namespace with the cards in it.

kauko 2016-05-07T12:49:36.000062Z

let's see

kauko 2016-05-07T12:55:56.000063Z

Hmm, seems to work using the example from the github repo

kauko 2016-05-07T12:56:07.000064Z

the one that uses sablono and says how awesome devcards is 😉

bhauman 2016-05-07T12:58:13.000065Z

You have to make sure that the rum expression is returning a react element.

kauko 2016-05-07T13:00:13.000068Z

(rum/defc input &lt; rum/reactive [ref]
          [:input {:type "text"
                   :value (rum/react ref)
                   :style {:width 100}
                   :on-change #(reset! ref (.. % -target -value))}])

   (defcard (controls)))
The documentation for defc says: "Defc does couple of things: 1. Wraps body into sablono/compile-html 2. Generates render function from that 3. Takes render function and mixins, builds React class from them 4. Using that class, generates constructor fn [params]->ReactElement 5. Defines top-level var with provided name and assigns ctor to it Usage: (defc name doc-string? [< mixins+]? [params*] render-body+)"

kauko 2016-05-07T13:00:22.000069Z

That look right to you?

kauko 2016-05-07T13:00:51.000070Z

Could .cljc be the problem?

kauko 2016-05-07T13:01:30.000071Z

(ns frontendfi.views.controls
    [rum.core :as rum])
     [devcards.core :as dc :refer [defcard deftest]])))
This is my ns declaration

kauko 2016-05-07T13:07:56.000073Z

Oh I forgot to name the card! Maybe that's the problem

kauko 2016-05-07T13:12:02.000074Z

Nope.. hmm

kauko 2016-05-07T13:17:21.000075Z

UGH damn I feel so stupid now 😄 😄

kauko 2016-05-07T13:17:39.000076Z

Of course it doesn't work, I'm not mounting anything on the client side

kauko 2016-05-07T13:18:37.000077Z

All this time I've just been staring at the server-side rendered components that don't actually do anything, without realising I specifically disabled mounting the rum components so that I see the server-side rendering is working

kauko 2016-05-07T13:18:55.000078Z

So, the first thing you mentioned WAS the problem

bhauman 2016-05-07T13:30:18.000079Z

glad you found it :simple_smile: there's ton of shit going on here

bhauman 2016-05-07T13:30:28.000080Z

no need to feel stupid

kauko 2016-05-07T16:19:06.000081Z

Hmm, if I require devcards in the components file, what can I do to not include in a production build?

kauko 2016-05-07T16:19:40.000082Z

I defined devcards as a development dependency in my project.clj, but lein uberjar fails now

kauko 2016-05-07T16:22:11.000083Z

I know I could define the cards in a separate file, and in a production build that file could be empty

kauko 2016-05-07T16:22:25.000084Z

but I feel like I'd prefer having the card definitions in the same file as the actual component

kauko 2016-05-07T20:04:30.000085Z

Hmm, I just noticed figwheel is not actually reloading the cards

kauko 2016-05-07T20:04:39.000086Z

for the normal app the reload works as expected