Fork me on GitHub
#shadow-cljs
<
2020-08-25
>
thheller07:08:48

@pavel.klavik yes that is current. you can either add the namespaces you want to load in a module via the build config :entries

Pavel Klavík14:08:23

So I got almost everything running with the following code:

[:> react/Suspense {:fallback (r/reactify-component [loading/loading :loading/administration])}
                 [:> (lazy/component (slazy/loadable orgpad.client.views.administration.core/administration))]]
But I am getting the following error:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in Suspense (created by root-component)
    in div (created by root-component)
    in div (created by root-component)
    in root-component (created by orgpad.client.views.root.root)
    in orgpad.client.views.root.root
What am I doing wrong?

thheller15:08:49

I don't know? what is (lazy/component (slazy/loadable orgpad.client.views.administration.core/administration))? returning?

thheller15:08:51

{:fallback (r/reactify-component [loading/loading :loading/administration])} should likely be {:fallback (r/as-element [loading/loading :loading/administration])}?

Pavel Klavík15:08:59

Sorry, I have rewritten it like this:

(ns orgpad.client.views.widgets.lazy
  (:require ["react" :as react]
            [reagent.core :as r]
            [shadow.lazy :as slazy]
            [orgpad.client.views.loading :as loading]))

(defn- component
  "React Lazy component which waits till the code is loaded and then replaces it with the component itself."
  [loadable]
  (react/lazy
    (fn []
      (-> (slazy/load loadable)
          (.then (fn [root-el]
                   #js {:default (r/reactify-component (fn [props] [@loadable props]))}))))))

(defn lazy
  "Renders a component whose source code may have to be first loaded. While the source code is loaded, renders the
  loading screen for the given state. The single parameter is a map having the following keys:

  :lazy/loadable - Call (slazy/loadable ).
  :lazy/state - The loading state while the component's source code is loaded."
  [{:lazy/keys [loadable state]}]
  [:> react/Suspense {:fallback (r/reactify-component [loading/loading state])}
   [:> (component loadable)]])

Pavel Klavík15:08:21

orgpad.client.views.administration.core/administration is just a reagent component

Pavel Klavík15:08:20

ok, changing to as-element fixed the problem

👍 1
Pavel Klavík15:08:11

thx, react interop is something I am never using very frequently, so it is quite tricky to get it right

thheller07:08:06

or by adding them to the :require of a namespace you added to the :entries

rickmoynihan09:08:19

I think in order to get spec errors to pretty print properly in cljs with expound you need to eval (require '[expound.alpha :as expound]) (set! clojure.spec.alpha/*explain-out* expound.alpha/printer) in the clojure vm that compiles macros… Is there a way to wire shadow-cljs up to do that?

rickmoynihan09:08:44

like maybe putting it in a user.clj at the root of the shadow jvms classpath?

thheller09:08:26

@rickmoynihan instrument errors will not be affected by that?

thheller09:08:28

shadow-cljs already does this for spec errors it prints itself. so if you write (let [x]) or so the resulting spec error is printed by expound

rickmoynihan09:08:54

its instrument errors I want

thheller09:08:15

then you need to eval the above in CLJS not CLJ

thheller09:08:42

but I don't even know if instrument uses that printer?

thheller09:08:15

I haven't used instrument myself, too scared of the code modifications it does 😛

rickmoynihan09:08:00

Hmm… I might have misdiagnosed this then

rickmoynihan09:08:17

I wonder if it’s because my spec error is occuring inside a core.async go block

rickmoynihan10:08:13

actually I think this might be something else 👀

psdp11:08:08

Sorry, stupid question. Trying to import a npm module but failed. What can I do about it?

Closure compilation failed with 1 errors
--- node_modules/jspdf/dist/jspdf.umd.min.js:355
Duplicate let / const / class / function declaration in the same scope is not allowed.

shivekkhurana13:08:50

Heya! Has somebody here faced some issues with importing CJS modules after upgrading to shadow version 2.11? This version was releases 2 days ago (https://github.com/thheller/shadow-cljs/commit/28169be104149e496b31bad443be7ecb6d16cd4a) and is tagged as [BREAKING].

shivekkhurana13:08:23

This lead to build failure for my app using BlueprintJS

shivekkhurana13:08:30

📄 Short error:

[:app] Build failure:
Failed to inspect file
  /Users/shivekkhurana/WIP/tmp/blueprint-cljs/node_modules/@blueprintjs/icons/lib/cjs/generated/iconContents.js

it was required from
  /Users/shivekkhurana/WIP/tmp/blueprint-cljs/node_modules/@blueprintjs/icons/lib/cjs/index.js

Errors encountered while trying to parse file
  /Users/shivekkhurana/WIP/tmp/blueprint-cljs/node_modules/@blueprintjs/icons/lib/cjs/generated/iconContents.js
  {:line 1, :column 1, :message "The file could not be parsed as JavaScript."}

shivekkhurana13:08:15

📑 Full Error

shivekkhurana13:08:03

RuntimeException: Exception parsing "/Users/shivekkhurana/WIP/tmp/blueprint-cljs/node_modules/@blueprintjs/icons/lib/cjs/generated/iconContents.js"
	com.google.javascript.jscomp.parsing.ParserRunner.parse (ParserRunner.java:155)
	com.google.javascript.jscomp.JsAst.parse (JsAst.java:152)
	com.google.javascript.jscomp.JsAst.getAstRoot (JsAst.java:55)
	shadow.build.closure.JsInspector.getFileInfo (JsInspector.java:176)
	shadow.build.closure.JsInspector.getFileInfoMap (JsInspector.java:190)
	shadow.build.npm/get-file-info*/fn--10535 (npm.clj:549)
	shadow.build.npm/get-file-info* (npm.clj:548)
	shadow.build.npm/get-file-info* (npm.clj:490)
	shadow.build.npm/get-file-info (npm.clj:611)
	shadow.build.npm/get-file-info (npm.clj:608)
	shadow.build.npm/find-resource (npm.clj:709)
	shadow.build.npm/find-resource (npm.clj:661)
	shadow.build.resolve/find-npm-resource (resolve.clj:123)
	shadow.build.resolve/find-npm-resource (resolve.clj:94)
	shadow.build.resolve/fn--12489 (resolve.clj:257)
	shadow.build.resolve/fn--12489 (resolve.clj:226)
	clojure.lang.MultiFn.invoke (MultiFn.java:244)
	shadow.build.resolve/find-resource-for-string (resolve.clj:81)
	shadow.build.resolve/find-resource-for-string (resolve.clj:70)
	shadow.build.resolve/resolve-string-require (resolve.clj:375)
	shadow.build.resolve/resolve-string-require (resolve.clj:358)
	shadow.build.resolve/resolve-require (resolve.clj:591)
	shadow.build.resolve/resolve-require (resolve.clj:584)
	shadow.build.resolve/resolve-deps/fn--12441 (resolve.clj:52)
	clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
	clojure.core/reduce (core.clj:6827)
	clojure.core/reduce (core.clj:6810)
	shadow.cljs.util/reduce-> (util.clj:47)
	shadow.cljs.util/reduce-> (util.clj:46)
	shadow.build.resolve/resolve-deps (resolve.clj:50)
	shadow.build.resolve/resolve-deps (resolve.clj:34)
	shadow.build.resolve/resolve-string-require (resolve.clj:400)
	shadow.build.resolve/resolve-string-require (resolve.clj:358)
	shadow.build.resolve/resolve-require (resolve.clj:591)
	shadow.build.resolve/resolve-require (resolve.clj:584)
	shadow.build.resolve/resolve-deps/fn--12441 (resolve.clj:52)
	clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
	clojure.core/reduce (core.clj:6827)
	clojure.core/reduce (core.clj:6810)
	shadow.cljs.util/reduce-> (util.clj:47)
	shadow.cljs.util/reduce-> (util.clj:46)
	shadow.build.resolve/resolve-deps (resolve.clj:50)
	shadow.build.resolve/resolve-deps (resolve.clj:34)
	shadow.build.resolve/resolve-string-require (resolve.clj:400)
	shadow.build.resolve/resolve-string-require (resolve.clj:358)
	shadow.build.resolve/resolve-require (resolve.clj:591)
	shadow.build.resolve/resolve-require (resolve.clj:584)
	shadow.build.resolve/resolve-deps/fn--12441 (resolve.clj:52)
	clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
	clojure.core/reduce (core.clj:6827)
	clojure.core/reduce (core.clj:6810)
	shadow.cljs.util/reduce-> (util.clj:47)
	shadow.cljs.util/reduce-> (util.clj:46)
	shadow.build.resolve/resolve-deps (resolve.clj:50)
	shadow.build.resolve/resolve-deps (resolve.clj:34)
	shadow.build.resolve/resolve-string-require (resolve.clj:400)
	shadow.build.resolve/resolve-string-require (resolve.clj:358)
	shadow.build.resolve/resolve-require (resolve.clj:591)
	shadow.build.resolve/resolve-require (resolve.clj:584)
	shadow.build.resolve/resolve-deps/fn--12441 (resolve.clj:52)
	clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
	clojure.core/reduce (core.clj:6827)
	clojure.core/reduce (core.clj:6810)
	shadow.cljs.util/reduce-> (util.clj:47)
	shadow.cljs.util/reduce-> (util.clj:46)
	shadow.build.resolve/resolve-deps (resolve.clj:50)
	shadow.build.resolve/resolve-deps (resolve.clj:34)
	shadow.build.resolve/resolve-string-require (resolve.clj:400)
	shadow.build.resolve/resolve-string-require (resolve.clj:358)
	shadow.build.resolve/resolve-require (resolve.clj:591)
	shadow.build.resolve/resolve-require (resolve.clj:584)
	shadow.build.resolve/resolve-deps/fn--12441 (resolve.clj:52)
	clojure.lang.PersistentVector.reduce (PersistentVector.java:343)
	clojure.core/reduce (core.clj:6827)
	clojure.core/reduce (core.clj:6810)
	shadow.cljs.util/reduce-> (util.clj:47)
	shadow.cljs.util/reduce-> (util.clj:46)
	shadow.build.resolve/resolve-deps (resolve.clj:50)
	shadow.build.resolve/resolve-deps (resolve.clj:34)
	shadow.build.resolve/resolve-string-require (resolve.clj:400)
Caused by:
StackOverflowError:
	com.google.javascript.jscomp.parsing.IRFactory.handleJsDoc (IRFactory.java:678)
	com.google.javascript.jscomp.parsing.IRFactory.transform (IRFactory.java:829)
	com.google.javascript.jscomp.parsing.IRFactory$TransformDispatcher.processBinaryExpressionHelper (IRFactory.java:1840)
	com.google.javascript.jscomp.parsing.IRFactory$TransformDispatcher.processBinaryExpression (IRFactory.java:1816)
	com.google.javascript.jscomp.parsing.IRFactory$TransformDispatcher.process (IRFactory.java:3275)

yenda14:08:23

Why do I get an infer warning on this?

(.on nodejs/process "SIGTERM" (fn []))

yenda14:08:26

Cannot infer target type in expression (. nodejs/process on "SIGTERM" (fn []))

thheller15:08:57

why wouldn't you? what is nodejs/process?

yenda15:08:34

[cljs.nodejs :as nodejs]

yenda15:08:50

I fixed the warning by doing ^js (.on nodejs/process "SIGTERM" (fn []))

thheller15:08:04

just use (js/process.on ...) and banish cljs.nodejs from your codebase 😛

thheller15:08:54

@shivekkhurana look at the file on your disk? it might be corrupted somehow? I vaguely remember someone having this problem before?

shivekkhurana15:08:19

I'm messaging on the github issue for better visibility. Thanks for the quick response !

thheller15:08:22

ah just saw the full stacktrace

thheller15:08:10

looks like a problem in the closure compiler. dunno what that is about but I vaguely remember seeing problems with this file before. unfortunately its lost in slack history

thheller15:08:12

@psdp unfortunately I can't remember if this was fixable. it was reported before but I think there was nothing to do except using the CDN distro of jspdf

neilyio22:08:37

Anybody have https://storybook.js.org/ working with shadow-cljs? I'm trying to follow @thheller's post https://clojureverse.org/t/using-storybook-with-cljs/1495, but it's from a couple years ago and the https://github.com/shadow-cljs/examples/tree/master/cljs-storybook doesn't work anymore.

thheller22:08:57

yeah pretty sure it doesn't work anymore

neilyio22:08:50

I'm trying to follow https://github.com/jacekschae/shadow-cljs-examples/blob/master/cljs-storybook/shadow-cljs.edn which seems based on your post, but I'm getting "No available JS runtime" in my CIDER REPL with a similar config:

:storybook
  {:target     :npm-module
   :output-dir "out"
   :entries [app.storybook]
   :devtools {:enabled false}}}

thheller22:08:19

that means the JS hasn't been loaded

thheller22:08:54

but yeah I wouldn't have much hope of this working

neilyio22:08:42

I appreciate the tip, that'll save me some time. Do you have any tips for getting dev-cards working with shadow-cljs?

neilyio22:08:54

Also, sorry I didn't find the user guide entry. I did a CMD-f search for :npm-module, which I've never used before. That keyword doesn't appear in the user guide section you just linked, maybe that's why I missed it. Thought I'd give you a heads up!

thheller22:08:28

I don't understand what you just said

thheller22:08:38

which guide?

thheller22:08:01

you mean the repl troubleshoot section doesn't specifically mention :npm-module? thats because there are a bazillion gazillion ways to use :npm-module and I can't possibly list all the "solutions"

thheller22:08:28

eg. storybook js processes and bundles the :npm-module output and I have no clue what it does to it

thheller22:08:36

and therefore no clue if the REPL can even possibly work

thheller22:08:14

but the gist of it is that the JS needs to be loaded SOMEWHERE. which is why you should probably read the whole thing and not skip over it

neilyio23:08:05

That is what I meant. I was just saying that my CMD-f search for :npm-module in the Shadow-CLJS User Guide didn't lead me to the REPL Troubleshooting section, which is why I asked here. I thought you might appreciate knowing why a reader may have missed it.

neilyio23:08:04

Thanks once again for getting back to me so quickly! I'll read through and try one more time on Storybook, and then I'll try for dev-cards next.

neilyio23:08:46

@lilactown I think I've made it to the end of your example. I've successfully got "hi" printing out in the browser console.

neilyio23:08:52

I wanted to let you know that I think there's a typo in the Configuring Storybook section's code example:

module.exports = {
  stories: ["../stories/**/*.stories.js", "../out/**/*_story.js"],
  addons: ["@storybook/addon-actions", "@storybook/addon-links"],
};

lilactown23:08:22

what’s the typo?

neilyio23:08:26

The example is adding "../out/**/*_story.js", but your CLJS namespace is stories.core, which for me is resulting in a stories.core.js file in my out folder.

neilyio00:08:51

Instead of "../out/**/*_story.js" , I've added "../out/**/stories.*.js" to the module.exports list in main.js and it seems to be working.

lilactown00:08:21

hmm I don’t think we actually need stories.core to be included in the storybook build

lilactown00:08:06

I suppose you can organize how you want

neilyio00:08:48

Oh, really? I thought that would be the only way to do it. Where are the *_story.js files coming from?

lilactown00:08:18

the part I left out is creating a corp.design.button-story namespace

neilyio00:08:14

Ooooh I see now. I couldn't think of why else there might be *_story.js files, so I assumed it was a typo.

lilactown00:08:38

yeah. what I’m doing is a bit weird. basically, I enumerate each story namespace in two places: • stories.core so that shadow-cljs knows to build it • in the storybook config using the glob pattern, so that the built file gets picked up by storybook’s CLI

neilyio00:08:13

Either way, you've gotten me much farther than I thought I would get with this!

lilactown00:08:23

I suppose another way you could do it is to configure storybook to just statically include stories.core.js

neilyio00:08:33

How did you find out the .babelrc was necessary? I would never have thought of that.

lilactown00:08:54

years of experience working with JS bundlers 😂

lilactown00:08:05

I can’t remember now why it was necessary tbh

neilyio00:08:24

Also, how are you getting away without using the storiesOf API?

neilyio00:08:57

Oh wait, I see, it seems like you're basically using the new CSF style.

neilyio00:08:08

Where they depend on default exports etc. I'm actually trying to avoid that, it seems to rely on having one file per React component. Reagent components are so small that I tend to have multiple per file. I'm thinking the older storiesOf API will be more accommodating to that, let me know if you have another idea!

neilyio23:08:10

@lilactown That's an amazing resource, thank you! Very well written. I'll let you know if I get it working.

thheller23:08:46

kinda funny that you say "integrating the latest storybook (v5)" when apparently v6 came out since. wonder what they broke this time 😉

lilactown23:08:44

lmao. right? we can’t keep up