Fork me on GitHub
#shadow-cljs
<
2020-03-02
>
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.

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

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

Schpaa14:03:54

I’ll try that

thheller14:03:48

whats the issue?

Schpaa14:03:44

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?

thheller14:03:29

remove that preload

thheller14:03:03

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)

thheller14:03:48

and what is the error?

Schpaa14:03:07

same thing

Schpaa14:03:22

it works ??

Schpaa14:03:43

I dont like this

Schpaa14:03:58

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.

thheller19:03:10

@marques.goncalves.fel that is not an option you can pass to nrepl-select. that needs to be configured directly on the nrepl server

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