Fork me on GitHub
#reagent
<
2020-01-24
>
ag00:01:03

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?

ag00:01:08

I checked, render-to-string calls tmpl/as-element, but when I call it directly it’s not working for me

lilactown00:01:16

what happens when you call it

ag00:01:40

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

lilactown00:01:07

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

lilactown00:01:25

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

lilactown00:01:54

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

lilactown00:01:02

what are you trying to do by walking the hiccup?

ag00:01:47

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

lilactown00:01:58

why would you want to do that

lilactown00:01:15

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

ag01:01:57

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.

aisamu16:01:03

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

ag21:01:05

what’s that helper?

aisamu21:01:12

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

aisamu21:01:16

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

ag21:01:06

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.

aisamu23:01:38

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!

ag01:01:30

I think I’m going to pick reagent.dom.server/render -> hickory/parse -> hickory/as-hiccup -> meander/search way.

lilactown02:01:06

I would use something like react-testing-library which will actually render the component to a DOM and you can test it that way

mikepjb13:01:52

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

mikepjb18:01:37

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

mikepjb13:01:52

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

mikepjb13:01:45

has anyone come across this before?