A type of the writer: based on the RWS Monad. The Reader part holds an expression to reference the curent HTML container element. The Writer part is the list of Javascript statements being formed. Container may be any DOM Element, but not a Text node or anything else.

Run the code writer (raw way, returns both state and log). Container will be initialized into the body of the current HTML document. Same as runJSMWWith currDocBody

Run the code writer (raw way, returns both state and log) with explicitly specified container.

Obtain a block statement from the result of runJSWM. The last expression forms a 'return' statement, so the resulting block may be used as a function's body.

Body of the current document: use it to start the toplevel instance of the Writer as a container for runJSMWWith.

The JSMW code consists of monadic smart constructors forming Javascript method calls. These constructors are inlined each time they are referenced. The once combinator causes a variable assignment statement to be formed with the variable assigned to the expression returned. All future references will be to the variable rather than to the expression. Since the expression will be evaluated when assigned to the variable, referencing the variable will reference the result, and possible effect will not be repeated.

Create a unique variable name. This function increments the internal state of the monad and produces a string consisting of the letter 'v' and a unique number.

Write out a statement. This function utilizes the Writer part of the monad, and adds the Javascript statement provided to the Writer's log.

Create a Javascript string literal out of a string, monadic version.

Create a Javascript numeric literal out of a numeric value, monadic version.

Create a Javascript boolean literal out of a Boolean, monadic version.

Type of a function creating HTML elements, e. g. mkButton, mkDiv

Insert a passive element into the current container.

Nest an element inside another element via monadic composition. Example usage:

ask >>= nest mkButton >>= nest (mkText $ string "Foo")

inserts a button with text "Foo" into the current container.

The type system makes sure that only an instance of a DOM Element can nest other elements, e. g.

 ... mkText (string "Foo") >>= nest mkDiv

would not typecheck.

Example: a text, a newline, and two buttons: ask retrieves the current container.

 q = do
   passive (mkText $ string "Hello")
   passive mkBr
   ask >>= nest mkButton >>= nest (mkText $ string "Foo")
   ask >>= nest mkButton >>= nest (mkText $ string "Bar")

Specify a new container that in nested into the current one. As long as the container is active, all subsequently defined elements will be inserted into it.

Example: a Button with two text labels separated with a newline:

   mkButton `container` (do
     passive (mkText $ string "Hello") 
     passive mkBr
     passive (mkText $ string "GoodBye"))

Everything defined within a do expression is inserted into the button which is the new container.

Create an element for future use, and return a reference to it. The element may be inserted into a container different from one it was created with (when ref was called). But it should be used within the same document it was created inside.

Turn an element reference into element creation function. It can be useful when an element created earlier has to be used as a container, or a passive element, or nested. The type signature of ref2ecrf reflects the fact that the element was created when one container was current, but may be used with another container.

Essentially same as container except that a reference to an element has to be supplied rather than an element creation function. Another difference from container: element referenced is not added as a child to the current container.

Data type for building inline style assignment expressions.

An action to use within a container to update its inline style. setStyle called with an empty list does not change the inline style. Note that style settings are compile-time only.

Example: a DIV element with style settings applied and a text:

   mkDiv `container` (do
     setStyle ["display" := "inline"
              ,"float" := "right"
              ,"width" := "45%"
              ,"text-align" := "center"
              ,"background-color" := "green"
              ,"color" := "white"
              ,"font-weight" := "bold"]
     passive (mkText $ string "Styled"))

A type for a on-style event handler. It represents a function which takes an event and returns a boolean.

Set a on-style (e. g. onclick) event handler on the current container.

Example: a button with a click handler which shows the X coordinate of the click.

  mkButton `container` (do
    passive (mkText $ string "Click Me")
    setHandler "click" clickHandler)
  ...
  clickHandler :: OnHandler TMouseEvent THTMLButtonElement
  clickHandler e = do
    getm'clientX e >>= toString >>= alert
    return true

A handler function has one argument which gets the reference to the event caught. The handler function also may implicitly address the container it was set on by calling ask or passive. For example, calling passive (mkText $ string "x") within a handler will result in a text node being added to the container.

Also note that the OnHandler type may be parameterized by the type of containers it can be set on. In the example above, the handler may only be set on buttons.

The MSIE-specific code to obtain event from the static attribute of the current window is inserted in the beginning of the handler automatically.

Retrieves the monad environment.