Elm.<Module>.embed not replacing div #600

benjamintanweihao · May 12, 2016

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.

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 · May 12, 2016

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.

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

On Fri, May 13, 2016 at 7:06 AM, Sudhir Kumar notifications@github.com
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 · May 12, 2016

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

On Fri, May 13, 2016 at 7:06 AM, Sudhir Kumar notifications@github.com
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

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 · May 12, 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?

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

On Fri, May 13, 2016 at 7:47 AM, Sudhir Kumar notifications@github.com
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 · May 13, 2016

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

On Fri, May 13, 2016 at 7:47 AM, Sudhir Kumar notifications@github.com
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 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 · May 14, 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.

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 · Aug 17, 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)

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 · Nov 26, 2017

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.

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 · Nov 26, 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.

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 · Nov 26, 2017

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.

evancz added the request label Mar 7, 2018

elm/core

Elm.<Module>.embed not replacing div #600

benjamintanweihao commented May 12, 2016 •

edited

Edited 1 time

benjamintanweihao edited May 12, 2016 (most recent)

This comment has been minimized.

sudhirvkumar commented May 12, 2016

This comment has been minimized.

benjamintanweihao commented May 12, 2016

This comment has been minimized.

sudhirvkumar commented May 12, 2016

This comment has been minimized.

benjamintanweihao commented May 13, 2016

This comment has been minimized.

sporto commented May 14, 2016

This comment has been minimized.

maxf commented Aug 17, 2016

This comment has been minimized.

jnmandal commented Nov 26, 2017

This comment has been minimized.

zwilias commented Nov 26, 2017

This comment has been minimized.

jnmandal commented Nov 26, 2017 •

edited

Edited 1 time

jnmandal edited Nov 26, 2017 (most recent)

evancz added the request label Mar 7, 2018

elm/core

Join GitHub today

Elm.<Module>.embed not replacing div #600

Comments

benjamintanweihao commented May 12, 2016 • edited Edited 1 time benjamintanweihao edited May 12, 2016 (most recent)

This comment has been minimized.

sudhirvkumar commented May 12, 2016

This comment has been minimized.

benjamintanweihao commented May 12, 2016

This comment has been minimized.

sudhirvkumar commented May 12, 2016

This comment has been minimized.

benjamintanweihao commented May 13, 2016

This comment has been minimized.

sporto commented May 14, 2016

This comment has been minimized.

maxf commented Aug 17, 2016

This comment has been minimized.

jnmandal commented Nov 26, 2017

This comment has been minimized.

zwilias commented Nov 26, 2017

This comment has been minimized.

jnmandal commented Nov 26, 2017 • edited Edited 1 time jnmandal edited Nov 26, 2017 (most recent)

evancz added the request label Mar 7, 2018

benjamintanweihao commented May 12, 2016 •

edited

Edited 1 time

benjamintanweihao edited May 12, 2016 (most recent)

jnmandal commented Nov 26, 2017 •

edited

Edited 1 time

jnmandal edited Nov 26, 2017 (most recent)