Firefox empties documentFragment on clone

Question

I've found this strange scenario where Firefox seems to loose the content of a documentFragment after cloning it (with the deep flag set to true). Is this a Firefox bug, or am I missing an implementation detail?

var n = ( function nScope(){
 'use strict';

 function isDom( x ){
  return x.nodeType > 0;
 }

 function notDom( x ){
  return !isDom( x );
 }

 return function n(){
  // Avoids conditional logic later by forcing a standard output.
  var args   = [].map.call( arguments, function wrapDom( x ){
   return isDom( x ) ? [ x ] : x;
  } );
  var dom    = [];
  var vdom   = [];
  // Render virtual DOM, then parse output.
  var view   = m.apply( void 0, args );
  var cfg    = view.attrs.config;

  if( view.children.forEach ){
   view.children.forEach( function divideChildren( x ){
    ( isDom( x ) ? dom : vdom ).push( x );
   } );
  }

  if( dom.length === 0 ){
   return view; 
  }

  view.attrs.config = function appendDom( el, init, context ){
   // Only perform DOM insertion logic at config time:
   // Saves unnecessary execution during strategy none redraws.
            if( !init ){
                dom.forEach( function appendNode( node, index ){
                    // If a virtual DOM element occurs after the real node in the children list, grab it and find its
                    // index in the list of virtual elements as a reference point for inserting the real node.
                    var insertAt = vdom.indexOf( view.children.slice( view.children.indexOf( node ) ).filter( notDom )[ 0 ] );
                    // When a documentFragment is inserted into the document, the reference becomes empty.
                    // Therefore we need to insert clones of the original reference.
                    // Because this happens on every redraw, this means DOM nodes cannot be modified by prior reference
                    // between redraw cycles :(
                    console.log( 'Original node:', node );

                    var clone   = node.cloneNode( true );

                    console.log( 'Cloned node:', clone );

                    
                    if( insertAt ){
                        el.insertBefore( clone, el.childNodes[ insertAt ] );
                    }
                    else {
                        el.appendChild( clone );
                    }
                } );
            }

   if( cfg ){
    return cfg( el, init, context );
   }
  };

  // Make sure only the virtual elements are parsed by m.render.
  view.children = vdom;

  return view;
 };
}() );

// To stop jsfiddle breaking
m.route.mode = 'hash';

var links = document.createDocumentFragment();
var array = [ 1, 2 ];

array.forEach( function appendLink( index ){
    var a  = document.createElement( 'a' );
    
    a.innerText = 'Page ' + index;
    a.href      = '/route' + index;
    
    m.route( a );
    
    links.appendChild( a );
    links.appendChild( document.createTextNode( ' ' ) );
} );

var modules = array.map( function makeModule( index ){
    return {
        controller : function(){},
        view       : function(){
            return n(
                '.module',
                [
                    n( 'h1', {
                        onclick : function(){
                            alert( 'Redraw incoming...' );
                        }
                    }, 'Page ' + index ),
                    links 
                ]
            );
        }
    };
} );

m.route( document.body, '/route1', {
    '/route1' : modules[ 0 ],
    '/route2' : modules[ 1 ]
} );

<script src="https://rawgit.com/lhorie/mithril.js/master/mithril.js"></script>

Answer 1

You're using innerText, which is not supported by Firefox: 'innerText' works in IE, but not in Firefox

You could use textContent or innerHTML instead

array.forEach( function appendLink( index ){
    var a  = document.createElement( 'a' );

    a.textContent = 'Page ' + index; // <-- here
    a.href      = '/route' + index;

    m.route( a );

    links.appendChild( a );
    links.appendChild( document.createTextNode( ' ' ) );
} );