Fork me on GitHub
#shadow-cljs
<
2019-09-16
>
flowthing10:09:43

How do I use jQuery UI with shadow-cljs? jQuery works fine if I just do npm install --save jquery and then (:require ["jquery" :as jq]) and (jq "#foo"), but I can't figure out how to bring jQuery UI into the picture so that I can its methods.

thheller10:09:31

well what did you try? or what example are you using?

flowthing10:09:39

I couldn't find any examples. If you can point me to any, much appreciated. I tried (:require ["jquery-ui"]) and (require ["jquery-ui" :as jqu]) and then (.tooltip (jqu "#foo")).

thheller10:09:14

is jquery-ui even on npm?

thheller10:09:24

I guess it is

thheller10:09:34

since it modifies the jquery object you probably use (:require ["jquery" :as jq] ["jquery-ui"])) and then use jq with tooltip and such

thheller10:09:56

at least that is how jquery worked without npm 😉

thheller10:09:03

been a while since I used it

flowthing10:09:53

Yeah, I tried that, but it doesn't work. (I get (intermediate value)(intermediate value)(...).tooltip is not a function). Well, I'll keep looking into it. This is a step in migrating an app away from using jQuery UI, so another option is just to bite the bullet and rewrite the code not to use jQuery UI.

thheller11:09:56

hmm how did you use it previously?

thheller11:09:06

you can just include it separately in the page if needed

flowthing11:09:56

Yeah, true, that's one option.

thheller11:09:13

as far as I can tell there are separate js files per "widget" though

thheller11:09:22

the the entire jquery-ui package isn't really using commonjs

flowthing11:09:27

Right, seems like it. I'll need to see which NPM packages I actually need to require.

thheller11:09:56

(:require ["jquery" :as jq] ["jquery-ui"] ["jquery-ui/ui/widgets/tooltip"])) might work

thheller11:09:20

it is all separate .js files working on a global jQuery object

thheller11:09:47

but might be a hassle to include all the dependencies in the right order

thheller11:09:11

I would recommend just building what you need separately on their webpack and including the entire file in its own script tag

flowthing11:09:31

Yes, looks like that might be the best option. ["jquery-ui/ui/widgets/tooltip"] works, but as you said, would need to figure out which dependencies to require as well.

flowthing11:09:37

Many thanks for the help!

Maksym12:09:39

Does anyone have example of how to use "react-navigation-stack" in shadow-cljs? I can't pass one error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object>

This error is located at:
 in RTCView (at View.js:45)
 in View (at AppContainer.js:98)
...
My code in app.cljs is:
(ns 
  (:require
   ["expo" :as ex]
   ["react-native" :as rn]
   ["react" :as react]
   [reagent.core :as r]
   [re-frame.core :as rf]
   [example.events]
   [example.subs]
   ["react-navigation-stack" :as ReactNavigationStack]))

(def text (r/adapt-react-class (.-Text rn)))
(def view (r/adapt-react-class (.-View rn)))
(def app-registry (.-AppRegistry rn))

(def styles
  ^js (-> {:container
           {:flex 1
            :backgroundColor "#fff"
            :alignItems "center"
            :justifyContent "center"}
           :label
           {:fontWeight "normal"
            :fontSize 15
            :color "blue"}}
          (clj->js)
          (rn/StyleSheet.create)))


(defn app []
  (r/create-class
   {:reagent-render
    (fn [props]
      [view {:style  (.-container styles)}
       [text {:style (.-label styles)} "Home page"]
       ])
    }))

