whamtet / simpleui

JS Free Single Page Applications
https://simpleui.io
Eclipse Public License 2.0
251 stars 15 forks source link

Adding components to routes #1

Closed michaeleverson closed 3 years ago

michaeleverson commented 3 years ago

Hi Matthew,

I'm having fun figuring out your library, but I have a question.

What is the intended way to add the routes for components not directly in the dependency tree?

For example the 'click to edit' demo here

There are two components form-edit and form-ro, and the route declaration.

When you macroexpand the make-routes in the demo there is no mention of the other component being accessible in the routes:

(macroexpand 
  `(make-routes "/edit-demo"
      (fn [req]
         (form-ro req "Joes" "Blow" "joe@blow.com"))))

you get:

Class: clojure.lang.PersistentVector
Contents: 
  0. "/edit-demo"
  1. [ "" { :get ( ctmx.rt/redirect "/edit-demo/" ) } ]
  2. [ "/" { :get ( clojure.core/fn [ miracleworld.routes.demo/req ] ( miracleworld.routes.demo/form-ro miracleworld.routes.demo/req "Joes" "Blow" "joe@blow.com" ) ) } ]
  3. [ "/form-ro" ( clojure.core/fn [ x__9847__auto__ ] ( clojure.core/-> x__9847__auto__ miracleworld.routes.demo/form-ro ctmx.render/snippet-response ) ) ]

I understand that the example is incomplete, ie. I think that we need to wrap the components so they are in a response map when we are returning them {:status 200 :headers ... :body ... } and actually set the routes to be used by the server, etc. When I do this, I still get a 404 response for the /edit-demo/form-edit Or /form-edit endpoint.

Just wondering what is the best way to add form-edit to the routes? Or is it something that I'm missing?

Thanks again for the interesting library.

(I’m using the latest version of the code from the repo as of today)

whamtet commented 3 years ago

Hey Mike, that’s a good point. For the demo site I’m actually running on lambda which uses an undocumented approach because ctmx is still a bit experimental.

https://github.com/whamtet/ctmx-lambda/blob/main/src/main/clojurescript/ctmx/lambda.clj#L37 https://github.com/whamtet/ctmx-lambda/blob/main/src/main/clojurescript/ctmx/lambda.clj#L37

I chose lambda partly to save hosting costs because the limitation of ctmx is that you always need a backend for rendering. The lambda code is also running clojurescript because node starts up faster than JVM. What the above link does is looks inside the clojurescript analyzer map to inspect all the ‘defs’ in a given namespace and then filters for defs with metadata ^:endpoint. That is how both /form-edit and /form-ro are included as endpoints.

On 25 May BE 2564, at 04:09, michaeleverson @.***> wrote:

Hi Matthew,

I'm having fun figuring out your library, but I have question.

What is the intended way to add the routes for components not directly in the dependency tree?

For example the 'click to edit' demo here https://whamtet.github.io/ctmx/examples/click-to-edit/ There are two components form-edit and form-ro, and the route declaration.

When you macroexpand the make-routes in the demo there is no mention of the other component being accessible in the routes:

(macroexpand `(make-routes "/edit-demo" (fn [req] (form-ro req "Joes" "Blow" @.***")))) you get:

Class: clojure.lang.PersistentVector Contents:

  1. "/edit-demo"
  2. [ "" { :get ( ctmx.rt/redirect "/edit-demo/" ) } ]
  3. [ "/" { :get ( clojure.core/fn [ miracleworld.routes.demo/req ] ( miracleworld.routes.demo/form-ro miracleworld.routes.demo/req "Joes" "Blow" @.***" ) ) } ]
  4. [ "/form-ro" ( clojure.core/fn [ x9847auto ] ( clojure.core/-> x9847auto miracleworld.routes.demo/form-ro ctmx.render/snippet-response ) ) ] I understand that the example is incomplete, ie. I think that we need to wrap the components so they are in a response map when we are returning them {:status 200 :headers ... :body ... } etc. and when I do that in my code, I still get a 500 response for the /form-edit endpoint.

Just wondering what is the best way to add form-edit to the routes? Or is it in there and I'm missing something?

Thanks again for the interesting library.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/whamtet/ctmx/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOSIPYGW7YO26FQ2VQJWVLTPK6AJANCNFSM45N6PKBA.

michaeleverson commented 3 years ago

Thanks. I will give that a read.

Is that what should happen with the reference to extract-endpoints-all mentioned in the make-routes macro?

(defmacro make-routes [root f]
  (let [[short full] (strip-slash root)]
    `[~short
      ["" {:get (rt/redirect ~full)}]
      ["/" {:get ~f}]
      ~@(extract-endpoints-all f)]))

(Link to file)

whamtet commented 3 years ago

No, I'm setting up a demo now that runs the ctmx examples using the default configuration. Will commit in a sec.

michaeleverson commented 3 years ago

No worries. I'll look at what you commit and do a more thorough look myself.

Cheers.

whamtet commented 3 years ago

Ok,

I've included the first example, pull the latest changes and cd into /demo.

lein run

Then visit http://localhost:3000.

Will port the other examples shortly.

michaeleverson commented 3 years ago

Excellent. I can see how that works.

Thanks for your time, Matthew. Much appreciated. ✌️

whamtet commented 3 years ago

@michaeleverson, I've now added the other examples to the demo project, so you can see how they work. I'd appreciate your feedback on ctmx and any suggestions on how to improve the architecture if you have an idea.

michaeleverson commented 3 years ago

@whamtet No worries, will do. 👍