mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
committed by
GitHub
commit
cedd318945
@ -1,5 +1,5 @@
|
||||
--require babel-register
|
||||
--require reify
|
||||
--recursive
|
||||
--recursive
|
||||
./**/__test__.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 () {
|
||||
// TODO
|
||||
import flattenReference from '../../utils/flattenReference.js';
|
||||
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