Fork me on GitHub
#shadow-cljs
<
2021-09-02
>
Franklin09:09:50

hello 馃憢 Do you think this error is caused by shadow-cljs or reagent?

react_devtools_backend.js:2850 Warning: Invalid attribute name: `cljs$lang$protocol_mask$partition0$`
    at div
    at eval ()
    at exports.CustomGallery ()
    at f ()
    at div
    at div
    at cmp ()
    at div
    at div
    at div
    at div
    at cmp ()

Franklin09:09:00

the code

(ns quagga.components.dataview.photos.view
  (:require
   [reagent.core :as reagent]
   ["react-photoswipe-gallery" :refer (Gallery Item)]))

(defn photos-component
  []
  [:div.tab-page.photos-page {:style {:display "block", :overflow-x "scroll"}}
   [:div#tab-contentphotos.tab-content
    [:f> Gallery
    ;;  {:id "simple-gallery"}
     [:div
      {:style
       {:display "grid"
        :gridTemplateColumns "240px 171px 171px"
        :gridTemplateRows "114px 114px"
        :gridGap 12}}
      [:f> Item
       {:id "so-first"
        :title "Author: Folkert Gorter"
        :height "1600"
        :width "1600"
        :thumbnail
        ""
        :original
        ""}
       (fn [ref open]
         (reagent/as-element
          [:img
           {:src ""
            :ref ref
            :on-click open
            :style {:cursor "pointer"
                    :objectFit "cover"
                    :width "100%"
                    :maxHeight "100%"}}]))]]]]])

Franklin09:09:19

got an answer for this in #reagent

borkdude11:09:40

@thheller Congrats on the CT funding for Q3!

馃帀 14
馃殌 6
martinklepsch16:09:50

clojure -A:build:test -M -m shadow.cljs.devtools.cli watch app
@thheller this call seems to work but the issue also seems like potentially a different version issue in the CI env where it鈥檚 failing

thheller16:09:56

the -M might be a problem if your CI has an older tools.deps install?

martinklepsch16:09:07

Yeah, I鈥檒l check on that!

martinklepsch16:09:15

Can someone remind me how I can wipe state of the node-repl without restarting everything? There鈥檚 a way to restart the worker process for that but I can鈥檛 remember 馃槄

thheller16:09:15

there is an open issue about netlify still using an old version

thheller16:09:30

(shadow.cljs.devtools.api/stop-worker :node-repl) from the CLJ repl

David Pham17:09:58

I had an issue today which was really odd: I was using this library for two components: https://github.com/khmelevskii/emotion-cljs . I was compiling with shadow-cljs in advacned mode several time a day without an issue, and then suddenly without changing the old code, the components started to crash. I know the problem is with emotion styled componenet as I debugged with the --debug flag.

David Pham17:09:16

I tried to write externs, but my skillset is probably quite limited.

David Pham17:09:22

Does anyone know what could be the issue?

David Pham17:09:52

I will try to set up a minimal example tomorrow if no one has an idea.

thheller17:09:49

> the components started to crash

thheller17:09:54

what does that mean? what is the actual error?

David Pham17:09:56

I believe "@emotion/styled" is undefined

David Pham17:09:58

in advacned mode

David Pham17:09:25

The error says "call" from t.call is undefined

David Pham17:09:44

where t is emotion/styled.

thheller17:09:59

can't say without seeing code. there is no difference in how JS code is provided in :advanced since those parts only ever use :simple

David Pham17:09:30

t.call is not a function sorry

David Pham17:09:22

