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 * @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) { function read_attribute(parser) {
const start = parser.index; const start = parser.index;
@ -488,16 +488,16 @@ function read_attribute(parser) {
if (parser.eat('{')) { if (parser.eat('{')) {
parser.allow_whitespace(); parser.allow_whitespace();
if (parser.eat('@use')) { if (parser.eat('@attach')) {
parser.require_whitespace(); parser.require_whitespace();
const expression = read_expression(parser); const expression = read_expression(parser);
parser.allow_whitespace(); parser.allow_whitespace();
parser.eat('}', true); parser.eat('}', true);
/** @type {AST.UseTag} */ /** @type {AST.AttachTag} */
const use = { const use = {
type: 'UseTag', type: 'AttachTag',
start, start,
end: parser.index, end: parser.index,
expression expression

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

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

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

@ -82,7 +82,7 @@ export function RegularElement(node, context) {
/** @type {AST.StyleDirective[]} */ /** @type {AST.StyleDirective[]} */
const style_directives = []; 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 = []; const other_directives = [];
/** @type {ExpressionStatement[]} */ /** @type {ExpressionStatement[]} */
@ -153,7 +153,7 @@ export function RegularElement(node, context) {
other_directives.push(attribute); other_directives.push(attribute);
break; break;
case 'UseTag': case 'AttachTag':
other_directives.push(attribute); other_directives.push(attribute);
break; 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( push_prop(
b.prop( b.prop(
'init', 'init',
b.call('Symbol', b.literal('@use')), b.call('Symbol', b.literal('@attach')),
b.thunk(/** @type {Expression} */ (context.visit(attribute.expression))), b.thunk(/** @type {Expression} */ (context.visit(attribute.expression))),
true true
) )

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

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

@ -2,7 +2,7 @@
"css": null, "css": null,
"js": [], "js": [],
"start": 0, "start": 0,
"end": 51, "end": 57,
"type": "Root", "type": "Root",
"fragment": { "fragment": {
"type": "Fragment", "type": "Fragment",
@ -10,25 +10,25 @@
{ {
"type": "RegularElement", "type": "RegularElement",
"start": 0, "start": 0,
"end": 51, "end": 57,
"name": "div", "name": "div",
"attributes": [ "attributes": [
{ {
"type": "UseTag", "type": "AttachTag",
"start": 5, "start": 5,
"end": 24, "end": 27,
"expression": { "expression": {
"type": "ArrowFunctionExpression", "type": "ArrowFunctionExpression",
"start": 11, "start": 14,
"end": 23, "end": 26,
"loc": { "loc": {
"start": { "start": {
"line": 1, "line": 1,
"column": 11 "column": 14
}, },
"end": { "end": {
"line": 1, "line": 1,
"column": 23 "column": 26
} }
}, },
"id": null, "id": null,
@ -38,16 +38,16 @@
"params": [ "params": [
{ {
"type": "Identifier", "type": "Identifier",
"start": 12, "start": 15,
"end": 16, "end": 19,
"loc": { "loc": {
"start": { "start": {
"line": 1, "line": 1,
"column": 12 "column": 15
}, },
"end": { "end": {
"line": 1, "line": 1,
"column": 16 "column": 19
} }
}, },
"name": "node" "name": "node"
@ -55,16 +55,16 @@
], ],
"body": { "body": {
"type": "BlockStatement", "type": "BlockStatement",
"start": 21, "start": 24,
"end": 23, "end": 26,
"loc": { "loc": {
"start": { "start": {
"line": 1, "line": 1,
"column": 21 "column": 24
}, },
"end": { "end": {
"line": 1, "line": 1,
"column": 23 "column": 26
} }
}, },
"body": [] "body": []
@ -72,21 +72,21 @@
} }
}, },
{ {
"type": "UseTag", "type": "AttachTag",
"start": 25, "start": 28,
"end": 44, "end": 50,
"expression": { "expression": {
"type": "ArrowFunctionExpression", "type": "ArrowFunctionExpression",
"start": 31, "start": 37,
"end": 43, "end": 49,
"loc": { "loc": {
"start": { "start": {
"line": 1, "line": 1,
"column": 31 "column": 37
}, },
"end": { "end": {
"line": 1, "line": 1,
"column": 43 "column": 49
} }
}, },
"id": null, "id": null,
@ -96,16 +96,16 @@
"params": [ "params": [
{ {
"type": "Identifier", "type": "Identifier",
"start": 32, "start": 38,
"end": 36, "end": 42,
"loc": { "loc": {
"start": { "start": {
"line": 1, "line": 1,
"column": 32 "column": 38
}, },
"end": { "end": {
"line": 1, "line": 1,
"column": 36 "column": 42
} }
}, },
"name": "node" "name": "node"
@ -113,16 +113,16 @@
], ],
"body": { "body": {
"type": "BlockStatement", "type": "BlockStatement",
"start": 41, "start": 47,
"end": 43, "end": 49,
"loc": { "loc": {
"start": { "start": {
"line": 1, "line": 1,
"column": 41 "column": 47
}, },
"end": { "end": {
"line": 1, "line": 1,
"column": 43 "column": 49
} }
}, },
"body": [] "body": []
@ -138,4 +138,4 @@
] ]
}, },
"options": null "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'; import Child from './Child.svelte';
</script> </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); let value = $state(1);
</script> </script>
<div {@use (node) => node.textContent = value}></div> <div {@attach (node) => node.textContent = value}></div>
<button onclick={() => value += 1}>increment</button> <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