mirror of https://github.com/sveltejs/svelte
Rich Harris
8 years ago
committed by
GitHub
commit
cedd318945
@ -1,5 +1,5 @@
|
|||||||
--require babel-register
|
--require babel-register
|
||||||
--require reify
|
--require reify
|
||||||
--recursive
|
--recursive
|
||||||
./**/__test__.js
|
./**/__test__.js
|
||||||
test/*/index.js
|
test/*/index.js
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,35 @@
|
|||||||
|
import flattenReference from '../../utils/flattenReference.js';
|
||||||
|
import list from '../utils/list.js';
|
||||||
|
|
||||||
|
const validBuiltins = new Set([
|
||||||
|
'set',
|
||||||
|
'fire',
|
||||||
|
'destroy'
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default function validateEventHandlerCallee ( validator, attribute ) {
|
||||||
|
const { callee, start, type } = attribute.expression;
|
||||||
|
|
||||||
|
if ( type !== 'CallExpression' ) {
|
||||||
|
validator.error( `Expected a call expression`, start );
|
||||||
|
}
|
||||||
|
|
||||||
|
const { name } = flattenReference( callee );
|
||||||
|
|
||||||
|
if ( name === 'this' || name === 'event' ) return;
|
||||||
|
if ( callee.type === 'Identifier' && validBuiltins.has( callee.name ) || validator.methods.has( callee.name ) ) return;
|
||||||
|
|
||||||
|
const validCallees = [ 'this.*', 'event.*' ]
|
||||||
|
.concat(
|
||||||
|
Array.from( validBuiltins ),
|
||||||
|
Array.from( validator.methods.keys() )
|
||||||
|
);
|
||||||
|
|
||||||
|
let message = `'${validator.source.slice( callee.start, callee.end )}' is an invalid callee (should be one of ${list( validCallees )})`;
|
||||||
|
|
||||||
|
if ( callee.type === 'Identifier' && validator.helpers.has( callee.name ) ) {
|
||||||
|
message += `. '${callee.name}' exists on 'helpers', did you put it in the wrong place?`;
|
||||||
|
}
|
||||||
|
|
||||||
|
validator.error( message, start );
|
||||||
|
}
|
||||||
@ -1,3 +1,48 @@
|
|||||||
export default function validateWindow () {
|
import flattenReference from '../../utils/flattenReference.js';
|
||||||
// TODO
|
import fuzzymatch from '../utils/fuzzymatch.js';
|
||||||
|
import list from '../utils/list.js';
|
||||||
|
import validateEventHandler from './validateEventHandler.js';
|
||||||
|
|
||||||
|
const validBindings = [
|
||||||
|
'innerWidth',
|
||||||
|
'innerHeight',
|
||||||
|
'outerWidth',
|
||||||
|
'outerHeight',
|
||||||
|
'scrollX',
|
||||||
|
'scrollY'
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function validateWindow ( validator, node ) {
|
||||||
|
node.attributes.forEach( attribute => {
|
||||||
|
if ( attribute.type === 'Binding' ) {
|
||||||
|
if ( attribute.value.type !== 'Identifier' ) {
|
||||||
|
const { parts } = flattenReference( attribute.value );
|
||||||
|
|
||||||
|
validator.error(
|
||||||
|
`Bindings on <:Window/> must be to top-level properties, e.g. '${parts[ parts.length - 1 ]}' rather than '${parts.join( '.' )}'`,
|
||||||
|
attribute.value.start
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( !~validBindings.indexOf( attribute.name ) ) {
|
||||||
|
const match = (
|
||||||
|
attribute.name === 'width' ? 'innerWidth' :
|
||||||
|
attribute.name === 'height' ? 'innerHeight' :
|
||||||
|
fuzzymatch( attribute.name, validBindings )
|
||||||
|
);
|
||||||
|
|
||||||
|
const message = `'${attribute.name}' is not a valid binding on <:Window>`;
|
||||||
|
|
||||||
|
if ( match ) {
|
||||||
|
validator.error( `${message} (did you mean '${match}'?)`, attribute.start );
|
||||||
|
} else {
|
||||||
|
validator.error( `${message} — valid bindings are ${list( validBindings )}`, attribute.start );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
else if ( attribute.type === 'EventHandler' ) {
|
||||||
|
validateEventHandler( validator, attribute );
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import FuzzySet from './FuzzySet.js';
|
||||||
|
|
||||||
|
export default function fuzzymatch ( name, names ) {
|
||||||
|
const set = new FuzzySet( names );
|
||||||
|
const matches = set.get( name );
|
||||||
|
|
||||||
|
return matches && matches[0] && matches[0][0] > 0.7 ?
|
||||||
|
matches[0][1] :
|
||||||
|
null;
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
export default function list ( items, conjunction = 'or' ) {
|
||||||
|
if ( items.length === 1 ) return items[0];
|
||||||
|
return `${items.slice( 0, -1 ).join( ', ' )} ${conjunction} ${items[ items.length - 1 ]}`;
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
|
||||||
|
@keyframes svelte-4112859982-why {
|
||||||
|
0% { color: red; }
|
||||||
|
100% { color: blue; }
|
||||||
|
}
|
||||||
|
|
||||||
|
[svelte-4112859982].animated, [svelte-4112859982] .animated {
|
||||||
|
animation: svelte-4112859982-why 2s;
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<div class='animated'>animated</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@keyframes why {
|
||||||
|
0% { color: red; }
|
||||||
|
100% { color: blue; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated {
|
||||||
|
animation: why 2s;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
[svelte-2352010302].large-screen, [svelte-2352010302] .large-screen {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<div class='large-screen'>animated</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
.large-screen {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
import Imported from './Imported.html';
|
||||||
|
|
||||||
|
import { assign, createText, detachNode, dispatchObservers, insertNode, proto } from "svelte/shared.js";
|
||||||
|
|
||||||
|
var template = (function () {
|
||||||
|
return {
|
||||||
|
components: {
|
||||||
|
NonImported
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}());
|
||||||
|
|
||||||
|
function create_main_fragment ( state, component ) {
|
||||||
|
var imported = new Imported({
|
||||||
|
target: null,
|
||||||
|
_root: component._root
|
||||||
|
});
|
||||||
|
|
||||||
|
var text = createText( "\n" );
|
||||||
|
|
||||||
|
var nonimported = new template.components.NonImported({
|
||||||
|
target: null,
|
||||||
|
_root: component._root
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
mount: function ( target, anchor ) {
|
||||||
|
imported._fragment.mount( target, anchor );
|
||||||
|
insertNode( text, target, anchor );
|
||||||
|
nonimported._fragment.mount( target, anchor );
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy: function ( detach ) {
|
||||||
|
imported.destroy( detach );
|
||||||
|
nonimported.destroy( detach );
|
||||||
|
|
||||||
|
if ( detach ) {
|
||||||
|
detachNode( text );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function SvelteComponent ( options ) {
|
||||||
|
options = options || {};
|
||||||
|
this._state = options.data || {};
|
||||||
|
|
||||||
|
this._observers = {
|
||||||
|
pre: Object.create( null ),
|
||||||
|
post: Object.create( null )
|
||||||
|
};
|
||||||
|
|
||||||
|
this._handlers = Object.create( null );
|
||||||
|
|
||||||
|
this._root = options._root || this;
|
||||||
|
this._yield = options._yield;
|
||||||
|
|
||||||
|
this._torndown = false;
|
||||||
|
this._renderHooks = [];
|
||||||
|
|
||||||
|
this._fragment = create_main_fragment( this._state, this );
|
||||||
|
if ( options.target ) this._fragment.mount( options.target, null );
|
||||||
|
this._flush();
|
||||||
|
}
|
||||||
|
|
||||||
|
assign( SvelteComponent.prototype, proto );
|
||||||
|
|
||||||
|
SvelteComponent.prototype._set = function _set ( newState ) {
|
||||||
|
var oldState = this._state;
|
||||||
|
this._state = assign( {}, oldState, newState );
|
||||||
|
dispatchObservers( this, this._observers.pre, newState, oldState );
|
||||||
|
dispatchObservers( this, this._observers.post, newState, oldState );
|
||||||
|
this._flush();
|
||||||
|
};
|
||||||
|
|
||||||
|
SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) {
|
||||||
|
this.fire( 'destroy' );
|
||||||
|
|
||||||
|
this._fragment.destroy( detach !== false );
|
||||||
|
this._fragment = null;
|
||||||
|
|
||||||
|
this._state = {};
|
||||||
|
this._torndown = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SvelteComponent;
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<Imported/>
|
||||||
|
<NonImported/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Imported from './Imported.html';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Imported,
|
||||||
|
NonImported
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
import { assign, dispatchObservers, noop, proto } from "svelte/shared.js";
|
||||||
|
|
||||||
|
var template = (function () {
|
||||||
|
return {
|
||||||
|
// this test should be removed in v2
|
||||||
|
oncreate () {},
|
||||||
|
ondestroy () {}
|
||||||
|
};
|
||||||
|
}());
|
||||||
|
|
||||||
|
function create_main_fragment ( state, component ) {
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
mount: noop,
|
||||||
|
|
||||||
|
destroy: noop
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function SvelteComponent ( options ) {
|
||||||
|
options = options || {};
|
||||||
|
this._state = options.data || {};
|
||||||
|
|
||||||
|
this._observers = {
|
||||||
|
pre: Object.create( null ),
|
||||||
|
post: Object.create( null )
|
||||||
|
};
|
||||||
|
|
||||||
|
this._handlers = Object.create( null );
|
||||||
|
|
||||||
|
this._root = options._root || this;
|
||||||
|
this._yield = options._yield;
|
||||||
|
|
||||||
|
this._torndown = false;
|
||||||
|
|
||||||
|
this._fragment = create_main_fragment( this._state, this );
|
||||||
|
if ( options.target ) this._fragment.mount( options.target, null );
|
||||||
|
|
||||||
|
if ( options._root ) {
|
||||||
|
options._root._renderHooks.push( template.oncreate.bind( this ) );
|
||||||
|
} else {
|
||||||
|
template.oncreate.call( this );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
assign( SvelteComponent.prototype, proto );
|
||||||
|
|
||||||
|
SvelteComponent.prototype._set = function _set ( newState ) {
|
||||||
|
var oldState = this._state;
|
||||||
|
this._state = assign( {}, oldState, newState );
|
||||||
|
dispatchObservers( this, this._observers.pre, newState, oldState );
|
||||||
|
dispatchObservers( this, this._observers.post, newState, oldState );
|
||||||
|
};
|
||||||
|
|
||||||
|
SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) {
|
||||||
|
this.fire( 'destroy' );
|
||||||
|
template.ondestroy.call( this );
|
||||||
|
|
||||||
|
this._fragment.destroy( detach !== false );
|
||||||
|
this._fragment = null;
|
||||||
|
|
||||||
|
this._state = {};
|
||||||
|
this._torndown = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SvelteComponent;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
// this test should be removed in v2
|
||||||
|
onrender () {},
|
||||||
|
onteardown () {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<span>*</span>
|
||||||
|
<span>*</span>
|
||||||
|
<span>*</span>
|
||||||
|
<span>*</span>
|
||||||
|
|
||||||
|
<span></span>
|
||||||
|
<span>A</span>
|
||||||
|
<span>€</span>
|
||||||
|
|
||||||
|
<span>¬anentity;</span>
|
||||||
|
`
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<span>*</span>
|
||||||
|
<span>*</span>
|
||||||
|
<span>*</span>
|
||||||
|
<span>*</span>
|
||||||
|
|
||||||
|
<span> </span>
|
||||||
|
<span>A</span>
|
||||||
|
<span>€</span>
|
||||||
|
|
||||||
|
<span>¬anentity;</span>
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
export default {
|
||||||
|
data: {
|
||||||
|
z: 'z'
|
||||||
|
},
|
||||||
|
|
||||||
|
test ( assert, component, target, window, raf ) {
|
||||||
|
assert.equal( target.querySelector( 'div' ), component.refs.no );
|
||||||
|
|
||||||
|
component.set({ x: true });
|
||||||
|
|
||||||
|
raf.tick( 25 );
|
||||||
|
assert.equal( component.refs.yes.foo, undefined );
|
||||||
|
assert.equal( component.refs.no.foo, 0.75 );
|
||||||
|
|
||||||
|
raf.tick( 75 );
|
||||||
|
assert.equal( component.refs.yes.foo, undefined );
|
||||||
|
assert.equal( component.refs.no.foo, 0.25 );
|
||||||
|
|
||||||
|
raf.tick( 100 );
|
||||||
|
component.destroy();
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
{{#if x}}
|
||||||
|
<div ref:yes out:foo>{{z}}</div>
|
||||||
|
{{else}}
|
||||||
|
<div ref:no out:foo>{{z}}</div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
transitions: {
|
||||||
|
foo: function ( node, params ) {
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
export default {
|
||||||
|
test ( assert, component, target, window, raf ) {
|
||||||
|
assert.equal( target.querySelector( 'div' ), component.refs.no );
|
||||||
|
|
||||||
|
component.set({ x: true });
|
||||||
|
|
||||||
|
raf.tick( 25 );
|
||||||
|
assert.equal( component.refs.yes.foo, undefined );
|
||||||
|
assert.equal( component.refs.no.foo, 0.75 );
|
||||||
|
|
||||||
|
raf.tick( 75 );
|
||||||
|
assert.equal( component.refs.yes.foo, undefined );
|
||||||
|
assert.equal( component.refs.no.foo, 0.25 );
|
||||||
|
|
||||||
|
raf.tick( 100 );
|
||||||
|
component.destroy();
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
{{#if x}}
|
||||||
|
<div ref:yes out:foo>yes</div>
|
||||||
|
{{else}}
|
||||||
|
<div ref:no out:foo>no</div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
transitions: {
|
||||||
|
foo: function ( node, params ) {
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
export default {
|
||||||
|
data: {
|
||||||
|
x: false,
|
||||||
|
y: true
|
||||||
|
},
|
||||||
|
|
||||||
|
test ( assert, component, target, window, raf ) {
|
||||||
|
assert.equal( target.querySelector( 'div' ), component.refs.no );
|
||||||
|
|
||||||
|
component.set({ x: true, y: false });
|
||||||
|
|
||||||
|
raf.tick( 25 );
|
||||||
|
assert.equal( component.refs.yes.foo, undefined );
|
||||||
|
assert.equal( component.refs.no.foo, 0.75 );
|
||||||
|
|
||||||
|
raf.tick( 75 );
|
||||||
|
assert.equal( component.refs.yes.foo, undefined );
|
||||||
|
assert.equal( component.refs.no.foo, 0.25 );
|
||||||
|
|
||||||
|
raf.tick( 100 );
|
||||||
|
component.destroy();
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
{{#if x}}
|
||||||
|
<div ref:yes out:foo>yes</div>
|
||||||
|
{{elseif y}}
|
||||||
|
<div ref:no out:foo>no</div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
transitions: {
|
||||||
|
foo: function ( node, params ) {
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
[{
|
||||||
|
"message": "'innerwidth' is not a valid binding on <:Window> (did you mean 'innerWidth'?)",
|
||||||
|
"loc": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 9
|
||||||
|
},
|
||||||
|
"pos": 9
|
||||||
|
}]
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<:Window bind:innerwidth='w'/>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
[{
|
||||||
|
"message": "Bindings on <:Window/> must be to top-level properties, e.g. 'baz' rather than 'foo.bar.baz'",
|
||||||
|
"loc": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 26
|
||||||
|
},
|
||||||
|
"pos": 26
|
||||||
|
}]
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<:Window bind:innerWidth='foo.bar.baz'/>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
[{
|
||||||
|
"message": "'width' is not a valid binding on <:Window> (did you mean 'innerWidth'?)",
|
||||||
|
"loc": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 9
|
||||||
|
},
|
||||||
|
"pos": 9
|
||||||
|
}]
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<:Window bind:width='w'/>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
[{
|
||||||
|
"message": "'potato' is not a valid binding on <:Window> — valid bindings are innerWidth, innerHeight, outerWidth, outerHeight, scrollX or scrollY",
|
||||||
|
"loc": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 9
|
||||||
|
},
|
||||||
|
"pos": 9
|
||||||
|
}]
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<:Window bind:potato='foo'/>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
[{
|
||||||
|
"message": "'resize' is an invalid callee (should be one of this.*, event.*, set, fire or destroy)",
|
||||||
|
"loc": {
|
||||||
|
"line": 1,
|
||||||
|
"column": 20
|
||||||
|
},
|
||||||
|
"pos": 20
|
||||||
|
}]
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<:Window on:resize='resize()'/>
|
||||||
Loading…
Reference in new issue