luciano/reitit
1
0
Fork 0
mirror of https://github.com/metosin/reitit.git synced 2025-12-16 16:01:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add frontend-malli example

Browse source
This commit is contained in:
Juho Teperi 2024-02-26 11:12:54 +02:00
parent ca434f9c05
commit 2fe448c3d8
9 changed files with 181 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
examples/README.md
View file

@ -7,6 +7,13 @@
## frontend-prompt ## frontend-prompt
## frontend-re-frame ## frontend-re-frame
## frontend ## frontend
Frontend example with clojure.spec coercion.
## frontend-malli
Frontend example with Malli coercion.
## http-swagger ## http-swagger
Coercion with Spec and Swagger generation. Coercion with Spec and Swagger generation.

13
examples/frontend-malli/README.md Normal file
View file

@ -0,0 +1,13 @@
# reitit-frontend example
## Usage
```clj
> lein figwheel
```
Go with browser to http://localhost:3449
## License
Copyright © Metosin Oy and collaborators

1
examples/frontend-malli/checkouts/reitit-core Symbolic link
View file

@ -0,0 +1 @@
../../../modules/reitit-core

1
examples/frontend-malli/checkouts/reitit-frontend Symbolic link
View file

@ -0,0 +1 @@
../../../modules/reitit-frontend

1
examples/frontend-malli/checkouts/reitit-schema Symbolic link
View file

@ -0,0 +1 @@
../../../modules/reitit-schema

55
examples/frontend-malli/project.clj Normal file
View file

@ -0,0 +1,55 @@
(defproject frontend "0.1.0-SNAPSHOT"
:description "FIXME: write description"
:url "http://example.com/FIXME"
:license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"}
:dependencies [[org.clojure/clojure "1.10.1"]
[ring-server "0.5.0"]
[reagent "0.10.0"]
[ring "1.8.1"]
[hiccup "1.0.5"]
[org.clojure/clojurescript "1.10.773"]
[metosin/reitit "0.7.0-alpha7"]
[metosin/reitit-malli "0.7.0-alpha7"]
[metosin/reitit-frontend "0.7.0-alpha7"]
;; Just for pretty printting the match
[fipp "0.6.23"]]
:plugins [[lein-cljsbuild "1.1.8"]
[lein-figwheel "0.5.20"]]
:source-paths []
:resource-paths ["resources" "target/cljsbuild"]
:profiles {:dev {:dependencies [[binaryage/devtools "1.0.2"]]}}
:cljsbuild
{:builds
[{:id "app"
:figwheel true
:source-paths ["src"]
:watch-paths ["src" "checkouts/reitit-frontend/src"]
:compiler {:main "frontend.core"
:asset-path "/js/out"
:output-to "target/cljsbuild/public/js/app.js"
:output-dir "target/cljsbuild/public/js/out"
:source-map true
:optimizations :none
:pretty-print true
:preloads [devtools.preload]
:aot-cache true}}
{:id "min"
:source-paths ["src"]
:compiler {:output-to "target/cljsbuild/public/js/app.js"
:output-dir "target/cljsbuild/public/js"
:source-map "target/cljsbuild/public/js/app.js.map"
:optimizations :advanced
:pretty-print false
:aot-cache true}}]}
:figwheel {:http-server-root "public"
:server-port 3449
:nrepl-port 7002
;; Server index.html for all routes for HTML5 routing
:ring-handler backend.server/handler})

10
examples/frontend-malli/resources/public/index.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Reitit frontend example</title>
</head>
<body>
<div id="app"></div>
<script src="/js/app.js"></script>
</body>
</html>

10
examples/frontend-malli/src/backend/server.clj Normal file
View file

@ -0,0 +1,10 @@
(ns backend.server
(:require [ring.util.response :as resp]
[ring.middleware.content-type :as content-type]))
(def handler
(-> (fn [request]
(or (resp/resource-response (:uri request) {:root "public"})
(-> (resp/resource-response "index.html" {:root "public"})
(resp/content-type "text/html"))))
content-type/wrap-content-type))

83
examples/frontend-malli/src/frontend/core.cljs Normal file
View file

@ -0,0 +1,83 @@
(ns frontend.core
(:require [reagent.core :as r]
[reitit.frontend :as rf]
[reitit.frontend.easy :as rfe]
[reitit.coercion.malli :as rsm]
[fipp.edn :as fedn]))
(defn home-page []
[:div
[:h2 "Welcome to frontend"]
[:button
{:type "button"
:on-click #(rfe/push-state ::item {:id 3})}
"Item 3"]
[:button
{:type "button"
:on-click #(rfe/replace-state ::item {:id 4})}
"Replace State Item 4"]])
(defn about-page []
[:div
[:h2 "About frontend"]
[:ul
[:li [:a {:href "http://google.com"} "external link"]]
[:li [:a {:href (rfe/href ::foobar)} "Missing route"]]
[:li [:a {:href (rfe/href ::item)} "Missing route params"]]]
[:div
{:content-editable true
:suppressContentEditableWarning true}
[:p "Link inside contentEditable element is ignored."]
[:a {:href (rfe/href ::frontpage)} "Link"]]])
(defn item-page [match]
(let [{:keys [path query]} (:parameters match)
{:keys [id]} path]
[:div
[:h2 "Selected item " id]
(if (:foo query)
[:p "Optional foo query param: " (:foo query)])]))
(defonce match (r/atom nil))
(defn current-page []
[:div
[:ul
[:li [:a {:href (rfe/href ::frontpage)} "Frontpage"]]
[:li [:a {:href (rfe/href ::about)} "About"]]
[:li [:a {:href (rfe/href ::item {:id 1})} "Item 1"]]
[:li [:a {:href (rfe/href ::item {:id 2} {:foo "bar"})} "Item 2"]]]
(if @match
(let [view (:view (:data @match))]
[view @match]))
[:pre (with-out-str (fedn/pprint @match))]])
(def routes
[["/"
{:name ::frontpage
:view home-page}]
["/about"
{:name ::about
:view about-page}]
["/item/:id"
{:name ::item
:view item-page
:parameters {:path [:map
[:id :int]]
:query [:map
[:foo {:optional true} :keyword]]}}]])
(defn init! []
(rfe/start!
(rf/router routes {:data {:coercion rsm/coercion}})
(fn [m] (reset! match m))
;; set to false to enable HistoryAPI
{:use-fragment true})
(r/render [current-page] (.getElementById js/document "app")))
(init!)