can-view-callbacks should work with a changing can-globals document.

[frank-dspeed]

works

var makeDocument = require('can-vdom/make-document/make-document');

globals.setKeyValue('document',makeDocument());
globals.setKeyValue('MutationObserver', null);
var renderTagsInDocument = function(tagName) {
  var nodes = makeDocument().getElementsByTagName(tagName);

  for (var i=0, node; (node = nodes[i]) !== undefined; i++) {
    renderNodeAndChildren(node);
  }
};

should work

var makeDocument = require('can-vdom/make-document/make-document');

globals.setKeyValue('document',makeDocument());
globals.setKeyValue('MutationObserver', null);
var renderTagsInDocument = function(tagName) {
  var nodes = getGlobal().document.getElementsByTagName(tagName);

  for (var i=0, node; (node = nodes[i]) !== undefined; i++) {
    renderNodeAndChildren(node);
  }
};

the getGlobal Function don't returns the befor registered document inside globals

[justinbmeyer]

Ok, so what I think you are saying is that when a component gets defined and registered with can-view-callbacks, renderTagsInDocument get called and there is no document.

I think we should detect this and skip auto-mounting.

We probably need to setup a listener for when the document changes and then try to auto-mount again.

cc @matthewp would this idea cause an problems with done-ssr?

[justinbmeyer]

As a workaround, you should be able to require() can-globals before any components are defined and setup global.document.

[frank-dspeed]

@justinbmeyer

index.mjs

import { Component, route } from './core.mjs';

/* 
    Styling:
    <style>@import url(/style.css);</style>
    <link href="yourcss2.css" rel="stylesheet" type="text/css">
*/
export default Component.extend({
  tag: 'my-app',
  view: `<h1>CanApp Demo-</h1>
        {{#if pageComponentPromise.isPending}}
            Loading ...
        {{/if}}
        {{#if pageComponentPromise.isResolved}}
            {{pageComponentPromise.value}}
            {{# eq(routeData.page, "hello-world")}}
                <a href="{{routeUrl(page='goodbye-moon')}}">Goodbye</a>
            {{ else }}
                <a href="{{routeUrl(page='hello-world')}}">Hello</a>
            {{/ eq}}
        {{/if}}`,
  ViewModel: {
    routeData: {
      default() {
        /*
        route.register('{page}',{page: 'hello-world'});
        route.data = new DefineMap();
        route.start();
        */
        //return route.data;
        return { page: 'hello-world' };
      }
    },
    get pageComponentPromise(){
      let name = this.routeData.page;
      
      //return import('./'+name+'.js')
      return import('./components/'+name)
        .then(module => new module.default())
        .then(element=>element);
    }
  }
});

test.mjs

import myApp from './index';

const i = new myApp();
console.log(i);

on node 10 current nightly do

node --experimental-modules test.mjs