HalogenPurescriptUI

VSCode Purescript Halogen Snippets

Posted on by 

In Visual Studio Code it is possible to define own snippets. In this blog post I would like to share our snippets to create Components and Parent Components for Halogen. With this snippets creating a new component is a matter of seconds. You just need to add a proper Module name and the implementation (business logic, rendering) of your component.

To add own snippets in Visual Studio Code (on Mac) you can open Code > Preferences > User Snippets. In the search field type purescript (if this is not found, you can just create a new snippet with this name). Paste the following json content into the configuration file:

{
    "Halogen Simple Component": {
        "prefix": "halogen",
        "body": [
            "module ${name:MODULENAME} where",
            "",
            "import Prelude",
            "import Data.Maybe (Maybe(..))",
            "",
            "import Halogen as H",
            "import Halogen.HTML as HH",
            "import Halogen.HTML.Properties as HP",
            "",
            "",
            "type State = {}",
            "",
            "initialState :: State",
            "initialState = {}",
            "",
            "",
            "",
            "data Query next = Initialize next",
            "  | Finalize next",
            "",
            "type Input = Unit",
            "",
            "type Message = Void",
            "",
            "",
            "",
            "component :: forall m. H.Component HH.HTML Query Input Message m",
            "component =", 
          "  H.lifecycleComponent",
            "    { initialState: const initialState",
            "    , render",
            "    , eval",
            "    , receiver: const Nothing",
            "    , initializer: Just (H.action Initialize)",
            "    , finalizer: Just (H.action Finalize)",
            "    }",
            "",
            "  where",
            "    eval :: Query ~> H.ComponentDSL State Query Message m",
            "    eval = case _ of",
            "      Initialize next ->",
            "        pure next",
            "",
            "      Finalize next ->",
            "        pure next",
            "",
            "",
            "",
            "    render :: State -> H.ComponentHTML Query",
            "    render state =",
            "      HH.div",
            "        []",
            "        [ HH.text \"Component\" ]",
            ""
        ],
        "description": "Generate a simple Halogen Component"
    },
    "Halogen Parent Component": {
        "prefix": "halogen",
        "body": [
            "module ${name:MODULENAME} where",
            "",
            "import Prelude",
            "import Data.Maybe (Maybe(..))",
            "",
            "import Halogen as H",
            "import Halogen.HTML as HH",
            "import Halogen.HTML.Properties as HP",
            "import Halogen.Component.ChildPath as CP",
            "",
            "",
            "",
            "type State = {}",
            "",
            "initialState :: State",
            "initialState = {}",
            "",
            "",
            "",
            "data Query next = Initialize next",
            "  | Finalize next",
            "",
            "type Input = Unit",
            "",
            "type Message = Void",
            "",
            "",
            "data ChildSlot = ${childComponentSlot:ChildComponentSlot}",
            "derive instance eqChildComponentSlot :: Eq ChildSlot",
            "derive instance ordChildComponentSlot :: Ord ChildSlot",
            "",
            "",
            "",
            "type ChildQuery a = ChildComponent.Query a",
            "",
            "",
            "",
            "component :: forall q m. H.Component HH.HTML Query Input Message m",
            "component =", 
          "  H.lifecycleComponent",
            "    { initialState: const initialState",
            "    , render",
            "    , eval",
            "    , receiver: const Nothing",
            "    , initializer: Just (H.action Initialize)",
            "    , finalizer: Just (H.action Finalize)",
            "    }",
            "",
            "  where",
            "    eval :: forall c. (Query q) ~> H.ParentDSL State Query (ChildQuery c) ChildSlot Message m",
            "    eval = case _ of",
            "      Initialize next ->",
            "        pure next",
            "",
            "      Finalize next ->",
            "        pure next",
            "",
            "",
            "    render :: forall c. State -> H.ParentHTML Query (ChildQuery c) ChildSlot m",
            "    render state =",
            "      HH.div",
            "        []",
            "        [ HH.text \"Component\" ]",
            ""
        ],
        "description": "Generate a Halogen Component embedding child components"
    },
}

Both components are lifeCycle components which have Initialization and Finalize queries. Of course you can adjust those snippets to your own needs.

If this post saved you a couple of minutes or you just liked it, share your thoughts in the comment area below or buy me a coffee to support me :)

Buy Me a Coffee at ko-fi.com