| Copyright | (C) 2016-2025 David M. Johnson |
|---|---|
| License | BSD3-style (see the file LICENSE) |
| Maintainer | David M. Johnson <code@dmj.io> |
| Stability | experimental |
| Portability | non-portable |
| Safe Haskell | None |
| Language | Haskell2010 |
Miso.FFI
Description
Foreign Function Interface (FFI) utilities for interacting with JavaScript.
Synopsis
- set :: ToJSVal v => MisoString -> v -> Object -> IO ()
- now :: IO Double
- consoleLog :: MisoString -> IO ()
- consoleLog' :: ToArgs a => a -> IO ()
- consoleError :: MisoString -> IO ()
- consoleWarn :: MisoString -> IO ()
- getElementById :: MisoString -> IO JSVal
- focus :: MisoString -> IO ()
- blur :: MisoString -> IO ()
- select :: MisoString -> IO ()
- setSelectionRange :: MisoString -> Int -> Int -> IO ()
- alert :: MisoString -> IO ()
- getProperty :: JSVal -> MisoString -> IO JSVal
- callFunction :: ToArgs args => JSVal -> MisoString -> args -> IO JSVal
- castJSVal :: FromJSVal a => JSVal -> IO (Maybe a)
- removeChild :: DOMRef -> DOMRef -> IO ()
- addStyle :: MisoString -> IO JSVal
- addStyleSheet :: MisoString -> IO JSVal
- syncCallback :: IO () -> IO JSVal
- syncCallback1 :: (JSVal -> IO ()) -> IO JSVal
- asyncCallback :: IO () -> IO JSVal
- asyncCallback1 :: (JSVal -> IO ()) -> IO JSVal
- asyncCallback2 :: (JSVal -> JSVal -> IO ()) -> IO JSVal
- flush :: IO ()
- setDrawingContext :: MisoString -> IO ()
- windowInnerWidth :: IO Int
- windowInnerHeight :: IO Int
- locationReload :: IO ()
- newtype Image = Image JSVal
- newImage :: MisoString -> IO Image
- newtype Date = Date JSVal
- newDate :: IO Date
- toLocaleString :: Date -> IO MisoString
- getSeconds :: Date -> IO Double
- getMilliseconds :: Date -> IO Double
- nextSibling :: JSVal -> IO JSVal
- previousSibling :: JSVal -> IO JSVal
- click :: () -> JSVal -> IO ()
- setValue :: DOMRef -> MisoString -> IO ()
- files :: JSVal -> IO [JSVal]
- isOnLine :: IO Bool
- newtype ArrayBuffer = ArrayBuffer JSVal
- newtype Blob = Blob JSVal
- newtype Uint8Array = Uint8Array JSVal
- newtype FormData = FormData JSVal
- newtype File = File JSVal
- newtype URLSearchParams = URLSearchParams JSVal
- newtype FileReader = FileReader JSVal
- newFileReader :: IO FileReader
- fetch :: (FromJSVal success, FromJSVal error) => MisoString -> MisoString -> Maybe JSVal -> [(MisoString, MisoString)] -> (Response success -> IO ()) -> (Response error -> IO ()) -> CONTENT_TYPE -> IO ()
- data Response body = Response {
- status :: Maybe Int
- headers :: Map MisoString MisoString
- errorMessage :: Maybe MisoString
- body :: body
- addEventListener :: JSVal -> MisoString -> (JSVal -> IO ()) -> IO Function
- removeEventListener :: JSVal -> MisoString -> Function -> IO ()
- dispatchEvent :: Event -> IO ()
- newEvent :: ToArgs args => args -> IO Event
- newCustomEvent :: ToArgs args => args -> IO Event
- newtype Event = Event JSVal
- eventPreventDefault :: JSVal -> IO ()
- eventStopPropagation :: JSVal -> IO ()
- inline :: (FromJSVal return, ToObject object) => MisoString -> object -> IO return
Object
Performance
Retrieve high resolution time stamp
See https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
Logging
consoleLog :: MisoString -> IO () Source #
Outputs a message to the web console
See https://developer.mozilla.org/en-US/docs/Web/API/Console/log
Console logging of JavaScript strings.
consoleLog' :: ToArgs a => a -> IO () Source #
Console-logging of JSVal
consoleError :: MisoString -> IO () Source #
Outputs an error message to the web console
See https://developer.mozilla.org/en-US/docs/Web/API/Console/error
Console logging of JavaScript strings.
consoleWarn :: MisoString -> IO () Source #
Outputs a warning message to the web console
See https://developer.mozilla.org/en-US/docs/Web/API/Console/warn
Console logging of JavaScript strings.
DOM
getElementById :: MisoString -> IO JSVal Source #
Returns an Element object representing the element whose id property matches the specified string.
See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
focus :: MisoString -> IO () Source #
Fails silently if the element is not found.
Analogous to document.getElementById(id).focus().
blur :: MisoString -> IO () Source #
Fails silently if the element is not found.
Analogous to document.getElementById(id).blur()
select :: MisoString -> IO () Source #
Fails silently if the element is not found.
Analogous to document.querySelector(.# + id).select()
setSelectionRange :: MisoString -> Int -> Int -> IO () Source #
Fails silently if the element is not found.
Analogous to document.querySelector(.# + id).setSelectionRange(start, end, 'none')
alert :: MisoString -> IO () Source #
Calls the alert() function.
getProperty :: JSVal -> MisoString -> IO JSVal Source #
Get a property of a JSVal
Example usage:
Just (value :: String) <- fromJSVal =<< getProperty domRef "value"
callFunction :: ToArgs args => JSVal -> MisoString -> args -> IO JSVal Source #
Calls a function on a JSVal
Example usage:
callFunction domRef "focus" () callFunction domRef "setSelectionRange" (0, 3, "none")
castJSVal :: FromJSVal a => JSVal -> IO (Maybe a) Source #
Marshalling of JSVal, useful for getProperty
removeChild :: DOMRef -> DOMRef -> IO () Source #
Removes a child node from a parent node.
Calls miso.drawingContext.removeChild(parent, child).
Since: 1.9.0.0
Styles
addStyleSheet :: MisoString -> IO JSVal Source #
Callbacks
asyncCallback2 :: (JSVal -> JSVal -> IO ()) -> IO JSVal Source #
A asynchronous callback with two arguments
Drawing
Flush is used to force a draw of the render tree. This is currently only used when targeting platforms other than the browser (like mobile).
setDrawingContext :: MisoString -> IO () Source #
Used to select a drawing context. Users can override the default DOM renderer by implementing their own Context, and exporting it to the global scope. This opens the door to different rendering engines, ala miso-lynx.
Window
windowInnerWidth :: IO Int Source #
Retrieves the width (in pixels) of the browser window viewport including if rendered, the vertical scrollbar.
See https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth
windowInnerHeight :: IO Int Source #
Retrieves the height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.
See https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight
locationReload :: IO () Source #
Calls the location.reload() function.
Image
Type that holds an Image.
Date
toLocaleString :: Date -> IO MisoString Source #
Date conversion function to produce a locale
DOM Traversal
Element
setValue :: DOMRef -> MisoString -> IO () Source #
Sets the .value property on a DOMRef.
Useful for resetting the value property on an input element.
setValue domRef ("" :: MisoString)
File Input
files :: JSVal -> IO [JSVal] Source #
When working with <input type="file">, this is useful for
extracting out the selected files.
update (InputClicked inputElement) = withSink $ \sink -> do
files_ <- files inputElement
forM_ files_ $ \file -> sink (Upload file)
update (Upload file) = do
fetch "https://localhost:8080/upload" "POST" (Just file) []
Successful Errorful
Since: 1.9.0.0
Navigator
Navigator function to query the current online status of the user's computer
See navigator.onLine
ArrayBuffer
newtype ArrayBuffer Source #
Constructors
| ArrayBuffer JSVal |
Instances
| Eq ArrayBuffer Source # | |
Defined in Miso.FFI.Internal | |
| FromJSVal ArrayBuffer Source # | |
Defined in Miso.FFI.Internal Methods fromJSVal :: JSVal -> IO (Maybe ArrayBuffer) Source # fromJSValUnchecked :: JSVal -> IO ArrayBuffer Source # | |
| ToJSVal ArrayBuffer Source # | |
Defined in Miso.FFI.Internal | |
Blob
Uint8Array
newtype Uint8Array Source #
Constructors
| Uint8Array JSVal |
Instances
| FromJSVal Uint8Array Source # | |
Defined in Miso.FFI.Internal Methods fromJSVal :: JSVal -> IO (Maybe Uint8Array) Source # fromJSValUnchecked :: JSVal -> IO Uint8Array Source # | |
| ToJSVal Uint8Array Source # | |
Defined in Miso.FFI.Internal | |
FormData
File
URLSearchParams
newtype URLSearchParams Source #
Constructors
| URLSearchParams JSVal |
Instances
| Eq URLSearchParams Source # | |
Defined in Miso.FFI.Internal Methods (==) :: URLSearchParams -> URLSearchParams -> Bool # (/=) :: URLSearchParams -> URLSearchParams -> Bool # | |
| FromJSVal URLSearchParams Source # | |
Defined in Miso.FFI.Internal | |
| ToJSVal URLSearchParams Source # | |
Defined in Miso.FFI.Internal | |
| ToObject URLSearchParams Source # | |
Defined in Miso.FFI.Internal | |
FileReader
newtype FileReader Source #
Constructors
| FileReader JSVal |
Instances
| Eq FileReader Source # | |
Defined in Miso.FFI.Internal | |
| FromJSVal FileReader Source # | |
Defined in Miso.FFI.Internal Methods fromJSVal :: JSVal -> IO (Maybe FileReader) Source # fromJSValUnchecked :: JSVal -> IO FileReader Source # | |
| ToJSVal FileReader Source # | |
Defined in Miso.FFI.Internal | |
| ToObject FileReader Source # | |
Defined in Miso.FFI.Internal | |
newFileReader :: IO FileReader Source #
Smart constructor for building a FileReader
Fetch API
Arguments
| :: (FromJSVal success, FromJSVal error) | |
| => MisoString | url |
| -> MisoString | method |
| -> Maybe JSVal | body |
| -> [(MisoString, MisoString)] | headers |
| -> (Response success -> IO ()) | successful callback |
| -> (Response error -> IO ()) | errorful callback |
| -> CONTENT_TYPE | content type |
| -> IO () |
Retrieve JSON via Fetch API
Basic GET of JSON using Fetch API, will be expanded upon.
See https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Type returned from a fetch request
Constructors
| Response | |
Fields
| |
Event
Arguments
| :: JSVal | Event target on which we want to register event listener |
| -> MisoString | Type of event to listen to (e.g. "click") |
| -> (JSVal -> IO ()) | Callback which will be called when the event occurs, the event will be passed to it as a parameter. |
| -> IO Function |
Register an event listener on given target.
Arguments
| :: JSVal | Event target from which we want to remove event listener |
| -> MisoString | Type of event to listen to (e.g. "click") |
| -> Function | Callback which will be called when the event occurs, the event will be passed to it as a parameter. |
| -> IO () |
Removes an event listener from given target.
dispatchEvent :: Event -> IO () Source #
Invokes document.dispatchEvent
update ChangeTheme = io_ $ do
themeEvent <- newEvent "basecoat:theme"
dispatchEvent themeEvent
newEvent :: ToArgs args => args -> IO Event Source #
Creates a new Event
update ChangeTheme = io_ $ do
themeEvent <- newEvent "basecoat:theme"
dispatchEvent themeEvent
newCustomEvent :: ToArgs args => args -> IO Event Source #
Creates a new Event
update ToggleSidebar = io_ $ do
themeEvent <- newCustomEvent "basecoat:sidebar"
dispatchEvent themeEvent
eventPreventDefault :: JSVal -> IO () Source #
Prevent default event behavior
eventStopPropagation :: JSVal -> IO () Source #
Stop propagation of events
Inline JS
inline :: (FromJSVal return, ToObject object) => MisoString -> object -> IO return Source #
Convenience function to write inline javascript.
Prefer this function over the use of eval.
This function takes as arguments a JavaScript object and makes the keys available in the function body.
data Person = Person { name :: MisoString, age :: Int }
deriving stock (Generic)
deriving anyclass (ToJSVal, ToObject)
logNameGetAge :: Person -> IO Int
logNameGetAge = inline
"""
console.log(name, name);
return age;
"""