clojurescript 2017-05-14

grounded_sage00:05:53

Is it possible to have react not rerender a component when it lands on the client after rendering serverside? I have a HTML5 video background that is a few levels deep from the page render and I can't seem to stop it from rerendering the video and restarting it. Not quite sure how to do it. I've tried the should component update. For reference I am using Rum. But I have struggled to find information anywhere on teh web regarding this specific use case.

Oliver George01:05:44

I'm struggling with deps.cljs as part of trying to get my app running on the latest clojurescript release

Oliver George01:05:29

Where should deps.cljs live? Where should any associated xxx.js files live? Where should associated extern xxx.js files live?

Oliver George01:05:56

Curently my deps.cljs is at src/cljs/deps.cljs

Oliver George01:05:11

And I have resources/libs/xxx.js and resources/externs/xxx.js

Oliver George01:05:30

My deps.cljs refered to paths like (below) which previously worked but perhaps path relative to resources isn't right. My experiments aren't helping yet.

:foreign-libs
          [{:file     "lib/ui-libs.js"

Oliver George01:05:17

Starting to wonder if it's a windows compatibility issue.

john01:05:30

I'm not familiar with the deps.cljs work. But the dash - is sometimes a red flag.

Oliver George01:05:54

fair point. i can remove that variable easily enough.

Oliver George01:05:37

Time for a lein new mies experiment

Oliver George02:05:13

I retract my wild accusations about windows compatibility. It can work.

Oliver George02:05:37

I couldn't tell you why but it seems to fail once I add a :preloads compiler option.

Oliver George02:05:58

And only when the preload requires one of those foreign libs. Huh.

qqq03:05:24

is there a way to tell Chrome: for the profile named cljs-dev ALWAYS DISABLE CACHE even when debug window / inspector is closed just ALWAYS DISABLE CACHE

thheller04:05:43

@qqq when you serve your CLJS over HTTP you can add a few headers that disable any kind of caching

qqq04:05:37

you mea JS ?

qqq04:05:52

oh wait, so I configure the webserver where all time to live = 0

qqq04:05:56

is that it?

thheller04:05:02

basically

qqq04:05:18

this is really nice, it doesn't even impact other sites

thheller04:05:45

cache-control: no-store, must-revalidate, max-age=0 or something like that

alex-dixon04:05:52

Does anyone have suggestions on how to develop a better understanding of macros in Clojurescript? I have a couple I’ve been working on today that work in Clojure but not CLJS. One problem in particular seemed to be calling a macro from a macro (nesting). In another case I’m completely lost: in a CLJS repl I call macroexpand on a macro I wrote (works in CLJ) and it’s identical to the expansion I’m looking for, but it doesn’t work 😕

thheller04:05:53

@alex-dixon no suggestions on the understanding part but if you have a specific problem/example I can maybe help

thheller04:05:11

one thing to look out for are namespace aliases

alex-dixon04:05:52

(macroexpand
  '(defsub :task-entry
    [[?e :entry/title ?v]]
    =>
    {:db/id ?e :entry/title ?v}))
=>
(def
 task-entry-sub___impl
 {:ns-name 'precept.todomvc.rules,
  :lhs '[{:type :precept.spec.sub/request,
          :constraints [(= ?e (:e this)) (= :task-entry (:v this))]}
         {:type :entry/title, :constraints [(= ?e (:e this)) (= ?v (:v this))]}],
  :rhs '(do (precept.util/insert! [?e :precept.spec.sub/response {:db/id ?e, :entry/title ?v}])),
  :props {:group :report},
  :name "precept.todomvc.rules/task-entry-sub___impl"})

(macroexpand
  '(def-tuple-rule subs-task-entry
    {:group :report}
    [[?e ::sub/request :task-entry]]
    [[?eid :entry/title ?v]]
    =>
    (precept.util/insert! [?e ::sub/response {:db/id ?eid :entry/title ?v}])))
