git.iko.soy/rowtype-yoga/psfp
on master help sign in
Use Compiler
commit50f5e9de8c2281df264f690b45b6ba1cea41760a authorMark Eibes <mark.eibes@gmail.com> dateTue 14 Apr 2020, 21:27 (6 years ago) parentd37fadc
4 files changed+34−62
blog/src/components/PSLayout.purs+17−9 components/src/Yoga/CompileEditor/Component.purs+5−46 components/src/Yoga/CompileEditor/Stories.purs+10−4 components/src/Yoga/InlineCode/Stories.purs+2−3
blog/src/components/PSLayout.purs+17−9
@@ -1,7 +1,6 @@
11module PSLayout where
22
33import Prelude
4−
54import Data.Array as A
65import Data.Array as Array
76import Data.Array.NonEmpty as NEA
@@ -26,6 +25,7 @@ import Yoga.Box.Component as Box
2625import Yoga.CompileEditor.Component (mkCompileEditor)
2726import Yoga.Compiler.Api (apiCompiler)
2827import Yoga.FillInTheGaps.Component as FillInTheGaps
28+import Yoga.FillInTheGaps.Logic (parseSegments)
2929import Yoga.Header.Component (mkHeader)
3030import Yoga.Helpers ((?||))
3131import Yoga.InlineCode.Component as InlineCode
@@ -83,7 +83,7 @@ mkLayout fetchImpl = do
8383 ]
8484 }
8585
86−mkSecret :: Effect ( ReactComponent { kids ∷ Array JSX , visible ∷ Boolean, register :: Effect Unit })
86+mkSecret ∷ Effect (ReactComponent { kids ∷ Array JSX, visible ∷ Boolean, register ∷ Effect Unit })
8787mkSecret = do
8888 component "Secret" \{ kids, visible, register } -> React.do
8989 useEffect visible do
@@ -106,7 +106,7 @@ mkMdxProviderComponent ∷
106106mkMdxProviderComponent fetchImpl = do
107107 cssBaseline <- mkCssBaseline
108108 editor <- mkCompileEditor fetchImpl
109− fillInTheGaps <- FillInTheGaps.makeComponent (apiCompiler fetchImpl)
109+ fillInTheGaps <- FillInTheGaps.makeComponent
110110 box <- Box.makeComponent
111111 sidebar <- mkSidebar
112112 header <- mkHeader
@@ -135,10 +135,14 @@ mkMdxProviderComponent fetchImpl = do
135135 visibleThroughKey /\ updateVisible <- useState ""
136136 let
137137 baseline child = element cssBaseline { kids: child }
138+
138139 kids = reactChildrenToArray children
139− visibleKids = spy "visibleKids" $ fromMaybe kids do
140− i <- kids # A.findIndex (\x -> (unsafeCoerce x).key == visibleThroughKey)
141− pure $ A.take (i+1) kids
140+
141+ visibleKids =
142+ spy "visibleKids"
143+ $ fromMaybe kids do
144+ i <- kids # A.findIndex (\x -> (unsafeCoerce x).key == visibleThroughKey)
145+ pure $ A.take (i + 1) kids
142146
143147 siteInfoJSX =
144148 R.div
@@ -197,7 +201,11 @@ mkMdxProviderComponent fetchImpl = do
197201
198202 language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
199203 case isCode, language of
200− true, "puregaps" -> element fillInTheGaps { code: fromMaybe "" codeQ }
204+ true, "puregaps" ->
205+ element fillInTheGaps
206+ { initialSegments: parseSegments (codeQ ?|| "")
207+ , update: \segs -> pure unit
208+ }
201209 true, _ ->
202210 element editor
203211 { initialCode: fromMaybe "" codeQ
@@ -206,10 +214,10 @@ mkMdxProviderComponent fetchImpl = do
206214 }
207215 false, _ -> element (unsafeCreateDOMComponent "pre") props
208216 }
209−
210217 useEffect (A.length kids) do
211− let
218+ let
212219 firstGaps = kids # A.find (\x -> (unsafeCoerce x).props.mdxType == "pre" && ((unsafeCoerce x).props.children.props.className == "language-puregaps")) <#> (\x -> (unsafeCoerce x).key)
220+
213221 lastKey = kids # A.last # unsafeCoerce # _.key
214222 updateVisible (const (firstGaps ?|| lastKey))
215223 pure mempty
components/src/Yoga/CompileEditor/Component.purs+5−46
@@ -9,23 +9,19 @@ import Data.Interpolate (i)
99import Data.Maybe (Maybe(..))
1010import Data.Tuple.Nested ((/\))
1111import Effect (Effect)
12−import Effect.Aff (Aff, attempt, error, launchAff_, message, throwError)
12+import Effect.Aff (launchAff_)
1313import Effect.Class (liftEffect)
1414import JSS (jssClasses)
15−import Milkis as M
16−import Milkis.Impl (FetchImpl)
1715import React.Basic (ReactComponent)
1816import React.Basic.DOM as R
1917import React.Basic.Events (handler_)
2018import React.Basic.Helpers (jsx)
2119import React.Basic.Hooks (component, element, useState)
2220import React.Basic.Hooks as React
23−import Shared.Json (readAff)
24−import Shared.Models.Body as Body
25−import Simple.JSON (writeJSON)
2621import Yoga.Button.Component (ButtonType(..), mkButton)
2722import Yoga.Card.Component (mkCard)
2823import Yoga.Cluster.Component as Cluster
24+import Yoga.Compiler.Types (Compiler)
2925import Yoga.Editor (getValue, mkEditor, setValue)
3026import Yoga.Stack.Component as Stack
3127import Yoga.Theme.Styles (makeStylesJSS)
@@ -34,8 +30,8 @@ import Yoga.Theme.Types (CSSTheme)
3430type Props
3531 = { initialCode ∷ String, height ∷ String, language ∷ String }
3632
37−mkCompileEditor ∷ FetchImpl -> Effect (ReactComponent Props)
38−mkCompileEditor fetch = do
33+mkCompileEditor ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent Props)
34+mkCompileEditor { compileAndRun } = do
3935 editor <- mkEditor
4036 card <- mkCard
4137 cluster <- Cluster.makeComponent
@@ -93,7 +89,7 @@ mkCompileEditor fetch = do
9389 setCompileResult Nothing
9490 code <- getValue ed
9591 launchAff_ do
96− res <- compileAndRun (M.fetch fetch) { code }
92+ res <- compileAndRun { code }
9793 setCompileResult (Just res) # liftEffect
9894 pure
9995 $ jsx stack { space: "--s1" }
@@ -118,40 +114,3 @@ mkCompileEditor fetch = do
118114 }
119115 [ R.text (compileResultToString compileResult) ]
120116 ]
121−
122−compileAndRun ∷ M.Fetch -> Body.CompileRequest -> Aff (Either Body.CompileResult Body.RunResult)
123−compileAndRun fetch body = do
124− response <-
125− attempt
126− $ fetch (M.URL "/api/compileAndRun")
127− { method: M.postMethod
128− , body: writeJSON body
129− , headers: M.makeHeaders { "Content-Type": "application/json" }
130− }
131− case response of
132− Left l ->
133− pure
134− ( Left
135− { resultType: ""
136− , result:
137− [ { allSpans: []
138− , errorCode: ""
139− , errorLink: ""
140− , filename: ""
141− , message: message l
142− , moduleName: Nothing
143− , position:
144− { endColumn: 0
145− , endLine: 0
146− , startColumn: 0
147− , startLine: 0
148− }
149− , suggestion: Nothing
150− }
151− ]
152− }
153− )
154− Right r -> case M.statusCode r of
155− 200 -> M.json r >>= readAff <#> Right
156− 422 -> M.json r >>= readAff <#> Left
157− code -> throwError (error $ "Unexpected response code " <> show code)
components/src/Yoga/CompileEditor/Stories.purs+10−4
@@ -1,17 +1,23 @@
11module Yoga.CompileEditor.Stories where
22
33import Prelude hiding (add)
4−import Yoga.CompileEditor.Component (mkCompileEditor)
5−import Storybook.Decorator.FullScreen (fullScreenDecorator)
4+import Data.Maybe (Maybe(..))
65import Effect (Effect)
7−import Milkis.Impl.Window (windowFetch)
6+import Storybook.Decorator.FullScreen (fullScreenDecorator)
87import Storybook.React (Storybook, add, addDecorator, storiesOf)
8+import Yoga.CompileEditor.Component (mkCompileEditor)
9+import Yoga.Compiler.Types (Compiler)
10+
11+compiler ∷ { | Compiler () }
12+compiler = { compileAndRun }
13+ where
14+ compileAndRun { code } = pure (pure { code: Nothing, stderr: "", stdout: "" })
915
1016stories ∷ Effect Storybook
1117stories = do
1218 storiesOf "Editor" do
1319 addDecorator fullScreenDecorator
14− add "The Editor" (mkCompileEditor windowFetch)
20+ add "The Editor" (mkCompileEditor compiler)
1521 [ { initialCode
1622 , height: "30vh"
1723 , language: "purescript"
components/src/Yoga/InlineCode/Stories.purs+2−3
@@ -11,7 +11,6 @@ import Effect (Effect)
1111import Effect.Aff (Aff)
1212import Effect.Console (log)
1313import Justifill (justifill)
14−import Milkis as M
1514import Milkis.Impl.Window (windowFetch)
1615import React.Basic (JSX, fragment)
1716import React.Basic.DOM as R
@@ -21,7 +20,7 @@ import React.Basic.Hooks (ReactComponent, component, element)
2120import React.Basic.Hooks as React
2221import Storybook.Decorator.FullScreen (fullScreenDecorator)
2322import Storybook.React (Storybook, add, addDecorator, storiesOf)
24−import Yoga.CompileEditor.Component (compileAndRun)
23+import Yoga.Compiler.Api (apiCompiler)
2524import Yoga.InlineCode.Component as InlineCode
2625import Yoga.Modal.Component as Modal
2726
@@ -110,7 +109,7 @@ realReducer ∷ State -> RealAction -> Aff State
110109realReducer state = case _ of
111110 CloseModal -> pure Nothing
112111 InlineCodeSubmitted code -> do
113− res <- compileAndRun (M.fetch windowFetch) { code: codePrefix <> code <> codeSuffix }
112+ res <- (apiCompiler windowFetch).compileAndRun { code: codePrefix <> code <> codeSuffix }
114113 (pure <<< pure) case res of
115114 Right { stdout }
116115 | String.dropRight 1 stdout == "Magick" -> true