(def routes {:Home         {:screen            (r/reactify-component app)}})
(defn app-root []
  ; [c/view {:style  (.-container styles)}
   [(r/adapt-react-class ((.-createStackNavigator ReactNavigationStack)
                          (clj->js routes)
                          (clj->js {:initialRouteName "Home"})))])
   
(defn init []
  (rf/dispatch-sync [:initialize-db])
  (.registerComponent app-registry "main" app-root)
  )

thheller12:09:40

(defn app-root []
  ; [c/view {:style  (.-container styles)}
   [(r/adapt-react-class ((.-createStackNavigator ReactNavigationStack)
                          (clj->js routes)
                          (clj->js {:initialRouteName "Home"})))])

thheller12:09:05

this seems kinda weird. you likely shouldn't recreate that stack on every render?

Maksym12:09:53

yeah you right but in first place I would like to see this code working

thheller12:09:51

sorry I don't know much about react-native or react-anvigation but it looks like you are missing the createAppContainer call maybe? https://github.com/react-navigation/stack/blob/master/example/App.js#L141-L161

Maksym13:09:39

I'm not sure if I need it, let me try your code

thheller12:09:21

(ns 
  (:require
    ["expo" :as ex]
    ["react-native" :as rn]
    ["react" :as react]
    [reagent.core :as r]
    [re-frame.core :as rf]
    [example.events]
    [example.subs]
    ["react-navigation-stack" :as ReactNavigationStack]))

(def styles
  ^js (-> {:container
           {:flex 1
            :backgroundColor "#fff"
            :alignItems "center"
            :justifyContent "center"}
           :label
           {:fontWeight "normal"
            :fontSize 15
            :color "blue"}}
          (clj->js)
          (rn/StyleSheet.create)))

(defn app []
  [:> rn/View {:style (.-container styles)}
   [:> rn/Text {:style (.-label styles)} "Home page"]])

(def routes {:Home {:screen (r/reactify-component app)}})

(defonce nav-stack
  (ReactNavigationStack/createStackNavigator
    (clj->js routes)
    #js {:initialRouteName "Home"}))

(defn app-root []
  [:> nav-stack {}])

(defn init []
  (rf/dispatch-sync [:initialize-db])
  (rn/AppRegistry.registerComponent "main" app-root))

thheller12:09:58

maybe like this? won't play nice with hot-reload though

Maksym13:09:30

it's giving same error sorry 😞

thheller13:09:31

then you might need to rest of the code from that example app?

Maksym13:09:55

I almost burned my kitchen while I was working on this xd I'm going to create sample project and I will send link here

Maksym14:09:11

Here I have a repo with simple use of react-navigation-stack, clone it to reproduce my error. After cloning you will need to run yarn install then shadow-cljs watch app and after project compiles in second terminal run yarn start. @thheller can you take a look, please?

thheller14:09:55

and which JS example are you working off?

thheller14:09:16

I don't do react-native development so somebody else can probably provide more help

thheller14:09:41

I can help you translate a JS example but thats about it

Maksym14:09:22

I used the source code of another clojurescript project

thheller14:09:37

JS example of react-navigation-stack

Maksym14:09:41

I don't have it I built my code after I read source code of another project which uses react-navigation

thheller14:09:12

react-navigation or react-navigation-stack?

thheller14:09:21

I have no clue what either of those are btw

😄 4
Maksym14:09:41

react-navigation, I use react-navigation-stack because they made updates and moved some code to react-navigation-stack

Maksym14:09:32

Okay, np thank you Thomas I appreciate your interest 😄

Maksym14:09:00

Does anyone else can help me? I still have this error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Repo to reproduce: https://github.com/Kruszylo/rn-rf-shadow

thheller14:09:42

look at the explanation of that error

thheller14:09:53

it means that you are trying to render something that isn't a react element

thheller14:09:19

I suspect that it is the result of createStackNavigator, which probably isn't a react component

Maksym14:09:33

I tried to wrap it with r/reactify-component:

(defonce nav-stack
  (r/reactify-component (ReactNavigationStack/createStackNavigator
   (clj->js routes)
   #js {:initialRouteName "Home"}))) 
did not help

thheller14:09:49

you are trying the wrong thing

thheller14:09:04

you can't just turn something that isn't a react component into one

thheller14:09:43

they are passing the result of createStackNavigator to createAppContainer

thheller14:09:56

and that in turn is used in the AppRegistry.registrComponent call

thheller14:09:01

you are missing all of that

David Pham15:09:25

@titov if you want to use react navigation with re-frame, here are a small discussion

David Pham15:09:11

The trick is to create a native dispatcher and an effect and call it whenever you switch panel.

David Pham15:09:30

Similar to the advice in react navigation.

arohner15:09:21

I’m trying to convert a project over to shadow-cljs from cljsbuild/figwheel. I’m seeing

[:frontend] Build failure:
The required namespace "react" is not available, it was required by "reagent/core.cljs".
. I have react in my package.json. How should I deal with reagent requiring cljsjs/react?

Maksym15:09:41

Thank you guys, I fixed my error with your advices and source code of https://github.com/matthiasn/meins I have simple example of usage react-navigation-stack.

thheller15:09:01

@arohner npm install react?

thheller15:09:37

I mean did you actually install it? just adding to package.json doesn't do anything

arohner15:09:56

derp. I was assuming shadow-cljs would implicitly resolve dependencies

thheller15:09:14

nah installing is done via npm

metehan16:09:17

`shadow-cljs - starting via "clojure"
Executable 'clojure' not found on system path.
D:\Dev\Spill\spill_reactnative
λ  [master ≡]clojure
Clojure 1.10.1
user=>

metehan16:09:10

when i write "clojure" clojure runs but shadow-cljs says i don't have it in my system path

thheller16:09:06

@m373h4n you might have an older version without the powershell support?

thheller16:09:33

assuming you have the "official" tools.deps powershell version?

thheller16:09:53

which shadow-cljs version? you omitted that line 😉

metehan16:09:50

shadow-cljs - config: ...\shadow-cljs.edn cli version: 2.8.39 node: v10.16.0 🙂

thheller16:09:38

yeah upgrade. I think I added support for that arround .43 or so

🍺 4
metehan16:09:05

thank you i'll do it now 🙂

alexandergunnarson16:09:36

Hey! quick question — how should I handle Java paths? I have Java files and shadow-cljs appears to not be compiling them

thheller16:09:03

not supported. this is a CLJS build tool. no support for java.

alexandergunnarson16:09:24

Yes, I mean it supports building CLJ of course so I figured I’d ask 🙂

alexandergunnarson16:09:34

Any way to add to the classpath?

thheller16:09:37

doesn\'t support building CLJ

alexandergunnarson16:09:51

Thought it built macro files

thheller16:09:34

it runs clojure but thats about it

thheller16:09:42

no building involved with CLJ

alexandergunnarson16:09:29

By building I mean compiling and using macros, not creating/deploying artifacts

alexandergunnarson16:09:34

I think we’re on the same page though

alexandergunnarson16:09:08

So is there a way to add to the classpath (where pre-compiled Java classes are)? Or do I need to e.g. deploy a local snapshot jar with the compiled Java files and add to the dependencies in shadow-cljs.edn?

thheller16:09:49

just add it as a source path

thheller16:09:59

:source-paths ["target/classes" ...]

thheller16:09:25

I recommend using lein for the CLJ parts though

alexandergunnarson16:09:10

Yeah I’m doing the equivalent of that

alexandergunnarson16:09:23

Working great now! Really impressive tool you’ve made 🙂

😎 4
alexandergunnarson18:09:10

Hey, so, suddenly I’m seeing this error after quitting the shadow-cljs server and restarting the build:

:clj : loading namespace deft.untyped.logic
:clj : loading namespace deft.untyped.fn
:clj : loading namespace deft.untyped.error
[:local.client.search] Build failure:
------ ERROR -------------------------------------------------------------------
 File: /Users/alexandergunnarson/Creating/Code/deft/src/all/deft/untyped/error.cljc
Exception: No namespace: deft.untyped.error found
        clojure.core/the-ns (core.clj:4162)
        clojure.core/ns-publics (core.clj:4189)
        clojure.core/ns-publics (core.clj:4189)
        shadow.build.macros/find-macros-in-ns (macros.clj:63)
However "src/all" is included in the shadow-cljs.edn’s :source-paths. One thing I thought might be the issue is this:
(ns deft.untyped.error
...
#?(:cljs (:require-macros
           [deft.untyped.error :as self])))
However, this namespace uses the same paradigm, and is already loaded prior to the error ns:
(ns deft.untyped.logic
...
#?(:cljs (:require-macros
           [deft.untyped.logic])))

alexandergunnarson18:09:52

Prior to quitting the server and restarting the build, this namespace compiled just fine

alexandergunnarson18:09:14

If I connect via nREPL to shadow-cljs, (require 'deft.untyped.error) works just fine

thheller18:09:59

:clj : loading namespace deft.untyped.logic
:clj : loading namespace deft.untyped.fn
:clj : loading namespace deft.untyped.error

thheller18:09:01

what are those?

alexandergunnarson18:09:13

Logs I’ve added just after namespace declarations

alexandergunnarson18:09:35

So like

(ns <whatever> ...) 

(log-that-stuff) 

...

thheller18:09:01

shadow-cljs clj-repl and (require 'deft.untyped.error) works?

thheller18:09:12

no nrepl please

alexandergunnarson18:09:12

I tried just the nREPL; let me try that ^^^

thheller18:09:19

just removing variables

thheller18:09:44

and (find-ns 'deft.untyped.error)

alexandergunnarson18:09:50

Yeah I was about to say — that doesn’t work

alexandergunnarson18:09:20

Let me try load-file

alexandergunnarson18:09:11

Ahh there you go

[2:0]~shadow.user=> (load-file "/Users/alexandergunnarson/Creating/Code/deft/src/all/deft/untyped/error.cljc")
Syntax error (ClassNotFoundException) compiling at (src/all/deft/untyped/error.cljc:77:1).

deft.Error
I think I cleared out the Java stuff without recompiling it when I deleted the target directory. The logs didn’t allude to a class not being found

alexandergunnarson18:09:17

Anyway sorry to bother you!

thheller18:09:46

weird. that error should have been visible somewhere

👍 4
alexandergunnarson18:09:06

Yeah I’ve seen the ClassNotFoundException show up before in shadow-cljs, but not this time for whatever reason

Ivan Fedorov19:09:59

Is there a rule of a thumb to understand when live reload is gonna to reload the page and when it can do hot update? My app grew and now it’s a reload every time

thheller19:09:47

it is NEVER gonna reload the page

thheller19:09:00

that is something your code is doing if that is happening

Ivan Fedorov19:09:13

Cool, thanks for the fast response!