devcards

Devcards aims to provide a visual REPL experience for ClojureScript https://github.com/bhauman/devcards
sventechie 2015-12-21T15:48:18.000134Z

I’ve been trying to make a devcard for an Om component, but it requires a target element. I’ve tried to use the dom-node macro. Anybody know how to pass it to Om? Here’s my code: (defcard-om campaign-countdown (om/root timer/countdown-timer timer-state {:target (dom-node)}))

danieljomphe 2015-12-21T19:35:30.000138Z

@sventechie: Hi Sven, see this:

(defcard
    (om/mock-root reconciler YourDataScriptBackedComponent))

danieljomphe 2015-12-21T19:38:34.000139Z

Another example, less powerful:

(def input-nam-letters (om/factory InputNamLetters))

(defcard
  (fn [init-data _]
    (input-nam-letters @init-data))
  {:nam-letters "Blah"}
  {:inspect-data true
   :history true})

sventechie 2015-12-21T19:39:16.000140Z

Hmm, I still get the error: "Card has not mounted DOM node."

danieljomphe 2015-12-21T19:39:16.000141Z

In both cases I didn't need to pass the target node (but I may have misundestood your need on that level)

danieljomphe 2015-12-21T19:39:32.000142Z

What version of devcards?

danieljomphe 2015-12-21T19:39:47.000143Z

Mine: 0.2.1-2

sventechie 2015-12-21T19:40:32.000144Z

OK, looks like maybe you’re using om.next?

danieljomphe 2015-12-21T19:41:42.000145Z

oh, yes, sorry! And I never used Om.current

sventechie 2015-12-21T19:41:47.000146Z

I’m trying to integrate this example countdown timer: http://madhuvishy.in/posts/2014/04/devlog-week-9-getting-started-with-om.html

sventechie 2015-12-21T19:42:09.000148Z

I’d be happy to port it to om.next but not sure how involved that’d be.

danieljomphe 2015-12-21T19:47:23.000151Z

ok, then try

(defcard-om campaign-countdown
            (fn [init-data node]
              (om/root timer/countdown-timer timer-state
                       {:target node})))

sventechie 2015-12-21T19:56:05.000155Z

Yeah, I looked at Bruce’s examples but he never uses the macros I think I’d need.

sventechie 2015-12-21T19:56:51.000156Z

I’m still getting "Card has not mounted DOM node.” with your example.

sventechie 2015-12-21T19:57:22.000157Z

Where did you get the argument list?

danieljomphe 2015-12-21T19:59:17.000158Z

Found it back from the github repo's README: http://rigsomelight.com/devcards/#!/devdemos.defcard_api

danieljomphe 2015-12-21T20:02:32.000160Z

Also check the bottom of the page.

sventechie 2015-12-21T20:05:50.000161Z

Hmm, thanks, Google searches did not turn up those documents.

sventechie 2015-12-21T20:07:34.000162Z

node appears to be a React element, rather than a DOM element. I wonder if that’s a problem.

danieljomphe 2015-12-21T20:08:28.000163Z

ok so the bottom of that page will tell you how to reach a DOM element.

danieljomphe 2015-12-21T20:08:47.000164Z

Note: I haven't looked at if you really need the low-level of a DOM element for that counter.

sventechie 2015-12-21T20:13:51.000165Z

Thanks! I’m asking the more general question in the #om channel now.

danieljomphe 2015-12-21T20:16:51.000166Z

No problem!