Skip to content

Commit c1b60de

Browse files
pushkinepushkine
authored
Use AST types from svelte instead of estree in htmlxtojsx (#926)
1 parent 0fd40f0 commit c1b60de

26 files changed

+118
-107
lines changed

‎packages/svelte2tsx/src/htmlxtojsx/index.ts‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { Node } from 'estree-walker';
21
import MagicString from 'magic-string';
32
import { walk } from 'svelte/compiler';
3+
import { TemplateNode, Text } from 'svelte/types/compiler/interfaces';
4+
import { Attribute, BaseDirective, BaseNode } from '../interfaces';
45
import { parseHtmlx } from '../utils/htmlxparser';
56
import { getSlotName } from '../utils/svelteAst';
67
import { handleActionDirective } from './nodes/action-directive';
@@ -26,7 +27,7 @@ import { handleText } from './nodes/text';
2627
import { handleTransitionDirective } from './nodes/transition-directive';
2728
import { usesLet } from './utils/node-utils';
2829

29-
type Walker = (node: Node, parent: Node, prop: string, index: number) => void;
30+
type Walker = (node: TemplateNode, parent: BaseNode, prop: string, index: number) => void;
3031

3132
function stripDoctype(str: MagicString): void {
3233
const regex = /<!doctype(.+?)>(\n)?/i;
@@ -42,7 +43,7 @@ function stripDoctype(str: MagicString): void {
4243
*/
4344
export function convertHtmlxToJsx(
4445
str: MagicString,
45-
ast: Node,
46+
ast: TemplateNode,
4647
onWalk: Walker = null,
4748
onLeave: Walker = null
4849
): void {
@@ -56,7 +57,7 @@ export function convertHtmlxToJsx(
5657
let ifScope = new IfScope(templateScopeManager);
5758

5859
walk(ast, {
59-
enter: (node: Node, parent: Node, prop: string, index: number) => {
60+
enter: (node: TemplateNode, parent: BaseNode, prop: string, index: number) => {
6061
try {
6162
switch (node.type) {
6263
case 'IfBlock':
@@ -123,25 +124,25 @@ export function convertHtmlxToJsx(
123124
handleComment(str, node);
124125
break;
125126
case 'Binding':
126-
handleBinding(htmlx, str, node, parent);
127+
handleBinding(htmlx, str, node as BaseDirective, parent);
127128
break;
128129
case 'Class':
129-
handleClassDirective(str, node);
130+
handleClassDirective(str, node as BaseDirective);
130131
break;
131132
case 'Action':
132-
handleActionDirective(htmlx, str, node, parent);
133+
handleActionDirective(htmlx, str, node as BaseDirective, parent);
133134
break;
134135
case 'Transition':
135-
handleTransitionDirective(htmlx, str, node, parent);
136+
handleTransitionDirective(htmlx, str, node as BaseDirective, parent);
136137
break;
137138
case 'Animation':
138-
handleAnimateDirective(htmlx, str, node, parent);
139+
handleAnimateDirective(htmlx, str, node as BaseDirective, parent);
139140
break;
140141
case 'Attribute':
141-
handleAttribute(htmlx, str, node, parent);
142+
handleAttribute(htmlx, str, node as Attribute, parent);
142143
break;
143144
case 'EventHandler':
144-
handleEventHandler(htmlx, str, node, parent);
145+
handleEventHandler(htmlx, str, node as BaseDirective, parent);
145146
break;
146147
case 'Options':
147148
handleSvelteTag(htmlx, str, node);
@@ -171,7 +172,7 @@ export function convertHtmlxToJsx(
171172
}
172173
break;
173174
case 'Text':
174-
handleText(str, node);
175+
handleText(str, node as Text);
175176
break;
176177
}
177178
if (onWalk) {
@@ -183,7 +184,7 @@ export function convertHtmlxToJsx(
183184
}
184185
},
185186

186-
leave: (node: Node, parent: Node, prop: string, index: number) => {
187+
leave: (node: TemplateNode, parent: BaseNode, prop: string, index: number) => {
187188
try {
188189
switch (node.type) {
189190
case 'IfBlock':

‎packages/svelte2tsx/src/htmlxtojsx/nodes/action-directive.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import MagicString from 'magic-string';
2-
import { Node } from 'estree-walker';
32
import { isQuote } from '../utils/node-utils';
3+
import { BaseDirective, BaseNode } from '../../interfaces';
44

55
/**
66
* use:xxx={params} ---> {...__sveltets_ensureAction(xxx(__sveltets_mapElementTag('ParentNodeName'),(params)))}
77
*/
88
export function handleActionDirective(
99
htmlx: string,
1010
str: MagicString,
11-
attr: Node,
12-
parent: Node
11+
attr: BaseDirective,
12+
parent: BaseNode
1313
): void {
1414
str.overwrite(attr.start, attr.start + 'use:'.length, '{...__sveltets_ensureAction(');
1515

‎packages/svelte2tsx/src/htmlxtojsx/nodes/animation-directive.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import MagicString from 'magic-string';
2-
import { Node } from 'estree-walker';
32
import { isQuote } from '../utils/node-utils';
3+
import { BaseDirective, BaseNode } from '../../interfaces';
44

55
/**
66
* animate:xxx(yyy) ---> {...__sveltets_ensureAnimation(xxx(__sveltets_mapElementTag('..'),__sveltets_AnimationMove,(yyy)))}
77
*/
88
export function handleAnimateDirective(
99
htmlx: string,
1010
str: MagicString,
11-
attr: Node,
12-
parent: Node
11+
attr: BaseDirective,
12+
parent: BaseNode
1313
): void {
1414
str.overwrite(
1515
attr.start,

‎packages/svelte2tsx/src/htmlxtojsx/nodes/attribute.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import MagicString from 'magic-string';
2-
import { Node } from 'estree-walker';
32
import svgAttributes from '../svgattributes';
43
import { isQuote } from '../utils/node-utils';
4+
import { Attribute, BaseNode } from '../../interfaces';
55

66
/**
77
* List taken from `svelte-jsx.d.ts` by searching for all attributes of type number
@@ -35,14 +35,19 @@ const numberOnlyAttributes = new Set([
3535
* - lowercase DOM attributes
3636
* - multi-value handling
3737
*/
38-
export function handleAttribute(htmlx: string, str: MagicString, attr: Node, parent: Node): void {
38+
export function handleAttribute(
39+
htmlx: string,
40+
str: MagicString,
41+
attr: Attribute,
42+
parent: BaseNode
43+
): void {
3944
let transformedFromDirectiveOrNamespace = false;
4045

4146
//if we are on an "element" we are case insensitive, lowercase to match our JSX
4247
if (parent.type == 'Element') {
4348
const sapperLinkActions = ['sapper:prefetch', 'sapper:noscroll'];
4449
const sveltekitLinkActions = ['sveltekit:prefetch', 'sveltekit:noscroll'];
45-
//skip Attribute shorthand, that is handled below
50+
// skip Attribute shorthand, that is handled below
4651
if (
4752
(attr.value !== true &&
4853
!(

‎packages/svelte2tsx/src/htmlxtojsx/nodes/await.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import MagicString from 'magic-string';
2-
import { Node } from 'estree-walker';
32
import { IfScope } from './if-scope';
43
import { TemplateScopeManager } from './template-scope';
54
import { surroundWithIgnoreComments } from '../../utils/ignore';
5+
import { BaseNode } from '../../interfaces';
66

77
/**
88
* Transform {#await ...} into something JSX understands
99
*/
1010
export function handleAwait(
1111
htmlx: string,
1212
str: MagicString,
13-
awaitBlock: Node,
13+
awaitBlock: BaseNode,
1414
ifScope: IfScope,
1515
templateScopeManager: TemplateScopeManager
1616
): void {
@@ -33,7 +33,7 @@ export function handleAwait(
3333
}
3434

3535
export function handleAwaitPending(
36-
awaitBlock: Node,
36+
awaitBlock: BaseNode,
3737
htmlx: string,
3838
str: MagicString,
3939
ifScope: IfScope
@@ -61,7 +61,7 @@ export function handleAwaitPending(
6161
}
6262

6363
export function handleAwaitThen(
64-
awaitBlock: Node,
64+
awaitBlock: BaseNode,
6565
htmlx: string,
6666
str: MagicString,
6767
ifScope: IfScope
@@ -106,7 +106,7 @@ export function handleAwaitThen(
106106
}
107107

108108
export function handleAwaitCatch(
109-
awaitBlock: Node,
109+
awaitBlock: BaseNode,
110110
htmlx: string,
111111
str: MagicString,
112112
ifScope: IfScope

‎packages/svelte2tsx/src/htmlxtojsx/nodes/binding.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import MagicString from 'magic-string';
2-
import { Node } from 'estree-walker';
32
import { isShortHandAttribute, getThisType, isQuote } from '../utils/node-utils';
3+
import { BaseDirective, BaseNode } from '../../interfaces';
44

55
const oneWayBindingAttributes: Map<string, string> = new Map(
66
['clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight']
@@ -16,7 +16,12 @@ const oneWayBindingAttributes: Map<string, string> = new Map(
1616
/**
1717
* Transform bind:xxx into something that conforms to JSX
1818
*/
19-
export function handleBinding(htmlx: string, str: MagicString, attr: Node, el: Node): void {
19+
export function handleBinding(
20+
htmlx: string,
21+
str: MagicString,
22+
attr: BaseDirective,
23+
el: BaseNode
24+
): void {
2025
//bind group on input
2126
if (attr.name == 'group' && el.name == 'input') {
2227
str.remove(attr.start, attr.expression.start);

‎packages/svelte2tsx/src/htmlxtojsx/nodes/class-directive.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import MagicString from 'magic-string';
2-
import { Node } from 'estree-walker';
2+
import { BaseDirective } from '../../interfaces';
33

44
/**
55
* class:xx={yyy} ---> {...__sveltets_ensureType(Boolean, !!(yyy))}
66
*/
7-
export function handleClassDirective(str: MagicString, attr: Node): void {
7+
export function handleClassDirective(str: MagicString, attr: BaseDirective): void {
88
str.overwrite(attr.start, attr.expression.start, '{...__sveltets_ensureType(Boolean, !!(');
99
const endBrackets = '))}';
1010
if (attr.end !== attr.expression.end) {

‎packages/svelte2tsx/src/htmlxtojsx/nodes/comment.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import MagicString from 'magic-string';
2-
import { Node } from 'estree-walker';
2+
import { BaseNode } from '../../interfaces';
33

44
/**
55
* Removes comment
66
*/
7-
export function handleComment(str: MagicString, node: Node): void {
7+
export function handleComment(str: MagicString, node: BaseNode): void {
88
str.remove(node.start, node.end);
99
}

‎packages/svelte2tsx/src/htmlxtojsx/nodes/component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import MagicString from 'magic-string';
2-
import { Node } from 'estree-walker';
32
import { getSlotName } from '../../utils/svelteAst';
43
import { handleSlot } from './slot';
54
import { IfScope } from './if-scope';
65
import { TemplateScope } from '../nodes/template-scope';
6+
import { BaseNode } from '../../interfaces';
77

88
/**
99
* Handle `<svelte:self>` and slot-specific transformations.
1010
*/
1111
export function handleComponent(
1212
htmlx: string,
1313
str: MagicString,
14-
el: Node,
15-
parent: Node,
14+
el: BaseNode,
15+
parent: BaseNode,
1616
ifScope: IfScope,
1717
templateScope: TemplateScope
1818
): void {

‎packages/svelte2tsx/src/htmlxtojsx/nodes/debug.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { Node } from 'estree-walker';
21
import MagicString from 'magic-string';
2+
import { BaseNode } from '../../interfaces';
33

44
/**
55
* {@debug a} ---> {a}
66
* {@debug a, b} ---> {a}{b}
77
* tsx won't accept commas, must split
88
*/
9-
export function handleDebug(_htmlx: string, str: MagicString, debugBlock: Node): void {
9+
export function handleDebug(_htmlx: string, str: MagicString, debugBlock: BaseNode): void {
1010
let cursor = debugBlock.start;
11-
for (const identifier of debugBlock.identifiers as Node[]) {
11+
for (const identifier of debugBlock.identifiers as BaseNode[]) {
1212
str.remove(cursor, identifier.start);
1313
str.prependLeft(identifier.start, '{');
1414
str.prependLeft(identifier.end, '}');

0 commit comments

Comments
 (0)