=>
(def
 subs-task-entry
 {:ns-name 'precept.todomvc.rules,
  :lhs '[{:type :precept.spec.sub/request,
          :constraints [(= ?e (:e this)) (= :task-entry (:v this))]}
         {:type :entry/title, :constraints [(= ?eid (:e this)) (= ?v (:v this))]}],
  :rhs '(do (precept.util/insert! [?e :precept.spec.sub/response {:db/id ?eid, :entry/title ?v}])),
  :props {:group :report},
  :name "precept.todomvc.rules/subs-task-entry"})

alex-dixon04:05:05

@thheller Thanks 🙂 The first one is the new macro and the second is the working version

alex-dixon04:05:13

So I think these are identical and yet the first isn’t working. So one question I have is whether macroexpand in a CLJS repl is a reliable source of information

alex-dixon04:05:30

I’m also looking for a development feedback loop for writing macros in CLJS that is fast as the one in Clojure (where I can pretty much just work at the REPL). I’m not able to get reliable results using the setup I have without running figwheel/cljsbuild. Not sure if there’s a better alternative

qqq04:05:47

(defn drop-zone []
  (let [drag-over? (ratom false)]
    (fn [] 
      [:div {:id            "drop_zone"
             :style         {:border     "3px dotted #888"
                             :width      "100%"
                             :height     "100%"
                             :background (if @drag-over?
                                           "#ccc"
                                           "#eee")} 
             :on-drag-enter (fn [e] (reset! drag-over? true))
             :on-drag-over  (fn [e] (reset! drag-over? true))
             :on-drag-leave (fn [e] (reset! drag-over? false))
             :on-drop       (fn [e]
                              (assert false)
                              (. js/window alert "Calling preventDefault")
                              (.preventDefault e)
                              (. js/console log "file dropped"))} 
       [:h4 "1. Drag Problem Here"]])))

In this code, the drag-over/leave works fine. When I drag a file over it, it changes color. However, when I drop the file, the assert false, alert, and preventDefault are not triggered. Insteac, the browser displays the dropped file. How do I debug this?

thheller04:05:15

@alex-dixon looks ok, what kind of errors do you see? which part doesn't work?

thheller04:05:36

not sure what kind of feedback look you are looking for, I develop macros in a CLJ REPL only

thheller04:05:16

one suspicion: does the CLJS namespace have a require for precept.util?

alex-dixon04:05:52

It does

thheller04:05:00

nevermind its quoted anyways

alex-dixon04:05:15

I’m not seeing errors on this one. The functionality just isn’t the same is the only way I can tell currently

thheller04:05:02

looks ok to me

alex-dixon04:05:10

Ok. Thanks for your help. Think I’m too tired to think about it much more right now unfortunately

alex-dixon04:05:17

🙂

john06:05:58

@qqq try adding (.stopPropagation e) as well. Perhaps before the others.

qqq08:05:24

@john: you're goingto love this; the 'correct solution' is to add (.preventDefault e) on DRAG-OVER also. I have n idea why, sinc'e it's a on-DROP action ; but apparently we need to prevent Default on on-DRAG-OVER too

thheller09:05:40

does anyone know if node/webpack have a default to detect whether the script is running in the browser or node? something along the lines of process.env.NODE_ENV?

thheller09:05:51

nvm ... process.browser seems to exist in webpack

binora11:05:42

how are native React classes usually used as props to other native React classes that have been adapted with adapt-react-class ??

binora11:05:53

I am currently using soda-ash ( a reagent adaptation of semantic-ui react). While dealing with sidebar there is 'as' prop that needs a string/function ( a react component). here's what i am doing [sa/SidebarPushable {:as (r/reactify-component [sa/Segment])} [sa/Sidebar {:as (r/reactify-component [sa/Menu]) :vertical true :inverted true :animation "overlay"} [sa/MenuItem {:name "Strategies"} [sa/Icon {:name "puzzle"}]]]]

pesterhazy11:05:28

@binora, usually #(r/as-element [my-component]) does the job

binora12:05:39

