I will preface this question by saying I am still very much a novice when it comes to Clojure/Script, so besides the very pointed question I will pose any general feedback about style, usage would be greatly appreciated.
I have been building a very simple application with om.next. For client side routing I have decided to use Secretary. My application displays a list of items, and the intention is that when you click on one of those items you can view the details. The implementation at present is via a simple href on an anchor tag (e.g., an href might look like /items/1, where 1 is the id). This is partially because you should be able to navigate to the details URL directly to see the same view. As simple as this sounds, I cannot for the life of me get this to work as desired.
First, let's look at the salient configuration to the reconciler (for brevity I have removed the implementation details of component render throughout)...
(def init-data {:items [{:id 1
:title "stack overflow"
:description "hello, world."
:photos []}
{:id 2
:title "foo"
:description "bar"
:photos []}]})
(defui ListItem
static om/Ident
(ident [this {:keys [id]}]
[:items/by-id id])
static om/IQuery
(query [this]
[:id :title :description :photos]))
(defui Items
static om/IQuery
(query [this]
[{:items (om/get-query ListItem)}]))
(defmulti read om/dispatch)
(defmethod read :items
[{:keys [state query] :as env} key _]
(let [st #state]
{:value (om/db->tree query (get st key) st)}))
(def app-state (atom (om/tree->db Items init-data true)))
(def reconciler
(om/reconciler {:parser (om/parser {:read read})
:state app-state}))
The astute will see that I am trying to think with links, and this much seems to be working as I would expect. It is when I add this component, and try to use it behind a Secretary route, that everything breaks down...
; I tried other approaches, they failed too
(defui Item
static om/IQueryParams
(params [this]
{:id :not-found})
static om/IQuery
(query [this]
'[[:items/by-id ?id]]))
(defn render-component [component]
(let [app (gdom/getElement "app")]
(doto reconciler
(om/remove-root! app)
(om/add-root! component app)))))
(defroute item-path "/items/:id" [id]
(let [component Item]
; this is already less than ideal, as we know the id
; before the first render of the component
(render-component component)
(om/set-query! (om/class->any reconciler component)
{:id (js/parseInt id)})))
The instance of my Item component does not receive the proper state in props as specified in the query (it receives the entirety of app-state). What is most perplexing to me is that if I execute the same query against app-state manually in the REPL I get the right set of data back...
(get-in #app-state [:items/by-id 1])
; {:id 1, :title "stack overflow", :description "hello, world.", :photos []}
The only thing that has worked for me so far is to bypass the reconciler (creating the component instance myself), passing the query value from app-state as props. But that means I can't mutate state via the reconciler, which is a new horrific wrinkle to an otherwise messy, and unkempt conundrum.
What am I missing here? While I have many ideas, the thing I'm most suspicious about is the initialization of app-state via om/tree->db.
Related
I am trying to define some routes to use on my website. I have them defined like so:
(def routes
["/"
[""
{:name :home
:controllers [{:start (fn [& params] (js/console.log "Home"))
:stop (fn [& params] (js/console.log "Leaving Home"))}]}]
["posts"
[""
{:name :posts
:controllers [{:start (fn [& params] (js/console.log "Posts"))
:stop (fn [& params] (js/console.log "Leaving Posts"))}]}]
(for [post blog/posts]
[(:route post)
{:name (:tag post)
:controllers [{:start (fn [& params] (js/console.log (:name post)))
:stop (fn [& params] (js/console.log "Leaving " (:name post)))}]}])]])
(defn on-navigate [new-match]
(when new-match
(re-frame/dispatch [::e/navigated new-match])))
(def router
(rf/router
routes))
(defn init-routes! []
(rfe/start!
router
on-navigate
{:use-fragment false}))
This is supposed to dynamically create routes for the blog posts I define in my blog file. It works great when I start at either localhost:8280/ or localhost:8280/posts and click the post link that navigates to localhost:8280/posts/blank (the blog post template page). If I am viewing a post (/posts/blank) and refresh the page, it opens to a blank screen and doesnt seem to load any of the compiled javascript. If I reload on either / or /posts it works as expected and allows me to keep browsing.
I have two questions about Reitit that I would be very grateful for some help on:
Why does this happen and what can I change in my route setup to fix this?
I currently am only able to navigate to /posts and not /posts/, how can I register the route with the extra / on the end as well? If I try to define two routes with the same name Reitit does not allow it.
Questions
My webpage only has the output: {:user {}} with the following code.
(ns omn1.core
(:require
[om.next :as om :refer-macros [defui]]
[om.dom :as dom :refer [div]]
[goog.dom :as gdom]))
(defui MyComponent
static om/IQuery
(query [this] [:user])
Object
(render
[this]
(let [data (om/props this)]
(div nil (str data)))))
(def app-state (atom {:user {:name "Fenton"}}))
(defn reader [{q :query st :state} _ _]
(.log js/console (str "q: " q))
{:value (om/db->tree q #app-state #app-state)})
(def parser (om/parser {:read reader}))
(def reconciler
(om/reconciler
{:state app-state
:parser parser}))
(om/add-root! reconciler MyComponent (gdom/getElement "app"))
When I check the browser console, I notice that my query is nil. Why
doesn't it get passed into my reader function?
This comes from a motivation to keep my code to a minimal # of LOC as possible, and also DRY. So I'd like to have one read function that will work with a properly set up database, and normal nominal queries. If you pass regular queries to om/db->tree indeed db->tree does this. db->tree will take any proper query and return you a filled out tree of data. Maybe another way to phrase the question is can someone demonstrate a reader function that does this? I.e. leveraging db->tree to resolve the value of a query. I don't want to write a custom reader for each query I have. If all my queries obey the regular query syntax AND my DB is properly formatted, I should be able to use one reader function, no?
The example provided in the om.next quick start - thinking with links doesn't work:
(defmethod read :items
[{:keys [query state]} k _]
(let [st #state]
{:value (om/db->tree query (get st k) st)}))
as stated before query is nil sometimes, and the 2nd and 3rd arguments are different from what is proposed as how to use this function from the tests which all use: st for both 2nd and 3rd arguments. Confused.
From the Om.Next Quick Start tutorial (https://github.com/omcljs/om/wiki/Quick-Start-(om.next)), read has this signature:
[{:keys [state] :as env} key params]
So there is no access to a query data structure.
Usually the setup is to have a multimethod for each query, and use the query's params to return some part of the state:
(defmulti read (fn [env key params] key))
(defmethod read :animals/list
[{:keys [state] :as env} key {:keys [start end]}]
{:value (subvec (:animals/list #state) start end)})
Here :animals/list is the key of the query. So this is how you can access the key and params of the query.
This does not seem to be happening as the Quick Start tutorial says:
In Om Next application state changes are managed by a reconciler. The
reconciler accepts novelty, merges it into the application state,
finds all affected components based on their declared queries, and
schedules a re-render.
When I change the select box the mutate function updates the state, but the App component's render function never executes. I can see with #app-state in the REPL that the state has changed and I never see the output in the console from the prn in the App's render function. This is all I see in the console:
[1955.847s] [om.next] transacted '[(om-tutorial.core/switch-topic {:name "b"})], #uuid "c3ba6741-81ea-4cbb-8db1-e86eec26b540"
"read :default" :topics
If I update the state from the REPL with (swap! app-state update-in [:current-topic] (fn [] "b")) then the App's render function does execute. Here is the console output:
"read :default" :topics
"read :default" :current-topic
"App om-props " {:topics [{:name "a"} {:name "b"}], :current-topic "b"}
"Topics om-props " {:topics [{:name "a"} {:name "b"}]}
Here is the full code:
(ns om-tutorial.core
(:require [goog.dom :as gdom]
[om.next :as om :refer-macros [defui]]
[om.dom :as dom]))
(enable-console-print!)
(def app-state (atom {:current-topic "a" :topics [{:name "a"} {:name "b"}]}))
(defmulti read (fn [env key params] key))
(defmethod read :default
[{:keys [state] :as env} key params]
(prn "read :default" key)
(let [st #state]
(if-let [value (st key)]
{:value value}
{:value :not-found})))
(defmulti mutate om/dispatch)
(defmethod mutate 'om-tutorial.core/switch-topic
[{:keys [state]} _ {:keys [name]}]
{:action
(fn []
(swap! state update-in
[:current-topic]
#(identity name)))})
(defui Topics
static om/IQuery
(query [this]
[:topics])
Object
(render [this]
(let [{:keys [topics] :as props} (om/props this)]
(prn "Topics om-props " props)
(apply dom/select #js {:id "topics"
:onChange
(fn [e]
(om/transact! this
`[(switch-topic ~{:name (.. e -target -value)})]))}
(map #(dom/option nil (:name %)) topics)))))
(def topics-view (om/factory Topics))
(defui App
static om/IQuery
(query [this]
'[:topics :current-topic])
Object
(render [this]
(let [{:keys [topics current-topic] :as om-props} (om/props this)]
(prn "App om-props " om-props)
(dom/div nil
(topics-view {:topics topics})
(dom/h3 nil current-topic)))))
(def reconciler
(om/reconciler
{:state app-state
:parser (om/parser {:read read :mutate mutate})}))
(om/add-root! reconciler App (gdom/getElement "app"))
Here is the project.clj file:
(defproject om-tutorial "0.1.0-SNAPSHOT"
:description "My first Om program!"
:dependencies [[org.clojure/clojure "1.7.0"]
[org.clojure/clojurescript "1.7.170"]
[org.omcljs/om "1.0.0-alpha24"]
[figwheel-sidecar "0.5.0-SNAPSHOT" :scope "test"]])
I had the same issue in my application and found a workaround (although this might not be the best solution). You can construct your components by passing the om properties of the parent component.
Your ui App could would then look like this:
(defui App
Object
(render [this]
(dom/div nil (topics-view (om/props this)))))
IQuery is definitely the better solution, but I still have the same issue like you. This workaround works in my projects for now and I will definitely take a look at IQuery again.
Edit
The tutorial about Components, Identity and Normalization explains what you have to do to update the UI when it is necessary. This results in a more idiomatic solution.
Om Next is reluctant about triggering re-reads on queries for performance reasons, in order to avoid calling the read functions for them unnecessarily and avoid useless re-renders. To specify that components that query :current-topic should re-render (and the relevant read function called), you can provide these keys in the end of the transact vector:
(om/transact! this
`[(switch-topic ~{:name (.. e -target -value)})
:current-topic])
Reference: https://github.com/omcljs/om/wiki/Documentation-(om.next)#transact
How do you set a button to a particular width? This is one of the things I have tried so far:
(:require [om.next :as om :refer-macros [defui]]
[om.dom :as dom])
(defui HelloWorld
Object
(render [this]
(dom/button #js {:style {:width 300}} (get (om/props this) :title))))
Setting the title of the button works fine and is probably not relevant for this question. I've left it in because it is a typical thing to be doing, and placement of the attributes might be important.
The lein project.clj file has these dependencies:
[org.clojure/clojure "1.7.0"]
[org.clojure/clojurescript "1.7.170"]
[org.omcljs/om "1.0.0-alpha24"]
[figwheel-sidecar "0.5.0-SNAPSHOT" :scope "test"]
I think the problem is due to #js only working on the top level. #JS will work on a top level map {} or vector [], but if you have nested data as values, you need to include additional #js calls for each embedded object.
What you really need is
(:require [om.next :as om :refer-macros [defui]]
[om.dom :as dom])
(defui HelloWorld
Object
(render [this]
(dom/button #js {:style #js {:width 300}} (get (om/props this) :title))))
Have a look at this post on using #js. For readability, rather than nested #js calls, you are often better off using clj->js
I got it to work with this:
(defui HelloWorld
Object
(render [this]
(dom/button (clj->js {:style {:width 300}}) (get (om/props this) :title))))
Note the use of clj->js.
So I want to pass a function to the "name" portion of def.
The problem is:
"First argument to def must be a Symbol"
I'm trying to for instance do:
(def serverNumber 5)
(def (str "server" serverNumber) {:id serverNumber :value 4939})
But I can't find annnnnnny way to do this. Any help would be beyond appreciated :)
First, I have to note that this seems like a bad idea. Why are you trying to generate defs with dynamically-generated names? (As #pst already pointed out, maps are the usual solution for creating bindings with dynamically-generated identifiers.)
Assuming you have a legit reason for doing this (maybe it's part of some library functionality where you're generating defs for the user), you can accomplish this with a macro:
(defmacro def' [sym-exp & other-args]
`(def ~(-> sym-exp eval symbol) ~#other-args))
(def serverNumber 5)
(def' (str "server" serverNumber) {:id serverNumber :value 4939})
Note that this only works at the top level (since macros are run at compile time). If you want to do this in a function or something then you just need to use eval:
(defn def'' [sym-exp & other-args]
(eval `(def ~(-> sym-exp eval symbol) ~#other-args)))
If you just want to create a bunch of agents, maybe something like this will work:
(def servers
(vec (for [i (range 5)]
{:id i :value 4939})))
Then you can just access them by index:
(servers 0)
; => {:id 0, :value 4939}
The run-time equivalent of def is intern:
(intern *ns*
(symbol (str "server" server-number))
{:id server-number :value 4939})