Your browser is missing srcdoc support
diff --git a/client/public/img/favicon-black.ico b/client/public/img/favicon-black.ico new file mode 100644 index 00000000..f4cbbbd3 Binary files /dev/null and b/client/public/img/favicon-black.ico differ diff --git a/client/public/img/favicon-black.svg b/client/public/img/favicon-black.svg new file mode 100644 index 00000000..c8f3f7ea --- /dev/null +++ b/client/public/img/favicon-black.svg @@ -0,0 +1,67 @@ + + + + diff --git a/client/public/img/favicon_clear-16.png b/client/public/img/favicon_clear-16.png deleted file mode 100644 index 04dcd0cc..00000000 Binary files a/client/public/img/favicon_clear-16.png and /dev/null differ diff --git a/client/public/img/favicon_clear-256.png b/client/public/img/favicon_clear-256.png deleted file mode 100644 index 5abc0011..00000000 Binary files a/client/public/img/favicon_clear-256.png and /dev/null differ diff --git a/client/public/img/favicon_clear-32.png b/client/public/img/favicon_clear-32.png deleted file mode 100644 index 7d720bc6..00000000 Binary files a/client/public/img/favicon_clear-32.png and /dev/null differ diff --git a/client/public/index.html b/client/public/index.html index b546efb4..efa1505b 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -1,198 +1,11 @@ - -
-
- "
- code_ <- JQuery.create ""
- JQuery.append code_ pre
- JQuery.setText message code_
-
- JQuery.append h1 column2
- JQuery.append pre column2
-
--- | Display plain text in the right hand column.
-displayPlainText
- :: String
- -> Effect Unit
-displayPlainText s = do
- column2 <- JQuery.select "#column2"
- JQueryExtras.empty column2
- pre <- JQuery.create ""
- code_ <- JQuery.create ""
- JQuery.append code_ pre
- JQuery.setText s code_
- JQuery.append pre column2
-
-isShowJsChecked :: Effect Boolean
-isShowJsChecked = JQuery.select "#showjs" >>= \jq -> JQueryExtras.is jq ":checked"
-
-isAutoCompileChecked :: Effect Boolean
-isAutoCompileChecked = JQuery.select "#auto_compile" >>= \jq -> JQueryExtras.is jq ":checked"
-
--- | Update the view mode based on the menu selection
-changeViewMode :: Maybe String -> Effect Unit
-changeViewMode viewMode =
- for_ viewMode \viewMode_ ->
- JQuery.select "#editor_view" >>= JQuery.setAttr "data-view-mode" viewMode_
-
-getTextAreaContent :: Effect String
-getTextAreaContent = fold <$> (JQuery.select "#code_textarea" >>= JQueryExtras.getValueMaybe)
-
-setTextAreaContent :: String -> Effect Unit
-setTextAreaContent value = JQuery.select "#code_textarea" >>= JQuery.setValue value
-
--- | Set the editor content to the specified string.
-foreign import setEditorContent :: EffectFn1 String Unit
-
--- | Register a callback for editor change events.
-foreign import onEditorChanged
- :: EffectFn2 (EffectFn1 String Unit)
- Int
- Unit
-
--- | Clean up any global state associated with any visible error markers.
-foreign import cleanUpMarkers :: Effect Unit
-
--- | Add a visible marker at the specified location.
-foreign import addMarker :: EffectFn5 String Int Int Int Int Unit
-
-type Annotation =
- { row :: Int
- , column :: Int
- , type :: String
- , text :: String
- }
-
--- | Set the gutter annotations
-foreign import setAnnotations :: EffectFn1 (Array Annotation) Unit
-
-clearAnnotations :: Effect Unit
-clearAnnotations = runEffectFn1 setAnnotations []
-
--- | Set up a fresh iframe in the specified container, and use it
--- | to execute the provided JavaScript code.
-foreign import setupIFrame
- :: EffectFn2 JQuery.JQuery
- (Object JS)
- Unit
-
-loader :: Loader
-loader = makeLoader Config.loaderUrl
-
--- | Compile the current code and execute it.
-compile :: Effect Unit
-compile = do
- code <- getTextAreaContent
-
- displayLoadingMessage
- clearAnnotations
-
- runContT (runExceptT (API.compile Config.compileUrl code)) \res_ ->
- case res_ of
- Left err -> displayPlainText err
- Right res -> do
- cleanUpMarkers
-
- case res of
- Right (CompileSuccess (SuccessResult { js, warnings })) -> do
- showJs <- isShowJsChecked
- if showJs
- then do hideLoadingMessage
- displayPlainText js
- else runContT (runExceptT $ runLoader loader (JS js)) \sources -> do
- hideLoadingMessage
- for_ warnings \warnings_ -> do
- let toAnnotation (CompileWarning{ errorCode, position, message }) =
- position <#> \(ErrorPosition pos) ->
- { row: pos.startLine - 1
- , column: pos.startColumn - 1
- , type: "warning"
- , text: message
- }
- runEffectFn1 setAnnotations (mapMaybe toAnnotation warnings_)
- for_ sources (execute (JS js))
- Right (CompileFailed (FailedResult { error })) -> do
- hideLoadingMessage
- case error of
- CompilerErrors errs -> do
- displayErrors errs
-
- let toAnnotation (CompilerError{ position, message }) =
- position <#> \(ErrorPosition pos) ->
- { row: pos.startLine - 1
- , column: pos.startColumn - 1
- , type: "error"
- , text: message
- }
- runEffectFn1 setAnnotations (mapMaybe toAnnotation errs)
-
- for_ errs \(CompilerError{ position }) ->
- for_ position \(ErrorPosition pos) ->
- runEffectFn5 addMarker
- "error"
- pos.startLine
- pos.startColumn
- pos.endLine
- pos.endColumn
- OtherError err -> displayPlainText err
- Left errs -> do
- hideLoadingMessage
- displayPlainText "Unable to parse the response from the server"
- traverse_ (error <<< renderForeignError) errs
-
--- | Execute the compiled code in a new iframe.
-execute :: JS -> Object JS -> Effect Unit
-execute js modules = do
- let eventData = Object.insert "" js modules
- column2 <- JQuery.select "#column2"
- runEffectFn2 setupIFrame column2 eventData
-
--- | Setup the editor component and some event handlers.
-setupEditor :: forall r. { code :: String | r } -> Effect Unit
-setupEditor { code } = do
- loadOptions
-
- setTextAreaContent code
- runEffectFn1 setEditorContent code
-
- runEffectFn2 onEditorChanged (mkEffectFn1 \value -> do
- setTextAreaContent value
- cacheCurrentCode
- autoCompile <- isAutoCompileChecked
- when autoCompile do
- compile) 750
-
- JQuery.select "#showjs" >>= JQuery.on "change" \e _ ->
- compile
-
- JQuery.select "#compile_label" >>= JQuery.on "click" \e _ ->
- compile
-
- JQuery.select "#gist_save" >>= JQuery.on "click" \e _ ->
- publishNewGist
-
- compile
- cacheCurrentCode
-
-loadFromGist
- :: String
- -> ({ code :: String } -> Effect Unit)
- -> Effect Unit
-loadFromGist id_ k = do
- runContT (runExceptT (getGistById id_ >>= \gi -> tryLoadFileFromGist gi "Main.purs")) $
- case _ of
- Left err -> do
- window >>= alert err
- k { code: "" }
- Right code -> k { code }
-
-withSession
- :: String
- -> ({ code :: String } -> Effect Unit)
- -> Effect Unit
-withSession sessionId k = do
- state <- tryRetrieveSession sessionId
- case state of
- Just state' -> k state'
- Nothing -> do
- gist <- fromMaybe Config.mainGist <$> getQueryStringMaybe "gist"
- loadFromGist gist k
-
--- | Cache the current code in the session state
-cacheCurrentCode :: Effect Unit
-cacheCurrentCode = do
- sessionId <- getQueryStringMaybe "session"
- case sessionId of
- Just sessionId_ -> do
- code <- getTextAreaContent
- storeSession sessionId_ { code }
- Nothing -> error "No session ID"
-
--- | Create a new Gist using the current content
-publishNewGist :: Effect Unit
-publishNewGist = do
- ok <- window >>= confirm (intercalate "\n"
- [ "Do you really want to publish this code as an anonymous Gist?"
- , ""
- , "Note: this code will be available to anyone with a link to the Gist."
- ])
- when ok do
- content <- getTextAreaContent
- runContT (runExceptT (uploadGist content)) $
- case _ of
- Left err -> do
- window >>= alert "Failed to create gist"
- error ("Failed to create gist: " <> err)
- Right gistId -> do
- setQueryStrings (Object.singleton "gist" gistId)
-
--- | Navigate to the specified URL.
-navigateTo :: String -> Effect Unit
-navigateTo uri = void (window >>= location >>= setHref uri)
-
--- | Read query string options and update the state accordingly
-loadOptions :: Effect Unit
-loadOptions = do
- viewMode <- getQueryStringMaybe "view"
- case viewMode of
- Just viewMode_
- | viewMode_ `elem` ["sidebyside", "code", "output"]
- -> changeViewMode viewMode
- _ -> pure unit
-
- showJs <- getQueryStringMaybe "js"
- case showJs of
- Just showJs_ ->
- JQuery.select "input:checkbox[name=showjs]" >>= JQuery.setProp "checked" (showJs_ == "true")
- _ -> pure unit
-
- autoCompile <- getQueryStringMaybe "compile"
- case autoCompile of
- Just autoCompile_ ->
- JQuery.select "input:checkbox[name=auto_compile]" >>= JQuery.setProp "checked" (autoCompile_ == "true")
- _ -> pure unit
-
- gist <- getQueryStringMaybe "gist"
- case gist of
- Just gist_ -> JQuery.select ".view_gist" >>= JQuery.attr { href: "https://gist.github.com/" <> gist_ }
- Nothing -> JQuery.select ".view_gist_li" >>= JQuery.hide
+import Effect.Aff (launchAff_)
+import Effect.Class (liftEffect)
+import Effect.Class.Console (log)
+import Foreign (Foreign, unsafeToForeign)
+import Halogen as H
+import Halogen.Aff as HA
+import Halogen.VDom.Driver (runUI)
+import Routing.PushState (makeInterface, matches)
+import Try.Component (component, Query(..))
+import Try.Routing (route)
+import Web.HTML (HTMLElement)
main :: Effect Unit
-main = JQuery.ready do
- JQuery.select "input[name=view_mode]" >>= JQuery.on "change" \_ jq -> do
- viewMode <- JQueryExtras.filter jq ":checked" >>= JQueryExtras.getValueMaybe
- changeViewMode viewMode
-
- runContT (do sessionId <- ContT createSessionIdIfNecessary
- ContT (withSession sessionId)) setupEditor
+main =
+ HA.runHalogenAff do
+ (body :: HTMLElement) <- HA.awaitBody
+ (replaceState :: Foreign -> String -> Effect Unit) <-
+ liftEffect
+ $ do
+ nav <- makeInterface
+ pure nav.replaceState
+ halogenIO <- runUI component (replaceState $ unsafeToForeign {}) body
+ void
+ $ liftEffect do
+ nav <- makeInterface
+ nav
+ # matches route \oldRoute newRoute -> do
+ log $ show oldRoute <> " -> " <> show newRoute
+ launchAff_ $ halogenIO.query $ H.tell $ Nav newRoute
diff --git a/client/src/MyAce.js b/client/src/MyAce.js
new file mode 100644
index 00000000..28190265
--- /dev/null
+++ b/client/src/MyAce.js
@@ -0,0 +1,15 @@
+"use strict";
+
+// Upstream version missing inFront, which is
+// interpreted as `false` when omitted.
+exports.getMarkersImpl = function (inFront, session) {
+ return function () {
+ var markerObj = session.getMarkers(inFront);
+ var ks = Object.getOwnPropertyNames(markerObj);
+ var result = [];
+ for (var i = 0; i < ks.length; i++) {
+ result[i] = markerObj[ks[i]];
+ }
+ return result;
+ };
+};
\ No newline at end of file
diff --git a/client/src/MyAce.purs b/client/src/MyAce.purs
new file mode 100644
index 00000000..fb596a27
--- /dev/null
+++ b/client/src/MyAce.purs
@@ -0,0 +1,16 @@
+module MyAce where
+
+import Ace (EditSession, Marker)
+import Data.Function.Uncurried (Fn2, runFn2)
+import Effect (Effect)
+
+{-
+Fixes some issues in package.
+Todo - make PRs for these.
+-}
+-- Returns array of marker IDs
+-- Boolean to indicate front or back
+foreign import getMarkersImpl :: Fn2 Boolean EditSession (Effect (Array Marker))
+
+getMarkers :: Boolean -> EditSession -> Effect (Array Marker)
+getMarkers inFront session = runFn2 getMarkersImpl inFront session
diff --git a/client/src/Try/API.js b/client/src/Try/API.js
deleted file mode 100644
index a00c83f8..00000000
--- a/client/src/Try/API.js
+++ /dev/null
@@ -1,23 +0,0 @@
-"use strict";
-
-exports.get_ = function(uri, done, fail) {
- $.get(uri).done(done).fail(function(err) {
- fail(err.statusText);
- });
-};
-
-exports.compile_ = function(endpoint, code, done, fail) {
- $.ajax({
- url: endpoint + '/compile',
- dataType: 'json',
- data: code,
- method: 'POST',
- contentType: 'text/plain',
- success: function(res) {
- done(res);
- },
- error: function(res) {
- fail(res.responseText)
- }
- });
-}
diff --git a/client/src/Try/API.purs b/client/src/Try/API.purs
index ccb920eb..87bc33df 100644
--- a/client/src/Try/API.purs
+++ b/client/src/Try/API.purs
@@ -1,153 +1,182 @@
-module Try.API
- ( ErrorPosition(..)
- , CompilerError(..)
- , CompileError(..)
- , CompileWarning(..)
- , Suggestion(..)
- , SuccessResult(..)
- , FailedResult(..)
- , CompileResult(..)
- , get
- , compile
- ) where
+module Try.API where
import Prelude
-
-import Control.Alt ((<|>))
-import Control.Monad.Cont.Trans (ContT(ContT))
-import Control.Monad.Except (runExcept)
-import Control.Monad.Except.Trans (ExceptT(ExceptT))
+import Ace (Range)
+import Ace.Range as Range
+import Affjax as AX
+import Affjax.RequestBody as AXRB
+import Affjax.ResponseFormat as AXRF
+import Control.Alternative ((<|>))
+import Data.Argonaut (class DecodeJson, decodeJson)
+import Data.Argonaut.Core as J
+import Data.Argonaut.Decode.Generic.Rep (genericDecodeJsonWith)
+import Data.Argonaut.Types.Generic.Rep (defaultEncoding)
import Data.Either (Either(..))
import Data.Generic.Rep (class Generic)
-import Data.List.NonEmpty (NonEmptyList)
-import Data.Maybe (Maybe)
+import Data.Maybe (Maybe(..))
import Effect (Effect)
-import Effect.Uncurried (EffectFn1, EffectFn3, EffectFn4, mkEffectFn1, runEffectFn3, runEffectFn4)
-import Foreign (Foreign, ForeignError)
-import Foreign.Class (class Decode, decode)
-import Foreign.Generic (defaultOptions, genericDecode)
-import Foreign.Generic.Class (Options, SumEncoding(..))
-
-decodingOptions :: Options
-decodingOptions = defaultOptions { unwrapSingleConstructors = true }
-
--- | The range of text associated with an error
-newtype ErrorPosition = ErrorPosition
- { startLine :: Int
- , endLine :: Int
- , startColumn :: Int
- , endColumn :: Int
- }
-
-derive instance genericErrorPosition :: Generic ErrorPosition _
-
-instance decodeErrorPosition :: Decode ErrorPosition where
- decode = genericDecode decodingOptions
-
-newtype CompilerError = CompilerError
- { message :: String
- , position :: Maybe ErrorPosition
- }
-
-derive instance genericCompilerError :: Generic CompilerError _
-
-instance decodeCompilerError :: Decode CompilerError where
- decode = genericDecode decodingOptions
-
--- | An error reported from the compile API.
-data CompileError
- = CompilerErrors (Array CompilerError)
- | OtherError String
-
-derive instance genericCompileError :: Generic CompileError _
-
-instance decodeCompileError :: Decode CompileError where
- decode = genericDecode
- (defaultOptions
- { sumEncoding =
- TaggedObject
- { tagFieldName: "tag"
- , contentsFieldName: "contents"
- , constructorTagTransform: identity
- }
- })
-
-newtype Suggestion = Suggestion
- { replacement :: String
- , replaceRange :: Maybe ErrorPosition
- }
+import Effect.Aff (Aff)
+import Try.Common (Content(..))
+import Try.Config (compileUrl)
-derive instance genericSuggestion :: Generic Suggestion _
-
-instance decodeSuggestion :: Decode Suggestion where
- decode = genericDecode decodingOptions
-
-newtype CompileWarning = CompileWarning
- { errorCode :: String
- , message :: String
- , position :: Maybe ErrorPosition
- , suggestion :: Maybe Suggestion
- }
-
-derive instance genericCompileWarning :: Generic CompileWarning _
-
-instance decodeCompileWarning :: Decode CompileWarning where
- decode = genericDecode decodingOptions
-
-newtype SuccessResult = SuccessResult
- { js :: String
- , warnings :: Maybe (Array CompileWarning)
- }
-
-derive instance genericSuccessResult :: Generic SuccessResult _
-
-instance decodeSuccessResult :: Decode SuccessResult where
- decode = genericDecode decodingOptions
-
-newtype FailedResult = FailedResult
- { error :: CompileError }
-
-derive instance genericFailedResult :: Generic FailedResult _
-
-instance decodeFailedResult :: Decode FailedResult where
- decode = genericDecode decodingOptions
-
--- | The result of calling the compile API.
+------- Compile API types -------
+--
+-- The result of calling the compile API.
data CompileResult
= CompileSuccess SuccessResult
| CompileFailed FailedResult
--- | Parse the result from the compile API and verify it
-instance decodeCompileResult :: Decode CompileResult where
- decode f =
- CompileSuccess <$> genericDecode decodingOptions f
- <|> CompileFailed <$> genericDecode decodingOptions f
+-- A successful compilation result
+type SuccessResult
+ = { js :: String
+ , warnings :: Maybe (Array CompileWarning)
+ }
+
+-- A warning about the code found during compilation
+type CompileWarning
+ = { errorCode :: String
+ , message :: String
+ , position :: Maybe ErrorPosition
+ , suggestion :: Maybe Suggestion
+ }
+
+-- The range of text associated with an error or warning
+type ErrorPosition
+ = { startLine :: Int
+ , endLine :: Int
+ , startColumn :: Int
+ , endColumn :: Int
+ }
+
+-- A code suggestion
+type Suggestion
+ = { replacement :: String
+ , replaceRange :: Maybe ErrorPosition
+ }
+
+-- A failed compilation result
+type FailedResult
+ = { error :: CompileError }
+
+-- An error reported from the compile API
+data CompileError
+ = CompilerErrors (Array CompilerError)
+ -- Examples of `OtherError` include:
+ -- * Code is not "module Main"
+ -- * The code snippet is too large
+ | OtherError String
-foreign import get_
- :: EffectFn3
- String
- (EffectFn1 String Unit)
- (EffectFn1 String Unit)
- Unit
+-- An error found with the code during compilation
+type CompilerError
+ = { message :: String
+ , position :: Maybe ErrorPosition
+ }
+
+------- Json Decoding -------
+--
+-- The Compile API returns an object representing the contents of either:
+-- * CompileSuccess
+-- * CompileFailed
+-- Decoding to CompileResult requires attempting to match each of these.
+instance decodeJsonCompileResult :: DecodeJson CompileResult where
+ decodeJson j =
+ CompileSuccess <$> decodeJson j
+ <|> CompileFailed
+ <$> decodeJson j
+
+derive instance genericCompileResult :: Generic CompileResult _
+
+-- The Compile API encodes the CompileError tagged union differently than
+-- argonaut's generic options, so we need to adjust the default encoding
+-- options to successfully decode.
+instance decodeJsonCompileError :: DecodeJson CompileError where
+ decodeJson =
+ genericDecodeJsonWith
+ $ defaultEncoding
+ { valuesKey = "contents"
+ , unwrapSingleArguments = true
+ }
--- | A wrapper for `get` which uses `ContT`.
-get :: String -> ExceptT String (ContT Unit Effect) String
-get uri = ExceptT (ContT \k -> runEffectFn3 get_ uri (mkEffectFn1 (k <<< Right)) (mkEffectFn1 (k <<< Left)))
+derive instance genericCompileError :: Generic CompileError _
-- | POST the specified code to the Try PureScript API, and wait for
-- | a response.
-foreign import compile_
- :: EffectFn4
- String
- String
- (EffectFn1 Foreign Unit)
- (EffectFn1 String Unit)
- Unit
-
--- | A wrapper for `compileApi` which uses `ContT`.
-compile
- :: String
- -> String
- -> ExceptT String (ContT Unit Effect)
- (Either (NonEmptyList ForeignError) CompileResult)
-compile endpoint code = ExceptT (ContT \k -> runEffectFn4 compile_ endpoint code (mkEffectFn1 (k <<< Right <<< runExcept <<< decode)) (mkEffectFn1 (k <<< Left)))
+compile :: Content -> Aff (Either String CompileResult)
+compile (Content ct) = do
+ result <- AX.post AXRF.json (compileUrl <> "/compile") $ Just $ AXRB.string ct
+ pure
+ $ case result of
+ Left err -> Left $ "POST compile response failed to decode: " <> AX.printError err
+ Right response -> do
+ let
+ respStr = "POST /api response: " <> J.stringify response.body
+ case decodeJson response.body of
+ Left err -> Left $ "Failed to decode json response: " <> respStr <> ", Error: " <> show err
+ Right (decoded :: CompileResult) -> Right decoded
+
+------ generate errors for editor --------------
+-- Todo - move this to another file
+type Annotation
+ = { row :: Int
+ , column :: Int
+ , type :: String
+ , text :: String
+ }
+
+-- | Set the gutter annotations
+--foreign import setAnnotations :: EffectFn1 (Array Annotation) Unit
+data AnnotationType
+ = AnnotateWarning
+ | AnnotateError
+
+instance showAnnotationType :: Show AnnotationType where
+ show AnnotateWarning = "warning"
+ show AnnotateError = "error"
+
+-- Common fields of CompileWarning and CompilerError
+-- Todo - should both of these have `er` ending?
+type WarningOrError r
+ = { message :: String
+ , position :: Maybe ErrorPosition
+ | r
+ }
+
+-- Creates an annotation from a warning or error,
+-- but only if there's a position.
+toAnnotation :: forall r. AnnotationType -> WarningOrError r -> Maybe Annotation
+toAnnotation _ { position: Nothing } = Nothing
+
+toAnnotation annType { position: Just pos, message } =
+ Just
+ { row: pos.startLine - 1
+ , column: pos.startColumn - 1
+ , type: show annType
+ , text: message
+ }
+
+-- Make sure position's range is at least one character wide.
+nonZeroRange :: ErrorPosition -> ErrorPosition
+nonZeroRange p =
+ if p.startLine == p.endLine && p.endColumn <= p.startColumn then
+ if p.startColumn > 0 then
+ p { startColumn = p.endColumn - 1 }
+ else
+ p { endColumn = p.startColumn + 1 }
+ else
+ p
+
+-- Creates a Range for making Markers from a warning or error,
+-- but only if there's a position.
+mkMarkerRange :: forall r. WarningOrError r -> Effect (Maybe Range)
+mkMarkerRange { position: Nothing } = pure Nothing
+
+mkMarkerRange { position: Just p0 } = do
+ let
+ p = nonZeroRange p0
+ rg <-
+ Range.create
+ (p.startLine - 1)
+ (p.startColumn - 1)
+ (p.endLine - 1)
+ (p.endColumn - 1)
+ pure $ Just rg
diff --git a/client/src/Try/Classes.purs b/client/src/Try/Classes.purs
new file mode 100644
index 00000000..55106f8c
--- /dev/null
+++ b/client/src/Try/Classes.purs
@@ -0,0 +1,58 @@
+module Try.Classes where
+
+import Prelude
+import Halogen (ClassName)
+import Tailwind as T
+
+{-
+Groups of Tailwind CSS classes
+-}
+--
+data Responsiveness
+ = NonMobile
+ | MobileOnly
+ | RenderAlways
+
+nonMobileBlockClasses :: Array ClassName
+nonMobileBlockClasses = [ T.hidden, T.smBlock ]
+
+nonMobileBlock :: Responsiveness -> Array ClassName
+nonMobileBlock NonMobile = nonMobileBlockClasses
+
+nonMobileBlock _ = []
+
+commonBgClasses :: Array ClassName
+commonBgClasses =
+ [ T.bgTpsBlack
+ , T.hoverBgBlack
+ ]
+
+commonMenuClasses :: Array ClassName
+commonMenuClasses =
+ [ T.px3
+ , T.block
+ ]
+ <> commonBgClasses
+
+commonTextClasses :: Array ClassName
+commonTextClasses =
+ [ T.textWhite
+ , T.leading10
+ ]
+
+menuTextClasses :: Array ClassName
+menuTextClasses =
+ [ T.borderL
+ , T.borderSolid
+ , T.borderGray700
+ ]
+ <> commonMenuClasses
+ <> commonTextClasses
+
+dropdownItemClasses :: Array ClassName
+dropdownItemClasses =
+ [ T.block
+ , T.wFull
+ ]
+ <> commonBgClasses
+ <> commonTextClasses
diff --git a/client/src/Try/Common.purs b/client/src/Try/Common.purs
new file mode 100644
index 00000000..fc7b8fbe
--- /dev/null
+++ b/client/src/Try/Common.purs
@@ -0,0 +1,51 @@
+module Try.Common where
+
+import Prelude
+
+{-
+Common values and newtype wrappers
+-}
+--
+-- Page to launch on startup and when clicking home button
+homeRoute :: String
+homeRoute = "/?gist=93b9116a309c97af2af5d3f06f6a4479"
+
+-- Query param for compressed code.
+pursQP :: String
+pursQP = "purs"
+
+-- Query param for gist.
+gistQP :: String
+gistQP = "gist"
+
+newtype AuthCode
+ = AuthCode String
+
+instance showAuthCode :: Show AuthCode where
+ show (AuthCode c) = c
+
+newtype Compressed
+ = Compressed String
+
+instance showCompressed :: Show Compressed where
+ show (Compressed c) = c
+
+newtype Content
+ = Content String
+
+instance showContent :: Show Content where
+ show (Content c) = c
+
+derive instance eqContent :: Eq Content
+
+newtype GistID
+ = GistID String
+
+instance showGistID :: Show GistID where
+ show (GistID g) = g
+
+newtype GhToken
+ = GhToken String
+
+instance showToken :: Show GhToken where
+ show (GhToken t) = t
diff --git a/client/src/Try/Component.purs b/client/src/Try/Component.purs
new file mode 100644
index 00000000..7302a2be
--- /dev/null
+++ b/client/src/Try/Component.purs
@@ -0,0 +1,511 @@
+module Try.Component where
+
+import Prelude
+import Ace (Document, EditSession, Range, ace, edit)
+import Ace.Document as Document
+import Ace.EditSession as Session
+import Ace.Editor as Editor
+import Ace.Marker as Marker
+import Data.Argonaut (encodeJson, stringify)
+import Data.Array (catMaybes, concat, mapMaybe, mapWithIndex)
+import Data.Array as Array
+import Data.Either (Either(..))
+import Data.Foldable (traverse_)
+import Data.Maybe (Maybe(..), fromMaybe)
+import Data.Newtype (unwrap)
+import Data.Time.Duration (Milliseconds(..))
+import Data.Traversable (traverse)
+import Data.Tuple.Nested ((/\))
+import Effect.Aff.Class (class MonadAff, liftAff)
+import Effect.Class.Console (log)
+import Halogen (liftEffect)
+import Halogen as H
+import Halogen.HTML as HH
+import Halogen.HTML.Events as HE
+import Halogen.HTML.Properties as HP
+import Halogen.Hooks (useState)
+import Halogen.Hooks as HK
+import Halogen.Hooks.Extra.Hooks (useDebouncer, useModifyState_, usePutState)
+import Halogen.Query.EventSource as ES
+import LzString (compressToEncodedURIComponent)
+import MyAce as MyAce
+import Tailwind as T
+import Try.API (AnnotationType(..), CompileError(..), CompileResult(..), CompilerError, WarningOrError, compile, mkMarkerRange, toAnnotation)
+import Try.Classes (Responsiveness(..), commonMenuClasses, dropdownItemClasses, menuTextClasses, nonMobileBlock, nonMobileBlockClasses)
+import Try.Common (Content(..), GhToken, GistID(..), gistQP, homeRoute, pursQP)
+import Try.Gist (ghAuthorize, ghCreateGist, ghGetGist, ghRequestToken)
+import Try.Loader (Loader, makeLoader, runLoader)
+import Try.Routing (Route(..))
+import Try.Types (JS(..))
+import Try.Utility (ContentSource(..), PushRoute, ViewMode(..), compress, decompress)
+import Web.HTML (window)
+import Web.HTML.Location (setHref)
+import Web.HTML.Window (location)
+
+{-
+The main component for this app
+-}
+--
+type Input
+ = PushRoute
+
+-- Query must be (Type -> Type)
+data Query a
+ = Nav Route a
+
+-- This is required for good caching performance
+loader :: Loader
+loader = makeLoader
+
+-- What can be shown in the output pane
+data Output
+ = Text String -- startup or simple error
+ | Loading -- loading gif
+ | App String JS -- json string and main JS
+ | Errors (Array CompilerError) -- compiler errors
+
+component :: forall o m. MonadAff m => H.Component HH.HTML Query Input o m
+component =
+ -- No tokens for child slots or output
+ HK.component \({ queryToken } :: HK.ComponentTokens Query _ o) input -> HK.do
+ -- Annotations for initial values not required, but helps with clarity
+ viewMode /\ putViewMode <- usePutState (SideBySide :: ViewMode)
+ autoCompile /\ autoCompileIdx <- useState true
+ showJS /\ modifyShowJS <- useModifyState_ false
+ dropdownOpen /\ putDropdownOpen <- usePutState false
+ content /\ contentIdx <- useState $ Content ""
+ document /\ putDocument <- usePutState (Nothing :: Maybe Document)
+ session /\ sessionIdx <- useState (Nothing :: Maybe EditSession)
+ route /\ putRoute <- usePutState (Nothing :: Maybe Route)
+ ghToken /\ putGhToken <- usePutState (Nothing :: Maybe GhToken)
+ pushRoute /\ putPushRoute <- usePutState (input :: PushRoute)
+ contentSource /\ putContentSource <- usePutState (NewContent :: ContentSource)
+ output /\ putOutput <- usePutState $ (Text "" :: Output)
+ --
+ -- Helper functions to reduce code duplication
+ let
+ -- GhToken is a parameter rather than picked-up from state
+ -- to ensure it is not Nothing
+ doSaveGist gh_token = do
+ -- Cannot just use `content` - will be stale
+ currentContent <- HK.get contentIdx
+ log $ "saving gist, content: " <> show currentContent
+ eitherId <- liftAff $ ghCreateGist gh_token $ currentContent
+ case eitherId of
+ Left err -> log err
+ Right id -> do
+ putContentSource $ HaveGist id
+ liftEffect $ pushRoute $ "/?" <> gistQP <> "=" <> (show id)
+
+ -- Create editor annotations and markers for errors or warnings
+ annotateAndMark :: forall r. AnnotationType -> Array (WarningOrError r) -> _
+ annotateAndMark type_ arr = do
+ ses <- HK.get sessionIdx
+ case ses of
+ Nothing -> do
+ log "Error: Session unset"
+ Just s ->
+ liftEffect do
+ -- annotations
+ let
+ annotations = mapMaybe (toAnnotation type_) arr
+ Session.setAnnotations annotations s
+ -- markers
+ maybeRanges <- traverse mkMarkerRange arr
+ let
+ (ranges :: Array Range) = catMaybes maybeRanges
+ -- The shown type of "error" or "warning" should match the css class
+ -- found in ace.css.
+ -- `true` to show in "front"
+ traverse_ (\r -> Session.addMarker r (show type_) "text" true s) ranges
+
+ -- Clear annotations and marks from editor
+ removeAnnotationsAndMarks = do
+ ses <- HK.get sessionIdx
+ case ses of
+ Nothing -> log "Error: Session unset"
+ Just s ->
+ liftEffect do
+ -- Remove annotations
+ Session.clearAnnotations s
+ -- A `removeMarkers` function would be nice...
+ -- Get all inFront(=true) markers
+ markers <- MyAce.getMarkers true s
+ (markerIds :: Array Int) <- traverse Marker.getId markers
+ -- Remove markers
+ traverse_ (\m -> Session.removeMarker m s) markerIds
+
+ doCompile = do
+ -- Needed now that this is called from debouncer.
+ -- Stale otherwise.
+ currentContent <- HK.get contentIdx
+ -- Clear annotations and marks from editor
+ removeAnnotationsAndMarks
+ putOutput Loading
+ (res :: Either String CompileResult) <- liftAff $ compile currentContent
+ case res of
+ Right (CompileSuccess { js, warnings }) -> do
+ -- warnings is maybe array. Why not just let this be an array?
+ -- Create annotations and markers for warnings
+ annotateAndMark AnnotateWarning $ fromMaybe [] warnings
+ -- Get JS source files for all included modules
+ obj <- liftAff $ runLoader loader $ JS js
+ -- Compress source file contents.
+ -- This avoids non-trivial HTML + JSON string escaping
+ let
+ objcomp = map (unwrap >>> compressToEncodedURIComponent) obj
+ -- Convert object to JSON string
+ let
+ jsonStr = stringify $ encodeJson objcomp
+ -- Pass JS files to execute in iframe
+ putOutput $ App jsonStr $ JS js
+ Right (CompileFailed { error }) -> do
+ case error of
+ CompilerErrors (errs :: Array CompilerError) -> do
+ putOutput $ Errors errs
+ -- Create annotations and markers for errors
+ annotateAndMark AnnotateError errs
+ OtherError err -> do
+ putOutput $ Text err
+ Left err -> do
+ let
+ str = "bad result. Likely communication issue with compiler: " <> err
+ putOutput $ Text str
+ --
+ -- Debouncer for auto-compile
+ debouncedRecompile <-
+ useDebouncer (Milliseconds 1000.0) \_ -> do
+ -- Recompile if setting is enabled
+ autoRecomp <- HK.get autoCompileIdx
+ if autoRecomp then do
+ doCompile
+ else
+ pure unit -- don't recompile
+ --
+ -- Must put writeContent after debouncedRecompile
+ let
+ -- update content in editor and state
+ writeContent (Content ct) = do
+ --log $ "writing content: " <> ct
+ HK.put contentIdx $ Content ct
+ liftEffect $ traverse_ (Document.setValue ct) document
+ -- Queue an automatic recompile (ignored if setting disabled)
+ debouncedRecompile unit
+ --
+ -- Initialize Ace editor and subscribe to text changes
+ HK.useLifecycleEffect do
+ doc /\ ses <-
+ liftEffect do
+ -- Create an editor
+ editor <- edit "editor" ace
+ -- disable vertical line on right side of editor that
+ -- estimates where words will be wrapped on paper.
+ Editor.setShowPrintMargin false editor
+ session_ <- Editor.getSession editor
+ -- Haskell syntax highlighting.
+ -- We could build more specialized highlighting for purs:
+ -- https://ace.c9.io/#higlighter=&nav=higlighter
+ Session.setMode "ace/mode/haskell" session_
+ Session.setTabSize 2 session_
+ document_ <- Session.getDocument session_
+ pure $ document_ /\ session_
+ --
+ -- Handle changes within editor.
+ -- Ignoring returned subscription ID.
+ _ <-
+ HK.subscribe do
+ ES.effectEventSource \emitter -> do
+ -- Ignoring DocumentEvent
+ Document.onChange doc \_ -> do
+ str <- Document.getValue doc
+ let
+ newContent = Content str
+ ES.emit emitter do
+ -- Compare content to prevent clearing gist status immediately upon gist load
+ oldContent <- HK.get contentIdx
+ if (newContent /= oldContent) then do
+ -- New content clears existing contentSource
+ putContentSource NewContent
+ writeContent newContent
+ liftEffect $ pushRoute $ "/?" <> pursQP <> "=" <> (show $ compress newContent)
+ else do
+ -- Do nothing if content unchanged
+ pure unit
+ -- No finalizer, so return mempty
+ pure mempty
+ putDocument $ Just doc
+ HK.put sessionIdx $ Just ses
+ pure Nothing
+ --
+ -- Handle routing queries
+ HK.useQuery queryToken \(Nav rt a) -> do
+ -- multiple state modifications, but not a performance issue now.
+ putRoute $ Just rt
+ case rt of
+ AuthorizeCallback authCode compressed -> do
+ log "in auth callback"
+ -- Immediately show new content.
+ -- This also requires setting saving flag again, since state
+ -- is reset upon page refresh from callback.
+ writeContent $ decompress compressed
+ putContentSource SavingGist
+ -- Make ghToken request to private app server
+ res <- liftAff $ ghRequestToken authCode
+ case res of
+ Left err -> log err
+ Right gh_token -> do
+ -- Save ghToken
+ putGhToken $ Just gh_token
+ -- Save gist
+ doSaveGist gh_token
+ LoadCompressed compressed -> do
+ let
+ ct = decompress compressed
+ --log $ "Got content from url: " <> show ct
+ writeContent ct
+ LoadGist gist_id -> do
+ eitherContent <- liftAff $ ghGetGist gist_id
+ case eitherContent of
+ Left err -> putOutput $ Text $ "Failed to load gist at: https://gist.github.com/" <> show gist_id <> "\n" <> err
+ Right c -> do
+ --log $ "Got content from gist: " <> show c
+ writeContent c
+ putContentSource $ HaveGist gist_id
+ --
+ -- Note that pushRoute just sets the URL, but won't reload the page:
+ -- liftEffect $ pushRoute homeRoute
+ Home -> liftEffect $ window >>= location >>= setHref homeRoute
+ -- Required response boilerplate for query
+ pure (Just a)
+ --
+ -- Helper functions for rendering
+ let
+ menu =
+ HH.div
+ [ HP.classes
+ [ T.flex
+ , T.bgTpsBlack
+ ]
+ ]
+ [ HH.a
+ [ HP.href homeRoute
+ , HP.title "Try PureScript!"
+ , HP.classes commonMenuClasses
+ ]
+ -- Could also define image width/height in css
+ [ HH.img
+ [ HP.src $ "img/favicon-white.svg"
+ , HP.width 40
+ , HP.width 40
+ ]
+ ]
+ , viewModeDropdown
+ , mkClickButton
+ "Compile"
+ "Compile Now"
+ NonMobile
+ doCompile
+ , mkToggleButton
+ "Auto-Compile"
+ "Compile on code changes"
+ autoCompile
+ NonMobile
+ ( do
+ -- toggle setting
+ HK.modify_ autoCompileIdx not
+ -- Queue a recompile in the case of enabling.
+ -- Will be ignored if setting is disabled.
+ debouncedRecompile unit
+ )
+ , mkToggleButton
+ "Show JS"
+ "Show resulting JavaScript code instead of output"
+ showJS
+ RenderAlways
+ $ modifyShowJS not
+ , gistButtonOrLink
+ , newTabLink
+ "Help"
+ "Learn more about Try PureScript"
+ "https://github.com/purescript/trypurescript/blob/master/README.md"
+ ]
+
+ mkClickButton text title res action =
+ HH.button
+ [ HP.classes $ menuTextClasses <> nonMobileBlock res
+ , HP.title title
+ , HE.onClick \_ -> Just action
+ ]
+ [ HH.text text ]
+
+ mkToggleButton text title enabled res action =
+ HH.button
+ [ HP.classes $ menuTextClasses <> highlight <> nonMobileBlock res
+ , HP.title title
+ , HE.onClick \_ -> Just action
+ ]
+ [ HH.text text ]
+ where
+ highlight = if enabled then [ T.textTpsEnabled ] else [ T.textTpsDisabled, T.lineThrough ]
+
+ viewModeDropdown =
+ let
+ dropdownItems =
+ if dropdownOpen then
+ HH.div
+ [ HP.classes
+ [ T.absolute
+ , T.z10
+ , T.wFull
+ ]
+ ]
+ $ map
+ mkDropdownItem
+ [ SideBySide, Code, Output ]
+ else
+ HH.div_ []
+ in
+ HH.div
+ [ HP.classes [ T.relative ]
+ , HE.onMouseEnter \_ -> Just $ putDropdownOpen true
+ , HE.onMouseLeave \_ -> Just $ putDropdownOpen false
+ ]
+ [ HH.div
+ [ HP.classes $ menuTextClasses <> nonMobileBlockClasses
+ , HP.title "Select a view mode"
+ ]
+ [ HH.text "View Mode ▾" ]
+ , dropdownItems
+ ]
+
+ mkDropdownItem vm =
+ HH.button
+ [ HP.classes $ dropdownItemClasses <> highlight
+ , HE.onClick \_ -> Just $ putViewMode vm
+ ]
+ [ HH.text $ show vm ]
+ where
+ highlight = if vm == viewMode then [ T.textTpsEnabled ] else []
+
+ newTabLink text title href =
+ HH.a
+ [ HP.href href
+ , HP.target "_blank" -- Open in new tab
+ , HP.classes menuTextClasses
+ , HP.title title
+ ]
+ [ HH.text text ]
+
+ gistButtonOrLink = case contentSource of
+ NewContent ->
+ mkClickButton
+ "Save Gist"
+ "Save code to GitHub Gist (requires OAuth login)"
+ NonMobile
+ ( do
+ -- Immediately show "saving" status
+ putContentSource SavingGist
+ case ghToken of
+ Nothing -> do
+ log "need token - authorizing"
+ liftEffect $ ghAuthorize content
+ Just gh_token -> do
+ log "have token"
+ doSaveGist gh_token
+ )
+ SavingGist ->
+ HH.div
+ [ HP.classes menuTextClasses ]
+ [ HH.text "Saving..." ]
+ HaveGist (GistID id) ->
+ newTabLink
+ "View Gist"
+ "Open the original gist in a new window"
+ $ "https://gist.github.com/"
+ <> id
+
+ renderIframe jsonStr =
+ HH.iframe
+ [ sandbox "allow-scripts allow-top-navigation"
+ , HP.src "frame-error.html"
+ , srcDoc
+ $ ""
+ <> ""
+ , HP.classes [ T.flexGrow ]
+ ]
+
+ renderOutputInner = case output of
+ Text str -> [ HH.text str ]
+ Loading ->
+ [ HH.img
+ [ HP.src "img/loading.gif"
+ , HP.classes [ T.objectContain ]
+ ]
+ ]
+ App str (JS js) ->
+ if showJS then
+ [ HH.pre [ HP.classes [ T.textXs ] ] [ HH.code_ [ HH.text js ] ] ]
+ else
+ [ renderIframe str ]
+ Errors errs -> concat $ mapWithIndex mkError errs
+ where
+ len = show $ Array.length errs
+
+ mkError i { message } =
+ [ HH.code
+ [ HP.classes [ T.fontBold, T.text2xl, T.py2, T.px5 ] ]
+ [ HH.text $ "Error " <> show (i + 1) <> " of " <> len ]
+ , HH.pre_ [ HH.code_ [ HH.text message ] ]
+ ]
+
+ renderOutput =
+ HH.div
+ [ HP.classes $ [ T.flex, T.flexCol, T.flexGrow, T.w0 ] <> hidden ]
+ renderOutputInner
+ where
+ hidden = case viewMode of
+ Code -> [ T.hidden ]
+ _ -> [] -- don't hide for output or side-by-side
+
+ renderEditor =
+ HH.div
+ [ HP.classes $ [ T.hidden ] <> display
+ ]
+ [ HH.div
+ [ HP.classes [ T.flexGrow ]
+ , HP.id_ "editor"
+ ]
+ []
+ ]
+ where
+ display = case viewMode of
+ -- don't show in output-only view mode
+ Output -> []
+ -- display for code or side-by-side
+ _ -> [ T.smFlex, T.flexGrow, T.borderR4, T.borderGray100 ]
+
+ banner =
+ HH.div
+ [ HP.classes [ T.block, T.smHidden, T.bgTpsMobileBanner, T.textTpsBlack, T.textSm, T.borderB, T.borderTpsBlack, T.p1, T.mb2 ] ]
+ [ HH.text "Your screen size is too small. Code editing has been disabled." ]
+ --
+ -- Render
+ HK.pure do
+ HH.div [ HP.classes [ T.flex, T.flexCol, T.hScreen ] ]
+ [ menu
+ , banner
+ , HH.div
+ [ HP.classes [ T.flex, T.flexRow, T.flexGrow, T.spaceX1 ] ]
+ [ renderEditor, renderOutput ]
+ ]
+
+{-
+Todo create Halogen PRs for these missing props
+-}
+sandbox :: forall r i. String -> HH.IProp ( sandbox :: String | r ) i
+sandbox = HH.prop (HH.PropName "sandbox")
+
+srcDoc :: forall r i. String -> HH.IProp ( srcDoc :: String | r ) i
+srcDoc = HH.prop (HH.PropName "srcdoc")
diff --git a/client/src/Try/Gist.js b/client/src/Try/Gist.js
deleted file mode 100644
index 003adac1..00000000
--- a/client/src/Try/Gist.js
+++ /dev/null
@@ -1,48 +0,0 @@
-"use strict";
-
-exports.getGistById_ = function(id, done, fail) {
- $.ajax({
- url: 'https://api.github.com/gists/' + id,
- dataType: 'json'
- }).done(done).fail(function(err) {
- fail("Unable to load Gist metadata");
- });
-}
-
-exports.tryLoadFileFromGist_ = function(gistInfo, filename, done, fail) {
- if (gistInfo.files && gistInfo.files.hasOwnProperty(filename)) {
- var url = gistInfo.files[filename].raw_url;
-
- return $.ajax({
- url: url,
- dataType: 'text'
- }).done(done).fail(function(err) {
- fail(err.statusText);
- });
- } else {
- fail("Gist does not contain a file named " + filename);
- }
-};
-
-exports.uploadGist_ = function(content, done, fail) {
- var data = {
- "description": "Published with try.purescript.org",
- "public": false,
- "files": {
- "Main.purs": {
- "content": content
- }
- }
- };
-
- $.ajax({
- url: 'https://api.github.com/gists',
- type: 'POST',
- dataType: 'json',
- data: JSON.stringify(data)
- }).success(function(e) {
- done(e.id);
- }).error(function(e) {
- fail(e);
- });
-};
diff --git a/client/src/Try/Gist.purs b/client/src/Try/Gist.purs
index 6057e291..2e52e0df 100644
--- a/client/src/Try/Gist.purs
+++ b/client/src/Try/Gist.purs
@@ -1,49 +1,120 @@
-module Try.Gist
- ( GistInfo
- , uploadGist
- , getGistById
- , tryLoadFileFromGist
- ) where
-
--- | An abstract data type representing the data we get back from the GitHub API.
-import Prelude
+module Try.Gist where
-import Control.Monad.Cont.Trans (ContT(..))
-import Control.Monad.Except.Trans (ExceptT(..))
+import Prelude
+import Affjax as AX
+import Affjax.RequestBody as AXRB
+import Affjax.RequestHeader as AXRH
+import Affjax.ResponseFormat as AXRF
+import Data.Argonaut (decodeJson, encodeJson, stringify)
import Data.Either (Either(..))
+import Data.HTTP.Method (Method(..))
+import Data.Maybe (Maybe(..))
import Effect (Effect)
-import Effect.Uncurried (EffectFn1, EffectFn3, EffectFn4, mkEffectFn1, runEffectFn3, runEffectFn4)
-
--- | An abstract data type representing the data we get back from the GitHub API.
-data GistInfo
-
-foreign import uploadGist_
- :: EffectFn3 String
- (EffectFn1 String Unit)
- (EffectFn1 String Unit)
- Unit
-
--- | A wrapper for `uploadGist` which uses `ContT`.
-uploadGist :: String -> ExceptT String (ContT Unit Effect) String
-uploadGist content = ExceptT (ContT \k -> runEffectFn3 uploadGist_ content (mkEffectFn1 (k <<< Right)) (mkEffectFn1 (k <<< Left)))
-
--- | Get a gist by its ID
-foreign import getGistById_
- :: EffectFn3 String
- (EffectFn1 GistInfo Unit)
- (EffectFn1 String Unit)
- Unit
-
--- | A wrapper for `getGistById` which uses `ContT`.
-getGistById :: String -> ExceptT String (ContT Unit Effect) GistInfo
-getGistById id_ = ExceptT (ContT \k -> runEffectFn3 getGistById_ id_ (mkEffectFn1 (k <<< Right)) (mkEffectFn1 (k <<< Left)))
-
-foreign import tryLoadFileFromGist_
- :: EffectFn4 GistInfo
- String
- (EffectFn1 String Unit)
- (EffectFn1 String Unit)
- Unit
-
-tryLoadFileFromGist :: GistInfo -> String -> ExceptT String (ContT Unit Effect) String
-tryLoadFileFromGist gi filename = ExceptT (ContT \k -> runEffectFn4 tryLoadFileFromGist_ gi filename (mkEffectFn1 (k <<< Right)) (mkEffectFn1 (k <<< Left)))
+import Effect.Aff (Aff)
+import Try.Common (AuthCode(..), Content(..), GhToken(..), GistID(..), pursQP)
+import Try.Config (appDomain, clientID, tokenServerUrl)
+import Try.Utility (compress)
+import Web.HTML (window)
+import Web.HTML.Location (setHref)
+import Web.HTML.Window (location)
+
+{-
+Handles HTTP requests for fetching and saving github gists.
+-}
+--
+type TokenResp
+ = { access_token :: String }
+
+ghRequestToken :: AuthCode -> Aff (Either String GhToken)
+ghRequestToken (AuthCode code) = do
+ result <- AX.post AXRF.json tokenServerUrl $ Just $ AXRB.json $ encodeJson { code }
+ pure
+ $ case result of
+ Left err -> do
+ Left $ "POST /api response failed to decode: " <> AX.printError err
+ Right response -> do
+ let
+ respStr = "POST /api response: " <> stringify response.body
+ case decodeJson response.body of
+ Left err -> Left $ "Failed to decode json response: " <> respStr <> ", Error: " <> show err
+ Right (decoded :: TokenResp) -> Right $ GhToken decoded.access_token
+
+gistApiUrl :: String
+gistApiUrl = "https://api.github.com/gists"
+
+type GistJson
+ = { files :: { "Main.purs" :: { content :: String } }
+ }
+
+type GistJsonWithDescription
+ = { files ::
+ { "Main.purs" ::
+ { content :: String
+ , description :: String
+ }
+ }
+ }
+
+setGistContent :: Content -> GistJsonWithDescription
+setGistContent (Content content) =
+ { files:
+ { "Main.purs":
+ { content
+ , description: "Created by TryPurescript"
+ }
+ }
+ }
+
+getGistContent :: GistJson -> Content
+getGistContent obj = Content obj.files."Main.purs".content
+
+ghGetGist :: GistID -> Aff (Either String Content)
+ghGetGist (GistID gistID) = do
+ result <- AX.get AXRF.json $ gistApiUrl <> "/" <> gistID
+ pure
+ $ case result of
+ Left err -> Left $ "GET gist response failed to decode: " <> AX.printError err
+ Right response -> do
+ let
+ respStr = "POST /api response: " <> stringify response.body
+ case decodeJson response.body of
+ Left err -> Left $ "Failed to decode json response: " <> respStr <> ", Error: " <> show err
+ Right (decoded :: GistJson) -> Right $ getGistContent decoded
+
+ghCreateGist :: GhToken -> Content -> Aff (Either String GistID)
+ghCreateGist token content = do
+ result <-
+ AX.request
+ ( AX.defaultRequest
+ { url = gistApiUrl
+ , method = Left POST
+ , responseFormat = AXRF.json
+ , headers = [ AXRH.RequestHeader "Authorization" $ "token " <> show token ]
+ , content = Just $ AXRB.json $ encodeJson $ setGistContent content
+ }
+ )
+ pure
+ $ case result of
+ Left err -> do
+ Left $ "POST /api response failed to decode: " <> AX.printError err
+ Right response -> do
+ let
+ respStr = "POST /api response: " <> stringify response.body
+ case decodeJson response.body of
+ Left err -> Left $ "Failed to decode json response: " <> respStr <> ", Error: " <> show err
+ Right (decoded :: { id :: String }) -> Right $ GistID decoded.id
+
+ghAuthorize :: Content -> Effect Unit
+ghAuthorize content = window >>= location >>= setHref authUrl
+ where
+ authUrl =
+ "https://github.com/login/oauth/authorize?"
+ <> "client_id="
+ <> clientID
+ <> "&scope=gist"
+ <> "&redirect_uri="
+ <> appDomain
+ <> "/?"
+ <> pursQP
+ <> "="
+ <> (show $ compress content)
diff --git a/client/src/Try/Loader.purs b/client/src/Try/Loader.purs
index c26f1fd2..2214d369 100644
--- a/client/src/Try/Loader.purs
+++ b/client/src/Try/Loader.purs
@@ -1,17 +1,14 @@
-module Try.Loader
- ( Loader
- , makeLoader
- , runLoader
- ) where
+module Try.Loader where
import Prelude
-
+import Affjax as AX
+import Affjax.ResponseFormat as AXRF
+import Try.Config (loaderUrl)
import Control.Bind (bindFlipped)
-import Control.Monad.Cont (ContT)
-import Control.Monad.Except (ExceptT)
import Control.Parallel (parTraverse)
import Data.Array as Array
import Data.Array.NonEmpty as NonEmpty
+import Data.Either (Either(..))
import Data.Maybe (Maybe(..), fromMaybe)
import Data.Newtype (unwrap)
import Data.String (Pattern(..))
@@ -22,39 +19,45 @@ import Data.String.Regex.Flags (noFlags)
import Data.String.Regex.Unsafe (unsafeRegex)
import Data.Tuple (Tuple(..))
import Effect (Effect)
+import Effect.Aff (Aff)
import Effect.Class (liftEffect)
import Effect.Ref (Ref)
import Effect.Ref as Ref
import Effect.Unsafe (unsafePerformEffect)
import Foreign.Object (Object)
import Foreign.Object as Object
-import Try.API as API
import Try.Shim (shims)
import Try.Types (JS(..))
-type Module =
- { name :: String
- , path :: Maybe String
- , deps :: Array Dependency
- , src :: JS
- }
-
-type Dependency =
- { name :: String
- , path :: Maybe String
- }
+{-
+Collects all JS modules required by compled code.
+-}
+--
+type Module
+ = { name :: String
+ , path :: Maybe String
+ , deps :: Array Dependency
+ , src :: JS
+ }
+
+type Dependency
+ = { name :: String
+ , path :: Maybe String
+ }
requireRegex :: Regex
requireRegex = unsafeRegex """^var\s+\S+\s*=\s*require\(["']([^"']*)["']\)""" noFlags
+-- Consider replacing these with node-path dirname and concat
dirname :: String -> String
-dirname path = fromMaybe "" do
- ix <- String.lastIndexOf (Pattern "/") path
- pure $ String.take ix path
+dirname path =
+ fromMaybe "" do
+ ix <- String.lastIndexOf (Pattern "/") path
+ pure $ String.take ix path
resolvePath :: String -> String -> Maybe String
resolvePath a b
- | String.take 2 b == "./" = Just $ dirname a <> String.drop 1 b
+ | String.take 2 b == "./" = Just $ dirname a <> String.drop 1 b
| String.take 3 b == "../" = Just $ dirname (dirname a) <> String.drop 2 b
| otherwise = Nothing
@@ -65,23 +68,39 @@ parseDeps current = Array.mapMaybe go <<< String.split (Pattern "\n") <<< unwrap
go line = do
match <- Regex.match requireRegex line
requirePath <- join $ NonEmpty.index match 1
- pure $ case resolvePath current requirePath of
- Just path ->
- { name: path
- , path: String.stripPrefix (Pattern "/") path
- }
- _ ->
- { name: requirePath
- , path: Nothing
- }
-
-newtype Loader = Loader (JS -> ExceptT String (ContT Unit Effect) (Object JS))
-
-runLoader :: Loader -> JS -> ExceptT String (ContT Unit Effect) (Object JS)
-runLoader (Loader k) = k
-
-makeLoader :: String -> Loader
-makeLoader rootPath = Loader (go Object.empty <<< parseDeps "")
+ pure
+ $ case resolvePath current requirePath of
+ Just path ->
+ { name: path
+ , path: String.stripPrefix (Pattern "/") path
+ }
+ _ ->
+ { name: requirePath
+ , path: Nothing
+ }
+
+{-
+Notes
+
+Could change error handling, but kinda nice to
+just throw the errors from JS.
+
+Assuming makeLoader runLoader pattern is to save
+cache between calls to runLoader.
+
+-}
+newtype Loader
+ = Loader (JS -> Aff (Object JS))
+
+runLoader :: Loader -> JS -> Aff (Object JS)
+runLoader (Loader k) js = do
+ -- Run loader to collect all dependencies for compiled code
+ obj <- k js
+ -- Return dependencies along with compiled code
+ pure $ Object.insert "" js obj
+
+makeLoader :: Loader
+makeLoader = Loader (go Object.empty <<< parseDeps "")
where
moduleCache :: Ref (Object Module)
moduleCache = unsafePerformEffect (Ref.new Object.empty)
@@ -92,32 +111,51 @@ makeLoader rootPath = Loader (go Object.empty <<< parseDeps "")
getModule :: String -> Effect (Maybe Module)
getModule a = Object.lookup a <$> Ref.read moduleCache
- load :: Dependency -> ExceptT String (ContT Unit Effect) Module
+ load :: Dependency -> Aff Module
load { name, path } = do
cached <- liftEffect $ getModule name
case cached of
Just mod -> pure mod
Nothing -> do
- mod <-
- case path of
- Just path' -> do
- srcStr <- API.get (rootPath <> "/" <> path')
- let src = JS $ srcStr <> "\n//# sourceURL=" <> path'
- pure { name, path, deps: parseDeps name src, src }
- Nothing -> case Object.lookup name shims of
- Just shim -> do
- srcStr <- API.get shim.url
- let
- src = JS $ srcStr <> "\n//# sourceURL=" <> shim.url
+ mod <- case path of
+ -- Path means dependency is another file
+ Just path' -> do
+ let
+ url = loaderUrl <> "/" <> path'
+ --log $ "get: " <> url
+ res <- AX.get AXRF.string url
+ case res of
+ Left err -> pure { name, path, deps: [], src }
+ where
+ src = throwJSError $ "Could not get file " <> url <> ", " <> AX.printError err
+ Right { body } -> do
+ --log $ "got body:\n" <> body
+ pure { name, path, deps: parseDeps name src, src }
+ where
+ src = JS $ body <> "\n//# sourceURL=" <> path'
+ -- No path means dependency is a shim
+ Nothing -> case Object.lookup name shims of
+ Just shim -> do
+ res <- AX.get AXRF.string shim.url
+ case res of
+ Left err -> pure { name, path, deps: [], src }
+ where
+ src = throwJSError $ "Could not get shim " <> name <> " at " <> shim.url <> ", " <> AX.printError err
+ Right { body } -> pure { name, path, deps, src }
+ where
+ src = JS $ body <> "\n//# sourceURL=" <> shim.url
+
deps = { name: _, path: Nothing } <$> shim.deps
- pure { name, path, deps, src }
- Nothing ->
- pure { name, path, deps: [], src: ffiDep name }
+ Nothing -> pure { name, path, deps: [], src }
+ where
+ -- Todo - link to instructions for adding shims
+ src = throwJSError $ "FFI dependency not provided: " <> name
liftEffect $ putModule name mod
pure mod
- go :: Object JS -> Array Dependency -> ExceptT String (ContT Unit Effect) (Object JS)
- go ms [] = pure ms
+ go :: Object JS -> Array Dependency -> Aff (Object JS)
+ go ms [] = pure ms
+
go ms deps = do
modules <- parTraverse load deps
let
@@ -131,5 +169,5 @@ makeLoader rootPath = Loader (go Object.empty <<< parseDeps "")
# Array.nubBy (comparing _.name)
# go ms'
-ffiDep :: String -> JS
-ffiDep name = JS $ "throw new Error('FFI dependency not provided: " <> name <> "');"
+throwJSError :: String -> JS
+throwJSError err = JS $ "throw new Error('" <> err <> "');"
diff --git a/client/src/Try/QueryString.js b/client/src/Try/QueryString.js
deleted file mode 100644
index 56c5e290..00000000
--- a/client/src/Try/QueryString.js
+++ /dev/null
@@ -1,13 +0,0 @@
-"use strict";
-
-exports.getQueryString = function() {
- return window.location.search;
-};
-
-exports.setQueryParameters = function(params) {
- var encodedParams = Object.keys(params).map(function(key) {
- return key + '=' + encodeURIComponent(params[key].replace('/', ''));
- }).join('&');
-
- window.location.search = '?' + encodedParams;
-};
diff --git a/client/src/Try/QueryString.purs b/client/src/Try/QueryString.purs
deleted file mode 100644
index 8009936a..00000000
--- a/client/src/Try/QueryString.purs
+++ /dev/null
@@ -1,54 +0,0 @@
-module Try.QueryString
- ( getQueryParams
- , getQueryStringMaybe
- , setQueryString
- , setQueryStrings
- ) where
-
-import Prelude
-
-import Data.Array as Array
-import Data.Maybe (Maybe(..))
-import Data.Newtype (wrap)
-import Data.String as String
-import Data.Tuple (Tuple(..))
-import Effect (Effect)
-import Effect.Uncurried (EffectFn1, runEffectFn1)
-import Foreign.Object as Object
-import Global.Unsafe (unsafeDecodeURIComponent)
-
-foreign import getQueryString :: Effect String
-
--- | Get all of the URL's query parameters.
-getQueryParams :: Effect (Object.Object String)
-getQueryParams = breakQueryString <$> getQueryString where
- breakQueryString :: String -> Object.Object String
- breakQueryString =
- String.drop 1
- >>> String.split (wrap "&")
- >>> map (String.split (wrap "=") >>> parseQueryTerm)
- >>> Array.catMaybes
- >>> Object.fromFoldable
-
- parseQueryTerm :: Array String -> Maybe (Tuple String String)
- parseQueryTerm [k, v] = Just (Tuple k (unsafeDecodeURIComponent (spaces v)))
- parseQueryTerm _ = Nothing
-
- spaces :: String -> String
- spaces = String.replaceAll (wrap "+") (wrap " ")
-
--- | Try to get a key from the URL's query parameters.
-getQueryStringMaybe :: String -> Effect (Maybe String)
-getQueryStringMaybe key = Object.lookup key <$> getQueryParams
-
--- | Set the value of a query string parameter
-foreign import setQueryParameters :: EffectFn1 (Object.Object String) Unit
-
--- | Update the specified key in the URL's query parameters.
-setQueryString :: String -> String -> Effect Unit
-setQueryString k v = setQueryStrings (Object.singleton k v)
-
-setQueryStrings :: Object.Object String -> Effect Unit
-setQueryStrings ss = do
- params <- getQueryParams
- runEffectFn1 setQueryParameters (Object.union ss params)
diff --git a/client/src/Try/Routing.purs b/client/src/Try/Routing.purs
new file mode 100644
index 00000000..71a332d1
--- /dev/null
+++ b/client/src/Try/Routing.purs
@@ -0,0 +1,33 @@
+module Try.Routing where
+
+import Prelude
+import Data.Foldable (oneOf)
+import Data.Generic.Rep (class Generic)
+import Data.Generic.Rep.Show (genericShow)
+import Routing.Match (Match, end, param, root)
+import Try.Common (AuthCode(..), Compressed(..), GistID(..), gistQP, pursQP)
+
+{-
+Handles navigation within the single-page-app.
+-}
+--
+data Route
+ = AuthorizeCallback AuthCode Compressed
+ | LoadCompressed Compressed
+ | LoadGist GistID
+ | Home
+
+derive instance genericRoute :: Generic Route _
+
+instance showRoute :: Show Route where
+ show = genericShow
+
+route :: Match Route
+route =
+ root
+ *> oneOf
+ [ AuthorizeCallback <$> (AuthCode <$> param "code") <*> (Compressed <$> param pursQP)
+ , LoadCompressed <$> Compressed <$> param pursQP
+ , LoadGist <$> GistID <$> param gistQP
+ , Home <$ end
+ ]
diff --git a/client/src/Try/Session.js b/client/src/Try/Session.js
deleted file mode 100644
index 42c9971a..00000000
--- a/client/src/Try/Session.js
+++ /dev/null
@@ -1,18 +0,0 @@
-"use strict";
-
-exports.storeSession_ = function(sessionId, state) {
- if (window.localStorage) {
- localStorage.setItem(sessionId, state.code);
- localStorage.setItem(sessionId + 'backend', state.backend);
- }
-};
-
-exports.tryRetrieveSession_ = function(sessionId) {
- if (window.localStorage) {
- var code = localStorage.getItem(sessionId);
- var backend = localStorage.getItem(sessionId + 'backend');
- if (code && backend) {
- return { code: code, backend: backend };
- }
- }
-};
diff --git a/client/src/Try/Session.purs b/client/src/Try/Session.purs
deleted file mode 100644
index 2262bf26..00000000
--- a/client/src/Try/Session.purs
+++ /dev/null
@@ -1,59 +0,0 @@
-module Try.Session
- ( storeSession
- , tryRetrieveSession
- , createSessionIdIfNecessary
- ) where
-
-import Prelude
-
-import Data.Functor.App (App(..))
-import Data.Int (hexadecimal, toStringAs)
-import Data.Maybe (Maybe(..))
-import Data.Newtype (unwrap)
-import Data.Nullable (Nullable, toMaybe)
-import Data.String as String
-import Effect (Effect)
-import Effect.Random (randomInt)
-import Effect.Uncurried (EffectFn1, EffectFn2, runEffectFn1, runEffectFn2)
-import Try.QueryString (getQueryStringMaybe, setQueryString)
-
-randomGuid :: Effect String
-randomGuid =
- unwrap (App s4 <> App s4 <> pure "-" <>
- App s4 <> pure "-" <>
- App s4 <> pure "-" <>
- App s4 <> pure "-" <>
- App s4 <> App s4 <> App s4)
- where
- s4 = padLeft <<< toStringAs hexadecimal <$> randomInt 0 (256 * 256)
- padLeft s = String.drop (String.length s - 1) ("000" <> s)
-
-foreign import storeSession_
- :: EffectFn2 String
- { code :: String }
- Unit
-
--- | Store the current session state in local storage
-storeSession
- :: String
- -> { code :: String }
- -> Effect Unit
-storeSession sessionId values = runEffectFn2 storeSession_ sessionId values
-
-foreign import tryRetrieveSession_
- :: EffectFn1 String
- (Nullable { code :: String })
-
--- | Retrieve the session state from local storage
-tryRetrieveSession :: String -> Effect (Maybe { code :: String })
-tryRetrieveSession sessionId = toMaybe <$> runEffectFn1 tryRetrieveSession_ sessionId
-
--- | Look up the session by ID, or create a new session ID.
-createSessionIdIfNecessary
- :: (String -> Effect Unit)
- -> Effect Unit
-createSessionIdIfNecessary k = do
- sessionId <- getQueryStringMaybe "session"
- case sessionId of
- Just sessionId_ -> k sessionId_
- Nothing -> randomGuid >>= setQueryString "session"
diff --git a/client/src/Try/Shim.purs b/client/src/Try/Shim.purs
index b6608b78..cff6471a 100644
--- a/client/src/Try/Shim.purs
+++ b/client/src/Try/Shim.purs
@@ -4,36 +4,42 @@ import Data.Tuple (Tuple(..))
import Foreign.Object (Object)
import Foreign.Object as Object
-type Shim =
- { url :: String
- , deps :: Array String
- }
+{-
+Allows loading additional dependencies, which are required by
+some libraries.
+Feel free to add additional entries to this file.
+-}
+--
+type Shim
+ = { url :: String
+ , deps :: Array String
+ }
shims :: Object Shim
-shims = Object.fromFoldable
- [ Tuple "react"
- { url: "https://unpkg.com/react@16.13.1/umd/react.development.js"
- , deps: []
- }
- , Tuple "react-dom"
- { url: "https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"
- , deps: [ "react" ]
- }
- , Tuple "react-dom/server"
- { url: "https://unpkg.com/react-dom@16.13.1/umd/react-dom-server.browser.development.js"
- , deps: [ "react" ]
- }
- , Tuple "big-integer"
- { url: "https://unpkg.com/big-integer@1.6.48/BigInteger.min.js"
- , deps: []
- }
- , Tuple "decimal.js"
- { url: "https://unpkg.com/decimal.js@10.2.0/decimal.min.js"
- , deps: []
- }
- , Tuple "uuid"
- { url: "https://cdnjs.cloudflare.com/ajax/libs/uuid/8.1.0/uuid.min.js"
- , deps: []
- }
- ]
-
+shims =
+ Object.fromFoldable
+ [ Tuple "react"
+ { url: "https://unpkg.com/react@16.13.1/umd/react.development.js"
+ , deps: []
+ }
+ , Tuple "react-dom"
+ { url: "https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"
+ , deps: [ "react" ]
+ }
+ , Tuple "react-dom/server"
+ { url: "https://unpkg.com/react-dom@16.13.1/umd/react-dom-server.browser.development.js"
+ , deps: [ "react" ]
+ }
+ , Tuple "big-integer"
+ { url: "https://unpkg.com/big-integer@1.6.48/BigInteger.min.js"
+ , deps: []
+ }
+ , Tuple "decimal.js"
+ { url: "https://unpkg.com/decimal.js@10.2.0/decimal.min.js"
+ , deps: []
+ }
+ , Tuple "uuid"
+ { url: "https://cdnjs.cloudflare.com/ajax/libs/uuid/8.1.0/uuid.min.js"
+ , deps: []
+ }
+ ]
diff --git a/client/src/Try/Types.purs b/client/src/Try/Types.purs
index a85d2e8b..c57fb212 100644
--- a/client/src/Try/Types.purs
+++ b/client/src/Try/Types.purs
@@ -1,12 +1,17 @@
-module Try.Types
- ( JS(..)
- ) where
+module Try.Types where
+import Data.Argonaut (class EncodeJson)
import Data.Newtype (class Newtype)
-import Foreign.Class (class Encode)
-newtype JS = JS String
+{-
+Some common types.
+Just the `JS` type for now.
+-}
+--
+newtype JS
+ = JS String
+-- enable `unwrap`
derive instance newtypeJS :: Newtype JS _
-derive newtype instance encodeJS :: Encode JS
+derive newtype instance encodeJsonJS :: EncodeJson JS
diff --git a/client/src/Try/Utility.purs b/client/src/Try/Utility.purs
new file mode 100644
index 00000000..3a273e9c
--- /dev/null
+++ b/client/src/Try/Utility.purs
@@ -0,0 +1,37 @@
+module Try.Utility where
+
+import Prelude
+import Try.Common (Compressed(..), Content(..), GistID)
+import Effect (Effect)
+import LzString (compressToEncodedURIComponent, decompressFromEncodedURIComponent)
+
+{-
+Helper functions that can exist outside of the main component.
+-}
+--
+data ViewMode
+ = SideBySide
+ | Code
+ | Output
+
+-- Could alternatively derive if displaying "SideBySide"(no hyphens) is okay.
+instance showViewMode :: Show ViewMode where
+ show SideBySide = "Side-by-side"
+ show Code = "Code"
+ show Output = "Output"
+
+derive instance eqViewMode :: Eq ViewMode
+
+type PushRoute
+ = String -> Effect Unit
+
+data ContentSource
+ = NewContent --NoGist
+ | SavingGist
+ | HaveGist GistID
+
+compress :: Content -> Compressed
+compress (Content c) = Compressed $ compressToEncodedURIComponent c
+
+decompress :: Compressed -> Content
+decompress (Compressed c) = Content $ decompressFromEncodedURIComponent c
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
new file mode 100644
index 00000000..bd52ff78
--- /dev/null
+++ b/client/tailwind.config.js
@@ -0,0 +1,21 @@
+// tailwind.config.js
+module.exports = {
+ purge: [
+ './public/index.js',
+ ],
+ theme: {
+ extend: {
+ colors: {
+ 'tps-black': '#1d222d',
+ //'tps-button-enabled-background': '#8490a9',
+ 'tps-disabled': '#ababab',
+ 'tps-enabled': '#c4953a',
+ 'tps-mobile-banner': '#dabf8b',
+ // mobile border same as button background
+
+ }
+ }
+ },
+ variants: {},
+ plugins: [],
+}
diff --git a/client/webpack.common.js b/client/webpack.common.js
new file mode 100644
index 00000000..5bd4ac03
--- /dev/null
+++ b/client/webpack.common.js
@@ -0,0 +1,44 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const webpack = require('webpack');
+
+module.exports = {
+ entry: {
+ "index.js": [
+ "./public/tailwind.css",
+ "./public/ace.css",
+ "./public/index.js",
+ ],
+ },
+ plugins: [
+ new CleanWebpackPlugin(),
+ new HtmlWebpackPlugin({
+ template: './public/index.html',
+ }),
+ new CopyPlugin({
+ patterns: [
+ {from: 'public/js/frame.js'},
+ {from: 'public/img', to: 'img'},
+ {from: 'public/CNAME'},
+ ],
+ }),
+ ],
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ ],
+ },
+ ],
+ },
+ output: {
+ filename: '[name]',
+ path: path.resolve(__dirname, 'dist'),
+ publicPath: '/',
+ },
+};
diff --git a/client/webpack.dev.js b/client/webpack.dev.js
new file mode 100644
index 00000000..1af5978f
--- /dev/null
+++ b/client/webpack.dev.js
@@ -0,0 +1,11 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+ mode: 'development',
+ devtool: 'inline-source-map',
+ devServer: {
+ contentBase: false,
+ },
+});
+
diff --git a/client/webpack.prod.js b/client/webpack.prod.js
new file mode 100644
index 00000000..ed0670ee
--- /dev/null
+++ b/client/webpack.prod.js
@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+ mode: 'production',
+});