Core: Elm.<Module>.embed not replacing div

Created on 13 May 2016 · 10Comments · Source: elm/core

Given

Main.elm:

module Main exposing (..)

import Html exposing (div, text)


main =
  div [] [ text "OHAI" ]

index.html

<DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Welcome to Backpack!</title>
  </head>
  <body>
    <div id="main">Loading...</div>
    <script src="/app.js"></script>
  </body>
</html>

index.js

'use strict';

require('./index.html');

var Elm = require('./Main.elm');
var mountNode = document.getElementById('main');

// The third value on embed are the initial values for incomming ports into Elm

var app = Elm.Main.embed(mountNode);

I would expect that the <div id=main> be _replaced_, but the resulting HTML is

    <div id="main">Loading...
      <div>OHAI</div>
   </div>

In other words, I can still see "Loading ..." when it should have been replaced.

request

Source

benjamintanweihao

👍3

Most helpful comment

Replacing the contents of the element would make it easier to have a no-javascript fallback:

<div id="fancy-elm-input">
   <input class="fallback" type="text" .../>
</div>

It's always possible to remove the contents with JS but the default should indeed be to replace (and add an option to embed to just append)

maxf on 17 Aug 2016

👍7

All 10 comments

https://github.com/elm-lang/virtual-dom/blob/master/src/Native/VirtualDom.js#L246

parent.appendChild(domNode);

Right now it appends instead of replacing the contents of the div.

sudhirvkumar on 13 May 2016

Awesome find Sudhir! Seems like a regression to me though.

On Fri, May 13, 2016 at 7:06 AM, Sudhir Kumar [email protected]
wrote:

https://github.com/elm-lang/virtual-dom/blob/master/src/Native/VirtualDom.js#L246

parent.appendChild(domNode);

Right now it appends instead of replacing the contents of the div.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
https://github.com/elm-lang/core/issues/600#issuecomment-218910783

benjamintanweihao on 13 May 2016

parent.innerHTML = "";
parent.appendChild(domNode);

would solve I guess.

Will have to wait and watch when @evancz handles it or may be not.

Also why do you need "Loading..." in HTML? can't you do it in Elm? I guess you are loading data in Elm and that takes time?

sudhirvkumar on 13 May 2016

I am following @sporto 's tutorial, that's why :).

On Fri, May 13, 2016 at 7:47 AM, Sudhir Kumar [email protected]
wrote:

parent.innerHTML = "";
parent.appendChild(domNode);

would solve I guess.

Will have to wait and watch when @evancz https://github.com/evancz
handles it or may be not.

Also why do you need "Loading..." in HTML? can't you do it in Elm? I guess
you are loading data in Elm and that takes time?

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
https://github.com/elm-lang/core/issues/600#issuecomment-218917288

benjamintanweihao on 14 May 2016

@benjamintanweihao the tutorial is for 0.16, I don't know if it is going to be very helpful with 0.17. Some stuff will just not work e.g. router.

sporto on 14 May 2016

Replacing the contents of the element would make it easier to have a no-javascript fallback:

<div id="fancy-elm-input">
   <input class="fallback" type="text" .../>
</div>

It's always possible to remove the contents with JS but the default should indeed be to replace (and add an option to embed to just append)

maxf on 17 Aug 2016

👍7

It would be nice if the contents of the div were replaced. I know server rendering is coming but still — for elm embeds that are only part of a larger app — this type of thing is needed to avoid FoUC.

jnmandal on 26 Nov 2017

With a little juggling, this can already be achieved like so: https://ellie-app.com/9rfjxgqKca1/0

The gist is rendering into a documentfragment and replacing the original content only after the Elm app has actually rendered, which can be detected with a port + requestAnimationFrame.

zwilias on 26 Nov 2017

👍1

Thanks @zwilias for example using ports 🙏🏻. I opted to use non-JS to handle w/ SASS/SCSS by using the :empty pseudo selector like:

#embed-target {
  opacity: 1;
  transition: opacity .5s linear;
  &:empty {
    @extend .selector-class-for-div-to-mock;
    opacity: .5;
    &::before {
      content: "Initializing";
    }
  }

This way I get a little ease in animation too.

jnmandal on 26 Nov 2017

Replaces contents with 0.19