Fork me on GitHub
#shadow-cljs
<
2018-09-05
>
ghiden04:09:04

how do you guys create a JS class and extend React.Component in cljs?

justinlee04:09:47

@ghiden most people use a library on top of react, such as reagent or rum

justinlee04:09:12

you can also use create-react-class, which is a helper library that lets you create components using a function instead of es6 classes

justinlee04:09:39

if you really want to extend and use the es6 machinery, then you need to use the goog.obj libraries from the google closure library

ghiden04:09:09

i guess that's the only path

ghiden04:09:50

I didn't know about create-react-class and that looks more comfortable for cljs

justinlee04:09:07

that’s what reagent uses. i believe it will be supported indefinitely going forward and should be fine to use

ghiden04:09:54

trying to create a small component that can be used from js so I'm staying away from reagent

thheller08:09:31

@nolan can you be a bit more specific about the defspec issue? what is the problem? do you actually mean clojure.test/run-tests not cljs.test/run-tests?

Nolan12:09:51

hey @thheller, apologize for the poor clarity. i have one clojure.test/deftest and one clojure.test.check.clojure-test/defspec defined in test/some-test, and originally i was trying to use the default runner namespace (i.e. shadow.test.browser) with the following build config:

:tests
  {:target :browser-test
   :test-dir "target/test"
   :devtools {...}
when i built and ran the tests, it would ignore the defspec test and only run the deftest. If i called clojure.test.check/quick-check directly within a deftest, it would run and work fine, but forfeit the test.check reporting line. adding a custom :runner-ns to the build config fixed the problem, where start looks like this:
(ns runner-main
  (:require [clojure.test :as t]
                 [some-test]))

(defn start []
  (t/run-tests `some-test))

... ;; trivial stop and init
let me know if this helps, happy to provide more info

thheller12:09:40

is this actually CLJS code though? :browser-test isn't meant to run clojure code

thheller12:09:47

its kinda hard to tell due to the aliasing

Nolan12:09:40

its a .cljc file in testing another .cljc file, but all the code works in cljs

thheller12:09:21

ah ok found it

thheller12:09:41

hmm ok yes you are going to need a custom runner

thheller12:09:00

and you are going to need to set (ns ^:dev/always the-runner)

Nolan12:09:09

ok, no worries. that works fine for me. just wanted to float it out there and see what came back. thanks for the investigation and input!

thheller12:09:21

since the run-tests is a macro that need to be recompiled

Nolan12:09:34

yeah, i imagined it had to do with the macro

thheller12:09:53

the shadow.test.browser thing works by hacking the deftest macro so it doesn't have to use the macro to actually run the tests

👍 1
thheller12:09:03

but it doesn't hack the defspec thing and therefore can only "discover" the extra tests in the macro

thheller12:09:31

meh I don't like this. maybe I'll revise the deftest hack and just use the macro after all

thheller12:09:25

I'll think about it for a bit

thheller12:09:31

using a custom runner is totally fine though

nolan33012:09:07

right on! thanks again for your help

kanwei16:09:32

FYI shadow no longer works on [org.clojure/clojure "1.10.0-alpha7"]

kanwei16:09:35

java.lang.Exception: Unable to resolve spec: :clojure.core.specs.alpha/args+body
clojure.lang.ExceptionInfo: Unable to resolve spec: :clojure.core.specs.alpha/args+body

thheller16:09:20

@kanwei thx for the note. I can fix that later.

kanwei16:09:42

broke a lot of older libs as well... gonna be a tough upgrade

wilkerlucio16:09:50

we have to also consider this still an alpha, I can understand the excitement to use it but can be painful to maintain something that's subject to keep on rapid changes =/

thheller16:09:41

its not a problem in this case though since I just abused the core.specs to validate CLJS code

thheller16:09:54

but nowadays CLJS has its own "core" specs so I should just use those

wilkerlucio16:09:22

glad to hear that, I though was worst 🙂

thheller17:09:28

hmm turns out that the core.specs were committed but are not actually in use

thheller17:09:49

I'll see if they actually work. It would be fine not using the specs at all too.

jjttjj17:09:09

I'm to use the antizer library working with shadow-cljs, which depends on the cljsjs version of antd. I've made my stub file as follows:

(ns cljsjs.antd
  (:require ["antd" :as antd]))


(js/goog.exportSymbol "antd" antd)
and npm installed antd. but the value of antd in that namespace is just coming up as nil. Anyone know what might be going on here?

thheller17:09:04

run shadow-cljs browser-repl and try (require '["antd" :as x]) x

jjttjj18:09:31

hmmm I'm getting a console warning:

You are using a whole package of antd, please use  to reduce app bundle size.
and a repl timeout

thheller18:09:52

haha nice that they yell at you now for including that

thheller18:09:06

@jjttjj try again after the timeout. REPL is just too impatient for it to complete

jjttjj18:09:17

oh wait yeah it seems to be loading properly now

jjttjj18:09:47

[0:0]~cljs.user=> x
#js {:Affix #object[Affix], :Anchor #object[Anchor], :AutoComplete #object[AutoComplete], :Alert #object[Alert], :Avatar #object[Avatar], :BackTop #object[BackTop], :Badge #object[Badge], :Breadcrumb #object[Breadcrumb], :Button #object[Button], :Calendar #object[Calendar], :Card #object[Card], :Collapse #object[Collapse], :Carousel #object[Carousel], :Cascader #object[Cascader], :Checkbox #object[Checkbox], :Col #object[Col], :DatePicker #object[PickerWrapper], :Divider #object[Function], :Dropdown #object[Dropdown], :Drawer #object[Drawer], :Form #object[Form], :Icon #object[global], :Input #object[Input], :InputNumber #object[InputNumber], :Layout #object[Adapter], :List #object[List], :LocaleProvider #object[LocaleProvider], :message #js {:open #object[open], :config #object[config], :destroy #object[destroy], :success #object[Function], :info #object[Function], :warning #object[Function], :error #object[Function], :loading #object[Function], :warn #object[Function]}, :Menu #object[Menu], :Modal #object[Modal], :notification #js {:open #object[open], :close #object[close], :config #object[config], :destroy #object[destroy], :success #object[Function], :info #object[Function], :warning #object[Function], :error #object[Function], :warn #object[Function]}, :Pagination #object[Pagination], :Popconfirm #object[Popconfirm], :Popover #object[Popover], :Progress #object[Progress], :Radio #object[Radio], :Rate #object[Rate], :Row #object[Row], :Select #object[Select], :Skeleton #object[Skeleton], :Slider #object[Slider], :Spin #object[Spin], :Steps #object[Steps], :Switch #object[Switch], :Table #object[Table], :Transfer #object[Transfer], :Tree #object[Tree], :TreeSelect #object[TreeSelect], :Tabs #object[Tabs], :Tag #object[Tag], :TimePicker #object[TimePicker], :Timeline #object[Timeline], :Tooltip #object[Tooltip], :Mention #object[Mention], :Upload #object[Upload], :version "3.9.1"}

thheller18:09:09

looks non-nil-ish

thheller18:09:03

don't see a reason why it would be nil in the build then? how did you check that?

jjttjj18:09:58

connected to nrepl and switched to the cljsjs.antd ns

jjttjj18:09:51

getting a bunch of

shadow.js.js:87 shadow-cljs - failed to load module$node_modules$fbjs$lib$UnicodeBidi
shadow.js.jsRequire @ shadow.js.js:87
shadow$provide.module$node_modules$fbjs$lib$UnicodeBidiService @ UnicodeBidiService.js:46
shadow.js.jsRequire @ shadow.js.js:85
shadow$provide.module$node_modules$draft_js$lib$EditorBidiService @ EditorBidiService.js:18
shadow.js.jsRequire @ shadow.js.js:85

...

shadow.js.jsRequire @ shadow.js.js:87
shadow$provide.module$node_modules$antd$lib$index @ index.js:485
shadow.js.jsRequire @ shadow.js.js:85
shadow.js.require @ shadow.js.js:111
(anonymous) @ cljsjs.antd.js:3
shadow.js.js:87 shadow-cljs - failed to load module$node_modules$antd$lib$index
errors in js console

thheller18:09:29

right .. don't ignore those. thats why antd doesn't exist

jjttjj18:09:54

ohhh so those are deps ant needs in the cljsjs namespace?

thheller18:09:10

yes those are all getting pulled in by antd

thheller18:09:34

but I included antd fine just a few days ago. which version are you using?

thheller18:09:47

hmm although I didn't try the full package

jjttjj18:09:57

[cljsjs/antd "3.8.0-0"]

thheller18:09:33

hehe that version is pretty irrelevant. the npm version matters. but its already listed above :version "3.9.1"

thheller18:09:43

I'll see whats up with that

thheller18:09:23

hmm it compiles and loads without errors for me?

jjttjj18:09:49

weird! hmmm maybe i installed the wrong npm version let me try that again

thheller18:09:23

oh wait. still had an old install

thheller18:09:41

3.8.2 worked but 3.9.1 also works fine

thheller18:09:00

can you post the full errors you get? usually only the first and the last one matter though

thheller18:09:12

you have a bad page encoding

thheller18:09:44

set <meta charset="UTF-8"> in your HTML (or the http header if you control those)

jjttjj18:09:24

oh wow that worked! thanks so much

jjttjj18:09:33

probably should have posted that full output sooner, sorry!

thheller18:09:58

btw don't use antizer and rather import only what you need from antd directly

thheller18:09:21

otherwise your final output goes up by more than 1mb since you get everything

thheller18:09:35

(thus their warning on startup)

jjttjj18:09:20

gotcha thanks

ghiden23:09:42

I'm trying use this library https://github.com/rauhs/hicada for creating React component. But not sure if I'm doing it right. hicada expects you to write your own macro. So here is something that works.

ghiden23:09:12

I wish I could use 'react.createElement for :create-element but it complains that ReferenceError: react is not defined

lilactown23:09:49

you will probably need to require react in whatever namespace you use it in

ghiden23:09:44

when I use the macro, I require react too

ghiden23:09:35

forgot to mention that i get this error when I use this component from other project

ghiden23:09:55

i use npm-module as target