This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-05-14
Channels
- # beginners (74)
- # boot (1)
- # cider (6)
- # clj-kondo (8)
- # cljs-dev (30)
- # clojure (195)
- # clojure-ecuador (1)
- # clojure-europe (2)
- # clojure-italy (51)
- # clojure-nl (47)
- # clojure-spec (9)
- # clojure-sweden (27)
- # clojure-uk (63)
- # clojurescript (84)
- # cursive (41)
- # datascript (17)
- # datomic (16)
- # docker (1)
- # emacs (10)
- # events (2)
- # graalvm (2)
- # graphql (37)
- # juxt (2)
- # nrepl (20)
- # nyc (2)
- # off-topic (26)
- # onyx (3)
- # pedestal (4)
- # perun (19)
- # planck (1)
- # reagent (9)
- # reitit (4)
- # shadow-cljs (208)
- # spacemacs (6)
- # tools-deps (4)
hello, I'm trying to integrate code with some JS api that extensively uses JS classes, I've tried to write some helpers to make class definitions on the cljs side, but I'm having trouble to call the original class constructor, by their API definition I must extend their class and call super
on it, but when I try to call the constructor directly it throws Cannot call a class as a function
this is how I'm trying to do it:
(defn js-class [{::keys [constructor] :as definition}]
(let [c (or constructor (fn []))
proto (gobj/get c "prototype")]
(doseq [[k v] (dissoc definition ::constructor)]
(case k
::extends
(do
(gobj/extend proto (gobj/get v "prototype"))
(js/Object.setPrototypeOf c (gobj/get v "prototype")))
(gobj/set proto (name k) v)))
c))
(def NumControl
(js-class
{::extends js/Rete.Control
::constructor (fn [emitter key readonly]
(let [this (js-this)]
(.call js/Rete.Control this key)
(gobj/set this "render" "react")
(gobj/set this "component" ReactNumControl)
(gobj/set this "props" {:emitter emitter :ikey key :readonly readonly})))}))
the problem is the line that does (.call js/Rete.Control this key)
, that throws the error... is there a way around this?
Hm. This is what I came up with awhile ago https://github.com/Lokeh/hx/blob/master/src/hx/react.cljs#L112
@lilactown thanks, that's much cleaner, but I don't see it calling the parent constructor, you have some example of that?
I did checked the source of goog/inherit
, but seems like it depends on its own implementation to call the parent constructor (it sets constructor
as a property in the prototype)
but when I try to call that same thing from a class defined by js, that's illegal
throws Cannot call a class as a function
like this
https://medium.com/@robertgrosse/how-es6-classes-really-work-and-how-to-build-your-own-fd6085eb326a
> However, the example above notably avoids doing anything in the constructors. In particular, it avoids super, a new piece of syntax that allows subclasses to access the properties and constructor of the superclass. This is much more complicated, and is in fact impossible to fully emulate in ES5, although it can be emulated in ES6 without using class syntax or super through use of Reflect.
its starting to feel like maybe CLJS should provide some way to generate actual class code, I'm seeing a lot of movement in that direction in JS and some libraries are starting to depend on that, it sucks but without that they seem to start getting out of reach =/
I was able to kind of bypass that by writing constructor helpers in JS and using those functions to generate the classes, but quite bad and limited, I have to write one new helper for each new class I want to extend
export function defineControl(f) {
return class extends Rete.Control {
constructor(key, ...args) {
super(key);
f.apply(this, [key, ...args]);
}
}
}
export function defineComponent(name, f) {
return class extends Rete.Component {
constructor(...args) {
super(name);
f.apply(this, args);
}
}
}
Yeah would probably be worth opening a ticket in jira and / or bringing it up in #cljs-dev
yeah, luckily I can count on that in this case 🙂
and thanks for pointing that out
hehhe, glad you got something out of this 🙂
yeah, I find quite powerful the ways these node editors are used in 3d engines (for shading composition)
yes, hehe
I just tried using Reflect.construct
, even that doesn't do the trick =/
seems like its more a helper to call a regular fn as if it was calling no new
, but fails to calls actual class constructors
I was basing off this gist from the article I posted above https://gist.github.com/Storyyeller/fd3daab2cfba563a45d28e119054434d#file-medium-12-js
Any pointers to React VR via clojurescript
querySelector returns a single element
if you meant querySelectorAll
which returns array-like, then you’d need to convert it into array or seq first
(-> array-like array-seq (nth 2))
just use aget
on the result of .querySelectorAll
directly. only need to wrap it if you want other seq functions
I guess aget
is not safe or recommended, isn’t it?
ah right, that recommendation was for aget + objects
the homepage for clojurescript looks a little messy. what information useful(about how to use features) is located at NEWS
.
I can just found some old stuff under REFERENCE
and GUIDES
.
You can file issues for the web site at https://github.com/clojure/clojurescript-site
If I'm new to ClojureScript, just finished reading the startup. I have cljs.main
, then I want to configure the production build.
Then I go to REFERENCE
, nothing useful I can find here. Then TOOLS
, find some code, but for leiningen
.
Quick Start guide is using cljs.main and has a section on production builds https://clojurescript.org/guides/quick-start is that what you are looking for?
I may write script to do that, but according to https://github.com/pesterhazy/cljs-spa-example I think I can provide some edns for each build. so I want to find the document on http://clojurescript.org.
ok, so the example above is not using cljs.main directly, if you looks into dev script you’ll see that it runs figwheel.main
which leads to https://figwheel.org/
yes cljs.main can consume edn config with --compile-opts
flag, try clj -m cljs.main --help
Yes, I can use the -co
. thanks for the help! @roman01la
isn’t there a website where I can type some CLJS and it will show me the JS output live?
Maria.cloud also has a top-level js-source
form for this purpose. (It was recently added - previously you had to issue a command to do this.) Example: https://www.maria.cloud/gist/a4594f54aada18ff48edef61902d4e1b?eval=true
yeah, I was struggling to find the site it was on: http://blog.klipse.tech/clojure/2016/03/17/klipse.html
Maria.cloud also has a top-level js-source
form for this purpose. (It was recently added - previously you had to issue a command to do this.) Example: https://www.maria.cloud/gist/a4594f54aada18ff48edef61902d4e1b?eval=true
always be aware that compiler options may affect the code that gets generated. so code compiled this way may not match actual production code.
I'm trying out devcards, and I am able to create cards and display them successfully. But, when I try and display a react component, it doesn't play very nicely. The naive approach I took was to do this:
(defcard simple-carbon-button
"Simple carbon button"
(sab/html
[:> Button {} "TEST"]))
But, that throws an Uncaught Invariant Violation
error.
What is the correct way to display react components in devcards?As an aside, I am requiring the Button
component, and it renders just fine with an r/render
.
@sansaripour I’m not sure that [:> Button {} "TEST"]
is valid for sablono
I see. Any ideas on how I should go about rendering that react component within the devcard?
you can use reagent to convert hiccup to React elements: (reagent.core/as-element [:div "foo"])
ah thank you
that did the trick
Can someone please point me to the project/language that lets you use cljs by just dropping a script tag. I remember seeing it shared on numerous occasions but can’t remember what it was called.
I just remembered by asking haha