ingesolvoll / kee-frame Goto Github PK

router.cljc specifies the fx-handler :navigate-to on line 34:
(rf/reg-fx :navigate-to #(apply goto %))

This means that the path vector must be wrapped in an additional vector:
{:navigate-to [[:blabla/index :bla 123]]}

Screen sizes, portrait/landscape and so on.

Having anonymous events might make debugging trickier, it would be nice to allow explicitly naming the events to make it clear what events got fired:

(reg-chain :add-customer
            :fetch-customer-data
            (fn [_ [_ customer]]
              {:http-xhrio {:method          :post
                            :uri             "/customers"
                            :body            customer-data}})
            :set-customer-data
            (fn [{:keys [db]} [_ _ added-customer]] ;; Remember: No DB functions, only FX.
              {:db (update db :customers conj added-customer)}))

I would like to use kee-frame and sente (with websockets) for my SPA. When the browser opens a url like http://kee-frame-sample.herokuapp.com/league/452/table I have to wait for an established websocket connection of sente before the controller can handle the url. Because the controller needs the established websocket to request additional data. Currently I am using a set of re-frame events and app-db modifications to accomplish this. Do you know a more sophisticated approach? An integration in kee-frame would be even nicer.

Fix transforming pipeline so it can be anything, like a function call to merge with defaults.

Like this:

(reg-chain 
    :my-chain
   {:http-xhrio {:uri "cnn.com"}}
   (fn [{:keys [db]} [_ cnn-response]]
      (assoc db :response cnn-response)

Use reg-chain-named feature to implement on-error behavior. Can be used for things like setting "loading" to false.

It would be nice/useful to be able to dispatch multiple events from the :start function of a controller.

Something like this:

(reg-controller :leagues
                {:params (constantly true)
                 :start  [[:leagues/load] [:leagues/something-else]]})

My use case is that I want to dispatch multiple events when the homepage first loads. Or is there an alternative/better way to do this?

Shadow-cljs uses different way of requiring native deps.

When integrating kee-frame into my own project I noticed that refreshing the browser after the navigation had changed didn't work. I quickly realised it was because my server routes did not have knowledge of my UI routes definition.

IIRC your kee-frame demo project effectively ignores the URI and returns the index.html to every GET request. The controllers then dispatch events accordingly to initialise the app. More typically, however, the server may also define API routes, and also return a 404 page if the route doesn't match.

The way I solved this problem was to define my routes in a cljc file and to include them in the server routes definition, like so:

(defn api-routes
  []
  {"sample" :api/sample})

(def ui-routes
  {"" :intro
   "about" :about})

(defn build-ui-routes
  []
  (walk/postwalk #(if (keyword? %) :index %) ui-routes))

(defn build-routes
  [{:keys [api-version] :as info}]
  ["/"
   (concat
    [[#{"" "index.html"} :index]
     ["ping"             :ping]
     ["public/"          :public]
     ["healthcheck"      :healthcheck]
     ["info"             :info]
     [["api/v" :api-version] {"/" (api-routes)}]]
    (build-ui-routes)
    [[true :not-found]])])

The postwalk transformation is necessary for the backend to return the index.html for any of the defined UI routes. Does this seem like a reasonable solution? If so maybe a description in the docs would be helpful to others.

This is a great little library BTW. Thanks for taking the time to write it.

Out of curiosity, why is the library called kee-frame?

Based off this

https://github.com/JoelSanchez/ventas/blob/659ff1df3fc1834eacc0db16c700d56f37cb2a10/src/cljs/ventas/ws.cljs

Should fail early and clearly on any inconsistency

I've had a skim through the source and can't see anything that would preclude us from doing this?

(k/path-for :index)

Uncaught Error: :index is not ISeqable
at Object.cljs$core$seq [as seq] (core.cljs:1223)
at Object.cljs$core$cons [as cons] (core.cljs:3257)

Documentation says this:

[{
;; Is the effect in the map?
:effect-present? (fn [effects] (:http-xhrio effects))

;; Was the dispatch for this effect already set? Then return the value
:explicit-dispatch (fn [effects] (get-in effects [:http-xhrio :on-success]))

;; Framework will call this function to insert inferred dispatch to next handler in chain
:insert-dispatch (fn [effects dispatch] (assoc-in effects [:http-xhrio :on-success] dispatch))
}]

spec.cljc says this:

(s/def ::chain-link (s/keys :req-un [:chain/present? :chain/dispatched? :chain/insert]))

• Chains
• Controllers
• Websockets

Should provide info that re-frame-10x does not show.

Create a section in the readme about doing navigation

I am a little unclear on how the :explicit-dispatch config works and how it affects things.

;; Was the dispatch for this effect already set? Then return the value
:explicit-dispatch (fn [effects] (get-in effects [:http-xhrio :on-success]))

What does this do?

I am wondering how to simulate a link within the same webpage using kee-frame.

For example let's say that at the bottom of a webpage I have an H1 heading called "The Story". And at the top of the webpage I have a link to the "The Story" H1 header. So when the user clicks on the link the browser is scrolled down to the "The Story" H1 heading.

In a non-SPA website the code at the top of the webpage looks like this:
<a href="#story">The Story</a>

At the bottom of the webpage the code looks like this:
<h1 id="story">The Story</h1>

How do I achieve this same functionality using kee-frame?

The chain syntax could work nicely combined with regular functions. Primarily for db handlers, as they would require no processing. FX handlers need processing of on-success and dispatch

I have a website with rows of items. The user clicks on an item and looks at it and then clicks on the back button in his/her browser. When this happens the user's scroll position is lost and he/she has to re-scroll to find where they were in the rows of items.

How can I make it so that when the user clicks on the back button the user is taken back to the previous page with the previous scroll position?

Can you include the latest production version of Bidi?

Might be related to state vars not being initialized for interceptors

Routing API changes
How to implement a custom router
etc

Needs API docs in code, for things like https://cljdoc.xyz/ and IDE browsing

Hi Inge,

Thanks for kee-frame. It is an interesting project. I just started playing with it and I like how it lets/helps you organize your code and events.

One question I have is, in a straight re-frame project with fig wheel you can see the changes in the browser right away. So for example, in the sample project you can change "Show only ongoing matches" and fig wheel compiles and updates the browser.

This does not seem to be working for me using kee-frame. The change is there if I refresh or navigate away and come back but it does not change automatically.

Is this an issue with something I'm doing or is there something else going on?

Thanks.

(First of all, excellent idea for a library. Thank you for sharing this.)

I'm currently getting this error message using [kee-frame "0.2.2"]:

The required namespace "delayed-scroll-restoration.index" is not available, it was required by "kee_frame/interop.cljs"

Note: I'm using shadow-cljs to build

Reverting back to version 0.2.1 fixes the issue.

I'm guessing that the new scroll preservation feature is the culprit? Somehow need to bundle this foreign library into the jar file. Or if the intent is for the consumer to add this dep, could add it to the readme as well.

Currently, the controllers are reloaded when params change, but in some cases it would be useful to specify that the controller should always be reloaded. One workaround can be to use timestamps with something like :params (fn [_] (js/Date.)), but that feels a bit hacky to me. It would be nice to be able to specify something like the following:

(reg-controller
 ::hard-refresh
 {:params ...
  :reload :always
  :start ...
  :stop ...})

The :reload key could hint that the controller should always be reloaded even if :params returns the same value. I think it would make sense to keep the behavior that when :params returns nil, then the controller is not started.

Start function should work with all options omitted. Just show helpful messages on screen where something is missing.

The re-frame version of reg-event-fx is able to take 3 arguments. It is able to take a vector of interceptors.

I need to add some interceptors to some of my events, but I can't because the knee-frame version of reg-event-fx doesn't take interceptors as an argument.

Can interceptor arguments to reg-event-fx be added?

So far working with kee-frame is great.

Leave beginner-friendly guide on main page, details on sub pages. Table of content on main page.

Last params must be persisted between reloads, they are overwritten now.

Particularly for the db syntax, spec might not be a good fit for the more open fx format

Currently reg-chain and reg-chain-named in core do not accept interceptors. Ideally, interceptors should be optional to specify, and should be able to be specified differently at each step. Could extend the spec used to conform the step fns to have an optional vector between the keyword and the fn (or before the fn if not named).

My use case is to check a user's credentials before issuing an HTTP request, and this is a case where chains are especially useful.