$emotion$core$create_styled$$ = function($display_name$jscomp$2_result$jscomp$144$$, $component$jscomp$30$$, $options$jscomp$119$$, $styles$$) {
        var $wrap$jscomp$2$$ = $APP.$cljs$core$get$$.$cljs$core$IFn$_invoke$arity$2$($options$jscomp$119$$, "wrap")
          , $camel_casing_props_QMARK_$$ = $APP.$cljs$core$get$$.$cljs$core$IFn$_invoke$arity$3$($options$jscomp$119$$, "camelCasingProps?", !0)
          , $class_name_prop$jscomp$1$$ = $APP.$cljs$core$name$$($APP.$cljs$core$get$$.$cljs$core$IFn$_invoke$arity$3$($options$jscomp$119$$, "classNameProp", "class-name"))
          , $wrapper_component$$ = $APP.$cljs$core$not$$($camel_casing_props_QMARK_$$) ? $component$jscomp$30$$ : null != $component$jscomp$30$$.__emotion_base ? $component$jscomp$30$$ : $APP.$cljs$core$_EQ_$$.$cljs$core$IFn$_invoke$arity$2$($APP.$cljs$core$type$$($component$jscomp$30$$), String) ? $emotion$core$create_forwarded_element$cljs$0core$0IFn$0_invoke$0arity$02$$($component$jscomp$30$$, $emotion$core$object__GT_camel_props$$) : $APP.$cljs$core$_EQ_$$.$cljs$core$IFn$_invoke$arity$2$($class_name_prop$jscomp$1$$, "className") ? $component$jscomp$30$$ : $emotion$core$create_forwarded_element$cljs$0core$0IFn$0_invoke$0arity$02$$($component$jscomp$30$$, function($p1__141952_SHARP_$$) {
            return $emotion$core$convert_class_name$$.$cljs$core$IFn$_invoke$arity$2$($p1__141952_SHARP_$$, $class_name_prop$jscomp$1$$);
        });
        $wrapper_component$$.displayName = $display_name$jscomp$2_result$jscomp$144$$;
        $display_name$jscomp$2_result$jscomp$144$$ = function() {
            function $G__141956$$($props$jscomp$26$$) {
                return $APP.$cljs_bean$core$__GT_js$$($styles$$).concat($props$jscomp$26$$.css);
            }
            var $fexpr__141955$$ = function() {
                var $G__141958$$ = $APP.$cljs_bean$core$__GT_js$$($options$jscomp$119$$);
                return $emotion$core$styled_component$$.$cljs$core$IFn$_invoke$arity$2$ ? $emotion$core$styled_component$$.$cljs$core$IFn$_invoke$arity$2$($wrapper_component$$, $G__141958$$) : $emotion$core$styled_component$$.call(null, $wrapper_component$$, $G__141958$$);
            }();
            return $fexpr__141955$$.$cljs$core$IFn$_invoke$arity$1$ ? $fexpr__141955$$.$cljs$core$IFn$_invoke$arity$1$($G__141956$$) : $fexpr__141955$$.call(null, $G__141956$$);
        }();
        return $APP.$cljs$core$truth_$$($wrap$jscomp$2$$) ? $wrap$jscomp$2$$.$cljs$core$IFn$_invoke$arity$1$ ? $wrap$jscomp$2$$.$cljs$core$IFn$_invoke$arity$1$($display_name$jscomp$2_result$jscomp$144$$) : $wrap$jscomp$2$$.call(null, $display_name$jscomp$2_result$jscomp$144$$) : $display_name$jscomp$2_result$jscomp$144$$;
    }

David Pham17:09:42

That would be the function that breaks doown on advanced compliation

David Pham17:09:51

in particular the expression

David Pham17:09:06

return $fexpr__141955$$.$cljs$core$IFn$_invoke$arity$1$ ? $fexpr__141955$$.$cljs$core$IFn$_invoke$arity$1$($G__141956$$) : $fexpr__141955$$.call(null, $G__141956$$);

David Pham17:09:27

$fexpr__141955$$.call
Is undefined

David Pham17:09:01

What I find odd is the component runs fine on debug mode, but not on advanced, and I don't know how I could solve this.

thheller17:09:57

can you show that in the --debug output? should be the assignment of $emotion$core$styled_component$$

David Pham18:09:26

$emotion$core$styled_component$$ = $module$node_modules$$emotion$styled$dist$emotion_styled_browser_cjs$$.default

thheller18:09:38

do you have all the correct npm package versions?

thheller18:09:52

maybe you have a newer/older one that doesn't have a default export?

David Pham18:09:27

I took the latest version of both

David Pham18:09:11

It is is really odd, because It was working this morning, I did not change anything, and then suddenly it stopped working.

David Pham18:09:29

But I will try to make a minimal example tomorrow.

thheller18:09:36

had to change something. doesn't mysteriously change itself.

David Pham18:09:56

I compile two versions

thheller18:09:00

can be a simple thing as running npm install and creating a dependency conflict that wasn't there before

David Pham18:09:13

separated by a few seconds

David Pham18:09:22

and one of the output works and not the other xD

David Pham18:09:29

oh well. Let's see.

currentoor18:09:52

I鈥檝e got a namespace that defines transit types for some defrecords and I need these types to be redefined on code reload. So I added the marker to always reload this NS

(ns ^:dev/always mutesync.background.transit-types
  (:require ...))
But this namespace is still not be reloaded when I update one of it鈥檚 children. Does :dev/always mean always reload this NS or something else?

thheller18:09:46

It does mean always reload or even recompile. meaning every recompile cycle will recompile and then reload it. you should see it in the browser console

thheller18:09:27

note that reloading defrecords will invalidate all active instances so that might present a problem?

thheller18:09:59

or not invalidate, just new types so not compatible with the previous ones if you ever to (instance? TheRecord ...)

