Does anyone know why I can’t get garden into my Boot repl?

https://gist.github.com/coetry/c664947e3500ca1b7dbe4c842d91a625

Nvm, it doesn’t work when I enter the browser repl, but works from boot.user

Hi people. I've been looking for a way to implement class MyComp extends Component ES6 jargon, since React is removing createClass from its API (I know it's available separately). The tricky part is to initialise state (or any non-fn member), since getInitialState is also a thing from the past. This is what I came up with, it seems it works, but I'd like feedback if there's a better way? Many thanks!

(defn MyComp [p]
  (let [c (React.Component. p)]
    (set! (.-state c) #js {:value "STATE"})
    (specify! c
     Object
     (render [o] (React.createElement
                  "div" #js {}
                  (.-text (.-props o))
                  (React.createElement
                   "div" #js {}
                   (.-value (.-state o))))))))

(defn my-comp [p]
  (React.createElement MyComp (clj->js p)))

(defcard
  ""
  (my-comp {:text "PROP"}))

;=> shows "PROP" and "STATE"

Hm how do you guys debug clojurescript? Do you use a special debugger or something?

prn 🙂

yeah I've been using prn a lot too

chrome debugger is nearly 100% useless, and repl stops working when you're stopped at a breakpoint

chrome debugger should work I think, but I don't use it at all

@fdserr you can probably use some functions from google closure to inherit from Component

also my understanding is that createClass is not deprecated, just moved to a separate library, so it's still fine to use

can't really inspect or manipulate clojurescript datatypes with chrome debugger

also when there are multiple breakpoint possibilities on the same line, it doesn't allow me to select any but the outermost expression

@roklenarcic have you looked at Dirac?

I have but I didn't go through all the thing with installing a special chrome for it

it's well worth it imo

I'll look into it again

you can also just use cljs-devtools, which works with your normal chrome version

@fdserr your snippet is nice actually. So the problem is that you can't specify a constructor?

I'd be interested if that's the best way in ClojureScript to extend an ES6 class

https://gist.github.com/thheller/7f530b34de1c44589f4e0671e1ef7533

@pesterhazy @fdserr that’s what I have been using for my components (wrapped in a helper function)

you can add add #js {:render (fn [] ...) to the goog.extend call to add methods to the class

👍

(.log js/console (str [my-bugged-var])) also helps. http://blog.cognitect.com/blog/2017/6/5/repl-debugging-no-stacktrace-required It's usefull. but it a bit tricky on cljs.

@tiagoantao I have got the same problem you had a couple of weeks ago: https://clojurians-log.clojureverse.org/clojurescript/2017-08-11.html#inst-2017-08-11T23:53:24.169406Z

I discovered that I had to npm install "@cljs-oss/module-deps"

it probably has something to do with this: https://github.com/clojure/clojurescript/blob/adc7deaafc54f6f7d27cc631db4e381d222a818c/src/main/clojure/cljs/build/api.clj#L275

Now, my question is how come this @cljs-oss/module-deps isn't packaged with cljs?

@thheller, I'm trying out your snippet. Maybe i'm being daft but what does component-fn refer to https://gist.github.com/thheller/7f530b34de1c44589f4e0671e1ef7533#file-es6-class-cljs-L18 ?

@thheller should that line be (set! (.. my-component -prototype -constructor) my-component)?

made this into a figwheel-based snippet: https://github.com/pesterhazy/feigenrad/blob/master/src/feigenrad/core.cljs#L15

@pesterhazy yes sorry. my-component is correct. took that example from my code and forgot to change that reference

don’t to the extend in the constructor

just add the #js as an extra arg to the gobj/extend below

in ClojureScript, is there a particular macro/function to iterate and additive add to fluent interfaces like this: https://github.com/archiverjs/node-archiver/blob/master/test/archiver.js#L282?

I know I could reduce, and pass the instance from one call to another, but I wonder if there is a better way, like doto but iterating

Hi..is it possible to link inside an HTML a CSS that is “bundled” with a cljsjs dependency?

In my case the dependency is antd and I can see that the CSS file is under cljsjs/antd/development/antd.inc.css

@thheller, cool

I guess the whole thing could be wrapped in a Class Constructor function?

@pedrorgirardi https://github.com/cljsjs/packages/wiki/Non-JS-Assets > Ring middleware

(def my-component (make-component (fn [this] :constructor-goes-here) #js{:render (fn [] ..)}))

thank you @juhoteperi, I will try that

@pesterhazy yes, thats what I do.

@juhoteperi it worked, and thank you for Less4clj!

I ended up going back to http://github.com/cljsjs/packages . I will wait until it becomes more stable

How would I go about importing a clojurescript project in a situation where the normal document.write script tags won't work? (React native) Since the goog library doesn't provie an es6 module.

@au-phiware you probably just forgot to add :install-deps true to your compiler options

is all the new cljs.loader and modules work compatible with lein cljsbuild?

With these new clojurescript 1.9.9?? is possible/easy/there is an explanation how to have nested js/cljs files in same project? (I have a big project, I want to start port components to clojurescript)

well, the code splitting tutorial definitely works for me. When trying from a lein-cljsbuild/figwheel project though, (resolve ... is not resolving my symbols.

@thheller @fdserr, I've turned @thheller's snippet into a make-component function that supports display-name and an optional constructor fn: https://github.com/pesterhazy/feigenrad/blob/master/src/feigenrad/core.cljs#L13

hmmm. By putting (loader/load :my-mod ... outside of my handler function, it started somewhat working.

Getting Uncaught TypeError: Cannot read property 'EvaluateCodeEvent' of undefined but the module loaded and the function executes.

@john are you calling set-loaded! in your module entry points?

@anmonteiro yes, I've got set-loaded! at the bottom of my core namespace in an upstream project, which has the function in question. Then I have it also at the bottom of the core namespace of my downstream project. That ns calls a function called instrument-btn' in my widgets` namespace of the downstream project, which causes the button to, when clicked, execute the function from my upstream project.

And my downstream project's cljsbuild compiler options have a module map that describes both the downstream and upstream modules

does the “downstream project” require the “upstream project”

no

it has the upstream project as a dep in the project.clj but does not require it from the widget ns

happy to look at a minimal case

Okay. I'll try to whip something up. Thanks!

Other than that error though, it is functioning.

I’ve seen that error before when set-loaded! is called too early I think

which is why I’m asking

understood

another question: should we be able to mix modules from upstream projects and within one project all together? So, something like

:modules {:upstream {:output-to "resources/public/js/compiled/upstream.js"
                       :entries #{upstream.transmit.core}}
            :widgets {:output-to "resources/public/js/compiled/widgets.js"
                      :entries #{downstream.widgets}
                      :depends-on [:upstream]}
            :core {:output-to "resources/public/js/compiled/core.js"
                   :entries #{downstream.core}
                   :depends-on [:widgets]
                   }}

and then, from my downstream.core ns, do (l/load :widgets ((resolve 'downstream.widgets/instrument-btn)))

and where instrument-bn does (l/load :upstream ((resolve 'upstream.transmit.core/send) ... ??

And I assume downstream.core should not be requireing downstream.widgets since it is split off and brought in via the module loader. Does that all sound sane?

I think so

@john if you really want to grok how all this works you should read “Closure: The definitive guide”

I've been meaning to buy that actually

I did have that option but now I'm using lein-npm and I've explicitly added @cljs-oss/module_dep to my devDependencies.

@anmonteiro well, I made a minimal project with a similar setup, but I'm getting an error I was getting earlier, rather than the EvaluateCodeEvent error. But here it is: https://github.com/johnmn3/modrepro

modrepro is the upstream project, a subdirectory submodrepro has the project which consumes modrepro

so I do a lein install on the parent dir to pull it into the subdir with the project deps

this is not minimal at all

can you make something without multiple projects and without Lein

ah

it should be reproducible that way

otherwise too many variables.

I'm sorry. Rgr, I'll try. My hunch is that lein-cljsbuild/figwheel may be causing the error, because following the directions to create a minimal build using the tutorial all went fine.

I'll try to boil it down further.

@john you're not having the problem I had are you? What's the output of lein do clean, cljsbuild once?

Note, I was unable to figure out how to make a minimal build to reproduce my problem... so frustrating...