fulcro 2018-03-10 | Slack Archive

tony.kay02:03:58

If anyone cares to comment: I’m integrating fulcro-css into Fulcro. I am leaning towards a ns rename (to fulcro.client.css) in the process, since very little is used directly from it (just style-element and upsert-css). The defsc macro already has a dynamic use of it, and new code I’m adding really makes it better for them to be together. Basically, I’ve decided to add a slightly slower (optional) DOM API that auto-localizes keywords to the fulcro-css naming conventions:

(ns app
  (:require
    [fulcro.client.alpha.localized-dom :as dom])) ; NOTE the alt namespace

(defsc Component [this props]
  {:css [[:.a {:color :red}] ...]}
  (let [some-kw :.x]
    (div :.a {:classes [:$b some-kw] "Hello"))

Will emit the component-local CSS classname (e.g. <div class="b app_Component__a app_Component__x">Hello</div>). A . prefix means component-local, and $ means global (normal fulcro-css conventions). Of course, inserting the component’s generated style hasn’t changed (use style-element or upsert-css. Server-side rendering of these is already done as well. The reason for the dual DOM namespaces is that the main one will be somewhat faster at runtime. The component-local resolution mostly has to happen at runtime for this syntactic sugar to be composable. There’s always a little bit ofut mostly you take a hit only on the elements that use this feature. Naming of these things isn’t final. I’ve pushed a preview to clojars as 2.4.0-SNAPSHOT if anyone wants to play.

tony.kay02:03:23

A really cool aspect of the :classes notation is that if an entry is nil, it simply isn’t included, eliminating a bit of computational logic

tony.kay02:03:07

NOTE: this is only on the css localized DOM functions.

tony.kay02:03:48

@mitchelkuijpers Did you guys already have a wrapper for this kind of stuff? Be interested in feedback from your team.

mitchelkuijpers12:03:53

@tony.kay this seems great, we never built a wrapper because what we have now with defsc already works pretty great. I like the classes notation I used something similar in javascript once.

2018-03-10

Channels