|
|
|
|
@ -0,0 +1,865 @@
|
|
|
|
|
/** @import { AST } from '#compiler'; */
|
|
|
|
|
/** @import { Context, Visitors } from 'esrap' */
|
|
|
|
|
import * as esrap from 'esrap';
|
|
|
|
|
import ts from 'esrap/languages/ts';
|
|
|
|
|
import { is_void } from '../../utils.js';
|
|
|
|
|
|
|
|
|
|
/** Threshold for when content should be formatted on separate lines */
|
|
|
|
|
const LINE_BREAK_THRESHOLD = 50;
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* `print` converts a Svelte AST node back into Svelte source code.
|
|
|
|
|
* It is primarily intended for tools that parse and transform components using the compiler’s modern AST representation.
|
|
|
|
|
*
|
|
|
|
|
* `print(ast)` requires an AST node produced by parse with modern: true, or any sub-node within that modern AST.
|
|
|
|
|
* The result contains the generated source and a corresponding source map.
|
|
|
|
|
* The output is valid Svelte, but formatting details such as whitespace or quoting may differ from the original.
|
|
|
|
|
* @param {AST.SvelteNode} ast
|
|
|
|
|
* @param {import('./types.js').Options | undefined} options
|
|
|
|
|
*/
|
|
|
|
|
export function print(ast, options = undefined) {
|
|
|
|
|
return esrap.print(
|
|
|
|
|
ast,
|
|
|
|
|
/** @type {Visitors<AST.SvelteNode>} */ ({
|
|
|
|
|
...ts({
|
|
|
|
|
comments: ast.type === 'Root' ? ast.comments : [],
|
|
|
|
|
getLeadingComments: options?.getLeadingComments,
|
|
|
|
|
getTrailingComments: options?.getTrailingComments
|
|
|
|
|
}),
|
|
|
|
|
...svelte_visitors,
|
|
|
|
|
...css_visitors
|
|
|
|
|
})
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param {Context} context
|
|
|
|
|
* @param {AST.SvelteNode} node
|
|
|
|
|
* @param {boolean} allow_inline
|
|
|
|
|
*/
|
|
|
|
|
function block(context, node, allow_inline = false) {
|
|
|
|
|
const child_context = context.new();
|
|
|
|
|
child_context.visit(node);
|
|
|
|
|
|
|
|
|
|
if (child_context.empty()) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (allow_inline && !child_context.multiline) {
|
|
|
|
|
context.append(child_context);
|
|
|
|
|
} else {
|
|
|
|
|
context.indent();
|
|
|
|
|
context.newline();
|
|
|
|
|
context.append(child_context);
|
|
|
|
|
context.dedent();
|
|
|
|
|
context.newline();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param {AST.BaseElement['attributes']} attributes
|
|
|
|
|
* @param {Context} context
|
|
|
|
|
* @returns {boolean} true if attributes were formatted on multiple lines
|
|
|
|
|
*/
|
|
|
|
|
function attributes(attributes, context) {
|
|
|
|
|
if (attributes.length === 0) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Measure total width of all attributes when rendered inline
|
|
|
|
|
const child_context = context.new();
|
|
|
|
|
|
|
|
|
|
for (const attribute of attributes) {
|
|
|
|
|
child_context.write(' ');
|
|
|
|
|
child_context.visit(attribute);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const multiline = child_context.measure() > LINE_BREAK_THRESHOLD;
|
|
|
|
|
|
|
|
|
|
if (multiline) {
|
|
|
|
|
context.indent();
|
|
|
|
|
for (const attribute of attributes) {
|
|
|
|
|
context.newline();
|
|
|
|
|
context.visit(attribute);
|
|
|
|
|
}
|
|
|
|
|
context.dedent();
|
|
|
|
|
context.newline();
|
|
|
|
|
} else {
|
|
|
|
|
context.append(child_context);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return multiline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param {AST.BaseElement} node
|
|
|
|
|
* @param {Context} context
|
|
|
|
|
*/
|
|
|
|
|
function base_element(node, context) {
|
|
|
|
|
const child_context = context.new();
|
|
|
|
|
|
|
|
|
|
child_context.write('<' + node.name);
|
|
|
|
|
|
|
|
|
|
// Handle special Svelte components/elements that need 'this' attribute
|
|
|
|
|
if (node.type === 'SvelteComponent') {
|
|
|
|
|
child_context.write(' this={');
|
|
|
|
|
child_context.visit(/** @type {AST.SvelteComponent} */ (node).expression);
|
|
|
|
|
child_context.write('}');
|
|
|
|
|
} else if (node.type === 'SvelteElement') {
|
|
|
|
|
child_context.write(' this={');
|
|
|
|
|
child_context.visit(/** @type {AST.SvelteElement} */ (node).tag);
|
|
|
|
|
child_context.write('}');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const multiline_attributes = attributes(node.attributes, child_context);
|
|
|
|
|
|
|
|
|
|
const is_self_closing =
|
|
|
|
|
is_void(node.name) || (node.type === 'Component' && node.fragment.nodes.length === 0);
|
|
|
|
|
let multiline_content = false;
|
|
|
|
|
|
|
|
|
|
if (is_self_closing) {
|
|
|
|
|
child_context.write(`${multiline_attributes ? '' : ' '}/>`);
|
|
|
|
|
} else {
|
|
|
|
|
child_context.write('>');
|
|
|
|
|
|
|
|
|
|
// Process the element's content in a separate context for measurement
|
|
|
|
|
const content_context = child_context.new();
|
|
|
|
|
const allow_inline_content = child_context.measure() < LINE_BREAK_THRESHOLD;
|
|
|
|
|
block(content_context, node.fragment, allow_inline_content);
|
|
|
|
|
|
|
|
|
|
// Determine if content should be formatted on multiple lines
|
|
|
|
|
multiline_content = content_context.measure() > LINE_BREAK_THRESHOLD;
|
|
|
|
|
|
|
|
|
|
if (multiline_content) {
|
|
|
|
|
child_context.newline();
|
|
|
|
|
|
|
|
|
|
// Only indent if attributes are inline and content itself isn't already multiline
|
|
|
|
|
const should_indent = !multiline_attributes && !content_context.multiline;
|
|
|
|
|
if (should_indent) {
|
|
|
|
|
child_context.indent();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
child_context.append(content_context);
|
|
|
|
|
|
|
|
|
|
if (should_indent) {
|
|
|
|
|
child_context.dedent();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
child_context.newline();
|
|
|
|
|
} else {
|
|
|
|
|
child_context.append(content_context);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
child_context.write(`</${node.name}>`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const break_line_after = child_context.measure() > LINE_BREAK_THRESHOLD;
|
|
|
|
|
|
|
|
|
|
if ((multiline_content || multiline_attributes) && !context.empty()) {
|
|
|
|
|
context.newline();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.append(child_context);
|
|
|
|
|
|
|
|
|
|
if (is_self_closing) return;
|
|
|
|
|
if (multiline_content || multiline_attributes || break_line_after) {
|
|
|
|
|
context.newline();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** @type {Visitors<AST.SvelteNode>} */
|
|
|
|
|
const css_visitors = {
|
|
|
|
|
Atrule(node, context) {
|
|
|
|
|
context.write(`@${node.name}`);
|
|
|
|
|
if (node.prelude) context.write(` ${node.prelude}`);
|
|
|
|
|
|
|
|
|
|
if (node.block) {
|
|
|
|
|
context.write(' ');
|
|
|
|
|
context.visit(node.block);
|
|
|
|
|
} else {
|
|
|
|
|
context.write(';');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Block(node, context) {
|
|
|
|
|
context.write('{');
|
|
|
|
|
|
|
|
|
|
if (node.children.length > 0) {
|
|
|
|
|
context.indent();
|
|
|
|
|
context.newline();
|
|
|
|
|
|
|
|
|
|
let started = false;
|
|
|
|
|
|
|
|
|
|
for (const child of node.children) {
|
|
|
|
|
if (started) {
|
|
|
|
|
context.newline();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.visit(child);
|
|
|
|
|
|
|
|
|
|
started = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.dedent();
|
|
|
|
|
context.newline();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write('}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ClassSelector(node, context) {
|
|
|
|
|
context.write(`.${node.name}`);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ComplexSelector(node, context) {
|
|
|
|
|
for (const selector of node.children) {
|
|
|
|
|
context.visit(selector);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Declaration(node, context) {
|
|
|
|
|
context.write(`${node.property}: ${node.value};`);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Nth(node, context) {
|
|
|
|
|
context.write(node.value);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
PseudoClassSelector(node, context) {
|
|
|
|
|
context.write(`:${node.name}`);
|
|
|
|
|
|
|
|
|
|
if (node.args) {
|
|
|
|
|
context.write('(');
|
|
|
|
|
|
|
|
|
|
let started = false;
|
|
|
|
|
|
|
|
|
|
for (const arg of node.args.children) {
|
|
|
|
|
if (started) {
|
|
|
|
|
context.write(', ');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.visit(arg);
|
|
|
|
|
|
|
|
|
|
started = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write(')');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
PseudoElementSelector(node, context) {
|
|
|
|
|
context.write(`::${node.name}`);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
RelativeSelector(node, context) {
|
|
|
|
|
if (node.combinator) {
|
|
|
|
|
if (node.combinator.name === ' ') {
|
|
|
|
|
context.write(' ');
|
|
|
|
|
} else {
|
|
|
|
|
context.write(` ${node.combinator.name} `);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (const selector of node.selectors) {
|
|
|
|
|
context.visit(selector);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Rule(node, context) {
|
|
|
|
|
let started = false;
|
|
|
|
|
|
|
|
|
|
for (const selector of node.prelude.children) {
|
|
|
|
|
if (started) {
|
|
|
|
|
context.write(',');
|
|
|
|
|
context.newline();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.visit(selector);
|
|
|
|
|
started = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write(' ');
|
|
|
|
|
context.visit(node.block);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SelectorList(node, context) {
|
|
|
|
|
let started = false;
|
|
|
|
|
for (const selector of node.children) {
|
|
|
|
|
if (started) {
|
|
|
|
|
context.write(', ');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.visit(selector);
|
|
|
|
|
started = true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
TypeSelector(node, context) {
|
|
|
|
|
context.write(node.name);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** @type {Visitors<AST.SvelteNode>} */
|
|
|
|
|
const svelte_visitors = {
|
|
|
|
|
Root(node, context) {
|
|
|
|
|
if (node.options) {
|
|
|
|
|
context.write('<svelte:options');
|
|
|
|
|
|
|
|
|
|
for (const attribute of node.options.attributes) {
|
|
|
|
|
context.write(' ');
|
|
|
|
|
context.visit(attribute);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write(' />');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let started = false;
|
|
|
|
|
|
|
|
|
|
for (const item of [node.module, node.instance, node.fragment, node.css]) {
|
|
|
|
|
if (!item) continue;
|
|
|
|
|
|
|
|
|
|
if (started) {
|
|
|
|
|
context.margin();
|
|
|
|
|
context.newline();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.visit(item);
|
|
|
|
|
started = true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Script(node, context) {
|
|
|
|
|
context.write('<script');
|
|
|
|
|
attributes(node.attributes, context);
|
|
|
|
|
context.write('>');
|
|
|
|
|
block(context, node.content);
|
|
|
|
|
context.write('</script>');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Fragment(node, context) {
|
|
|
|
|
/** @type {AST.SvelteNode[][]} */
|
|
|
|
|
const items = [];
|
|
|
|
|
|
|
|
|
|
/** @type {AST.SvelteNode[]} */
|
|
|
|
|
let sequence = [];
|
|
|
|
|
|
|
|
|
|
const flush = () => {
|
|
|
|
|
items.push(sequence);
|
|
|
|
|
sequence = [];
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < node.nodes.length; i += 1) {
|
|
|
|
|
let child_node = node.nodes[i];
|
|
|
|
|
|
|
|
|
|
const prev = node.nodes[i - 1];
|
|
|
|
|
const next = node.nodes[i + 1];
|
|
|
|
|
|
|
|
|
|
if (child_node.type === 'Text') {
|
|
|
|
|
child_node = { ...child_node }; // always clone, so we can safely mutate
|
|
|
|
|
|
|
|
|
|
child_node.data = child_node.data.replace(/[^\S]+/g, ' ');
|
|
|
|
|
|
|
|
|
|
// trim fragment
|
|
|
|
|
if (i === 0) {
|
|
|
|
|
child_node.data = child_node.data.trimStart();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (i === node.nodes.length - 1) {
|
|
|
|
|
child_node.data = child_node.data.trimEnd();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (child_node.data === '') {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (child_node.data.startsWith(' ') && prev && prev.type !== 'ExpressionTag') {
|
|
|
|
|
flush();
|
|
|
|
|
child_node.data = child_node.data.trimStart();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (child_node.data !== '') {
|
|
|
|
|
sequence.push({ ...child_node, data: child_node.data });
|
|
|
|
|
|
|
|
|
|
if (child_node.data.endsWith(' ') && next && next.type !== 'ExpressionTag') {
|
|
|
|
|
flush();
|
|
|
|
|
child_node.data = child_node.data.trimStart();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
sequence.push(child_node);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
flush();
|
|
|
|
|
|
|
|
|
|
let multiline = false;
|
|
|
|
|
let width = 0;
|
|
|
|
|
|
|
|
|
|
const child_contexts = items.map((sequence) => {
|
|
|
|
|
const child_context = context.new();
|
|
|
|
|
|
|
|
|
|
for (const node of sequence) {
|
|
|
|
|
child_context.visit(node);
|
|
|
|
|
multiline ||= child_context.multiline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
width += child_context.measure();
|
|
|
|
|
|
|
|
|
|
return child_context;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
multiline ||= width > LINE_BREAK_THRESHOLD;
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < child_contexts.length; i += 1) {
|
|
|
|
|
const prev = child_contexts[i];
|
|
|
|
|
const next = child_contexts[i + 1];
|
|
|
|
|
|
|
|
|
|
context.append(prev);
|
|
|
|
|
|
|
|
|
|
if (next) {
|
|
|
|
|
if (prev.multiline || next.multiline) {
|
|
|
|
|
context.margin();
|
|
|
|
|
context.newline();
|
|
|
|
|
} else if (multiline) {
|
|
|
|
|
context.newline();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
AnimateDirective(node, context) {
|
|
|
|
|
context.write(`animate:${node.name}`);
|
|
|
|
|
if (
|
|
|
|
|
node.expression !== null &&
|
|
|
|
|
!(node.expression.type === 'Identifier' && node.expression.name === node.name)
|
|
|
|
|
) {
|
|
|
|
|
context.write('={');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
AttachTag(node, context) {
|
|
|
|
|
context.write('{@attach ');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Attribute(node, context) {
|
|
|
|
|
context.write(node.name);
|
|
|
|
|
|
|
|
|
|
if (node.value === true) return;
|
|
|
|
|
|
|
|
|
|
context.write('=');
|
|
|
|
|
|
|
|
|
|
if (Array.isArray(node.value)) {
|
|
|
|
|
if (node.value.length > 1 || node.value[0].type === 'Text') {
|
|
|
|
|
context.write('"');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (const chunk of node.value) {
|
|
|
|
|
context.visit(chunk);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (node.value.length > 1 || node.value[0].type === 'Text') {
|
|
|
|
|
context.write('"');
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
context.visit(node.value);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
AwaitBlock(node, context) {
|
|
|
|
|
context.write(`{#await `);
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
|
|
|
|
|
if (node.pending) {
|
|
|
|
|
context.write('}');
|
|
|
|
|
block(context, node.pending);
|
|
|
|
|
context.write('{:');
|
|
|
|
|
} else {
|
|
|
|
|
context.write(' ');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (node.then) {
|
|
|
|
|
context.write(node.value ? 'then ' : 'then');
|
|
|
|
|
if (node.value) context.visit(node.value);
|
|
|
|
|
context.write('}');
|
|
|
|
|
|
|
|
|
|
block(context, node.then);
|
|
|
|
|
|
|
|
|
|
if (node.catch) {
|
|
|
|
|
context.write('{:');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (node.catch) {
|
|
|
|
|
context.write(node.value ? 'catch ' : 'catch');
|
|
|
|
|
if (node.error) context.visit(node.error);
|
|
|
|
|
context.write('}');
|
|
|
|
|
|
|
|
|
|
block(context, node.catch);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write('{/await}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
BindDirective(node, context) {
|
|
|
|
|
context.write(`bind:${node.name}`);
|
|
|
|
|
|
|
|
|
|
if (node.expression.type === 'Identifier' && node.expression.name === node.name) {
|
|
|
|
|
// shorthand
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write('={');
|
|
|
|
|
|
|
|
|
|
if (node.expression.type === 'SequenceExpression') {
|
|
|
|
|
context.visit(node.expression.expressions[0]);
|
|
|
|
|
context.write(', ');
|
|
|
|
|
context.visit(node.expression.expressions[1]);
|
|
|
|
|
} else {
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write('}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ClassDirective(node, context) {
|
|
|
|
|
context.write(`class:${node.name}`);
|
|
|
|
|
if (
|
|
|
|
|
node.expression !== null &&
|
|
|
|
|
!(node.expression.type === 'Identifier' && node.expression.name === node.name)
|
|
|
|
|
) {
|
|
|
|
|
context.write('={');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Comment(node, context) {
|
|
|
|
|
context.write('<!--' + node.data + '-->');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Component(node, context) {
|
|
|
|
|
base_element(node, context);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ConstTag(node, context) {
|
|
|
|
|
context.write('{@');
|
|
|
|
|
context.visit(node.declaration);
|
|
|
|
|
context.write('}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
DebugTag(node, context) {
|
|
|
|
|
context.write('{@debug ');
|
|
|
|
|
let started = false;
|
|
|
|
|
for (const identifier of node.identifiers) {
|
|
|
|
|
if (started) {
|
|
|
|
|
context.write(', ');
|
|
|
|
|
}
|
|
|
|
|
context.visit(identifier);
|
|
|
|
|
started = true;
|
|
|
|
|
}
|
|
|
|
|
context.write('}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
EachBlock(node, context) {
|
|
|
|
|
context.write('{#each ');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
|
|
|
|
|
if (node.context) {
|
|
|
|
|
context.write(' as ');
|
|
|
|
|
context.visit(node.context);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (node.index) {
|
|
|
|
|
context.write(`, ${node.index}`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (node.key) {
|
|
|
|
|
context.write(' (');
|
|
|
|
|
context.visit(node.key);
|
|
|
|
|
context.write(')');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write('}');
|
|
|
|
|
|
|
|
|
|
block(context, node.body);
|
|
|
|
|
|
|
|
|
|
if (node.fallback) {
|
|
|
|
|
context.write('{:else}');
|
|
|
|
|
block(context, node.fallback);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write('{/each}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ExpressionTag(node, context) {
|
|
|
|
|
context.write('{');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
HtmlTag(node, context) {
|
|
|
|
|
context.write('{@html ');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
IfBlock(node, context) {
|
|
|
|
|
if (node.elseif) {
|
|
|
|
|
context.write('{:else if ');
|
|
|
|
|
context.visit(node.test);
|
|
|
|
|
context.write('}');
|
|
|
|
|
|
|
|
|
|
block(context, node.consequent);
|
|
|
|
|
} else {
|
|
|
|
|
context.write('{#if ');
|
|
|
|
|
context.visit(node.test);
|
|
|
|
|
context.write('}');
|
|
|
|
|
|
|
|
|
|
block(context, node.consequent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (node.alternate !== null) {
|
|
|
|
|
if (
|
|
|
|
|
!(
|
|
|
|
|
node.alternate.nodes.length === 1 &&
|
|
|
|
|
node.alternate.nodes[0].type === 'IfBlock' &&
|
|
|
|
|
node.alternate.nodes[0].elseif
|
|
|
|
|
)
|
|
|
|
|
) {
|
|
|
|
|
context.write('{:else}');
|
|
|
|
|
block(context, node.alternate);
|
|
|
|
|
} else {
|
|
|
|
|
context.visit(node.alternate);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!node.elseif) {
|
|
|
|
|
context.write('{/if}');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
KeyBlock(node, context) {
|
|
|
|
|
context.write('{#key ');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
block(context, node.fragment);
|
|
|
|
|
context.write('{/key}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
LetDirective(node, context) {
|
|
|
|
|
context.write(`let:${node.name}`);
|
|
|
|
|
if (
|
|
|
|
|
node.expression !== null &&
|
|
|
|
|
!(node.expression.type === 'Identifier' && node.expression.name === node.name)
|
|
|
|
|
) {
|
|
|
|
|
context.write('={');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
OnDirective(node, context) {
|
|
|
|
|
context.write(`on:${node.name}`);
|
|
|
|
|
for (const modifier of node.modifiers) {
|
|
|
|
|
context.write(`|${modifier}`);
|
|
|
|
|
}
|
|
|
|
|
if (
|
|
|
|
|
node.expression !== null &&
|
|
|
|
|
!(node.expression.type === 'Identifier' && node.expression.name === node.name)
|
|
|
|
|
) {
|
|
|
|
|
context.write('={');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
RegularElement(node, context) {
|
|
|
|
|
base_element(node, context);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
RenderTag(node, context) {
|
|
|
|
|
context.write('{@render ');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SlotElement(node, context) {
|
|
|
|
|
base_element(node, context);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SnippetBlock(node, context) {
|
|
|
|
|
context.write('{#snippet ');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
|
|
|
|
|
if (node.typeParams) {
|
|
|
|
|
context.write(`<${node.typeParams}>`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write('(');
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < node.parameters.length; i += 1) {
|
|
|
|
|
if (i > 0) context.write(', ');
|
|
|
|
|
context.visit(node.parameters[i]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write(')}');
|
|
|
|
|
block(context, node.body);
|
|
|
|
|
context.write('{/snippet}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SpreadAttribute(node, context) {
|
|
|
|
|
context.write('{...');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
StyleDirective(node, context) {
|
|
|
|
|
context.write(`style:${node.name}`);
|
|
|
|
|
for (const modifier of node.modifiers) {
|
|
|
|
|
context.write(`|${modifier}`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (node.value === true) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write('=');
|
|
|
|
|
|
|
|
|
|
if (Array.isArray(node.value)) {
|
|
|
|
|
context.write('"');
|
|
|
|
|
|
|
|
|
|
for (const tag of node.value) {
|
|
|
|
|
context.visit(tag);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write('"');
|
|
|
|
|
} else {
|
|
|
|
|
context.visit(node.value);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
StyleSheet(node, context) {
|
|
|
|
|
context.write('<style');
|
|
|
|
|
attributes(node.attributes, context);
|
|
|
|
|
context.write('>');
|
|
|
|
|
|
|
|
|
|
if (node.children.length > 0) {
|
|
|
|
|
context.indent();
|
|
|
|
|
context.newline();
|
|
|
|
|
|
|
|
|
|
let started = false;
|
|
|
|
|
|
|
|
|
|
for (const child of node.children) {
|
|
|
|
|
if (started) {
|
|
|
|
|
context.margin();
|
|
|
|
|
context.newline();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.visit(child);
|
|
|
|
|
started = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.dedent();
|
|
|
|
|
context.newline();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
context.write('</style>');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SvelteBoundary(node, context) {
|
|
|
|
|
base_element(node, context);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SvelteComponent(node, context) {
|
|
|
|
|
context.write('<svelte:component');
|
|
|
|
|
|
|
|
|
|
context.write(' this={');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
attributes(node.attributes, context);
|
|
|
|
|
if (node.fragment && node.fragment.nodes.length > 0) {
|
|
|
|
|
context.write('>');
|
|
|
|
|
block(context, node.fragment, true);
|
|
|
|
|
context.write(`</svelte:component>`);
|
|
|
|
|
} else {
|
|
|
|
|
context.write(' />');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SvelteDocument(node, context) {
|
|
|
|
|
base_element(node, context);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SvelteElement(node, context) {
|
|
|
|
|
context.write('<svelte:element ');
|
|
|
|
|
|
|
|
|
|
context.write('this={');
|
|
|
|
|
context.visit(node.tag);
|
|
|
|
|
context.write('}');
|
|
|
|
|
attributes(node.attributes, context);
|
|
|
|
|
|
|
|
|
|
if (node.fragment && node.fragment.nodes.length > 0) {
|
|
|
|
|
context.write('>');
|
|
|
|
|
block(context, node.fragment);
|
|
|
|
|
context.write(`</svelte:element>`);
|
|
|
|
|
} else {
|
|
|
|
|
context.write(' />');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SvelteFragment(node, context) {
|
|
|
|
|
base_element(node, context);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SvelteHead(node, context) {
|
|
|
|
|
base_element(node, context);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SvelteSelf(node, context) {
|
|
|
|
|
base_element(node, context);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
SvelteWindow(node, context) {
|
|
|
|
|
base_element(node, context);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Text(node, context) {
|
|
|
|
|
context.write(node.data);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
TitleElement(node, context) {
|
|
|
|
|
base_element(node, context);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
TransitionDirective(node, context) {
|
|
|
|
|
const directive = node.intro && node.outro ? 'transition' : node.intro ? 'in' : 'out';
|
|
|
|
|
context.write(`${directive}:${node.name}`);
|
|
|
|
|
for (const modifier of node.modifiers) {
|
|
|
|
|
context.write(`|${modifier}`);
|
|
|
|
|
}
|
|
|
|
|
if (
|
|
|
|
|
node.expression !== null &&
|
|
|
|
|
!(node.expression.type === 'Identifier' && node.expression.name === node.name)
|
|
|
|
|
) {
|
|
|
|
|
context.write('={');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
UseDirective(node, context) {
|
|
|
|
|
context.write(`use:${node.name}`);
|
|
|
|
|
if (
|
|
|
|
|
node.expression !== null &&
|
|
|
|
|
!(node.expression.type === 'Identifier' && node.expression.name === node.name)
|
|
|
|
|
) {
|
|
|
|
|
context.write('={');
|
|
|
|
|
context.visit(node.expression);
|
|
|
|
|
context.write('}');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
Rich Harris
2 weeks ago
committed by
GitHub