Clojurians Log v2

I'm trying out cljsjs in Klipse, using react-select as an example

It seems to load fine (window.Select is present when checked in devtools)

But when I render the component, I get an exception

Here's the example: http://app.klipse.tech/?container=1&cljs_in.gist=pesterhazy/6c517653945f84a39c1ae3cc8b20c552

The exception is

Uncaught TypeError: (0 , g.default) is not a function
    at t.render (eval at cljs.js.js_eval (klipse.js:74727), <anonymous>:1:29889)
    at p._renderValidatedComponentWithoutOwnerOrContext (klipse.js:1941)
    at p._renderValidatedComponent (klipse.js:1941)
    at performInitialMount (klipse.js:1941)
    at p.mountComponent (klipse.js:1941)
    at Object.mountComponent (klipse.js:1943)
    at performInitialMount (klipse.js:1941)
    at p.mountComponent (klipse.js:1941)
    at Object.mountComponent (klipse.js:1943)
    at h.mountChildren (klipse.js:1942)

hm the issue seems to be in this line: https://github.com/JedWatson/react-select/blob/5aef30df9dba378886f06684f7128216c0f340f6/src/Select.js#L1070

looks like the "classnames" dependency isn't properly loaded

Does it work fine on regular cljs?

hm I think so but I should check

I just looked at the minified js

it checks for window.classNames

and window.classNames is indeed set

so not sure what's going on there

window.classNames("a", "b")
"a b"

also works hm hm

OK, updated. I rearranged the requires so that cljsjs.classnames gets loaded before cljsjs.react-select

http://app.klipse.tech/?container=1&cljs_in.gist=pesterhazy/6c517653945f84a39c1ae3cc8b20c552

but I'm getting another error now

I cannot look at it now

I’m preparing the “Essential Klipse” webinar that is starting in 20 minutes

I'll join in 🙂

Cool

I’m currently testing the webinar connection with Jay

I can confirm that the react-select gist works when you try it in a lein figwheel environment

Hi, my blog is based on jekyll (octopress.. old version!) and i tried using klipse ... and got this error

Pygments can't parse unknown language: language-klipse

after adding JS to the template and changing a blog post to be like:

16 │ <pre><code class="language-klipse">
  17 │ (defrecord Recipe [name link source])
  18 │ </code></pre>

i was wondering if anybody knows if this can work while using pygments

Welcome @clojuregeek

Can you share the HTML code of the page that causes the issue

?

It would be helpful if you can host the page somewhere

and send a link

I get the error when running rake generate so it doens't get as far as to the html

What did you put in your markdown exactly?

i used html tags in like i posted and trid

16 │ 

three ` for closing too 🙂

The problem is that pygment doesn’t know klipse

and it probably has a close list of languages it supports

the markdown engine I use (kramdown) doesnt have such a limitation

Could you replace klipse by clojure?

ok no errors... but i am not seeing the js in the page... let me see what is going on

ok.

@pesterhazy could you try to use the non-minified version of react-select?

https://viebel.github.io/cljsjs-hosted/cljsjs/react-select/development/react-select.inc.js

By including this a script in your html page?

All the cljsjs files are hosted here: https://github.com/viebel/cljsjs-hosted

@viebel ok no errors, i see the html/css in page .. but it doesn't transform the code snippit

did u update the klipse settings - with language-clojure?

@viebel, will try that

I used what the site said for clojure

<script>
    window.klipse_settings = {
        selector: '.language-klipse'// css selector for the html elements you want to klipsify
    };
</script>

you need to modify the selector

the selector contains the CSS selector of the elements you want to klipsify

In your case it should be:

<script>
    window.klipse_settings = {
        selector: '.language-clojure’ // css selector for the html elements you want to klipsify
    };
</script>

ok i can't get it .. i have the selector as clojure as that is wht the class name is of the div containing my clojure code ... the js link and css link is there

Can you share the html file?

https://gist.github.com/rubygeek/d06dad79a6dabfc590ca722e86a10473

There are a couple of issues here:

1. the url of the js file is not the good one. It should be <https://storage.googleapis.com/app.klipse.tech/plugin/js/klipse_plugin.js>

2. the klipse tag should be at the end of the body

3. it seems that pygment modifies the DOM at render time. Therefore the element with the clojure class is completly rewritten. And klipse cannot find it

hm so can't use pygment then?

Can u show me the source of your klipse snippet?

the clojure code in the div?

Including the div as you create it in your source file

markdown

22 │ 

<figure class="code"><figcaption><span></span></figcaption><div class="highlight"><table><tbody><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>
</pre></td><td class="code"><pre><code class="clojure"><span class="line"><span class="p">(</span><span class="kd">defrecord </span><span class="nv">Recipe</span> <span class="p">[</span><span class="nb">name </span><span class="nv">link</span> <span class="nv">source</span><span class="p">])</span>
</span></code></pre></td></tr></tbody></table></div></figure>

What happens if you use three backticks without any language?

looks same without syntax highlighting

and the generate html?

<figure class="code"><div class="highlight"><table><tbody><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>
</pre></td><td class="code"><pre><code class=""><span class="line">(defrecord Recipe [name link source])</span></code></pre></td></tr></tbody></table></div></figure>

Let me think...

ok i need to take a call

well in 5 mins 🙂

you need to find a way to tell pygment to let you use a language pygment doesn’t know

like klipse or eval-clojure

it should leave the div as is

@clojuregeek there might be a solution

http://octopress.org/docs/plugins/backtick-codeblock/

It is written that "Passing 'plain' disables highlighting"

could you try `plain ?

