Fork me on GitHub
#clojurescript
<
2018-08-29
>
idiomancy03:08:59

so how does one node.js? I only understand cljs in terms of the reagent/figwheel stack. no clue how to import and use npm packages and such in a cljs project

sd04:08:06

@idiomancy not sure if you're trying to consume node libraries, but if you're trying to just do server side stuff, perhaps take a look at https://macchiato-framework.github.io/

sd04:08:55

as an aside, if anyone knows a good client side router that isn't secretary (which doesn't work anymore apparently) I would really appreciate any suggestions.

pesterhazy06:08:47

@sd, I recommend bidi

pesterhazy06:08:25

Are you building an SPA?

manuel07:08:27

@shib.duman I use bidi (with pushy) for SPAs, and found it pretty usable 🙂

miikka08:08:16

I'm just migrating from bidi to reitit, but mostly for bad reasons 😛 https://github.com/metosin/reitit

idiomancy08:08:48

@sd I was basically just trying to use an npm tool via cljs. i gave up on it for now and moved on to other things... speaking of which..

idiomancy08:08:18

does anyone know if there is a dom event that an element calls the first time it is painted to the screen?

idiomancy08:08:12

I basically want to store the initial position of an element when it's loaded

deliciousowl10:08:51

curious, how do you grab the position of it?

deliciousowl12:08:30

@idiomancy The example uses react/reagent, not sure how you'd do it differently yet: https://www.pastery.net/dwudyq+nsyers/#nsyers

deliciousowl12:08:57

probably (set! (.-onload js/window) yourfunction)

deliciousowl13:08:07

then memoize/cache the function if you don't want it to reload

deliciousowl13:08:24

not sure if onload is triggered repeatedly, don't know much js

idiomancy13:08:40

Ooh okay gotcha @coinedtalk. Using the form 3. Seems obvious

exit216:08:58

is there something special I need to do to get npm-deps to install in my project? I have the npm-deps defined and :install-deps true. Running lein deps doesn’t seem to do the trick

mfikes16:08:36

@njj You have to run the ClojureScript compiler, as that is a compiler option, not a lein option.

👍 4
kenj16:08:30

As someone who has only looked at figwheel but keeps reading about shadow-cljs, is shadow worth looking into? Does it do some things better/worse?

daviwil17:08:13

@risinglight I think shadow-cljs is great and a good alternative to Figwheel if you are more comfortable working in the Node/npm ecosystem

daviwil17:08:30

Makes the overall ClojureScript experience much smoother in that case, IMO

daviwil17:08:38

Figwheel is also excellent and preferred if you're working with Clojure tooling primarily (lein or the new Clojure CLI tools)

pesterhazy17:08:56

@risinglight, to compare the two solutions (figwheel+clojure cli vs shadow-cljs) check out this sample app, implemented using both approaches: https://clojureverse.org/t/ann-cljs-spa-example-a-demo-spa-based-on-figwheel-main/2743

👍 8
kenj17:08:45

I actually came across that diff this morning which is why I asked. It looks like being able to do away with the webpack build could be nice if using lots of npm deps

isak17:08:58

@pesterhazy I'm curious, why router5 instead of a clojurescript routing library, like bidi?

dnolen17:08:02

@risinglight I don’t see why the number of npm deps really matters for either approaches for anything serious - shadow does make things a bit easier - but the end result is more or less the same

kenj18:08:13

I think the idea of just not having to run webpack, and have one less moving part, is appealing

pesterhazy18:08:30

@isak, to elaborate a bit, routing is composed of 3 parts: - a simple path parser ("/home" -> {:route :home, :params {}}) - a function that hooks up you code to the HTML5 History API (or sets up a onhashchange listener) - a module that listens for changes and in response causes side-effects (like network requests) and changes to app state (like setting :route in app-db to :home) Existing CLJS libraries cover 1 and 2 well (my favorites are bidi and accountant, respectively) but AFAIK don't really address 3. router5 combines 1-2 but also provides the missing link, 3. The main idea is that the router is a stateful object that a simple switcher component in the view layer can subscribe to. Additionally Router5 provides a framework for registering page lifecycle hooks (on-activate and on-deactivate), and it has the notion of a navigation action moving from a certain page to another, so you can e.g. do transitions differently depending on where you're coming from.

bhauman18:08:40

@risinglight but I’m adding automated testing in a few days 🙂

bhauman18:08:28

figwheel finds all your tests and them serves them up at an endpoint and displays them with cljs-test-display

bhauman18:08:07

and by next week I’ll have the same ability for devcards

bhauman18:08:30

and the tests get automatically rerun on change

pesterhazy18:08:48

@risinglight, I wouldn't think of webpack as another moving part - it's the foundation of JavaScript-land, some of the most relied-upon code in the world. So if you're relying on webpack for npm deps, you're really relying on the primary delivery method for the developers of that library, and of most of its consumers

bhauman18:08:56

@pesterhazy thanks for pointing out router5 it sounds nice

