Mock important window/browser objects

[jeffwhelpley]

Although we are encouraging users to not directly use the window DOM objects, we can't stop anyone from using them. We just need mocks for all window objects so that when an Angular 2 app runs on the server, in a web worker, on a mobile device, etc. the app doesn't break.

JSDOM is way to heavyweight and we are not talking about actually implementing functionality. We just want to see if we can add mocks so that window object code doesn't break the app.

[PatrickJS]

I'm assigning it to @manekinekko to do some research. Basiclly the goal is to provide developers with better errors when they use a module that doesn't follow best pratices for universal support.
for example,

var document = {
  get querySelector() {
    console.warn('Do not use document.querySelector');
    return DOM.querySelector(DOM.defaultDoc(), ...args)
  }
};
var global = {
  get document() {
    console.warn('Do not use document');
    return document;
  }
  get window() {
    console.warn('Do not use window');
  }
  get title() {
    console.warn('Do not use title');
  }
  get XMLHttpRequest() {
    console.warn('Do not use XMLHttpRequest');
  }
}

[PatrickJS]

let's just focus on the important globals that developers usually use XMLHttpRequest, document, window, title, document.cookie, btoa, atob, fetch, JSON

[manekinekko]

What about this exhaustive list?
I am not really sure if we should mock all props in this list or consider only some of them. In the case, which ones should we keep? what happen if the developer calls a prop we aren't mocking?

var unforgeableAttributes = [
  "window",
  "document",
  "location",
  "top"
];

var replaceableAttributes = [
  "self",
  "scrollbars",
  "statusbar",
  "toolbar",
  "frames",
  "parent",
  "external",
  "length",

  // CSSOM-View
  "screen",
  "scrollX",
  "scrollY",
  "pageXOffset",
  "pageYOffset",
  "innerWidth",
  "innerHeight",
  "screenX",
  "screenY",
  "outerWidth",
  "outerHeight",
  "devicePixelRatio",
];

var methods = [
  "close",
  "stop",
  "focus",
  "blur",
  "open",
  "alert",
  "confirm",
  "prompt",
  "print",
  "postMessage",

  // WindowBase64
  "btoa",
  "atob",

  // WindowTimers
  "setTimeout",
  "clearTimeout",
  "setInterval",
  "clearInterval",

  // HTML Editing APIs
  "getSelection",

  // CSSOM
  "getComputedStyle",

  // CSSOM-View
  "matchMedia",
  "scroll",
  "scrollTo",
  "scrollBy"
];

var readonlyAttributes = [
  "history",
  "frameElement",
  "navigator",
  "applicationCache",

  // WindowSessionStorage
  "sessionStorage",

  // WindowLocalStorage
  "localStorage",
];

var writableAttributes = [
  "name",
  "status",
  "opener",
  "onabort",
  "onafterprint",
  "onbeforeprint",
  "onbeforeunload",
  "onblur",
  "oncancel",
  "oncanplay",
  "oncanplaythrough",
  "onchange",
  "onclick",
  "onclose",
  "oncontextmenu",
  "oncuechange",
  "ondblclick",
  "ondrag",
  "ondragend",
  "ondragenter",
  "ondragleave",
  "ondragover",
  "ondragstart",
  "ondrop",
  "ondurationchange",
  "onemptied",
  "onended",
  "onerror",
  "onfocus",
  "onhashchange",
  "oninput",
  "oninvalid",
  "onkeydown",
  "onkeypress",
  "onkeyup",
  "onload",
  "onloadeddata",
  "onloadedmetadata",
  "onloadstart",
  "onmessage",
  "onmousedown",
  "onmousemove",
  "onmouseout",
  "onmouseover",
  "onmouseup",
  "onmousewheel",
  "onoffline",
  "ononline",
  "onpause",
  "onplay",
  "onplaying",
  "onpagehide",
  "onpageshow",
  "onpopstate",
  "onprogress",
  "onratechange",
  "onreset",
  "onresize",
  "onscroll",
  "onseeked",
  "onseeking",
  "onselect",
  "onshow",
  "onstalled",
  "onstorage",
  "onsubmit",
  "onsuspend",
  "ontimeupdate",
  "onunload",
  "onvolumechange",
  "onwaiting"
];

