|
|
@ -280,6 +280,67 @@ describe( 'svelte', () => {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
describe( 'formats', () => {
|
|
|
|
describe( 'formats', () => {
|
|
|
|
|
|
|
|
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.teardown();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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.teardown();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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.teardown();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
describe( 'amd', () => {
|
|
|
|
describe( 'amd', () => {
|
|
|
|
it( 'generates an AMD module', () => {
|
|
|
|
it( 'generates an AMD module', () => {
|
|
|
|
const source = deindent`
|
|
|
|
const source = deindent`
|
|
|
@ -301,23 +362,7 @@ describe( 'svelte', () => {
|
|
|
|
amd: { id: 'foo' }
|
|
|
|
amd: { id: 'foo' }
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const fn = new Function( 'define', code );
|
|
|
|
return testAmd( code, 'foo', { answer: 42 }, `<div>42</div>` );
|
|
|
|
|
|
|
|
|
|
|
|
return env().then( window => {
|
|
|
|
|
|
|
|
fn( ( id, dependencies, factory ) => {
|
|
|
|
|
|
|
|
assert.equal( id, 'foo' );
|
|
|
|
|
|
|
|
assert.deepEqual( dependencies, [ 'answer' ]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const SvelteComponent = factory( 42 );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const main = window.document.body.querySelector( 'main' );
|
|
|
|
|
|
|
|
const component = new SvelteComponent({ target: main });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
assert.htmlEqual( main.innerHTML, `<div>42</div>` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
component.teardown();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
@ -341,25 +386,68 @@ describe( 'svelte', () => {
|
|
|
|
format: 'cjs'
|
|
|
|
format: 'cjs'
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const fn = new Function( 'module', 'require', code );
|
|
|
|
return testCjs( code, { answer: 42 }, `<div>42</div>` );
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
return env().then( window => {
|
|
|
|
describe( 'iife', () => {
|
|
|
|
const module = {};
|
|
|
|
it( 'generates a self-executing script', () => {
|
|
|
|
const require = id => {
|
|
|
|
const source = deindent`
|
|
|
|
if ( id === 'answer' ) return 42;
|
|
|
|
<div>{{answer}}</div>
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
fn( module, require );
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import answer from 'answer';
|
|
|
|
|
|
|
|
|
|
|
|
const SvelteComponent = module.exports;
|
|
|
|
export default {
|
|
|
|
|
|
|
|
data () {
|
|
|
|
|
|
|
|
return { answer };
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
const main = window.document.body.querySelector( 'main' );
|
|
|
|
const { code } = compile( source, {
|
|
|
|
const component = new SvelteComponent({ target: main });
|
|
|
|
format: 'iife',
|
|
|
|
|
|
|
|
name: 'Foo',
|
|
|
|
|
|
|
|
globals: {
|
|
|
|
|
|
|
|
answer: 'answer'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
assert.htmlEqual( main.innerHTML, `<div>42</div>` );
|
|
|
|
return testIife( code, 'Foo', { answer: 42 }, `<div>42</div>` );
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
component.teardown();
|
|
|
|
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 } = 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>` ) );
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|