mirror of https://github.com/sveltejs/svelte
[fix] adjust style directive AST (#7127)
- deduplicate type name: Is now "StyleDirective" - Don't transform value array to template literal in the AST phase but in the compiler phase. This ensures other tools know what the raw output was and that start/end positions are availablepull/7135/head
Simon H
4 years ago
committed by
GitHub
parent
4ae20d7fdf
commit
7044a32a2b
@ -1,22 +0,0 @@
|
||||
import Node from './shared/Node';
|
||||
import Expression from './shared/Expression';
|
||||
import { TemplateNode } from '../../interfaces';
|
||||
import TemplateScope from './shared/TemplateScope';
|
||||
import Component from '../Component';
|
||||
|
||||
export default class Style extends Node {
|
||||
type: 'Style';
|
||||
name: string;
|
||||
expression: Expression;
|
||||
should_cache: boolean;
|
||||
|
||||
constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
|
||||
super(component, parent, scope, info);
|
||||
|
||||
this.name = info.name;
|
||||
|
||||
this.expression = new Expression(component, this, scope, info.expression);
|
||||
|
||||
this.should_cache = info.expression.type === 'TemplateLiteral' && info.expression.expressions.length > 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
import { TemplateNode } from '../../interfaces';
|
||||
import Component from '../Component';
|
||||
import { nodes_to_template_literal } from '../utils/nodes_to_template_literal';
|
||||
import Expression from './shared/Expression';
|
||||
import Node from './shared/Node';
|
||||
import TemplateScope from './shared/TemplateScope';
|
||||
|
||||
export default class StyleDirective extends Node {
|
||||
type: 'StyleDirective';
|
||||
name: string;
|
||||
expression: Expression;
|
||||
should_cache: boolean;
|
||||
|
||||
constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
|
||||
super(component, parent, scope, info);
|
||||
|
||||
this.name = info.name;
|
||||
|
||||
// Convert the value array to an expression so it's easier to handle
|
||||
// the StyleDirective going forward.
|
||||
if (info.value === true || (info.value.length === 1 && info.value[0].type === 'MustacheTag')) {
|
||||
const identifier = info.value === true
|
||||
? {
|
||||
type: 'Identifier',
|
||||
start: info.end - info.name.length,
|
||||
end: info.end,
|
||||
name: info.name
|
||||
} as any
|
||||
: info.value[0].expression;
|
||||
this.expression = new Expression(component, this, scope, identifier);
|
||||
this.should_cache = false;
|
||||
} else {
|
||||
const raw_expression = nodes_to_template_literal(info.value);
|
||||
this.expression = new Expression(component, this, scope, raw_expression);
|
||||
this.should_cache = raw_expression.expressions.length > 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
import { TemplateElement, TemplateLiteral } from 'estree';
|
||||
import { MustacheTag, Text } from '../../interfaces';
|
||||
|
||||
/**
|
||||
* Transforms a list of Text and MustacheTags into a TemplateLiteral expression.
|
||||
* Start/End positions on the elements of the expression are not set.
|
||||
*/
|
||||
export function nodes_to_template_literal(value: Array<Text | MustacheTag>): TemplateLiteral {
|
||||
const literal: TemplateLiteral = {
|
||||
type: 'TemplateLiteral',
|
||||
expressions: [],
|
||||
quasis: []
|
||||
};
|
||||
|
||||
let quasi: TemplateElement = {
|
||||
type: 'TemplateElement',
|
||||
value: { raw: '', cooked: null },
|
||||
tail: false
|
||||
};
|
||||
|
||||
value.forEach((node) => {
|
||||
if (node.type === 'Text') {
|
||||
quasi.value.raw += node.raw;
|
||||
} else if (node.type === 'MustacheTag') {
|
||||
literal.quasis.push(quasi);
|
||||
literal.expressions.push(node.expression as any);
|
||||
quasi = {
|
||||
type: 'TemplateElement',
|
||||
value: { raw: '', cooked: null },
|
||||
tail: false
|
||||
};
|
||||
}
|
||||
});
|
||||
quasi.tail = true;
|
||||
literal.quasis.push(quasi);
|
||||
return literal;
|
||||
}
|
||||
@ -1 +1,7 @@
|
||||
<div style:color="red"></div>
|
||||
<div style:color="red"></div>
|
||||
<div style:color='red'></div>
|
||||
<div style:color=red></div>
|
||||
<div style:color="red{variable}"></div>
|
||||
<div style:color='red{variable}'></div>
|
||||
<div style:color=red{variable}></div>
|
||||
<div style:color={`template${literal}`}></div>
|
||||
Loading…
Reference in new issue