shadow-cljs 2020-03-02 | Slack Archive

jjttjj05:03:51

Is it possible in shadow to depend on a library which bundles a js library and provides externs? specifically I'm trying to use https://github.com/cjohansen/dumdom . I have a shim file which looks like

(ns snabbdom
  (:require ["snabbdom" :as snabbdom]))

(js/goog.exportSymbol "snabbdom" snabbdom)

But this line is triggering an error: https://github.com/cjohansen/dumdom/blob/dd7cbae5e1b03892a068410e246cd44dcaeb8cbf/src/dumdom/core.cljs#L20

Failed to load dumdom/core.cljs TypeError: Cannot read property 'create' of null
    at Object.exports.init (snabbdom.js:39)
    at eval (core.cljs:23)

(All the properties of js/snabbdom used on that line are coming up nil)

thheller09:03:13

@jjttjj the issue is that the namespace can't be the same name as the exported symbol

thheller09:03:39

rename it to cljsjs.snabbdom and then manually ensure it is loaded before dumdom

jjttjj18:03:02

this worked, thanks!

mkvlr10:03:00

giving shadow a try on a new project and really impressed with it so far

mkvlr10:03:16

can I also do es6 module imports over http like in the first example in https://github.com/observablehq/runtime#observablehqruntime?

thheller10:03:14

@mkvlr not currently no. seems like a really bad idea to do that too 😛

mkvlr10:03:29

in the case of http://observablehq.com, I’m not so sure.

mkvlr10:03:45

but you’re probably right

thheller10:03:49

well it probably isn't any worse than npm so there is that 😛

thheller10:03:25

but its all mirrors to npm anyways so you get the same stuff

mkvlr10:03:13

I was looking at the observable’s way to require notebooks as es6 modules.

mkvlr10:03:52

so https://api.observablehq.com/@tmcw/hello-world.js?v=3 is https://observablehq.com/@tmcw/hello-world as a es6 module

thheller10:03:17

well yeah but not exactly

thheller10:03:26

it still requires the runtime bits

mkvlr10:03:43

right, but that I can require from npm

mkvlr10:03:30

but I think I can use import to import things from notebooks

thheller10:03:41

not sure what you are trying to build but what would you statically want to include a notebook in a build?

thheller10:03:57

this runtime things seems explicitely built to be used dynamically?

thheller10:03:16

you can always just curl the notebook and include it in your build if you really want

mkvlr11:03:26

right, I’m also not quite sure what I’m building here yet 😼 well thanks for shadow & your help!

thheller11:03:52

FWIW adding support for an URL resolver wouldn't even be that hard but I'm not so sure it is a good idea

thheller11:03:08

there is a lot of stuff going on in the JS world so we'll see where this all goes 😛

jaime18:03:27

Hello. How to properly setup devcards in shadow-cljs? This does not seem to work

;; shadow-cljs configuration
{:source-paths
 ["src"
  "test"
  "tailwind.config.js"]

 :dependencies
 [[reagent "0.9.1"]
  [metosin/reitit "0.4.2"]
  [binaryage/devtools "1.0.0"]
  [devcards "0.2.6"]]
 

 :builds
 {
  :devcards {:target :browser
             :output-dir "devcards"
             :asset-path "/"
             :compiler-options {:devcards true
                                :source-map-timestamp true}
             :modules {:devcards {:entries [limeray.web.app-test]}}
             :devtools  {:http-port 9003
                         :http-root "devcards"}}}}

;; limeray.web.app-test

(ns limeray.web.app-test
  (:require
   [cljs.test :refer [testing is use-fixtures]]
   [devcards.core :as dc]
   [reagent.core :as r]
   [limeray.web.components :as ui]
   ["@testing-library/react" :as rtl])

  (:require-macros
   [devcards.core :refer [defcard deftest]]))

(enable-console-print!)


(defcard my-first-card
         (r/as-element [ui/date-picker]))


(defn ^:export init []
  (dc/start-devcard-ui!))

thheller19:03:40

do you call the init fn via the HTML?

jaime19:03:23

