shadow-cljs

https://github.com/thheller/shadow-cljs | https://github.com/sponsors/thheller | https://www.patreon.com/thheller
tomrbowden 2021-01-27T07:00:25.177700Z

has anyone managed to get Klipse working on Shadow-CLJS? I’m having one heck of a time trying to get it to build.

[:app] Build failure:
The required namespace "cljsjs.codemirror.addon.edit.matchbrackets" is not available, it was required by "klipse/ui/editors/editor.cljs".
I have already added codemirror via npm install codemirror, so I’m stuck…

tomrbowden 2021-01-27T10:26:32.178200Z

Thanks for your reply @thheller. I’ve added the file src/main/cljsjs/codemirror.cljs file to my project, with this code inside:

(ns cljsjs.codemirror
  (:require ["codemirror" :as cm]))

(js/goog.exportSymbol "CodeMirror" cm)
However, I still get the build failure:
The required namespace "cljsjs.codemirror.addon.edit.matchbrackets" is not available, it was required by "klipse/ui/editors/editor.cljs".
I must be doing something silly — I just can’t work out what it is…

thheller 2021-01-27T10:27:21.178400Z

well you added cljsjs.codemirror not cljsjs.codemirror.addon.edit.matchbrackets

thheller 2021-01-27T10:28:05.178600Z

thats a different ns and different require

thheller 2021-01-27T10:28:32.178800Z

you can look at how that cljsjs package is created to find out what require that would be

thheller 2021-01-27T10:28:54.179Z

may just be "codemirror/addon/edit/matchbrackets" but I'm not sure

tomrbowden 2021-01-27T11:18:09.179200Z

Sorry about this, but I am still confused. I have also added the file src/main/cljsjs/codemirror/addon/edit/matchbrackets.cljs file to my project:

(ns cljsjs.codemirror.addon.edit.matchbrackets
  (:require ["codemirror.addon.edit.matchbrackets" :as cmaem]))

(js/goog.exportSymbol "CodeMirrorAddonEditMatchbrackets" cmaem)
Now I get the build error:
[:app] Build failure:
The required JS dependency "codemirror.addon.edit.matchbrackets" is not available, it was required by "cljsjs/codemirror/addon/edit/matchbrackets.cljs".

Dependency Trace:
	clojsandbox/app/core.cljs
	klipse/run/plugin/plugin.cljs
	klipse/plugin.cljs
	klipse/klipse_editors.cljs
	klipse/ui/editors/common.cljs
	klipse/ui/editors/editor.cljs
	cljsjs/codemirror/addon/edit/matchbrackets.cljs

thheller 2021-01-27T11:28:07.179400Z

please check what I said in my last message 😛

thheller 2021-01-27T11:28:21.179600Z

the require string does not always match the cljsjs name exaclty

thheller 2021-01-27T11:28:57.179800Z

so at the very least it requires / instead of .. you can find the correct path by going into node_modules/codemirror and finding the correct folder or matching .js file for the above

thheller 2021-01-27T11:29:20.180Z

so either node_modules/codemirror/addon/edit/matchbrackets.js or node_modules/codemirror/addon/edit/matchbrackets as a folder

tomrbowden 2021-01-27T11:53:33.181400Z

Doh! Silly mistake. I think I need to get some rest, thanks for your patience @thheller

witek 2021-01-27T12:06:31.183400Z

Hello. I have included the npm module qrious into my package.json. How do I require it in my namespace and call the constructor new QRious()? -> https://www.cssscript.com/pure-javascript-qr-code-generator-qrious/ I have tried ["qrious" :as qrious] but js/QRious is not defined. qrious seams to be a function, but calling it throws Cannot read property 'bind' of undefined .

thheller 2021-01-27T12:56:59.184400Z

@witek in general you NEVER use js/ for anything that you imported via require in the ns. you use the :as name directly

thheller 2021-01-27T12:57:34.184900Z

so probably just (qrious. ...)

witek 2021-01-27T13:13:15.188700Z

(qrious. ...) throws Uncaught Error: Invalid option: __reactInternalInstance$uiqex7uo9w at Nevis.extend.exists._set (qrious.js:1924). When using qrious in Vanilla JS, I have to call the QRious() constructor, which is defined globally when including the qrious.js via <script>. Don't I have to mention this QRious constructor somehow? Perhaps you have a hint for me after having a look at qrious.js: https://github.com/neocotic/qrious/blob/master/dist/qrious.js

2021-01-27T14:19:49.192700Z

Hi @witek, did you tried to use qrious in vanilla JS with require like const qrious = require('qrious')? It works? The doc does not mention this method.

2021-01-27T14:58:09.196700Z

If yes so as mentionned thheller, require the lib in your CLJS namespace like that:

