diff --git a/src/compile/css/Selector.ts b/src/compile/css/Selector.ts index d6323c6efe..a6ee79e181 100644 --- a/src/compile/css/Selector.ts +++ b/src/compile/css/Selector.ts @@ -71,18 +71,6 @@ export default class Selector { break; } - - i = block.selectors.length; - while (i--) { - const selector = block.selectors[i]; - - if (selector.type === 'RefSelector') { - code.overwrite(selector.start, selector.end, `.svelte-ref-${selector.name}`, { - contentOnly: true, - storeName: false - }); - } - } } this.blocks.forEach((block, i) => { @@ -173,15 +161,6 @@ function applySelector(stylesheet: Stylesheet, blocks: Block[], node: Node, stac if (node.name.toLowerCase() !== selector.name.toLowerCase() && selector.name !== '*') return false; } - else if (selector.type === 'RefSelector') { - if (node.ref && node.ref.name === selector.name) { - stylesheet.nodesWithRefCssClass.set(selector.name, node); - toEncapsulate.push({ node, block }); - return true; - } - return; - } - else { // bail. TODO figure out what these could be toEncapsulate.push({ node, block }); diff --git a/src/compile/css/Stylesheet.ts b/src/compile/css/Stylesheet.ts index dcb3fc5a7f..96e959c99d 100644 --- a/src/compile/css/Stylesheet.ts +++ b/src/compile/css/Stylesheet.ts @@ -342,9 +342,6 @@ export default class Stylesheet { this.nodesWithCssClass.forEach((node: Node) => { node.addCssClass(); }); - this.nodesWithRefCssClass.forEach((node: Node, name: String) => { - node.addCssClass(`svelte-ref-${name}`); - }) } render(cssOutputFilename: string, shouldTransformSelectors: boolean) { diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts index b2405ce8a9..e626e25148 100644 --- a/src/compile/nodes/Element.ts +++ b/src/compile/nodes/Element.ts @@ -13,7 +13,6 @@ import { namespaces } from '../../utils/namespaces'; import mapChildren from './shared/mapChildren'; import { dimensions } from '../../utils/patterns'; import fuzzymatch from '../../utils/fuzzymatch'; -import Ref from './Ref'; import list from '../../utils/list'; const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/; @@ -86,8 +85,6 @@ export default class Element extends Node { outro?: Transition = null; animation?: Animation = null; children: Node[]; - - ref: Ref; namespace: string; constructor(component, parent, scope, info: any) { @@ -181,10 +178,6 @@ export default class Element extends Node { this.animation = new Animation(component, this, scope, node); break; - case 'Ref': - this.ref = new Ref(component, this, scope, node); - break; - default: throw new Error(`Not implemented: ${node.type}`); } diff --git a/src/compile/nodes/InlineComponent.ts b/src/compile/nodes/InlineComponent.ts index 8380ff43cf..1aa07bdfc2 100644 --- a/src/compile/nodes/InlineComponent.ts +++ b/src/compile/nodes/InlineComponent.ts @@ -5,7 +5,6 @@ import Binding from './Binding'; import EventHandler from './EventHandler'; import Expression from './shared/Expression'; import Component from '../Component'; -import Ref from './Ref'; export default class InlineComponent extends Node { type: 'InlineComponent'; @@ -15,7 +14,6 @@ export default class InlineComponent extends Node { bindings: Binding[]; handlers: EventHandler[]; children: Node[]; - ref: Ref; constructor(component: Component, parent, scope, info) { super(component, parent, scope, info); @@ -62,10 +60,6 @@ export default class InlineComponent extends Node { this.handlers.push(new EventHandler(component, this, scope, node)); break; - case 'Ref': - this.ref = new Ref(component, this, scope, node); - break; - case 'Transition': component.error(node, { code: `invalid-transition`, diff --git a/src/compile/nodes/Ref.ts b/src/compile/nodes/Ref.ts deleted file mode 100644 index 57100a8f26..0000000000 --- a/src/compile/nodes/Ref.ts +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/compile/render-dom/wrappers/InlineComponent/index.ts b/src/compile/render-dom/wrappers/InlineComponent/index.ts index 9bc0e53b47..a73a23b8e4 100644 --- a/src/compile/render-dom/wrappers/InlineComponent/index.ts +++ b/src/compile/render-dom/wrappers/InlineComponent/index.ts @@ -345,7 +345,6 @@ export default class InlineComponentWrapper extends Wrapper { block.builders.mount.addBlock(deindent` if (${name}) { @mount_component(${name}, ${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'}); - ${this.node.ref && `#component.$$.refs.${this.node.ref.name} = ${name};`} } `); @@ -381,15 +380,8 @@ export default class InlineComponentWrapper extends Wrapper { ${this.node.handlers.map(handler => deindent` ${name}.$on("${handler.name}", ${handler.var}); `)} - - ${this.node.ref && `#component.$$.refs.${this.node.ref.name} = ${name};`} } else { ${name} = null; - ${this.node.ref && deindent` - if (#component.$$.refs.${this.node.ref.name} === ${name}) { - #component.$$.refs.${this.node.ref.name} = null; - #component.$$.inject_refs(#component.$$.refs); - }`} } } `); @@ -418,8 +410,6 @@ export default class InlineComponentWrapper extends Wrapper { ${munged_bindings} ${munged_handlers} - - ${this.node.ref && `#component.$$.refs.${this.node.ref.name} = ${name};`} `); block.builders.create.addLine(`${name}.$$.fragment.c();`); @@ -444,12 +434,6 @@ export default class InlineComponentWrapper extends Wrapper { block.builders.destroy.addBlock(deindent` ${name}.$destroy(${parentNode ? '' : 'detach'}); - ${this.node.ref && deindent` - if (#component.$$.refs.${this.node.ref.name} === ${name}) { - #component.$$.refs.${this.node.ref.name} = null; - #component.$$.inject_refs(#component.$$.refs); - } - `} `); } diff --git a/src/parse/read/style.ts b/src/parse/read/style.ts index 2cca2c425a..8006706267 100644 --- a/src/parse/read/style.ts +++ b/src/parse/read/style.ts @@ -38,12 +38,10 @@ export default function readStyle(parser: Parser, start: number, attributes: Nod const b = node.children[i + 1]; if (isRefSelector(a, b)) { - node.children.splice(i, 2, { - type: 'RefSelector', - start: a.loc.start.offset, - end: b.loc.end.offset, - name: b.name - }); + parser.error({ + code: `invalid-ref-selector`, + message: 'ref selectors are no longer supported' + }, a.loc.start.offset); } } } diff --git a/src/parse/state/tag.ts b/src/parse/state/tag.ts index 2b4aeaba1d..43e685017b 100644 --- a/src/parse/state/tag.ts +++ b/src/parse/state/tag.ts @@ -390,6 +390,13 @@ function readAttribute(parser: Parser, uniqueNames: Set) { if (type) { const [directive_name, ...modifiers] = name.slice(colon_index + 1).split('|'); + if (type === 'Ref') { + parser.error({ + code: `invalid-ref-directive`, + message: `The ref directive is no longer supported — use \`bind:this={${directive_name}}\` instead` + }, start); + } + if (value[0]) { if (value.length > 1 || value[0].type === 'Text') { parser.error({ diff --git a/test/css/samples/refs-qualified/_config.js b/test/css/samples/refs-qualified/_config.js deleted file mode 100644 index bc90dafaec..0000000000 --- a/test/css/samples/refs-qualified/_config.js +++ /dev/null @@ -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: }` - }] -}; \ No newline at end of file diff --git a/test/css/samples/refs-qualified/expected.css b/test/css/samples/refs-qualified/expected.css deleted file mode 100644 index 9872b67fed..0000000000 --- a/test/css/samples/refs-qualified/expected.css +++ /dev/null @@ -1 +0,0 @@ -.svelte-ref-button.active.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/refs-qualified/expected.html b/test/css/samples/refs-qualified/expected.html deleted file mode 100644 index 06ddcc43ef..0000000000 --- a/test/css/samples/refs-qualified/expected.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/test/css/samples/refs-qualified/input.html b/test/css/samples/refs-qualified/input.html deleted file mode 100644 index 08e31b748a..0000000000 --- a/test/css/samples/refs-qualified/input.html +++ /dev/null @@ -1,20 +0,0 @@ - - -{#if active} - -{:else} - -{/if} - - \ No newline at end of file diff --git a/test/css/samples/refs/_config.js b/test/css/samples/refs/_config.js deleted file mode 100644 index 76252a8a5f..0000000000 --- a/test/css/samples/refs/_config.js +++ /dev/null @@ -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: }` - }] -}; \ No newline at end of file diff --git a/test/css/samples/refs/expected.css b/test/css/samples/refs/expected.css deleted file mode 100644 index 2ab337cd2c..0000000000 --- a/test/css/samples/refs/expected.css +++ /dev/null @@ -1 +0,0 @@ -.svelte-ref-a.svelte-xyz{color:red}.svelte-ref-b.svelte-xyz{color:green} \ No newline at end of file diff --git a/test/css/samples/refs/expected.html b/test/css/samples/refs/expected.html deleted file mode 100644 index bc892a94e1..0000000000 --- a/test/css/samples/refs/expected.html +++ /dev/null @@ -1,3 +0,0 @@ -
-
-
\ No newline at end of file diff --git a/test/css/samples/refs/input.html b/test/css/samples/refs/input.html deleted file mode 100644 index a5d1156c5a..0000000000 --- a/test/css/samples/refs/input.html +++ /dev/null @@ -1,17 +0,0 @@ -
-
-
- - \ No newline at end of file diff --git a/test/validator/samples/ref-not-supported-in-css/errors.json b/test/validator/samples/ref-not-supported-in-css/errors.json new file mode 100644 index 0000000000..3227c14cf7 --- /dev/null +++ b/test/validator/samples/ref-not-supported-in-css/errors.json @@ -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 + } +}] \ No newline at end of file diff --git a/test/validator/samples/ref-not-supported-in-css/input.html b/test/validator/samples/ref-not-supported-in-css/input.html new file mode 100644 index 0000000000..dcd6974ef1 --- /dev/null +++ b/test/validator/samples/ref-not-supported-in-css/input.html @@ -0,0 +1,11 @@ + + +
+ + \ No newline at end of file diff --git a/test/validator/samples/ref-not-supported/errors.json b/test/validator/samples/ref-not-supported/errors.json new file mode 100644 index 0000000000..43c8c07615 --- /dev/null +++ b/test/validator/samples/ref-not-supported/errors.json @@ -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 + } +}] \ No newline at end of file diff --git a/test/validator/samples/ref-not-supported/input.html b/test/validator/samples/ref-not-supported/input.html new file mode 100644 index 0000000000..97e43ab90a --- /dev/null +++ b/test/validator/samples/ref-not-supported/input.html @@ -0,0 +1 @@ +
\ No newline at end of file