This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-01-24
Channels
- # aleph (1)
- # announcements (22)
- # atom-editor (11)
- # babashka (46)
- # beginners (60)
- # calva (44)
- # cider (18)
- # circleci (1)
- # cljdoc (12)
- # cljs-dev (5)
- # cljsrn (19)
- # clojars (3)
- # clojure (162)
- # clojure-dev (9)
- # clojure-europe (6)
- # clojure-italy (2)
- # clojure-losangeles (2)
- # clojure-nl (5)
- # clojure-spec (7)
- # clojure-uk (23)
- # clojureremote (1)
- # clojurescript (55)
- # community-development (14)
- # core-async (234)
- # cursive (14)
- # data-science (3)
- # datomic (32)
- # fulcro (5)
- # graalvm (20)
- # graphql (2)
- # hugsql (4)
- # jobs (11)
- # jobs-discuss (2)
- # joker (1)
- # juxt (3)
- # kaocha (1)
- # luminus (1)
- # off-topic (33)
- # pathom (3)
- # pedestal (1)
- # reagent (24)
- # remote-jobs (3)
- # shadow-cljs (38)
- # spacemacs (4)
- # specter (4)
- # speculative (54)
- # tools-deps (62)
- # vim (8)
- # vscode (14)
does anyone know why
(require '[reagent.dom.server :as dom.server])
(dom.server/render-to-string [:div [:h1 "foo"]])
works, but:
(require '[reagent.impl.template :as tmpl])
(tmpl/as-element [:div [:h1 "foo"]])
doesn’t?
Basically I want to “render” component, unwrapping the sub-components, etc. but instead turning it into a html, I want to keep it Hiccup. How can I do that?I checked, render-to-string
calls tmpl/as-element
, but when I call it directly it’s not working for me
1. Unhandled clojure.lang.ExceptionInfo
#object[TypeError TypeError: Cannot convert a Symbol value to a string]
but as-element
doesn’t do what you want, anyway. it’s going to convert the hiccup into React Elements
> Basically I want to “render” component, unwrapping the sub-components, etc. but instead turning it into a html, I want to keep it Hiccup. How can I do that? is there a way of doing that? without having to make html/render component in the DOM?
I need to test that the things I want in the component are there when it gets rendered, but without tying it to the specific structure. i.e: when I dispatch a re-frame event, I know I can check what subscription returns, but how do I confirm that the render function renders accurate data? I thought I would render it and then do pattern-matching on certain things.
For form-1 and 2 components, we have a tiny helper that expands the hiccup by calling the underlying functions (e.g. essentially walking it and turning [comp arg1 arg2]
into (comp arg1 arg2)
)
it’s alright… I was thinking about a way to test things without having to render them in the DOM, but then I realized - no other approach is simpler than using document.querySelector. Even if you have expanded Hiccup structure, it’s not trivial to traverse it and find elements you want to check.
We currently do that with zippers - it's quite pleasant once you've got a basic helper vocabulary. But I'd expect meander to really excel at this kind of thing!
I think I’m going to pick reagent.dom.server/render -> hickory/parse -> hickory/as-hiccup -> meander/search
way.
I would use something like react-testing-library which will actually render the component to a DOM and you can test it that way
I'm looking to use reagent with a node repl to render static markup:
deps-cljs-sandbox(master) $ clj -m cljs.main -re node -co '{:npm-deps true}' -r
ClojureScript 1.10.597
cljs.user=> (require '[reagent.core :as reagent])
(node:36945) [DEP0097] DeprecationWarning: Using a domain property in MakeCallback is deprecated. Use the async_context variant of MakeCallback or the AsyncResource class instead.
Execution error (Error) at (<cljs repl>:1).
Cannot find module 'react'
Require stack:
- /tmp/out852708428590058059261650556445395/reagent/impl/component.js
- /home/mic/src/deps-cljs-sandbox/[stdin]
cljs.user=> (require '[react :as react])
nil
cljs.user=> react/version
"16.12.0"
cljs.user=>
This works if you specify an :output-dir local to your project e.g :output-dir "out"
- by default it goes to /tmp and reagent doesn't seem to be able to find it
So I'm using npm to provide react/react-dom-server etc.. this seems fine when running in the browser but when using a node repl.. it seems as though I can require react directly but reagent can't require react