var document = [
  "Document.all",
  "Document.async",
  "Document.characterSet",
  "Document.charset",
  "Document.compatMode",
  "Document.contentType",
  "Document.doctype",
  "Document.documentElement",
  "Document.documentURI",
  "Document.domConfig",
  "Document.hidden",
  "Document.implementation",
  "Document.inputEncoding",
  "Document.lastStyleSheetSet",
  "Document.mozSyntheticDocument",
  "Document.mozFullScreen",
  "Document.mozFullScreenElement",
  "Document.mozFullScreenEnabled",
  "Document.pointerLockElement",
  "Document.preferredStyleSheetSet",
  "Document.scrollingElement",
  "Document.selectedStyleSheetSet",
  "Document.styleSheets",
  "Document.styleSheetSets",
  "Document.timeline",
  "Document.undoManager",
  "Document.URL",
  "Document.visibilityState",
  "Document.xmlEncoding",
  "Document.xmlStandalone",
  "Document.xmlVersion",
  "ParentNode.children",
  "ParentNode.firstElementChild",
  "ParentNode.lastElementChild",
  "ParentNode.childElementCount",
  "Document.activeElement",
  "Document.alinkColor",
  "Document.anchors",
  "Document.applets",
  "Document.bgColor",
  "Document.body",
  "Document.cookie",
  "Document.defaultView",
  "Document.designMode",
  "Document.dir",
  "Document.domain",
  "Document.embeds",
  "document.fgColor",
  "Document.forms",
  "Document.head",
  "Document.height",
  "Document.images",
  "Document.lastModified",
  "Document.linkColor",
  "Document.links",
  "Document.location",
  "Document.plugins",
  "Document.readyState",
  "Document.referrer",
  "Document.scripts",
  "Document.title",
  "Document.URL",
  "Document.vlinkColor",
  "Document.width",
  "GlobalEventHandlers.onabort",
  "Document.onafterscriptexecute",
  "Document.onbeforescriptexecute",
  "GlobalEventHandlers.onblur",
  "GlobalEventHandlers.oncancel",
  "GlobalEventHandlers.oncanplay",
  "GlobalEventHandlers.oncanplaythrough",
  "GlobalEventHandlers.onchange",
  "GlobalEventHandlers.onclick",
  "GlobalEventHandlers.onclose",
  "GlobalEventHandlers.oncontextmenu",
  "Document.oncopy",
  "GlobalEventHandlers.oncuechange",
  "Document.oncut",
  "GlobalEventHandlers.ondblclick",
  "GlobalEventHandlers.ondrag",
  "GlobalEventHandlers.ondragend",
  "GlobalEventHandlers.ondragenter",
  "GlobalEventHandlers.ondragexit",
  "GlobalEventHandlers.ondragleave",
  "GlobalEventHandlers.ondragover",
  "GlobalEventHandlers.ondragstart",
  "GlobalEventHandlers.ondrop",
  "GlobalEventHandlers.ondurationchange",
  "GlobalEventHandlers.onemptied",
  "GlobalEventHandlers.onended",
  "GlobalEventHandlers.onerror",
  "GlobalEventHandlers.onfocus",
  "GlobalEventHandlers.oninput",
  "GlobalEventHandlers.oninvalid",
  "GlobalEventHandlers.onkeydown",
  "GlobalEventHandlers.onkeypress",
  "GlobalEventHandlers.onkeyup",
  "GlobalEventHandlers.onload",
  "GlobalEventHandlers.onloadeddata",
  "GlobalEventHandlers.onloadedmetadata",
  "GlobalEventHandlers.onloadstart",
  "GlobalEventHandlers.onmousedown",
  "GlobalEventHandlers.onmouseenter",
  "GlobalEventHandlers.onmouseleave",
  "GlobalEventHandlers.onmousemove",
  "GlobalEventHandlers.onmouseout",
  "GlobalEventHandlers.onmouseover",
  "GlobalEventHandlers.onmouseup",
  "GlobalEventHandlers.onmousewheel",
  "GlobalEventHandler.onmozfullscreenchange",
  "GlobalEventHandler.onmozfullscreenerror",
  "GlobalEventHandlers.onpause",
  "Document.onpaste",
  "GlobalEventHandlers.onplay",
  "GlobalEventHandlers.onplaying",
  "GlobalEventHandlers.onpointerdown",
  "Document.onpointerlockchange",
  "Document.onpointerlockerror",
  "GlobalEventHandlers.onpointermove",
  "GlobalEventHandlers.onpointerup",
  "GlobalEventHandlers.onpointercancel",
  "GlobalEventHandlers.onpointerover",
  "GlobalEventHandlers.onpointerout",
  "GlobalEventHandlers.onpointerenter",
  "GlobalEventHandlers.onpointerleave",
  "GlobalEventHandlers.onpointerlockchange",
  "GlobalEventHandlers.onpointerlockerror",
  "GlobalEventHandlers.onprogress",
  "GlobalEventHandlers.onratechange",
  "Document.onreadystatechange",
  "GlobalEventHandlers.onreset",
  "GlobalEventHandlers.onscroll",
  "GlobalEventHandlers.onseeked",
  "GlobalEventHandlers.onseeking",
  "GlobalEventHandlers.onselect",
  "GlobalEventHandlers.onselectstart",
  "Document.onselectionchange",
  "GlobalEventHandlers.onshow",
  "GlobalEventHandlers.onsort",
  "GlobalEventHandlers.onstalled",
  "GlobalEventHandlers.onsubmit",
  "GlobalEventHandlers.onsuspend",
  "GlobalEventHandlers.ontimeupdate",
  "GlobalEventHandlers.onvolumechange",
  "GlobalEventHandlers.onwaiting",
  "Document.onwheel",
  "Document.adoptNode()",
  "Document.captureEvents()",
  "Document.caretPositionFromPoint()",
  "Document.caretRangeFromPoint()",
  "Document.createAttribute()",
  "Document.createAttributeNS()",
  "Document.createCDATASection()",
  "Document.createComment()",
  "Document.createDocumentFragment()",
  "Document.createElement()",
  "Document.createElementNS()",
  "Document.createEntityReference()",
  "Document.createEvent()",
  "Document.createNodeIterator()",
  "Document.createProcessingInstruction()",
  "Document.createRange()",
  "Document.createTextNode()",
  "Document.createTouch()",
  "Document.createTouchList()",
  "Document.createTreeWalker()",
  "Document.elementFromPoint()",
  "Document.elementsFromPoint()",
  "Document.enableStyleSheetsForSet()",
  "Document.exitPointerLock()",
  "Document.getElementsByClassName()",
  "Document.getElementsByTagName()",
  "Document.getElementsByTagNameNS()",
  "Document.importNode()",
  "Document.normalizeDocument()",
  "Document.registerElement()",
  "Document.releaseCapture()",
  "Document.releaseEvents()",
  "Document.routeEvent()",
  "Document.mozSetImageElement()",
  "document.getElementById(String id)",
  "document.querySelector(String selector)",
  "document.querySelectorAll(String selector)",
  "document.createExpression(String expression, XPathNSResolver resolver)",
  "document.createNSResolver(Node resolver)",
  "document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)",
  "document.clear()",
  "document.close()",
  "document.execCommand(String command[, Boolean showUI[, String value]])",
  "document.getElementsByName(String name)",
  "document.getSelection()",
  "document.hasFocus()",
  "document.open()",
  "document.queryCommandEnabled(String command)",
  "document.queryCommandIndeterm(String command)",
  "document.queryCommandState(String command)",
  "document.queryCommandSupported(String command)",
  "document.queryCommandValue(String command)",
  "document.write(String text)",
  "document.writeln(String text)",
  "document.currentScript",
  "document.documentURIObject",
  "document.popupNode",
  "document.tooltipNode",
  "document.execCommandShowHelp",
  "document.getBoxObjectFor",
  "document.loadOverlay",
  "document.queryCommandText",
  "document.fileSize",
  "document.contains"
];

[manekinekko]

@gdi2290 here is a gist with a complete code sample: https://gist.github.com/manekinekko/9d784b4c3b0f3283d70f

[PatrickJS]

awesome work

[jeffwhelpley]

Dude, this is way better than the solution I was thinking about originally. Awesome job, @manekinekko!

[manekinekko]

thanks guys ;)

[PatrickJS]

@manekinekko can you make a PR

[manekinekko]

@gdi2290 where should the new file live?
may be here: ./modules/universal/src/node/mock-window.ts ?