mirror of https://github.com/sveltejs/svelte
Rich-Harris
9 years ago
commit
0551d2646a
@ -0,0 +1,7 @@
|
||||
<!--
|
||||
Thank you for creating a pull request. Before submitting, please note the following:
|
||||
|
||||
* If your pull request implements a new feature, please raise an issue to discuss it before sending code. In many cases features are absent for a reason.
|
||||
* This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them.
|
||||
* Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to `npm run lint`!)
|
||||
-->
|
||||
@ -1,7 +1,10 @@
|
||||
import * as fs from 'fs';
|
||||
import compile from './compile.js';
|
||||
import { compile } from '../index.js';
|
||||
|
||||
require.extensions[ '.html' ] = function ( module, filename ) {
|
||||
const { code } = compile( fs.readFileSync( filename, 'utf-8' ), { filename });
|
||||
const { code } = compile( fs.readFileSync( filename, 'utf-8' ), {
|
||||
filename,
|
||||
generate: 'ssr'
|
||||
});
|
||||
return module._compile( code, filename );
|
||||
};
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
export const html = 'http://www.w3.org/1999/xhtml';
|
||||
export const mathml = 'http://www.w3.org/1998/Math/MathML';
|
||||
export const svg = 'http://www.w3.org/2000/svg';
|
||||
export const xlink = 'http://www.w3.org/1999/xlink';
|
||||
export const xml = 'http://www.w3.org/XML/1998/namespace';
|
||||
export const xmlns = 'http://www.w3.org/2000/xmlns';
|
||||
|
||||
export default { html, mathml, svg, xlink, xml, xmlns };
|
||||
@ -0,0 +1,5 @@
|
||||
export default function namespace ( validator, prop ) {
|
||||
if ( prop.value.type !== 'Literal' || typeof prop.value.value !== 'string' ) {
|
||||
validator.error( `The 'namespace' property must be a string literal representing a valid namespace`, prop.start );
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
export default {
|
||||
html: '<p>50</p>',
|
||||
|
||||
test ( assert, component, target ) {
|
||||
component.set({ range: [ 50, 100 ] });
|
||||
assert.htmlEqual( target.innerHTML, '<p>75</p>' );
|
||||
|
||||
component.set({ range: [ 50, 60 ] });
|
||||
assert.htmlEqual( target.innerHTML, '<p>55</p>' );
|
||||
|
||||
component.set({ x: 8 });
|
||||
assert.htmlEqual( target.innerHTML, '<p>58</p>' );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,20 @@
|
||||
<p>{{scale(x)}}</p>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
x: 5,
|
||||
domain: [ 0, 10 ],
|
||||
range: [ 0, 100 ]
|
||||
}),
|
||||
|
||||
computed: {
|
||||
scale: ( domain, range ) => {
|
||||
return num => {
|
||||
const t = domain[0] + ( num - domain[0] ) / ( domain[1] - domain[0] );
|
||||
return range[0] + t * ( range[1] - range[0] );
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
html: '<h1>Hello world!</h1>',
|
||||
|
||||
test ( assert, component, target ) {
|
||||
component.set({ name: () => 'everybody' });
|
||||
assert.htmlEqual( target.innerHTML, '<h1>Hello everybody!</h1>' );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
<h1>Hello {{name()}}!</h1>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
name: () => 'world'
|
||||
})
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
test ( assert, component, target, window ) {
|
||||
const allow = target.querySelector( '.allow-propagation' );
|
||||
const stop = target.querySelector( '.stop-propagation' );
|
||||
|
||||
allow.dispatchEvent( new window.MouseEvent( 'click', { bubbles: true }) );
|
||||
stop.dispatchEvent( new window.MouseEvent( 'click', { bubbles: true }) );
|
||||
|
||||
assert.equal( component.get( 'foo' ), true );
|
||||
assert.equal( component.get( 'bar' ), false );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,18 @@
|
||||
<div on:click='set({ foo: true })'>
|
||||
<button class='allow-propagation'>click me</button>
|
||||
</div>
|
||||
|
||||
<div on:click='set({ bar: true })'>
|
||||
<button class='stop-propagation' on:click='event.stopPropagation()'>click me</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
foo: false,
|
||||
bar: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,2 @@
|
||||
<input class='wont-focus'>
|
||||
<input class='will-focus' on:click='this.focus()'>
|
||||
@ -0,0 +1,7 @@
|
||||
<rect x='{{x}}' y='{{y}}' width='{{width}}' height='{{height}}'/>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
namespace: 'svg'
|
||||
};
|
||||
</script>
|
||||
@ -1,12 +1,13 @@
|
||||
export default {
|
||||
skip: true,
|
||||
data: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
|
||||
html: `<svg><rect x="0" y="0" width="100" height="100"></rect></svg>`,
|
||||
|
||||
test ( assert, component, target ) {
|
||||
const svg = target.querySelector( 'svg' );
|
||||
const rect = target.querySelector( 'rect' );
|
||||
|
Before Width: | Height: | Size: 178 B After Width: | Height: | Size: 179 B |
@ -0,0 +1,7 @@
|
||||
<rect x='{{x}}' y='{{y}}' width='{{width}}' height='{{height}}'/>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
namespace: 'http://www.w3.org/2000/svg'
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,21 @@
|
||||
export default {
|
||||
data: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
|
||||
html: `<svg><rect x="0" y="0" width="100" height="100"></rect></svg>`,
|
||||
|
||||
test ( assert, component, target ) {
|
||||
const svg = target.querySelector( 'svg' );
|
||||
const rect = target.querySelector( 'rect' );
|
||||
|
||||
assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' );
|
||||
assert.equal( rect.namespaceURI, 'http://www.w3.org/2000/svg' );
|
||||
|
||||
component.set({ width: 150, height: 50 });
|
||||
assert.equal( target.innerHTML, `<svg><rect x="0" y="0" width="150" height="50"></rect></svg>` );
|
||||
}
|
||||
};
|
||||
|
After Width: | Height: | Size: 179 B |
@ -0,0 +1,3 @@
|
||||
<p>before</p>
|
||||
|
||||
<p>after</p>
|
||||
@ -0,0 +1,2 @@
|
||||
<p>before</p>
|
||||
<p>after</p>
|
||||
@ -0,0 +1,3 @@
|
||||
<p>before</p>
|
||||
<!-- a comment -->
|
||||
<p>after</p>
|
||||
@ -0,0 +1 @@
|
||||
<button>click me</button>
|
||||
@ -0,0 +1 @@
|
||||
<button>click me</button>
|
||||
@ -0,0 +1 @@
|
||||
<button on:click='set({ foo: "bar" })'>click me</button>
|
||||
@ -0,0 +1,7 @@
|
||||
<rect x='{{x}}' y='{{y}}' width='{{width}}' height='{{height}}'/>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
namespace: 'svg'
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
[]
|
||||
Loading…
Reference in new issue