This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-12-08
Channels
- # adventofcode (60)
- # announcements (3)
- # babashka (31)
- # beginners (5)
- # boot (1)
- # calva (13)
- # cider (9)
- # clj-kondo (1)
- # clojure (135)
- # clojure-italy (18)
- # clojure-nl (18)
- # clojure-spec (21)
- # clojure-uk (11)
- # clojuredesign-podcast (1)
- # clojurescript (47)
- # core-async (14)
- # emacs (7)
- # euroclojure (4)
- # fulcro (3)
- # graalvm (19)
- # off-topic (22)
- # reagent (29)
- # shadow-cljs (25)
- # vim (3)
how to implement this `
<img src="Error.src" onerror="this.style.display='none'"/>
` in Reagent ?[:img {:src "Error.src" :on-error (fn [event] (-> event .-target .-style .-display (set! "none")))}]
Something like that. Not sure about the on-error
, though, if there is such an event on images
I might be misunderstanding reactify-component
, but is it possible to create a component in Reagent and use it in JSX like this:
CLJS File
(ns my.component.library)
(defn greet
[props]
[:p "Hi, " (:name props)])
(def ^:export Greet
(r/reactify-component greet))
and then build a production version of the above, include/use it in a vanilla React project like
JavaScript File
const {Greet} = window.my.component.library;
class Welcome extends React.Component{
render() {
return (
<div>
<p>Hello {this.props.name}</p>
<Greet name="Sailor" /> // <--- component from reagent
</div>
)
};
}
ReactDOM.render(
<Welcome name='World'/>,
document.getElementById('root'),
);
I have everything connected more or less correct, but React yells at me with
ncaught Error: Objects are not valid as a React child (found: object with keys {Ia, type, key, ref, props, ac}). If you meant to render a collection of children, use an array instead.
in Unknown (created by Welcome)
in div (created by Welcome)
in Welcome
Ζ b(a,d,e){if(this.ze.length)for(var f=this.ze,g=0;g<f.length;g+=2)this[f[g]]=f[g+1].bind(this);this.props=a;this.context=d;this.refs=kx["default"];this.oc=e||c;this.state=null;a=this.getInitialState?
I might be, yes. Currently going through the versions right now.
if e.g. your JS code is using one copy of React, and your CLJS is bundling it's own
hmm. Okay, I will break out of the project I am in and try this on a smaller project. The above should work in theory though, yes?
Vanilla CLJS compiler + Reagent (that is to say not webpack at the moment)
yeah, i was leaning on npm-deps
(just because this is a straightforward build)
I was using a basic create-react-app
setup, but now I realize that if that was injecting itβs own version of React, and my prod artifact also had react bundled, we would get this odd result
yes, create-react-app
uses it's own webpack bundle and will include all of the same dependencies as your clojurescript application
Trying a new build w/ the following in my prod.cljs.edn
{:main my.components
:npm-deps {"react" "16.12.0"
"react-dom" "16.12.0"
"create-react-class" "15.6.3"}
:install-deps true}
and I will just add the above into a vanilla index.html
file like
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="./prod-main.js"></script>
<script type="text/babel">
const {Greet} = window.my.components;
class Welcome extends React.Component{
render() {
return (
<div>
<p>Hello {this.props.name}</p>
<Greet name="sailor"/>
</div>
)
};
}
ReactDOM.render(
<Welcome name='World'/>,
document.getElementById('root'),
);
</script>
</html>
you're probably also going to run into a problem with the fact that npm-deps get passed through optimizations
what you should probably do is use foreign libs and provide React outside of your CLJS build toolchain
Yeah, that sounds right. Okay. I will do this thing properly π