mirror of https://github.com/sveltejs/svelte
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