Fork me on GitHub
#reagent
<
2019-12-08
>
Hi10:12:55

how to implement this `

<img src="Error.src" onerror="this.style.display='none'"/>
` in Reagent ?

ingesol10:12:50

@feikas

[:img {:src "Error.src" :on-error (fn [event] (-> event .-target .-style .-display (set! "none")))}]

ingesol10:12:40

Something like that. Not sure about the on-error, though, if there is such an event on images

Hi10:12:18

it worked πŸ‘:skin-tone-2: thanks πŸ˜‰

athomasoriginal21:12:48

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'),
      );

athomasoriginal22:12:48

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

lilactown22:12:58

when you console.log the Greet value, what does it look like?

athomasoriginal22:12:15

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

lilactown22:12:58

are you potentially using different copies of React?

athomasoriginal22:12:58

I might be, yes. Currently going through the versions right now.

lilactown22:12:46

if e.g. your JS code is using one copy of React, and your CLJS is bundling it's own

lilactown22:12:48

that's no good

lilactown22:12:13

even if the versions match

athomasoriginal22:12:54

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?

lilactown22:12:53

how are you bundling React with the JS and CLJS code?

athomasoriginal22:12:09

Vanilla CLJS compiler + Reagent (that is to say not webpack at the moment)

lilactown22:12:58

so you're using npm deps, or foreign libs?

athomasoriginal22:12:43

yeah, i was leaning on npm-deps (just because this is a straightforward build)

lilactown22:12:11

and how is your JS code accessing React?

athomasoriginal22:12:17

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

lilactown22:12:24

yes, create-react-app uses it's own webpack bundle and will include all of the same dependencies as your clojurescript application

athomasoriginal22:12:35

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>

lilactown22:12:01

you're probably also going to run into a problem with the fact that npm-deps get passed through optimizations

lilactown22:12:24

what you should probably do is use foreign libs and provide React outside of your CLJS build toolchain

lilactown22:12:02

that way your JS consumer can use whatever way they want to include React

athomasoriginal22:12:10

Yeah, that sounds right. Okay. I will do this thing properly πŸ™‚

athomasoriginal23:12:09

Got it. Thanks, @lilactown!

πŸ‘ 4