I just added it now


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="../main.css" rel="stylesheet" />
    <title>Limeray</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="/devcards.js"></script>
  <script>
    limeray.web.app_test.init();
  </script>
</html>

BUt having this error

//cljs-runtime/devcards.core.js:101 Uncaught TypeError: devcards.system.start_ui is not a function

thheller19:03:32

the :asset-path is incorrect for one

thheller19:03:04

note the incorrect path with //

thheller19:03:35

try :asset-path "/"

jaime19:03:56

oh yeah sorry. I updated the build config, changing the asset-path and http-root under devtools

:devcards {:target :browser
             :output-dir "devcards"
             :asset-path "/"
             :compiler-options {:devcards true
                                :source-map-timestamp true}
             :modules {:devcards {:entries [limeray.web.app-test]}}
             :devtools  {:http-port 9003
                         :http-root "/"
                         :preloads [devcards.core]}}}}

jaime19:03:05

I also added preloads

jaime19:03:39

Here is the screenshot of browser error

thheller20:03:19

:http-root was correct. / is definitely incorrect

jaime17:03:57

can't make it work. I'll skip this for now. thanks a lot for your help

jaime17:03:08

😅

Schpaa14:03:46

Having the same problem

Schpaa14:03:50

React is not defined

Schpaa14:03:50

But I’m using shadow from lein

thheller14:03:48

you probably need to require cljsjs.react and maybe cljsjs.react.dom since devcards doesn't declare its dependency on react for some reason

I’ll try that

no luck

whats the issue?

getting the exact same output as Jaime above

thheller14:03:20

and what is your config?

Schpaa14:03:20

React not defined and devcards.system.start-ui is not a func

thheller14:03:56

did you ensure that you have required cljsjs.react *BEFORE* loading devcards?

remove that preload

otherwise isn't load devcards before the react ...

thheller14:03:24

and the :preloads isn't useful in the first place

Schpaa14:03:31

“otherwise isn’t load devcards before the react ...” which means?

Schpaa14:03:17

I can get it to work using plain shadow (without lein)

thheller14:03:23

"otherwise it will load ..."

Schpaa14:03:42

something with those React definitions which gets lost

thheller14:03:57

you shouldn't use lein-shadow. I hate that its the default but I absolutely advise against using it.

thheller14:03:15

what is your updated config?

Schpaa14:03:29

the same, sans the preload

thheller14:03:02

did you restart so lein-shadow can write it to disk so shadow-cljs can pick it up? (really stop using lein-shadow)

Schpaa14:03:33

yes I did

thheller14:03:48

and what is the error?

same thing

no wait

it works ??

wtf

I dont like this

so you would recommend staying away from lein-shadow

Schpaa14:03:22

first time I hear this, but since its from you it counts

thheller15:03:03

yes, IMHO its a pointless plugin

thheller15:03:14

the luminus authors wanted to have ALL config in project.clj

thheller15:03:20

which I personally think is pointless

Schpaa15:03:27

yeah, I get your point

Schpaa15:03:48

thanks for your input!!

Felipe Marques19:03:29

Hi, guys, I'm trying to run a select a nrepl nrepl-select and starting it on a specific namespace, but I don't find any documentation for the opts parameter of the nrepl-select to use it. I tried to use init-ns but didn't work.

Felipe Marques19:03:29

@thheller sorry if it is a basic question. But in this case, this configuration would be in the shadow-cljs.edn correct? In trying to use the init-ns to get a repl directly in the dev namespace where I have a lot of utility functions that I use. But this is specific for me, I wouldn't like to pollute the shadow-cljs.edn with my specific dev environment.

thheller19:03:10

ideally your editor would just issue the command to switch to a given namespace when you connect

thheller19:03:19

or you could maybe bind that to a key

thheller19:03:46

otherwise yes shadow-cljs.edn in the build config via :devtools {:repl-init-ns some.foo}

tekacs20:03:31

@ctamayo ant-design fixed their imports upstream in response to my issue, so that tree shaking works out of the box with shadow now: https://github.com/ant-design/ant-design/issues/21744

coby20:03:40

Nice! I'd seen they were working on it, thanks for the update

2020-03-02

Channels