mirror of https://github.com/sveltejs/svelte
Conduitry
6 years ago
commit
d35ad59809
@ -0,0 +1,10 @@
|
||||
<svelte:options tag="custom-element"/>
|
||||
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<p>name: {name}</p>
|
||||
<p>$$props: {JSON.stringify($$props)}</p>
|
||||
<p>$$restProps: {JSON.stringify($$restProps)}</p>
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
import * as assert from 'assert';
|
||||
import './main.svelte';
|
||||
|
||||
export default function (target) {
|
||||
target.innerHTML = '<custom-element name="world" answer="42" test="svelte"></custom-element>';
|
||||
const el = target.querySelector('custom-element');
|
||||
|
||||
assert.htmlEqual(el.shadowRoot.innerHTML, `
|
||||
<p>name: world</p>
|
||||
<p>$$props: {"name":"world","answer":"42","test":"svelte"}</p>
|
||||
<p>$$restProps: {"answer":"42","test":"svelte"}</p>
|
||||
`);
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
let keys = ['a', 'b'];
|
||||
let items = ['c', 'd'];
|
||||
export let log;
|
||||
function setKey(key, value, item) {
|
||||
log.push(`setKey(${key}, ${value}, ${item})`);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each items as item (item)}
|
||||
{#each keys as key (key)}
|
||||
<slot {key} {item} set={(value) => setKey(key, value, item)} />
|
||||
{/each}
|
||||
{/each}
|
||||
@ -0,0 +1,36 @@
|
||||
export default {
|
||||
html: `
|
||||
<button type="button">Set a-c</button>
|
||||
<button type="button">Set b-c</button>
|
||||
<button type="button">Set a-d</button>
|
||||
<button type="button">Set b-d</button>
|
||||
`,
|
||||
async test({ assert, target, window, component }) {
|
||||
const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
|
||||
const click = new window.MouseEvent('click');
|
||||
|
||||
await btn1.dispatchEvent(click);
|
||||
assert.deepEqual(component.log, ['setKey(a, value-a-c, c)']);
|
||||
|
||||
await btn2.dispatchEvent(click);
|
||||
assert.deepEqual(component.log, [
|
||||
'setKey(a, value-a-c, c)',
|
||||
'setKey(b, value-b-c, c)'
|
||||
]);
|
||||
|
||||
await btn3.dispatchEvent(click);
|
||||
assert.deepEqual(component.log, [
|
||||
'setKey(a, value-a-c, c)',
|
||||
'setKey(b, value-b-c, c)',
|
||||
'setKey(a, value-a-d, d)'
|
||||
]);
|
||||
|
||||
await btn4.dispatchEvent(click);
|
||||
assert.deepEqual(component.log, [
|
||||
'setKey(a, value-a-c, c)',
|
||||
'setKey(b, value-b-c, c)',
|
||||
'setKey(a, value-a-d, d)',
|
||||
'setKey(b, value-b-d, d)'
|
||||
]);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
export let log = [];
|
||||
</script>
|
||||
|
||||
<Nested {log} let:set let:key let:item>
|
||||
<button type="button" on:click={() => set(`value-${key}-${item}`)}>Set {key}-{item}</button>
|
||||
</Nested>
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
let keys = ['a', 'b'];
|
||||
export let log;
|
||||
function setKey(key, value) {
|
||||
log.push(`setKey(${key}, ${value})`);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each keys as key (key)}
|
||||
<slot {key} set={(value) => setKey(key, value)} />
|
||||
{/each}
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
html: `
|
||||
<button type="button">Set a</button>
|
||||
<button type="button">Set b</button>
|
||||
`,
|
||||
async test({ assert, target, window, component }) {
|
||||
const [btn1, btn2] = target.querySelectorAll('button');
|
||||
const click = new window.MouseEvent('click');
|
||||
|
||||
await btn1.dispatchEvent(click);
|
||||
assert.deepEqual(component.log, ['setKey(a, value-a)']);
|
||||
|
||||
await btn2.dispatchEvent(click);
|
||||
assert.deepEqual(component.log, [
|
||||
'setKey(a, value-a)',
|
||||
'setKey(b, value-b)'
|
||||
]);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
export let log = [];
|
||||
</script>
|
||||
|
||||
<Nested {log} let:set let:key>
|
||||
<button type="button" on:click={() => set(`value-${key}`)}>Set {key}</button>
|
||||
</Nested>
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
export let log;
|
||||
function setKey(key, value) {
|
||||
log.push(`setKey(${key}, ${value})`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<slot key="a" set={setKey} />
|
||||
<slot key="b" set={setKey} />
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Inner from './Inner.svelte';
|
||||
export let log;
|
||||
</script>
|
||||
|
||||
<Inner {log} let:key let:set>
|
||||
<slot {key} set={(value) => set(key, value)} />
|
||||
</Inner>
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
html: `
|
||||
<button type="button">Set a</button>
|
||||
<button type="button">Set b</button>
|
||||
`,
|
||||
async test({ assert, target, window, component }) {
|
||||
const [btn1, btn2] = target.querySelectorAll('button');
|
||||
const click = new window.MouseEvent('click');
|
||||
|
||||
await btn1.dispatchEvent(click);
|
||||
assert.deepEqual(component.log, ['setKey(a, value-a)']);
|
||||
|
||||
await btn2.dispatchEvent(click);
|
||||
assert.deepEqual(component.log, [
|
||||
'setKey(a, value-a)',
|
||||
'setKey(b, value-b)'
|
||||
]);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
export let log = [];
|
||||
</script>
|
||||
|
||||
<Nested {log} let:set let:key>
|
||||
<button type="button" on:click={() => set(`value-${key}`)}>Set {key}</button>
|
||||
</Nested>
|
||||
@ -1,73 +1,113 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as assert from 'assert';
|
||||
import { svelte } from '../helpers';
|
||||
import { SourceMapConsumer } from 'source-map';
|
||||
import { loadConfig, svelte } from '../helpers';
|
||||
// keep source-map at version 0.7.x
|
||||
// https://github.com/mozilla/source-map/issues/400
|
||||
import { getLocator } from 'locate-character';
|
||||
import { SourceMapConsumer } from 'source-map';
|
||||
|
||||
|
||||
describe('sourcemaps', () => {
|
||||
fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
|
||||
if (dir[0] === '.') return;
|
||||
|
||||
const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
|
||||
|
||||
// add .solo to a sample directory name to only run that test
|
||||
const solo = /\.solo/.test(dir);
|
||||
const skip = /\.skip/.test(dir);
|
||||
const solo = config.solo || /\.solo/.test(dir);
|
||||
const skip = config.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, async () => {
|
||||
const filename = path.resolve(
|
||||
`${__dirname}/samples/${dir}/input.svelte`
|
||||
);
|
||||
const outputFilename = path.resolve(
|
||||
`${__dirname}/samples/${dir}/output`
|
||||
);
|
||||
const { test } = require(`./samples/${dir}/test.js`);
|
||||
const inputFile = path.resolve(`${__dirname}/samples/${dir}/input.svelte`);
|
||||
const outputName = '_actual';
|
||||
const outputBase = path.resolve(`${__dirname}/samples/${dir}/${outputName}`);
|
||||
|
||||
const inputCode = fs.readFileSync(inputFile, 'utf-8');
|
||||
const input = {
|
||||
code: inputCode,
|
||||
locate: getLocator(inputCode)
|
||||
};
|
||||
|
||||
const input = fs.readFileSync(filename, 'utf-8').replace(/\s+$/, '');
|
||||
const { js, css } = svelte.compile(input, {
|
||||
filename,
|
||||
outputFilename: `${outputFilename}.js`,
|
||||
cssOutputFilename: `${outputFilename}.css`
|
||||
const preprocessed = await svelte.preprocess(
|
||||
input.code,
|
||||
config.preprocess || {},
|
||||
{
|
||||
filename: 'input.svelte'
|
||||
}
|
||||
);
|
||||
|
||||
const { js, css } = svelte.compile(
|
||||
preprocessed.code, {
|
||||
filename: 'input.svelte',
|
||||
// filenames for sourcemaps
|
||||
outputFilename: `${outputName}.js`,
|
||||
cssOutputFilename: `${outputName}.css`
|
||||
});
|
||||
|
||||
const _code = js.code.replace(/Svelte v\d+\.\d+\.\d+/, match => match.replace(/\d/g, 'x'));
|
||||
js.code = js.code.replace(
|
||||
/generated by Svelte v\d+\.\d+\.\d+/,
|
||||
match => match.replace(/\d/g, 'x')
|
||||
);
|
||||
|
||||
fs.writeFileSync(`${outputBase}.svelte`, preprocessed.code);
|
||||
if (preprocessed.map) {
|
||||
fs.writeFileSync(
|
||||
`${outputBase}.svelte.map`,
|
||||
// TODO encode mappings for output - svelte.preprocess returns decoded mappings
|
||||
JSON.stringify(preprocessed.map, null, 2)
|
||||
);
|
||||
}
|
||||
fs.writeFileSync(
|
||||
`${outputFilename}.js`,
|
||||
`${_code}\n//# sourceMappingURL=output.js.map`
|
||||
`${outputBase}.js`,
|
||||
`${js.code}\n//# sourceMappingURL=${outputName}.js.map`
|
||||
);
|
||||
fs.writeFileSync(
|
||||
`${outputFilename}.js.map`,
|
||||
JSON.stringify(js.map, null, ' ')
|
||||
`${outputBase}.js.map`,
|
||||
JSON.stringify(js.map, null, 2)
|
||||
);
|
||||
|
||||
if (css.code) {
|
||||
fs.writeFileSync(
|
||||
`${outputFilename}.css`,
|
||||
`${css.code}\n/*# sourceMappingURL=output.css.map */`
|
||||
`${outputBase}.css`,
|
||||
`${css.code}\n/*# sourceMappingURL=${outputName}.css.map */`
|
||||
);
|
||||
fs.writeFileSync(
|
||||
`${outputFilename}.css.map`,
|
||||
`${outputBase}.css.map`,
|
||||
JSON.stringify(css.map, null, ' ')
|
||||
);
|
||||
}
|
||||
|
||||
assert.deepEqual(js.map.sources, ['input.svelte']);
|
||||
if (css.map) assert.deepEqual(css.map.sources, ['input.svelte']);
|
||||
|
||||
const { test } = require(`./samples/${dir}/test.js`);
|
||||
assert.deepEqual(
|
||||
js.map.sources.slice().sort(),
|
||||
(config.js_map_sources || ['input.svelte']).sort()
|
||||
);
|
||||
if (css.map) {
|
||||
assert.deepEqual(
|
||||
css.map.sources.slice().sort(),
|
||||
(config.css_map_sources || ['input.svelte']).sort()
|
||||
);
|
||||
}
|
||||
|
||||
const locateInSource = getLocator(input);
|
||||
// use locate_1 with mapConsumer:
|
||||
// lines are one-based, columns are zero-based
|
||||
|
||||
const smc = await new SourceMapConsumer(js.map);
|
||||
const locateInGenerated = getLocator(_code);
|
||||
preprocessed.mapConsumer = preprocessed.map && await new SourceMapConsumer(preprocessed.map);
|
||||
preprocessed.locate = getLocator(preprocessed.code);
|
||||
preprocessed.locate_1 = getLocator(preprocessed.code, { offsetLine: 1 });
|
||||
|
||||
const smcCss = css.map && await new SourceMapConsumer(css.map);
|
||||
const locateInGeneratedCss = getLocator(css.code || '');
|
||||
js.mapConsumer = js.map && await new SourceMapConsumer(js.map);
|
||||
js.locate = getLocator(js.code);
|
||||
js.locate_1 = getLocator(js.code, { offsetLine: 1 });
|
||||
|
||||
test({ assert, code: _code, map: js.map, smc, smcCss, locateInSource, locateInGenerated, locateInGeneratedCss });
|
||||
css.mapConsumer = css.map && await new SourceMapConsumer(css.map);
|
||||
css.locate = getLocator(css.code || '');
|
||||
css.locate_1 = getLocator(css.code || '', { offsetLine: 1 });
|
||||
test({ assert, input, preprocessed, js, css });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
const fs = require( 'fs' );
|
||||
const path = require( 'path' );
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
export function test({ assert, map }) {
|
||||
assert.deepEqual( map.sources, [ 'input.svelte' ]);
|
||||
assert.deepEqual( map.sourcesContent, [
|
||||
fs.readFileSync( path.join( __dirname, 'input.svelte' ), 'utf-8' )
|
||||
export function test({ assert, js }) {
|
||||
assert.deepEqual(js.map.sources, ['input.svelte']);
|
||||
assert.deepEqual(js.map.sourcesContent, [
|
||||
fs.readFileSync(path.join(__dirname, 'input.svelte'), 'utf-8')
|
||||
]);
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue