friendly-snippets/snippets/mint.json

{
    "Main component": {
        "prefix": "main",
        "body": [
            "component Main {",
            "\tfun render : Html {",
            "\t\t<$0/>",
            "\t}",
            "}"
        ],
        "description": "The component named Main is the one that get's rendered on the screen."
    },
    "Store": {
        "prefix": "store",
        "body": ["store ${1:StoreName}.Store {", "\t$0", "}"],
        "description": "Stores are global containers of application specific data."
    },
    "Store property": {
        "prefix": "prop",
        "body": ["property ${1:name} : ${2:Number} = ${0:0}"],
        "description": "The property keyword when used in a store defines part of the data that the store contains."
    },
    "Functions": {
        "prefix": "fun",
        "body": [
            "fun ${1:name}(${2:object} : ${3:String}) : ${4:Void} {",
            "\t$0",
            "}"
        ],
        "description": "Functions can be defined on modules, components, stores and providers."
    },
    "Next Call": {
        "prefix": "next",
        "body": ["next { state | ${1:name} = ${1:name} + 1 }"],
        "description": "Functions can be defined on modules, components, stores and providers."
    },
    "Render": {
        "prefix": "render",
        "body": ["fun render : Html {", "\t$0", "}"],
        "description": "The render function renders the component into an HTML tree."
    },
    "HTML Elements": {
        "prefix": "div",
        "body": ["<${1:div}::${2:stylename}>", "\t$0", "</${1:div}>"],
        "description": "HTML elements can be written as in standard HTML."
    },
    "Span Element": {
        "prefix": "span",
        "body": ["<${1:span}::${2:stylename}>", "\t$0", "</${1:span}>"],
        "description": "HTML elements can be written as in standard HTML."
    },
    "Paragraph Element": {
        "prefix": "p",
        "body": ["<${1:p}::${2:stylename}>", "\t$0", "</${1:p}>"],
        "description": "HTML elements can be written as in standard HTML."
    },
    "Title Element": {
        "prefix": "h",
        "body": ["<${1:h1}::${2:stylename}>", "\t$0", "</${1:h1}>"],
        "description": "HTML elements can be written as in standard HTML."
    },
    "Button Element": {
        "prefix": "button",
        "body": [
            "<${1:button}::${2:stylename} ${3:disabled}={${4:disabled}}>",
            "\t<{ \"${5:Text}\" }>",
            "</${1:button}>"
        ],
        "description": "HTML elements can be written as in standard HTML."
    },
    "HTML Expressions": {
        "prefix": "exp",
        "body": ["<{ \"${Message}\" }>"],
        "description": "HTML Expressions allows inserting data into HTML elements or components."
    },
    "Attributes": {
        "prefix": "att",
        "body": ["{${disabled}}"],
        "description": "Attributes are either strings or expressions."
    },
    "Modules": {
        "prefix": "mod",
        "body": ["module ${1:ModuleName} {", "\t$0", "}"],
        "description": "Modules are kind of containers for a set of relatable functions, usually used to gather functions that relate to a specific type."
    },
    "Components": {
        "prefix": "com",
        "body": ["component ${1:ComponentName} {", "\t$0", "}"],
        "description": "Components are reusable pieces of code that have specific behavior, styles and content."
    },
    "Components Tags": {
        "prefix": "tag",
        "body": ["<${1:Component} ${2:attribute}={${3:value}}/>"],
        "description": "Tags that have the name of a component will render that component at the point where the tag is defined."
    },
    "Events": {
        "prefix": "event",
        "body": ["${onEvent}={\\event : Html.Event => ${handler}()}"],
        "description": "All event handlers are functions, they take an event record and return Void."
    },
    "Connect": {
        "prefix": "con",
        "body": ["connect ${1:StoreName}.Store exposing { $0 }"],
        "description": "The connect directive lets you connect a component to a store which allows you to call the stores functions and properties without using the stores name."
    },
    "Style": {
        "prefix": "sty",
        "body": ["style ${1:base} {", "\t${2:attribute}: ${3:value};", "}"],
        "description": "Styles define with CSS how an HTML element looks."
    },
    "Computed Properties": {
        "prefix": "get",
        "body": ["get ${1:computedProperty} : ${2:String} {", "\t$0", "}"],
        "description": "Computed properties works like regular properties but instead of returning a constant value it can return different values base on the state and the properties."
    },
    "If": {
        "prefix": "if",
        "body": [
            "if (${1:condition}) {",
            "\t${2:value}",
            "} else {",
            "\t${3:otherValue}",
            "}"
        ],
        "description": "The if...else conditional expression can return two different values based on a condition."
    },
    "Case": {
        "prefix": "case",
        "body": [
            "case (${1:condition}) {",
            "\t${2:match1} => ${3:value1}",
            "\t${4:match3} => ${5:value3}",
            "\t=> ${6:defaultValue}",
            "}"
        ],
        "description": "A case expression is useful for matching enums or exact values, while also supporting a default value."
    },
    "Record": {
        "prefix": "record",
        "body": [
            "record ${1:User} {",
            "\t${2:name} : ${3:String},",
            "\t${4:email} : ${5:String}",
            "}"
        ],
        "description": "Records are object like data structures, that have a fix set of keys and values."
    },
    "Try": {
        "prefix": "try",
        "body": [
            "try {",
            "\t$1",
            "} catch ${2:Json}.Error => error {",
            "\t$3",
            "}"
        ],
        "description": "try is a control expression for handling synchronous computations that might fail, for example when you are trying to convert an untyped JavaScript object into a typed Record."
    },
    "Do": {
        "prefix": "do",
        "body": [
            "do {",
            "\t$1",
            "} catch ${2:Http}.Error => error {",
            "\t$3",
            "}"
        ],
        "description": "do expressions are for two things: handling asynchronous computations that might fail, for example when loading something with a request, or executing asynchronous expressions sequentially."
    },
    "Routes": {
        "prefix": "routes",
        "body": [
            "routes {",
            "\t/ {",
            "\t\t${1:Application.setPage(\"index\")}",
            "\t}",
            "\t/${2:user}/:${3:id} {",
            "\t\t do {",
            "\t\t\t${4:Application.setPage(\"show\")}",
            "\t\t\t${5:Application.loadUser(id)}",
            "\t\t}",
            "\t}",
            "}"
        ],
        "description": "In Mint routes of an application are defined at the top level with the routes block."
    }
}