Consider detecting browser environment just-in-time

[sebamarynissen]

What problem does this feature solve?

When testing Vue components on Node with @vue/test-utils, it is important that you mock a browser environment with jsdom-global before vue is loaded. If you fail to do this, you get a TypeError: Cannot read property 'child' of undefined (see vuejs/vue-test-utils#1192) when trying to mount your component.

The reason is that when Vue is loaded, it checks the environment as

const inBrowser = typeof window !== 'undefined';

It would be useful - at least for the mounting of components - if this check is performed just in time so that the order of loading is not important here.

While one could argue that this is not a problem if you simply get the loading order correct, there is actually a problem when trying to load .vue files natively in Node. I've written an experimental library for this, call vue-esm-loader. The problem I had when trying to get this to work with @vue/test-utils is that there's a cyclic problem: vue-esm-loader needs vue-template-compiler, which in turn loads Vue first to check for a version mismatch. However, as the loader is loaded as the very first file, this means it's impossible to mock the browser environment before vue is loaded the first time.

I was able to bypass this by directly requiring the build of vue-template-compiler which does not provide the version check, but this is not a good solution (see sebamarynissen/vue-esm-loader@252f1df#diff-5dfe38baf287dcf756a17c2dd63483781b53bf4b669e10efdd01e74bcd8e780aR7). Therefore it would be useful if the environment check in Vue is done on the fly.

What does the proposed API look like?

I propose to replace the inBrowser constant by an env object, which can look like

const env = {
  get inBrowser() {
    return typeof window === 'undefined';
  }
};

Subsequently the $mount method can use this as

Vue.prototype.$mount = function (
  el,
  hydrating
) {
  el = el && env.inBrowser ? query(el) : undefined;
  return mountComponent(this, el, hydrating)
};

[sebamarynissen]

I did some additional tests and found out that the inBrowser check in the $mount function was not the problem. It looks like there are two functions that need would need to be updated for the just-in-time check to work:

// This
Vue.prototype.__patch__ = inBrowser ? patch : noop;

// Would need to become
function patch (oldVnode, vnode, hydrating, removeOnly) {
  if (!env.inBrowser) return;
}
Vue.prototype.__patch__ = patch;

// And
function isUnknownElement (tag) {
  if (!inBrowser) {
    return true;
  }
}

// Has to become
function isUnknownElement (tag) {
  if (!env.inBrowser) {
    return true;
  }
}

The key here being the __patch__ function that cannot be set upon loading. I have to admit that I have no idea what the impact would be on SSR.

[sirlancelot]

This is really cool! I'm looking forward to your work on vue-esm-loader. This is just a theory, but I'd think that because vue-template-compiler has a dependency check on vue, you might have luck lazy-loading it during the transformSource() subroutine. Since transformSource() can be async, you can then do one-time loading of your compileTemplate function.

// `lib/loader.js`
let compileTemplate
export async function transformSource(source, ctx, defaultTransformSource) {
  const { url } = ctx
  
  if (templateRegex.test(url) || htmlRegex.test(url)) {
    // Lazy-load the compiler due to compatibility checking with Vue module.
    if (!compileTemplate) compileTemplate = (await import("./compile-template.js")).default

    const source = compileTemplate(source, ctx)
    return { source }
  }

  return defaultTransformSource(source, ctx, defaultTransformSource)
}

And then remove the static import at the top of that file. By doing this, you should be safe by not loading too much ahead of what the code requires.

Edit: It would seem that your module is also importing vue-template-compiler in other areas. I would suggest the same process for those: lazy-load only when the code demands it.

[sebamarynissen]

Yes, I figured this as well some time after opening this issue. I've solved it in a slightly different way, using

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

export function getCompiler() {
  return require('vue-template-compiler');
}

See https://github.com/sebamarynissen/vue-esm-loader/blob/master/lib/utils.js#L32 and https://github.com/sebamarynissen/vue-esm-loader/blob/master/lib/load.js#L27. This does indeed solve my problem so I no longer have to circumvent the version check. It makes this issue slightly less relevant. Of course the user is still responsible for loading jsdom-global before loading any .vue files though.

[sirlancelot]

Of course the user is still responsible for loading jsdom-global before loading any .vue files though.

Yes well, that can easily be done during setup (mocha --require ./test/_setup.js). If you want to keep everything async, I think you can use await import() these days instead of createRequire(). I haven't kept up in that area of Node.js development though...