This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-08-28
Channels
- # beginners (79)
- # boot (24)
- # cider (5)
- # clara (5)
- # cljs-experience (5)
- # clojure (126)
- # clojure-greece (5)
- # clojure-italy (3)
- # clojure-losangeles (1)
- # clojure-russia (1)
- # clojure-spec (21)
- # clojure-uk (31)
- # clojurescript (151)
- # community-development (20)
- # cursive (25)
- # datomic (24)
- # flambo (1)
- # fulcro (312)
- # graphql (10)
- # hoplon (20)
- # juxt (2)
- # keechma (6)
- # leiningen (7)
- # luminus (4)
- # om (4)
- # onyx (7)
- # parinfer (24)
- # protorepl (1)
- # re-frame (7)
- # reagent (13)
- # shadow-cljs (19)
- # spacemacs (14)
- # specter (14)
- # uncomplicate (22)
- # unrepl (1)
O…kay, I feel… like I am losing my mind. I must be doing something derpy. I must. But what?
But if I jack in a cljs repl and try to eval a namespace, I get Namespace project.foo not found
I have a project, baboon
. I have a namespace, baboon.math
, and another, baboon.shapes
.
If I open baboon.math
and evaluate it, it evaluates just fine. No errors. Not a peep. I can change the namespace of my repl to it, call functions. Everything is ducky.
If I open baboon.shapes
and evaluate it, I get java.lang.IllegalArgumentException: Namespace baboon.math does not exist
I’ve got clj and cljs in the same project, set up like so:
$ tree -L 2 src/
src/
├── clj
│ └── baboon
└── cljs
└── baboon
$ tree src/
src/
├── clj
│ └── baboon
│ ├── config.clj
│ └── server.clj
└── cljs
└── baboon
├── core.cljs
├── math.cljs
└── shapes.cljs
I did not apprehend that the two source-paths
were different — I assumed the CLJS one was a contextual override of the CLJ one.
@gastove it’s definitely confusing since cljsbuild :source-paths
doesn’t augment Lein :source-paths
Are there any articles on how to introduce ClojureScript into an existing React application?
It shouldQ
Thanks for the help
@josh_horwitz not really since introducing ClojureScript into an existing JS application period is not particularly straightforward
Thanks @dnolen
Trying to figure out best way to do this, we use Clojure on our backend but I'm trying to convince our front end team to start using ClojureScript
but we can not rewrite the entire app
@josh_horwitz it might become more straightforward in the future when we can build most things out of node_modules
but if you have a JS ecosystem heavy tooling thing going on you will have to be a bit patient
there’s just a ton of work to do and the lack of simplicity and standardization in the JS build system isn’t helping much 🙂
That's for damn sure lol
Well any help I can be @dnolen let me know how I can help, we are very JS ecosystem heavy currently
@josh_horwitz experiment with :npm-deps
and give feedback about that
@josh_horwitz you can look at this example that @thheller put together for using cljs code in create-react-app https://github.com/thheller/shadow-cljs-examples/tree/master/cljs-react-app
@shaunlebron the caveat about shadow-cljs is that it doesn’t intend to support advanced compilation right?
I don’t know enough about it to say
pretty sure it doesn’t if you’re going to generate stuff that JS tooling can understand
@josh_horwitz worth playing around with shadow-cljs but know that a lot of ClojureScript libs do get written in mind that DCE and very sophisticated minimization is at play
I know it was a problem that he faced, and I’m pretty sure he said he got it working, i’d have to dig around or wait for his answer
might be some context here: https://github.com/thheller/shadow-cljs/issues/24
Thanks guys for the help, I'll dig into
:npm-deps
@dnolen and see how it goesI'm also wondering if I could build out a new feature and ship it along side the current JS app as perhaps a first entry to show the team cljs
@shaunlebron ah ok, looks like it got sorted with the expected caveats (externs yada yada) - thanks haven’t been following shadow-cljs very closely
@josh_horwitz yes you can, we have both JS and CLJS apps running together. CLJS app is using React and many other libs bundled within JS bundle.
@josh_horwitz the other options is to make your existing app a foreign lib and write some bits in ClojureScript - that’s probably the most popular way to go
Just don’t forget to alias cljsjs
React namespaces to use React from JS bundle (it should be exposed globally, the easy way)
@josh_horwitz still to be very clear to set expectations - supporting JS tooling is just not a priority and that will never ever really be a goal
existing projects with very, very complex Webpack, Babel setups are just way outside our interest
@dnolen Thanks , I agree, I have no interest in that either lol, just the current state of affairs
Almost used more as a convincing piece of evidence once some ClojureScript can be shown and how great it is
@josh_horwitz another route might be using ClojureScript for UI testing?
you could easily integrate devcards, Figwheel hotloading without affecting the rest of your app
That's a great idea
@josh_horwitz part of the goals for shadow-cljs
was integration into existing JS tooling (eg. webpack). if you already have a JS setup then shadow-cljs
should be easy to integrate
thatnks @thheller , I'll take a look at that later today!
:advanced
works so the overhead is minimal, :npm-deps
is the other path which should be better in theory. in practice however there are many speedbumps when importing JS code through closure so YMMV. it also requires rebuilding your entire toolchain.
I know for me and my experience, when trying to introduce something new to an exisiting JS team, the least amount of speedbumps the better it is received, and the least work they have to do
I made this teaser a while back. zero config integration with create-react-app
(which includes webpack
), so it is pretty smooth
That looks great @thheller , I'll have a chance later tonight to take a look at it
I would suggest posting questions to the issues list or even http://clojureverse.org/, to make sure people following the same path may found results with Google, rather than asking again on Slack
@jiyinyiyong this is a wonderful idea, I did not know we had an old-style forum available
actually there's quite something in https://github.com/thheller/shadow-cljs/issues back in the past months thheller was adding features to shadow-cljs. some features are not documented well, but can be found inside issues list.
I'm using the cljs-ajax library in my project - and when I build with :target :nodejs and try to use it in my node app I get "Cannot find module: "@pupeno/xmlhttprequest". According to their change log I need to just npm install it but that doesn't seem to be working. Not sure what I might be doing wrong
Hello! I’m a new member here, but I’ve been dabbling with Clojure for a year (thank you @mtnygard!), and after months of lurking, I tried my first ClojureScript project two weeks ago (because of the @ajpierce article on “up and running in 60 seconds”). Holy cow, I’ve been having more fun programming the last several weeks than I’ve had in years! I’ve been absolutely dazzled by it. For fun, I rewrote an app I did in JavaScript/TypeScript, and am dazzled by how quickly pieces of it are coming together. I want to write a blog post on my experiences, and I will have some thoughts on how to improve developer first experiences (e.g., better error messages when using out-of-date node.js version). But I’m now at total standstill trying to deal with my first “cljsbuild min” so I can push to Heroku. I’m using the node.js module twitter.text (https://github.com/twitter/twitter-text), which does things like character counting, tweet rewriting to insert links on hashtags/URLs, etc.. In project.clj, I have:
:npm-deps {:twitter-text "1.14.7"}
Everything works on dev builds, but when I do a “min build” that uses Closure Compiler, I get this run-time error in the browser.
app.js:993 Uncaught SyntaxError: Invalid regular expression: /()()(?!\uFE0F|\u20E3)(**)/: Nothing to repeat
at RegExp (<anonymous>)
at Y0 (app.js:993)
at app.js:998
at app.js:3164
It looks like Closure Compiler is mangling the regular expression, making it invalid. Here’s what I’m pretty sure is the relevant line of code in the twitter-text node_modules: (i.e., I tried modifying this code to remove “(?!\uFE0F|\u20E3)“, and it did change the error message...)
vi node_modules/twitter-text/twitter-text.js:88
twttr.txt.regexen.validHashtag = regexSupplant(/(#{hashtagBoundary})(#{hashSigns})(?!\uFE0F|\u20E3)(#{hashtagAlphaNumeric}*#{hashtagAlpha}#{hashtagAlphaNumeric}*)/gi);
Does anyone have any advice on what I can do, or a work-around so that my code can run? I.e., is there a way to have Closure Compiler not touch “twitter-text” npm module?
Thank you so much in advance!!!@genekim Instead, try to use twitter-text as a foreign library: https://clojurescript.org/reference/compiler-options#foreign-libs
@genekim Do you have a link to that article up and running in 60 seconds?
Thanks @mfikes! (and Planck is amazing! :) I will try it out in a couple of hours — stoked that there may be a way to make this work! @josh_horwitz The @ajpierce article is here: https://ajpierce.github.io/posts/react-figwheel-npm-2/
@genekim Another alternative to try (presuming that the twitter-text code is indeed Closure-compatible, but just not using ES3) is to set the :language-in
option to something appropriate https://clojurescript.org/reference/compiler-options#language-in-and-language-out
^ I think the docs there are incorrect in referring to the closure library; it should be referring to the compiler.
@mfikes Thx for tip, but giving up trying to make node-js or foreign-libs work.. Just included it in the html source, which turned out to be surprisingly easy to do! (Now grinding away, trying to get the externs right. :) I’ll revisit this “later”. 🙂
@genekim fwiw, it’s probably worth trying @mfikes suggestion as it might just work - one line change to your compiler options - figuring externs on your own is pretty tricky if you haven’t done that before
@dnolen I tried @mfikes suggestion, but I couldn’t get it running in figwheel — I got an error like “couldn’t find ‘twitter-text’ namespace… I had in project.clj:
:foreign-libs [{:file "./resources/public/js/twitter-text.js"
:provides ["twitter-text"]}]
and in events.cljs (or whatever), I had:
(:require [reagent.core :as reagent]
[re-frame.core :as re-frame]
[cljsclient.db :as db]
[twitter-text :as twitter-text]
I suspect I got something wrong? And thank you!@genekim There should be no need to alias a namespace to itself, but that’s probably unrelated
(PS @dnolen : I was watching your video from 2013 on core.async when you were at NYTimes [an amazing org, by the way!] Was absolutely dazzled by how lovely core.async is… Thx for all your amazing work and outreach. I’m sure you get that all the time, but wanted to mention it here. :)
@genekim Nah… (:require [twitter-text :as twitter-text])
can be (:require [twitter-text])
Ah! @mfikes got it… I’ve got a meeting I need to run to, but trying to find quickly regenerate the error so I can post it here. 🙂
@mfikes @dnolen Thanks for preventing me from going down extern hole. 🙂 Here’s screenshot of the error I got with foreign-lib approach.
right so it just looks like a bug perhaps in your code? You didn’t get a compiler warning?
“twitter-text” is defined in project.clj, and is “required” in a cljs.source file…
(defn compute-tweet-chars-remaining
" given a string, compute the number of chars remaining allowed"
[text]
; (let [remaining (- 140 (js/twttr.txt.getTweetLength text))]
(let [remaining (- 140 (twitter-text/getTweetLength text))]
remaining))
(sorry, I need to step out for a couple of hours. Thx in advance for any help, all!!!) I’ll be so happy when I can get this to work! 🙂
so :provides
makes synthetic names, while :global-exports
links this name to the actual exported vars?
@dimovich you don’t need to use global-exports
in this case
your foreign lib doesn’t declare any variables in the global scope
that shouldn’t matter
I’m trying locally
works for me
(ns foo.core
(:require jsutils))
:foreign-libs [{:file "esrc/lib/utils.js"
:module-type :es6
:provides ["jsutils"]}]
which version of ClojureScript are you on?
happy to look at a minimal repro