diff --git a/docs/dominoes-live.md b/docs/dominoes-live.md index 05f486d56..123f10032 100644 --- a/docs/dominoes-live.md +++ b/docs/dominoes-live.md @@ -43,8 +43,9 @@ So, at the top we need this: !!! Note "Live Code Fragment" - Above, you'll see two vertically stacked boxes. The top one contains the live code. You can edit that code, if you want. - The one below shows the result of evaluating that code. In this particular case, evaluating a `ns` gives nil which is not that interesting. + Above, you'll see a live code editor. You can change the code, if you want. + The colored box at the bottom shows the result of evaluating that code. + In this particular case, evaluating a `ns` gives nil which is not that interesting. ## The Data Schema @@ -90,7 +91,8 @@ To send an event, call `dispatch` with the event vector as the argument. ``` For our simple app, we do this ... -
(defn dispatch-timer-event ;; <-- defining a function +
+(defn dispatch-timer-event ;; <-- defining a function [] ;; <-- no args (let [now (js/Date.)] ;; <-- obtain the current time (rf/dispatch [:timer now]))) ;; <-- dispatch an event @@ -193,7 +195,7 @@ the application, which means they return a modified version of `db`. ### :timer -
+
(rf/reg-event-db :timer (fn [db [_ new-time]] ;; notice how we destructure the event vector @@ -222,13 +224,12 @@ This event handler is slightly unusual because it ignores both of its arguments. There's nothing in the `event` vector which it needs. Nor is the existing value in `db`. It just wants to plonk a completely new value into `app-db` -
+
(rf/reg-event-db ;; sets up initial application state :initialize (fn [ _ _ ] ;; arguments not important, so use _ {:time (js/Date.) ;; returned value put into app-db :time-color "orange"})) ;; so the app state will be a map with two keys -nil
@@ -247,12 +248,11 @@ For comparison, here's how we could have written this if we **did** care about t When the user enters a new colour value (into the input field) the view will `(dispatch [:time-color-change new-colour])` (more on this below). -
+
(rf/reg-event-db :time-color-change (fn [db [_ new-color-value]] (assoc db :time-color new-color-value))) ;; compute and return the new application state -nil
Notes: diff --git a/docs/src/re_frame/docs.cljs b/docs/src/re_frame/docs.cljs index 827771ec5..007982b70 100644 --- a/docs/src/re_frame/docs.cljs +++ b/docs/src/re_frame/docs.cljs @@ -72,24 +72,35 @@ (str/join "\n" (cons (.-message v) (sci/format-stacktrace (sci/stacktrace v))))) -(defn editor-result [{:keys [return-str status] :as eval-result}] - [:div {:style {:white-space "pre-wrap" - :margin-top "0.5rem" - :font-size "0.75em" - :padding "0 2px 0 2px" - :background-color (if (success? eval-result) "#eeffee" "#ffeeee") - :color "#444" - :font-family "monospace"}} - return-str]) +(defn success? [eval-result] (#{:success :success-promise} (:status eval-result))) + +(def green-check [:span {:style {:color "green"}} "✓"]) +(def red-x [:span {:style {:color "red"}} "✗"]) + +(defn pass-fail [pass?] (if pass? green-check red-x)) + +(defn editor-result [{:keys [return-str] :as eval-result} + & [{:keys [format]}]] + (let [pass? (success? eval-result) + format (or format :full)] + [:div {:style {:white-space "pre-wrap" + :margin-top "0.5rem" + :padding "0 0.5rem 0 0.5rem" + :background-color (if pass? "#eeffee" "#ffeeee") + :color "#444" + :font-family "monospace"}} + [:span {:style {:pointer-events "none" + :user-select "none"}} + [pass-fail pass?] " "] + (when (or (not pass?) (#{:full} format)) + [:span {:style {:font-size "0.75em"}} return-str])])) (defn validation [validators {:keys [source-str status] :as eval-result}] (when (and status (seq validators)) (into [:div {:style {:margin "1rem"}}] ((apply juxt validators) eval-result)))) -(defn success? [eval-result] (#{:success :success-promise} (:status eval-result))) - (defn editor - [{:keys [source-str eval-result !view validators evaluable? editable? eval-on-init? on-change hover? focus?]}] + [{:keys [source-str eval-result !view validators evaluable? editable? eval-on-init? on-change hover? focus? result-format]}] (r/with-let [eval! (fn [] (p/let [[status return-val] (eval-str (cm-string @!view))] (binding [*print-length* 20] @@ -132,7 +143,7 @@ :padding 2 :opacity (if (or @hover? @focus?) 1 0.5)}} "eval"]])] - [editor-result @eval-result] + [editor-result @eval-result {:format result-format}] [validation validators @eval-result] (when @eval-result [:hr])] (finally (.destroy @!view)))) @@ -143,6 +154,7 @@ :let [editable? (not (.. el -dataset -cmDocNoEdit)) evaluable? (not (.. el -dataset -cmDocNoEval)) eval-on-init? (not (.. el -dataset -cmDocNoEvalOnInit)) + result-format (keyword (or (.. el -dataset -cmDocResultFormat) "full")) validator-els (.getElementsByClassName el "cm-doc-validator") validators (into [] (comp (map #(.-innerText %)) @@ -154,6 +166,7 @@ :editable? editable? :evaluable? evaluable? :eval-on-init? eval-on-init? + :result-format result-format :hover? (r/atom false) :focus? (r/atom false) :source-str (atom (some->> (array-seq (.-childNodes el))