svelte/test/formats/index.js

import assert from "assert";
import { svelte, deindent, env, setupHtmlEqual } from "../helpers.js";

function testAmd(code, expectedId, dependencies, html) {
	const fn = new Function("define", code);

	return env().then(window => {
		function define(id, deps, factory) {
			assert.equal(id, expectedId);
			assert.deepEqual(deps, Object.keys(dependencies));

			const SvelteComponent = factory(
				...Object.keys(dependencies).map(key => dependencies[key])
			);

			const main = window.document.body.querySelector("main");
			const component = new SvelteComponent({ target: main });

			assert.htmlEqual(main.innerHTML, html);

			component.destroy();
		}

		define.amd = true;

		fn(define);
	});
}

function testCjs(code, dependencyById, html) {
	const fn = new Function("module", "exports", "require", code);

	return env().then(window => {
		const module = { exports: {} };
		const require = id => {
			return dependencyById[id];
		};

		fn(module, module.exports, require);

		const SvelteComponent = module.exports;

		const main = window.document.body.querySelector("main");
		const component = new SvelteComponent({ target: main });

		assert.htmlEqual(main.innerHTML, html);

		component.destroy();
	});
}

function testIife(code, name, globals, html) {
	const fn = new Function(Object.keys(globals), `${code}\n\nreturn ${name};`);

	return env().then(window => {
		const SvelteComponent = fn(
			...Object.keys(globals).map(key => globals[key])
		);

		const main = window.document.body.querySelector("main");
		const component = new SvelteComponent({ target: main });

		assert.htmlEqual(main.innerHTML, html);

		component.destroy();
	});
}

function testEval(code, name, globals, html) {
	const fn = new Function(Object.keys(globals), `return ${code};`);

	return env().then(window => {
		const SvelteComponent = fn(
			...Object.keys(globals).map(key => globals[key])
		);

		const main = window.document.body.querySelector("main");
		const component = new SvelteComponent({ target: main });

		assert.htmlEqual(main.innerHTML, html);

		component.destroy();
	});
}

describe("formats", () => {
	before(setupHtmlEqual);

	describe("amd", () => {
		it("generates an AMD module", () => {
			const source = deindent`
				<div>{{answer}}</div>

				<script>
					import answer from 'answer';

					export default {
						data () {
							return { answer };
						}
					};
				</script>
			`;

			const { code } = svelte.compile(source, {
				format: "amd",
				amd: { id: "foo" }
			});

			return testAmd(code, "foo", { answer: 42 }, `<div>42</div>`);
		});
	});

	describe("cjs", () => {
		it("generates a CommonJS module", () => {
			const source = deindent`
				<div>{{answer}}</div>

				<script>
					import answer from 'answer';

					export default {
						data () {
							return { answer };
						}
					};
				</script>
			`;

			const { code } = svelte.compile(source, {
				format: "cjs"
			});

			return testCjs(code, { answer: 42 }, `<div>42</div>`);
		});
	});

	describe("iife", () => {
		it("generates a self-executing script", () => {
			const source = deindent`
				<div>{{answer}}</div>

				<script>
					import answer from 'answer';

					export default {
						data () {
							return { answer };
						}
					};
				</script>
			`;

			const { code } = svelte.compile(source, {
				format: "iife",
				name: "Foo",
				globals: {
					answer: "answer"
				}
			});

			return testIife(code, "Foo", { answer: 42 }, `<div>42</div>`);
		});
	});

	describe("umd", () => {
		it("generates a UMD build", () => {
			const source = deindent`
				<div>{{answer}}</div>

				<script>
					import answer from 'answer';

					export default {
						data () {
							return { answer };
						}
					};
				</script>
			`;

			const { code } = svelte.compile(source, {
				format: "umd",
				name: "Foo",
				globals: {
					answer: "answer"
				},
				amd: {
					id: "foo"
				}
			});

			return testAmd(code, "foo", { answer: 42 }, `<div>42</div>`)
				.then(() => testCjs(code, { answer: 42 }, `<div>42</div>`))
				.then(() => testIife(code, "Foo", { answer: 42 }, `<div>42</div>`));
		});
	});

	describe("eval", () => {
		it("generates a self-executing script that returns the component on eval", () => {
			const source = deindent`
				<div>{{answer}}</div>

				<script>
					import answer from 'answer';

					export default {
						data () {
							return { answer };
						}
					};
				</script>
			`;

			const { code } = svelte.compile(source, {
				format: "eval",
				globals: {
					answer: "answer"
				}
			});

			return testEval(code, "Foo", { answer: 42 }, `<div>42</div>`);
		});
	});
});