mirror of https://github.com/sveltejs/svelte
Rich Harris
6 years ago
committed by
GitHub
parent
ea567f1492
commit
48f1f6b4d0
@ -1,31 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
import isValidIdentifier from '../../utils/isValidIdentifier';
|
||||
|
||||
export default class Ref extends Node {
|
||||
type: 'Ref';
|
||||
name: string;
|
||||
|
||||
constructor(component, parent, scope, info) {
|
||||
super(component, parent, scope, info);
|
||||
|
||||
if (parent.ref) {
|
||||
component.error({
|
||||
code: 'duplicate-refs',
|
||||
message: `Duplicate refs`
|
||||
});
|
||||
}
|
||||
|
||||
if (!isValidIdentifier(info.name)) {
|
||||
const suggestion = info.name.replace(/[^_$a-z0-9]/ig, '_').replace(/^\d/, '_$&');
|
||||
|
||||
component.error(info, {
|
||||
code: `invalid-reference-name`,
|
||||
message: `Reference name '${info.name}' is invalid — must be a valid identifier such as ${suggestion}`
|
||||
});
|
||||
} else {
|
||||
component.refs.add(info.name);
|
||||
}
|
||||
|
||||
this.name = info.name;
|
||||
}
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
export default {
|
||||
props: {
|
||||
active: true
|
||||
},
|
||||
|
||||
warnings: [{
|
||||
code: `css-unused-selector`,
|
||||
message: 'Unused CSS selector',
|
||||
start: {
|
||||
column: 1,
|
||||
line: 17,
|
||||
character: 222
|
||||
},
|
||||
end: {
|
||||
column: 20,
|
||||
line: 17,
|
||||
character: 241
|
||||
},
|
||||
pos: 222,
|
||||
frame: `
|
||||
15: }
|
||||
16:
|
||||
17: ref:button.inactive {
|
||||
^
|
||||
18: color: green;
|
||||
19: }`
|
||||
}]
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
.svelte-ref-button.active.svelte-xyz{color:red}
|
||||
@ -1 +0,0 @@
|
||||
<button class="active svelte-xyz svelte-ref-button">deactivate</button>
|
||||
@ -1,20 +0,0 @@
|
||||
<script>
|
||||
export let active;
|
||||
let button;
|
||||
</script>
|
||||
|
||||
{#if active}
|
||||
<button ref:button class='active'>deactivate</button>
|
||||
{:else}
|
||||
<button ref:button>activate</button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
ref:button.active {
|
||||
color: red;
|
||||
}
|
||||
|
||||
ref:button.inactive {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
@ -1,24 +0,0 @@
|
||||
export default {
|
||||
warnings: [{
|
||||
code: `css-unused-selector`,
|
||||
message: 'Unused CSS selector',
|
||||
start: {
|
||||
column: 1,
|
||||
line: 14,
|
||||
character: 120
|
||||
},
|
||||
end: {
|
||||
column: 6,
|
||||
line: 14,
|
||||
character: 125
|
||||
},
|
||||
pos: 120,
|
||||
frame: `
|
||||
12: }
|
||||
13:
|
||||
14: ref:d {
|
||||
^
|
||||
15: color: blue;
|
||||
16: }`
|
||||
}]
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
.svelte-ref-a.svelte-xyz{color:red}.svelte-ref-b.svelte-xyz{color:green}
|
||||
@ -1,3 +0,0 @@
|
||||
<div class="svelte-xyz svelte-ref-a"></div>
|
||||
<div class="svelte-xyz svelte-ref-b"></div>
|
||||
<div></div>
|
||||
@ -1,17 +0,0 @@
|
||||
<div ref:a></div>
|
||||
<div ref:b></div>
|
||||
<div ref:c></div>
|
||||
|
||||
<style>
|
||||
ref:a {
|
||||
color: red;
|
||||
}
|
||||
|
||||
ref:b {
|
||||
color: green;
|
||||
}
|
||||
|
||||
ref:d {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
<div ref:foo/>
|
||||
|
||||
<style>
|
||||
ref:foo {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -1,99 +0,0 @@
|
||||
{
|
||||
"html": {
|
||||
"start": 0,
|
||||
"end": 14,
|
||||
"type": "Fragment",
|
||||
"children": [
|
||||
{
|
||||
"start": 0,
|
||||
"end": 14,
|
||||
"type": "Element",
|
||||
"name": "div",
|
||||
"attributes": [
|
||||
{
|
||||
"start": 5,
|
||||
"end": 12,
|
||||
"type": "Ref",
|
||||
"name": "foo",
|
||||
"modifiers": [],
|
||||
"expression": null
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"start": 14,
|
||||
"end": 16,
|
||||
"type": "Text",
|
||||
"data": "\n\n"
|
||||
}
|
||||
]
|
||||
},
|
||||
"css": [
|
||||
{
|
||||
"start": 16,
|
||||
"end": 60,
|
||||
"attributes": [],
|
||||
"children": [
|
||||
{
|
||||
"type": "Rule",
|
||||
"selector": {
|
||||
"type": "SelectorList",
|
||||
"children": [
|
||||
{
|
||||
"type": "Selector",
|
||||
"children": [
|
||||
{
|
||||
"type": "RefSelector",
|
||||
"start": 25,
|
||||
"end": 32,
|
||||
"name": "foo"
|
||||
}
|
||||
],
|
||||
"start": 25,
|
||||
"end": 32
|
||||
}
|
||||
],
|
||||
"start": 25,
|
||||
"end": 32
|
||||
},
|
||||
"block": {
|
||||
"type": "Block",
|
||||
"children": [
|
||||
{
|
||||
"type": "Declaration",
|
||||
"important": false,
|
||||
"property": "color",
|
||||
"value": {
|
||||
"type": "Value",
|
||||
"children": [
|
||||
{
|
||||
"type": "Identifier",
|
||||
"name": "red",
|
||||
"start": 44,
|
||||
"end": 47
|
||||
}
|
||||
],
|
||||
"start": 43,
|
||||
"end": 47
|
||||
},
|
||||
"start": 37,
|
||||
"end": 47
|
||||
}
|
||||
],
|
||||
"start": 33,
|
||||
"end": 51
|
||||
},
|
||||
"start": 25,
|
||||
"end": 51
|
||||
}
|
||||
],
|
||||
"content": {
|
||||
"start": 23,
|
||||
"end": 52,
|
||||
"styles": "\n\tref:foo {\n\t\tcolor: red;\n\t}\n"
|
||||
}
|
||||
}
|
||||
],
|
||||
"js": []
|
||||
}
|
||||
@ -1 +1 @@
|
||||
<canvas ref:foo></canvas>
|
||||
<canvas bind:this={foo}></canvas>
|
||||
@ -0,0 +1,15 @@
|
||||
[{
|
||||
"code": "invalid-ref-selector",
|
||||
"message": "ref selectors are no longer supported",
|
||||
"pos": 68,
|
||||
"start": {
|
||||
"line": 8,
|
||||
"column": 1,
|
||||
"character": 68
|
||||
},
|
||||
"end": {
|
||||
"line": 8,
|
||||
"column": 1,
|
||||
"character": 68
|
||||
}
|
||||
}]
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
let foo;
|
||||
</script>
|
||||
|
||||
<div bind:this={foo}></div>
|
||||
|
||||
<style>
|
||||
ref:foo {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
[{
|
||||
"code": "invalid-ref-directive",
|
||||
"message": "The ref directive is no longer supported — use `bind:this={foo}` instead",
|
||||
"pos": 5,
|
||||
"start": {
|
||||
"line": 1,
|
||||
"column": 5,
|
||||
"character": 5
|
||||
},
|
||||
"end": {
|
||||
"line": 1,
|
||||
"column": 5,
|
||||
"character": 5
|
||||
}
|
||||
}]
|
||||
@ -0,0 +1 @@
|
||||
<div ref:foo></div>
|
||||
@ -1,15 +0,0 @@
|
||||
[{
|
||||
"message": "Reference name 'foo-bar' is invalid — must be a valid identifier such as foo_bar",
|
||||
"start": {
|
||||
"line": 1,
|
||||
"column": 5,
|
||||
"character": 5
|
||||
},
|
||||
"end": {
|
||||
"line": 1,
|
||||
"column": 16,
|
||||
"character": 16
|
||||
},
|
||||
"pos": 5,
|
||||
"code": "invalid-reference-name"
|
||||
}]
|
||||
@ -1,8 +0,0 @@
|
||||
<div ref:foo-bar>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
ref:foo-bar {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue