-
-
Notifications
You must be signed in to change notification settings - Fork 81
/
prepl.cljs
90 lines (83 loc) · 3.04 KB
/
prepl.cljs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
(ns portal.ui.viewer.prepl
(:require ["anser" :as anser]
[clojure.spec.alpha :as sp]
[portal.colors :as c]
[portal.ui.icons :as icons]
[portal.ui.inspector :as ins]
[portal.ui.styled :as s]
[portal.ui.theme :as theme]))
(sp/def ::tag #{:out :err})
(sp/def ::out
(sp/keys :req-un [::tag ::val]))
(sp/def ::io
(sp/coll-of ::out :min-count 1))
(defn styles []
(let [theme (theme/use-theme)]
[:style
(s/map->css
{[:.ansi-black-fg] {:color (::c/border theme)}
[:.ansi-black-bg] {:background (::c/border theme)}
[:.ansi-red-fg] {:color (::c/exception theme)}
[:.ansi-red-bg] {:background (::c/exception theme)}
[:.ansi-green-fg] {:color (::c/string theme)}
[:.ansi-green-bg] {:background (::c/string theme)}
[:.ansi-yellow-fg] {:color (::c/tag theme)}
[:.ansi-yellow-bg] {:background (::c/tag theme)}
[:.ansi-blue-fg] {:color (::c/boolean theme)}
[:.ansi-blue-bg] {:background (::c/boolean theme)}
[:.ansi-magenta-fg] {:color (::c/number theme)}
[:.ansi-magenta-bg] {:background (::c/number theme)}
[:.ansi-cyan-fg] {:color (::c/package theme)}
[:.ansi-cyan-bg] {:background (::c/package theme)}
[:.ansi-white-fg] {:color (::c/text theme)}
[:.ansi-white-bg] {:background (::c/text theme)}
[:.ansi-bold] {:font-weight :bold}})]))
(defn inspect-prepl [value]
(let [theme (theme/use-theme)
opts (ins/use-options)]
[s/div
{:style
{:background (ins/get-background)
:border-radius (:border-radius theme)
:border [1 :solid (::c/border theme)]}}
[s/div
{:style
{:display :flex
:gap (:padding theme)
:box-sizing :border-box
:padding (* 1.6 (:padding theme))
:border-bottom [1 :solid (::c/border theme)]}}
[icons/circle {:size :xs :style {:color (::c/exception theme)}}]
[icons/circle {:size :xs :style {:color (::c/tag theme)}}]
[icons/circle {:size :xs :style {:color (::c/string theme)}}]]
[:pre
{:style
{:margin 0
:display :flex
:max-height (when-not (:expanded? opts) "24rem")
:overflow :auto
:flex-direction :column-reverse
:white-space :pre-wrap
:box-sizing :border-box
:padding (:padding theme)
:font-size (:font-size theme)
:font-family (:font-family theme)}}
(reverse
(map-indexed
(fn [index value]
^{:key index}
[s/span
{:style
{:color
(if (= (:tag value) :err)
(::c/exception theme)
(::c/text theme))}
:dangerouslySetInnerHTML
{:__html (anser/ansiToHtml (:val value) #js {:use_classes true})}}])
value))]]))
(defn io? [value]
(sp/valid? ::io value))
(def viewer
{:predicate io?
:component inspect-prepl
:name :portal.viewer/prepl})