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

Lint and format src/compiler/compile/render_ssr/handlers/Element.js

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 94c42c52f2
commit 960c7294c8
1 changed files with 232 additions and 222 deletions
Show Stats Download Patch File Download Diff File

136
src/compiler/compile/render_ssr/handlers/Element.js
Unescape View File

@ -1,5 +1,9 @@
import { is_void } from '../../../../shared/utils/names.js'; import { is_void } from '../../../../shared/utils/names.js';
import { get_attribute_expression, get_attribute_value, get_class_attribute_value } from './shared/get_attribute_value'; import {
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 { p, x } from 'code-red'; import { p, x } from 'code-red';
@ -31,10 +35,15 @@ export default function (node, renderer, options) {
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 = class_expression_list.length > 0 && const class_expression =
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) => { const style_expression_list = node.styles.map((style_directive) => {
let { name, important, expression: { node: expression } } = style_directive; let {
name,
important,
expression: { node: expression }
} = style_directive;
if (important) { if (important) {
expression = x`${expression} + ' !important'`; expression = x`${expression} + ' !important'`;
} }
@ -47,73 +56,81 @@ export default function (node, renderer, options) {
node.attributes.forEach((attribute) => { node.attributes.forEach((attribute) => {
if (attribute.is_spread) { if (attribute.is_spread) {
args.push(x`@escape_object(${attribute.expression.node})`); args.push(x`@escape_object(${attribute.expression.node})`);
} } else {
else { const attr_name =
const attr_name = node.namespace === namespaces.foreign node.namespace === namespaces.foreign
? attribute.name ? attribute.name
: fix_attribute_casing(attribute.name); : fix_attribute_casing(attribute.name);
const name = attribute.name.toLowerCase(); const name = attribute.name.toLowerCase();
if (name === 'value' && node.name.toLowerCase() === 'textarea') { if (name === 'value' && node.name.toLowerCase() === 'textarea') {
node_contents = get_attribute_value(attribute); node_contents = get_attribute_value(attribute);
} } else if (attribute.is_true) {
else if (attribute.is_true) {
args.push(x`{ ${attr_name}: true }`); args.push(x`{ ${attr_name}: true }`);
} } else if (
else if (boolean_attributes.has(name) && boolean_attributes.has(name) &&
attribute.chunks.length === 1 && attribute.chunks.length === 1 &&
attribute.chunks[0].type !== 'Text') { attribute.chunks[0].type !== 'Text'
) {
// a boolean attribute with one non-Text chunk // a boolean attribute with one non-Text chunk
args.push(x `{ ${attr_name}: ${( /** @type {Expression} */(attribute.chunks[0])).node} || null }`); args.push(
} x`{ ${attr_name}: ${/** @type {Expression} */ (attribute.chunks[0]).node} || null }`
else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') { );
const snippet = ( /** @type {Expression} */(attribute.chunks[0])).node; } else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') {
const snippet = /** @type {Expression} */ (attribute.chunks[0]).node;
args.push(x`{ ${attr_name}: @escape_attribute_value(${snippet}) }`); args.push(x`{ ${attr_name}: @escape_attribute_value(${snippet}) }`);
} } else {
else {
args.push(x`{ ${attr_name}: ${get_attribute_value(attribute)} }`); args.push(x`{ ${attr_name}: ${get_attribute_value(attribute)} }`);
} }
} }
}); });
renderer.add_expression(x `@spread([${args}], { classes: ${class_expression}, styles: ${style_expression} })`); renderer.add_expression(
} x`@spread([${args}], { classes: ${class_expression}, styles: ${style_expression} })`
else { );
} else {
let add_class_attribute = !!class_expression; let add_class_attribute = !!class_expression;
let add_style_attribute = !!style_expression; let add_style_attribute = !!style_expression;
node.attributes.forEach((attribute) => { node.attributes.forEach((attribute) => {
const name = attribute.name.toLowerCase(); const name = attribute.name.toLowerCase();
const attr_name = node.namespace === namespaces.foreign const attr_name =
node.namespace === namespaces.foreign
? attribute.name ? attribute.name
: fix_attribute_casing(attribute.name); : fix_attribute_casing(attribute.name);
if (name === 'value' && node.name.toLowerCase() === 'textarea') { if (name === 'value' && node.name.toLowerCase() === 'textarea') {
node_contents = get_attribute_value(attribute); node_contents = get_attribute_value(attribute);
} } else if (attribute.is_true) {
else if (attribute.is_true) {
renderer.add_string(` ${attr_name}`); renderer.add_string(` ${attr_name}`);
} } else if (
else if (boolean_attributes.has(name) && boolean_attributes.has(name) &&
attribute.chunks.length === 1 && attribute.chunks.length === 1 &&
attribute.chunks[0].type !== 'Text') { attribute.chunks[0].type !== 'Text'
) {
// a boolean attribute with one non-Text chunk // a boolean attribute with one non-Text chunk
renderer.add_string(' '); renderer.add_string(' ');
renderer.add_expression(x `${( /** @type {Expression} */(attribute.chunks[0])).node} ? "${attr_name}" : ""`); renderer.add_expression(
} x`${/** @type {Expression} */ (attribute.chunks[0]).node} ? "${attr_name}" : ""`
else if (name === 'class' && class_expression) { );
} else if (name === 'class' && class_expression) {
add_class_attribute = false; add_class_attribute = false;
renderer.add_string(` ${attr_name}="`); renderer.add_string(` ${attr_name}="`);
renderer.add_expression(x `[${get_class_attribute_value(attribute)}, ${class_expression}].join(' ').trim()`); renderer.add_expression(
x`[${get_class_attribute_value(attribute)}, ${class_expression}].join(' ').trim()`
);
renderer.add_string('"'); renderer.add_string('"');
} } else if (name === 'style' && style_expression) {
else if (name === 'style' && style_expression) {
add_style_attribute = false; add_style_attribute = false;
renderer.add_expression(x `@add_styles(@merge_ssr_styles(${get_attribute_value(attribute)}, ${style_expression}))`); renderer.add_expression(
} x`@add_styles(@merge_ssr_styles(${get_attribute_value(attribute)}, ${style_expression}))`
else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') { );
const snippet = ( /** @type {Expression} */(attribute.chunks[0])).node; } else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') {
renderer.add_expression(x `@add_attribute("${attr_name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`); const snippet = /** @type {Expression} */ (attribute.chunks[0]).node;
} renderer.add_expression(
else { x`@add_attribute("${attr_name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`
);
} else {
renderer.add_string(` ${attr_name}="`); renderer.add_string(` ${attr_name}="`);
renderer.add_expression((name === 'class' ? get_class_attribute_value : get_attribute_value)(attribute)); renderer.add_expression(
(name === 'class' ? get_class_attribute_value : get_attribute_value)(attribute)
);
renderer.add_string('"'); renderer.add_string('"');
} }
}); });
@ -135,25 +152,24 @@ export default function (node, renderer, options) {
const value = get_attribute_expression(value_attribute); const value = get_attribute_expression(value_attribute);
const type = node.get_static_attribute_value('type'); const type = node.get_static_attribute_value('type');
const bound = expression.node; const bound = expression.node;
const condition = type === 'checkbox' ? x `~${bound}.indexOf(${value})` : x `${value} === ${bound}`; const condition =
type === 'checkbox' ? x`~${bound}.indexOf(${value})` : x`${value} === ${bound}`;
renderer.add_expression(x`${condition} ? @add_attribute("checked", true, 1) : ""`); renderer.add_expression(x`${condition} ? @add_attribute("checked", true, 1) : ""`);
} }
} } else if (contenteditable && is_name_contenteditable(name)) {
else if (contenteditable && is_name_contenteditable(name)) {
node_contents = expression.node; node_contents = expression.node;
// TODO where was this used? // TODO where was this used?
// value = name === 'textContent' ? x`@escape($$value)` : x`$$value`; // value = name === 'textContent' ? x`@escape($$value)` : x`$$value`;
} } else if (binding.name === 'value' && node.name === 'textarea') {
else if (binding.name === 'value' && node.name === 'textarea') {
const snippet = expression.node; const snippet = expression.node;
node_contents = x`${snippet} || ""`; node_contents = x`${snippet} || ""`;
} } else if (binding.name === 'value' && node.name === 'select') {
else if (binding.name === 'value' && node.name === 'select') {
// NOTE: do not add "value" attribute on <select /> // NOTE: do not add "value" attribute on <select />
} } else {
else {
const snippet = expression.node; const snippet = expression.node;
renderer.add_expression(x `@add_attribute("${name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`); renderer.add_expression(
x`@add_attribute("${name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`
);
} }
}); });
if (options.hydratable) { if (options.hydratable) {
@ -168,9 +184,10 @@ export default function (node, renderer, options) {
renderer.push(); renderer.push();
renderer.render(children, options); renderer.render(children, options);
const result = renderer.pop(); const result = renderer.pop();
renderer.add_expression(x `($$value => $$value === void 0 ? ${result} : $$value)(${node_contents})`); renderer.add_expression(
} x`($$value => $$value === void 0 ? ${result} : $$value)(${node_contents})`
else { );
} else {
if (node.name === 'textarea') { if (node.name === 'textarea') {
// Two or more leading newlines are required to restore the leading newline immediately after `<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 // see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
@ -185,8 +202,7 @@ export default function (node, renderer, options) {
renderer.add_expression(node_contents); renderer.add_expression(node_contents);
} }
add_close_tag(); add_close_tag();
} } else {
else {
if (node.name === 'pre') { if (node.name === 'pre') {
// Two or more leading newlines are required to restore the leading newline immediately after `<pre>`. // 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/grouping-content.html#the-pre-element
@ -196,8 +212,7 @@ export default function (node, renderer, options) {
renderer.add_string('\n'); renderer.add_string('\n');
} }
} }
if (node.is_dynamic_element) if (node.is_dynamic_element) renderer.push();
renderer.push();
renderer.render(children, options); renderer.render(children, options);
if (node.is_dynamic_element) { if (node.is_dynamic_element) {
const children = renderer.pop(); const children = renderer.pop();
@ -228,13 +243,8 @@ export default function (node, renderer, options) {
function add_tag_name() { function add_tag_name() {
if (node.tag_expr.node.type === 'Literal') { if (node.tag_expr.node.type === 'Literal') {
renderer.add_string(/** @type {string} */ (node.tag_expr.node.value)); renderer.add_string(/** @type {string} */ (node.tag_expr.node.value));
} } else {
else {
renderer.add_expression(/** @type {ESExpression} */ (node.tag_expr.node)); renderer.add_expression(/** @type {ESExpression} */ (node.tag_expr.node));
} }
} }
} }

Write Preview
Loading…
Cancel
Save