@pesterhazy thanks for the quick response. have tried it. doesnt work. had to hack it this way {:as (aget js/semanticUIReact "Segment")}.

pesterhazy12:05:15

pesterhazy12:05:36

that's probably because of some special magic in the component that looks for direct children

pesterhazy12:05:55

reagent probably introduces an intermediary element

binora12:05:41

yes. 'cannot convert symbol to string' was something i faced. anyways, thanks !

thheller12:05:45

I just wrote a thing for all the node / webpack folks out there, looking for any kind of feedback. https://groups.google.com/forum/?fromgroups=#!topic/clojurescript/AGXku7Ous0Y

thheller12:05:06

goal is to make using npm packages as seemless as possible

richiardiandrea16:05:55

@thheller that is great, I will check the gory details as well 😀 do you use shadow-build for compiling?

richiardiandrea16:05:06

Nvm the silly question 😀 of course you do Iam checking the sample

thheller16:05:36

@richiardiandrea yes of course, I know nothing else. 😉

thheller16:05:33

it is basically what you suggested in the webpack thread, it drops the google closure compiler entirely.

richiardiandrea16:05:18

Yes and that is exactly what I was looking for 😀😀 Thanks I will surely give it a go

richiardiandrea16:05:00

Not only that, we basically use js deps only in some project so this is really a good solution here

thheller16:05:22

do you know any other common JS tools people use? I now have webpack and create-react-app examples

thheller16:05:46

hmm maybe something like vue-js or ember

richiardiandrea16:05:36

I am not a js dev at all and learning things, but I happened to need very JS friendly workflows. Another big issue for that is debug. A typical JS dev expects node --inspect to work smoothly. Also we target node not browser.

richiardiandrea16:05:16

I see a lot of people using flow

thheller16:05:28

do you just use plain node? or something like babel?

richiardiandrea16:05:21

Plain node and at the moment experimenting with TypeScript too. It is bleeding edge for Js language features

richiardiandrea16:05:44

I should have said "features"

richiardiandrea16:05:47

Ah ah

richiardiandrea16:05:14

We are investigating TypeScript because of the solid tooling

richiardiandrea16:05:11

I could not defend that against cljs unfortunately 😀 I am so so sad that the REPL is so underestimated in JS land

thheller16:05:13

well if typescript can use require it should just work with this 😉

richiardiandrea16:05:22

Thanks to your experiment I will be able to work on a parallel POC that might overthrow TypeScript 😀

thheller16:05:10

hehe good luck 😉

thheller16:05:39

@richiardiandrea didn't test that before but node --inspect seems to work flawlessly. even has source maps.

thheller16:05:27

too bad the node --inspect doesn't have syntax highlighting for cljs 😞

richiardiandrea16:05:53

Well I think dirac helps with it

richiardiandrea16:05:35

I still need to try it out (with node) maybe @darwin worked some magic in his plugin 😀

darwin16:05:10

dirac does nothing special about codemirror language theme

darwin16:05:30

in other words you should get the same bug/behaviour as in stock devtools

richiardiandrea16:05:52

Ok I didn't even know it was themable

richiardiandrea16:05:24

Ah ok..so we should pr chrome devtools

darwin16:05:39

but I noticed that devtools are missing syntax highligting with node --inspect recently

darwin16:05:45

that is a bug IMO

darwin16:05:59

but before reporting as a bug, one should try it with nightly first: https://github.com/binaryage/dirac/blob/master/docs/node.md#nodejs-version

thheller16:05:07

@darwin it also seems to be missing support for devtoolsFormatters .. at least I can't figure how to register on the node side (since there is no window)

darwin16:05:13

… I mean node.js nightly builds

darwin16:05:29

@thheller goog/global

darwin16:05:46

https://github.com/binaryage/cljs-devtools/blob/master/src/lib/devtools/util.cljs#L96

darwin16:05:04

https://github.com/binaryage/cljs-devtools/blob/master/src/lib/devtools/context.cljs#L5

thheller16:05:16

seriously? ok ... doh.

thheller16:05:44

thx!