rename to attach

pull/15045/head
Rich Harris 9 months ago
parent 2329284d92
commit 0c914eb185

@ -480,7 +480,7 @@ function read_static_attribute(parser) {
/**
* @param {Parser} parser
* @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.UseTag | null}
* @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.AttachTag | null}
*/
function read_attribute(parser) {
const start = parser.index;
@ -488,16 +488,16 @@ function read_attribute(parser) {
if (parser.eat('{')) {
parser.allow_whitespace();
if (parser.eat('@use')) {
if (parser.eat('@attach')) {
parser.require_whitespace();
const expression = read_expression(parser);
parser.allow_whitespace();
parser.eat('}', true);
/** @type {AST.UseTag} */
/** @type {AST.AttachTag} */
const use = {
type: 'UseTag',
type: 'AttachTag',
start,
end: parser.index,
expression

@ -75,7 +75,7 @@ export function visit_component(node, context) {
attribute.type !== 'LetDirective' &&
attribute.type !== 'OnDirective' &&
attribute.type !== 'BindDirective' &&
attribute.type !== 'UseTag'
attribute.type !== 'AttachTag'
) {
e.component_invalid_directive(attribute);
}

@ -56,7 +56,7 @@ import { TitleElement } from './visitors/TitleElement.js';
import { TransitionDirective } from './visitors/TransitionDirective.js';
import { UpdateExpression } from './visitors/UpdateExpression.js';
import { UseDirective } from './visitors/UseDirective.js';
import { UseTag } from './visitors/UseTag.js';
import { AttachTag } from './visitors/AttachTag.js';
import { VariableDeclaration } from './visitors/VariableDeclaration.js';
/** @type {Visitors} */
@ -132,7 +132,7 @@ const visitors = {
TransitionDirective,
UpdateExpression,
UseDirective,
UseTag,
AttachTag,
VariableDeclaration
};

@ -4,10 +4,10 @@
import * as b from '../../../../utils/builders.js';
/**
* @param {AST.UseTag} node
* @param {AST.AttachTag} node
* @param {ComponentContext} context
*/
export function UseTag(node, context) {
export function AttachTag(node, context) {
context.state.init.push(
b.stmt(
b.call(

@ -82,7 +82,7 @@ export function RegularElement(node, context) {
/** @type {AST.StyleDirective[]} */
const style_directives = [];
/** @type {Array<AST.AnimateDirective | AST.BindDirective | AST.OnDirective | AST.TransitionDirective | AST.UseDirective | AST.UseTag>} */
/** @type {Array<AST.AnimateDirective | AST.BindDirective | AST.OnDirective | AST.TransitionDirective | AST.UseDirective | AST.AttachTag>} */
const other_directives = [];
/** @type {ExpressionStatement[]} */
@ -153,7 +153,7 @@ export function RegularElement(node, context) {
other_directives.push(attribute);
break;
case 'UseTag':
case 'AttachTag':
other_directives.push(attribute);
break;
}

@ -252,11 +252,11 @@ export function build_component(node, component_name, context, anchor = context.
);
}
}
} else if (attribute.type === 'UseTag') {
} else if (attribute.type === 'AttachTag') {
push_prop(
b.prop(
'init',
b.call('Symbol', b.literal('@use')),
b.call('Symbol', b.literal('@attach')),
b.thunk(/** @type {Expression} */ (context.visit(attribute.expression))),
true
)

@ -174,9 +174,9 @@ export namespace AST {
};
}
/** A `{@use foo(...)} tag */
export interface UseTag extends BaseNode {
type: 'UseTag';
/** A `{@attach foo(...)} tag */
export interface AttachTag extends BaseNode {
type: 'AttachTag';
expression: Expression;
}
@ -279,7 +279,7 @@ export namespace AST {
interface BaseElement extends BaseNode {
name: string;
attributes: Array<Attribute | SpreadAttribute | Directive | UseTag>;
attributes: Array<Attribute | SpreadAttribute | Directive | AttachTag>;
fragment: Fragment;
}
@ -553,7 +553,7 @@ export namespace AST {
| AST.Attribute
| AST.SpreadAttribute
| Directive
| AST.UseTag
| AST.AttachTag
| AST.Comment
| Block;

@ -1 +1 @@
<div {@use (node) => {}} {@use (node) => {}}></div>
<div {@attach (node) => {}} {@attach (node) => {}}></div>

@ -2,7 +2,7 @@
"css": null,
"js": [],
"start": 0,
"end": 51,
"end": 57,
"type": "Root",
"fragment": {
"type": "Fragment",
@ -10,25 +10,25 @@
{
"type": "RegularElement",
"start": 0,
"end": 51,
"end": 57,
"name": "div",
"attributes": [
{
"type": "UseTag",
"type": "AttachTag",
"start": 5,
"end": 24,
"end": 27,
"expression": {
"type": "ArrowFunctionExpression",
"start": 11,
"end": 23,
"start": 14,
"end": 26,
"loc": {
"start": {
"line": 1,
"column": 11
"column": 14
},
"end": {
"line": 1,
"column": 23
"column": 26
}
},
"id": null,
@ -38,16 +38,16 @@
"params": [
{
"type": "Identifier",
"start": 12,
"end": 16,
"start": 15,
"end": 19,
"loc": {
"start": {
"line": 1,
"column": 12
"column": 15
},
"end": {
"line": 1,
"column": 16
"column": 19
}
},
"name": "node"
@ -55,16 +55,16 @@
],
"body": {
"type": "BlockStatement",
"start": 21,
"end": 23,
"start": 24,
"end": 26,
"loc": {
"start": {
"line": 1,
"column": 21
"column": 24
},
"end": {
"line": 1,
"column": 23
"column": 26
}
},
"body": []
@ -72,21 +72,21 @@
}
},
{
"type": "UseTag",
"start": 25,
"end": 44,
"type": "AttachTag",
"start": 28,
"end": 50,
"expression": {
"type": "ArrowFunctionExpression",
"start": 31,
"end": 43,
"start": 37,
"end": 49,
"loc": {
"start": {
"line": 1,
"column": 31
"column": 37
},
"end": {
"line": 1,
"column": 43
"column": 49
}
},
"id": null,
@ -96,16 +96,16 @@
"params": [
{
"type": "Identifier",
"start": 32,
"end": 36,
"start": 38,
"end": 42,
"loc": {
"start": {
"line": 1,
"column": 32
"column": 38
},
"end": {
"line": 1,
"column": 36
"column": 42
}
},
"name": "node"
@ -113,16 +113,16 @@
],
"body": {
"type": "BlockStatement",
"start": 41,
"end": 43,
"start": 47,
"end": 49,
"loc": {
"start": {
"line": 1,
"column": 41
"column": 47
},
"end": {
"line": 1,
"column": 43
"column": 49
}
},
"body": []
@ -138,4 +138,4 @@
]
},
"options": null
}
}

@ -1 +1 @@
<div {@use (node) => node.textContent = node.nodeName}></div>
<div {@attach (node) => node.textContent = node.nodeName}></div>

@ -2,4 +2,4 @@
import Child from './Child.svelte';
</script>
<Child {@use (node) => node.textContent = 'set from component'} />
<Child {@attach (node) => node.textContent = 'set from component'} />

@ -2,5 +2,5 @@
let value = $state(1);
</script>
<div {@use (node) => node.textContent = value}></div>
<div {@attach (node) => node.textContent = value}></div>
<button onclick={() => value += 1}>increment</button>

@ -1 +1 @@
<svelte:element this={'div'} {@use (node) => node.textContent = node.nodeName}></svelte:element>
<svelte:element this={'div'} {@attach (node) => node.textContent = node.nodeName}></svelte:element>

Loading…
Cancel
Save