pesterhazy18:08:01

@bhauman this conference talk is a good explanation of its design: https://www.youtube.com/watch?v=hblXdstrAg0

👍 4
dpsutton18:08:42

we're using devcards and cljs-test-display alongside our dev build and it is incredibly nice. tests rerun automatically, i make devcards and then wire up the component into the actual product.

bhauman18:08:06

oh it was your idea!!

bhauman18:08:34

@dpsutton I think you inspired the extra mains feature

bhauman18:08:40

in figwheel.main

bhauman18:08:51

when you told me about your setup

dpsutton18:08:09

oh nice! I wouldn't want to develop without it now

bhauman18:08:09

because its all in one build right?

pesterhazy18:08:18

I'm definitely trying out cljs-test-display this week, I was just talking to my co-worker how much we need something better than lein doo for development

bhauman18:08:26

yeah a much better idea

bhauman18:08:50

hopefully testing is going to be super easy in this next release

dpsutton18:08:54

i wish there was a console mode for it so it could be used in jenkins

bhauman18:08:04

there is now!!

dpsutton18:08:08

get. out

😆 16
dpsutton18:08:21

scrambles to the readme

dpsutton18:08:40

unreleased? i'm on pins and needles though

dpsutton18:08:50

your work is such a boon to the community

dpsutton18:08:59

we're still on lein-figwheel and sidecar. I need to set aside a friday and migrate to the new one

bhauman18:08:20

this only works when you use clj -m fighweel.main --main test.runner

dpsutton18:08:00

we are through and through a lein product at the moment. Not sure how trivial it would be to migrate

bhauman18:08:13

shouldn’t be hard at all

bhauman18:08:47

I think everything is in place

bhauman18:08:59

and if you have questions hit me up on #figwheel-main

dpsutton18:08:00

well i'll try later this week

dpsutton18:08:11

you are the man @bhauman

pesterhazy19:08:51

A question about externs: While adapting cljs-spa-example for advanced compilation, I followed the Externs Guide and added a type annotation like so:

(.usePlugin ^js/router5 router :somethin-else)
This raises two questions: First, although adding this annotation works, I'm not actually sure that js/router5 is the right type for this object. In fact AFAIK not every object in JavaScript has a class that you can point to. Second, @bhauman mentioned that you can also use a generic annotation, ^js/Object. In fact that works as well: https://github.com/pesterhazy/cljs-spa-example/pull/10/files Generic type hints aren't mentioned in the guide, however, so I'm wondering if there's any downside to just hinting interop sites with ^js/Object across the board.

pesterhazy19:08:15

^^ @dnolen, asking to see which style I should prefer for a starter project like cljs-spa-example

pesterhazy19:08:11

Just tried it, ^js/asdf works same as ^js/router5

Ramzi19:08:53

From a new reagent template, I am able to create an input which successfully makes an Ajax call and retrieves a text file that's in a folder on my Jetty server.

Ramzi19:08:20

How can I make the Ajax call Java or Clojure code rather than merely returning a text file?

dnolen20:08:13

@pesterhazy ^js is sufficient

annarcana20:08:06

Hey all! Working on building a CLJS template for Glitch with Lumo, and having trouble figuring out how to work with NPM modules. I seem to be following things right but I get run time errors trying to require things. Like this:

Uncaught Error: Undefined nameToPath for hyperapp
    at visitNode (base.js:1357)
    at Object.goog.writeScripts_ (base.js:1369)
    at Object.goog.require (base.js:706)
    at (index):24
Current code is here, would welcome pointers: https://glitch.com/edit/#!/wise-feet Build script is in build.cljs.

alvina11:09:41

Error: spawn /rbd/pnpm-volume/badc8aa7-db5b-4b52-b743-e384e19108d2/node_modules/.http://registry.npmjs.org/lumo-cljs/1.9.0-alpha/node_modules/lumo-cljs/bin/lumo ENOENT at _errnoException (util.js:992:11) at Process.ChildProcess.handle.onexit (internal/childprocess.js:190:19) at onErrorNT (internal/child_process.js:372:16) at combinedTickCallback (internal/process/nexttick.js:138:11) at process.tickCallback (internal/process/nexttick.js:180:9) at Function.Module.runMain (module.js:695:11) at startup (bootstrap_node.js:191:16) at bootstrap_node.js:612:3

dnolen20:08:48

@jarcane might also want to ask in #lumo

annarcana20:08:12

Yeah, I posted there as well

isak21:08:29

@pesterhazy nice overview, thanks for the explaining about router5

martinklepsch21:08:31

@sd re your client side routing question: I used bide for some stuff recently and found it pretty nice. Straightforward setup. Just hooks into JS' History API and mostly just gets out of the way. https://github.com/funcool/bide

hlolli21:08:43

In two recent cljs projects Ive used react-router. Works with SSR and browser without any headaches, [:> Link {:to ... }] would be the replacement for anchorlinks.