shadow just works 🙂

yeah i’m tempted, but i have to have someting done by morning.

this is a luminus generated project

so there are some conventions

that were causing some issues

that never got around to resolving… ugh

@lee.justin.m do you use shadow with lein integration?

i don’t, no

but it is documented and i’ve seen people do it in the channel

ok so just setup the paths and stuff in the shadow=cljs.edn

@eoliphant I know I had issues with cljsjs/react-sticky “6.0.1-0”

It was due to some shifting in React libs around prop-types and incompatibility with the version of reagent/react I had.

The getting nil problem you are having though is odd. Perhaps look at your generated JS and see if you can make sense of that.

My workaround was to just drop the whole react-sticky js sources in a subdir of the project and :foreign-libs it for now 😛

(I too was just hurrying at the time) It sounds like @gadfly361 got it working on a newer version though,

evaluating to nil seems odd. Perhaps it is just figwheel state being messed up

Well i seem to have gotten shadow working

My :foreign-libs was

{:file     "flibs/cljsjs/react-sticky/development/react-sticky.inc.js"
                                                :file-min "flibs/cljsjs/react-sticky/production/react-sticky.min.inc.js"
                                                :provides ["cljsjs.react-sticky"]
                                                :requires ["cljsjs.react" "cljsjs.react.dom" "cljsjs.prop-types"]}

I was using [reagent "0.7.0"]

Just ran regression on theapp and its fine. Trying react sticky next

Yeah im on 0.7.0 as well

you may also try https://github.com/pesterhazy/presumably/blob/master/posts/double-bundle.md

I thought this looked like an interesting way to get npm libs into a cljs project without too much pain (and not using shadow)

I haven’t tried it yet, but plan to soon

I have wondered with the uber webpack solution is as efficient as the shadow technique when it comes to libraries that are packaged in distinct modules. Obviously you can manually do it, but I wonder how much of a pain that is.

@lee.justin.m yeah, I haven’t messed around with it much

but if it “works” that may be good enough in some cases too

I mean if the bundle isn’t too large or whatever

that’s true. i’ve heard that webpack’s docs are easier to understand now but i still have ptsd from the first time i tried to figure that thing out

I don’t know much about it either

I want to spend more time with it

part of me wonders if the right solution isn’t to have the compiler control webpack instead of trying to replicate everything

You mean just keep it separate?

well yes, except instead of making me configure webpack, have the compiler tell webpack what to do

or the build tool

ah I see

shadow does both things and that’s what i use so i’m really thinking off all the work thheller does to basically replicate a lot of webpack functionality

Yeah, makes sense

npm-deps in the main compiler doesn’t really work, as I understand it, because it doesn’t have a fully functioning module resolution algorithm. but webpack does

it’s a half baked idea

Yeah, I haven’t heard a lot of great things on its success as of yet

seems to only work for a handful of cases. I haven’t invested time into trying to use that

I’d imagine trying to replicate something like webpack would not be an easy tasks either'

i’ve tried. it is completely non-functional. i don’t even understand how it could ever work for anything complicated. the npm “maximally flat tree” or whatever it does is INCREDIBLY complicated

where “it” = npm-deps

I think you really want a package.json and npm

and then, to roll everything up, you’ve got a giant pile of ad-hoc code to deal with the 73 ways things can be packaged. webpack has already done that work, and to thhheller’s great credit, he seems to have replicated most of it

I was wanting to spend more time looking through shadows impl to get a feel for what it is doing

Yeah, JS module world is crazy too in general 😛

and getting worse!

question, What's the best clojurescript web framework nowadays based on Re-agent?

@quang re-frame is what you'll likely be interested in

Keechma is a notable alternative

@quang https://github.com/gadfly361/cljs-todomvc

thanks @gadfly361!

cljs-todomvc whoa very nice!

How is component life cycle stuff handled? i.e. render something based on various rout params? (`componentWillMount`, componentDidMount, etc..)

@njj , you need to use the create-class function: http://blog.ducky.io/reagent-docs/0.6.0-alpha2/reagent.core.html#var-create-class

