Fork me on GitHub
#clojurescript
<
2019-12-26
>
lepistane06:12:06

Hello are there any examples of extending JS classes in cljs (reagent + re-frame)? Here is SO post i'd like to use but i am not sure how to create this code with cljs https://stackoverflow.com/questions/54555877/can-i-use-overlappingmarkerspiderfier-with-react-google-maps Would i use something like reagent/create-class and then try to interop it or ? Are there examples of this that i could use as reference? Thanks in advance

p-himik09:12:23

So you want to have the same exact code, just written in CLJS? Or do you want to have something different, maybe a different base class?

p-himik09:12:08

If it's the first one, you don't have to do anything special because the React.Component base class will added for you by Reagent. You may have to use reagent.core.reactify-component when you pass Spiderfy to GoogleMap though - I'm not sure.

p-himik09:12:15

Ah, my bad - the SO version relies on the legacy React context passing (https://reactjs.org/docs/legacy-context.html) which has been supersede by context providers. The the react-google-maps still uses the legacy context. So it seems that you're right and you will have to use reagent/create-class and specify the :context-types property, just as in the SO version.

Prometheus11:12:30

import AsyncStorage from '@react-native-community/async-storage';
I’ve had issues with this, it can’t find the lib.

Prometheus11:12:30

(def rn (js/require "@react-native-community/async-storage"))
(def as (.-AsyncStorage rn))
This is my cljs code. Has anyone had similar issues? I’ve linked the library.

p-himik16:12:26

It's running on Node, right? Have you checked what rn contains?

Prometheus16:12:51

how do I check that? I called

(str rn)

Prometheus16:12:17

it gave me

"[object Object]"

p-himik16:12:11

Just print it to the console with (js/console.log rn).

Prometheus16:12:22

Update: I was able to call

(.-AsyncStorage rn)
and it gave me an object:
#js {:_getRequests #js [], :_getKeys #js [], :_immediate nil, :getItem #object[getItem], :setItem #object[setItem], :removeItem #object[removeItem], :mergeItem #object[mergeItem], :clear #object[clear], :getAllKeys #object[getAllKeys], :flushGetRequests #object[flushGetRequests], :multiGet #object[multiGet], :multiSet #object[multiSet], :multiRemove #object[multiRemove], :multiMerge #object[multiMerge]}

p-himik16:12:07

So everything seems to work then?

Prometheus16:12:20

no I must be calling it wrong…

p-himik16:12:43

I mean, everything for what you've provided the code. :)

Prometheus16:12:46

This is how I’m calling it

(<! (await (. as getItem token-name)))]

Prometheus16:12:02

inside a go-block of course

Prometheus16:12:26

And I still get this error in the simulator:

p-himik16:12:40

Sorry, I don't work with React Native, so no idea.

Prometheus16:12:57

ah ok, thanks for the attention anyway 🙂

Prometheus16:12:03

@U2FRKM4TW it might help if you see how it supposed to be called

p-himik16:12:44

Yeah, I've seen the example. But it doesn't seem like it has anything to do with that error above since it doesn't even mention AsyncStorate.

Prometheus16:12:19

hmm yeah, maybe I fucked up in the ios config

dpsutton17:12:21

is there a reason to prefer goog.object/get over just (.-size file)? Trying to find documentation which might instruct why to choose one over the other

souenzzo17:12:14

@dpsutton I link to think (.-size file) for code, (gobj/get file "size") for data.

dpsutton17:12:08

i don't understand the difference here

dpsutton17:12:27

concretely, file is a js/File object. which would you prefer?

dpsutton17:12:41

and are there no implications with respect to name munging in advanced compilation?

Lu19:12:40

When using leaflet.js, I had to resort on goog.object to avoid null pointers with advanced compilation.

dpsutton19:12:45

Yeah I’m trying to figure out when properties get renamed

darwin19:12:16

in other words, .-size on js/File should be never renamed in advanced compilation, because such renaming should be prevented by externs bundled with the google closure compiler in theoretical case the extern is missing .-size would get renamed by using gobj/get you use the force to prevent renaming under any circumstances

dpsutton19:12:43

So no helper function could work on a “(deftype foo [size])” and js/File if it called (.-size x)? Because the foo’s size and the file’s size names might diverge?

darwin19:12:47

google closure compiler can track the difference and rename foo’s size but leave js/File’s size intact

darwin19:12:40

ah, I see your point, test it, I would guess common helper fn called on both would compile into two distinct helper fns or get inlined

darwin19:12:09

gcc has whole-program visibility, so it can do that (in theory)

dpsutton19:12:46

I ran it under a simple test and the “size” property was never renamed even on the deftype. But I wonder if it might under a larger program. That’s why I was wondering if this was documented anywhere

darwin19:12:39

try to use less common name maybe, there could be an extern Object.prototype.size defined somewhere

darwin19:12:04

this would prevent any .-size to get renamed, I believe

darwin19:12:02

anyways, take my comments with a grain of salt, I’m no externs expert, this is my opionon about them 🙂 https://github.com/binaryage/cljs-oops#externs-from-hell

darwin19:12:23

I simply opted out from this mess

souenzzo20:12:35

as file is a js/File , I prefer (.-size file) If it was a json like {"size": 42} , (gobj/get file "size")

👍 1
Lu08:12:52

Actually, I could get around this renaming problem by adding the ^js metadata to any vars I wanted to be preserved and of course by turning on the infer-externes key in Figwheel ...

Lu08:12:38

To give some context I was trying to access an svg circle tag property being .getTotalLength or something alike.. by adding ^js right before the dom element I could compile it successfully with the advanced option

Lu08:12:58

So I’d try this solution too: (.- size ^js file)