Use Compiler

blog/src/components/PSLayout.purs

@@ -1,7 +1,6 @@
 module PSLayout where
 
 import Prelude
-
 import Data.Array as A
 import Data.Array as Array
 import Data.Array.NonEmpty as NEA
@@ -26,6 +25,7 @@ import Yoga.Box.Component as Box
 import Yoga.CompileEditor.Component (mkCompileEditor)
 import Yoga.Compiler.Api (apiCompiler)
 import Yoga.FillInTheGaps.Component as FillInTheGaps
+import Yoga.FillInTheGaps.Logic (parseSegments)
 import Yoga.Header.Component (mkHeader)
 import Yoga.Helpers ((?||))
 import Yoga.InlineCode.Component as InlineCode
@@ -83,7 +83,7 @@ mkLayout fetchImpl = do
             ]
           }
 
-mkSecret :: Effect ( ReactComponent { kids ∷ Array JSX , visible ∷ Boolean, register :: Effect Unit })
+mkSecret ∷ Effect (ReactComponent { kids ∷ Array JSX, visible ∷ Boolean, register ∷ Effect Unit })
 mkSecret = do
   component "Secret" \{ kids, visible, register } -> React.do
     useEffect visible do
@@ -106,7 +106,7 @@ mkMdxProviderComponent ∷
 mkMdxProviderComponent fetchImpl = do
   cssBaseline <- mkCssBaseline
   editor <- mkCompileEditor fetchImpl
-  fillInTheGaps <- FillInTheGaps.makeComponent (apiCompiler fetchImpl)
+  fillInTheGaps <- FillInTheGaps.makeComponent
   box <- Box.makeComponent
   sidebar <- mkSidebar
   header <- mkHeader
@@ -135,10 +135,14 @@ mkMdxProviderComponent fetchImpl = do
     visibleThroughKey /\ updateVisible <- useState ""
     let
       baseline child = element cssBaseline { kids: child }
+
       kids = reactChildrenToArray children
-      visibleKids = spy "visibleKids" $ fromMaybe kids do
-         i <- kids # A.findIndex (\x -> (unsafeCoerce x).key == visibleThroughKey)
-         pure $ A.take (i+1) kids 
+
+      visibleKids =
+        spy "visibleKids"
+          $ fromMaybe kids do
+              i <- kids # A.findIndex (\x -> (unsafeCoerce x).key == visibleThroughKey)
+              pure $ A.take (i + 1) kids
 
       siteInfoJSX =
         R.div
@@ -197,7 +201,11 @@ mkMdxProviderComponent fetchImpl = do
 
               language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
             case isCode, language of
-              true, "puregaps" -> element fillInTheGaps { code: fromMaybe "" codeQ }
+              true, "puregaps" ->
+                element fillInTheGaps
+                  { initialSegments: parseSegments (codeQ ?|| "")
+                  , update: \segs -> pure unit
+                  }
               true, _ ->
                 element editor
                   { initialCode: fromMaybe "" codeQ
@@ -206,10 +214,10 @@ mkMdxProviderComponent fetchImpl = do
                   }
               false, _ -> element (unsafeCreateDOMComponent "pre") props
         }
-
     useEffect (A.length kids) do
-      let 
+      let
         firstGaps = kids # A.find (\x -> (unsafeCoerce x).props.mdxType == "pre" && ((unsafeCoerce x).props.children.props.className == "language-puregaps")) <#> (\x -> (unsafeCoerce x).key)
+
         lastKey = kids # A.last # unsafeCoerce # _.key
       updateVisible (const (firstGaps ?|| lastKey))
       pure mempty

components/src/Yoga/CompileEditor/Component.purs

@@ -9,23 +9,19 @@ import Data.Interpolate (i)
 import Data.Maybe (Maybe(..))
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
-import Effect.Aff (Aff, attempt, error, launchAff_, message, throwError)
+import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
 import JSS (jssClasses)
-import Milkis as M
-import Milkis.Impl (FetchImpl)
 import React.Basic (ReactComponent)
 import React.Basic.DOM as R
 import React.Basic.Events (handler_)
 import React.Basic.Helpers (jsx)
 import React.Basic.Hooks (component, element, useState)
 import React.Basic.Hooks as React
-import Shared.Json (readAff)
-import Shared.Models.Body as Body
-import Simple.JSON (writeJSON)
 import Yoga.Button.Component (ButtonType(..), mkButton)
 import Yoga.Card.Component (mkCard)
 import Yoga.Cluster.Component as Cluster
+import Yoga.Compiler.Types (Compiler)
 import Yoga.Editor (getValue, mkEditor, setValue)
 import Yoga.Stack.Component as Stack
 import Yoga.Theme.Styles (makeStylesJSS)
