Fork me on GitHub
#fulcro
<
2018-08-17
>
sihingkk08:08:07

hey guys, has anyone experience with using fulcro with ions? or this is silly idea and I should just use datomic cloud and deploy fulcro app on aws in regular way??

tony.kay15:08:59

I have not tried it @sihingkk, but I’d love to hear your experience if you try it.

tony.kay15:08:26

Looks like a lot of manual configuration (my reading of the docs indicates you have to make an API service gateway for each API call…but perhaps there’s a way to do more than one at a time?)

tony.kay15:08:27

But then again…we only really need one endpoint: /api, so perhaps it would work quite well 🙂

sihingkk15:08:20

I will try use it soon 🙂

cjmurphy16:08:00

For Fulcro Template the code comments say you can get rid of SSR by putting in a "resources/public/index.html" and commenting out the call to wrap-server-side-rendering. But I've found it then doesn't work. For example if I manually type in "preferences.html", even after having visited that page, then the browser comes up with "Resource not found.". So then it seems you would have to put "preferences.html" in at "resources/public" as well. And if you have to do that, well the only way to get "preferences.html" is to SSR it.

cjmurphy16:08:22

So the SSR and the browser routing stuff really go together.

currentoor17:08:47

@cjmurphy not sure what exactly you want to do, are you trying to serve a different app at /preferences.html

currentoor17:08:14

or same app but show a different part (i.e. UI routing)?

currentoor17:08:05

@sihingkk i wanted to use ions in my current project, would have been easier to setup and deploy, but i needed TxReportQueue, which is currently only available in the peer lib

👍 4
tony.kay17:08:43

@cjmurphy You’re conflating two things. SSR is the process of rendering the page you want to see before the js loads. HTML5 routing has to do with letting the URI affect what the js renders. For HTML5 routing, you will need to add something to your ring stack that serves index.html for all valid routes

cjmurphy17:08:20

@currentoor Was running the fulcro template and went along with the comment "Ring middleware to handle all sends of the SPA page(s) via server-side rendering. If you want to see the client without SSR, just remove this component from the ring stack and supply an index.html in resources/public." I was just observing that you lose 'browser routing' (user decides to directly enter say preferences.html into browser url textbox) when you act on the comment. Perhaps it would be better if nothing changed in the browser url textbox as the app is being used. Then it wouldn't give the user the chance.

cjmurphy17:08:50

Yes that extra bit - add something to your ring stack that serves index.html for all valid routes - would stop the problems I see.

felipethome17:08:14

Hi! It seems that Fulcro generates CSS with the style of child components having more priority than their parents, in other words, the CSS classes of the children come after the CSS classes of the parents in the HTML. If that is the case you can’t change the style of a child component from its parent (if you are changing a style that is already defined in the child). Is this the correct behavior? Applying reverse here would change this behavior: https://github.com/fulcrologic/fulcro/blob/5d0078c9d87d34fbbe90fd9d90e1d14843e0e233/src/main/fulcro_css/css.cljc#L182

currentoor17:08:43

@f.o.thome i believe fulcro css is meant to contained within a component, if a parent needs to modify the styles of a child, shouldn’t it pass a (computed) prop down to the child and the child can use that to determine which styles to apply?

currentoor17:08:07

similar to the shadow dom with web components

currentoor17:08:31

localized CSS

felipethome17:08:07

Hi @currentoor! yes, it should. But if I understand you, that is the problem. If the css class you pass from the parent to the child comes before the css class in the child in the HTML you will not be able to change the child styles

currentoor17:08:57

hello simple_smile, do you mind sharing an example?

currentoor17:08:07

this is what i was thinking

currentoor17:08:10

(defsc Child [this {:keys [msg]} {:keys [style-opt]} {:keys [style1 style2]}]
  {:css [[:.style1 {:background-color "red"}]
         [:.style2 {:background-color "green"}]]}
  (dom/div {:className (case style-opt
                         1 style1
                         2 style2)}
    (dom/span msg)))

(def ui-child (prim/factory Child))

(defsc Parent [this {:keys [child style-opt]}]
  {:css-include [Child]
   :query       [:style-opt {:child (prim/get-query Child)}]}
  (ui-child (prim/computed child {:style-opt style-opt})))

currentoor17:08:17

the parent can adjust the styling of the child, but the definitions of the different options are still defined where they should be (inside the child)

wilkerlucio17:08:29

@currentoor but that assumes the child will have all the css options, the point here is been able to extend with custom css coming from the parent

wilkerlucio17:08:54

check this:

(fp/defsc Button [this props]
  {:css         [[:.button {:color "#f00"}]]
   :css-include []}
  (dom/button :.button props "x"))

(def button (fp/factory Button))

(fp/defsc Block [this _]
  {:css         [[:.custom-color {:color "#00f"}]]
   :css-include [Button]}
  (dom/div
    (button {:classes [:.custom-color]})))

(def block (fp/factory Block))

currentoor18:08:22

i guess i just haven’t run into that situation, that assumption always made sense for in the context of my single app

currentoor18:08:40

but i can image how if you were building a UI kit then you’d want something more configurable

currentoor18:08:44

so i stand corrected simple_smile

currentoor18:08:55

thanks for the clarification @wilkerlucio

wilkerlucio18:08:27

no problem 😉

currentoor18:08:07

hey @wilkerlucio just wanted to make sure, the Block component in your example, that wouldn’t work right?

currentoor18:08:55

like :classes takes in literal classes, it doesn’t resolve them to the generated fulcro CSS classes defined in :css right?

wilkerlucio18:08:30

@currentoor correct, my example doens't work, to make it work the call to button must be (button {:classes [(:custom-color css)]}) instead

wilkerlucio18:08:55

but still have the css issue 😉

currentoor18:08:56

but i kind of wish it did work 😅

currentoor18:08:08

that would be a nice syntax

wilkerlucio18:08:24

but complicated as hell to implement, hehe

currentoor18:08:39

yeah i remember that discussion, we considered dynamic scope and what not

Pontus19:08:21

When updating from fulcrologic/fulcro "2.6.0-RC2" to fulcrologic/fulcro "2.6.0-RC7" I get this compile error: Use of undeclared Var fulcro.client.dom/fragment Was this removed?

wilkerlucio19:08:17

@pontus.colliander it was moved to fulcro.client.primitives, since fragment is not specific DOM thing

Pontus19:08:24

aha okay, so how do I use it now? Used to write (dom/fragment)

wilkerlucio19:08:02

same way, just change the namespace

wilkerlucio19:08:29

(prim/fragment) if you follow the book, I like (fp/fragment), its just an alias, pick your name 🙂

Pontus19:08:50

okay, thanks 🙂

Pontus19:08:51

The book is still saying dom/fragment from what I can see though: http://book.fulcrologic.com/#_react_16_fragments_and_returning_multiple_children, just so you know

tony.kay22:08:21

Fulcro 2.6.0-SNAPSHOT is on clojars. I’ve added new CSS injection support that actually addresses @f.o.thome CSS ordering, and updated the book (http://book.fulcrologic.com/#CSSInjection). The new CSS injection also does auto-include based on the component queries…so as long as your CSS is in components with queries, you can avoid manually doing the inclusions!

tony.kay22:08:39

@pontus.colliander Book fixed. Thanks for letting us know

👍 4