This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-01-28
Channels
- # babashka (28)
- # beginners (252)
- # bristol-clojurians (2)
- # calva (28)
- # cider (11)
- # clj-kondo (15)
- # cljs-dev (7)
- # clojure (378)
- # clojure-europe (4)
- # clojure-italy (4)
- # clojure-nl (3)
- # clojure-norway (4)
- # clojure-uk (32)
- # clojurescript (128)
- # cursive (39)
- # data-science (18)
- # docker (37)
- # figwheel-main (10)
- # fulcro (45)
- # ghostwheel (7)
- # graalvm (2)
- # hugsql (1)
- # jobs (2)
- # joker (5)
- # kaocha (5)
- # luminus (12)
- # off-topic (37)
- # onyx (4)
- # pathom (22)
- # pedestal (70)
- # re-frame (7)
- # reagent (30)
- # ring (4)
- # shadow-cljs (12)
- # spacemacs (1)
- # sql (26)
- # tools-deps (7)
- # vrac (2)
- # vscode (7)
- # xtdb (27)
is there a better idiomatic way of adding svgs to clojure/reagent - i am trying to add some custom styles to a svg.
I ended up writing a macro that converts the SVG file into Hiccup. Another way would be to set dangerouslySetInnerHTML
.
I have a similar thing going (a svg of a music score generated by a js library). I would like to alter the svg - would you mind giving a hint, how yout macro svg-> hiccup works?
the library is very specific: https://www.verovio.org/index.xhtml
Well, I just mentioned it in the very first answer - it's possible to write a macro that does that for you during the compile time, assuming the SVG is available then.
which is basically what most macros do - slurping the svg and setting html “dangerously”
Also, if you really want to change just the styles, you don't need to manipulate anything. You just need to embed that SVG as an <svg>
tag and use some CSS.
@UT4B0A4FQ You did not read my initial message. I explicitly stated that I convert it into Hiccup. Why would that not be possible?
No need for a library when it takes just 10 lines:
(require '[hickory.core :refer [parse-fragment as-hiccup]]
'[ :as io])
(defmacro embed-svg [path attrs]
(assert (string? path))
(let [svg-vec (-> (io/resource path)
slurp
parse-fragment
first
as-hiccup)]
`(update ~svg-vec 1 merge ~attrs)))
@U082WFGJJ Kinda funny how Verovio builds a proper SVG document model and then just turns it into a string just to you have to parse it back to the document model (albeit, probably a different one). Do you use it for MusicXML, by any chance?
No, not from MusicXML. Verovio’s intended use case is just to generate SVG and/or embed it into normal html
some details here: https://www.verovio.org/overview.xhtml
CSS is the main mechanism, for example to color notes. But not to alter the notes - this needs some sort of roundtrip, hence my question
Hello! I've created this function to help me to use hooks in reagent:
(defn with-hooks [hooks-fn main-fn]
(let [wrapper-2 (fn [almost-reagent-props]
[main-fn ((:props almost-reagent-props))])
classical-c (fn [react-props]
(let [reagent-props ((aget react-props "props"))
hooks-props (hooks-fn reagent-props)]
(r/as-element
[wrapper-2
{:props
(constantly
(merge
reagent-props
hooks-props))}])))
wrapper (fn [reagent-props]
(let [pp {:props (constantly reagent-props)}]
[(r/adapt-react-class
classical-c) pp]))]
wrapper))
It's meant to be used like this:
(def my-component
(with-hooks
(fn [props]
{:ref_ (js/React.useRef)})
(fn [{:keys [ref_]}]
[:div {:ref ref_} ...])))
while I'm actually using it with ReactDnD (drag'n'drop). It now seems to me that it (the case with drag'n'drop) works slow, probably 'cause of I'm returning values wrapped into`constantly` . This is to not to make reagent's internal calls to clj->js
/`js->clj` not to destroy values which are passed around ('cause they go reagent -> react -> reagent). Could anyone suggest better way of "wrapping" values in reagent/react interop or, ultimately, using hooks in reagent?Here in this very example (`my-component`) if I'd pass props not wrapped as functions, but as-is then actual ref
object would be replaced by e.g. {:current nil}
, while what's actually important is the original ref object as I understand