implemented elm template

This commit is contained in:
Evgeniy Filatov 2018-11-07 18:25:33 +02:00
parent 6c7f5fa8d2
commit bdf4d0ca2e
7 changed files with 131 additions and 3 deletions

2
.gitignore vendored
View File

@ -5,3 +5,5 @@ config/livenet/password
coverage coverage
dist dist
node_modules node_modules
elm-stuff
dist

70
app/elm/Main.elm Normal file
View File

@ -0,0 +1,70 @@
port module Main exposing (main)
import Browser exposing (sandbox)
import String exposing (isEmpty)
import Html exposing (..)
import Html.Attributes exposing (..)
-- APP
main : Program () Model Msg
main =
Browser.element
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
-- PORTS
port embarkReady : (String -> msg) -> Sub msg
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
embarkReady EmbarkReady
-- MODEL
type alias Model =
{ embarkStatus: String }
init : () -> (Model, Cmd Msg)
init _ =
( { embarkStatus = "Loading..." }, Cmd.none )
-- UPDATE
type Msg =
EmbarkReady String
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
EmbarkReady error ->
( { model | embarkStatus = if String.isEmpty error then "Ready." else error }
, Cmd.none
)
-- VIEW
view : Model -> Html Msg
view model =
div []
[ h3 [] [ text "Welcome to Embark!" ]
, p []
[ text "See the "
, a
[ target "_blank"
, href "http://embark.readthedocs.io/en/latest/index.html"
]
[ text "Embark's documentation" ]
, text " to see what you can do with Embark!"
]
, p []
[ text "Embark status: "
, text model.embarkStatus
]
]

View File

@ -2,10 +2,9 @@
<head> <head>
<title>Embark</title> <title>Embark</title>
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="js/app.js"></script>
</head> </head>
<body> <body>
<h3>Welcome to Embark!</h3> <div id="main"></div>
<p>See the <a href="http://embark.readthedocs.io/en/latest/index.html" target="_blank">Embark's documentation</a> to see what you can do with Embark!</p> <script src="js/app.js"></script>
</body> </body>
</html> </html>

View File

@ -4,3 +4,11 @@ import EmbarkJS from 'Embark/EmbarkJS';
// e.g if you have a contract named SimpleStorage: // e.g if you have a contract named SimpleStorage:
//import SimpleStorage from 'Embark/contracts/SimpleStorage'; //import SimpleStorage from 'Embark/contracts/SimpleStorage';
// inject bundled Elm app into div#main
import {Elm} from '../elm/Main';
const app = Elm.Main.init({node: document.getElementById('main')});
EmbarkJS.onReady(error => {
app.ports.embarkReady.send(error || '');
});

21
elm.json Normal file
View File

@ -0,0 +1,21 @@
{
"type": "application",
"elm-version": "0.19.0",
"dependencies": {
"direct": {
"elm/browser": "1.0.0",
"elm/core": "1.0.0",
"elm/html": "1.0.0"
},
"indirect": {
"elm/json": "1.0.0",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm/virtual-dom": "1.0.2"
}
},
"test-dependencies": {
"direct": {},
"indirect": {}
}
}

View File

@ -8,5 +8,9 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"homepage": "", "homepage": "",
"dependencies": {
"elm": "^0.19.0-bugfix2",
"elm-webpack-loader": "^5.0.0"
},
"devDependencies": {} "devDependencies": {}
} }

View File

@ -34,6 +34,7 @@ const embarkJson = require(path.join(dappPath, 'embark.json'));
const embarkPipeline = require(path.join(dappPath, '.embark/embark-pipeline.json')); const embarkPipeline = require(path.join(dappPath, '.embark/embark-pipeline.json'));
const buildDir = path.join(dappPath, embarkJson.buildDir); const buildDir = path.join(dappPath, embarkJson.buildDir);
const pathToElm = path.resolve(path.join(dappNodeModules, '.bin', 'elm'));
// it's important to `embark reset` if a pkg version is specified in // it's important to `embark reset` if a pkg version is specified in
// embark.json and changed/removed later, otherwise pkg resolution may behave // embark.json and changed/removed later, otherwise pkg resolution may behave
@ -86,6 +87,7 @@ const base = {
context: dappPath, context: dappPath,
entry: entry, entry: entry,
module: { module: {
noParse: /\.elm$/,
rules: [ rules: [
{ {
test: /\.scss$/, test: /\.scss$/,
@ -157,6 +159,14 @@ const base = {
] ]
].map(resolve) ].map(resolve)
} }
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack-loader',
options: {
pathToElm: pathToElm
}
} }
] ]
}, },
@ -233,6 +243,16 @@ if (isFlowEnabled && isTypeScriptEnabled) {
throw new Error('isFlowEnabled and isTypeScriptEnabled cannot both be true'); throw new Error('isFlowEnabled and isTypeScriptEnabled cannot both be true');
} }
// Elm
// -----------------------------------------------------------------------------
base.resolve.extensions = [
// webpack defaults
// see: https://webpack.js.org/configuration/resolve/#resolve-extensions
'.wasm', '.mjs', '.js', '.json',
// elm extension
'.elm'
];
// development config // development config
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@ -249,6 +269,10 @@ devBabelLoader.options.compact = false;
const devPresetReact = devBabelLoader.options.presets[1]; const devPresetReact = devBabelLoader.options.presets[1];
const devPresetReactOptions = devPresetReact[1]; const devPresetReactOptions = devPresetReact[1];
devPresetReactOptions.development = true; devPresetReactOptions.development = true;
// enable debug mode for Elm
const devElmLoader = development.module.rules[4];
devElmLoader.options.debug = true;
// production config // production config
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------