Fork me on GitHub
#clojurescript
<
2017-11-08
>
royalaid03:11:42

Hey all, trying to use polyfills, specifically https://github.com/andyearnshaw/Intl.js/, from npm with CLJS in a cljc file. I am requiring with the form

(ns time-align.utilities
  (:require [clojure.string :as string]
            #?(:cljs [cljsjs.moment-timezone])
            #?(:clj [java-time :as t])
            [clojure.pprint :refer [pprint]]
            #?(:cljs [intl :refer [Intl]])
            ))
and am wondering why when I load the page I get the error Error: Undefined nameToPath for intl

royalaid03:11:20

I googled around a bit and wasn't able to find anything alluding to a fix so any ideas would be greatly appreciated

Oliver George04:11:32

I'd like to dynamically generate some variables from a map in clojurescript.

Oliver George04:11:12

My use case is something like the joy of clojure debug code but for clojurescript.

Oliver George04:11:38

Problem I had was that a macro writing a (def ...) doesn't evaluate the symbol for the var.

Oliver George04:11:06

I ended up with this solution: track symbols at compile time and use list for macro which generates defs

Oliver George04:11:08

(ns can-i-spy.dbg
  (:require [clojure.spec.alpha :as s]))

(declare dbg-meta)

#?(:clj (defonce dbg-meta (atom {})))

#?(:cljs (defonce dbg-data (atom {})))

