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_dom/wrappers/Element/index.js

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 3ad9c11c03
commit 461dda587e
1 changed files with 1120 additions and 1048 deletions
Show Stats Download Patch File Download Diff File

404
src/compiler/compile/render_dom/wrappers/Element/index.js
Unescape View File

@ -9,7 +9,15 @@ import { namespaces } from '../../../../utils/namespaces.js';
import AttributeWrapper from './Attribute.js';
import StyleAttributeWrapper from './StyleAttribute.js';
import SpreadAttributeWrapper from './SpreadAttribute.js';
import { regex_dimensions, regex_starts_with_newline, regex_backslashes, regex_border_box_size, regex_content_box_size, regex_device_pixel_content_box_size, regex_content_rect } from '../../../../utils/patterns.js';
import {
regex_dimensions,
regex_starts_with_newline,
regex_backslashes,
regex_border_box_size,
regex_content_box_size,
regex_device_pixel_content_box_size,
regex_content_rect
} from '../../../../utils/patterns.js';
import Binding from './Binding.js';
import add_to_set from '../../../utils/add_to_set.js';
import { add_event_handler } from '../shared/add_event_handlers.js';
@ -22,7 +30,10 @@ import Action from '../../../nodes/Action.js';
import MustacheTagWrapper from '../MustacheTag.js';
import RawMustacheTagWrapper from '../RawMustacheTag.js';
import is_dynamic from '../shared/is_dynamic.js';
import { is_name_contenteditable, has_contenteditable_attr } from '../../../utils/contenteditable.js';
import {
is_name_contenteditable,
has_contenteditable_attr
} from '../../../utils/contenteditable.js';
import create_debugging_comment from '../shared/create_debugging_comment.js';
import { push_array } from '../../../../utils/push_array.js';
import CommentWrapper from '../Comment.js';
@ -31,11 +42,12 @@ const regex_contains_radio_or_checkbox_or_range_or_file = /radio|checkbox|range|
const events = [
{
event_names: ['input'],
filter: (node, _name) => node.name === 'textarea' ||
filter: (node, _name) =>
node.name === 'textarea' ||
(node.name === 'input' &&
!regex_contains_radio_or_checkbox_or_range_or_file.test(
/** @type {string} */ (node.get_static_attribute_value('type'))))
/** @type {string} */ (node.get_static_attribute_value('type'))
))
},
{
event_names: ['input'],
@ -43,15 +55,17 @@ const events = [
},
{
event_names: ['change'],
filter: (node, _name) => node.name === 'select' ||
filter: (node, _name) =>
node.name === 'select' ||
(node.name === 'input' &&
regex_contains_radio_or_checkbox_or_file.test(
/** @type {string} */ (node.get_static_attribute_value('type'))))
/** @type {string} */ (node.get_static_attribute_value('type'))
))
},
{
event_names: ['change', 'input'],
filter: (node, _name) => node.name === 'input' && node.get_static_attribute_value('type') === 'range'
filter: (node, _name) =>
node.name === 'input' && node.get_static_attribute_value('type') === 'range'
},
// resize events
{
@ -73,7 +87,8 @@ const events = [
// media events
{
event_names: ['timeupdate'],
filter: (node, name) => node.is_media_node() && (name === 'currentTime' || name === 'played' || name === 'ended')
filter: (node, name) =>
node.is_media_node() && (name === 'currentTime' || name === 'played' || name === 'ended')
},
{
event_names: ['durationchange'],
@ -109,7 +124,8 @@ const events = [
},
{
event_names: ['resize'],
filter: (node, name) => node.is_media_node() && (name === 'videoHeight' || name === 'videoWidth')
filter: (node, name) =>
node.is_media_node() && (name === 'videoHeight' || name === 'videoWidth')
},
{
// from https://html.spec.whatwg.org/multipage/media.html#ready-states
@ -141,7 +157,6 @@ const regex_minus_signs = /-/g;
/** @extends Wrapper */
export default class ElementWrapper extends Wrapper {
/** @type {import('../../../nodes/Element.js').default} */
node;
@ -212,7 +227,14 @@ export default class ElementWrapper extends Wrapper {
type: CHILD_DYNAMIC_ELEMENT_BLOCK
});
renderer.blocks.push(this.child_dynamic_element_block);
this.child_dynamic_element = new ElementWrapper(renderer, this.child_dynamic_element_block, parent, node, strip_whitespace, next_sibling);
this.child_dynamic_element = new ElementWrapper(
renderer,
this.child_dynamic_element_block,
parent,
node,
strip_whitespace,
next_sibling
);
// the original svelte:element is never used for rendering, because
// it gets assigned a child_dynamic_element which is used in all rendering logic.
// so doing all of this on the original svelte:element will just cause double
@ -236,34 +258,45 @@ export default class ElementWrapper extends Wrapper {
}
return new AttributeWrapper(this, block, attribute);
});
this.has_dynamic_attribute = !!this.attributes.find((attr) => attr.node.get_dependencies().length > 0);
this.has_dynamic_attribute = !!this.attributes.find(
(attr) => attr.node.get_dependencies().length > 0
);
// ordinarily, there'll only be one... but we need to handle
// the rare case where an element can have multiple bindings,
// e.g. <audio bind:paused bind:currentTime>
this.bindings = this.node.bindings.map((binding) => new Binding(block, binding, this));
this.event_handlers = this.node.handlers.map((event_handler) => new EventHandler(event_handler, this));
this.event_handlers = this.node.handlers.map(
(event_handler) => new EventHandler(event_handler, this)
);
if (node.intro || node.outro) {
if (node.intro)
block.add_intro(node.intro.is_local);
if (node.outro)
block.add_outro(node.outro.is_local);
if (node.intro) block.add_intro(node.intro.is_local);
if (node.outro) block.add_outro(node.outro.is_local);
}
if (node.animation) {
block.add_animation();
}
block.add_dependencies(node.tag_expr.dependencies);
// add directive and handler dependencies
[node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach((directive) => {
[node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach(
(directive) => {
if (directive && directive.expression) {
block.add_dependencies(directive.expression.dependencies);
}
});
}
);
node.handlers.forEach((handler) => {
if (handler.expression) {
block.add_dependencies(handler.expression.dependencies);
}
});
this.fragment = new FragmentWrapper(renderer, block, node.children, this, strip_whitespace, next_sibling);
this.fragment = new FragmentWrapper(
renderer,
block,
node.children,
this,
strip_whitespace,
next_sibling
);
this.element_data_name = block.get_unique_name(`${this.var.name}_data`);
}
@ -275,8 +308,7 @@ export default class ElementWrapper extends Wrapper {
render(block, parent_node, parent_nodes) {
if (this.child_dynamic_element) {
this.render_dynamic_element(block, parent_node, parent_nodes);
}
else {
} else {
this.render_element(block, parent_node, parent_nodes);
}
}
@ -287,15 +319,20 @@ export default class ElementWrapper extends Wrapper {
* @param {import('estree').Identifier} parent_nodes
*/
render_dynamic_element(block, parent_node, parent_nodes) {
this.child_dynamic_element.render(this.child_dynamic_element_block, null,
/** @type {unknown} */ /** @type {import('estree').Identifier} */ ((x `#nodes`)));
this.child_dynamic_element.render(
this.child_dynamic_element_block,
null,
/** @type {unknown} */ /** @type {import('estree').Identifier} */ (x`#nodes`)
);
const is_tag_dynamic = this.node.tag_expr.dynamic_dependencies().length > 0;
const tag = this.node.tag_expr.manipulate(block);
block.chunks.init.push(b`
${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`}
${this.renderer.options.dev &&
${
this.renderer.options.dev &&
this.node.children.length > 0 &&
b `@validate_void_dynamic_element(${tag});`}
b`@validate_void_dynamic_element(${tag});`
}
let ${this.var} = ${tag} && ${this.child_dynamic_element_block.name}(#ctx);
`);
block.chunks.create.push(b`
@ -332,28 +369,35 @@ export default class ElementWrapper extends Wrapper {
} else if (${not_equal}(${previous_tag}, ${tag})) {
${this.var}.d(1);
${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`}
${this.renderer.options.dev &&
${
this.renderer.options.dev &&
this.node.children.length > 0 &&
b `@validate_void_dynamic_element(${tag});`}
b`@validate_void_dynamic_element(${tag});`
}
${this.var} = ${this.child_dynamic_element_block.name}(#ctx);
${previous_tag} = ${tag};
${this.var}.c();
${has_transitions &&
${
has_transitions &&
b`if (${tag_will_be_removed}) {
${tag_will_be_removed} = false;
@transition_in(${this.var})
}`}
}`
}
${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor});
} else {
${has_transitions &&
${
has_transitions &&
b`if (${tag_will_be_removed}) {
${tag_will_be_removed} = false;
@transition_in(${this.var})
}`}
}`
}
${this.var}.p(#ctx, #dirty);
}
} else if (${previous_tag}) {
${has_transitions
${
has_transitions
? b`
${tag_will_be_removed} = true;
@group_outros();
@ -368,11 +412,11 @@ export default class ElementWrapper extends Wrapper {
${this.var}.d(1);
${this.var} = null;
${previous_tag} = ${tag};
`}
`
}
`);
}
else {
`);
} else {
block.chunks.update.push(b`
if (${tag}) {
${this.var}.p(#ctx, #dirty);
@ -409,8 +453,7 @@ export default class ElementWrapper extends Wrapper {
render_element(block, parent_node, parent_nodes) {
const { renderer } = this;
const hydratable = renderer.options.hydratable;
if (this.node.name === 'noscript')
return;
if (this.node.name === 'noscript') return;
const node = this.var;
const nodes = parent_nodes && block.get_unique_name(`${this.var.name}_nodes`); // if we're in unclaimable territory, i.e. <head>, parent_nodes is null
const children = x`@children(${this.node.name === 'template' ? x`${node}.content` : node})`;
@ -428,14 +471,15 @@ export default class ElementWrapper extends Wrapper {
var ${nodes} = ${children};
`);
}
}
else {
} else {
block.chunks.claim.push(b`${node} = ${render_statement};`);
}
}
if (parent_node) {
const append = b`@append(${parent_node}, ${node});`;
( /** @type {import('estree').CallExpression} */(( /** @type {import('estree').ExpressionStatement} */(append[0])).expression)).callee.loc = {
/** @type {import('estree').CallExpression} */ (
/** @type {import('estree').ExpressionStatement} */ (append[0]).expression
).callee.loc = {
start: this.renderer.locate(this.node.start),
end: this.renderer.locate(this.node.end)
};
@ -443,10 +487,11 @@ export default class ElementWrapper extends Wrapper {
if (is_head(parent_node)) {
block.chunks.destroy.push(b`@detach(${node});`);
}
}
else {
} else {
const insert = b`@insert(#target, ${node}, #anchor);`;
( /** @type {import('estree').CallExpression} */(( /** @type {import('estree').ExpressionStatement} */(insert[0])).expression)).callee.loc = {
/** @type {import('estree').CallExpression} */ (
/** @type {import('estree').ExpressionStatement} */ (insert[0]).expression
).callee.loc = {
start: this.renderer.locate(this.node.start),
end: this.renderer.locate(this.node.end)
};
@ -459,7 +504,9 @@ export default class ElementWrapper extends Wrapper {
// skip textcontent for <template>. append nodes to TemplateElement.content instead
if (can_optimise_to_html_string) {
if (this.fragment.nodes.length === 1 && this.fragment.nodes[0].node.type === 'Text') {
let text = string_literal(( /** @type {import('../Text.js').default} */(this.fragment.nodes[0])).data);
let text = string_literal(
/** @type {import('../Text.js').default} */ (this.fragment.nodes[0]).data
);
if (hydratable) {
const variable = block.get_unique_name('textContent');
block.add_variable(variable, text);
@ -467,10 +514,11 @@ export default class ElementWrapper extends Wrapper {
}
block.chunks.create.push(b`${node}.textContent = ${text};`);
if (hydratable) {
block.chunks.claim.push(b `if (@get_svelte_dataset(${node}) !== "${this.node.hash()}") ${node}.textContent = ${text};`);
}
block.chunks.claim.push(
b`if (@get_svelte_dataset(${node}) !== "${this.node.hash()}") ${node}.textContent = ${text};`
);
}
else {
} else {
const state = {
quasi: {
type: 'TemplateElement',
@ -484,8 +532,14 @@ export default class ElementWrapper extends Wrapper {
};
const can_use_raw_text = !this.node.can_use_innerhtml && can_use_textcontent;
to_html(
/** @type {unknown} */ /** @type {Array<ElementWrapper | import('../Comment.js').default | import('../Text.js').default>} */ ((this.fragment.nodes)), block, literal, state, can_use_raw_text);
/** @type {unknown} */ /** @type {Array<ElementWrapper | import('../Comment.js').default | import('../Text.js').default>} */ (
this.fragment.nodes
),
block,
literal,
state,
can_use_raw_text
);
literal.quasis.push(/** @type {any} */ (state.quasi));
if (hydratable) {
const variable = block.get_unique_name('textContent');
@ -495,18 +549,20 @@ export default class ElementWrapper extends Wrapper {
const property = this.node.can_use_innerhtml ? 'innerHTML' : 'textContent';
block.chunks.create.push(b`${node}.${property} = ${literal};`);
if (hydratable) {
block.chunks.claim.push(b `if (@get_svelte_dataset(${node}) !== "${this.node.hash()}") ${node}.${property} = ${literal};`);
}
block.chunks.claim.push(
b`if (@get_svelte_dataset(${node}) !== "${this.node.hash()}") ${node}.${property} = ${literal};`
);
}
}
else {
} else {
this.fragment.nodes.forEach((child) => {
child.render(block, this.node.name === 'template' ? x`${node}.content` : node, nodes, {
element_data_name: this.element_data_name
});
});
}
const event_handler_or_binding_uses_context = this.bindings.some((binding) => binding.handler.uses_context) ||
const event_handler_or_binding_uses_context =
this.bindings.some((binding) => binding.handler.uses_context) ||
this.node.handlers.some((handler) => handler.uses_context) ||
this.node.actions.some((action) => action.uses_context);
if (event_handler_or_binding_uses_context) {
@ -514,8 +570,7 @@ export default class ElementWrapper extends Wrapper {
}
if (this.node.is_dynamic_element) {
this.add_dynamic_element_attributes(block);
}
else {
} else {
this.add_attributes(block);
}
this.add_directives_in_order(block);
@ -525,11 +580,17 @@ export default class ElementWrapper extends Wrapper {
this.add_styles(block);
this.add_manual_style_scoping(block);
if (nodes && hydratable && !this.void && !can_optimise_to_html_string) {
block.chunks.claim.push(b `${this.node.children.length > 0 ? nodes : children}.forEach(@detach);`);
block.chunks.claim.push(
b`${this.node.children.length > 0 ? nodes : children}.forEach(@detach);`
);
}
if (renderer.options.dev) {
const loc = renderer.locate(this.node.start);
block.chunks.hydrate.push(b `@add_location(${this.var}, ${renderer.file_var}, ${loc.line - 1}, ${loc.column}, ${this.node.start});`);
block.chunks.hydrate.push(
b`@add_location(${this.var}, ${renderer.file_var}, ${loc.line - 1}, ${loc.column}, ${
this.node.start
});`
);
}
block.renderer.dirty(this.node.tag_expr.dynamic_dependencies());
}
@ -563,22 +624,28 @@ export default class ElementWrapper extends Wrapper {
get_claim_statement(block, nodes, to_optimise_hydration) {
const attributes = this.attributes
.filter((attr) => !(attr instanceof SpreadAttributeWrapper) && !attr.property_name)
.map((attr) => p `${( /** @type {import('./StyleAttribute.js').default | import('./Attribute.js').default} */(attr)).name}: true`);
.map(
(attr) =>
p`${
/** @type {import('./StyleAttribute.js').default | import('./Attribute.js').default} */ (
attr
).name
}: true`
);
/** @type {Class<x>>} */
let reference;
if (this.node.tag_expr.node.type === 'Literal') {
if (this.node.namespace) {
reference = `"${this.node.tag_expr.node.value}"`;
} else {
reference = `"${(
/** @type {String} */ (this.node.tag_expr.node.value) || ''
).toUpperCase()}"`;
}
else {
reference = `"${(( /** @type {String} */(this.node.tag_expr.node.value)) || '').toUpperCase()}"`;
}
}
else if (this.node.namespace) {
} else if (this.node.namespace) {
reference = x`${this.node.tag_expr.manipulate(block)}`;
}
else {
} else {
reference = x`(${this.node.tag_expr.manipulate(block)} || 'null').toUpperCase()`;
}
if (to_optimise_hydration) {
@ -586,8 +653,7 @@ export default class ElementWrapper extends Wrapper {
}
if (this.node.namespace === namespaces.svg) {
return x`@claim_svg_element(${nodes}, ${reference}, { ${attributes} })`;
}
else {
} else {
return x`@claim_element(${nodes}, ${reference}, { ${attributes} })`;
}
}
@ -608,38 +674,30 @@ export default class ElementWrapper extends Wrapper {
function getOrder(item) {
if (item instanceof EventHandler) {
return item.node.start;
}
else if (item instanceof Binding) {
} else if (item instanceof Binding) {
return item.node.start;
}
else if (item instanceof Action) {
} else if (item instanceof Action) {
return item.start;
}
else {
} else {
return item.bindings[0].node.start;
}
}
(
/** @type {OrderedAttribute[]} */ ([
...binding_groups,
...this.event_handlers,
this_binding,
...this.node.actions
]))
])
.filter(Boolean)
.sort((a, b) => getOrder(a) - getOrder(b))
.forEach((item) => {
if (item instanceof EventHandler) {
add_event_handler(block, this.var, item);
}
else if (item instanceof Binding) {
} else if (item instanceof Binding) {
this.add_this_binding(block, item);
}
else if (item instanceof Action) {
} else if (item instanceof Action) {
add_action(block, this.var, item);
}
else {
} else {
this.add_bindings(block, item);
}
});
@ -651,15 +709,15 @@ export default class ElementWrapper extends Wrapper {
*/
add_bindings(block, binding_group) {
const { renderer } = this;
if (binding_group.bindings.length === 0)
return;
if (binding_group.bindings.length === 0) return;
renderer.component.has_reactive_assignments = true;
const lock = binding_group.bindings.some((binding) => binding.needs_lock)
? block.get_unique_name(`${this.var.name}_updating`)
: null;
if (lock)
block.add_variable(lock, x `false`);
const handler = renderer.component.get_unique_name(`${this.var.name}_${binding_group.events.join('_')}_handler`);
if (lock) block.add_variable(lock, x`false`);
const handler = renderer.component.get_unique_name(
`${this.var.name}_${binding_group.events.join('_')}_handler`
);
renderer.add_to_context(handler.name);
// TODO figure out how to handle locks
const needs_lock = binding_group.bindings.some((binding) => binding.needs_lock);
@ -702,8 +760,7 @@ export default class ElementWrapper extends Wrapper {
${callee}.call(${this.var}, ${args});
}
`);
}
else {
} else {
block.chunks.init.push(b`
function ${handler}() {
${needs_lock && b`${lock} = true;`}
@ -727,45 +784,60 @@ export default class ElementWrapper extends Wrapper {
}
`);
binding_group.events.forEach((name) => {
if ([
if (
[
'elementresize',
'elementresizecontentbox',
'elementresizeborderbox',
'elementresizedevicepixelcontentbox'
].indexOf(name) !== -1) {
].indexOf(name) !== -1
) {
const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`);
block.add_variable(resize_listener);
// Can't dynamically do `@fn[name]`, code-red doesn't know how to resolve it
switch (name) {
case 'elementresize':
block.chunks.mount.push(b `${resize_listener} = @add_iframe_resize_listener(${this.var}, ${callee}.bind(${this.var}));`);
block.chunks.mount.push(
b`${resize_listener} = @add_iframe_resize_listener(${this.var}, ${callee}.bind(${this.var}));`
);
break;
case 'elementresizecontentbox':
block.chunks.mount.push(b `${resize_listener} = @resize_observer_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`);
block.chunks.mount.push(
b`${resize_listener} = @resize_observer_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`
);
break;
case 'elementresizeborderbox':
block.chunks.mount.push(b `${resize_listener} = @resize_observer_border_box.observe(${this.var}, ${callee}.bind(${this.var}));`);
block.chunks.mount.push(
b`${resize_listener} = @resize_observer_border_box.observe(${this.var}, ${callee}.bind(${this.var}));`
);
break;
case 'elementresizedevicepixelcontentbox':
block.chunks.mount.push(b `${resize_listener} = @resize_observer_device_pixel_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`);
block.chunks.mount.push(
b`${resize_listener} = @resize_observer_device_pixel_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`
);
break;
}
block.chunks.destroy.push(b`${resize_listener}();`);
}
else {
} else {
block.event_listeners.push(x`@listen(${this.var}, "${name}", ${callee})`);
}
});
const some_initial_state_is_undefined = binding_group.bindings
.map((binding) => x`${binding.snippet} === void 0`)
.reduce((lhs, rhs) => x`${lhs} || ${rhs}`);
const should_initialise = this.node.name === 'select' ||
binding_group.bindings.find((binding) => binding.node.name === 'indeterminate' ||
const should_initialise =
this.node.name === 'select' ||
binding_group.bindings.find(
(binding) =>
binding.node.name === 'indeterminate' ||
is_name_contenteditable(binding.node.name) ||
binding.is_readonly_media_attribute());
binding.is_readonly_media_attribute()
);
if (should_initialise) {
const callback = has_local_function ? handler : x`() => ${callee}.call(${this.var})`;
block.chunks.hydrate.push(b `if (${some_initial_state_is_undefined}) @add_render_callback(${callback});`);
block.chunks.hydrate.push(
b`if (${some_initial_state_is_undefined}) @add_render_callback(${callback});`
);
}
if (binding_group.events[0] === 'elementresize') {
block.chunks.hydrate.push(b`@add_render_callback(() => ${callee}.call(${this.var}));`);
@ -793,8 +865,7 @@ export default class ElementWrapper extends Wrapper {
if (attribute.node.name === 'class') {
const dependencies = attribute.node.get_dependencies();
push_array(this.class_dependencies, dependencies);
}
else if (attribute.node.name === 'style') {
} else if (attribute.node.name === 'style') {
add_to_set(this.dynamic_style_dependencies, attribute.node.get_dependencies());
}
});
@ -819,12 +890,13 @@ export default class ElementWrapper extends Wrapper {
const snippet = attr.node.expression.manipulate(block);
initial_props.push(snippet);
updates.push(condition ? x`${condition} && ${snippet}` : snippet);
}
else {
} else {
const name = attr.property_name || attr.name;
initial_props.push(x`{ ${name}: ${attr.get_init(block, attr.get_value(block))} }`);
const snippet = x`{ ${name}: ${attr.should_cache ? attr.last : attr.get_value(block)} }`;
updates.push(condition ? x `${attr.get_dom_update_conditions(block, condition)} && ${snippet}` : snippet);
updates.push(
condition ? x`${attr.get_dom_update_conditions(block, condition)} && ${snippet}` : snippet
);
}
});
block.chunks.init.push(b`
@ -835,7 +907,8 @@ export default class ElementWrapper extends Wrapper {
${this.element_data_name} = @assign(${this.element_data_name}, ${levels}[#i]);
}
`);
const fn = this.node.namespace === namespaces.svg
const fn =
this.node.namespace === namespaces.svg
? x`@set_svg_attributes`
: this.node.is_dynamic_element
? x`@set_dynamic_element_data(${this.node.tag_expr.manipulate(block)})`
@ -860,17 +933,22 @@ export default class ElementWrapper extends Wrapper {
'value' in ${this.element_data_name} && (${this.element_data_name}.multiple ? @select_options : @select_option)(${this.var}, ${this.element_data_name}.value);
`);
block.chunks.update.push(b`
if (${block.renderer.dirty(Array.from(dependencies))} && 'value' in ${this.element_data_name}) (${this.element_data_name}.multiple ? @select_options : @select_option)(${this.var}, ${this.element_data_name}.value);
if (${block.renderer.dirty(Array.from(dependencies))} && 'value' in ${this.element_data_name}) (${
this.element_data_name
}.multiple ? @select_options : @select_option)(${this.var}, ${this.element_data_name}.value);
`);
}
else if (this.node.name === 'input' &&
this.attributes.find((attr) => attr.node.name === 'value')) {
} else if (
this.node.name === 'input' &&
this.attributes.find((attr) => attr.node.name === 'value')
) {
const type = this.node.get_static_attribute_value('type');
if (type === null ||
if (
type === null ||
type === '' ||
type === 'text' ||
type === 'email' ||
type === 'password') {
type === 'password'
) {
block.chunks.mount.push(b`
if ('value' in ${this.element_data_name}) {
${this.var}.value = ${this.element_data_name}.value;
@ -892,8 +970,7 @@ export default class ElementWrapper extends Wrapper {
/** @param {import('../../Block.js').default} block */
add_dynamic_element_attributes(block) {
if (this.attributes.length === 0)
return;
if (this.attributes.length === 0) return;
if (this.has_dynamic_attribute) {
this.add_spread_attributes(block);
return;
@ -902,13 +979,13 @@ export default class ElementWrapper extends Wrapper {
this.attributes.forEach((attr) => {
if (attr instanceof SpreadAttributeWrapper) {
static_attributes.push({ type: 'SpreadElement', argument: attr.node.expression.node });
}
else {
} else {
const name = attr.property_name || attr.name;
static_attributes.push(p`${name}: ${attr.get_value(block)}`);
}
});
const fn = this.node.namespace === namespaces.svg
const fn =
this.node.namespace === namespaces.svg
? x`@set_svg_attributes`
: this.node.is_dynamic_element
? x`@set_dynamic_element_data(${this.node.tag_expr.manipulate(block)})`
@ -919,8 +996,7 @@ export default class ElementWrapper extends Wrapper {
/** @param {import('../../Block.js').default} block */
add_transitions(block) {
const { intro, outro } = this.node;
if (!intro && !outro)
return;
if (!intro && !outro) return;
if (intro === outro) {
// bidirectional transition
const name = block.get_unique_name(`${this.var.name}_transition`);
@ -949,14 +1025,12 @@ export default class ElementWrapper extends Wrapper {
${outro_block}
}
`);
}
else {
} else {
block.chunks.intro.push(intro_block);
block.chunks.outro.push(outro_block);
}
block.chunks.destroy.push(b`if (detaching && ${name}) ${name}.end();`);
}
else {
} else {
const intro_name = intro && block.get_unique_name(`${this.var.name}_intro`);
const outro_name = outro && block.get_unique_name(`${this.var.name}_outro`);
if (intro) {
@ -974,8 +1048,7 @@ export default class ElementWrapper extends Wrapper {
});
`;
block.chunks.outro.push(b`if (${intro_name}) ${intro_name}.invalidate();`);
}
else {
} else {
intro_block = b`
if (!${intro_name}) {
@add_render_callback(() => {
@ -1019,16 +1092,17 @@ export default class ElementWrapper extends Wrapper {
block.chunks.destroy.push(b`if (detaching && ${outro_name}) ${outro_name}.end();`);
}
}
if ((intro && intro.expression && intro.expression.dependencies.size) ||
(outro && outro.expression && outro.expression.dependencies.size)) {
if (
(intro && intro.expression && intro.expression.dependencies.size) ||
(outro && outro.expression && outro.expression.dependencies.size)
) {
block.maintain_context = true;
}
}
/** @param {import('../../Block.js').default} block */
add_animation(block) {
if (!this.node.animation)
return;
if (!this.node.animation) return;
const { outro } = this.node;
const rect = block.get_unique_name('rect');
const stop_animation = block.get_unique_name('stop_animation');
@ -1058,8 +1132,7 @@ export default class ElementWrapper extends Wrapper {
block.chunks.measure.push(b`${params_var} = ${params};`);
params = params_var;
}
}
else {
} else {
params = x`{}`;
}
const name = this.renderer.reference(this.node.animation.name);
@ -1079,8 +1152,7 @@ export default class ElementWrapper extends Wrapper {
if (expression) {
snippet = expression.manipulate(block);
dependencies = expression.dependencies;
}
else {
} else {
snippet = name;
dependencies = new Set([name]);
}
@ -1088,8 +1160,7 @@ export default class ElementWrapper extends Wrapper {
block.chunks.hydrate.push(updater);
if ((this.node.is_dynamic_element || has_spread) && this.has_dynamic_attribute) {
block.chunks.update.push(updater);
}
else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
} else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
const all_dependencies = this.class_dependencies.concat(...dependencies);
let condition = block.renderer.dirty(all_dependencies);
if (block.has_outros) {
@ -1133,7 +1204,9 @@ export default class ElementWrapper extends Wrapper {
cached_snippet = block.get_unique_name(`style_${name.replace(regex_minus_signs, '_')}`);
block.add_variable(cached_snippet, snippet);
}
const updater = b `@set_style(${this.var}, "${name}", ${should_cache ? cached_snippet : snippet}, ${important ? 1 : null})`;
const updater = b`@set_style(${this.var}, "${name}", ${
should_cache ? cached_snippet : snippet
}, ${important ? 1 : null})`;
block.chunks.hydrate.push(updater);
const self_deps = expression.dynamic_dependencies();
const all_deps = new Set([...self_deps, ...this.dynamic_style_dependencies]);
@ -1148,10 +1221,8 @@ export default class ElementWrapper extends Wrapper {
}`);
}
block.chunks.update.push(updater);
}
else {
if (all_deps.size === 0)
return;
} else {
if (all_deps.size === 0) return;
if (should_cache) {
condition = x`${condition} && ${cached_snippet} !== (${cached_snippet} = ${snippet})`;
}
@ -1196,8 +1267,7 @@ function to_html(wrappers, block, literal, state, can_use_raw_text) {
wrappers.forEach((wrapper) => {
if (wrapper instanceof CommentWrapper) {
state.quasi.value.raw += wrapper.text();
}
else if (wrapper instanceof TextWrapper) {
} else if (wrapper instanceof TextWrapper) {
// Don't add the <pre>/<textarea> newline logic here because pre/textarea.innerHTML
// would keep the leading newline, too, only someParent.innerHTML = '..<pre/textarea>..' won't
if (wrapper.use_space()) {
@ -1205,30 +1275,30 @@ function to_html(wrappers, block, literal, state, can_use_raw_text) {
state.quasi.value.raw += ' ';
return;
}
const parent = /** @type {import('../../../nodes/Element.js').default} */ (wrapper.node.parent);
const raw = parent && (parent.name === 'script' || parent.name === 'style' || can_use_raw_text);
const parent = /** @type {import('../../../nodes/Element.js').default} */ (
wrapper.node.parent
);
const raw =
parent && (parent.name === 'script' || parent.name === 'style' || can_use_raw_text);
state.quasi.value.raw += (raw ? wrapper.data : escape_html(wrapper.data))
.replace(regex_backslashes, '\\\\')
.replace(regex_backticks, '\\`')
.replace(regex_dollar_signs, '\\$');
}
else if (wrapper instanceof MustacheTagWrapper || wrapper instanceof RawMustacheTagWrapper) {
} else if (wrapper instanceof MustacheTagWrapper || wrapper instanceof RawMustacheTagWrapper) {
literal.quasis.push(state.quasi);
literal.expressions.push(wrapper.node.expression.manipulate(block));
state.quasi = {
type: 'TemplateElement',
value: { raw: '' }
};
}
else if (wrapper.node.name === 'noscript') {
} else if (wrapper.node.name === 'noscript') {
// do nothing
}
else {
} else {
const nodeName = wrapper.node.name;
// element
state.quasi.value.raw += `<${nodeName}`;
const is_empty_textarea = nodeName === 'textarea' && wrapper.fragment.nodes.length === 0;
( /** @type {ElementWrapper} */(wrapper)).attributes.forEach((attr) => {
/** @type {ElementWrapper} */ (wrapper).attributes.forEach((attr) => {
if (is_empty_textarea && attr.node.name === 'value') {
// The value attribute of <textarea> renders as content.
return;
@ -1243,9 +1313,11 @@ function to_html(wrappers, block, literal, state, can_use_raw_text) {
// 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
const first = wrapper.fragment.nodes[0];
if (first &&
if (
first &&
first.node.type === 'Text' &&
regex_starts_with_newline.test(first.node.data)) {
regex_starts_with_newline.test(first.node.data)
) {
state.quasi.value.raw += '\n';
}
}
@ -1263,11 +1335,15 @@ function to_html(wrappers, block, literal, state, can_use_raw_text) {
}
}
to_html(
/** @type {Array<ElementWrapper | import('../Text.js').default>} */ (wrapper.fragment.nodes), block, literal, state);
/** @type {Array<ElementWrapper | import('../Text.js').default>} */ (
wrapper.fragment.nodes
),
block,
literal,
state
);
state.quasi.value.raw += `</${nodeName}>`;
}
else {
} else {
state.quasi.value.raw += '/>';
}
}
@ -1284,8 +1360,7 @@ function to_html_for_attr_value(attr, block, literal, state) {
attr.node.chunks.forEach((chunk) => {
if (chunk.type === 'Text') {
state.quasi.value.raw += escape_html(chunk.data);
}
else {
} else {
literal.quasis.push(state.quasi);
literal.expressions.push(chunk.manipulate(block));
state.quasi = {
@ -1296,9 +1371,6 @@ function to_html_for_attr_value(attr, block, literal, state) {
});
}
/** @typedef {Object} BindingGroup
* @property {string[]} events
* @property {Binding[]} bindings

Write Preview
Loading…
Cancel
Save