Panda.Internal.Types

data ArrayUpdate value

An algebra for array updates. We use this to describe the ways in which we would like to update the DOM.

Constructors

• ArrayDeleteAt Int
• ArrayEmpty
• ArrayInsertAt Int value
• ArrayMove Int Int
• ArrayPop
• ArrayPush value
• ArrayShift
• ArrayUnshift value

newtype ComponentUpdate eff update state event

Components are updated using the array algebra, but specialised to component values.

Constructors

• ComponentUpdate (ArrayUpdate (Component eff update state event))

data MapUpdate value

An algebra for map updates.

Constructors

• MapInsert String value
• MapDelete String

newtype PropertyUpdate

Properties are updated using the map algebra specialised to strings.

Constructors

• PropertyUpdate (MapUpdate String)

type FX eff = (dom :: DOM, frp :: FRP, ref :: REF | eff)

The effects that are used within Panda.

data Producer

All the possible event producers.

Constructors

• OnAbort
• OnBlur
• OnChange
• OnContextMenu
• OnClick
• OnDoubleClick
• OnDrag
• OnDragEnd
• OnDragEnter
• OnDragExit
• OnDragLeave
• OnDragOver
• OnDragStart
• OnDrop
• OnError
• OnFocus
• OnFocusIn
• OnFocusOut
• OnInput
• OnInvalid
• OnKeyDown
• OnKeyPress
• OnKeyUp
• OnLoad
• OnMouseDown
• OnMouseEnter
• OnMouseLeave
• OnMouseMove
• OnMouseOver
• OnMouseOut
• OnMouseUp
• OnReset
• OnScroll
• OnSelect
• OnSubmit
• OnTransitionEnd

data Property update state event

Properties are either static key/value pairs, listeners for DOM updates (that can then change the properties on an element), or producers of events (that then bubble up to the update function).

Constructors

• PropertyStatic { key :: String, value :: String }
• PropertyWatcher ({ state :: state, update :: update } -> (Array PropertyUpdate))
• PropertyProducer { key :: Producer, onEvent :: Event -> Maybe event }

data Children eff update state event

Children on elements can either be static (not looking for events), or dynamic. Note that the children of static children can be dynamic!

Constructors

• StaticChildren (Array (Component eff update state event))
• DynamicChildren ({ state :: state, update :: update } -> (Array (ComponentUpdate eff update state event)))

data Component eff update state event

A component is either a delegate (embedded sub-application), element (with properties and children and an HTML representation), or just some text.

Constructors

• ComponentDelegate (ComponentDelegateX eff update state event)
• ComponentElement { children :: Children eff update state event, properties :: Array (Property update state event), tagName :: String }
• CText String

type ComponentDelegate eff update state event subupdate substate subevent = { delegate :: Application eff subupdate substate subevent, focus :: { event :: subevent -> Maybe event, state :: state -> substate, update :: update -> Maybe subupdate } }

Component delegates allow us to reuse applications within larger applications, provided that we can wire up the two event systems. Note the possible leak here: in certain cases, we can isolate a sub-application as a black box within a larger application by ignoring all incoming updates and outgoing events.

data ComponentDelegateX :: Row Effect -> Type -> Type -> Type -> Type

In practice, we don't really care what the types are within a sub-application, as long as we have an appropriate mapping to and from the parent types. So, we can existentialise these inner types.

mkComponentDelegateX :: forall subevent substate subupdate event state update eff. ComponentDelegate eff update state event subupdate substate subevent -> ComponentDelegateX eff update state event

Make an existential component delegate.

runComponentDelegateX :: forall result event state update eff. (forall subevent substate subupdate. ComponentDelegate eff update state event subupdate substate subevent -> result) -> ComponentDelegateX eff update state event -> result

Retrieve a component delegate from an existentialised delegate, using the functions within focus to wire up the two applications.

newtype EventSystem eff update state event

An event system defines the update/event mechanism for a particular component. When we update the DOM, we must remember to cancel outgoing elements, and register new update handlers.

Constructors

• EventSystem { cancel :: Eff eff Unit, events :: Event event, handleUpdate :: { state :: state, update :: update } -> Eff eff Unit }

Instances

• Semigroup (EventSystem eff update state event)
• Monoid (EventSystem eff update state event)

type Updater eff update state event = ((state -> { state :: state, update :: update }) -> Eff eff Unit) -> { event :: event, state :: state } -> Eff eff Unit

Convenience synonym for defining the type of updaters within a Panda application.

type Application eff update state event = { initial :: { state :: state, update :: update }, subscription :: Event event, update :: Updater eff update state event, view :: Component eff update state event }

A Panda application is a view (written in the component DSL) that is interpreted into an element (to be attached to the DOM), an event stream (that is merged with the subscription) that feeds into the update function, that update function (which produces updates for the view), and intiial state and update.