From 93b92af380bfb212e1d27cc04e0cd761a964bb19 Mon Sep 17 00:00:00 2001 From: Niklas Mischkulnig Date: Tue, 8 Dec 2020 17:14:28 +0100 Subject: [PATCH] Elm docs (#770) * Elm docs * Update elm.md --- src/languages/elm.md | 79 +++++++++++++++++++++++++++++++++++++ src/languages/typescript.md | 2 +- 2 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 src/languages/elm.md diff --git a/src/languages/elm.md b/src/languages/elm.md new file mode 100644 index 000000000..d19e24383 --- /dev/null +++ b/src/languages/elm.md @@ -0,0 +1,79 @@ +--- +layout: layout.njk +eleventyNavigation: + key: languages-elm + title: Elm + order: 9 +--- + +You can import [Elm](https://elm-lang.org/) files like any another Javascript files. + +The npm package `elm` needs to be manually installed beforehand. You'll also need a `elm.json` configuration file (run `yarn elm init -y` to get started and modify it if neccessary). + +{% sample null, "column" %} +{% samplefile "index.html" %} + +```html + +
+ +``` + +{% endsamplefile %} + +{% samplefile "index.js" %} + +```js +import { Elm } from "./Main.elm"; + +Elm.Main.init({ node: document.getElementById("root") }); +``` + +{% endsamplefile %} + +{% samplefile "Main.elm" %} + +```elm +module Main exposing (..) + +import Browser +import Html exposing (Html, button, div, text) +import Html.Events exposing (onClick) + +main = + Browser.sandbox { init = init, update = update, view = view } + +type alias Model = Int + +init : Model +init = + 0 + +type Msg = Increment | Decrement + +update : Msg -> Model -> Model +update msg model = + case msg of + Increment -> + model + 1 + + Decrement -> + model - 1 + + +view : Model -> Html Msg +view model = + div [] + [ button [ onClick Decrement ] [ text "-" ] + , div [] [ text (String.fromInt model) ] + , button [ onClick Increment ] [ text "+" ] + ] +``` + +{% endsamplefile %} + +{% endsample %} + +## Time-travelling debuggger + +Elm's debug mode is automatically enabled when not building for production (it is disabled automatically with `parcel build`). You can set the environment variable `PARCEL_ELM_NO_DEBUG=1` to disable it even in development mode. diff --git a/src/languages/typescript.md b/src/languages/typescript.md index 266e49a99..048ba9bda 100644 --- a/src/languages/typescript.md +++ b/src/languages/typescript.md @@ -7,7 +7,7 @@ eleventyNavigation: summary: Explains the different ways TypeScript can be transpiled --- -Typescript works out of the box with Parcel, but there ... +Typescript works out of the box with Parcel, but you have multiple options: ## Babel