Fork me on GitHub
#clojurescript
<
2018-06-28
>
currentoor00:06:44

is there an easy to get the browser viewport size in cljs? I'm guessing it's possible via google closure, but the docs were confusing

currentoor00:06:15

nevermind, i got it working

(ns ucv.ui.pos.screens.vehicle
  (:require
   [fulcro-css.css :as css]
   [fulcro.client.dom :as dom]
   [fulcro.ui.html-entities :as html]
   [fulcro.client.primitives :as prim :refer [defsc]])
  (:import
   [goog.dom ViewportSizeMonitor]))

(.getSize (ViewportSizeMonitor. ))

currentoor00:06:34

it wasn't working with :require so i tried :import

currentoor00:06:53

still not sure what the rule is for when to use :require vs :import in cljs

dnolen00:06:59

when the namespace is the constructor

👍 4
dnolen00:06:24

goog.dom.ViewportSizeMonitor is the require and the constructor

urbanslug06:06:06

Well I know this is not the place to ask but is Om no longer in use or something?

currentoor18:06:34

@U0NK86WSY check out fulcro it's a well maintained and actively used fork of Om Next http://fulcro.fulcrologic.com/

urbanslug18:06:22

Thanks, I'll look into it. I just started with reagent and want to see how easy it is to sync client and server in some kind of push or pub/sub protocol

currentoor18:06:20

fulcro has a websockets component for stuff like that

urbanslug13:07:01

tanks I just saw this response

urbanslug06:06:42

the examples in the quickstart don't seem to work for 1.0.0-beta1

urbanslug06:06:15

and when I ask in #om I've been the only one talking since tuesday

urbanslug07:06:54

FML version of om was it

urbanslug07:06:59

hmm I hope I will not have to relearn concept to upgrade from 1.0.0-alpha34 to 1.0.0-beta1

urbanslug07:06:32

Also has anyone been able to return a canvas as a component?

urbanslug07:06:37

seems only divs do

urbanslug07:06:56

could try wrap the canvas in div...

deg07:06:18

@dnolen. The gzip'd size is much more reasonable, thanks. (It's about 350K instead of 1.5M). I'm including this library in a transitive dependency in a Luminus-based project. Offhand, I have no idea how to tell my toolchain to gzip the file. I'll search for the answer, but if anyone here happens to know the answer, please jump in.

Marcin08:06:57

Hey everyone, I’m trying to use material-ui in my shadow-cljs project with reagent. I’ve encountered one issue along the way that’s the thing in material-ui docs

<Dialog
          fullScreen
          open={this.state.open}
          onClose={this.handleClose}
          TransitionComponent={Transition}
        >
Transition here is specified like this
function Transition(props) {
  return <Slide direction="up" {...props} />;
}
How should I present it in Reagent?
[:> Dialog {:full-screen true :open @show-login-screen? :on-close #(dispatch [:show-login-screen false])
                   :Transition-component [:> Slide {:direction "up"}]}
This gives me type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: array. When I wrap it with a function, I get Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render.

juhoteperi08:06:01

You need to set provide Transition component as React component, Reagent vector is only understood by Reagent: (r/reactify-component (fn [props] [:> Slide (merge{:direction "up"} props)]))

Marcin08:06:57

That works! Thank you so much!

deg08:06:08

Answering my own question: to enable gzip in a Luminus app, see http://www.luminusweb.net/docs/middleware.html. In short, add [amalloy/ring-gzip-middleware "0.1.3"] to project, and call it from wrap-base in middleware.clj

valtteri13:06:08

@marcinszyszko another option is to omit react->reagent->react adapters completely and provide the react-component to Dialog directly in :Transition-component and provide props with Transition-props

:Transition-component (gobj/get js/MaterialUI "Slide")
:Transition-props     {:direction "up"}

Marcin13:06:33

Oh, that might be better maybe. As with {:Transition-component Slide} it works perfectly, but the previous thing with reactify-component wasn’t triggering the exit animation properly (not sure why). I’ll try your approach here, thank you 🙂

valtteri13:06:04

I think the animation should work similarly with both styles.

Marcin13:06:47

That’s exactly like described in this solved bug here https://github.com/mui-org/material-ui/issues/9116 it might still be the case in some circumstances

valtteri13:06:54

At least to me Slide animation is working fine with both enter and exit. 😮

Marcin13:06:58

This approach works correctly. I used it like this (:require ["@material-ui/core/Slide" :default Slide]) and then

[:> Dialog {:full-screen true :open @show-login-screen? :on-close #(dispatch [:show-login-screen false])
                   :Transition-component Slide
                   :Transition-props     {:direction "up"}}]

valtteri13:06:44

Looks good to me! Nice that you got it working.

👍 4
jmromrell17:06:55

I have the following require in a cljs namespace: [secretary.core :as secretary :refer [defroute] :include-macros true] I am trying to write a macro that will manipulate parameters used in calls to defroute. In another clj macro I wrote I was able to detect those forms by doing a walk with a check like:

(and (list? form)
     (symbol? (first form))
     (= (resolve (first form)) #'defroute))
However, in clojurescript I am getting Unable to resolve var: defroute in this context despite the fact I was utilizing defroute just fine in this namespace before adding this macro. Is there something different about varquotes in clojurescript?

jmromrell17:06:39

I appear to be able to var quote other symbols from the same namespace (e.g. #'secretary/get-config) it's just the macro that appears to be a problem

dnolen18:06:12

there are no (real) vars in ClojureScript so that just isn’t going to work

jmromrell18:06:33

Ah, that explains it. How can I reliably do symbol comparison and match against various aliases such as defroute, secretary/defroute, and secretary.core/defroute then?

jmromrell18:06:56

And not cases where those same symbols have been shadowed to point to something else?

dnolen18:06:56

cljs.analyzer.api/resolve

dnolen18:06:06

you need to pass the magic &env macro param for it to work

jmromrell18:06:41

What exactly is &env? I'm having a hard time finding examples or further documentation

Alex Miller (Clojure team)18:06:15

it’s a magic var made available to macros about its calling environment when macroexpanding

jmromrell18:06:39

Ah, that explains why I wasn't able to poke at it outside of a macro to see what it was

jmromrell18:06:20

I'm still not having luck. Should something like this print the env in which x is called? (defmacro x [] (list prn &env))

achikin19:06:21

How do I use :npm-deps with dependencies like this "@material-ui/core": "^1.3.0", ?

pesterhazy19:06:43

@achikin the keyword is "scoped modules". You might be running into https://dev.clojure.org/jira/browse/CLJS-2633

achikin19:06:20

Thank you! You've saved me a lot of time!

achikin21:06:13

The issue occurs earlier. When I try to add @material-ui/core like this {:npm-deps {"@matrial-ui/core" "^1.3.0"}} the resulting package.json does not have @material-ui/core dependency at all.