forked from sveltejs/svelte
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Basic support for markup, style and script preprocessors
Suggestion for sveltejs#181 and sveltejs#876
- Loading branch information
Showing
25 changed files
with
976 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| import assert from 'assert'; | ||
| import * as fs from 'fs'; | ||
| 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('preprocess', () => { | ||
| fs.readdirSync('test/preprocess/samples').forEach(dir => { | ||
| if (dir[0] === '.') return; | ||
|
|
||
| // add .solo to a sample directory name to only run that test | ||
| const solo = /\.solo/.test(dir); | ||
| const skip = /\.skip/.test(dir); | ||
|
|
||
| if (solo && process.env.CI) { | ||
| throw new Error('Forgot to remove `solo: true` from test'); | ||
| } | ||
|
|
||
| (solo ? it.only : skip ? it.skip : it)(dir, () => { | ||
| const config = tryRequire(`./samples/${dir}/_config.js`) || {}; | ||
| const input = fs.existsSync(`test/preprocess/samples/${dir}/input.pug`) ? | ||
| fs.readFileSync(`test/preprocess/samples/${dir}/input.pug`, | ||
| 'utf-8').replace(/\s+$/, '') : | ||
| fs.readFileSync(`test/preprocess/samples/${dir}/input.html`, | ||
| 'utf-8').replace(/\s+$/, ''); | ||
|
|
||
| svelte.preprocess(input, config). | ||
| then(processed => processed.toString()). | ||
| then(processed => { | ||
|
|
||
| const expectedWarnings = (config.warnings || []).map( | ||
| normalizeWarning); | ||
| const domWarnings = []; | ||
| const ssrWarnings = []; | ||
|
|
||
| const dom = svelte.compile( | ||
| processed, | ||
| Object.assign(config, { | ||
| format: 'iife', | ||
| name: 'SvelteComponent', | ||
| onwarn: warning => { | ||
| domWarnings.push(warning); | ||
| }, | ||
| }), | ||
| ); | ||
|
|
||
| const ssr = svelte.compile( | ||
| processed, | ||
| Object.assign(config, { | ||
| format: 'iife', | ||
| generate: 'ssr', | ||
| name: 'SvelteComponent', | ||
| onwarn: warning => { | ||
| ssrWarnings.push(warning); | ||
| }, | ||
| }), | ||
| ); | ||
|
|
||
| // check the code is valid | ||
| checkCodeIsValid(dom.code); | ||
| checkCodeIsValid(ssr.code); | ||
|
|
||
| assert.equal(dom.css, ssr.css); | ||
|
|
||
| assert.deepEqual( | ||
| domWarnings.map(normalizeWarning), | ||
| ssrWarnings.map(normalizeWarning), | ||
| ); | ||
| assert.deepEqual(domWarnings.map(normalizeWarning), expectedWarnings); | ||
|
|
||
| const expected = { | ||
| html: read(`test/preprocess/samples/${dir}/expected.html`), | ||
| css: read(`test/preprocess/samples/${dir}/expected.css`), | ||
| }; | ||
|
|
||
| if (expected.css !== null) { | ||
| fs.writeFileSync(`test/preprocess/samples/${dir}/_actual.css`, | ||
| dom.css); | ||
| assert.equal(dom.css.replace(/svelte-\d+/g, 'svelte-xyz'), | ||
| expected.css); | ||
| } | ||
|
|
||
| // verify that the right elements have scoping selectors | ||
| if (expected.html !== null) { | ||
| const window = env(); | ||
|
|
||
| // dom | ||
| 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; | ||
| } | ||
| } | ||
| }).catch(error => { | ||
| throw error; | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| function read(file) { | ||
| try { | ||
| return fs.readFileSync(file, 'utf-8'); | ||
| } catch (err) { | ||
| return null; | ||
| } | ||
| } |
Oops, something went wrong.