ok i will do it now

ok i did.. doesn't render

you need to find a way to tell pygment to let you use a language it doesn’t know

so that it leaves the <pre><code> element as is

can you show me the generated html when you used `plain ?

<figure class="code"><figcaption><span></span></figcaption><div class="highlight"><table><tbody><tr><td class="gutter"><pre class="line-numbers"><span class="line-number">1</span>
</pre></td><td class="code"><pre><code class=""><span class="line">(defrecord Recipe [name link source])</span></code></pre></td></tr></tbody></table></div></figure>

looks the same as when i didn't use anything after the `

anyways thanks for your help, i don't want to take too much of your time. I'll try again later and see if i can remove pygments .. i might need to update a few things too

last thing

can you try to have the div as is in the markdown

I mean something like:

<div class=”clojure”> (map inc [1 2 3]) </div>

The problem with that approach is that if you have < or > inside your code you need to html-escape those characters

Another option is to try `text

It might live the dom element as is

yeah i already tried it that way

so i dunno! 🙂 i give up for now 🙂

maybe after a good night of sleep, things will come up in a nicer way...

🙂

@clojuregeek I just tried to use pygment instead of rouge in my jekyll blog and it works fine

wow, I got react-select to work

with ~~~klipse

http://app.klipse.tech/?container=1&amp;cljs_in.gist=pesterhazy/16b7e25123b3786431c94a3581d8b3d3

@viebel hmm..

@pesterhazy Nice!

So the issue is with the minified js?

kind of hacky though, I went around cljsjs

well using the unminified js was definitely helpful in debugging

did you discover the root cause of the issue?

@viebel i am going to have to look at this another day but thanks for your help 🙂

I think so

because react-input-autosize/dist/react-input-autosize.js wasn't loaded

or not loaded early enough

YES, that's it, it works with cljsjs too

whne u explicitly loads it?

exactly

that really wasn't obvious from the error though

and in regular cljs the bug did not occur?

Can u send the working snippet with cljs

?

@viebel, https://gist.github.com/pesterhazy/6c517653945f84a39c1ae3cc8b20c552

I had to specify classnames and react-input-autosize explicitly

And in regular cljs you don’t need to specify them?

exactly

it's specified as a dependency

where?

https://github.com/cljsjs/packages/blob/a486e6af0389a1d2754e3a21e7772f082b208815/react-select/build.boot#L39

hmmm

So this is a bug inside klipse

Sorry about that

not at all

In debugging this I learned many things

how to load javascripts files using goog.net.Xhr and eval

how to load css files

the fact that unpkg is awesome

🙂

do you want me to create an issue?

Ye

Yes

And I’d love to see a PR with your load-many function

hehe 🙂

it's kind of suboptimal because it loads js/css files sequentially

Don’t worry about that

we can optimize later

cool

Also, we need to think about the CSS

yeah I agree

for the klipse plugin, it’s not an issue, you can add them to the page

But the klipse app, it’s a big issue

plunkr etc have a way to add stylesheets

but that may be overkill I don't know

Without that you cannot demo react-select at all!

By the way, the css files are uploaded in cljsjs-hosted https://github.com/viebel/cljsjs-hosted/blob/master/cljsjs/react-select/common/react-select.inc.css

It means that you don’t need unpkg at all

hm yes I can also get it from there

still need to create a <link> tag

(Why did you write that unpkg is awesome? Is it more than a cdn that hosts js/css)

well I think it contains everything that is in npm

Oh! That’s great

Hence, u*npkg*

hmm that doesn't make as sense as it did in my head 🙂

Wait a minute

This is great news for klipse

Think about the js klipse snippets

We could serve any js package by just getting its name

You could have data-js-package=d3 and boom

d3 on your page!

yes 🙂

if they provide a standalone package in their npm bundle? (not sure I know what I'm talking about)

who are “they”?

the author of the npm package

You’re right

Sometimes the npm package contains only the source and you need to build it

But I think that most of the popular packages include a bundle

And unpkg is smart:

If you omit the file path, unpkg will try to serve the browser bundle if present, the main module otherwise.

from: https://unpkg.com/#/

Going to sleep...

Feel free to open an issue also for this feature (loading js package from unpkg)

good night