deconflict more globals

src/compiler/compile/Component.ts

@@ -101,7 +101,7 @@ export default class Component {
 	reactive_declaration_nodes: Set<Node> = new Set();
 	has_reactive_assignments = false;
 	injected_reactive_declaration_vars: Set<string> = new Set();
-	helpers: Set<string> = new Set();
+	helpers: Map<string, string> = new Map();
 
 	indirect_dependencies: Map<string, Set<string>> = new Map();
 
@@ -233,8 +233,9 @@ export default class Component {
 	}
 
 	helper(name: string) {
-		this.helpers.add(name);
-		return this.alias(name);
+		const alias = this.alias(name)
+		this.helpers.set(name, alias);
+		return alias;
 	}
 
 	generate(result: string) {
@@ -251,23 +252,21 @@ export default class Component {
 				.replace(/__svelte:self__/g, this.name)
 				.replace(compile_options.generate === 'ssr' ? /(@+|#+)(\w*(?:-\w*)?)/g : /(@+)(\w*(?:-\w*)?)/g, (_match: string, sigil: string, name: string) => {
 					if (sigil === '@') {
-						if (internal_exports.has(name)) {
-							if (compile_options.dev && internal_exports.has(`${name}Dev`)) name = `${name}Dev`;
-							this.helpers.add(name);
+						if (!internal_exports.has(name)) {
+							throw new Error(`compiler error: this shouldn't happen! generated code is trying to use inexistent internal '${name}'`);
+						}
+
+						if (compile_options.dev && internal_exports.has(`${name}Dev`)) {
+							name = `${name}Dev`;
 						}
 
-						return this.alias(name);
+						return this.helper(name);
 					}
 
 					return sigil.slice(1) + name;
 				});
 
-			const imported_helpers = Array.from(this.helpers)
-				.sort()
-				.map(name => {
-					const alias = this.alias(name);
-					return { name, alias };
-				});
+			const imported_helpers = Array.from(this.helpers, ([name, alias]) => ({ name, alias }));
 
 			const module = create_module(
 				result,

src/compiler/compile/render-dom/Block.ts

@@ -164,7 +164,7 @@ export default class Block {
 
 		if (parent_node) {
 			this.builders.mount.add_line(`@append(${parent_node}, ${name});`);
-			if (parent_node === 'document.head' && !no_detach) this.builders.destroy.add_line(`@detach(${name});`);
+			if (parent_node === '@document.head' && !no_detach) this.builders.destroy.add_line(`@detach(${name});`);
 		} else {
 			this.builders.mount.add_line(`@insert(#target, ${name}, anchor);`);
 			if (!no_detach) this.builders.destroy.add_conditional('detaching', `@detach(${name});`);

src/compiler/compile/render-dom/index.ts

@@ -36,13 +36,15 @@ export default function dom(
 		`${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */` :
 		css.code, { only_escape_at_symbol: true });
 
+	const add_css = component.get_unique_name('add_css');
+
 	if (styles && component.compile_options.css !== false && !options.customElement) {
 		builder.add_block(deindent`
-			function @add_css() {
+			function ${add_css}() {
 				var style = @element("style");
 				style.id = '${component.stylesheet.id}-style';
 				style.textContent = ${styles};
-				@append(document.head, style);
+				@append(@document.head, style);
 			}
 		`);
 	}
@@ -481,7 +483,7 @@ export default function dom(
 
 		if (component.tag != null) {
 			builder.add_block(deindent`
-				customElements.define("${component.tag}", ${name});
+				@customElements.define("${component.tag}", ${name});
 			`);
 		}
 	} else {
@@ -491,7 +493,7 @@ export default function dom(
 			class ${name} extends @${superclass} {
 				constructor(options) {
 					super(${options.dev && `options`});
-					${should_add_css && `if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`}
+					${should_add_css && `if (!@document.getElementById("${component.stylesheet.id}-style")) ${add_css}();`}
 					@init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names});
 
 					${dev_props_check}

src/compiler/compile/render-dom/wrappers/Body.ts

@@ -11,11 +11,11 @@ export default class BodyWrapper extends Wrapper {
 			const snippet = handler.render(block);
 
 			block.builders.init.add_block(deindent`
-				document.body.addEventListener("${handler.name}", ${snippet});
+				@document.body.addEventListener("${handler.name}", ${snippet});
 			`);
 
 			block.builders.destroy.add_block(deindent`
-				document.body.removeEventListener("${handler.name}", ${snippet});
+				@document.body.removeEventListener("${handler.name}", ${snippet});
 			`);
 		});
 	}

src/compiler/compile/render-dom/wrappers/DebugTag.ts

@@ -62,7 +62,7 @@ export default class DebugTagWrapper extends Wrapper {
 			block.builders.update.add_block(deindent`
 				if (${condition}) {
 					const { ${ctx_identifiers} } = ctx;
-					console.${log}({ ${logged_identifiers} });
+					@console.${log}({ ${logged_identifiers} });
 					debugger;
 				}
 			`);
@@ -70,7 +70,7 @@ export default class DebugTagWrapper extends Wrapper {
 			block.builders.create.add_block(deindent`
 				{
 					const { ${ctx_identifiers} } = ctx;
-					console.${log}({ ${logged_identifiers} });
+					@console.${log}({ ${logged_identifiers} });
 					debugger;
 				}
 			`);

src/compiler/compile/render-dom/wrappers/Element/Binding.ts

@@ -136,7 +136,7 @@ export default class BindingWrapper {
 			case 'currentTime':
 			case 'playbackRate':
 			case 'volume':
-				update_conditions.push(`!isNaN(${this.snippet})`);
+				update_conditions.push(`!@isNaN(${this.snippet})`);
 				break;
 
 			case 'paused':

src/compiler/compile/render-dom/wrappers/Element/index.ts

@@ -270,7 +270,7 @@ export default class ElementWrapper extends Wrapper {
 				`@append(${parent_node}, ${node});`
 			);
 
-			if (parent_node === 'document.head') {
+			if (parent_node === '@document.head') {
 				block.builders.destroy.add_line(`@detach(${node});`);
 			}
 		} else {
@@ -379,7 +379,7 @@ export default class ElementWrapper extends Wrapper {
 		}
 
 		if (namespace) {
-			return `document.createElementNS("${namespace}", "${name}")`;
+			return `@document.createElementNS("${namespace}", "${name}")`;
 		}
 
 		return `@element("${name}")`;
@@ -465,7 +465,7 @@ export default class ElementWrapper extends Wrapper {
 				block.builders.init.add_block(deindent`
 					function ${handler}() {
 						${animation_frame && deindent`
-						cancelAnimationFrame(${animation_frame});
+						@cancelAnimationFrame(${animation_frame});
 						if (!${this.var}.paused) ${animation_frame} = @raf(${handler});`}
 						${needs_lock && `${lock} = true;`}
 						ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', ctx' : ''});

src/compiler/compile/render-dom/wrappers/Head.ts

@@ -30,6 +30,6 @@ export default class HeadWrapper extends Wrapper {
 	}
 
 	render(block: Block, _parent_node: string, _parent_nodes: string) {
-		this.fragment.render(block, 'document.head', 'nodes');
+		this.fragment.render(block, '@document.head', 'nodes');
 	}
 }

src/compiler/compile/render-dom/wrappers/IfBlock.ts

@@ -154,7 +154,7 @@ export default class IfBlockWrapper extends Wrapper {
 
 		const vars = { name, anchor, if_name, has_else, has_transitions };
 
-		const detaching = (parent_node && parent_node !== 'document.head') ? '' : 'detaching';
+		const detaching = (parent_node && parent_node !== '@document.head') ? '' : 'detaching';
 
 		if (this.node.else) {
 			if (has_outros) {

src/compiler/compile/render-dom/wrappers/RawMustacheTag.ts

@@ -22,7 +22,7 @@ export default class RawMustacheTagWrapper extends Tag {
 	render(block: Block, parent_node: string, parent_nodes: string) {
 		const name = this.var;
 
-		const in_head = parent_node === 'document.head';
+		const in_head = parent_node === '@document.head';
 		const needs_anchors = !parent_node || in_head;
 
 		// if in head always needs anchors

src/compiler/compile/render-dom/wrappers/Title.ts

@@ -68,9 +68,9 @@ export default class TitleWrapper extends Wrapper {
 			const init = this.node.should_cache ? `${last} = ${value}` : value;
 
 			block.builders.init.add_line(
-				`document.title = ${init};`
+				`@document.title = ${init};`
 			);
-			const updater = `document.title = ${this.node.should_cache ? last : value};`;
+			const updater = `@document.title = ${this.node.should_cache ? last : value};`;
 
 			if (all_dependencies.size) {
 				const dependencies = Array.from(all_dependencies);
@@ -95,7 +95,7 @@ export default class TitleWrapper extends Wrapper {
 				? stringify((this.node.children[0] as Text).data)
 				: '""';
 
-			block.builders.hydrate.add_line(`document.title = ${value};`);
+			block.builders.hydrate.add_line(`@document.title = ${value};`);
 		}
 	}
 }

src/compiler/compile/render-dom/wrappers/Window.ts

@@ -44,8 +44,8 @@ export default class WindowWrapper extends Wrapper {
 		const events = {};
 		const bindings: Record<string, string> = {};
 
-		add_actions(component, block, 'window', this.node.actions);
-		add_event_handlers(block, 'window', this.node.handlers);
+		add_actions(component, block, '@window', this.node.actions);
+		add_event_handlers(block, '@window', this.node.handlers);
 
 		this.node.bindings.forEach(binding => {
 			// in dev mode, throw if read-only values are written to
@@ -92,29 +92,29 @@ export default class WindowWrapper extends Wrapper {
 
 				renderer.meta_bindings.add_block(deindent`
 					if (${condition}) {
-						window.scrollTo(${x || 'window.pageXOffset'}, ${y || 'window.pageYOffset'});
+						@window.scrollTo(${x || 'window.pageXOffset'}, ${y || 'window.pageYOffset'});
 					}
-					${x && `${x} = window.pageXOffset;`}
-					${y && `${y} = window.pageYOffset;`}
+					${x && `${x} = @window.pageXOffset;`}
+					${y && `${y} = @window.pageYOffset;`}
 				`);
 
 				block.event_listeners.push(deindent`
-					@listen(window, "${event}", () => {
+					@listen(@window, "${event}", () => {
 						${scrolling} = true;
-						clearTimeout(${scrolling_timeout});
-						${scrolling_timeout} = setTimeout(${clear_scrolling}, 100);
+						@clearTimeout(${scrolling_timeout});
+						${scrolling_timeout} = @setTimeout(${clear_scrolling}, 100);
 						ctx.${handler_name}();
 					})
 				`);
 			} else {
 				props.forEach(prop => {
 					renderer.meta_bindings.add_line(
-						`this._state.${prop.name} = window.${prop.value};`
+						`this._state.${prop.name} = @window.${prop.value};`
 					);
 				});
 
 				block.event_listeners.push(deindent`
-					@listen(window, "${event}", ctx.${handler_name})
+					@listen(@window, "${event}", ctx.${handler_name})
 				`);
 			}
 
@@ -126,7 +126,7 @@ export default class WindowWrapper extends Wrapper {
 
 			component.partly_hoisted.push(deindent`
 				function ${handler_name}() {
-					${props.map(prop => `${prop.name} = window.${prop.value}; $$invalidate('${prop.name}', ${prop.name});`)}
+					${props.map(prop => `${prop.name} = @window.${prop.value}; $$invalidate('${prop.name}', ${prop.name});`)}
 				}
 			`);
 
@@ -146,13 +146,13 @@ export default class WindowWrapper extends Wrapper {
 					).join(' || ')
 				} && !${scrolling}) {
 					${scrolling} = true;
-					clearTimeout(${scrolling_timeout});
-					window.scrollTo(${
-						bindings.scrollX ? `ctx.${bindings.scrollX}` : `window.pageXOffset`
+					@clearTimeout(${scrolling_timeout});
+					@window.scrollTo(${
+						bindings.scrollX ? `ctx.${bindings.scrollX}` : `@window.pageXOffset`
 					}, ${
-						bindings.scrollY ? `ctx.${bindings.scrollY}` : `window.pageYOffset`
+						bindings.scrollY ? `ctx.${bindings.scrollY}` : `@window.pageYOffset`
 					});
-					${scrolling_timeout} = setTimeout(${clear_scrolling}, 100);
+					${scrolling_timeout} = @setTimeout(${clear_scrolling}, 100);
 				}
 			`);
 		}
@@ -170,7 +170,7 @@ export default class WindowWrapper extends Wrapper {
 
 			component.partly_hoisted.push(deindent`
 				function ${handler_name}() {
-					${name} = navigator.onLine; $$invalidate('${name}', ${name});
+					${name} = @navigator.onLine; $$invalidate('${name}', ${name});
 				}
 			`);
 
@@ -179,8 +179,8 @@ export default class WindowWrapper extends Wrapper {
 			`);
 
 			block.event_listeners.push(
-				`@listen(window, "online", ctx.${handler_name})`,
-				`@listen(window, "offline", ctx.${handler_name})`
+				`@listen(@window, "online", ctx.${handler_name})`,
+				`@listen(@window, "offline", ctx.${handler_name})`
 			);
 
 			component.has_reactive_assignments = true;

src/compiler/compile/render-ssr/handlers/Element.ts

@@ -163,7 +163,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 			node_contents='${(' + snippet + ') || ""}';
 		} else {
 			const snippet = snip(expression);
-			opening_tag += ' ${(v => v ? ("' + name + '" + (v === true ? "" : "=" + JSON.stringify(v))) : "")(' + snippet + ')}';
+			opening_tag += ' ${(v => v ? ("' + name + '" + (v === true ? "" : "=" + @JSON.stringify(v))) : "")(' + snippet + ')}';
 		}
 	});
 

src/runtime/internal/animations.ts

@@ -2,7 +2,7 @@ import { identity as linear, noop, now } from './utils';
 import { loop } from './loop';
 import { create_rule, delete_rule } from './style_manager';
 import { AnimationConfig } from '../animate';
-
+import { getComputedStyle } from './globals';
 
 //todo: documentation says it is DOMRect, but in IE it would be ClientRect
 type PositionRect = DOMRect|ClientRect;

src/runtime/internal/dom.ts

@@ -1,3 +1,5 @@
+import { document, getComputedStyle, navigator } from './globals';
+
 export function append(target: Node, node: Node) {
 	target.appendChild(node);
 }

src/runtime/internal/globals.ts

@@ -1,5 +1,41 @@
-import { is_client } from './utils';
+const {
+	// ecmascript
+	Error,
+	JSON,
+	Map,
+	Object,
+	console,
+	isNaN,
 
-const { console, Error, Map, Object } = (is_client ? window : global) as { console, Error, Map, Object };
+	// dom
+	cancelAnimationFrame,
+	clearTimeout,
+	customElements,
+	document,
+	getComputedStyle,
+	navigator,
+	requestAnimationFrame,
+	setTimeout: export_setTimeout, // TODO: remove when upgrading typescript, bug
+	window: export_window,
+} = (window || global) as unknown as typeof globalThis;
 
-export { console, Error, Map, Object };
+export {
+	// ecmascript
+	Error,
+	JSON,
+	Map,
+	Object,
+	console,
+	isNaN,
+
+	// dom
+	cancelAnimationFrame,
+	clearTimeout,
+	customElements,
+	document,
+	getComputedStyle,
+	navigator,
+	requestAnimationFrame,
+	export_setTimeout as setTimeout,
+	export_window as window,
+};

src/runtime/internal/style_manager.ts

@@ -1,5 +1,6 @@
 import { element } from './dom';
 import { raf } from './utils';
+import { document } from './globals';
 
 let stylesheet;
 let active = 0;

src/runtime/internal/utils.ts

@@ -1,3 +1,5 @@
+import { requestAnimationFrame } from './globals';
+
 export function noop() {}
 
 export const identity = x => x;

test/helpers.js

@@ -28,7 +28,7 @@ export function exists(path) {
 
 export function tryToLoadJson(file) {
 	try {
-		return JSON.parse(fs.readFileSync(file));
+		return JSON.parse(fs.readFileSync(file, 'utf-8'));
 	} catch (err) {
 		if (err.code !== 'ENOENT') throw err;
 		return null;
@@ -44,14 +44,20 @@ export function tryToReadFile(file) {
 	}
 }
 
-export const virtualConsole = new jsdom.VirtualConsole();
-const { window } = new jsdom.JSDOM('<main></main>', {virtualConsole});
+const virtualConsole = new jsdom.VirtualConsole();
+virtualConsole.sendTo(console);
+
+global.window = new jsdom.JSDOM('<main></main>', {virtualConsole}).window;
 global.document = window.document;
-global.getComputedStyle = window.getComputedStyle;
-global.navigator = {userAgent: 'fake'};
+
+// add missing ecmascript globals to window
+for (const key of Object.getOwnPropertyNames(global)) {
+	window[key] = window[key] || global[key];
+}
 
 export function env() {
 	window._svelteTransitionManager = null;
+	window.document.title = '';
 	window.document.body.innerHTML = '<main></main>';
 
 	return window;
@@ -120,7 +126,7 @@ export function normalizeHtml(window, html) {
 			.replace(/<!--.*?-->/g, '')
 			.replace(/>[\s\r\n]+</g, '><')
 			.trim();
-		cleanChildren(node, '');
+		cleanChildren(node);
 		return node.innerHTML.replace(/<\/?noscript\/?>/g, '');
 	} catch (err) {
 		throw new Error(`Failed to normalize HTML:\n${html}`);

test/js/samples/bind-online/expected.js

@@ -4,9 +4,11 @@ import {
 	add_render_callback,
 	init,
 	listen,
+	navigator,
 	noop,
 	run_all,
-	safe_not_equal
+	safe_not_equal,
+	window
 } from "svelte/internal";
 
 function create_fragment(ctx) {

test/js/samples/collapses-text-around-comments/expected.js

@@ -3,6 +3,7 @@ import {
 	SvelteComponent,
 	append,
 	detach,
+	document,
 	element,
 	init,
 	insert,

test/js/samples/css-media-query/expected.js

@@ -3,6 +3,7 @@ import {
 	SvelteComponent,
 	append,
 	detach,
+	document,
 	element,
 	init,
 	insert,

test/js/samples/css-shadow-dom-keyframes/expected.js

@@ -1,6 +1,7 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteElement,
+	customElements,
 	detach,
 	element,
 	init,

test/js/samples/debug-hoisted/expected.js

@@ -2,6 +2,7 @@
 import {
 	Error,
 	SvelteComponentDev,
+	console,
 	init,
 	noop,
 	safe_not_equal

test/js/samples/head-no-whitespace/expected.js

@@ -3,6 +3,7 @@ import {
 	SvelteComponent,
 	append,
 	detach,
+	document,
 	element,
 	init,
 	noop,

test/js/samples/media-bindings/expected.js

@@ -2,10 +2,12 @@
 import {
 	SvelteComponent,
 	add_render_callback,
+	cancelAnimationFrame,
 	detach,
 	element,
 	init,
 	insert,
+	isNaN,
 	listen,
 	noop,
 	raf,

test/js/samples/title/expected.js

@@ -1,6 +1,7 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteComponent,
+	document,
 	init,
 	noop,
 	safe_not_equal

test/js/samples/window-binding-scroll/expected.js

@@ -3,6 +3,7 @@ import {
 	SvelteComponent,
 	add_render_callback,
 	append,
+	clearTimeout,
 	detach,
 	element,
 	init,
@@ -10,8 +11,10 @@ import {
 	listen,
 	noop,
 	safe_not_equal,
+	setTimeout,
 	set_data,
-	text
+	text,
+	window
 } from "svelte/internal";
 
 function create_fragment(ctx) {

test/runtime/index.js

@@ -3,7 +3,7 @@ import * as path from "path";
 import * as fs from "fs";
 import { rollup } from 'rollup';
 import * as virtual from 'rollup-plugin-virtual';
-import { clear_loops, set_now, set_raf } from "../../internal";
+import { clear_loops, flush, set_now, set_raf } from "../../internal";
 
 import {
 	showOutput,
@@ -20,7 +20,6 @@ let compileOptions = null;
 let compile = null;
 
 const sveltePath = process.cwd().split('\\').join('/');
-const internal = `${sveltePath}/internal`;
 
 describe("runtime", () => {
 	before(() => {
@@ -47,8 +46,6 @@ describe("runtime", () => {
 	function runTest(dir, hydrate) {
 		if (dir[0] === ".") return;
 
-		const { flush } = require(internal);
-
 		const config = loadConfig(`./runtime/samples/${dir}/_config.js`);
 
 		if (hydrate && config.skip_if_hydrate) return;
@@ -66,7 +63,6 @@ describe("runtime", () => {
 			compile = (config.preserveIdentifiers ? svelte : svelte$).compile;
 
 			const cwd = path.resolve(`test/runtime/samples/${dir}`);
-			global.document.title = '';
 
 			compileOptions = config.compileOptions || {};
 			compileOptions.sveltePath = sveltePath;
@@ -119,13 +115,10 @@ describe("runtime", () => {
 						throw err;
 					}
 
-					global.window = window;
-
 					if (config.before_test) config.before_test();
 
 					// Put things we need on window for testing
 					window.SvelteComponent = SvelteComponent;
-					window.Error = global.Error;
 
 					const target = window.document.querySelector("main");
 
@@ -222,6 +215,7 @@ describe("runtime", () => {
 					'main.js': js.code
 				}),
 				{
+					name: 'svelte-packages',
 					resolveId: (importee, importer) => {
 						if (importee.startsWith('svelte/')) {
 							return importee.replace('svelte', process.cwd()) + '/index.mjs';

test/runtime/samples/deconflict-globals/_config.js

@@ -0,0 +1,14 @@
+export default {
+	preserveIdentifiers: true,
+	compileOptions: {
+		name: 'window'
+	},
+
+	html: `
+		<p>I hereby declare Svelte the bestest framework.</p>
+		<p>nintendo sixty four</p>
+		<p>Woops.</p>
+		<p>42</p>
+		<p>false</p>
+	`
+};

test/runtime/samples/deconflict-globals/main.svelte

@@ -0,0 +1,20 @@
+<script>
+	const document = 'I hereby declare Svelte the bestest framework.';
+	const console = 'nintendo sixty four';
+	const Error = 'Woops.';
+	const Object = 42;
+	const Map = false;
+
+	const everyone = [document, console, Error, Object, Map];
+</script>
+
+<svelte:head>
+	<title>Cute test</title>
+</svelte:head>
+
+<svelte:window on:click></svelte:window>
+<svelte:body on:mouseenter></svelte:body>
+
+{#each everyone as someone (someone)}
+	<p>{someone}</p>
+{/each}

test/test.js

@@ -2,6 +2,10 @@ const glob = require("tiny-glob/sync.js");
 
 require("./setup");
 
+// bind internal to jsdom
+require("./helpers");
+require("../internal");
+
 glob("*/index.{js,ts}", { cwd: "test" }).forEach((file) => {
 	require("./" + file);
 });