git.iko.soy/rowtype-yoga/psfp
on master help sign in
No cigar
7ef23c6Mark Eibes
blog/src/components/FillInTheGaps.purs+145−26
compare with master
unifiedsplit
@@ -1,52 +1,171 @@
1module FillInTheGaps where
1module FillInTheGaps where
2
2
3import Prelude
3import Prelude
4−
4+import Data.Array (foldMap, intercalate)
5import Data.Array as A
5import Data.Array as A
6+import Data.Either (Either(..))
7+import Data.Foldable (foldl, for_)
6−import Data.Maybe (fromMaybe)
8+import Data.Maybe (Maybe(..), fromMaybe, fromMaybe')
9+import Data.Monoid (guard)
7import Data.String (Pattern(..), split)
10import Data.String (Pattern(..), split)
11+import Data.String as S
12+import Data.String.Regex (Regex)
13+import Data.String.Regex as Regex
14+import Data.String.Regex.Flags as RegexFlags
15+import Data.String.Regex.Unsafe (unsafeRegex)
8import Data.Tuple.Nested ((/\))
16import Data.Tuple.Nested ((/\))
9import Effect (Effect)
17import Effect (Effect)
18+import Effect.Aff (launchAff_)
19+import Effect.Class (liftEffect)
10import Justifill (justifill)
20import Justifill (justifill)
21+import Milkis as M
22+import Milkis.Impl (FetchImpl)
23+import Milkis.Impl.Window (windowFetch)
11import Partial.Unsafe (unsafeCrashWith)
24import Partial.Unsafe (unsafeCrashWith)
12−import React.Basic (JSX, ReactComponent, element)
25+import React.Basic (JSX, ReactComponent, element, fragment)
26+import React.Basic.DOM (form_)
13import React.Basic.DOM as R
27import React.Basic.DOM as R
28+import React.Basic.Events (handler_)
29+import React.Basic.Helpers (jsx)
14−import React.Basic.Hooks (component, useState)
30+import React.Basic.Hooks (component, useEffect, useState)
15import React.Basic.Hooks as React
31import React.Basic.Hooks as React
32+import React.Basic.Hooks.Aff (useAff)
33+import Yoga.Button.Component (ButtonType(..), mkButton)
34+import Yoga.CompileEditor.Component (compileAndRun)
16−import Yoga.Helpers (intersperse)
35+import Yoga.Helpers ((?||))
17import Yoga.InlineCode.Component as InlineCode
36import Yoga.InlineCode.Component as InlineCode
37+import Yoga.Modal.Component as Modal
38+
39+data Segment
40+ = ExpectedResult String
41+ | Start
42+ | End
43+ | Filler String
44+ | Hole Int String
45+
46+derive instance eqSegment ∷ Eq Segment
47+getResult ∷ Segment -> Maybe String
48+getResult = case _ of
49+ ExpectedResult r -> Just r
50+ _ -> Nothing
18
51
19−data Segment = Filler String | Hole String
52+findResult ∷ Array Segment -> String
53+findResult = fromMaybe' (\_ -> unsafeCrashWith "Even teachers make mistakes") <<< A.findMap getResult
54+
55+toCode ∷ (Array (Array Segment)) -> String
56+toCode lines = intercalate "\n" mapped
57+ where
58+ mapped = lines <#> (intercalate "" <<< map segmentToCode)
59+ segmentToCode = case _ of
60+ Filler s -> s
61+ Hole _ s -> s
62+ _ -> ""
20
63
21−renderSegments :: ReactComponent InlineCode.Props -> ((Array (Array Segment) -> Array (Array Segment)) -> Effect Unit) -> Array (Array Segment) -> JSX
64+complete ∷ (Array (Array Segment)) -> Boolean
22−renderSegments ic update arrs = R.div_ (arrs `flip A.mapWithIndex` renderLine)
65+complete arr = foldl f true (join arr)
23 where
66 where
67+ f acc seg =
68+ acc
69+ && case seg of
70+ Hole _ s -> s /= ""
71+ _ -> true
72+
73+renderSegments ∷ ReactComponent InlineCode.Props -> ((Array (Array Segment) -> Array (Array Segment)) -> Effect Unit) -> Array (Array Segment) -> JSX
74+renderSegments ic update arrs = R.div_ (A.mapWithIndex renderLine (onlyVisible arrs))
75+ where
76+ onlyVisible arr = A.slice start end arr
77+ where
78+ start = A.findIndex (_ == [ Start ]) arr ?|| 0
79+ end = A.findIndex (_ == [ End ]) arr ?|| A.length arr
24− renderLine i l = R.div_ (l `flip A.mapWithIndex` renderSegment i)
80+ renderLine i l = R.div_ (A.mapWithIndex (renderSegment i) l)
25 renderSegment i j = case _ of
81 renderSegment i j = case _ of
26− Filler s -> R.span_ [R.text s]
82+ Filler s -> R.code_ [ R.text s ]
27− Hole _ -> element ic $ justifill { onSubmit: \s -> update (updateSegments i j s) }
83+ Hole width _ -> element ic $ justifill { width, onSubmit: \v -> update (updateSegments i j (S.trim v)) }
84+ _ -> mempty
28
85
29−updateSegments :: Int -> Int -> String -> Array (Array Segment) -> Array (Array Segment)
86+updateSegments ∷ Int -> Int -> String -> Array (Array Segment) -> Array (Array Segment)
30updateSegments i j v arrs = fromMaybe [] (A.modifyAt i (updateLine j v) arrs)
87updateSegments i j v arrs = fromMaybe [] (A.modifyAt i (updateLine j v) arrs)
31
88
32−updateLine :: Int -> String -> Array Segment -> Array Segment
89+updateLine ∷ Int -> String -> Array Segment -> Array Segment
33updateLine idx v arr = fromMaybe [] (A.modifyAt idx f arr)
90updateLine idx v arr = fromMaybe [] (A.modifyAt idx f arr)
34 where
91 where
35 f = case _ of
92 f = case _ of
93+ Hole h _ -> Hole h v
36− Filler s -> unsafeCrashWith "Updated a filler"
94+ _ -> unsafeCrashWith "Updated a non-hole"
37− Hole _ -> Hole v
95+
38−
96+holeRegex ∷ Regex
97+holeRegex = unsafeRegex "({-.*?-})" RegexFlags.global
98+
99+resultRegex ∷ Regex
100+resultRegex = unsafeRegex "--result" RegexFlags.global
101+
102+startRegex ∷ Regex
103+startRegex = unsafeRegex "--start here" RegexFlags.global
104+
105+endRegex ∷ Regex
106+endRegex = unsafeRegex "--end here" RegexFlags.global
107+
108+rawSegments ∷ String -> Array String
109+rawSegments = Regex.split holeRegex
110+
111+toSegment ∷ String -> Segment
112+toSegment = case _ of
113+ x
114+ | Regex.test holeRegex x -> Hole (S.length x - 4) ""
115+ x
116+ | S.indexOf (Pattern "--result ") x == Just 0 -> ExpectedResult ((S.stripPrefix (Pattern "--result ") x) ?|| "")
117+ x
118+ | Regex.test startRegex x -> Start
119+ x
120+ | Regex.test endRegex x -> End
121+ other -> Filler other
122+
39−mkFillInTheGaps :: Effect (ReactComponent { code :: String })
123+mkFillInTheGaps ∷ FetchImpl -> Effect (ReactComponent { code ∷ String })
40−mkFillInTheGaps = do
124+mkFillInTheGaps fetch = do
41 ic <- InlineCode.makeComponent
125 ic <- InlineCode.makeComponent
126+ modal <- Modal.makeComponent
127+ button <- mkButton
42− component "FillInTheGaps" \{ code } -> React.do
128+ component "FillInTheGaps" \{ code } -> React.do
43− let
129+ let
44− separator = "???"
45 lines = split (Pattern "\n") code
130 lines = split (Pattern "\n") code
46− rawSegments = split (Pattern separator) >>> intersperse separator
131+
47− toSegment = case _ of
48− x | x == separator -> Hole ""
49− other -> Filler other
50 initialSegments = lines <#> \line -> rawSegments line <#> toSegment
132 initialSegments = lines <#> \line -> rawSegments line <#> toSegment
51 segments /\ modifySegments <- useState initialSegments
133 segments /\ modifySegments <- useState initialSegments
134+ result /\ modifyResult <- useState Nothing
135+ let
136+ expectedResult = findResult (join segments)
137+
138+ onClick =
139+ launchAff_ do
140+ do
141+ res <- compileAndRun (M.fetch fetch) { code: toCode segments }
142+ modifyResult (const (Just $ res)) # liftEffect
143+ pure
144+ $ fragment
52− pure $ renderSegments ic (modifySegments) segments
145+ [ renderSegments ic (modifySegments) segments
146+ , jsx button
147+ { onClick: handler_ onClick
148+ , buttonType:
149+ -- if complete segments
150+ -- then
151+ HighlightedButton
152+ -- else DisabledButton
153+ }
154+ [ R.text "Try it" ]
155+ , result
156+ # foldMap \r ->
157+ jsx modal
158+ { title:
159+ case r of
160+ Right { stdout }
161+ | stdout == expectedResult -> "Hooray!"
162+ Left l -> "Does not compile"
163+ Right _ -> "Not " <> (findResult (join segments))
164+ }
165+ [ R.text $ compileResultToString result ]
166+ ]
167+
168+compileResultToString = case _ of
169+ Nothing -> ""
170+ Just (Left cr) -> cr.result <#> _.message # intercalate "/n"
171+ Just (Right r) -> r.stdout
blog/src/components/PSLayout.purs+1−1
@@ -89,7 +89,7 @@ mkMdxProviderComponent ∷
89mkMdxProviderComponent fetchImpl = do
89mkMdxProviderComponent fetchImpl = do
90 cssBaseline <- mkCssBaseline
90 cssBaseline <- mkCssBaseline
91 editor <- mkCompileEditor fetchImpl
91 editor <- mkCompileEditor fetchImpl
92− fillInTheGaps <- mkFillInTheGaps
92+ fillInTheGaps <- mkFillInTheGaps fetchImpl
93 sidebar <- mkSidebar
93 sidebar <- mkSidebar
94 header <- mkHeader
94 header <- mkHeader
95 yogaInlineCode <- InlineCode.makeComponent
95 yogaInlineCode <- InlineCode.makeComponent
blog/src/pages/optional.mdx+6−1
@@ -6,10 +6,15 @@ import SEO from '../components/seo'
6# Optional
6# Optional
7
7
8```puregaps
8```puregaps
9+--result Hello World
10+module Main where
9import Batteries
11import Batteries
10
12
11main :: Effect Unit
13main :: Effect Unit
12−main = log "???"
14+main = log $
15+--start here
16+ "{-Hello-}" <> " " <> "{-World-}"
17+--end here
13```
18```
14
19
15## Hans Hölzel
20## Hans Hölzel