Clojurians
#reagent
<
2017-02-22
>

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

sudodoki06:02:35

Hi! Can someone point out what I’m doing wrong? Trying to add drift to reagent-template and have issue with namespace of generated migration. To not clutter the chat with too much info, tried putting all things here - https://gist.github.com/sudodoki/98b422931a79301ed0f543df29306fb7

pesterhazy08:02:31

@sudodoki what is your source-path? can't you just add src/db_maintenance to the source paths?

sudodoki09:02:06

yep, I did exactly that, but when migration is generated its namespace is ns db-maintenance.migrations.20170220210653-create-something and when I ran lein migrate it won’t work, but will work if I remove the db-maintenance from the name. @pesterhazy

sudodoki09:02:22

ok, seems to have solved that by specifically specifying :source-paths [”src”] for profile I’m running lein migrate with :confused:

borkdude14:02:16

I’m trying to write some JSX to debug a problem I have with some React component, but I don’t get why this is invalid: https://www.dropbox.com/s/arhymeg5jl0echf/Screenshot%202017-02-22%2015.34.23.png?dl=0

borkdude14:02:34

I could place this in #off-topic but #reagent seems close enough

borkdude14:02:41

I’ve never written much JSX so far

borkdude14:02:03

It’s more confusing than hiccup, that’s for sure :slightly_smiling_face:

sudodoki14:02:51

Is it failing on parsing?

borkdude14:02:49

I added a return statement before CellMeasurer and checked the closing parents/brackets

borkdude14:02:30

I think the inline code is not accepted like this

borkdude14:02:12

Fixed it. JS doesn’t have code blocks with return statements of course

pesterhazy14:02:53

you also can't have normal comments in JSX I think :confused:

notkevinc19:02:54

Hey all, I’ve noticed that something is checking the validity of style attributes.

[:div {:style {:background-color “goomba”}}]  ;; style not rendered
[:div {:style {:background-color “red”}}] ;; style rendered
[:div {:style {:background-image image-url}}] ;; style not rendered
I’ve tried to search but was unsuccessful at finding at what point in the rendering this is stripped. Any pointers? I need to set the background image of a div.

isaac_cambron19:02:09

Is style as a map supported? That would be news to me

isaac_cambron19:02:31

[:div {:style "background-color: goomba"}]

notkevinc19:02:14

I’m using 0.6.0 and it seems to require a map. If I try to use a string I get this error.

Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by `bk3.views.teams_view`.
in react.inc.js

notkevinc19:02:24

And the map does work with background-color: red;

isaac_cambron19:02:49

huh. I also use 0.6.0 and I definitely use use strings as the :style value in my attributes

juhoteperi19:02:27

for image you'll want url("..."): {:background-image (str "url(\"" image-url "\")"}

notkevinc19:02:50

Sweet, thanks. Is that validation in reagent or react?

juhoteperi19:02:53

or well, you can skip " inside the url(...)

notkevinc19:02:06

That worked.

juhoteperi19:02:28

I think neither, I think it is the browser that ignores inline styles with invalid values

juhoteperi19:02:51

At least it is not Reagent, but I'm not sure about React

notkevinc19:02:29

Interesting. Well thanks for the help. I’ve been banging my head against this intermittently for days.

juhoteperi19:02:48

How did you check if the style is rendered? Style tool in Dev tools? Or did you inspect the element?

juhoteperi19:02:14

hmm, just checked and it should show styles with invalid values

juhoteperi19:02:02

It is possible that React sets the inline styles using some DOM API that checks the values, instead of just writing innerHTML and adding style="..." to the element

notkevinc19:02:06

Weird. I’m not seeing it on element.getAttribute(‘style’) or in the style property in Chrome.

notkevinc19:02:20

Well, my immediate problem is solved, and I really appreciate the help.

souenzzo19:02:30

check what's reagent output on "React dev tools"

notkevinc19:02:52

It is there.

notkevinc19:02:06

The react element has backgroundColor: “goober"

notkevinc19:02:31

So it’s certainly not reagent.

juhoteperi19:02:03

document.body.style.backgroundImage = "foo";

juhoteperi19:02:10

you can try this, and you can see that the body style is not updated

juhoteperi19:02:25

and HTMLEelement.style ignores invalid values (at least on Chrome)

notkevinc19:02:47

Wow, thanks for looking into that. I definitely learned something.