Fork me on GitHub

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


what happens when you call it


1. Unhandled clojure.lang.ExceptionInfo
   #object[TypeError TypeError: Cannot convert a Symbol value to a string]


that is failing because it’s trying to print a React element


it’s working, just printing the value it returns throws an error


but as-element doesn’t do what you want, anyway. it’s going to convert the hiccup into React Elements


what are you trying to do by walking the hiccup?


> 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?


why would you want to do that


you’re saying how you want to solve a problem. what are you actually trying to do?


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))


what’s that helper?


IIRC it's a textbook use of clojure.walk/prewalk


(I'd happily help should you get tangled with it)


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])
cljs.user=> react/version


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


has anyone come across this before?