currentoor18:09:57

ah you鈥檙e right it does, but my code is throwing an exception before reloading this namespace is possible, because defrecords are incompatible

currentoor18:09:56

I鈥檓 wondering if I should just move away from defrecords for this reason

currentoor18:09:23

protocols are nice, but i鈥檇 rather have dev code reload be reliable

thheller18:09:49

I typically move the protocols to a namespace that is pretty much never reloaded

thheller18:09:03

like a dedicated .protocols ns or so

thheller18:09:55

of course that only solves part of the problem. custom types aren't really hot-reload/REPL friendly too much

currentoor18:09:31

so you define and implement your protocols in a separate namespace?

currentoor18:09:20

this is one of the reasons my friend @wilkerlucio says we should use maps with lambdas rather than defrecords

currentoor18:09:39

what other issues are you aware of with custom types and hot-reload?

thheller18:09:56

yeah, ns just for protocols. no implementations

currentoor18:09:49

oh i see, it鈥檚 the protocol eval causing issues that you鈥檙e talking about

thheller18:09:12

don't know what error you actually get but it does solve some issues yes

currentoor18:09:52

my issues is i end up re-defining the defrecord and then i can no longer serialize it as transit without re-defining the transit writer

currentoor18:09:10

thank you for the help

thheller18:09:32

yeah anything thats type based is an issue

zhuxun218:09:19

Does shadow-cljs respect :refer-clojure :exclude?

(ns user
  (:refer-clojure :exclude [compile])
  )

(defn compile [] 42)
$ npx shadow-cljs watch :main
shadow-cljs - config: .../shadow-cljs.edn
shadow-cljs - starting via "clojure"
WARNING: compile already refers to: #'clojure.core/compile in namespace: user, being replaced by: #'user/compile

zhuxun218:09:08

=== Version
jar:            2.15.5
cli:            2.15.5
deps:           1.3.2
config-version: 2.15.5

borkdude19:09:12

@zhuxun2 have you tested this without shadow?

zhuxun219:09:53

@borkdude Hmmm, clj -M --main cljs.main --compile user gives the same error, so it's not shadow-cljs

borkdude19:09:29

it seems to be clojure behavior

borkdude19:09:43

not sure why, but perhaps bring it up in #clojure

Fredrik Andersson20:09:07

https://clojureverse.org/t/how-are-you-styling-your-clojurescript-apps/7946/7 I'm trying to use this to compile my tailwindcss. However the hooks cannot find the babashka class path. I'm not entirely sure how to add dependencies to be used by clj hooks. I did try to find it in the documentation without success.

borkdude20:09:37

@fredrik245 babashka.process is a library which you can probably add to deps.edn?

Fredrik Andersson20:09:09

ok, im using shadow-cljs

Fredrik Andersson20:09:19

should I add a deps-file too?

Fredrik Andersson20:09:39

sorry I'm quite new to clojure and clojurescript

borkdude20:09:51

That link writes about postcss.clj which is a Clojure (JVM) file

borkdude20:09:56

You could add a deps.edn like this:

{:deps {babashka/process {:mvn/version "0.0.2"}}}
and in your shadow-cljs.edn write :deps true so it picks up on the deps.edn

borkdude20:09:12

You will also need the clojure CLI installed, see https://clojure.org/guides/getting_started

borkdude20:09:05

if you are using project.clj then just add the dep there

borkdude20:09:28

I think shadow also allows you to declare the deps inside its configuration

borkdude20:09:44

so any of those three options should work and align with what you are already doing

Fredrik Andersson20:09:52

i thought that i linked to a particular reply in the link. I successfully added the dependency in shadow-cljs.edn

Fredrik Andersson20:09:46

however it doesn't seem to write any output files. so i'm going to look closer at that

borkdude20:09:11

I recommend using the :inherit true option in process

borkdude20:09:20

then you will see the output from those commands while they are running

borkdude20:09:26

and that may give some hints as to what's going wrong

Fredrik Andersson20:09:40

hm, still nothing 馃槥

borkdude21:09:23

@fredrik245 Could you post your code to a gist or some public repo?

Fredrik Andersson21:09:33

@borkdude I'm going to bed now. I'll do it tomorrow if I can't find a solution in the morning.

borkdude21:09:49

you can at least insert some printlns for debugging if those build functions are executed at all. ok goodnight!

Fredrik Andersson21:09:07

yes I did try that but they didn't execute

borkdude21:09:19

ah ok, then perhaps the shadow config isn't properly set up or so

Fredrik Andersson21:09:42

yes probably, ill look into it tomorrow with a fresh head 馃槃

Fredrik Andersson21:09:49

thanks for the help