@@ -34,8 +30,8 @@ import Yoga.Theme.Types (CSSTheme)
 type Props
   = { initialCode ∷ String, height ∷ String, language ∷ String }
 
-mkCompileEditor ∷ FetchImpl -> Effect (ReactComponent Props)
-mkCompileEditor fetch = do
+mkCompileEditor ∷ ∀ r. { | Compiler r } -> Effect (ReactComponent Props)
+mkCompileEditor { compileAndRun } = do
   editor <- mkEditor
   card <- mkCard
   cluster <- Cluster.makeComponent
@@ -93,7 +89,7 @@ mkCompileEditor fetch = do
           setCompileResult Nothing
           code <- getValue ed
           launchAff_ do
-            res <- compileAndRun (M.fetch fetch) { code }
+            res <- compileAndRun { code }
             setCompileResult (Just res) # liftEffect
     pure
       $ jsx stack { space: "--s1" }
@@ -118,40 +114,3 @@ mkCompileEditor fetch = do
               }
               [ R.text (compileResultToString compileResult) ]
           ]
-
-compileAndRun ∷ M.Fetch -> Body.CompileRequest -> Aff (Either Body.CompileResult Body.RunResult)
-compileAndRun fetch body = do
-  response <-
-    attempt
-      $ fetch (M.URL "/api/compileAndRun")
-          { method: M.postMethod
-          , body: writeJSON body
-          , headers: M.makeHeaders { "Content-Type": "application/json" }
-          }
-  case response of
-    Left l ->
-      pure
-        ( Left
-            { resultType: ""
-            , result:
-              [ { allSpans: []
-                , errorCode: ""
-                , errorLink: ""
-                , filename: ""
-                , message: message l
-                , moduleName: Nothing
-                , position:
-                  { endColumn: 0
-                  , endLine: 0
-                  , startColumn: 0
-                  , startLine: 0
-                  }
-                , suggestion: Nothing
-                }
-              ]
-            }
-        )
-    Right r -> case M.statusCode r of
-      200 -> M.json r >>= readAff <#> Right
-      422 -> M.json r >>= readAff <#> Left
-      code -> throwError (error $ "Unexpected response code " <> show code)

components/src/Yoga/CompileEditor/Stories.purs

@@ -1,17 +1,23 @@
 module Yoga.CompileEditor.Stories where
 
 import Prelude hiding (add)
-import Yoga.CompileEditor.Component (mkCompileEditor)
-import Storybook.Decorator.FullScreen (fullScreenDecorator)
+import Data.Maybe (Maybe(..))
 import Effect (Effect)
-import Milkis.Impl.Window (windowFetch)
+import Storybook.Decorator.FullScreen (fullScreenDecorator)
 import Storybook.React (Storybook, add, addDecorator, storiesOf)
+import Yoga.CompileEditor.Component (mkCompileEditor)
+import Yoga.Compiler.Types (Compiler)
+
+compiler ∷ { | Compiler () }
+compiler = { compileAndRun }
+  where
+  compileAndRun { code } = pure (pure { code: Nothing, stderr: "", stdout: "" })
 
 stories ∷ Effect Storybook
 stories = do
   storiesOf "Editor" do
     addDecorator fullScreenDecorator
-    add "The Editor" (mkCompileEditor windowFetch)
+    add "The Editor" (mkCompileEditor compiler)
       [ { initialCode
         , height: "30vh"
         , language: "purescript"

components/src/Yoga/InlineCode/Stories.purs

@@ -11,7 +11,6 @@ import Effect (Effect)
 import Effect.Aff (Aff)
 import Effect.Console (log)
 import Justifill (justifill)
-import Milkis as M
 import Milkis.Impl.Window (windowFetch)
 import React.Basic (JSX, fragment)
 import React.Basic.DOM as R
@@ -21,7 +20,7 @@ import React.Basic.Hooks (ReactComponent, component, element)
 import React.Basic.Hooks as React
 import Storybook.Decorator.FullScreen (fullScreenDecorator)
 import Storybook.React (Storybook, add, addDecorator, storiesOf)
-import Yoga.CompileEditor.Component (compileAndRun)
+import Yoga.Compiler.Api (apiCompiler)
 import Yoga.InlineCode.Component as InlineCode
 import Yoga.Modal.Component as Modal
 
@@ -110,7 +109,7 @@ realReducer ∷ State -> RealAction -> Aff State
 realReducer state = case _ of
   CloseModal -> pure Nothing
   InlineCodeSubmitted code -> do
-    res <- compileAndRun (M.fetch windowFetch) { code: codePrefix <> code <> codeSuffix }
+    res <- (apiCompiler windowFetch).compileAndRun { code: codePrefix <> code <> codeSuffix }
     (pure <<< pure) case res of
       Right { stdout }
         | String.dropRight 1 stdout == "Magick" -> true