Is there a way to specify a Clojure flag per build? So then my macros can see it at compile time?

similar to a JVM property, but per build

@currentoor that is generally not a good idea since those flags won't be accounted for in the caching logic

so changing them won't invalidate the cache

what kind of flag do you have in mind though? is that cross-platform macro or just a macro expanding CLJS code?

@thheller I’ve got macros and functions that need to emit different stuff depending on whether I’m targeting the browser or react native

do you have an example?

#?(:cljs
   (defsc ErrorBoundary [this {:keys [body-fn]}]
     {:shouldComponentUpdate    (fn [np ns] true)
      :getDerivedStateFromError (fn [error]
                                  {:error true
                                   :cause error})
      :componentDidCatch        (fn [error info]
                                  (log/error :componentDidCatch (ex-message error)))}
     (let [{:keys [error]} (comp/get-state this)
           error-msg (div :.ui.error.message
                       (div :.header "Error Encountered")
                       (dom/p "Please try again or contact support if error persists."))]
       (if error
         error-msg
         (try
           (body-fn)
           (catch :default error
             (log/error error :render-try-catch)
             error-msg))))))

#?(:cljs (def ui-error-boundary (comp/factory ErrorBoundary)))

#?(:clj (defn error-boundary* [[first-arg :as body]]
          `(let [real-parent# comp/*parent*]
             (ucv.util/ui-error-boundary
               {:body-fn (fn [] (comp/with-parent-context real-parent#
                                  ~(if (css-k? first-arg)
                                     `(divs ~@body)
                                     `(comp/fragment ~@body))))}))))

#?(:clj  (defmacro error-boundary
           [& body]
           (error-boundary* body))
   :cljs (defn error-boundary [& body]
           (throw "Use error-boundary as a macro not a function")))

i can simplify that example if it’s too much

but essentially it’s just a component that catches exceptions in render and renders an error message

one of the major schisms is, in browser i need to use DOM in RN i need to use that other stuff

but ideally i want to re-use components and their queries

I might be blind but what exactly is the react-native specific stuff?

also .. how can you get any work done with all those reader conditionals? my brain hurts from looking at that little snippet

and somehow I'm missing why this is a macro at all?

lol fair enough, sorry for the pain 😅

i’ll come up with something simpler

an actual use is more important, now how it is implemented

so how would you use (error-boundary ...)

(div :.ui.container
  (util/error-boundary :.ui.basic.segment :.ui.middle.aligned.celled.list.massive
    (map ui-tax-list-item (sort-by :tax/title entities))))

it prevents errors from bubbling up

yeah I know about react error boundaries

@currentoor why do you care if it’s react native or not?

but I don't quite know why react-native is different from react-dom

I guess you wouldn’t use div in react-native

^ exactly

@currentoor maybe better than to abstract that part away? for those common components you could have primitives that change according to the build (by using different source paths, with same ns name)

so you could have ui/block instead of dom/div / rn/View, makes sense?

different source paths with the same name? not sure what you mean

ex: src/ui-rn/my_project/ui.cljs, src/ui-dom/my_project/ui.cljs

so the RN build uses the first, the DOM build uses the later, so when importing you get the right one

don't ever use different source-paths, that is absolutely horrible

@thheller what you suggest instead?

proper software architecture ...

sorry .. that different source-paths stuff triggers me 😛

well, in this case, we need a switch depending on the build, and one source has no relation to the other, they are like interfaces in my POV

(also worst, loading the wrong one may break the build)

you can use #?(:react-native (do-one-thing) :browser (do-that-other-things) :cljs (the-default-thing))

yeah I would use reader conditionals

is there a way to define custom ones like this?

shadow lets you define your own yes

https://shadow-cljs.github.io/docs/UsersGuide.html#_conditional_reading

cool, I didn't knew that one 🙂

the only downside I see with that is lock on shadow, I don't mind, but for libraries I wouldn't do that

but in all honesty you should do this properly via application config probably

(def runtime-config (atom {}))

(defn init [] (swap! runtime-config assoc :error-boundary some-fn))

and react-native/browser just initialize differently

@thheller but how to deal with the fact that some required files will be available in one target but not the other? doens't that still require reader conditionals to do :require?

that way you can ensure that react-native specific stuff is only loaded in react-native and so on

heck you could probably do this as part of the fulcro app

reader conditionals are pretty cancer. host specific stuff should be hidden behind protocols or something

and I'm curious, what's about the different source paths that triggers you so much? (asking because I have done that a couple times, and I can't see much problem from it, but I guess you have more context than I do)

names are supposed to be unique

well, they still are, I see them as a "implementation fork", for the compiler there is only one (unless you try to do multiple builds at the same time, which would be crazy with this setup)

@thheller this approach could work for functions but not macros

they aren't unique anymore if you have 2 versions

they might be unique because you only included one but still

@currentoor I still haven't seen why this is a macro?

because it wraps the body in a try/catch

(div :.ui.container
  (util/error-boundary :.ui.basic.segment :.ui.middle.aligned.celled.list.massive
    #(map ui-tax-list-item (sort-by :tax/title entities))))

dunno what those keywords are about though

lol yeah, i should stop trying to have my cake and eat it too

those keywords generate nested divs

with those class names

but you could just as well pass a function that you call within the try/catch

right that’s the syntactic sugar the macro provides

but i agree it’s possible

you can use the macro of course, but that seems like a lot more code than adding # 😉

at risk of triggering you again, @wilkerlucio suggestion is looking attractive

I won't stop you. If that works for you go ahead.

adding RN to a browser project after writing a lot of code is proving cumbersome

@thheller thanks for the discussion, always helpful

oh wait if i do your approach, of putting the error-boundary-fn in the app config, then have the macro use it

then i can have it all without separating source paths

the differences in environment can be encapsulated inside that function and the macro just gives the syntactic sugar

@wilkerlucio @currentoor this is how I would recommend dealing with this https://gist.github.com/thheller/fa044450a6470fdd1afdbcf3f37a65e3

hope that makes sense somehow. the point is that this doesn't require ANY special compiler magic, config or reader conditionals. You just define a "common" shared interface in your code and provide separate implementations when needed

guess I have done too much java with interface too much in the past

I like this solution idea, I would just don't do with records, a map with the fns works the same (I'm the one triggered by records/protocols :P)

yeah pure fns work just fine. I just use protocols whenever something is a bit more stateful

if you already have an env you pass arround anyways (like in pathom) things are even easier since you don't need to "interface" ns

switching :source-paths is of course similar to this as it replaces the concrete implementation without defining an actual interface

just hate juggling source paths and conditional requires and all that stuff

yeah i like this approach too

thanks!

Can we open a browser url just after compilation run?

Has anyone seen this issue with shadow-cljs REPL (CLJS)?

(defn add "Add Two numbers" [a b ] (+ a b))
=> nil
(defn add  [a b ] (+ a b))
=> #'io.example/add

I’m using goog.DEBUG to conditionally run code in dev, but what’s a good way of conditionally requiring something?

I can see the dependencies for this code in the production build, even though the debug code has been removed

@chris547 interesting. works fine in the browser but not in node. not exactly sure why.

@dazld "removed"? conditional requires are only possible with some dirty tricks?

I don’t want development dependencies bundled - something like datafrisk, for example

then don't require them?

heh, but I do want them in dev 🙂

well, how do you require them?

:preloads are meant for stuff like that

you mention strip-type-prefixes

hm, well, the usual way

if you require it elsewhere in the code it is up to you to remove it

code stripping is probably not a good idea, it is kind of a nuclear option that shouldn't be used 😛

(ns foo.bar
  (:require [dev.library :as d]
            [goog :as g))

(defn thing []
  (when g/DEBUG
    (d/some-function)))

ie, in prod, i’d like dev.library and the code behind the DEBUG not to be there

assuming this is the only place dev library is used

or in all places it’s used, it’s behind a DEBUG

likely requires a type hint (when ^boolean g/DEBUG ...)

but the require can't be removed that way

would advanced notice that it’s not being used?

yes and no

(works ok without a hint btw)

if you follow very strict code style then yes

but a lot of code isn't removeable

I suggest running a build-report to see how much is actually included

i just looked at the file sizes

it’s 40kb bigger, gzipped 😞

create a build report, 40kb doesn't mean anything. seems like a regular CLJS build

https://shadow-cljs.github.io/docs/UsersGuide.html#_build_report

that’s a really nice feature, thanks

the dev library is in there 😞

so it wasn't removed

but as I said. you likely need the type hint

it works without yes, but the type hint slightly alters the generated code which means it works better with :advanced

ah hah! ok

but you can easily verify if its actually removed via

(defn thing []
  (when g/DEBUG 
    (js/console.log "thing debug wasn't removed")
    (d/some-function)))

the stuff behind the guard is removed fine

but the require is still bundled

let me give it another go

yes, conditional requires are not possible

(well they are but only with tricks)

what’s the preloads thing you mentioned?

https://shadow-cljs.github.io/docs/UsersGuide.html#_preloads

heh sorry

@thheller - thanks for confirming I wasn't crazy - do you think this is a CLJS or shadow/node issue? I'm new to CLJS and don't know where to start looking

o.O cljs.pprint is 96KB!

@chris547 it is a shadow-cljs issue. can't figure out what though.

@thheller Okay, I'll revert to the previous version that I was using and see if it was working there to try to give a baseline

it wasn't

the comment destroys it. no clue why though.

/**
 * foo
 */
(function() {
  cljs.user.x = function cljs$user$x(a) {
    return a;
  };
  return new cljs.core.Var(
    function() {
      return cljs.user.x;
    },
    new cljs.core.Symbol("cljs.user", "x", "cljs.user/x", -156439873, null),
    cljs.core.PersistentHashMap.fromArrays(
      [
        new cljs.core.Keyword(null, "ns", "ns", 441598760),
        new cljs.core.Keyword(null, "name", "name", 1843675177),
        new cljs.core.Keyword(null, "file", "file", -1269645878),
        new cljs.core.Keyword(null, "end-column", "end-column", 1425389514),
        new cljs.core.Keyword(null, "source", "source", -433931539),
        new cljs.core.Keyword(null, "column", "column", 2078222095),
        new cljs.core.Keyword(null, "line", "line", 212345235),
        new cljs.core.Keyword(null, "end-line", "end-line", 1837326455),
        new cljs.core.Keyword(null, "arglists", "arglists", 1661989754),
        new cljs.core.Keyword(null, "doc", "doc", 1913296891),
        new cljs.core.Keyword(null, "test", "test", 577538877)
      ],
      [
        new cljs.core.Symbol(null, "cljs.user", "cljs.user", 877795071, null),
        new cljs.core.Symbol(null, "x", "x", -555367584, null),
        "cljs/user.cljs",
        8,
        "x",
        1,
        1,
        1,
        cljs.core.list(
          new cljs.core.PersistentVector(
            null,
            1,
            5,
            cljs.core.PersistentVector.EMPTY_NODE,
            [new cljs.core.Symbol(null, "a", "a", -482876059, null)],
            null
          )
        ),
        "foo",
        cljs.core.truth_(cljs.user.x) ? cljs.user.x.cljs$lang$test : null
      ]
    )
  );
})();

thats the JS generated for (defn x "foo" [a] a)

(function() {
  cljs.user.y = function cljs$user$y(a) {
    return a;
  };
  return new cljs.core.Var(
    function() {
      return cljs.user.y;
    },
    new cljs.core.Symbol("cljs.user", "y", "cljs.user/y", 558816894, null),
    cljs.core.PersistentHashMap.fromArrays(
      [
        new cljs.core.Keyword(null, "ns", "ns", 441598760),
        new cljs.core.Keyword(null, "name", "name", 1843675177),
        new cljs.core.Keyword(null, "file", "file", -1269645878),
        new cljs.core.Keyword(null, "end-column", "end-column", 1425389514),
        new cljs.core.Keyword(null, "source", "source", -433931539),
        new cljs.core.Keyword(null, "column", "column", 2078222095),
        new cljs.core.Keyword(null, "line", "line", 212345235),
        new cljs.core.Keyword(null, "end-line", "end-line", 1837326455),
        new cljs.core.Keyword(null, "arglists", "arglists", 1661989754),
        new cljs.core.Keyword(null, "doc", "doc", 1913296891),
        new cljs.core.Keyword(null, "test", "test", 577538877)
      ],
      [
        new cljs.core.Symbol(null, "cljs.user", "cljs.user", 877795071, null),
        new cljs.core.Symbol(null, "y", "y", -117328249, null),
        "cljs/user.cljs",
        8,
        "y",
        1,
        2,
        2,
        cljs.core.list(
          new cljs.core.PersistentVector(
            null,
            1,
            5,
            cljs.core.PersistentVector.EMPTY_NODE,
            [new cljs.core.Symbol(null, "a", "a", -482876059, null)],
            null
          )
        ),
        null,
        cljs.core.truth_(cljs.user.y) ? cljs.user.y.cljs$lang$test : null
      ]
    )
  );
})();

thats (defn y [a] a)

only difference I can see is the leading comment

I suspect it is because of the newline (in the comment)

yeah you're right - it was broken in 2.8.45 too

how did you generate that JS like that?

internal API magic 😉

yeah it is definitely the commend breaking it. fun stuff.

there's teh 1,1,1 in the first one and the 1,2,2 in the second

I just started working on a cljs node backend - but would this potentially break all code running in node (assuming it was documented with a docstring?)

no, only stuff eval'd at the REPL directly

but yeah I need to rethink the REPL code I think. thats what I get for trying to be clever I guess

fix it but thats just another hack

@chris547 should be fixed in 2.8.61

rather dirty fix, will need to think a bit harder about an actual clean fix

So I just wanna check my understanding. shadow-cljs and it's ability to work with package.json essentially accomplishes the same thing you would get using cljsjs libs with :foreign-libs and :global-exports? I'm trying to figure out if I can find some way to get intellisense with material-ui and was thought maybe the cljsjs path would get me that, but from what I've looked at it looks like cljsjs is just another way to package js libraries into your clojurescript app. Is that right?

And is there a way with Spacemacs or Cursive that I could get some kind of autocomplete for material-ui? Something like

(ns your.namespace
  (:require [cljsjs.material-ui :as mui]))
(mui/Grid ...) 

@thheller - Awesome, thank you so much for the fix - I'll update and hopefully will get back to learning more cljs 🙂

@trevor670 I'm not aware of aynthing that would get you autocomplete for JS deps

not sure why you'd think cljsjs would change any of that

Yeah that's what I was worried about, when I stop and think about what that would mean I realize that would be a pretty dramatic accomplishment. It would have to like process typescript .d.ts files to generate all the function definitions and stuff

its just a fact of life that there is no completion for that stuff

There’s experimental support in CIDER for this with the recent clj-suitable completion package but there’s still some rough edges

rough edges .. thats putting it mildly 😛

I'm very new to clojurescript, I initially though cljsjs was something that was more involved (like cljs bindings or something) but I just realized that it's just automating config stuff

But based on what you said, definitely sounds like there isn't something I'm missing then! Wanna use material-ui I gotta just type it in

yeah cljsjs just prepends javascript. doesn't process it in any way

@thheller - looks like it worked! thanks again for being so responsive - your help today and in the past is one of the main reasons I don't bother even looking at anything other than shadow-cljs!