Add Crocks to cdnjs

[DJohn001]

It wold be nice have Crocks added to cdnjs so that people could get an easy impression and fiddle around with it in like jsfiddle.net or some other online editor with cdnjs support.

[bennypowers]

We're planning to release crocks as JavaScript modules (aka es modules) in a future version. That would let you do:

import compose from 'https://unpkg.com/crocks/helpers/compose.js?module';

Would that work for you?

[DJohn001]

Sorry i'm not very familiar with es modules. What I'm actually trying to do is get the example given in the talk https://www.youtube.com/watch?v=H8DiYOFYQtw working in jsfiddle.net. If you could give me a start with importing for example the "And" function and function from another module, I think I'll figure out the rest by myself.

Thank you for the quick response!

[evilsoft]

@DJohn001 those module bits are gonna be 🔥 But in the mean time does that unkpkg link work for you or your flow?

https://unpkg.com/crocks@0.12.4/dist/crocks.min.js will get you the crocks object, or you can get individual files the way @bennypowers shown above.

I will get a PR on cdnjs as we meet there requirements now and keep this issue posted with updates.

EDIT: Okay that link is not going to work with jsfiddle. will play around after work tonight and see what the heck is going on with that. Something is silly with the UMD there.

ANOTHER EDIT: Sorry about that looks like I was using the browse route and not the raw. Just add that link above to the fiddle and crocks will be available on your window. So you can just:

const { and, safe, propSatisfies } = crocks

[JohannesBraaksma]

Hello,

Thank you this works. One other question which may be a little bit off topic but is triggered by the first answer. I'v copied the code below from my node file. When I try to run it it gave me the error: "SyntaxError: Cannot use import statement outside a module". What does this mean?

`import {and, isNumber} from 'https://unpkg.com/crocks@0.12.4/dist/crocks.min.js'; const gte = a => b => a >= b

const validScore = score => and(isNumber, gte(65))

console.log(validScore(70)(60))`

Kind regards, Johannes

[bennypowers]

Since that file is a script, not a module, you should not try to import from it.

Instead, destructure the functions you need off the global namespace variable that the crocks.min.js script assigns to the window

<script src="https://unpkg.com/crocks@0.12.4/dist/crocks.min.js"></script>
<script>
const {and, isNumber} = crocks
const gte = a => b =>
a >= b

const validScore = score =>
and(isNumber, gte(65))

console.log(validScore(70)(60))
</script>

[DJohn001]

Oke as mentioned in my previous post I changed my question a little bit. I'm now try to get it working in NodeJS it the same way is in the youtube presentation, without downloading the whole package. But it looks like you need to include it in a webpage and run it in the browser.

[bennypowers]

Right, since crocks is currently distributed as CommonJS modules (or as a minified browser bundle), when you need to use it in nodejs, use require

npm install --save crocks
node index.js

// index.js
const {and, isNumber} = require('crocks')
const gte = a => b =>
a >= b

const validScore = score =>
and(isNumber, gte(65))

console.log(validScore(70)(60))

[evilsoft]

@DJohn001 If you wanna use the same node runner thing that I was using during that preso, you could try this: https://gitlab.com/evilsoft/evil-playground

Just clone it to your local box and do an npm install --save crocks then run npm start and you will have the runner going.

[DJohn001]

Ok, thanks for the quick support