(ns your-namepace
  (:require ["qrious" :as qrious]))
Then you could interop: (def qr (qrious. #js {:element (.getElementById js/document "qr"), :value "Custom value"})) > Don't I have to mention this QRious constructor somehow? Note the dot after QRious, this is a sugar syntax for construct new Object...equivalent to (def qr (new qrious #js {:element (.getElementById js/document "qr"), :value "Custom value"})) Refresh your page and it should works.

👍 1
thheller 2021-01-27T16:17:39.198200Z

@witek without a full code snippet for what you are doing we cannot help much. the constructor appears to be called properly, just with an option it didn't expect, since it seems to get to this part https://github.com/neocotic/qrious/blob/master/dist/qrious.js#L1923

benny 2021-01-27T19:11:38.200400Z

trying to use rechart, but it’s failing to build with the following error. any ideas? > Closure compilation failed with 2 errors > --- node_modules/d3-array/dist/d3-array.js:271 > This code cannot be converted from ES6. extending native class: Map > --- node_modules/d3-array/dist/d3-array.js:291 > This code cannot be converted from ES6. extending native class: Set

thheller 2021-01-27T19:27:49.201100Z

@benny you need to up your :compiler-options {:output-feature-set :es6} if there is code that can't be transpiled

benny 2021-01-27T20:23:42.201300Z

that did it! thanks @thheller

jaime 2021-01-27T21:41:46.204400Z

Hi all, how to do the hot-reload trick in react-native, similar to below example with react-dom...

(defn ^:dev/after-load start []
  (reagent/render [ui {:x (js/Date.now)}] dom-root)) 
Here is the entry point for react-native, it accepts a function that returns react component
(react-native/AppRegistry.registerComponent "myApp" #(reagent/reactify-component root))
EDIT: I've tried below which I've found thru googling but does not work. Though I don't really understand the theory behind to be honest 😅
(def root-version (atom 0))
(defn reloadable-root []
  @root-version
  (r/reactify-component root))

(defn start []
  (rn/AppRegistry.registerComponent "myApp" reloadable-root))

(defn ^:dev/after-load after-load []
  (js/console.log "after load...")
  (swap! root-version inc)
  (start))

thheller 2021-01-27T22:09:09.206800Z

@jaime.sangcap you can use the helper I created https://github.com/thheller/reagent-react-native/blob/master/src/main/test/app.cljs#L36

thheller 2021-01-27T22:09:29.207300Z

or copy what that does if you want to roll your own

thheller 2021-01-27T22:09:58.208Z

I can tell that for you the issue is that your are deref'ing the @root-version outside of a scope where reagent looks for it

👍 1
jaime 2021-01-27T22:23:41.211200Z

@thheller Awesome! ❤️ Thanks for the link. I will try that trick. Btw, IIRC you also use cursive and intellij? How do you manage to switch between repl? One thing I noticed is that for running (shadow.cljs.devtools.api/watch-compile-all!), you need to be in the CLJ repl. But for evaluating cljs, you need to be in the CLJS repl. How do you manage to compile/reload while making changes?

thheller 2021-01-27T22:57:52.211900Z

I never use (shadow.cljs.devtools.api/watch-compile-all!) so I rarely have a reason to be in a CLJS repl when working on CLJS

thheller 2021-01-28T09:17:03.216800Z

yes, just the regular shadow-cljs watch app. or rather nowadays just shadow-cljs server and start the watch from the UI

thheller 2021-01-28T09:17:55.217100Z

heavily using tap> with Inspect but actually very little REPL for CLJS

jaime 2021-01-28T10:16:35.217700Z

Thanks for sharing. Will try experiment with that workflow

jaime 2021-01-28T20:59:34.232300Z

Looks like this is the tap> workflow you've mentioned? https://clojureverse.org/t/introducing-shadow-cljs-inspect/5012 Not sure what is the difference with tap> and sending forms to repl. But somehow I'm excited to acquire new super powers!! :star-struck:

thheller 2021-01-28T21:05:27.232700Z

tap sends it to the UI. the UI isn't otherwise integrated into the REPL for now.

thheller 2021-01-28T21:05:54.232900Z

just open the ui at http://localhost:9630/inspect-latest and tap something in the REPL

thheller 2021-01-28T21:06:08.233100Z

(assuming you use a somewhat recent version)

jaime 2021-01-28T21:32:25.238900Z

Awesome! I tap> the (def button-styles , it looks like it navigates per map values as next page?

jaime 2021-01-28T21:33:13.239300Z

When I select view as edn , it shows as the var

jaime 2021-01-28T21:36:28.239700Z

I already changed my keymap from send to repl to (tap> ~selected) repl command 😉

thheller 2021-01-27T22:58:04.212300Z

when I do some CLJ stuff I just open a second connection