Clojurians Log v2

I have a flatlist component from react native like so:

[:> FlatList {:refreshControl (r/as-element [:> RefreshControl {:refreshing @(subscribe [:refreshing])
                                                                   :onRefresh #(dispatch [:load-videos])
                                                                   }])
                 :data @(subscribe [:videos])
                 :renderItem (fn [item] (r/as-element [video-comp (get (js->clj item) "item")]))
                 :keyExtractor (fn [item] (-> (get (js->clj item) "item")
                                              (get "uri")))}]

:refreshing @(subscribe [:refreshing])

No protocol method IDeref.-deref defined for type undefined:

there was a typo in the subscription. Problem solved!

Hey guys!

Hi. How could I dynamically load content using Reagent with clojurescript? I wanted to just do:

(:require [cljs-http.client :as http]
          [reagent.core :as reagent]
          [cljs.core.async :refer [<! go]])
...
[:div
     (go (&lt;! (http/get "<https://raw.githubusercontent.com/borkdude/sci/master/README.md>"
                       {:with-credentials? false})))]

But it given me an error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {takes, dirty_takes, puts, dirty_puts, buf, closed, add_BANG_}). If you meant to render a collection of children, use an array instead

there's a few problems here... I'd suggest looking at an example of loading async into a reagent app... first hit on google https://github.com/Gonzih/cljs-http-reagent-learning-template

Thnx. That really helped

Hey guys! Not strictly a CLJS questions, but how would you do deep linking with a reagent+reitit SPA? My first thought was to use :modules to code split, but on second thought it seems over kill?

Well. Not really. Still having a problem. For some reason it renders on "compiling" only.

Not sure what you mean. reitit should be able to resolve the URL path fine. You just need to make sure the server serving your SPA returns the SPA's index.html for any path.

In my SPA I use reitit.frontend.easy/start! when I first load. You give start! a function that Reitit will call with the matching route on initial load and any time the URL changes. In my case, the function stores the matching route and my “app” component renders the appropriate page based on the route.

Oh, one more thing: in my app, I don’t have specific server-side routes for each page. Those routes all return the same root page, which performs the initialization above.

thanks that's sounds like a good setup

So I just had an idea for a clojurescript project. I want to make a library around https://github.com/Jarzka/stylefy and/or https://github.com/noprompt/garden to wrap around https://github.com/tailwindlabs/tailwindcss. I absolutely love tailwind, but npm isn’t so nice to work with in the clojurescript ecosystem. What do you guys think? Could this be done in an easier way? I was thinking of batch converting the tailwind css file you get via its CDN into garden syntax, then calling each tailwind class using stylefy.

i only know a little bit but i think tailwind is enormous and relies on a tool to prune down only to the actually used classes? would your library be able to replicate this?

For what it's worth, we use tailwind and don't really have any problems. Only needed to change some of the conventions to make it worth with clojure (e.g., w-1/3 -> w-1_3), and fix the pruning logic so that it works with how reagent specifies css classes. (It's like a 50-100 line npm script to expand the whitelist before pruning)

@isak Is there any documentation on this? I’m perfectly happy doing:`[:div {:class '[tw classes]}]` I think however we could do better.

@c.westrom Hmm we're not doing anything special, just specifying CSS classes as one normally would. I don't really see the problem personally. But yea with a native clojure solution, I guess you could avoid the bloated CSS that needs to be pruned, so it would probably be a bit simpler.

When you use something like garden, then you are likely building your own compositional semantics / relations between your style rules. What tailwind does is get around the limitations of CSS in another way, by giving you the ability to generate classes based on your design system (with a JSON config). So in a sense they are solving the same problem (vanilla CSS sucks for expressing complex designs) but in a different way.

We also use tailwind and frankly embrace the purgecss part in node and have no problems on the clojurescript side. It’s just so delightfully dumb, scanning for strings in the advanced-build cljs bundle. Here’s the very minimal lib I made up: https://github.com/rgm/tailwind-hiccup

FWIW, a variant of tw is already implemented in Reagent itself.

we have some problems on the clj side if we use server-rendered hiccup… I haven’t figured out quite how to deal with these yet. My first rough thing has been to hijack the dev clj version of the (tw ,,,) calls to just spit out these strings into a temp text file for purgecss to look at.

reagent.core/class-names.

oh, that’s good to know.

I’ve been use the fn server-side too, though, and not necessarily with reagent.

That's a good point.

(also needed a (twp ,,,) to make working with prefixes easier … it’s a tailwind thing that’s sometimes needed to avoid conflicting with existing CSS).

(also re: the original poster: the trick we’ve used to make life a little easier re NPM is to have separate the cljs build from the tailwind build. Don’t mix the streams. The clojurescript builds first, then the tailwind purge happens second).

Here’s my best attempt so far. I forked a clojurescript template using shadow-cljs and tailwind. I’m just having trouble making it my own. Also I haven’t figured out dark mode yet. I got the root HTML tag to update, but I’m trying to rewrite https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually, so I can detect OS preferences and manual preferences. https://github.com/wildwestrom/shadow-static

Compiling /home/clyfe/dev/riviera/src/riviera/core.cljs to out/riviera/core.js
Unexpected error (ExceptionInfo) compiling at (REPL:1).
No such namespace: monaco-editor, could not locate monaco_editor.cljs, monaco_editor.cljc, or JavaScript source providing "monaco-editor" (Please check that namespaces with dashes use underscores in the ClojureScript file name) in file /home/clyfe/dev/riviera/src/riviera/core.cljs

(ns riviera.core
  (:require
   [goog.dom :as dom]
   ["monaco-editor" :as monaco]))

I don’t have any opinions about the clojurescript side, but I’ve tried to put together a decent simple version of the tailwind with purge side in this example: https://github.com/rgm/tailwind-hiccup/tree/master/examples/basic

but for a cljs stack, you might take a look at https://github.com/rgm/experiments/tree/master/template-reframe-reitit. I keep it around to have something I can quickly copy and start sketching in.

figwheel builds, re-frame/reagent and reitit for front-end routing.

I might switch it over to shadow-cljs sometime, and would probably recommend that if you’re starting fresh. There’s just no comparison on how much easier it makes using npm packages. I think the new webpack/bundle target stuff in base cljs will be interesting. But I haven’t really taken the time to grok it.

Just checking: Did you npm/yarn install?