├── .gitignore ├── src ├── main.scss ├── index.js ├── index.html ├── Main.elm └── logo.svg ├── .circleci └── config.yml ├── README.md ├── package.json ├── elm.json ├── webpack.config.js └── tests └── Tests.elm /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ 3 | elm-stuff/ 4 | tests/elm-stuff/ 5 | -------------------------------------------------------------------------------- /src/main.scss: -------------------------------------------------------------------------------- 1 | $main-padding: 20px; 2 | 3 | #main { 4 | padding: $main-padding; 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | require('./main.scss'); 2 | 3 | const { Elm } = require('./Main.elm'); 4 | const mountNode = document.getElementById('main'); 5 | 6 | Elm.Main.init({ 7 | node: document.getElementById('main') 8 | }); 9 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # .circleci/config.yml for CircleCI 2.0 2 | version: 2 3 | jobs: 4 | node8: 5 | docker: 6 | - image: node:8.6.0 7 | working_directory: ~/repo 8 | steps: 9 | - checkout 10 | - run: npm install 11 | - run: npm test 12 | 13 | workflows: 14 | version: 2 15 | build: 16 | jobs: 17 | - node8 18 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Elm Develop Environment 2 | 3 | [![CircleCI](https://circleci.com/gh/ababup1192/elm-dev-env.svg?style=svg)](https://circleci.com/gh/ababup1192/elm-dev-env) 4 | ## Install 5 | 6 | ```shell 7 | $ npm i 8 | ``` 9 | 10 | ## Launch develop server 11 | 12 | ```shell 13 | $ npm start 14 | ``` 15 | 16 | ## Test 17 | 18 | ```shell 19 | $ npm test 20 | ``` 21 | 22 | ## Build 23 | 24 | ```shell 25 | $ npm run build 26 | $ open dist/index.html 27 | ``` 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "elm-dev-env", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "dependencies": {}, 7 | "scripts": { 8 | "build": "webpack", 9 | "start": "webpack-dev-server", 10 | "test": "elm-test" 11 | }, 12 | "devDependencies": { 13 | "css-loader": "^0.28.10", 14 | "elm": "^0.19.0-bugfix2", 15 | "elm-test": "0.19.0", 16 | "elm-webpack-loader": "^5.0.0", 17 | "html-webpack-plugin": "^3.2.0", 18 | "node-sass": "^4.9.1", 19 | "sass-loader": "^7.0.3", 20 | "style-loader": "^0.20.3", 21 | "url-loader": "^1.1.1", 22 | "webpack": "^4.17.1", 23 | "webpack-cli": "^3.1.0", 24 | "webpack-dev-server": "^3.1.10" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /elm.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "application", 3 | "source-directories": [ 4 | "src", 5 | "tests" 6 | ], 7 | "elm-version": "0.19.0", 8 | "dependencies": { 9 | "direct": { 10 | "elm/browser": "1.0.0", 11 | "elm/core": "1.0.0", 12 | "elm/html": "1.0.0", 13 | "elm/random": "1.0.0" 14 | }, 15 | "indirect": { 16 | "elm/json": "1.0.0", 17 | "elm/time": "1.0.0", 18 | "elm/url": "1.0.0", 19 | "elm/virtual-dom": "1.0.0" 20 | } 21 | }, 22 | "test-dependencies": { 23 | "direct": { 24 | "elm-explorations/test": "1.2.0" 25 | }, 26 | "indirect": {} 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/Main.elm: -------------------------------------------------------------------------------- 1 | module Main exposing (Model, Msg(..), init, main, update, view) 2 | 3 | import Browser 4 | import Html exposing (Html, div, h1, img, text) 5 | import Html.Attributes exposing (src) 6 | 7 | 8 | 9 | ---- MODEL ---- 10 | 11 | 12 | type alias Model = 13 | {} 14 | 15 | 16 | init : () -> ( Model, Cmd Msg ) 17 | init _ = 18 | ( {}, Cmd.none ) 19 | 20 | 21 | 22 | ---- UPDATE ---- 23 | 24 | 25 | type Msg 26 | = NoOp 27 | 28 | 29 | update : Msg -> Model -> ( Model, Cmd Msg ) 30 | update msg model = 31 | ( model, Cmd.none ) 32 | 33 | 34 | 35 | ---- VIEW ---- 36 | 37 | 38 | view : Model -> Html Msg 39 | view model = 40 | div [] 41 | [ img [ src "../src/logo.svg" ] [] 42 | , h1 [] [ text "Your Elm App is working!" ] 43 | ] 44 | 45 | 46 | subscriptions : Model -> Sub Msg 47 | subscriptions model = 48 | Sub.none 49 | 50 | 51 | main = 52 | Browser.element 53 | { init = init 54 | , update = update 55 | , subscriptions = subscriptions 56 | , view = view 57 | } 58 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin') 2 | 3 | module.exports = { 4 | entry: `${__dirname}/src/index.js`, 5 | output: { 6 | path: `${__dirname}/dist`, 7 | filename: 'bundle.js', 8 | libraryTarget: 'window', 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.(css|scss)$/, 14 | loader: ['style-loader', 'css-loader', 'sass-loader'], 15 | }, 16 | { 17 | test: /\.elm$/, 18 | loader: 'elm-webpack-loader', 19 | options: { 20 | debug: true 21 | } 22 | }, 23 | { 24 | test: /\.svg$/, 25 | loader: 'url-loader' 26 | } 27 | ], 28 | }, 29 | plugins: [ 30 | new HtmlWebpackPlugin({ 31 | title: 'Elm app', 32 | template: `${__dirname}/src/index.html`, 33 | }) 34 | ], 35 | mode: process.env.WEBPACK_SERVE ? 'development' : 'production', 36 | devServer: { 37 | port: '8080', 38 | compress: true, 39 | watchContentBase: true, 40 | open: 'Google Chrome', 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 11 | 14 | 15 | 22 | 23 | 26 | 27 | 30 | 31 | 34 | 35 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /tests/Tests.elm: -------------------------------------------------------------------------------- 1 | module Tests exposing (suite) 2 | 3 | import Expect exposing (Expectation) 4 | import Fuzz exposing (Fuzzer, int, list, string) 5 | import Test exposing (..) 6 | 7 | 8 | suite : Test 9 | suite = 10 | describe "The String module" 11 | [ describe "String.reverse" 12 | -- Nest as many descriptions as you like. 13 | [ test "has no effect on a palindrome" <| 14 | \_ -> 15 | let 16 | palindrome = 17 | "hannah" 18 | in 19 | Expect.equal palindrome (String.reverse palindrome) 20 | 21 | -- Expect.equal is designed to be used in pipeline style, like this. 22 | , test "reverses a known string" <| 23 | \_ -> 24 | "ABCDEFG" 25 | |> String.reverse 26 | |> Expect.equal "GFEDCBA" 27 | 28 | -- fuzz runs the test 100 times with randomly-generated inputs! 29 | , fuzz string "restores the original string if you run it again" <| 30 | \randomlyGeneratedString -> 31 | randomlyGeneratedString 32 | |> String.reverse 33 | |> String.reverse 34 | |> Expect.equal randomlyGeneratedString 35 | ] 36 | ] 37 | --------------------------------------------------------------------------------