You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/test/formats/index.js

222 lines
4.4 KiB

import assert from "assert";
import { svelte, deindent, env, setupHtmlEqual } from "../helpers.js";
function testAmd(code, expectedId, dependencies, html) {
const fn = new Function("define", code);
const window = env();
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);
const window = env();
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};`);
const window = env();
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};`);
const window = env();
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"
}
});
testAmd(code, "foo", { answer: 42 }, `<div>42</div>`);
testCjs(code, { answer: 42 }, `<div>42</div>`);
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>`);
});
});
});