aka Form-3 components https://github.com/reagent-project/reagent/blob/master/docs/CreatingReagentComponents.md#form-3-a-class-with-life-cycle-methods

@njj note that you don’t need component life cycles just to render based on route parameters. you can just pass them to the render function

@lee.justin.m you still switching on :view in your routes?

I recall seeing a main page wrapper, and you populated :view on the routes

I do actually. It’s not the simplest but it does enable me to keep history in my main store which has its uses.

can you share a snippet of that? @lee.justin.m

It’ll be a couple of hours but sure

What is the recommended way to dangerouslySetInnerHtml using reagent?

I'm using showdown.js as a markdown->html converter, and want to inject it's output into a react component.

Looks like an answer here: https://github.com/reagent-project/reagent/issues/14

Hey all, looking for an approach to solving this with Reagent. In React, I can do this:

class NewComponent extends Component {
    constructor () {
        this.state = {
            count: 0;
        }
    }
    render () {
        return (
            <div>
                <button on-click={handleOnClick}>
            <div>
        )
    }

    handleOnClick = () => {
        this.setStat() {
            count: this.state + 1
        }
    }
}

(defn inc-count 
  [state]
  (fn 
    [e]
    (swap! state update-in [:curr-doc] inc))

(defn new-component 
  (let [state r/atom {:count 0}])
  (fn
    []
    [:button {:on-click inc-count state}]))

(defn inc-count
  [state arg1 arg2 arg3 arg4]
      (fn
      [e]
      (swap! state update-in [:curr-doc] inc))

Has anyone successfully integrated Highlight JS or a similar syntax highlighting library with Reagent?

I've added [cljsjs/react-highlight "1.0.5-0"] but can't seem to make it work

(:require [cljsjs.react-highlight])

(def highlight (r/adapt-react-class js/Highlight))

[highlight {:language "clojure"}
               form-str]

It creates the right elements, but they don't get highlighted

@danielcompton Did you add CSS?

I think so

Looking in the inspector I don't see it rewritten with lots of DOM nodes though

and you might need to require cljsjs.highlight.lang.clojure (from memory)

Or not might, you definitely need to require the language foreign-lib

Cljsjs highlight readme mentions this and lists the different namespaces: https://github.com/cljsjs/packages/tree/master/highlight

I'm using the React-highlight version, I'm not sure how different it is?

It is only a wrapper for HightlightJS

Haven't used it but I see it depends on cljsjs.highlight

Thoughts on a good approach to event handler logic ^^

@tkjone If doing it inline is too much, just bind a function inside of a let block

that has the nice property that you don’t have to pass stuff around — the handler can just close over the local state and refer to it directly

it feels very much like an es6 class with methods

@njj the route handler looks like this

(secretary/defroute "/app/notebook/:notebook-id"
                    {notebook-id :notebook-id}
                    (reset! current-route {:page :notebook
                                           :notebook-id (str->int notebook-id)}))

then the toplevel is like this

(defn router-component
  []
  (case (:page @current-route)
    ...
    :notebook [home-component {:view :notebook :notebook-id (:notebook-id @current-route)}]
    ...
    [:div "Page not found."]))

it is simpler to just set put [home-component {:view :notebook :notebook-id (:notebook-id @current-route)}] in the atom directly and have router-component return the contents of the router atom. but if you do it this way, you can store the structured data in your main store and do stuff with it.

Good point. I was exploring that option. That helps with readability and avoiding to pass down too many params, but I still draw issue with the fact that the function itself cannot be tested in isolation...not that this is an issue because in React the same thing would happen...

(defn component
  []
  (let [*local-state (reagent/atom nil)
        handle-on-click (fn [e]
                          (.preventDefault e)
                          ...)]
    (fn []
      [:div {:on-click handle-on-click}])))

right yea, it’s the same tradeoff as in react basically

if your handler is so complicated you want to unit test it you will need to split it off and pass params

but, basically, when I think to myself “I want a method”, I do the above

Hmm, I can get the highlighting working on the page that uses Reagent, but not one that has a custom mranderson shaded version of Reagent

This is likely the issue

Ohh, nope it's because of the CSS rules I had set

True. Are you, or anyone, aware of some well written open source reagent projects?