This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-06-27
Channels
- # announcements (5)
- # beginners (267)
- # boot (1)
- # calva (37)
- # cider (11)
- # clara (10)
- # clj-kondo (24)
- # cljsrn (13)
- # clojars (1)
- # clojure (119)
- # clojure-europe (5)
- # clojure-italy (19)
- # clojure-nl (11)
- # clojure-spec (18)
- # clojure-uk (99)
- # clojurescript (44)
- # clojurex (57)
- # community-development (6)
- # cursive (13)
- # datomic (92)
- # duct (12)
- # fulcro (1)
- # graalvm (4)
- # jobs (1)
- # kaocha (6)
- # luminus (3)
- # lumo (9)
- # off-topic (20)
- # pathom (6)
- # re-frame (21)
- # reagent (2)
- # reitit (9)
- # remote-jobs (4)
- # shadow-cljs (32)
- # spacemacs (3)
I have a reagent application. I want to use hiccup to generate some html, which is then displayed to the user. As such, I want to use hiccup's html call to get the html from the hiccup forms. To do this, I added [hiccup "1.0.5"] to my project dependencies in project.clj and [hiccup.core :refer [html]] to the require clause of my ns definition as so: (ns http://cql-viewer.app (:require-macros [cljs.core.async.macros :refer [go]]) (:require [reagent.core :as r] [cljs.core.async :refer [<!]] [cljs-http.client :as http] [hiccup.core :refer [html]] )) But when I try to evaluate the ns form, I get an error: "clojure.lang.ExceptionInfo: No such namespace: hiccup.core, could not locate hiccup/core.cljs, hiccup/core.cljc, or Javscript source providing "hiccup.core" in the file <directory name>." I'm wondering why the module hiccup.core is not being found in the project where I've included hiccup in my project dependencies. And, for those who are curious, here's the :dependencies clause from my project.clj file: :dependencies [[org.clojure/clojure "1.9.0"] [binaryage/devtools "0.9.4"] [org.clojure/clojurescript "1.10.238" :scope "provided"] [reagent "0.7.0"] [cljs-http "0.1.46"] [hiccup "1.0.5"] ]
Crud. I hadn't thought about that. Is there any way to do what I want to in Clojurescript? Turn hiccup into html outside reagent?
Can’t you just r/render? Seems exactly what reagent does. Takes hiccup to html right?
I ended up grabbing the rendered HTML into a string by getting the value of the node's innerHTML attribute post-render. It seems to work.
@haiyuan.vinurs Corrrect. CLJS does not have :use
or :refer :all
Oh, right. With CLJ, I only use the "unlimited" version of :use
as a more explicit synonym for :refer :all
I've got the following Clojurescript/reagent code: (defn generate-id [] (str (gensym))) (defn atom-backed-textfield [id value] [:input {:id id :value @value :type "text" :on-change #(reset! value (-> % .-target .-value))}]) (defn codeable-concept [obj] [:div (atom-backed-textfield (generate-id) (:code obj)) (atom-backed-textfield (generate-id) (:family obj)) (atom-backed-textfield (generate-id) (:display obj))])
And in my render method, I'm calling codeable-concept like this: (codeable-concept {:code (r/atom "123") :family (r/atom "CPT") :display (r/atom "A value set")})
The three widgets appear on the screen with their correct values, but when I type in any of the text boxes, the values of the atoms don't change. I've put log statements in the :on-change function, so I know that 's being called and passed the proper value for the atom to be set to. It just appears as if value's value is not being captured properly because the reset! seems to have no effect on my atoms. Any ideas?
Have a weird advanced compilation issue:
I get TypeError: L is not a function
- which makes sense, because window.L
is https://leafletjs.com
How do I make Google Closure not use L as a minified variable?
@danie The general technique is to either explicitly provide externs or have externs be inferred
Some good starting points https://clojurescript.org/reference/advanced-compilation#providing-externs https://clojurescript.org/guides/externs
@mfikes I am inferring externs, and Vega, React and Amplify is all working well and happily. It’s just this Leaflet magic L that clashes. Some minified function calls it, and gets upset:
@fadrian Reagent uses a special implementation of atoms to know when to re-render. Are you using Reagent atoms or ClojureScript atoms?
Yes, ultimately, as characters are typed in the text box, the atom that is passed in is supposed to be updated to what's typed. I'm thinking that this is something else. When reagent re-renders, I assume that the render functions are called again, correct?
If that's so, then each time I re-render, I'm creating three new atoms (in codeable-concept) with their original values and re-rendering the three widgets with those values, making it look as if nothing I type is captured.
Well, I am new to Clojurescript - I'm not yet certain as to where to place all the moving parts. I guess I'll figure it out by the time I'm done with this.
I’ve pretty much stuck with the “one global atom” approach and never bothered to learn about the case you present above
@fadrian reagent allows you to return a closure, instead of hiccup data, in order to maintain local atom state across re-renders
ex:
(defn my-component []
(let [state (r/atom "I will persist state across re-renders")]
(fn []
[:input {:on-change #(reset! state (.. % -target -value)) :value @state}])))
on initial render, the whole my-component
function will be run and then the returned anonymous function as well, to get the initial DOM. for subsequent re-renders, it will just re-run the anonymous function
Oh yes, I remember reading about those now. There are also form-1 (the normal, return hiccup form), and form-3 (which no one usually ever uses).