This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-09-16
Channels
- # announcements (2)
- # architecture (3)
- # beginners (72)
- # cider (15)
- # cljs-dev (27)
- # clojure (85)
- # clojure-berlin (3)
- # clojure-dev (4)
- # clojure-europe (7)
- # clojure-italy (7)
- # clojure-nl (6)
- # clojure-uk (17)
- # clojurescript (63)
- # clojutre (10)
- # core-async (10)
- # cursive (10)
- # datomic (34)
- # events (4)
- # fulcro (3)
- # funcool (8)
- # incanter (1)
- # jackdaw (1)
- # jobs-discuss (6)
- # joker (4)
- # kaocha (7)
- # leiningen (8)
- # nrepl (6)
- # off-topic (11)
- # reagent (8)
- # shadow-cljs (119)
- # spacemacs (11)
- # sql (11)
- # vim (30)
- # yada (2)
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.
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"))
.
since it modifies the jquery object you probably use (:require ["jquery" :as jq] ["jquery-ui"]))
and then use jq
with tooltip and such
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.
Right, seems like it. I'll need to see which NPM packages I actually need to require.
(:require ["jquery" :as jq] ["jquery-ui"] ["jquery-ui/ui/widgets/tooltip"]))
might work
I would recommend just building what you need separately on their webpack and including the entire file in its own script
tag
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.
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)
)
(defn app-root []
; [c/view {:style (.-container styles)}
[(r/adapt-react-class ((.-createStackNavigator ReactNavigationStack)
(clj->js routes)
(clj->js {:initialRouteName "Home"})))])
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
(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))
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
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?
I don't have it I built my code after I read source code of another project which uses react-navigation
react-navigation, I use react-navigation-stack because they made updates and moved some code to react-navigation-stack
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
I suspect that it is the result of createStackNavigator
, which probably isn't a react component
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@titov if you want to use react navigation with re-frame, here are a small discussion
The trick is to create a native dispatcher and an effect and call it whenever you switch panel.
Similar to the advice in react navigation.
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?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
.
`shadow-cljs - starting via "clojure"
Executable 'clojure' not found on system path.
D:\Dev\Spill\spill_reactnative
λ [master ≡]clojure
Clojure 1.10.1
user=>
when i write "clojure" clojure runs but shadow-cljs says i don't have it in my system path
Hey! quick question — how should I handle Java paths? I have Java files and shadow-cljs appears to not be compiling them
Yes, I mean it supports building CLJ of course so I figured I’d ask 🙂
Any way to add to the classpath?
Thought it built macro files
By building I mean compiling and using macros, not creating/deploying artifacts
I think we’re on the same page though
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?
Thanks!
Yeah I’m doing the equivalent of that
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])))
Prior to quitting the server and restarting the build, this namespace compiled just fine
If I connect via nREPL to shadow-cljs, (require 'deft.untyped.error)
works just fine
:clj : loading namespace deft.untyped.logic
:clj : loading namespace deft.untyped.fn
:clj : loading namespace deft.untyped.error
Logs I’ve added just after namespace declarations
So like
(ns <whatever> ...)
(log-that-stuff)
...
I tried just the nREPL; let me try that ^^^
Yeah I was about to say — that doesn’t work
Let me try load-file
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 foundAnyway sorry to bother you!
Yeah I’ve seen the ClassNotFoundException
show up before in shadow-cljs, but not this time for whatever reason
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
https://code.thheller.com/blog/shadow-cljs/2019/08/25/hot-reload-in-clojurescript.html
Cool, thanks for the fast response!