This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-08-07
Channels
- # admin-announcements (3)
- # beginners (133)
- # boot (123)
- # capetown (2)
- # cider (21)
- # cljs-dev (1)
- # cljsrn (2)
- # clojure (32)
- # clojure-czech (1)
- # clojure-russia (2)
- # clojure-spec (72)
- # clojurescript (4)
- # datomic (28)
- # emacs (19)
- # funcool (1)
- # hoplon (10)
- # jobs-rus (1)
- # onyx (1)
- # other-languages (3)
- # protorepl (3)
- # re-frame (10)
- # reagent (76)
- # ring (2)
- # rum (2)
- # spirituality-ethics (61)
- # test-check (2)
- # testing (1)
- # untangled (3)
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?what's the best way to decide if something is swappable?
(satisfies? IAtom data) seems to do the trick.
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.
Minimum example here:
I imagine this line is being called by the render function https://github.com/Izzimach/react-pixi/blob/master/src/ReactPIXI.js#L409
I’m not sure what props.renderer
is or where that is set. Not too familiar with React.
Nor am I. I spent a long time tracing through the debugger only to have the exception appear to be thrown on an assignment.
either that didn’t get called, or something inside that function didn’t work as expected
I don’t think that’s what’s causing the error, I think render can return null.
That last one is a case of returning undefined
, but that’s not null
.
I looked it up, in React null
means “please don’t render me,” so it’s not the null
.
I’ll set a breakpoint in Pixi’s render
That line should be creating one...
It never makes it to the render
No, wait, sorry
I’m just using what the template provided
I think they’re technically the same
But I should change that
I know that’s not the problem because pure reagent apps work
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")))
@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?
#js {:width 300 :height 300} might work better
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.
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
@timothypratley: That was a good thought, I changed that, but it didn’t resolve the issue.
@miikka ooo nice thanks!
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.
ah, nice catch 🙂
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...
Hm, well react-pixi doesn’t seem to expose its React, so just excluding it doesn’t help any.
@porglezomp: I ran into the React.createComponent issue as well
if you set js/React
to whatever version of react-dom you prefer, reagent will use that
otherwise it'll pretty randomly try to require stuff, which doesn't usually work
Should I exclude cljsjs/react in Reagent?
probably!
you may also want to add an empty ns file like so: https://github.com/mjmeintjes/boot-react-native/blob/master/example/react-support/cljsjs/react.cljs
also consider updating to react 0.6.0-rc, which knows about react-dom
but take this with a grain of salt, I can't say I've fully grasped how these dependencies interact
Yeah, I updated to react 0.6 while I was working on this
(oops I meant reagent 0.6)
so did I, haha
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...
don't know, maybe in your core.cljs
?
here's the code in reagent: https://github.com/reagent-project/reagent/blob/baf2107c1571fbb59416f6873c80003c4abe9494/src/reagent/dom.cljs#L11
actually it looks like you should set ReactDOM, not React
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?
No, still getting Error: js/React is missing
and Error: js/ReactDOM is missing
.
Oh, no, it’s just because js/ReactPIXI.React doesn’t exist. Grrr.
is this relevant? https://github.com/Izzimach/react-pixi/blob/master/src/react-pixi-exposeglobals.js
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.
NOOOOOOOOOOOOOOOOO
it started spontaneously working, and I don’t know what I did!
I need to try to figure out how to break it again
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?