mirror of https://github.com/sveltejs/svelte
parent
b2b3588cdd
commit
6fd069922b
@ -1,164 +1,147 @@
|
|||||||
import assert from 'assert';
|
import assert from 'assert';
|
||||||
import * as fs from 'fs';
|
import {svelte} from '../helpers.js';
|
||||||
import {parse} from 'acorn';
|
|
||||||
import {addLineNumbers, env, normalizeHtml, svelte} from '../helpers.js';
|
|
||||||
|
|
||||||
function tryRequire(file) {
|
|
||||||
try {
|
|
||||||
const mod = require(file);
|
|
||||||
return mod.default || mod;
|
|
||||||
} catch (err) {
|
|
||||||
if (err.code !== 'MODULE_NOT_FOUND') throw err;
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeWarning(warning) {
|
|
||||||
warning.frame = warning.frame.replace(/^\n/, '').
|
|
||||||
replace(/^\t+/gm, '').
|
|
||||||
replace(/\s+$/gm, '');
|
|
||||||
delete warning.filename;
|
|
||||||
delete warning.toString;
|
|
||||||
return warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkCodeIsValid(code) {
|
|
||||||
try {
|
|
||||||
parse(code);
|
|
||||||
} catch (err) {
|
|
||||||
console.error(addLineNumbers(code));
|
|
||||||
throw new Error(err.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
describe.only('preprocess', () => {
|
describe.only('preprocess', () => {
|
||||||
fs.readdirSync('test/preprocess/samples').forEach(dir => {
|
it('preprocesses entire component', () => {
|
||||||
if (dir[0] === '.') return;
|
const source = `
|
||||||
|
<h1>Hello __NAME__!</h1>
|
||||||
// add .solo to a sample directory name to only run that test
|
`;
|
||||||
const solo = /\.solo/.test(dir);
|
|
||||||
const skip = /\.skip/.test(dir);
|
const expected = `
|
||||||
|
<h1>Hello world!</h1>
|
||||||
if (solo && process.env.CI) {
|
`;
|
||||||
throw new Error('Forgot to remove `solo: true` from test');
|
|
||||||
}
|
return svelte.preprocess(source, {
|
||||||
|
markup: ({ content }) => {
|
||||||
(solo ? it.only : skip ? it.skip : it)(dir, () => {
|
return {
|
||||||
const config = tryRequire(`./samples/${dir}/_config.js`) || {};
|
code: content.replace('__NAME__', 'world')
|
||||||
const input = fs.existsSync(`test/preprocess/samples/${dir}/input.pug`) ?
|
};
|
||||||
read(`test/preprocess/samples/${dir}/input.pug`) :
|
}
|
||||||
read(`test/preprocess/samples/${dir}/input.html`);
|
}).then(processed => {
|
||||||
|
assert.equal(processed.toString(), expected);
|
||||||
return svelte.preprocess(input, config)
|
});
|
||||||
.then(processed => processed.toString())
|
});
|
||||||
.then(processed => {
|
|
||||||
const expectedWarnings = (config.warnings || []).map(
|
it('preprocesses style', () => {
|
||||||
normalizeWarning);
|
const source = `
|
||||||
const domWarnings = [];
|
<div class='brand-color'>$brand</div>
|
||||||
const ssrWarnings = [];
|
|
||||||
|
<style>
|
||||||
const dom = svelte.compile(
|
.brand-color {
|
||||||
processed,
|
color: $brand;
|
||||||
Object.assign(config, {
|
}
|
||||||
format: 'iife',
|
</style>
|
||||||
name: 'SvelteComponent',
|
`;
|
||||||
onwarn: warning => {
|
|
||||||
domWarnings.push(warning);
|
const expected = `
|
||||||
},
|
<div class='brand-color'>$brand</div>
|
||||||
})
|
|
||||||
);
|
<style>
|
||||||
|
.brand-color {
|
||||||
const ssr = svelte.compile(
|
color: purple;
|
||||||
processed,
|
}
|
||||||
Object.assign(config, {
|
</style>
|
||||||
format: 'iife',
|
`;
|
||||||
generate: 'ssr',
|
|
||||||
name: 'SvelteComponent',
|
return svelte.preprocess(source, {
|
||||||
onwarn: warning => {
|
style: ({ content }) => {
|
||||||
ssrWarnings.push(warning);
|
return {
|
||||||
},
|
code: content.replace('$brand', 'purple')
|
||||||
})
|
};
|
||||||
);
|
}
|
||||||
|
}).then(processed => {
|
||||||
// check the code is valid
|
assert.equal(processed.toString(), expected);
|
||||||
checkCodeIsValid(dom.code);
|
});
|
||||||
checkCodeIsValid(ssr.code);
|
});
|
||||||
|
|
||||||
assert.equal(dom.css, ssr.css);
|
it('preprocesses style asynchronously', () => {
|
||||||
|
const source = `
|
||||||
assert.deepEqual(
|
<div class='brand-color'>$brand</div>
|
||||||
domWarnings.map(normalizeWarning),
|
|
||||||
ssrWarnings.map(normalizeWarning)
|
<style>
|
||||||
);
|
.brand-color {
|
||||||
assert.deepEqual(domWarnings.map(normalizeWarning), expectedWarnings);
|
color: $brand;
|
||||||
|
}
|
||||||
const expected = {
|
</style>
|
||||||
html: read(`test/preprocess/samples/${dir}/expected.html`),
|
`;
|
||||||
css: read(`test/preprocess/samples/${dir}/expected.css`),
|
|
||||||
};
|
const expected = `
|
||||||
|
<div class='brand-color'>$brand</div>
|
||||||
if (expected.css !== null) {
|
|
||||||
fs.writeFileSync(`test/preprocess/samples/${dir}/_actual.css`,
|
<style>
|
||||||
dom.css);
|
.brand-color {
|
||||||
assert.equal(dom.css.replace(/svelte-\d+/g, 'svelte-xyz'),
|
color: purple;
|
||||||
expected.css);
|
}
|
||||||
}
|
</style>
|
||||||
|
`;
|
||||||
// verify that the right elements have scoping selectors
|
|
||||||
if (expected.html !== null) {
|
return svelte.preprocess(source, {
|
||||||
const window = env();
|
style: ({ content }) => {
|
||||||
|
return Promise.resolve({
|
||||||
// dom
|
code: content.replace('$brand', 'purple')
|
||||||
try {
|
|
||||||
const Component = eval(
|
|
||||||
`(function () { ${dom.code}; return SvelteComponent; }())`
|
|
||||||
);
|
|
||||||
const target = window.document.querySelector('main');
|
|
||||||
|
|
||||||
new Component({target, data: config.data});
|
|
||||||
const html = target.innerHTML;
|
|
||||||
|
|
||||||
fs.writeFileSync(`test/preprocess/samples/${dir}/_actual.html`,
|
|
||||||
html);
|
|
||||||
|
|
||||||
assert.equal(
|
|
||||||
normalizeHtml(window,
|
|
||||||
html.replace(/svelte-\d+/g, 'svelte-xyz')),
|
|
||||||
normalizeHtml(window, expected.html)
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
console.log(dom.code);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ssr
|
|
||||||
try {
|
|
||||||
const component = eval(
|
|
||||||
`(function () { ${ssr.code}; return SvelteComponent; }())`
|
|
||||||
);
|
|
||||||
|
|
||||||
assert.equal(
|
|
||||||
normalizeHtml(
|
|
||||||
window,
|
|
||||||
component.render(config.data).
|
|
||||||
replace(/svelte-\d+/g, 'svelte-xyz')
|
|
||||||
),
|
|
||||||
normalizeHtml(window, expected.html)
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
console.log(ssr.code);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
}).then(processed => {
|
||||||
|
assert.equal(processed.toString(), expected);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
function read(file) {
|
it('preprocesses script', () => {
|
||||||
try {
|
const source = `
|
||||||
return fs.readFileSync(file, 'utf-8');
|
<script>
|
||||||
} catch (err) {
|
console.log(__THE_ANSWER__);
|
||||||
return null;
|
</script>
|
||||||
}
|
`;
|
||||||
}
|
|
||||||
|
const expected = `
|
||||||
|
<script>
|
||||||
|
console.log(42);
|
||||||
|
</script>
|
||||||
|
`;
|
||||||
|
|
||||||
|
return svelte.preprocess(source, {
|
||||||
|
script: ({ content }) => {
|
||||||
|
return {
|
||||||
|
code: content.replace('__THE_ANSWER__', '42')
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}).then(processed => {
|
||||||
|
assert.equal(processed.toString(), expected);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('parses attributes', () => {
|
||||||
|
const source = `
|
||||||
|
<style type='text/scss' bool></style>
|
||||||
|
`;
|
||||||
|
|
||||||
|
return svelte.preprocess(source, {
|
||||||
|
style: ({ attributes }) => {
|
||||||
|
assert.deepEqual(attributes, {
|
||||||
|
type: 'text/scss',
|
||||||
|
bool: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('ignores null/undefined returned from preprocessor', () => {
|
||||||
|
const source = `
|
||||||
|
<script>
|
||||||
|
console.log('ignore me');
|
||||||
|
</script>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const expected = `
|
||||||
|
<script>
|
||||||
|
console.log('ignore me');
|
||||||
|
</script>
|
||||||
|
`;
|
||||||
|
|
||||||
|
return svelte.preprocess(source, {
|
||||||
|
script: () => null
|
||||||
|
}).then(processed => {
|
||||||
|
assert.equal(processed.toString(), expected);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in new issue