Fork me on GitHub
#clojurescript
<
2019-02-12
>
gypsydave500:02:19

👋 Hi - could anyone point me towards the docs (or a guide) for clojure.browser.dom?

gypsydave500:02:55

(coz I'm really not succeeding in making an element at the moment and it's making me a bit sad 😞 )

gypsydave500:02:41

(or should I just be using goog.dom ?)

john00:02:24

Yeah, iirc, clojure.browser.dom is a vestigial artifact of history. Better to just use goog.dom

gypsydave500:02:46

Oh thank goodness I thought I was going mad 😄

gypsydave500:02:21

so I guess me next question is... any good places to get started with goog.dom?

john00:02:57

mostly arcane lore, passed from person to person, on these chat networks 😉

gypsydave500:02:03

That's great - as long as I'm not missing anything obvious I'll just have some fun hacking and exploring

john00:02:53

Yeah, mostly googling. And the google closure docs for goog.dom. I mostly use a mix between goog.dom and direct js interop, for sometimes a one-off .getElementById etc

john00:02:44

Here's a nice utility

(defn $>
  ([child]
   (if (map? child)
     (let [{:keys [el tag class]} child]
       ($> el tag class))
     ($> child nil)))
  ([child class]
   ($> child nil class))
  ([child tag class]
   (gdom/getAncestorByTagNameAndClass child tag class)))

john00:02:04

But these things can be solved a thousand ways in the browser

👍 5
podviaznikov01:02:39

I have clojurescript question. I have Clojure function:

(defn re-pos-map [re s]
  (loop [m (re-matcher re s)
         res {}]
    (if (.find m)
      (recur m (assoc res (.start m) (.group m)))
      res)))
which returns position of the match and match itself. However re-matcher is not in class core. How would one achieve solve this? Any ideas?

Braden Shepherdson01:02:53

you probably have to restructure it to use the Javascript Regex library with interop.

martinklepsch08:02:49

@gypsydave5 this is the API documentation for goog.dom: https://google.github.io/closure-library/api/goog.dom.html I find this mostly nice to work with but YMMV

👍 5
nha11:02:55

Re: yesterday’s discussion about code size. Not sure about cljs size transfer in the “normal” case. There is one area where I think it makes cljs impractical/harder to sell, which is making cljs libs for JS consumption.

thheller11:02:14

agreed but many compile-to-JS languages will have the same problems (eg. elm)

nha11:02:09