(defmacro spy
  [k]
  (let [symbols (keys (:locals &env))
        locals (zipmap (map (fn [sym] `(quote ~sym)) symbols) symbols)
        location (-> &form meta)]
    (swap! dbg-meta update k conj {:location location :symbols symbols})
    `(do (swap! dbg-data update ~k conj {:location ~location :locals ~locals}) nil)))

(defmacro locals
  [k]
  `(:locals (first (get @dbg-data ~k))))

(defmacro post-mortem
  [k]
  (let [{:keys [symbols location] :as data} (first (get @dbg-meta k))
        def-sym (fn [sym]
                  `(let [m# (first (get @dbg-data ~k))
                         val# (get (:locals m#) '~sym)]
                     (def ~sym val#)))]
    (s/assert (s/coll-of symbol?) symbols)
    (s/assert map? location)
    `(let [m# (first (get @dbg-data ~k))]
       (do (println "Set up post-mortem of line" (:line (:location m#)) "of" (:file (:location m#)))
           (println "Symbols: " ~(pr-str symbols))
           [email protected](map def-sym symbols)
           m#))))

Oliver George04:11:54

(this is basically a super simple version of https://github.com/vvvvalvalval/scope-capture (can't get that to work in my cljs environment)

val_waeselynck08:11:57

@U055DUUFS Can you tell me more about your CLJS environment? I'd like to help you get it to work 🙂

val_waeselynck08:11:45

I've been planning to add more documentation to ease CLJS setup, this kind of real-world feedback would be super useful

Oliver George09:11:35

Hi. I'd love to use it too. Just can't seem to do even the basic things.

Oliver George09:11:56

I'll set up an example repo. Should be quick. Last try was using "lein new figwheel"

Oliver George09:11:48

I'm running with lein figwheel

Oliver George09:11:05

If I add in (sc.api/spy ...) based on the tutorial example I get the first error.

Oliver George09:11:34

api.cljc?rel=1510132767767:10 Uncaught Error: Invalid arity: -1
    at sc$api$spy (api.cljc?rel=1510132767767:10)
    at core.cljs?rel=1510133529150:27
    at core.cljs?rel=1510133529150:40

Oliver George09:11:46

I've pushed a third commit which generates that error.

val_waeselynck09:11:33

@U055DUUFS thanks, will have a look and come back to you.

val_waeselynck12:11:51

@U055DUUFS I made a pull request that fixes the issue in your project. The problem was that, since spy is a macro, you need to require it with special CLJS syntax for macro, e.g (:require [sc.api :include-macros true])

val_waeselynck12:11:54

I realize it may not be obvious from scope-capture's README; I plan to include some example projects (including Figwheel) to show how to add scope-capture to a project (using a Github diff). Hopefully that with smooth off the rough edges.

Oliver George20:11:23

Thanks. I'll give it a try.

Oliver George21:11:38

You probably know this but you can arrange things to avoid that sometimes. http://blog.fikesfarm.com/posts/2016-03-01-clojurescript-macro-sugar.html

val_waeselynck22:11:09

@U055DUUFS Ha, cool, will try that

Oliver George23:11:02

Working like a charm. Thank you. Really excited to use this for debugging.

val_waeselynck14:11:09

@U055DUUFS made the suggested change in the 0.1.4 release

Oliver George23:11:20

Great. I'll give it a try.

Oliver George23:11:47

Yesterday I finally used scope-capture in anger and it was perfect. Really nice to be able to work with local vars like that.

Oliver George23:11:58

Thank you for making CLJS land a nicer place to be

Oliver George23:11:38

(That link I sent you is the only documentation I know of related to that. Seems like it should be on http://clojurescript.org somewhere)

fabrao11:11:43

Hello all, I´ve read this https://clojurescript.org/news/2017-07-12-clojurescript-is-not-an-island-integrating-node-modules for using with this

:npm-deps {"react-md" "1.2.4"} :install-deps true
, but I didn´t understand how to use it in
:require
and use it with js/ . Can anyone that used it help me to understand how to use it in clojurescript project?

thheller11:11:08

(:require ["react-md" :as md]) … then in your code md/thing, eg. md/Card

grav11:11:33

Anyone using libs from nervous-systems? Eg fink-nottle, cljs-lambda, etc

vemv12:11:56

Hey there, in case someone knows how to debug this: A clojure macro occasionally causes a cljs compilation error. This macro requires cljs-react-test.simulate (a clojure namesmapce). That normally works, but I get a compilation error once in a while. When it fails, (require '[cljs-react-test.simulate :as sim-clojure]) in JVM clojure repl will fail: CompilerException java.lang.Exception: namespace 'cljs-react-test.simulate' not found, compiling:(*cider-repl horizon*:8:41) Even in those cases when it fails, cljs-react-test/cljs-react-test/0.1.4-SNAPSHOT is in the classpath (checked via ps aux). That's the most puzzling part - how come you cannot require a plain Clojure ns that is in the classpath?

raymcdermott13:11:18

looking for some advice (lazy me) on what folks do to avoid CORS issues when running on localhost

raymcdermott13:11:56

is there a simple proxy for serving web apps / routing to the localhost server?

raymcdermott13:11:29

[ this is a well-known / supported nodejs pattern ]

raymcdermott13:11:34

I want to avoid CORS entirely … the deployed app will be on the same domain as the server

raymcdermott13:11:06

(served from S3, routed to app via CF if you want the messy details :)

raymcdermott13:11:01

so the goal is for the browser SPA to communicate back to a proxy that then forwards the requests to the localhost server

raymcdermott13:11:34

I should have said SPA rather than web app

raymcdermott13:11:35

this is probably it

risto13:11:04

does anyone know how the :output-to and :output-dir paths work?

risto13:11:16

i'm trying to set up figwheel with nodejs, but the temp files end up pointing to the wrong thing, like if it's :output-dir "backend/out", it'll complain that it can't find some goog file in /../backend/out/backend/out/...

risto13:11:57

i don't know what i'm doing wrong.. i looked at the docs but i don't know how clojure (or figwheel) is resolving paths

fbielejec13:11:46

@risto:

:output-to "backend/backend.js",
:output-dir "backend"

raymcdermott13:11:32

also seems like figwheel has the option to install a :ring-handler so that should be perfect …. anyone else using figwheel like that?

risto13:11:55

@fbielejec that's what I have right now, but it doesn't work

fbielejec13:11:50

@risto try adding

:target :nodejs
:optimizations :none
:source-map true

risto13:11:57

yeah I have those too

risto13:11:47

I copied it from a smaller example I have that's working, so I have no idea why it doesn't work in this case

risto13:11:58

the names are just different

fbielejec13:11:11

do you have :source-paths ["src"] defined?

risto13:11:43

this is what I have:

{:id "backend-dev"
                :source-paths ["backend"]
                :figwheel true
                :compiler {:main avcado.server.core
                           :output-to "backend_out/foo.js"
                           :output-dir "backend_out"
                           ;:foreign-libs [{:file "backend/src"
                           ;                :module-type :commonjs}]
                           :target :nodejs
                           :optimizations :none
                           :source-map true }}

lovuikeng13:11:59

@raymcdermott sorry, commomly we like to handle not to avoid 😞

risto13:11:28

with backend/avcado/server/core.cljs being a hello world thing w/ ns avcado.server.core

fbielejec13:11:59

you sources paths points to a wrong dir

raymcdermott13:11:13

@lovuikeng np … in my case I control the client and the server so I don’t need / want to fuss with CORS

fbielejec13:11:23

@risto move it outside of :cljsbuild and point to "src", I'm assuming you're using a default name

fbielejec13:11:18

@raymcdermott I used a compojure handler in a figwheel for a while, what do you need to know?

fbielejec13:11:51

we ditched it though and just have an nginx server build by docker-compose to have a production-like environment

risto13:11:10

i have a simple hello world app that looks almost the same and works fine, i'm wondering why it's different in this case

risto13:11:26

why does it need to point to "src"? the example im copying from points to "server_src" and works ok

raymcdermott13:11:50

we have that too … problem is that if you serve via figwheel and make AJAX requests to localhost:5000 you get CORS errors

raymcdermott13:11:04

how do you avoid that on a local box?

raymcdermott13:11:16

or do you serve from the NGINX?

raymcdermott13:11:34

we (in prod) will serve from S3

fbielejec13:11:01

right now we serve /resources/public from nginx

raymcdermott13:11:20

I’m looking at Bruce’s example server handler and it seems to have the hooks I need

raymcdermott13:11:35

I can add a proxy middleware

fbielejec13:11:09

you can mount /resources/public, define nginx server and pretend it's S3

fbielejec13:11:33

works quite well

raymcdermott13:11:56

and does that integrate with figwheel?

fbielejec13:11:31

it's actually parallel to figwheel

fbielejec13:11:51

figwheelwill still react to changes and update the compiled sources

raymcdermott13:11:57

ok I see … I think I’m going to futz around with the figwheel only solution first but might hit you up if I run out of road … thanks for the support

fbielejec13:11:43

I'll be on 15 at functional Leuven meetup 😉

raymcdermott13:11:47

where are you?

Miloslav14:11:03

hi everyone!

Miloslav14:11:14

could anyone please help me with routing?

Miloslav14:11:13

I use bidi and pushy. Router and links work just fine, but external links like keep getting me 404

Miloslav14:11:40

it seems like I can get to pages inside my app only

Miloslav14:11:09

how do I get external links to work? It's also popular topic in react

noisesmith14:11:11

how would you route a url that doesn't point at your app? are you trying to redirect or link out to other pages and failing?

noisesmith14:11:27

like, a url that isn't in your app should never hit your app's router

risto14:11:34

figured out the issue, i wasn't running it from the project root, so the path wasn't resolving properly

Miloslav14:11:10

assume that is my app, but any other links is 404 even if they work. It seems like that's popular client-side routing issue

Miloslav14:11:20

@risto yep, that's that

Miloslav14:11:17

it seems like I need some server side things to tell the server that it should always return one page

Miloslav14:11:25

and not to look up for any other

Miloslav14:11:41

but then any external link will lead to the home page

noisesmith14:11:20

if you don't want a request to hit the server, the simplest thing is to put the changes in the fragment

Miloslav14:11:25

i need to pass the whole path to my client-side router some way?

noisesmith14:11:33

otherwise you need javascript hacks to override what changing the url does

noisesmith14:11:40

the http spec says changes after a # in the url don't invoke requests to the server, so many of us address this by putting all routing changes that are meant to stay in-app in that fragment

Miloslav14:11:20

yes, but my links work just fine inside my app

Miloslav14:11:38

but only inside my app. Any external link is getting me 404

noisesmith14:11:27

are the links absolute or relative or protocol-relative?

noisesmith14:11:06

if the actual text of the href is "http://my-domain.com/somepage" - that looks like a broken relative link to me

Miloslav14:11:52

i don't know. If I have the link to somepage in my app, it works just fine and there's actual text in address bar

Miloslav14:11:07

but is I type it, it doesn't work, and figwheel is getting me 404

noisesmith14:11:57

sounds like goog.history or some other browser bar related lib is being used incorrectly - maybe someone else has experienced the issue and can help more?

Miloslav14:11:10

i thought that goog.history was incapsulated by pushy or bidi

noisesmith14:11:55

OK - sure - but it sounds to me like it's being misused (or you need some backend help to make this case work) - I avoided all these issues by not doing any url bar magic, using # for all in-app routing. if in-app routing is overriding the usual usage of the url bar, then to support typing into the url bar or even someone hitting refresh or bookmarking, you need to support that on the back end surely

sundarj14:11:22

yeah to have the app use normal urls you need a route on the server like GET * -> index.html

noisesmith14:11:44

when we designed our app, I made our first priority that hitting refresh, or the back button, or using a bookmark, would always work

noisesmith14:11:05

because it's easier to maintain that from the start, than it is to take a system where those things are broken and make it work

fbielejec14:11:11

Hello everybody, I'm looking for possible solutions to handle document meta/head/title tags, dynamically. Either from reagent components and maybe on specific events. Basically researching the topic

madstap15:11:11

@melvoloskov Yeah, when using pushy you still need the server to route all requests to where your app lives. Netlify (no affiliation) is a static site hosting where you can do this nicely and easily, if you have a static site SPA that just talks to different apis and no traditional server. For local dev you can use compojure with (GET "*" [] ,,,).

grzm16:11:19

I'm trying to track down where *target* might be getting redefined. I'm compiling with :target :nodejs, yet in finding *target* to be "default" when testing. :optimizations is :none

grzm16:11:18

grepping the code for *target* (both the clojurescript source and the project code) doesn't reveal any assignments/rebindings from what I can see.

grzm17:11:28

looking at cljs.stacktrace/mapped-stacktrace (https://github.com/clojure/clojurescript/blob/master/src/main/cljs/cljs/stacktrace.cljc#L605-L640), it's arguments are stacktrace (AIUI, a stacktrace parsed via parse-stacktrace), and sms, which appears to mean "source-maps". I'm looking for clarity on this second sms argument: how do I (dynamically, at runtime) determine the appropriate value of sms?

bcbradley19:11:11

is anyone here aware of https://github.com/exupero/vdom ? It only seems to do one thing (rendering) rather than more than one (rendering, state management); seems like a less complected alternative to reagent or om.

grzm20:11:43

@bcbradley I think you're right in thinking it might be less complected. Is there a reason you don't find the state management aspects of om/reagent compelling?

bcbradley20:11:03

@grzm i did like reagent's ratoms at first glance but If I have to be honest with myself i tend to think that clojure already has terrific ways in the core language to manage state and keep it from making things complex on you

grzm20:11:45

I think one of the other value propositions for om/reagent is that they're building on React, which has a very active community. If you don't find that attractive, I see no reason why you shouldn't try to build on vdom instead.

bcbradley20:11:14

I like React for its active community too, but some of the things React has done were inspired by clojure

bcbradley20:11:32

at first they tried making all React components just basic objects that inherit from a base class

bcbradley20:11:41

and with local state-- a very object oriented approach to things

bcbradley20:11:21

Clojurescript demonstrated through Om that they could be faster with React that javascript could be, because all state could be pulled up into an immutable data structure at the top level

bcbradley20:11:37

so the React community mimicked that, and added "functional components"

bcbradley20:11:35

Reagent actually does something React doesn't do-- it doesn't encourage you to collect your state in one place at the top level in an immutable data structure-- it offers you ways to spread state throughout your program in Ratoms, and then have the views update automatically based on when and how those ratoms change

bcbradley20:11:15

I feel like everyone is missing the forest for the trees

bcbradley20:11:39

the only reason we had to create React in the first place is because the stateful nature of the browser Dom makes it error prone to work with. The only reason the Dom exists the way it does is because when it was created people thought the answer to the question "Can't we just create a new Dom every time something changes?" was "No, that is too inefficient."

bcbradley20:11:58

We should revisit that question, and I think that is what v-dom actually does.

Olical09:11:55

I'm in the middle of a project right now that may interest you when I'm happy with it. https://github.com/Olical/bonsai It's not a virtual DOM, it's a declarative data -> DOM renderer with some basic hooks into some state management, but with room for you to ignore it or apply your own opinions. It'll be a while before I'm done yet, but it's the tool I want to use within ClojureScript.

bcbradley17:11:04

It looks pretty interesting!

markwoodhall20:11:23

Hi Everyone, is there something obvious I am overlooking when comparing the result of (apply interleave [[1 2 3]]) across Clojure and ClojureScript? Clojure returns (1 2 3) as I would expect but ClojureScript returns ().

thheller20:11:28

cljs also return (1 2 3)

dpsutton20:11:12

i get (1 2 3) as well

grzm20:11:14

@bcbradley As I understand it, both reagent and om pretty much only utilize React's rendering and add state management on top of that. So to me it looks like the question you want to answer is what state management you'd like, and whether you prefer React's rendering over vdom's.

markwoodhall20:11:05

Thanks @thheller @dpsutton, what version of ClojureScript?

chris20:11:43

I'm on 1.9.908 and it's working for me as well

chris20:11:47

what version are you on?

markwoodhall21:11:08

Not sure why but I was using 1.9.93, bumping to 1.9.908 fixes the issue.

markwoodhall21:11:55

I did try bumping to 1.9.946 but got some issues with ##NaN reader literals.

thheller21:11:36

probably an old conflicting tools.reader dep, core.async is a common cause

markwoodhall21:11:34

Thanks, will check it out.

thheller21:11:20

easy fix is just adding [org.clojure/tools.reader "1.1.1"] to your deps