msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Convert src/compiler/compile/render_ssr/handlers/Element.ts to JavaScript

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 611637975a
commit 0a8d5fe08c
1 changed files with 228 additions and 257 deletions
Show Stats Download Patch File Download Diff File

485
src/compiler/compile/render_ssr/handlers/Element.ts
Unescape View File

@ -1,269 +1,240 @@
import { is_void } from '../../../../shared/utils/names'; import { is_void } from '../../../../shared/utils/names.js';
import { import { get_attribute_expression, get_attribute_value, get_class_attribute_value } from './shared/get_attribute_value';
get_attribute_expression,
get_attribute_value,
get_class_attribute_value
} from './shared/get_attribute_value';
import { boolean_attributes } from '../../../../shared/boolean_attributes'; import { boolean_attributes } from '../../../../shared/boolean_attributes';
import { is_name_contenteditable, is_contenteditable } from '../../utils/contenteditable'; import { is_name_contenteditable, is_contenteditable } from '../../utils/contenteditable';
import Renderer, { RenderOptions } from '../Renderer';
import Binding from '../../nodes/Binding';
import Element from '../../nodes/Element';
import { p, x } from 'code-red'; import { p, x } from 'code-red';
import Expression from '../../nodes/shared/Expression';
import remove_whitespace_children from './utils/remove_whitespace_children'; import remove_whitespace_children from './utils/remove_whitespace_children';
import fix_attribute_casing from '../../render_dom/wrappers/Element/fix_attribute_casing'; import fix_attribute_casing from '../../render_dom/wrappers/Element/fix_attribute_casing';
import { namespaces } from '../../../utils/namespaces'; import { namespaces } from '../../../utils/namespaces';
import { regex_starts_with_newline } from '../../../utils/patterns'; import { regex_starts_with_newline } from '../../../utils/patterns';
import { Node, Expression as ESExpression } from 'estree';
export default function (node: Element, renderer: Renderer, options: RenderOptions) { /**
const children = remove_whitespace_children(node.children, node.next); * @param {import('../../nodes/Element.js').default} node
* @param {import('../Renderer.js').default} renderer
// awkward special case * @param {import('../Renderer.js').RenderOptions} options
let node_contents; */
export default function (node, renderer, options) {
const contenteditable = is_contenteditable(node); const children = remove_whitespace_children(node.children, node.next);
// awkward special case
if (node.is_dynamic_element) { let node_contents;
renderer.push(); const contenteditable = is_contenteditable(node);
} if (node.is_dynamic_element) {
renderer.push();
renderer.add_string('<'); }
add_tag_name(); renderer.add_string('<');
add_tag_name();
const class_expression_list = node.classes.map((class_directive) => { const class_expression_list = node.classes.map((class_directive) => {
const { expression, name } = class_directive; const { expression, name } = class_directive;
const snippet = expression ? expression.node : x`#ctx.${name}`; // TODO is this right? const snippet = expression ? expression.node : x `#ctx.${name}`; // TODO is this right?
return x`${snippet} ? "${name}" : ""`; return x `${snippet} ? "${name}" : ""`;
}); });
if (node.needs_manual_style_scoping) { if (node.needs_manual_style_scoping) {
class_expression_list.push(x`"${node.component.stylesheet.id}"`); class_expression_list.push(x `"${node.component.stylesheet.id}"`);
} }
const class_expression = const class_expression = class_expression_list.length > 0 &&
class_expression_list.length > 0 && class_expression_list.reduce((lhs, rhs) => x `${lhs} + ' ' + ${rhs}`);
class_expression_list.reduce((lhs, rhs) => x`${lhs} + ' ' + ${rhs}`); const style_expression_list = node.styles.map((style_directive) => {
let { name, important, expression: { node: expression } } = style_directive;
const style_expression_list = node.styles.map((style_directive) => { if (important) {
let { expression = x `${expression} + ' !important'`;
name, }
important, return p `"${name}": ${expression}`;
expression: { node: expression } });
} = style_directive; const style_expression = style_expression_list.length > 0 && x `{ ${style_expression_list} }`;
if (important) { if (node.attributes.some((attr) => attr.is_spread)) {
expression = x`${expression} + ' !important'`; // TODO dry this out
} const args = [];
return p`"${name}": ${expression}`; node.attributes.forEach((attribute) => {
}); if (attribute.is_spread) {
args.push(x `@escape_object(${attribute.expression.node})`);
const style_expression = style_expression_list.length > 0 && x`{ ${style_expression_list} }`; }
else {
if (node.attributes.some((attr) => attr.is_spread)) { const attr_name = node.namespace === namespaces.foreign
// TODO dry this out ? attribute.name
const args = []; : fix_attribute_casing(attribute.name);
node.attributes.forEach((attribute) => { const name = attribute.name.toLowerCase();
if (attribute.is_spread) { if (name === 'value' && node.name.toLowerCase() === 'textarea') {
args.push(x`@escape_object(${attribute.expression.node})`); node_contents = get_attribute_value(attribute);
} else { }
const attr_name = else if (attribute.is_true) {
node.namespace === namespaces.foreign args.push(x `{ ${attr_name}: true }`);
? attribute.name }
: fix_attribute_casing(attribute.name); else if (boolean_attributes.has(name) &&
const name = attribute.name.toLowerCase(); attribute.chunks.length === 1 &&
if (name === 'value' && node.name.toLowerCase() === 'textarea') { attribute.chunks[0].type !== 'Text') {
node_contents = get_attribute_value(attribute); // a boolean attribute with one non-Text chunk
} else if (attribute.is_true) { args.push(x `{ ${attr_name}: ${( /** @type {Expression} */(attribute.chunks[0])).node} || null }`);
args.push(x`{ ${attr_name}: true }`); }
} else if ( else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') {
boolean_attributes.has(name) && const snippet = ( /** @type {Expression} */(attribute.chunks[0])).node;
attribute.chunks.length === 1 && args.push(x `{ ${attr_name}: @escape_attribute_value(${snippet}) }`);
attribute.chunks[0].type !== 'Text' }
) { else {
// a boolean attribute with one non-Text chunk args.push(x `{ ${attr_name}: ${get_attribute_value(attribute)} }`);
args.push(x`{ ${attr_name}: ${(attribute.chunks[0] as Expression).node} || null }`); }
} else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') { }
const snippet = (attribute.chunks[0] as Expression).node; });
args.push(x`{ ${attr_name}: @escape_attribute_value(${snippet}) }`); renderer.add_expression(x `@spread([${args}], { classes: ${class_expression}, styles: ${style_expression} })`);
} else { }
args.push(x`{ ${attr_name}: ${get_attribute_value(attribute)} }`); else {
} let add_class_attribute = !!class_expression;
} let add_style_attribute = !!style_expression;
}); node.attributes.forEach((attribute) => {
const name = attribute.name.toLowerCase();
renderer.add_expression( const attr_name = node.namespace === namespaces.foreign
x`@spread([${args}], { classes: ${class_expression}, styles: ${style_expression} })` ? attribute.name
); : fix_attribute_casing(attribute.name);
} else { if (name === 'value' && node.name.toLowerCase() === 'textarea') {
let add_class_attribute = !!class_expression; node_contents = get_attribute_value(attribute);
let add_style_attribute = !!style_expression; }
node.attributes.forEach((attribute) => { else if (attribute.is_true) {
const name = attribute.name.toLowerCase(); renderer.add_string(` ${attr_name}`);
const attr_name = }
node.namespace === namespaces.foreign else if (boolean_attributes.has(name) &&
? attribute.name attribute.chunks.length === 1 &&
: fix_attribute_casing(attribute.name); attribute.chunks[0].type !== 'Text') {
if (name === 'value' && node.name.toLowerCase() === 'textarea') { // a boolean attribute with one non-Text chunk
node_contents = get_attribute_value(attribute); renderer.add_string(' ');
} else if (attribute.is_true) { renderer.add_expression(x `${( /** @type {Expression} */(attribute.chunks[0])).node} ? "${attr_name}" : ""`);
renderer.add_string(` ${attr_name}`); }
} else if ( else if (name === 'class' && class_expression) {
boolean_attributes.has(name) && add_class_attribute = false;
attribute.chunks.length === 1 && renderer.add_string(` ${attr_name}="`);
attribute.chunks[0].type !== 'Text' renderer.add_expression(x `[${get_class_attribute_value(attribute)}, ${class_expression}].join(' ').trim()`);
) { renderer.add_string('"');
// a boolean attribute with one non-Text chunk }
renderer.add_string(' '); else if (name === 'style' && style_expression) {
renderer.add_expression( add_style_attribute = false;
x`${(attribute.chunks[0] as Expression).node} ? "${attr_name}" : ""` renderer.add_expression(x `@add_styles(@merge_ssr_styles(${get_attribute_value(attribute)}, ${style_expression}))`);
); }
} else if (name === 'class' && class_expression) { else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') {
add_class_attribute = false; const snippet = ( /** @type {Expression} */(attribute.chunks[0])).node;
renderer.add_string(` ${attr_name}="`); renderer.add_expression(x `@add_attribute("${attr_name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`);
renderer.add_expression( }
x`[${get_class_attribute_value(attribute)}, ${class_expression}].join(' ').trim()` else {
); renderer.add_string(` ${attr_name}="`);
renderer.add_string('"'); renderer.add_expression((name === 'class' ? get_class_attribute_value : get_attribute_value)(attribute));
} else if (name === 'style' && style_expression) { renderer.add_string('"');
add_style_attribute = false; }
renderer.add_expression( });
x`@add_styles(@merge_ssr_styles(${get_attribute_value(attribute)}, ${style_expression}))` if (add_class_attribute) {
); renderer.add_expression(x `@add_classes((${class_expression}).trim())`);
} else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') { }
const snippet = (attribute.chunks[0] as Expression).node; if (add_style_attribute) {
renderer.add_expression( renderer.add_expression(x `@add_styles(${style_expression})`);
x`@add_attribute("${attr_name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})` }
); }
} else { node.bindings.forEach((binding) => {
renderer.add_string(` ${attr_name}="`); const { name, expression } = binding;
renderer.add_expression( if (binding.is_readonly) {
(name === 'class' ? get_class_attribute_value : get_attribute_value)(attribute) return;
); }
renderer.add_string('"'); if (name === 'group') {
} const value_attribute = node.attributes.find(({ name }) => name === 'value');
}); if (value_attribute) {
if (add_class_attribute) { const value = get_attribute_expression(value_attribute);
renderer.add_expression(x`@add_classes((${class_expression}).trim())`); const type = node.get_static_attribute_value('type');
} const bound = expression.node;
if (add_style_attribute) { const condition = type === 'checkbox' ? x `~${bound}.indexOf(${value})` : x `${value} === ${bound}`;
renderer.add_expression(x`@add_styles(${style_expression})`); renderer.add_expression(x `${condition} ? @add_attribute("checked", true, 1) : ""`);
} }
} }
else if (contenteditable && is_name_contenteditable(name)) {
node.bindings.forEach((binding: Binding) => { node_contents = expression.node;
const { name, expression } = binding; // TODO where was this used?
// value = name === 'textContent' ? x`@escape($$value)` : x`$$value`;
if (binding.is_readonly) { }
return; else if (binding.name === 'value' && node.name === 'textarea') {
} const snippet = expression.node;
node_contents = x `${snippet} || ""`;
if (name === 'group') { }
const value_attribute = node.attributes.find(({ name }) => name === 'value'); else if (binding.name === 'value' && node.name === 'select') {
if (value_attribute) { // NOTE: do not add "value" attribute on <select />
const value = get_attribute_expression(value_attribute); }
const type = node.get_static_attribute_value('type'); else {
const bound = expression.node; const snippet = expression.node;
const condition = renderer.add_expression(x `@add_attribute("${name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`);
type === 'checkbox' ? x`~${bound}.indexOf(${value})` : x`${value} === ${bound}`; }
renderer.add_expression(x`${condition} ? @add_attribute("checked", true, 1) : ""`); });
} if (options.hydratable) {
} else if (contenteditable && is_name_contenteditable(name)) { if (node.can_optimise_to_html_string && !options.has_added_svelte_hash) {
node_contents = expression.node; renderer.add_string(` data-svelte-h="${node.hash()}"`);
options = { ...options, has_added_svelte_hash: true };
// TODO where was this used? }
// value = name === 'textContent' ? x`@escape($$value)` : x`$$value`; }
} else if (binding.name === 'value' && node.name === 'textarea') { renderer.add_string('>');
const snippet = expression.node; if (node_contents !== undefined) {
node_contents = x`${snippet} || ""`; if (contenteditable) {
} else if (binding.name === 'value' && node.name === 'select') { renderer.push();
// NOTE: do not add "value" attribute on <select /> renderer.render(children, options);
} else { const result = renderer.pop();
const snippet = expression.node; renderer.add_expression(x `($$value => $$value === void 0 ? ${result} : $$value)(${node_contents})`);
renderer.add_expression( }
x`@add_attribute("${name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})` else {
); if (node.name === 'textarea') {
} // Two or more leading newlines are required to restore the leading newline immediately after `<textarea>`.
}); // see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
const value_attribute = node.attributes.find(({ name }) => name === 'value');
if (options.hydratable) { if (value_attribute) {
if (node.can_optimise_to_html_string && !options.has_added_svelte_hash) { const first = value_attribute.chunks[0];
renderer.add_string(` data-svelte-h="${node.hash()}"`); if (first && first.type === 'Text' && regex_starts_with_newline.test(first.data)) {
options = { ...options, has_added_svelte_hash: true }; renderer.add_string('\n');
} }
} }
}
renderer.add_string('>'); renderer.add_expression(node_contents);
}
if (node_contents !== undefined) { add_close_tag();
if (contenteditable) { }
renderer.push(); else {
renderer.render(children, options); if (node.name === 'pre') {
const result = renderer.pop(); // Two or more leading newlines are required to restore the leading newline immediately after `<pre>`.
// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
renderer.add_expression( // see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
x`($$value => $$value === void 0 ? ${result} : $$value)(${node_contents})` const first = children[0];
); if (first && first.type === 'Text' && regex_starts_with_newline.test(first.data)) {
} else { renderer.add_string('\n');
if (node.name === 'textarea') { }
// Two or more leading newlines are required to restore the leading newline immediately after `<textarea>`. }
// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions if (node.is_dynamic_element)
const value_attribute = node.attributes.find(({ name }) => name === 'value'); renderer.push();
if (value_attribute) { renderer.render(children, options);
const first = value_attribute.chunks[0]; if (node.is_dynamic_element) {
if (first && first.type === 'Text' && regex_starts_with_newline.test(first.data)) { const children = renderer.pop();
renderer.add_string('\n'); renderer.add_expression(x `@is_void(#tag) ? '' : ${children}`);
} }
} add_close_tag();
} }
renderer.add_expression(node_contents); if (node.is_dynamic_element) {
} let content = renderer.pop();
if (options.dev && node.children.length > 0)
add_close_tag(); content = x `(() => { @validate_void_dynamic_element(#tag); return ${content}; })()`;
} else { renderer.add_expression(x `((#tag) => {
if (node.name === 'pre') { ${options.dev && x `@validate_dynamic_element(#tag)`}
// Two or more leading newlines are required to restore the leading newline immediately after `<pre>`.
// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
const first = children[0];
if (first && first.type === 'Text' && regex_starts_with_newline.test(first.data)) {
renderer.add_string('\n');
}
}
if (node.is_dynamic_element) renderer.push();
renderer.render(children, options);
if (node.is_dynamic_element) {
const children = renderer.pop();
renderer.add_expression(x`@is_void(#tag) ? '' : ${children}`);
}
add_close_tag();
}
if (node.is_dynamic_element) {
let content: Node = renderer.pop();
if (options.dev && node.children.length > 0)
content = x`(() => { @validate_void_dynamic_element(#tag); return ${content}; })()`;
renderer.add_expression(x`((#tag) => {
${options.dev && x`@validate_dynamic_element(#tag)`}
return #tag ? ${content} : ''; return #tag ? ${content} : '';
})(${node.tag_expr.node})`); })(${node.tag_expr.node})`);
} }
function add_close_tag() {
if (node.tag_expr.node.type === 'Literal') {
if (!is_void(/** @type {string} */ (node.tag_expr.node.value))) {
renderer.add_string('</');
add_tag_name();
renderer.add_string('>');
}
return;
}
renderer.add_expression(x `@is_void(#tag) ? '' : \`</\${#tag}>\``);
}
function add_tag_name() {
if (node.tag_expr.node.type === 'Literal') {
renderer.add_string(/** @type {string} */ (node.tag_expr.node.value));
}
else {
renderer.add_expression(/** @type {ESExpression} */ (node.tag_expr.node));
}
}
}
function add_close_tag() {
if (node.tag_expr.node.type === 'Literal') {
if (!is_void(node.tag_expr.node.value as string)) {
renderer.add_string('</');
add_tag_name();
renderer.add_string('>');
}
return;
}
renderer.add_expression(x`@is_void(#tag) ? '' : \`</\${#tag}>\``);
}
function add_tag_name() {
if (node.tag_expr.node.type === 'Literal') {
renderer.add_string(node.tag_expr.node.value as string);
} else {
renderer.add_expression(node.tag_expr.node as ESExpression);
}
}
}

Write Preview
Loading…
Cancel
Save