Skip to content

Instantly share code, notes, and snippets.

Deraen / reagent-latency.cljs
Created November 10, 2022 18:45
Testing React vs Reagent update latency
View reagent-latency.cljs
(def start (atom nil))
(def log (atom []))
(defn latency-test []
(let [a (r/atom 0)]
(fn []
(let [[b update-b] (react/useState 0)]
(fn []
View TV lights.yml
alias: TV valot
description: ""
- platform: state
- unknown
seconds: 5
Deraen / shadow.clj
Created May 4, 2022 12:13
Shadow CLJS and Dart Sass
View shadow.clj
(:require [shadow.cljs.devtools.api :as shadow]
[clojure.edn :as edn]))
;; Run this with:
;; npx shadow-cljs clj-run
(set! *warn-on-reflection* true)
(defn watch
Deraen / test.js
Last active April 25, 2021 13:02
View test.js
var vm = require("vm");
var fs = require("fs");
function nodeGlobalRequire(file) {
var _module = global.module,
_exports = global.exports,
exportedRequire = false;
// to circumvent Node.js environment detection in bundled libraries
global.module = undefined;
Deraen /
Last active October 4, 2019 13:43
Ideas for linter checks

Merge with map literal

(merge a {:a 1 :b 2}) -> (assoc a :a 1 :b2)

(-> foo (merge {:foo :bar}) -> (-> foo (assoc :foo :bar))


  • Performance
  • Easier to read?
Deraen / react-konva-image.cljs
Last active May 29, 2019 07:34
React Konva example with Reagent
View react-konva-image.cljs
(ns example.react-konva-image
(:require [reagent.core :as r]
;; This presumes Shadow-cljs (or cljsjs packages with correct definitions)
[react-konva :refer [Stage Layer Image]]
[use-image :as use-image]))
(defn lion-image []
(let [[image] (use-image "")]
(r/as-element [:> Image {:image image}])))
;; or, without Reagent hiccup -> React elements step, directly creating React element:
View reitit_nested_routing.cljs
(defn router-component [match]
(let [[view-component & nested-view-components] (:views match)]
(if view-component
[view-component (assoc match :views nested-view-components)])))
(defn topics-view [match]
[:div "List of topics..."]
;; Nested router, renders nothing or topic-view if in :topic
Deraen /
Last active April 6, 2018 21:25
Notes about Reagent and problems with async rendering and controlled inputs

Reagent uses async rendering model. Reagent uses browsers requestAnimationFrame to schedule render calls:

Uncontrolled input

[:input {:default-value "foo" :on-change #(js/console.log (.. % -target -value))}]

Uncontroller input is an input which value is not updated by Reagent/React if the value set in the code changes. After initial render, the value is only changed by users interactions.

Deraen /
Last active July 10, 2017 22:04
WIP: Cljs foreign-lib requires brain dump


Currently libraries need to write some logic to load JS libraries from various places. For example Reagent supports:

  1. (Default) Cljsjs packages which export js/React, js/ReactDOM, js/ReactDOMServer and js/createReactClass
  2. Npm packages, with require when using Node target

Because the default is Cljsjs, Reagent namespaces depend on cljsjs namespaces like cljsjs.react. This means that to use Reagent with option 2. requires creating empty stub namespaces that provides these.

Deraen /
Last active July 5, 2017 19:12
cljs-oss CI setup
  1. One process for building Cljs and pushing resulting jar somewhere
  2. Process for each OS project for running tests against the jar
  3. One repo to save the build results

Builds can be triggered (in addition to commits to the repo), by Travis cron daily, or with HTTP endpoint called by other builds, in other projects:

clojure/clojurescript would trigger process (cljs-oss/clojurescript) to build the new jar file.