This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-08-29
Channels
- # aws (16)
- # beginners (14)
- # boulder-clojurians (1)
- # braveandtrue (184)
- # cider (9)
- # cljs-dev (17)
- # cljsrn (10)
- # clojure (70)
- # clojure-austin (16)
- # clojure-finland (2)
- # clojure-germany (4)
- # clojure-italy (6)
- # clojure-nl (6)
- # clojure-sanfrancisco (2)
- # clojure-spec (5)
- # clojure-uk (60)
- # clojurescript (82)
- # cursive (1)
- # data-science (1)
- # datomic (13)
- # defnpodcast (1)
- # docker (82)
- # figwheel-main (18)
- # fulcro (51)
- # funcool (6)
- # jobs (13)
- # jobs-discuss (5)
- # jobs-rus (7)
- # juxt (2)
- # leiningen (4)
- # lumo (5)
- # mount (1)
- # off-topic (38)
- # pedestal (9)
- # re-frame (13)
- # reagent (16)
- # shadow-cljs (70)
- # spacemacs (5)
- # specter (9)
- # sql (8)
- # tools-deps (2)
- # vim (6)
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
@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/
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.
@sd, I recommend bidi
Are you building an SPA?
@shib.duman I use bidi (with pushy) for SPAs, and found it pretty usable 🙂
I'm just migrating from bidi to reitit, but mostly for bad reasons 😛 https://github.com/metosin/reitit
@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..
does anyone know if there is a dom event that an element calls the first time it is painted to the screen?
curious, how do you grab the position of it?
@idiomancy The example uses react/reagent, not sure how you'd do it differently yet: https://www.pastery.net/dwudyq+nsyers/#nsyers
probably (set! (.-onload js/window) yourfunction)
then memoize/cache the function if you don't want it to reload
not sure if onload is triggered repeatedly, don't know much js
Ooh okay gotcha @coinedtalk. Using the form 3. Seems obvious
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
@njj You have to run the ClojureScript compiler, as that is a compiler option, not a lein
option.
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?
@risinglight I think shadow-cljs is great and a good alternative to Figwheel if you are more comfortable working in the Node/npm ecosystem
Figwheel is also excellent and preferred if you're working with Clojure tooling primarily (lein or the new Clojure CLI tools)
@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
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
@pesterhazy I'm curious, why router5 instead of a clojurescript routing library, like bidi?
@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
I think the idea of just not having to run webpack, and have one less moving part, is appealing
@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.
@risinglight but I’m adding automated testing in a few days 🙂
figwheel finds all your tests and them serves them up at an endpoint and displays them with cljs-test-display
@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
@pesterhazy thanks for pointing out router5 it sounds nice
@bhauman this conference talk is a good explanation of its design: https://www.youtube.com/watch?v=hblXdstrAg0
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.
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
https://github.com/bhauman/figwheel-main/blob/master/src/figwheel/main/async_result.cljc
https://github.com/bhauman/figwheel-main/blob/master/src/figwheel/main/testing.cljc#L146
we're still on lein-figwheel and sidecar. I need to set aside a friday and migrate to the new one
we are through and through a lein
product at the moment. Not sure how trivial it would be to migrate
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.^^ @dnolen, asking to see which style I should prefer for a starter project like cljs-spa-example
Just tried it, ^js/asdf
works same as ^js/router5
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.
How can I make the Ajax call Java or Clojure code rather than merely returning a text file?
@pesterhazy ^js
is sufficient
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
.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
@pesterhazy nice overview, thanks for the explaining about router5
@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