required namespace cljsjs.rangy-core is not available when invoking shadow compile method.

[drewverlee]

greetings, This I'm trying to use dynadoc from shadow-clj. I hit a snag when i try to compile the docs application which is very small

(ns docs
  (:require [tomatto.frontend.app :as app]
            ;; must require dynadoc.core so dynadoc's frontend can be built
            dynadoc.core
            [rum.core :as rum])
  (:require-macros [dynadoc.example :refer [defexample]]))

(defexample basic-deps-cljs.core/clicks
  {:with-card  card
   :with-focus (app/Text {:size "14px"} "hello")}
  ;;TODO replace with rum equivelent
  #_(reagent.core/unmount-component-at-node card)
  (rum/mount app/Text card)
  nil)

(defexample conj
  (conj [] 1))

The expression (shadow.cljs.devtools.api/compile :docs {:verbose true}) returns the error:

[:docs] Compiling ...
-> build target: :browser stage: :configure
<- build target: :browser stage: :configure (0 ms)
-> Resolving Module: :main
The required namespace "cljsjs.rangy-core" is not available, it was required by "paren_soup/core.cljs".

However if i remove the dynadoc.core require, it does compile, but it doesn't properly eval the defexamples e.g the conj example above doesn't show the result [1]. Also my card doesn't render, but that might be another issue.

If anything to try pops out at you that would be great, hopefully, I can add a shadow example to the list.

[drewverlee]

quick note Shadow cljs doesn't support cljs js ,

More here https://code.thheller.com/blog/shadow-cljs/2017/09/15/js-dependencies-the-problem.html

But the docs also outline how to fix it on my end. I'll try to make an example.

[oakes]

Yeah the cljsjs thing makes it pretty hard to use shadow sometimes. It looks like paren-soup is using three cljsjs namespaces:

• cljsjs.rangy-core
• cljsjs.rangy-textrange
• cljsjs.parinfer

I don't use shadow in any hobby project because i prefer figwheel, but i have looked into this before for work. We were using a little library called cljsjs.qrcode-generator and it turned out to be pretty simple to get it to build with shadow. We just had to create a file in our project at src/cljsjs/qrcode_generator.cljs with the following...

(ns cljsjs.qrcode-generator
  (:require ["qrcode-generator" :as qr]))

(js/goog.exportSymbol "qrcode" qr)

But that's only because it's a tiny library with a single public symbol. For rangy and parinfer, it will probably be more complicated.

[oakes]

IMO shadow is only useful if you really want to use npm libraries. If you're sticking with stuff in the clojurescript ecosystem, figwheel is much simpler.

[drewverlee]

Thanks, Zach, ill have to think about this. It only took a minute to shim those namespaces e.g

(ns cljsjs.parinfer
  (:require ["parinfer" :as parinfer]))

(js/goog.exportSymbol "Parinfer" parinfer)

The other two i just used the same logic both times which is likely incorrect.

(ns cljsjs.rangy-textrange
  (:require ["rangy" :as rangy])) 

(js/goog.exportSymbol "Rangy" rangy) ;; also tried lower case "rangy"

It's not clear to me how the npm package is originally being built. I'm looking into it now, i suppose this isn't an issue with dynadoc per say, but it would be nice if it could reach shadow easily :).

[drewverlee]

Here are the docs for how to shim the name spaces https://shadow-cljs.github.io/docs/UsersGuide.html#cljsjs

Here is what i tried

(ns cljsjs.rangy-core
  (:require ["rangy" :as rangy]))

(js/goog.exportSymbol "rangy" rangy)

(ns cljsjs.rangy-textrange
  (:require ["rangy" :as rangy]))

(js/goog.exportSymbol "rangy" rangy)

(ns cljsjs.parinfer
  (:require ["parinfer" :as parinfer]))

(js/goog.exportSymbol "parinfer" parinfer)

It compiles, but the examples does eval to show the results. No errors are thrown. I thought about this a bit more and have no idea what else i would try so I'm moving past it. hopefully this might be useful to someone else :)

[oakes]

Only thing I can think of is, did you npm install the libraries? With shadow that's how you will be getting them -- it won't use the cljsjs library from clojars. But it would be weird if it threw no errors when those libraries aren't installed....

[drewverlee]

i did install them using npm

 8523* npm install rangy
 8536* npm install parinfer

I suppose my browser is giving the warning: react_devtools_backend.js:2574 WARNING: docs is a single segment namespace

Here is my shadow build info

          :target           :browser
         :output-dir       "docs/js"
         :asset-path       "/js"
         :compiler-options {:optmizations :simple}

         :modules {:main {:entries [docs]}}

and the example:

(ns docs (:require #_[tomatto.frontend.app :as app] ;; must require dynadoc.core so dynadoc's frontend can be built dynadoc.core

_[rum.core :as rum])

(:require-macros [dynadoc.example :refer [defexample]]))

(defn gobig [x] (str x "!"))

(defexample gobig (gobig "hi"))

[oakes]

Can you post the entire shadow-cljs.edn file? Getting dynadoc's examples to eval correctly can be tricky; if i see the whole file, i might be able to spot problems.

[drewverlee]

{:deps     {:aliases [:shadow]}
 :dev-http {8080 "public"}
 :builds   {:docs
            {:target           :browser
             :output-dir       "docs/js"
             :asset-path       "/js"
             :compiler-options {:optmizations :simple}
             :modules {:main {:entries [docs]}}}

            :app
            {:target   :browser
             :devtools {:after-load tomatto.frontend.app/init}
             :modules  {:main {:init-fn tomatto.frontend.app/init}}}}}

[oakes]

I mostly got it to work in the shadow branch of dynadoc-examples:

https://github.com/oakes/dynadoc-examples/tree/shadow/basic-shadow-cljs

If you run clj -M:docs in that dir, it should run shadow and build the example app successfully. But the examples aren't editable and the instarepl to the left displays an error. I'm guessing there's something breaking self-hosted clojurescript (i.e. the eval function), but so far i haven't figured out the reason. If you figure it out, let me know.

[oakes]

I was bored today so i made a little more progress. In that branch i linked to, editing examples now works correctly -- i had to pull in a different rangy library from npm. But the instarepl / eval functionality is still broken for some reason.

edit: maybe i need to do what it says here https://code.thheller.com/blog/shadow-cljs/2017/10/14/bootstrap-support.html