diff --git a/.gitignore b/.gitignore index 72a305e..0d8b899 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,5 @@ config/livenet/password coverage dist node_modules +elm-stuff +dist \ No newline at end of file diff --git a/app/elm/Main.elm b/app/elm/Main.elm new file mode 100644 index 0000000..57f7cea --- /dev/null +++ b/app/elm/Main.elm @@ -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 + ] + ] diff --git a/app/index.html b/app/index.html index 8068e7c..fae3100 100644 --- a/app/index.html +++ b/app/index.html @@ -2,10 +2,9 @@ Embark - -

Welcome to Embark!

-

See the Embark's documentation to see what you can do with Embark!

+
+ diff --git a/app/js/index.js b/app/js/index.js index 5b0f64d..e673a0f 100644 --- a/app/js/index.js +++ b/app/js/index.js @@ -4,3 +4,11 @@ import EmbarkJS from 'Embark/EmbarkJS'; // e.g if you have a contract named 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 || ''); +}); \ No newline at end of file diff --git a/elm.json b/elm.json new file mode 100644 index 0000000..01a3480 --- /dev/null +++ b/elm.json @@ -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": {} + } +} \ No newline at end of file diff --git a/package.json b/package.json index 61c0954..4c61c1a 100644 --- a/package.json +++ b/package.json @@ -8,5 +8,9 @@ "author": "", "license": "ISC", "homepage": "", + "dependencies": { + "elm": "^0.19.0-bugfix2", + "elm-webpack-loader": "^5.0.0" + }, "devDependencies": {} } diff --git a/webpack.config.js b/webpack.config.js index d60591d..845ac86 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -34,6 +34,7 @@ const embarkJson = require(path.join(dappPath, 'embark.json')); const embarkPipeline = require(path.join(dappPath, '.embark/embark-pipeline.json')); 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 // embark.json and changed/removed later, otherwise pkg resolution may behave @@ -86,6 +87,7 @@ const base = { context: dappPath, entry: entry, module: { + noParse: /\.elm$/, rules: [ { test: /\.scss$/, @@ -157,6 +159,14 @@ const base = { ] ].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'); } +// Elm +// ----------------------------------------------------------------------------- +base.resolve.extensions = [ + // webpack defaults + // see: https://webpack.js.org/configuration/resolve/#resolve-extensions + '.wasm', '.mjs', '.js', '.json', + // elm extension + '.elm' +]; + // development config // ----------------------------------------------------------------------------- @@ -249,6 +269,10 @@ devBabelLoader.options.compact = false; const devPresetReact = devBabelLoader.options.presets[1]; const devPresetReactOptions = devPresetReact[1]; devPresetReactOptions.development = true; +// enable debug mode for Elm +const devElmLoader = development.module.rules[4]; +devElmLoader.options.debug = true; + // production config // -----------------------------------------------------------------------------