Fork me on GitHub
#clojurescript
<
2018-08-27
>
john03:08:19

@pppaul Some folks have tried various inline css schemes, like https://github.com/roman01la/cljss and https://github.com/Jarzka/stylefy

john03:08:51

Not sure if that's what elm's style elements are though

chrisps07:08:39

How is this supposed to look like:

(defn content []
   (let [ctx (-> js/document
                (.createElement "canvas")
                (.getContext "2d" #js {:antialias true}))]
      (set! (.-font ctx) "30px Arial")
      (let [m  ((ctx (.-measureText) "some text here"))]
        [:p (str "m:" (.-width m))])))
I just want to find the width of some text using the canvas object

chrisps07:08:44

Reading I would expect the last let to be (. .-measureText ctx "some text here") but I fail at this

chrisps07:08:21

ah, field vs method

chrisps07:08:41

yep, that was it, nevermind

chrisps08:08:54

well, for others to learn, this works:

(defn content []
   (let [ctx (-> js/document
                (.createElement "canvas")
                (.getContext "2d" #js {:antialias true}))]
      (set! (.-font ctx) "30px Arial")
      (let [m (.measureText ctx  "some text here")]
         [:p (str "m: " (.-width m))])))

pesterhazy12:08:54

I've found this function useful for making sure a resource is only created once: https://gist.github.com/pesterhazy/aa1d8dbd43ac4b369e41101daa865525

pesterhazy12:08:12

Especially when reloading with figwheel, you often want to ensure that there's only one resource of a certain type, like a setInterval, and event handler or some kind of stateful object. Often you need to dispose of the resource before creating a new one.

👍 12
exit216:08:52

not sure what the right channel for this is, but is there a way to copy files with cljsbuild? I want to copy some styles from a node_module into the directory with the rest of my resources

Garrett Hopper17:08:54

When using a node library that requires es2015 classes, is there a way I can create them in ClojureScript? Do I need to do some sort of Object/create magic?

pesterhazy17:08:34

@ghopper

cljs.user=> (def o (reify Object (hello [this] (prn :ok))))
#'cljs.user/o
cljs.user=> (.hello o)
:ok

Garrett Hopper17:08:52

@pesterhazy I don't think this is actually what I'm looking for. I need to create a new es2015 class that extends a class provided by a library.

Garrett Hopper17:08:02

I'm not sure what about the es6 class this library really needs. I'm attempting to replicate it somehow. https://github.com/addyosmani/es6-equivalents-in-es5#classes seems useful

pesterhazy17:08:45

yes, something like that should work

Garrett Hopper17:08:43

That looks very promising, thanks! 😄

pesterhazy17:08:36

@ghopper lmk if that works out for you

drcode20:08:15

Hi, can someone point me to an example of using the :npm-deps option of the clojurescript compiler in upstream packages? Is it possible to have clojurescript project A use clojurescript library B (via a deps.edn reference) and then have the compiler download the npm deps required for library B when I compile project A?

drcode20:08:37

Thanks for any tips, just having a bit of trouble wrapping my head around how npm dependencies work when creating a clojurescript library...

thheller20:08:49

@drcode B must declares its dependencies in a deps.cljs at a source root with just {:npm-deps {"the-lib" "version"}}

thheller20:08:43

that just covers the "download the npm deps part". for the compilation I don't actually know.

dnolen20:08:30

@drcode before going down that path I’m assuming you’ve made sure that said library will get through Closure compilation - it’s still a coin toss at this point

drcode20:08:14

OK @thheller I think that explains the piece I was missing, that sounds correct- Let me give that a shot

drcode20:08:11

@dnolen thanks- yes, I hope so. I'm taking some libraries I have that use cljsjs and am trying to get them working with just npm packages, so in theory at least I should be past the compilation hurdle already.

dnolen20:08:51

@drcode right I would be careful going down that path

dnolen20:08:10

you’re foisting a very alpha feature onto users - CLJSJS works

dnolen20:08:37

whether library X will work is not up to us at all

dnolen20:08:49

but a matrix of JS practice and what Closure understands

drcode20:08:03

@dnolen good to know 👍 I think I understand there's limitations at this point with externs inference, just personal experimentation right now

dnolen20:08:16

nothing to do with externs inference

dnolen20:08:20

externs inference works

dnolen20:08:32

I’m using that all the time with non-trivial libraries + Webpack

dnolen20:08:01

:npm-deps pushes random JS libraries fully through Closure compilation

dhkl06:08:29

Thanks for this insight!

Garrett Hopper20:08:06

@pesterhazy I think I managed to get the prototype extend stuff working, though I never really understood it. Eventually I realized with the library I'm using, I can call the call function directly and it'll work. I though I'd tried that to begin with. :man-shrugging: Thanks for pointing me in that direction.

dnolen20:08:07

totally different thing

dnolen20:08:41

if you’re using :npm-deps you don’t need externs-inference

drcode20:08:41

@dnolen I can (sorta) see that, hopefully with some more learning/experimentation on my part will help me understand these subtleties

dnolen20:08:51

orthogonal features

dnolen20:08:28

but suffice to say you’re not the only person confused about this, and it’s not the user’s fault

dnolen20:08:36

we need more docs clearly documenting what is for what

dnolen20:08:46

still - rewinding a bit - curated CLJSJS libs are still the best way forward for transitive deps for end users

dnolen20:08:04

now with externs-inference and :global-exports it doesn’t have to be non-idiomatic

dnolen20:08:14

nor do you have maintain externs

drcode20:08:37

@dnolen OK, maybe then I need to rethink what I'm doing then... hmmm.

dnolen20:08:43

publishing random JS libs to CLJSJS has never been easier

dnolen20:08:49

you don’t have to do anything

dnolen20:08:14

other than bundle X up into a JAR and write the deps file for it

dnolen20:08:59

and based on my experience so far with random JS libs - the curation of CLJSJS is actually value

dnolen20:08:02

so much bad stuff out there

dnolen20:08:28

and the dep chains are completely out of control

✔️ 8
👍 4
gaverhae21:08:34

@drcode To clarify, as the cljsjs homepage says: > Since ClojureScript 0.0-2727 the :foreign-libs option provides an excellent way to integrate Javascript into ClojureScript applications. CLJSJS provides Javascript libraries and their appropriate extern files packaged up with deps.cljs. CLJSJS aims to concentrate packaging efforts to make everyone’s life a little easier. i.e. what you get from CLJSJS is a prepackaged foreign-libs declaration along with correct externs. That means that your "advanced compilation" will be [advanced compilation of your code, respecting included externs in the renaming phase] + [JS lib], both in the same file, but without the JS lib ever going through the Closure compiler (though generally you do get a minified version). On the other hand, when you include a library with npm-deps it does go through the full Closure compiler along with the rest of your code. So no externs involved and DCE and all the goodness IF that library happens to be compatible with Closure, but a lot of JS code out there is not compatible with Closure at all and can yield anything from compilation errors to compilation going fine but the resulting code not loading to code running fine under whitespace and simple but completely breaking down in advanced compilation.

darwin21:08:24

I agree that CLJSJS provides actual value but overly optimistic or unaware users could still get ‘Caught in the Pit of Despair’ as explained in this talk by @spinningtopsofdoom: https://www.youtube.com/watch?v=tpXfASdPteI&amp;t=8m10s

👍 8
jsa-aerial21:08:48

I'm not sure where the best place to ask this is, so I will try here first. Say you have a Clojure/ClojureScript app which is bundled into a JAR. The Cljs part is browser based. It has resources for the cljs/js stuff in usual place resources/public/.... Now when this thing is used - deps pull it in and requires (in both Clj and Cljs) make it available - is there a way to add new 'resources' (in the common sense) that augment those in resources...?? I suppose this is a general web/web-server/browser question...

john21:08:29

Like the app is a lib?

dnolen21:08:53

@darwin a lot of this stuff is pre (to be fair, working) externs-inference

dnolen21:08:06

I’ve not written externs since the last release

john21:08:10

@jsa-aerial or do you just mean adding more at run time for a certain instance?

jsa-aerial21:08:23

Yeah, the 'app' is a lib

john21:08:17

hmmm I have some vague ideas on how that could work with the new tools deps system, but not absolutely sure, and would depend on the build tool. For lein I'm not sure. I don't recall trying it.

jsa-aerial14:08:02

@U050PJ2EU To be honest, I just don't know enough to have an idea. Thanks for the response though!

john21:08:50

But I mean, I'd imagine you could slurp some files and populate some java properties io/resource

john21:08:19

Which is where all those files are held, right?

jeaye22:08:40

I have a couple of React components, in JS, which I'd like to compile alongside my ClojureScript app (using :foreign-libs). Unfortunately, they're using ES6 imports to import each other, which CLJS doesn't support (reportedly due to Closure not yet supporting it). What are my options for being able to compile these components with CLJS?

jeaye22:08:50

I've tried transforming them to CommonJS, with babel, but CLJS still doesn't handle the requires. I've tried combining them, with webpack, but I get back a bundle that does a bunch of eval calls and, when I require it within CLJS, the ns object I get back is empty. I don't know enough about the JS ecosystem to try much more just yet, so I'm hoping there's a more trodden path.

thheller22:08:16

if you are up for using a completely different build tool 😉

dnolen22:08:05

@jeaye or just use Webpack for that stuff

jeaye22:08:11

I'm up for any solutions which work, really, provided I can still use leiningen as well. Looks like shadow-cljs can, but I've never used it.

dnolen22:08:18

your bundle is a single foreign lib that can provide whatever you want - and with global exports you get externs inference automatically

dnolen22:08:42

and your requires look like normal CLJS requires

dnolen22:08:18

re: Webpack eval calls

jeaye22:08:20

Right, as mentioned, I have give this a go and webpack was the only way I could get CLJS to require the JS without issues. However, the object I get back when I require (if I js/console.log it) is empty.

dnolen22:08:27

webpack --mode=production

dnolen22:08:34

eval be gone

dnolen22:08:04

the empty ns object thing I don’t really understand

dnolen22:08:36

but anyways - that’s the trodden path - far as I know it’s working for people and I’m using it myself on something for work

jeaye22:08:43

Generating the bundle with npx webpack. All is as intended?

jeaye22:08:33

Similarly, if I require it from Node, I get an empty object just the same. Is that supposed to be the case?

const dist = require('./dist/bundle');
console.log(dist); // {}

jeaye22:08:49

@dnolen Ok, found it. Seems to me like the webpack CLJS guide would need to be updated. https://github.com/webpack/webpack/issues/1625

jeaye22:08:31

I needed:

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    libraryTarget: 'commonjs', // added
    library: 'UI' // added
  },