Deraen

(ns common.util
  (:require [clojure.string :as str]
            [uix.compiler.attributes :as attr]
            [uix.compiler.js :as js]))

;; Could also just emit Object.assign, a bit simpler and doesn't need js*.
;; Spread operator might be a bit faster in some cases, but depends on
;; the browser and many variables probably.
;; https://clojurians.slack.com/archives/CNMR41NKB/p1701179422380989
;; We might not want to keep this optimized version in the repo and

Deraen

(ns dev.linters
  (:require [cljs.analyzer :as ana]
            [clojure.string :as str]
            [uix.linter :as linter])
  (:import (cljs.tagged_literals
            JSValue)))

(defn mui-component? [tag]
  ;; TODO: Could check better if it looks like a MUI component
  (symbol? tag))

Deraen

(def start (atom nil))

(def log (atom []))

(defn latency-test []
  (let [a (r/atom 0)]
    (fn []
      (let [[b update-b] (react/useState 0)]
        (react/useEffect
          (fn []

Deraen

alias: TV valot
description: ""
trigger:
  - platform: state
    entity_id:
      - media_player.tv
    not_to:
      - unknown
    for:
      seconds: 5

Deraen

(ns app.dev.shadow
  (:require [shadow.cljs.devtools.api :as shadow]
            [clojure.edn :as edn]))

;; Run this with:
;; npx shadow-cljs clj-run app.dev.shadow/watch

(set! *warn-on-reflection* true)

(defn watch

Deraen

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

Merge with map literal

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

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

Reasoning:

• Performance
• Easier to read?

Deraen

(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 "https://konvajs.org/assets/lion.png")]
    (r/as-element [:> Image {:image image}])))
;; or, without Reagent hiccup -> React elements step, directly creating React element:

Deraen

(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
   [:div "List of topics..."]
   ;; Nested router, renders nothing or topic-view if in :topic

Deraen

Reagent uses async rendering model. Reagent uses browsers requestAnimationFrame to schedule render calls: https://reagent-project.github.io/news/reagent-is-async.html

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.