Clojurians Log v2
reagent
Hi folks,
I'm working on a web app to draw diagram (https://frozar.github.io/mikado-graph/). On the one hand of the project, I use reagent to create all svg components you can see on the screen, on the other hand I use d3js to animate the graph during addition or deletion of bubbles.
The context of my issue is that, during the graph animation through d3js, I don't want to use the mechanism provided by reagent to redraw the component. I mean, I don't want to update the global reagent/atom which contains the whole application state to redraw the page. During the graph animation, reagent rendering mechanism is too slow. So currently, I update the svg component by directly manipulating their DOM attribute through d3js. At the end of the animation, I update the global reagent/atom to do a final re-rendering of the page and to maintain coherency between the app state and the page layout.
My issue is that, the DOM nodes that were directly modified by d3js are not re-render at the end of the graph animation. Precisely, during graph animation, I delete some DOM node and replace them by some simple svg line. These deleted nodes are re-rendered by reagent when I update the application state. Currently the only way I found to force the re-rendering of the graph is to unmount and remount the root reagent component of my application:
(reagent.dom/unmount-component-at-node (.getElementById js/document "app"))
(reagent.dom/render [bubble/svg-canvas] (.getElementById js/document "app"))(reagent.dom/force-update-all) but it doesn't work in my case... It doesn't trigger the re-rendering of the previously deleted components)
any recommendations about about styling material ui components? I had started by following the examples in this sample project https://github.com/dakra/mui-templates but I find that some animations break. other hoc patterns that use material ui’s withStyles rely on r/reactify-component convert props to js objects which is not ideal
I'm using the new alpha with functional components and I'm struggling to figure out what are the functions I need to use for my case:
in react-native you render with (.registerComponent ^js react/app-registry "clash" root) where root is a react component so I use reactify-component here. What I don't understand is why I have to do this:
(defn root []
(r/reactify-component
(fn []
[inner-root])
functional-compiler))I want to use functional components by default because I use hooks a lot
The problem is that I use react-navigation and the screens need to be react components, so my root component needs to be reactified, it's a reagent component, then it uses navigators and screens from react-navigation that take react components as params
(defmacro defscreen
[name component]
`(def ~name
(reagent.core/reactify-component
(fn []
@app.navigation/cnt
[(fn []
~component)])
app.navigation/functional-compiler)))
(defmacro defroutes
[name navigator-creation-fn navigator]
(let [screen-class (gensym "screen-class")
navigator-class (gensym "navigator-class")]
`(def ~name
(let [[~navigator-class ~screen-class] (~navigator-creation-fn)]
(reagent.core/reactify-component
(fn []
(~navigator ~navigator-class ~screen-class))
app.navigation/functional-compiler)))))