fulcro 2020-05-22 | Slack Archive

adamtait04:05:38

Hi all. I’m new to fulcro. Has anyone used fulcro on a React Native app without Expo? I’m having a hard time getting a root component from fulcro that I can give to React Native’s AppRegistry.registerComponent.

(ns core
  (:require [reagent.core :as r]
            [reagent.react-native :as rn]
            [com.sisterical.template.list-app.log :as log]
            [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
            [com.fulcrologic.fulcro.mutations :refer [defmutation]]
            [com.fulcrologic.fulcro.rendering.keyframe-render :as kr]
            [com.fulcrologic.fulcro.application :as app]))


(defmutation bump-number [ignored]
  (action [{:keys [state]}]
          (swap! state update :ui/number inc)))

(defsc Component [this {:ui/keys [number]}]
  {:query         [:ui/number]
   :initial-state {:ui/number 0}}
  [rn/view {:style {:flex 4}}
   [rn/text {} "This is an example."]
   [rn/touchable-highlight
    {}
    (str "You've clicked this button " number " times.")]])

(def ui-component (comp/factory Component))
(def ui-component-class (r/create-class {:render (ui-component)}))

(def fulcro-app
  (app/fulcro-app
    (merge
      {:optimized-render! kr/render!
       :render-root!      ui-component-class}
      {})))

(.registerComponent rn/AppRegistry "app" ui-component))

This code gives me a fulcro error: “Fulcro component was rendered outside of a parent context. Use with-parent-context” (https://github.com/fulcrologic/fulcro/blob/53fa8881a1875deb3785a99a351787c55181c1eb/src/main/com/fulcrologic/fulcro/components.cljc#L853) but I don’t have a parent context…

tony.kay15:05:37

Look at the native lib. Yes, it uses expo, but it also shows you how to set up root render…you cannot just pass a factory like that.

zilti10:05:03

What exactly does it do when I add the ::auth/authority to a defattr?

Jakub Holý (HolyJak)13:05:07

Perhaps nothing? Auth was quite work in progress....

tony.kay14:05:26

Not much 😜

tony.kay14:05:02

The idea is that attributes will come from some server, and there might be different authorities you have to sign on with to get access (e.g. GitHub + Facebook + Google because you use APIs to integrate things from all three, like an app that lets you do social networking about your open-source project from GitHub while you save an image to google photos while posting it to Facebook???). The ultimate idea is that data is federated, and a single bag of attributes may not live under one single authority. But I have no implementation to speak of for it.

zilti15:05:27

Ah I see! Thanks 🙂

zilti10:05:47

It seems like the most recent fulcro-rad-demo is not using it anymore

Eric Ihli18:05:14

What would cause fulcro inspect to get stuck trying to load index? When I refresh the page, I see some initial data in the DB tab. As soon as I click on the query or index explorer tab, it shows a "loading..." message indefinitely.

dvingo19:05:50

There may be errors in the inspector, you can open the devtools for the inspector to see the log messages

dvingo19:05:11

Other than that I've seen :parallel true loads never get resolved in the inspector

dvingo19:05:20

they always show pending... but i'm not sure that's related

Eric Ihli19:05:06

I'll check the logs. I just created a gif of the behavior.

Eric Ihli19:05:51

Don't see any errors in the dev tools of the plugin.

dvingo19:05:52

very strange- if you have logs on your server those eql calls should be coming in

dvingo19:05:02

to ask for the indexes

jacklombard19:05:27

Hey, thanks for such an amazing paradigm for doing UI dev. I am starting out with some basic applications. Just a trivial question and something that might have already been answered before, why are event handlers named onClick instead of on-click , also things like shouldComponentUpdate? It has been bugging me to see camel case mixed with kebab case in my code.

dvingo19:05:12

fulcro passes those props to react which expects them in camel case. I highly recommend using https://github.com/r0man/sablono if you like kebab

dvingo19:05:46

it also cuts down on visual noise in larger components (dom/div :.ui.classname -> [:.ui.classname

jacklombard19:05:20

Thanks, yes I understand it has to pass them to react. Would have been nice if fulcro camel cased them and then passed it to react. WIll checkout sablono thank you!

2020-05-22

Channels