Fork me on GitHub
Jacob Rosenzweig04:05:18

Anyone with styled experience might know why this doesn't want to work?

(defstyled delete-button 
    :color "white"
    :margin-left "1rem"
    :background-color "blue"
    :border-radius "4px"
    :border-style "none"

[delete-button {:on-click (fn [] (println "hello"))} "Delete Me"]

;; Unknown event handler property `on-click`. It will be ignored.


try :onClick?

Jacob Rosenzweig05:05:39

Lol, why did this work?


React JSX uses camelcased keys for props and css rules. Cljs_emotion is a react wrapper, so they must not have done the conversion to kebabs. I have to use keys like that a lot when importing react components.

Jacob Rosenzweig05:05:58

On another note, I'm trying to use specs to help enforce, at runtime, the prop types of my components. E.g.

(defn component [{:keys [title on-delete]}]
      [:span title]
      [styled/delete-button {:onClick on-delete} "Delete Me"]]])

(s/fdef component
  :args (:props int?))
But someone told me that s/fdef is a developer time tool. Should I just use the :pre and :post assertions to get this enforced at runtime as well?

Endre Bakken Stovner06:05:47

I still get a warning in my .cljs:

35 |         color-map (for [[i node] ^js (.. dag idescendants entries)]
 Cannot infer target type in expression (. dag idescendants)
Is there any way to fix this? Should I care?


wrong place for the hint. should be (.. ^js dag ...)

👍 3

or better yet hint whereever dag is coming from, so (let [^js dag ...] ...) or (fn [^js dag] ...)

Endre Bakken Stovner10:05:31

I've had problems with loading stuff in the correct order (wait for DOM element to render, then append a graph to the DOM element). I am able to see the SVG info shown below in my page source. However, nothing renders on screen. Might nothing showing still be due to me loading in the wrong order? Or, considering that the SVG info is in the page source is the problem likely to lie somewhere else?

Endre Bakken Stovner11:05:49

One thing is different from the JS version source: in the JS version the SVG has a height and a width.. I also try to set a height and width in my code, but that obvs has changed nothing.


Too little info to give a useful answer. You should go through the nodes in the inspector and understand why the SVG is not visible. Then try to understand where the difference comes from.

Endre Bakken Stovner11:05:47

I found it. I had misunderstood a JS API (it seemed to mutate an object in place, but it actually returned a slightly modified version). Thanks for looki_ng._


looks like you have a [:svg [:width [:height ...]]] which would be invalid

Endre Bakken Stovner11:05:44

That too 😳 I used (.append "width" width), not (.attr "width" width)


might be that it doesn't show anything because of those invalid elements. not exactly sure how svg handles that


I quite understand how to get a minimal example working via shadow-cljs