Fork me on GitHub
#reagent
<
2016-08-07
>
podviaznikov00:08:45

what is the correct way to use react components defined as es6 classes via reagent. Before I was using function like

(defn build [component props]
  (let [React (.-React js/window)]
    (.createElement React component (clj->js props))))
Now it doesn’t work if I want to make es6 react component like this https://github.com/ianstormtaylor/slate/blob/master/lib/components/editor.js#L46 into reagent component. Any tips?

timothypratley01:08:35

what's the best way to decide if something is swappable?

timothypratley01:08:30

(satisfies? IAtom data) seems to do the trick.

porglezomp02:08:48

I’m trying to use react-pixi with Reagent, but I’m running into a difficult error:

porglezomp02:08:55

Error: Invariant Violation: PIXIStage.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

roberto03:08:12

code snippet?

porglezomp03:08:40

Minimum example here:

roberto03:08:16

so, it is doing what it is supposed to do, but the error is really thrown by Pixi

roberto03:08:29

I imagine this line is being called by the render function https://github.com/Izzimach/react-pixi/blob/master/src/ReactPIXI.js#L409

roberto03:08:36

which explains the error

roberto03:08:15

I’m not sure what props.renderer is or where that is set. Not too familiar with React.

porglezomp03:08:10

Nor am I. I spent a long time tracing through the debugger only to have the exception appear to be thrown on an assignment.

roberto03:08:48

so generateDefaultRenderer should have been called

roberto03:08:17

either that didn’t get called, or something inside that function didn’t work as expected

porglezomp03:08:11

I don’t think that’s what’s causing the error, I think render can return null.

roberto03:08:15

but I still don’t see how that would set props.renderer

roberto03:08:34

I’m not too sure about that

porglezomp03:08:40

That last one is a case of returning undefined, but that’s not null.

roberto03:08:26

or some other invalid object

porglezomp03:08:56

I looked it up, in React null means “please don’t render me,” so it’s not the null.

roberto03:08:45

then it is this return React.createElement("canvas”);

porglezomp03:08:03

I’ll set a breakpoint in Pixi’s render

roberto03:08:03

so, is it returning null or is the other line being executed?

roberto03:08:07

yeah, does it need a canvas element?

porglezomp03:08:05

That line should be creating one...

porglezomp03:08:14

It never makes it to the render

porglezomp03:08:50

No, wait, sorry

roberto03:08:27

shouldn’t it be (.getElementById js/document "app”)) ?

roberto03:08:42

instead of what you have there?

porglezomp03:08:51

I’m just using what the template provided

porglezomp03:08:56

I think they’re technically the same

porglezomp03:08:59

But I should change that

porglezomp03:08:21

I know that’s not the problem because pure reagent apps work

roberto03:08:29

ok, I got to run, battery is dying.

porglezomp03:08:15

Again, for anyone else who might have some idea. I’m trying to use react-pixi with Reagent, but I’m running into a difficult error:

Error: Invariant Violation: PIXIStage.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
With the minimal code needed to produce it:
(ns react-sprites.core
  (:require [cljsjs.react-pixi]
            [reagent.core :as r]))

(def stage (r/adapt-react-class js/ReactPIXI.Stage))
(defn root [] [stage {:width 300 :height 300}])

(r/render-component [root]
                    (. js/document (getElementById "app")))

timothypratley04:08:49

@porglezomp: [stage {:width 300 :height 300}] looks suspicious to me... will that pass a Clojure map to a javascript library, and I don't think it will be happy with it?

timothypratley04:08:28

#js {:width 300 :height 300} might work better

timothypratley04:08:45

How does reagent figure out what ratoms a component depends on? I imagine that it inspects the vector for ratoms, but I can't seem to find any such code (I'm probably not looking in the right place). I want to find or write a function that takes a component and returns all the ratoms it depends on.

miikka08:08:20

Looking at the code, when Reagent executes a component, it keeps a list of ratoms that get dereferenced. See IDeref implementations in https://github.com/reagent-project/reagent/blob/master/src/reagent/ratom.cljs

miikka08:08:10

Looks like check-derefs without the some? call might be what you're looking for.

porglezomp14:08:27

@timothypratley: That was a good thought, I changed that, but it didn’t resolve the issue.

timothypratley15:08:10

@miikka ooo nice thanks!

porglezomp15:08:39

Okay, I’ve pinpointed my issue more closely, Pixi is doing React.createComponent(“canvas”), and that component is what’s failing the validation. I think react-pixi and reagent might both be requiring separate versions of react, and that’s causing the problem.

timothypratley15:08:59

ah, nice catch 🙂

porglezomp15:08:31

While I was debugging there were a bunch of other exceptions that explicitly mention that maybe you have multiple react versions, and since I wasn’t getting one of those I didn’t think to check...

porglezomp15:08:32

Hm, well react-pixi doesn’t seem to expose its React, so just excluding it doesn’t help any.

pesterhazy16:08:49

@porglezomp: I ran into the React.createComponent issue as well

pesterhazy16:08:16

if you set js/React to whatever version of react-dom you prefer, reagent will use that

pesterhazy16:08:37

otherwise it'll pretty randomly try to require stuff, which doesn't usually work

porglezomp16:08:13

Should I exclude cljsjs/react in Reagent?

pesterhazy16:08:03

also consider updating to react 0.6.0-rc, which knows about react-dom

pesterhazy16:08:06

but take this with a grain of salt, I can't say I've fully grasped how these dependencies interact

porglezomp16:08:26

Yeah, I updated to react 0.6 while I was working on this

pesterhazy16:08:53

(oops I meant reagent 0.6)

porglezomp16:08:07

so did I, haha

porglezomp17:08:57

Where should I be defining React, since I’m getting React is undefined inside Reagent right now. I’m doing (set! js/React js/ReactPIXI.React), apparently with success...

pesterhazy17:08:24

don't know, maybe in your core.cljs?

pesterhazy17:08:02

actually it looks like you should set ReactDOM, not React

porglezomp17:08:20

Hm, so I need some code that gets called after pixi is imported, and before reagent is imported… Do :require forms get run in order?

porglezomp17:08:56

No, still getting Error: js/React is missing and Error: js/ReactDOM is missing.

porglezomp17:08:16

Oh, no, it’s just because js/ReactPIXI.React doesn’t exist. Grrr.

porglezomp17:08:20

I’m not particularly familiar with the JS side of things, so I don’t know exactly what that’s doing, but I do know that the cljsjs package doesn’t expose it, so if I want to try it out I’ll have to figure out how to make my own package.

porglezomp18:08:00

NOOOOOOOOOOOOOOOOO

porglezomp18:08:10

it started spontaneously working, and I don’t know what I did!

porglezomp18:08:58

I need to try to figure out how to break it again

podviaznikov20:08:16

I’m struggling to understand how to convert es6 js react component class like this https://github.com/ianstormtaylor/slate/blob/master/lib/components/editor.js#L46 to reagent component. Anyone has any tips?