Yes, many of them. Some like typescript would work (I think). Clojure has some facilities since 1.6 ( https://clojure.org/reference/java_interop#_calling_clojure_from_java ) although the situation is admittedly trickier in JS-land.

thheller11:02:44

yeah clojure is ultimately a java library since the beginning. the new stuff added in 1.6 was just convenience, it did work before that.

clj 5
borkdude12:02:18

An example of a CLJS lib meant to be consumed from JS: https://github.com/swannodette/mori

leonoel14:02:04

is there an easy way to perform a deep macroexpansion inside a macro targeting clojurescript ?

jaide15:02:59

If you’re using re-frame but you want state that resets when a component is mounted is it acceptable to use atoms or is it recommended to keep it all in re-frame?

manutter5115:02:29

I use atoms for state that only one component ever cares about, e.g. “Is the tooltip visible or hidden?” If you need to share state info with any other component(s), I’d say put it in the app-db.

jaide15:02:19

Thanks, that’s exactly the locality and granularity I’m thinking of. Do you have an example of that I can see?

manutter5115:02:46

I use ratom not atom so the component re-renders on state changes, but same basic idea.

jaide15:02:06

I saw that, had no idea ratom existed until seeing your example. That really simplifies things.

nooga15:02:00

hi folks, I get a stubborn null from an external js library, wanted to convert it to nil using js->clj but it doesn’t seem to work

nooga15:02:37

how should I turn null into nil?

jaide15:02:44

For me (= nil null) => true. Is that the case for you?

mccraigmccraig15:02:49

you sure it's not a String "null" @nooga?

nooga15:02:44

I got a nosebleed from the facepalm I just performed

facepalm 5
picard-facepalm 10
😆 5
nooga15:02:50

thanks 😄

lilactown16:02:09

the problem with creating JS libraries with CLJS is that you have to include the CLJS runtime

lilactown16:02:19

this gets especially bad if you have multiple libraries that were built with CLJS

lilactown16:02:54

this is a problem for any compile-to-JS language with a runtime, e.g. ReasonML/BuckleScript, PureScript, etc.

lilactown16:02:35

TypeScript and Flow don’t have to worry about this because they have little-to-no runtime

lilactown16:02:55

some co-workers did a POC building a React component for distribution via NPM using CLJS, and I’m having to convince them not to actuallyp use it

thheller16:02:22

@borkdude see above. there was no question on how to do it, rather a statement that it is not ideal.

borkdude16:02:57

I know. Just thought I’d mention it since it’s relatively popular, so it shows it is done in practice.

thheller16:02:34

@lilactown to some extent the problem even exists in "simple" modern JS that is transpiled by babel and depend on different versions of the babel-runtime

thheller16:02:50

ie. typescript

lilactown16:02:58

yeah fair 😕

thheller16:02:04

since people always put the compiled code on npm rather than the uncompiled "standard" JS 😞

lilactown16:02:26

it’s a mess

lilactown16:02:04

there doesn’t seem to be a way to compile CLJS, but elide the runtime (e.g. cljs.core)?

thheller16:02:19

not in :advanced. in theory its possible for :simple

thheller16:02:56

but that would only make things worse as you'd need to depend on an exact version of the runtime with the exact same compiler settings used to generate it

thheller16:02:41

besides the prohibitive size of :simple builds in browser environments of course 😉

lilactown16:02:54

I have two use cases in mind: 1. At work we have a design library that is a collection of React components distributed via NPM. We’d like the ability to write them in CLJS. 2. For https://github.com/Lokeh/punk, I want the ability to allow users to provide custom viewers as additional .js files they load on the page, since the UI application is already compiled and distributed as a single bundle

lilactown16:02:34

sounds like (1) is out just because it would be prohibitive to use in a production setting due to bundle size

thheller16:02:39

well shadow-cljs fully supports JS so you can always use that to combine JS + CLJS 😉

🎉 10
😉 5
lilactown16:02:47

😄 well re: (1) we are 💯 using shadow-cljs on our application, but there are some other applications that are “simple” JS/Webpack apps that I don’t want to force another tool on them

thheller16:02:51

but yeah :advanced is not great if you want something extensible like punk

5
thheller16:02:18

btw I'm pretty close to building something like punk directly into shadow-cljs since I have the easy hookups for it everywhere 😛

lilactown16:02:17

well if it’s good I’ll use it 😄 I’m having too much fun building punk though

lilactown16:02:44

I’m going to completely redesign the UI pretty shortly. I’m trying to do more research on what other langs are doing, like the common lisp inspector / smalltalk UIs / etc.

nagarajan17:02:20

can anybody give me a pointer, how do I get so called "bootstrapped compiler" in my clojurescript code? in recent version its already available or do I need to compile with some special flags with compiler api?

thheller17:02:04

@nagarajan you need to include cljs.js basically

nagarajan17:02:39

would cljs.js namespace survive :advanced compilation?

thheller17:02:09

no. bootstrapped must use :simple for the entire build and will not work with :advanced

nagarajan17:02:58

How this relates to :bootstrap option in shadow-cljs? is shadow-cljs bootstrap option built on top of this?

thheller17:02:56

yeah it works a bit differently in shadow-cljs as it can pre-compile library code and such. see https://code.thheller.com/blog/shadow-cljs/2017/10/14/bootstrap-support.html

nagarajan17:02:03

Thank you kindly for your help. I had an idea to build something similar to codepen for clojurescript. I would probably need to load the libraries on demand dynamically. I am prepared to write the custom loading logic for provided namespaces. So how should I proceed you think?

thheller17:02:28

things get a bit tricky as soon as there are some JS deps involved

thheller17:02:13

otherwise you just need to provide the proper functions to load the files. not actually sure how all of that works anymore. self-hosted is complicated 🙂

nagarajan17:02:23

I have a rough idea how to implement the loading library codes in the browser. Even with js dependencies I have a prototype working., which loads js from npm (through a third-party service) and functions available. I am now kind of hazy on clojurescript cljs.js part. Can I follow the official doc of the namespace in a shadow-cljs project?

thheller17:02:23

yeah. only the initial "bootstrap" part is different. after that its all the same

nagarajan17:02:42

ok. Official doc said macros are supported. Is there any gotchas in your experience on that?

thheller17:02:49

I have no clue. I have never used self-hosted myself in an actual project. macros did require extra work in the :bootstrap target, not sure how it works if you don't precompile them

nagarajan17:02:01

ok. So, the :bootstrap target is still required if I plan to use cljs.js directly in shadow-cljs project?

thheller17:02:20

you must initially "bootstrap" the compiler by loading the analyzer data for the core namespaces

thheller17:02:51

other CLJS compiles just inline that data as code which makes it much larger than it needs to be

nagarajan17:02:55

ok. Again. Thank you very much for your help. I have enough info to get started

john19:02:25

envy: a little tool that smooths over importing of :closure-defines data from a ClojureScript project's cljs.edn file into an env var that you can use at runtime - https://github.com/johnmn3/envy

👏 5
misha21:02:44

greetings! I can't alias a keyword/symbol in clojurescript, can I? (except creating and requiring ns file)

borkdude21:02:10

In this PR, should one write EventType/NAVIGATE or EventType.NAVIGATE, which one is preferred?

thheller22:02:47

EventType/NAVIGATE is not valid since EventType is not a namespace alias

borkdude22:02:47

oh right 🙂

john22:02:23

@misha I asked the same thing recently. Nah, no alias in cljs yet.

😞 5
jaide23:02:24

Using my favorite js stream lib with cljs, I need a delay function to only emit after a certain amount of time specified in ms. I prototyped it below but I’m curious how it could be refactored\cleaned up.