Fork me on GitHub
#devcards
<
2016-05-07
>
kauko12:05:14

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.

kauko12:05:23

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

kauko12:05:21

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

kauko12:05:38

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

bhauman12:05:25

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

bhauman12:05:56

So you configure two builds

bhauman12:05:08

And run them at the same time

kauko12:05:13

Hah, the man himself 😄 Ok simple_smile

kauko12:05:00

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

kauko12:05:47

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

kauko12:05:54

but it seems devcards doesn't need anything like that

kauko12:05:02

just curious, that's all simple_smile

bhauman12:05:05

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

bhauman12:05:29

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

kauko12:05:05

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

kauko12:05:33

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

kauko12:05:17

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

bhauman12:05:58

I would check to make sure you have everything setup correctly

bhauman12:05:17

Don't use rum to check.

bhauman12:05:54

Return a react element

bhauman12:05:29

Or just a cljs map

bhauman12:05:46

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

kauko12:05:36

let's see

kauko12:05:56

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

kauko12:05:07

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

bhauman12:05:13

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

kauko13:05:13

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

#?(:cljs
   (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+)"

kauko13:05:22

That look right to you?

kauko13:05:51

Could .cljc be the problem?

kauko13:05:30

(ns frontendfi.views.controls
  (:require
    [rum.core :as rum])
  #?(:cljs
     (:require-macros
     [devcards.core :as dc :refer [defcard deftest]])))
This is my ns declaration

kauko13:05:56

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

kauko13:05:02

Nope.. hmm

kauko13:05:21

UGH damn I feel so stupid now 😄 😄

kauko13:05:39

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

kauko13:05:37

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

kauko13:05:55

So, the first thing you mentioned WAS the problem

bhauman13:05:18

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

bhauman13:05:28

no need to feel stupid

kauko16:05:06

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

kauko16:05:40

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

kauko16:05:11

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

kauko16:05:25

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

kauko20:05:30

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

kauko20:05:39

for the normal app the reload works as expected