Fork me on GitHub
#fulcro
<
2022-01-10
>
janezj11:01:45

I am unable to start workspaces from current fulcro template

git clone --depth 1 -o fulcro-template  fulcro-app
cd fulcro-app/
yarn install
npm run client/workspaces

Multiple files failed to compile.
------ ERROR -------------------------------------------------------------------
 File: jar:file:----/repository/com/github/awkay/workspaces/1.0.2/workspaces-1.0.2.jar!/nubank/workspaces/ui/highlight.cljs:11:3
--------------------------------------------------------------------------------
   8 |    (fn [this]
   9 |      (js/hljs.highlightBlock (dom/node this)))}
  10 | 
  11 |   (dom/pre {:className (or language "clojure")} source))
---------^----------------------------------------------------------------------
null
Wrong number of args (2) passed to: com.fulcrologic.fulcro-css.localized-dom/emit-tag
--------------------------------------------------------------------------------
  12 | 
  13 | (def highlight (fp/factory Highlight))
  14 | 
--------------------------------------------------------------------------------
------ ERROR -------------------------------------------------------------------
 File: jar:file:------repository/com/github/awkay/workspaces/1.0.2/workspaces-1.0.2.jar!/nubank/workspaces/ui/core.cljs:53:3
--------------------------------------------------------------------------------
  50 |    :line-height "1em"})
  51 | 
  52 | (defn more-icon [props]
  53 |   (dom/svg (merge {:width 20 :height 19 :viewBox "0 0 40 40"} props)

tony.kay18:01:49

You need to add highlight to packages.json I think

tony.kay18:01:39

though those errors seem a bit odd for that

tony.kay18:01:51

yeah, I get the same errors

tony.kay18:01:26

I updated the deps and recompiled and it worked. Not sure what was going on there. I’ll push the updated deps

👍 1
sheluchin18:01:46

Does Workspaces have trouble with interop/react-factory? I have a component like this:

(def responsive-container (interop/react-factory ResponsiveContainer))

(defsc LineChart [this {:keys [date-data y-label] :as props}]
  (tap> props)
  (rc/responsive-container {:width "95%" :height 300}
    (rc/line-chart {:data date-data
                    :height 300
                    :margin {:top 5
                             :right 30
                             :left 20
                             :bottom 5}}
...
It renders fine in my UI. When I try to create a card for it with something like this:
(ws/defcard line-chart-card
  (fulcro3/fulcro-card
    {::fulcro3/root charts/LineChart
     ::fulcro3/wrap-root? false
     ::fulcro3/root-state
     date-data}))
nothing gets rendered - just a blank card with no errors. Inspect and the tap show the correct data is being fed in, and other cards I have work well. If not trouble with interop, is there anything else that might be tripping it up?

wilkerlucio18:01:13

to use as a fulcro card you need a really stateful component, seems like LineChart doesn't have a query for example. to render pure view components (as I believe this is) you can use the react-card from workspaces

sheluchin20:01:00

@U066U8JQJ thanks but I'm not sure what I'm doing wrong with this:

(ws/defcard line-chart-card
  (ct.react/react-card
    (charts/ui-line-chart date-data)))
I don't need to update the state so I'm not using the form which takes an atom like:
(let [data-atom (atom date-data)]
    (ct.react/react-card
      data-atom
      (charts/ui-line-chart @data-atom))) 
But in any case, neither variation works.

Jakub Holý (HolyJak)22:01:49

What if you give {:query '[*], :initial-state {}} to the defsc?

wilkerlucio22:01:23

@UPWHQK562 in the react case you can't send an atom, just the plain data, but if something downstream uses Fulcro, it wont do any updates, the react trick only works components that are independent (no state tied to Fulcro)

sheluchin15:01:29

@U0522TWDA I think it needs to be something like {:query '[*], :initial-state (fn [_] {})} in that case, otherwise it complains: > When query is a method, initial state MUST be as well. and when I try that using this code snippet:

(ws/defcard line-chart-card
  (ct.react/react-card
    (charts/ui-line-chart date-data)))
I get this console error: > Error mounting card com.example.workspaces.ui-cards/line-chart-card Error: No protocol method IWatchable.-add-watch defined for type cljs.core/PersistentArrayMap: {:date-data [{ ... If I remove the query/initial-state definition, the error is the same.

Jakub Holý (HolyJak)15:01:21

Does creating a card with a normal Fulcro component (without the chart thingy) work for you? And then it breaks when you add the chart inside?

sheluchin16:01:24

@U0522TWDA you mean like this?

(defsc FooThing [this props]
  (div (:x props)))

(ws/defcard foo-chart-card
  (fulcro3/fulcro-card
    {::fulcro3/root charts/FooThing
     ::fulcro3/wrap-root? false
     ::fulcro3/root-state {:x "x"}}))
That does work. And yes, when I add the chart inside it does render as just an empty card. Worth noting that doing it like this does not work:
(ws/defcard other-foo-chart-card
  (ct.react/react-card
   (charts/ui-foo-thing {:x "x"})))
In such a case it complains about: > react_devtools_backend.js:4045 2022-01-11T16:28:16.385Z ERROR [com.fulcrologic.fulcro.components:769] - A Fulcro component was rendered outside of a parent context. This probably means you are using a library that has you pass rendering code to it as a lambda. Use with-parent-context to fix this.

Jakub Holý (HolyJak)17:01:35

Yes, the 2nd error is to be expected. What do you mean by ćas empty card"? Is the parent defsc rendering just fine? Is the child chart rendering fine but it just did not get any data? Or is there an actual exception somewhere?

sheluchin19:01:42

@U0522TWDA see the screenshot to see what I mean by empty - just an empty white card. If I prepend some more children into the parent div, like a single character, that does get rendered. The chart itself doesn't get rendered at all. There are no exceptions anywhere that I can see, and I am currently using those components in my UI which I can see when I browse it, just not in the Workspaces. I can see that the component is getting the data by looking at it in the inspector/tapping.

Jakub Holý (HolyJak)19:01:41

So you are telling me that the JS chart component is getting correct data from its parent but anyway does not render anything?! Does it show the expected props on the React (not Fulcro, since it is JS and not fulcrocomp) Dev Tools?

sheluchin20:01:38

Yes, I believe that is the case. Here's what I see when looking at it in Inspect:

{:fulcro.inspect.core/app-id
 com.example.workspaces.ui-cards/foo-chart-card,
 :date-data
 [ ... ],  ;; data is correct here
 :y-label "Items",
 :fulcro.inspect.core/app-uuid
 #uuid "1b33aa89-83b3-44ce-96ff-5c29e4a759cf"}
I'm not too familiar with the React Components inspector tool. At the top level it looks like this and if I drill down into the fulcro$value key I do eventually find my expected set of values nested deep in there:
{
  "fulcro$value": "(undefined) {{…}, {…}, {…}, {…}}",
  "fulcro$queryid": "com.example.ui.recharts.charts/FooThing",
  "fulcro$app": "(undefined) {{…}, {…}, {…}, {…}, {…}}",
  "fulcro$parent": null,
  "fulcro$depth": 0
}

sheluchin20:01:50

If I spy on the value returned by the component body I can see the data in there too:

#js {"$$typeof" #object[Symbol(react.element)], :type "div", :key nil, :ref nil, :props #js {:children #js {"$$typeof" #object[Symbol(react.element)], :type #object[CategoricalChartWrapper], :key nil, :ref nil, :props #js {:data #js [#js { ... 

sheluchin20:01:25

I would give up on this already but Workspaces seems like a nice tool that'll give a productivity boost once working, and my app/future apps include lots of charts. Would be nice to get it working, but I can work around it if I must :man-shrugging:

Jakub Holý (HolyJak)08:01:59

Don't you see the pure-JS component in the React's Components view? What you show above is clearly a Fulcro component but my understanding is that your problem is with its pure-js child.

Jakub Holý (HolyJak)08:01:22

|I have tried to replicate your problem and got into a weird state where my component also shows empty, even after I revert to the code where it showed something and reload the browser / use a different browser. Something weird and fishy there... It seems that even though the Fulcro Inspector shows the correct state for the target card/app, the defsc itself is not rendered - React Components only show the WorkspaceCard component with a few Button children but no other child. Also Fulcro Inspect's Pick Element is only to pick the WorkspaceCard. Can you try https://github.com/holyjak/fulcro/commit/ff907e1f1c927f5d7578e7882e598887b0419875 ? Do you get the same problem as I do?

sheluchin14:01:16

@U0522TWDA Yes, I do get that same result, but if I set ::ct.fulcro/wrap-root? false then everything renders fine. In my particular case, the component does not have/need an ident or query, so I think omitting the ability to "leverage generic mutations" - as having wrap-root true enabled does - is not necessary. I've fixed my card that this whole thread is about. I don't fully understand why this fixes it, but what it came down to it is the https://recharts.org/en-US/api/ResponsiveContainer from Recharts that I'm using. One of the requirements of that component is: > One of the props width and height should be a percentage string. and in my actual UI I use 100% width with a fixed height. However, for whatever reason, this doesn't work in Workspaces. As soon as I set the width to be fixed and used a percentage height, the rendering worked:

(defsc FooThing [this {data :data}]
  (rc/responsive-container {;; works!
                            :width 300 :height "100%"}
                            ;; broken, no rendering
                            ; :width "100%" :height 300}
    (rc/line-chart {:data data}
      (rc/x-axis {:dataKey :a})
      (rc/y-axis {:yAxisId "left"})
      (rc/line {:yAxisId "left"
                :dataKey :v}))))                   
(ws/defcard foo-chart-card
  (fulcro3/fulcro-card
   {::fulcro3/root charts/FooThing
    ::fulcro3/wrap-root? false
    ::fulcro3/root-state {:data [{:a "x" :v 1}
                                 {:a "y" :v 2}
                                 {:a "z" :v 3}]}}))
I guess this might be a problem with Recharts or my DOM, not really in the Fulcro scope.

👍 1
sheluchin14:01:39

Appreciate you looking at the problem very much, as always 🙏 Do you have any intuition about why this fix worked?

Jakub Holý (HolyJak)14:01:04

Would need to debug the component. Perhaps some CSS conflict?? Hats to know what the comp does work the w/h values.