acple/Main.purs

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./app.js" async></script>
</head>
<body></body>
</html>

## Main.purs
module Main where

import Prelude

import Data.Maybe (Maybe(..))
import Data.Symbol (SProxy(..))
import Effect (Effect)
import Effect.Class (class MonadEffect)
import Effect.Class.Console (log)
import Halogen (raise)
import Halogen as H
import Halogen.Aff (awaitBody, runHalogenAff)
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.VDom.Driver (runUI)

----------------------------------------------------------------

main :: Effect Unit
main = runHalogenAff do
  body <- awaitBody
  runUI component unit body

----------------------------------------------------------------

type State = Unit

type Child = (child :: H.Slot ChildQuery Output Unit)

_child = SProxy :: SProxy "child"

data Query a = PrintLog String a

----------------------------------------------------------------

component :: forall m. MonadEffect m => H.Component HH.HTML Query Unit Void m
component =
  H.component
    { initialState: identity
    , render
    , eval
    , receiver: const Nothing
    , initializer: Nothing
    , finalizer: Nothing
    }
  where

  render _ = HH.slot _child unit child unit (HE.input PrintLog)

  eval :: Query ~> H.HalogenM State Query Child Void m
  eval = case _ of
    PrintLog output next -> next <$ log output

----------------------------------------------------------------

type ChildState = Unit

data ChildQuery a = Raise String a

type Output = String

----------------------------------------------------------------

child :: forall m. MonadEffect m => H.Component HH.HTML ChildQuery Unit Output m
child =
  H.component
    { initialState: identity
    , render
    , eval
    , receiver: const Nothing
    , initializer: Just (H.action (Raise "initializer"))
    , finalizer: Nothing
    }
  where

  render _ =
    HH.div_
      [ HH.p_ [ HH.text "this is child component" ]
      , HH.p_ [ HH.button [ HE.onClick (HE.input_ (Raise "button")) ] [ HH.text "BUTTON!" ] ]
      ]

  eval :: ChildQuery ~> H.HalogenM ChildState ChildQuery () Output m
  eval = case _ of
    Raise trigger next -> do
      log $ "start " <> trigger
      raise "1 raise"
      log "2 log"
      raise "3 raise"
      log "4 log"
      raise "5 raise"
      log $ "end " <> trigger
      pure next
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="./app.js" async></script>
	</head>
	<body></body>
	</html>
	module Main where

	import Prelude

	import Data.Maybe (Maybe(..))
	import Data.Symbol (SProxy(..))
	import Effect (Effect)
	import Effect.Class (class MonadEffect)
	import Effect.Class.Console (log)
	import Halogen (raise)
	import Halogen as H
	import Halogen.Aff (awaitBody, runHalogenAff)
	import Halogen.HTML as HH
	import Halogen.HTML.Events as HE
	import Halogen.VDom.Driver (runUI)

	----------------------------------------------------------------

	main :: Effect Unit
	main = runHalogenAff do
	body <- awaitBody
	runUI component unit body

	----------------------------------------------------------------

	type State = Unit

	type Child = (child :: H.Slot ChildQuery Output Unit)

	_child = SProxy :: SProxy "child"

	data Query a = PrintLog String a

	----------------------------------------------------------------

	component :: forall m. MonadEffect m => H.Component HH.HTML Query Unit Void m
	component =
	H.component
	{ initialState: identity
	, render
	, eval
	, receiver: const Nothing
	, initializer: Nothing
	, finalizer: Nothing
	}
	where

	render _ = HH.slot _child unit child unit (HE.input PrintLog)

	eval :: Query ~> H.HalogenM State Query Child Void m
	eval = case _ of
	PrintLog output next -> next <$ log output

	----------------------------------------------------------------

	type ChildState = Unit

	data ChildQuery a = Raise String a

	type Output = String

	----------------------------------------------------------------

	child :: forall m. MonadEffect m => H.Component HH.HTML ChildQuery Unit Output m
	child =
	H.component
	{ initialState: identity
	, render
	, eval
	, receiver: const Nothing
	, initializer: Just (H.action (Raise "initializer"))
	, finalizer: Nothing
	}
	where

	render _ =
	HH.div_
	[ HH.p_ [ HH.text "this is child component" ]
	, HH.p_ [ HH.button [ HE.onClick (HE.input_ (Raise "button")) ] [ HH.text "BUTTON!" ] ]
	]

	eval :: ChildQuery ~> H.HalogenM ChildState ChildQuery () Output m
	eval = case _ of
	Raise trigger next -> do
	log $ "start " <> trigger
	raise "1 raise"
	log "2 log"
	raise "3 raise"
	log "4 log"
	raise "5 raise"
	log $ "end " <> trigger
	pure next