Fork me on GitHub
#hoplon
<
2016-09-03
>
jjttjj02:09:40

With a fresh hoplon-castra template project I'm getting a

java.io.FileNotFoundException: Could not locate ring/core/protocols__init.class or ring/core/protocols.clj on classpath.
                                     
On windows 10 when I run boot dev. Anyone know what might be causing this?

alandipert02:09:57

@jjttjj I think the template is broken, gotta downgrade clj and ring

alandipert02:09:33

I helped someone else recently but didn't have time to fix template, you can try searching slack logs

onetom04:09:22

@jamieorc we are using it in production but we had to make some compromises because of the above mentioned limitations. but it's that you have to think a lot less already about CSS and you don't have to write separate CSS files at all because the equivalent of CSS in hoplon UI is custom elements with styles (and behaviour) specified within clojurscript directly. alternatively you can put your style related hoplon/ui element attributes into hash-maps and just use them as you would use classes in html, eg:

(def btn
 {:p 8 :b 1 :bc c/grey :depth 2})

(def primary
 (merge btn {:c c/blue})

(def secondary
 (merge btn {:c c/white})

(def flat
 (merge btn {:b 0 :depth 0}))

(button primary "OK")
(button secondary flat "Cancel")

mac12:09:41

Shouldn't any javascript with the extension .inc.js placed in a source-path be included ?

onetom13:09:53

@mac good question... i already forgot how does it work. but here is a quick reference about how cljsjs packages include a deps.cljs file which describe what .inc.js files should be included and under which namespace https://github.com/clojure/clojurescript/wiki/Dependencies#cljsjs

mac13:09:39

@onetom Thanks, already looked at that, unfortunately didn't help.

onetom13:09:01

if you can share some more specifics, i might be able to help

onetom13:09:06

do you have issues with :optimization :none too or only in :simple and :advanced modes?

onetom13:09:56

what tasks do you use? boot-cljs, boot-cljsjs, boot-hoplon? where does the .inc.js file comes from? the same src/ dir as your .cljs sources?

mac13:09:11

The .inc.js is in the same src folder as my cljs (actually cljs.hl)

mac13:09:47

This is the boot task I am using: (deftask dev "Build clause-diff for local development." [] (comp (watch) (speak) (hoplon) (reload) (cljs-repl) (cljs) (serve :port 8000)))

mac13:09:26

@onetom sorry that should have been directed at you

onetom14:09:38

and do you have any deps.cljs file which refers to your .inc.js?

onetom14:09:49

or i think you can specify the foreign-lib options to your cljs boot task too

mac14:09:41

no deps.cljs file

mac14:09:12

I will add one and see if that works

mac14:09:34

@onetom now I get completion in the broser console on some of the objects I expect the .inc.js to create but it throws a Uncaught ReferenceError:

onetom14:09:17

here is the most minimal example i could come up with now to showcase how the pieces fit together:

mkdir -p /tmp/incjs/src/app
cd /tmp/incjs
echo 'console.log("hello from lib.inc.js")' > src/lib.inc.js
echo '{:foreign-libs [{:file "lib.inc.js" :provides ["ext.lib"]}]}' > src/deps.cljs
echo '(ns app.core (:require [ext.lib])) (js/console.log "Hello from the app.core ns")' > src/app/core.cljs
boot -d adzerk/boot-cljs -d org.clojure/clojurescript -s src/ cljs target

---------- Result ------------

> ag lib.inc.js target/

target/main.out/cljs_deps.js
3:goog.addDependency("../lib.inc.js", ['ext.lib'], []);

target/main.out/lib.inc.js
1:console.log("hello from lib.inc.js")

onetom14:09:15

or what's even more telling is this:

> ag ext.lib target/

target/main.out/app/core.cljs
1:(ns app.core (:require [ext.lib])) (js/console.log "Hello from the app.core ns")

target/main.out/app/core.cljs.cache.edn
1:{:rename-macros {}, :renames {}, :use-macros {}, :excludes #{}, :name app.core, :imports nil, :requires {ext.lib ext.lib}, :uses nil, :require-macros nil, :doc nil}

target/main.out/app/core.js
4:goog.require('ext.lib');

target/main.out/cljs_deps.js
3:goog.addDependency("../lib.inc.js", ['ext.lib'], []);
4:goog.addDependency("../app/core.js", ['app.core'], ['cljs.core', 'ext.lib']);

onetom14:09:40

so the lib.inc.js is indeed included into the results

mac14:09:54

@onetom I don't even see a target dir only a out dir

onetom14:09:04

u need the target task for dumping the compilation results into a directory

onetom14:09:16

but u only want that if you want to inspect it

onetom14:09:56

the serve task can serve those files directly from the classpath which is the union of all the temporary directories which were created by the various boot tasks

onetom14:09:44

those are also cached on this and inspectable after boot has finished running

onetom14:09:15

if you run my example, then u can see all the temp dirs and their contents here:

find ~/.boot/cache/tmp/private/tmp/incjs/

onetom14:09:05

the full path of your project is mirrored under ~/.boot/cache/

onetom14:09:04

but since the temp-dir names are random, it's not the first place where you want to start debugging 🙂

onetom14:09:17

the out dir is created by the cljs-repl task, btw. i have the feeling that it's creating it without the knowledge of boot actually...

mac14:09:01

@onetom boot blows up when I try to put the deps.cljs file into src

mac14:09:20

@onetom gives me this: java.lang.UnsupportedOperationException: nth not supported on this type: PersistentArrayMap

onetom14:09:11

i got that too if i included the hoplon task into the pipeline

onetom14:09:00

let me try to supply it as cljs task compilation options

onetom15:09:38

no luck on my side 😞 how about you? any progress?

mac15:09:40

@onetom No unfortunately not

mac15:09:18

@onetom Trying to go back to basic and loading a bundle using a script tag but that isn't even working

onetom15:09:58

currently for me even a (comp (watch) (hoplon) (cljs)) task doesn't work... if i take out the watch task, then it compiles... so there is something seriously wrong in my environment

mac15:09:22

What would prevent a regular script tag from executing in Hoplon?

mac15:09:56

@onetom What would prevent a regular script tag from executing in Hoplon?

onetom16:09:29

that hoplon's html function overwrites the whole body upon start, including the head dom element which probably started loading your script

onetom16:09:53

but what do you mean by "regular script tag"?

onetom16:09:09

in hoplon you are not dealing with tags. u have functions creating dom elements.

mac16:09:17

@onetom So now I got the lib to load from a script tag as a dirty hack. If the script creates a object called pm (which I can access in the console, how do I access that from Hoplon.

mac16:09:57

@onetom In hoplon (script :src "js/module.js")

onetom16:09:12

js/pm although that reference will be obfuscated if your compile your cljs with :optimization :advance

onetom16:09:13

the problem though is that is not a script tag, but as i said, it's a function creating a script dom element

onetom16:09:44

programmatically created script dom elements are executed asynchronously

onetom16:09:05

so if you would write:

(script :src "js/module.js")
(script "some js code using your module.js")
it would be executed "in parallel", unlike if you would write this html:
<script src="js/module.js"/>
<script>some js code using your module.js</script>
which loads module.js before executing the next script tag

onetom16:09:00

so you really want to rather compile your js/module.js into your app as a google closure library module, so it runs at the right time during the boot process of your app

onetom16:09:21

you can put your own boot code into a (with-init! (js/pm "initialize module.js")) so it runs when all scripts are loaded, if im correct

mac16:09:26

@onetom My intention was to access the pm object from clojurescript inside the hoplon page, but (js/pm) gives me indexDOT_html.cljs:11Uncaught ReferenceError: pm is not defined

onetom16:09:40

so try to access it from within a with-init! macro

onetom16:09:31

that is just using jquery's https://api.jquery.com/ready/ function under the hood

mac16:09:40

@onetom Yeah that seems to work, thanks a lot!

onetom16:09:19

it just delays running your code which references your library until your library is actually loaded because the whole dom is constructed

mac16:09:31

@onetom I think I have to find a way to load the lib correctly. with-init throws all kinds of nasty errors like ncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

flyboarder17:09:03

@mac have you tried building a closure foreign lib?

mac17:09:00

@flyboarder Yes, but I cannot seem to make it work with.

flyboarder17:09:04

@mac You are trying to include an editor yes? Depending on how it loads additional modules may have problems with cljs. I spent the last week trying to get cofemirror and ace editor working without luck. Switched to simplemde which is sorta working now.

mac17:09:27

@flyboarder Yes, prosemirror actually, which is a cousin of codemirror. It is based on commonjs modules and there is not a browser ready lib avaliable.

flyboarder17:09:20

So to package it, you will need to build a browserify package, otherwise it will not load add the require() stuff

mac17:09:26

@flyboarder It is exceedingly annoying. I feel like am back to fiddling with Java classpaths or something.

flyboarder17:09:10

Haha yeah, would simplemde work for you? I have it working kinda hack-ishly

flyboarder17:09:27

It is also a cofemirror based editor

flyboarder17:09:33

But only for markdown

mac17:09:49

@flyboarder I managed to build a demo bundle using browserify. No unfortunately I need prosemirror sepcifically for my use case.

flyboarder17:09:40

Ok, does prosemirror have addons? Or can it safely be bundled without bloating?

flyboarder17:09:28

@mac if you have compressed the JS lib already I can help you package it for cljsjs

mac17:09:05

@flyboarder that sounds great

flyboarder17:09:55

@mac we should move this convo here then #cljsjs

flyboarder18:09:21

incase anyone else would like to use a markdown editor, hoplon/brew now has simplemde component

mac18:09:49

@flyboarder Is there a way to get a Hoplon cell to update in accordance with the value of a javascript object attribute

flyboarder18:09:09

^Portion of the hoplon/javelin readme

laforge4919:09:31

@flyboarder I'm using form/input/:disabled, passing a function (disabled? cell), but the function is not being called when the cell changes. Any ideas?

flyboarder19:09:49

@laforge49 I think i follow but can you post the hoplon input tag?

flyboarder19:09:55

yeah you need disabled? to either return a cell= or be wrapped in one

laforge4919:09:20

Ah! Thanks 🙂

laforge4919:09:33

Interesting. It works with :keyup but not :change

flyboarder21:09:38

@laforge49: is change not working at all?

flyboarder21:09:51

I pretty much only use change

laforge4922:09:13

With change you don't get the cell updated on each character, so the function which checks to see if there have been any changes (disabling the buttons if there has been nothing entered) does not work. 🙂

flyboarder22:09:38

Ah I see, yeah I think there is a slight delay when typing in a regular input box before change is fired

laforge4922:09:49

I think change does work if you click elsewhere.

flyboarder22:09:21

Right when it loses focus or blurs

laforge4922:09:17

so keyup is cleaner. and not too busy, as I don't send to the server unless submit is clicked. 🙂

laforge4922:09:17

Hoplon is so beautiful. There is so much power under such a simple interface.

laforge4922:09:02

I think only I'd like a hoplon cheatsheet so I could see all the options.

flyboarder22:09:14

Hmmmm that is a good idea, a hoplon cheat sheet written in hoplon, maybe part of the main website? We should post ideas for it on the wiki!

laforge4922:09:44

gotta go now. Thanks for all the software!