The fulcro-garden-css from fulcrologic

fulcro-garden-css's People

Contributors

Stargazers

Watchers

fulcro-garden-css's Issues

[Performance] Large component trees should not walk down duplicate branches for css includes

We have a large component tree, 7425 nodes are found by css-injection/find-css-nodes of which 218 are unique.

The code currently walks down the complete ast-tree and then uses distinct to get to the 218 unique nodes that have css.

Recursion can be aborted early when a path has been traced before.

Adding a cache results in this performance increase for us:

Without aborting recursion early:

 (time (do (css-injection/find-css-nodes-old {:component Root})
           nil))
 {:nodes 7425, :unique 218}
 "Elapsed time: 157.835000 msecs"
 => nil
 (time (do (css-injection/find-css-nodes-old {:component Root})
           nil))
 {:nodes 7425, :unique 218}
 "Elapsed time: 155.275000 msecs"
 => nil
 (time (do (css-injection/find-css-nodes-old {:component Root})
           nil))
 {:nodes 7425, :unique 218}
 "Elapsed time: 159.910000 msecs"
 => nil

With aborting recursion early:

 (time (do (css-injection/find-css-nodes {:component Root})
           nil))
 {:nodes 235, :unique 218}
 "Elapsed time: 60.525000 msecs"
 => nil
 (time (do (css-injection/find-css-nodes {:component Root})
           nil))
 {:nodes 235, :unique 218}
 "Elapsed time: 69.570000 msecs"
 => nil
 (time (do (css-injection/find-css-nodes {:component Root})
           nil))
 {:nodes 235, :unique 218}
 "Elapsed time: 65.270000 msecs"
 => nil

Does not create styles unless Root component has a query

The snippet below will create an empty style tag.

(defsc Root [this props]
  {:css [[:body {:margin 0}]]}
  (dom/div
    (inj/style-element {:component Root})
    (dom/div "TODO")))

Relatedly, even if a query exists, changes to the root css will not take effect on hot reload. Only child components referenced via query will have updated styles on hot reload.