Hello. Did anyone have a problem with advanced compilation of type-3 components?, I have now:

(defn my-component [...]
  :componentDidMount (fn [...] (this-as this (.myMethod this)))
  :myMethod (fn [...] ...do something...)
...)

(i.e. JavaScript compiled by it reports)

@andrewboltachev I think the name created by create-class won't be optimized, but the name from .myMethod call will be optimized so this won't work

yeah, it seems like so

((gobj/get this "myMethod") ...) might work

Or other similar ways to get the method dynamically from the object, so the name is not optmized

aha, and gobj itself has to be :required?

Yes

aha. great, would try this!

thanks

It is the recommended way to access JS objects in Cljs

(Reagent implementation itself uses aget/aset currently, but those should only be used with JS arrays...)

gotcha

Have suchlike problems accessing SVG objects as well: .getBBox method gots compiled away

So, :advanced definitely comeas at a cost

You can add this extern to the project to fix that: https://github.com/google/closure-compiler/blob/master/contrib/externs/svg.js

@juhoteperi great, should it go to src/externs?

Path doesn't matter, you need to add it to :compiler-options :externs list

aha, so then like :externs ["src/externs/svg.js"]

It should probably be packaged into Cljsjs, as extern only package, I though it was done already but doesn't seem like it

Is it possible via some trick to get the name of a parent component? e.g. in a React lifecycle method?

never mind

@andrewboltachev wait why are you doing it this way?

rather than like this https://github.com/reagent-project/reagent/blob/master/docs/CreatingReagentComponents.md#form-3-a-class-with-life-cycle-methods

:component-did-mount receives this as its first argument: http://blog.ducky.io/reagent-docs/0.6.0-alpha2/reagent.core.html#var-create-class

no need to mess with this-as

... I guess this has nothing to do with your question 🙂

Juho already answered the actual question

if you have externs inference on, you could also add a type annotation to the component. with shadow-cljs,

:component-will-mount (fn [^js this] (.mymethod this ...))

that would prevent myMethod from being renamed by the compiler

.getBBox is special I imagine because more common DOM methods like .focus are blacklisted in Google Closure and won't be minified (I think...)

@mhuebert interesting, does this work with cljsbuild or figwheel as well?

i don’t know, it would be worth trying. externs inference itself is not specific to shadow-cljs

https://clojurescript.org/guides/externs#externs-inference

however I think @thheller did quite a bit of work to make externs inference in shadow-cljs work (a) more often and (b) without extra config, so I am not sure how it compares to the cljsbuild experience

I use it all the time now though. ’tis easy to add ^js in front of whatever thing should be treated as external, = few & easy to debug :advanced problems

the page you linked to doesn't mention ^js hinting, only specifying a class like ^js/Foo.Bar

How does one go about specing a function in reagent which returns hiccup? I know these are just vectors, but I am curious if one would expect something more than :ret vector??

the first element must be a function or a keyword

@pesterhazy the ^js hint without a class reference is specific to shadow-cljs. I feel the class should be optional and it doesn't matter anyways. see https://code.thheller.com/blog/shadow-cljs/2017/11/06/improved-externs-inference.html

CLJS by default wil respect ^js but I believe it won't generate externs for them

@thheller interesting

I want to do an official proposal for this at some point but didn't get around to it yet

seems reasonable to me

anything that reduces the pain of adv compilation is a win in my book

indeed

does reagent provide anyway of making state available to helper functions? In React, you can simply call this.state since its part of a class. In Reagent, I find myself passing state as an argument way too often since I don't want global variables.

@mcama200 whenever i find that i want to reach for a method, i replace it with a function defined in a let block

then you can just close over the state you need

@mcama200 I pass my app-state ratom around as the first argument pretty much everywhere .. a great alternative is to use re-frame tho (it solves this headache)

@gadfly361 what is the basic re-frame solution in a nutshell?

@lee.justin.m basically re-frame closes over app-db implicitly, so when you write event handlers, you always have access to the entire world of state (so you don't have to pass it in as an argument anymore) .. it's just a convenience (that i think has more positive than negatives)

@lee.justin.m @gadfly361 if you want it in a nutshell read "What Are They?" in this doc. Just a few paragraphs: https://github.com/Day8/re-frame/blob/master/docs/Coeffects.md#what-are-they

cool thanks

At moments like this I point towards this re-frame FAQ entry: https://github.com/Day8/re-frame/blob/master/docs/FAQs/DoINeedReFrame.md