Bootstrap show/hide operations do nothing in Phoenix app

Phoenix Forum Questions / Help
21

So first in my ./web/elm/ directory I made a file of ./web/elm/ExampleElmApp.elm, and in that file I have:

module ExampleElmApp exposing (..)

import Html

main : Html.Html msg
main = Html.text "Consider this text a promise of future beauty"

Then in my ./brunch-config.js file I added the new root App by altering the elmBrunch part of the plugins section like:

  // Configure your plugins
  plugins: {
    // snip other plugins that I have
    elmBrunch: { // I included my entire elmBrunch section with two Apps instead of my larger amount for brevity
      elmFolder: '.',
      mainModules: [
        'web/elm/MessengerApp.elm',
        'web/elm/ExampleElmApp.elm' // I added this line to add the new App, with a comma on the previous line of course
      ],
      // If these next two are specified, all mainModules will be compiled to a single file (optional and merged with outputFolder)
      outputFolder: 'web/static/js',
      outputFile: 'elm.js',
      makeParameters: ['--warn']
    }
  },

And upon saving this my server printed:

Elm compile: web/elm/MessengerApp.elm web/elm/ExampleElmApp.elm, in ., to web\static\js\elm.js
29 Jul 15:59:44 - info: compiling
29 Jul 15:59:48 - info: compiled 2 files and 193 cached into app.js in 12.3 sec

It takes so long because I have SO many files now, still blazing fast compared to when I tried webpackā€¦

But now I go to my app.js and add it to my appropriate starting code. I have a section for things that do not require a phoenix active socket (which this one does not), and a section that does (which does not start those Apps until it is active, but that is just because I am too lazy to check if the socket is open before I start using it in Elm). So the relevant bits with the irrelevant omitted of my app.js:


import $ from "jquery"
import Elm from '../elm'

$(document).ready(() => { // Standard jQuery function run when the page finishes loading
  let app = Elm.ExampleElmApp.embed(document.querySelector('#my-elm-example'))
  // I have a lot of Helper libraries that make Elm a *LOT* easier to use that I attach via Elm Ports here with app.
}

And then in, oh letā€™s say my ./web/templates/layout/app.html.eex' file I add this to the` section:

    <div id="my-elm-example"></div>

And then I run it and I see at the top of every single one of my server pages:

Consider this text a promise of future beauty

Aaaand then I run git reset --hard to complete undo my examples changes so I can keep working. ^.^

EDIT: Do note, there is a bit of a race condition between elm compiling and brunch recognizing it so if that happens you will not see elm changes until the next compile, so I am in the habit of saving, waiting until the compiled appears in 10 seconds or so, then saving again. I should probably report this to elm-brunchā€¦

EDIT2: It also really is best to compile all Elm Apps into a single elm.js file so that you do not duplicate the Elm standard library code inside each package and so Brunch/Babel can properly trim out what is not needed.

EDIT3: I use the elm-brunch plugin for brunch for handling it, which you just add to the devDependencies section of your NPM package.json file:

    "elm-brunch": "~0.6.0",
22

Thanks. My difficulty is getting different apps to run on different pages. For example, suppose I want ExampleElmApp to run somewhere in the middle of templates/page/index.html.eex and a SecondExampleElmApp to run somewhere in the middle of templates/old_animal/index.html.eex.

23

I guess I can put everything in web/static/js/app.js, like this:

import Elm from "./elm"

$(document).ready(() => {
    let frontPageForUsPlace = document.querySelector('#FrontPageForUs');
    let frontPageForUsApp;
    if (frontPageForUsPlace) {
        frontPageForUsApp = Elm.FrontPage4Us.embed(frontPageForUsPlace);
    }

    let onePageForUsPlace = document.querySelector('#OnePageForUs');
    let onePageForUsApp;
    if (onePageForUsPlace) {
        onePageForUsApp = Elm.OnePage4Us.embed(onePageForUsPlace);
    }
})

That seems inelegant.

24

I try to keep Elm apps as something like components. There-for I can ā€˜tagā€™ that I want one on a given page in a given place by just putting an appropriately IDā€™d div. However you could setup brunch to run more then one main module so not only your app.js is run but others can be as well, that way you can make more than one final ā€˜app.jsā€™. I prefer the singular file case, that way I can add something to a page I may not have originally considered adding.

I have each of my Elm apps wrapped in another javascript file, they get passed a default ID object and do their own testing if it exists else ignores. That lets me build it up with other things too if I wish.