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/InlineComponent/index.js

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 0ef76fa72e
commit a3e7f83790
1 changed files with 502 additions and 429 deletions
Show Stats Download Patch File Download Diff File

187
src/compiler/compile/render_dom/wrappers/InlineComponent/index.js
Unescape View File

@ -18,7 +18,6 @@ const regex_invalid_variable_identifier_characters = /[^a-zA-Z_$]/g;
/** @extends Wrapper */
export default class InlineComponentWrapper extends Wrapper {
/** @type {import('estree').Identifier} */
var;
@ -70,7 +69,8 @@ export default class InlineComponentWrapper extends Wrapper {
? renderer.component.name.name
: this.node.name === 'svelte:component'
? 'switch_instance'
: sanitize(this.node.name)).toLowerCase()
: sanitize(this.node.name)
).toLowerCase()
};
if (this.node.children.length) {
this.node.lets.forEach((l) => {
@ -78,8 +78,17 @@ export default class InlineComponentWrapper extends Wrapper {
renderer.add_to_context(name, true);
});
});
this.children = this.node.children.map((child) => new SlotTemplateWrapper(renderer, block, this,
/** @type {import('../../../nodes/SlotTemplate.js').default} */ (child), strip_whitespace, next_sibling));
this.children = this.node.children.map(
(child) =>
new SlotTemplateWrapper(
renderer,
block,
this,
/** @type {import('../../../nodes/SlotTemplate.js').default} */ (child),
strip_whitespace,
next_sibling
)
);
}
block.add_outro();
}
@ -154,11 +163,14 @@ export default class InlineComponentWrapper extends Wrapper {
if (has_css_custom_properties) {
block.add_variable(css_custom_properties_wrapper);
}
const initial_props = this.slots.size > 0
const initial_props =
this.slots.size > 0
? [
p`$$slots: {
${Array.from(this.slots).map(([name, slot]) => {
return p `${name}: [${slot.block.name}, ${slot.get_context || null}, ${slot.get_changes || null}]`;
return p`${name}: [${slot.block.name}, ${slot.get_context || null}, ${
slot.get_changes || null
}]`;
})}
}`,
p`$$scope: {
@ -175,8 +187,7 @@ export default class InlineComponentWrapper extends Wrapper {
if (this.node.attributes.length || this.node.bindings.length || initial_props.length) {
if (!uses_spread && this.node.bindings.length === 0) {
component_opts.properties.push(p`props: ${attribute_object}`);
}
else {
} else {
props = block.get_unique_name(`${name.name}_props`);
component_opts.properties.push(p`props: ${props}`);
}
@ -193,15 +204,16 @@ export default class InlineComponentWrapper extends Wrapper {
slot.block.dependencies.forEach((name) => {
const is_let = slot.scope.is_let(name);
const variable = renderer.component.var_lookup.get(name);
if (is_let || is_dynamic(variable))
fragment_dependencies.add(name);
if (is_let || is_dynamic(variable)) fragment_dependencies.add(name);
});
});
const dynamic_attributes = this.node.attributes.filter((a) => a.get_dependencies().length > 0);
if (!uses_spread &&
if (
!uses_spread &&
(dynamic_attributes.length > 0 ||
this.node.bindings.length > 0 ||
fragment_dependencies.size > 0)) {
fragment_dependencies.size > 0)
) {
updates.push(b`const ${name_changes} = {};`);
}
if (this.node.attributes.length) {
@ -217,7 +229,8 @@ export default class InlineComponentWrapper extends Wrapper {
});
this.node.attributes.forEach((attr, i) => {
const { name, dependencies } = attr;
const condition = dependencies.size > 0 && dependencies.size !== all_dependencies.size
const condition =
dependencies.size > 0 && dependencies.size !== all_dependencies.size
? renderer.dirty(Array.from(dependencies))
: null;
const unchanged = dependencies.size === 0;
@ -232,17 +245,18 @@ export default class InlineComponentWrapper extends Wrapper {
value_object = x`@get_spread_object(${value})`;
}
change_object = value_object;
}
else {
} else {
const obj = x`{ ${name}: ${attr.get_value(block)} }`;
initial_props.push(obj);
change_object = obj;
}
changes.push(unchanged
changes.push(
unchanged
? x`${levels}[${i}]`
: condition
? x`${condition} && ${change_object}`
: change_object);
: change_object
);
});
block.chunks.init.push(b`
const ${levels} = [
@ -261,14 +275,12 @@ export default class InlineComponentWrapper extends Wrapper {
${changes}
]) : {}
`);
}
else {
} else {
updates.push(b`
const ${name_changes} = {};
`);
}
}
else {
} else {
dynamic_attributes.forEach((attribute) => {
const dependencies = attribute.get_dependencies();
if (dependencies.length > 0) {
@ -361,8 +373,7 @@ export default class InlineComponentWrapper extends Wrapper {
const munged_handlers = this.node.handlers.map((handler) => {
const event_handler = new EventHandler(handler, this);
let snippet = event_handler.get_snippet(block);
if (handler.modifiers.has('once'))
snippet = x `@once(${snippet})`;
if (handler.modifiers.has('once')) snippet = x`@once(${snippet})`;
return b`${name}.$on("${handler.name}", ${snippet});`;
});
const mount_target = has_css_custom_properties
@ -377,15 +388,22 @@ export default class InlineComponentWrapper extends Wrapper {
const snippet = this.node.expression.manipulate(block);
const dependencies = this.node.expression.dynamic_dependencies();
if (has_css_custom_properties) {
this.set_css_custom_properties(block, css_custom_properties_wrapper, css_custom_properties_wrapper_element, is_svg_namespace);
this.set_css_custom_properties(
block,
css_custom_properties_wrapper,
css_custom_properties_wrapper_element,
is_svg_namespace
);
}
block.chunks.init.push(b`
var ${switch_value} = ${snippet};
function ${switch_props}(#ctx) {
${(this.node.attributes.length > 0 || this.node.bindings.length > 0) &&
${
(this.node.attributes.length > 0 || this.node.bindings.length > 0) &&
b`
${props && b `let ${props} = ${attribute_object};`}`}
${props && b`let ${props} = ${attribute_object};`}`
}
${statements}
return ${component_opts};
}
@ -399,12 +417,26 @@ export default class InlineComponentWrapper extends Wrapper {
`);
block.chunks.create.push(b`if (${name}) @create_component(${name}.$$.fragment);`);
if (css_custom_properties_wrapper)
this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
block.chunks.mount.push(b `if (${name}) @mount_component(${name}, ${mount_target}, ${mount_anchor});`);
this.create_css_custom_properties_wrapper_mount_chunk(
block,
parent_node,
css_custom_properties_wrapper
);
block.chunks.mount.push(
b`if (${name}) @mount_component(${name}, ${mount_target}, ${mount_anchor});`
);
if (to_claim) {
if (css_custom_properties_wrapper)
claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper, css_custom_properties_wrapper_element, is_svg_namespace);
block.chunks.claim.push(b `if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`);
claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(
block,
claim_nodes,
css_custom_properties_wrapper,
css_custom_properties_wrapper_element,
is_svg_namespace
);
block.chunks.claim.push(
b`if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`
);
}
if (updates.length) {
block.chunks.update.push(b`
@ -416,7 +448,8 @@ export default class InlineComponentWrapper extends Wrapper {
const update_mount_node = has_css_custom_properties
? css_custom_properties_wrapper
: this.get_update_mount_node(tmp_anchor);
const update_insert = css_custom_properties_wrapper &&
const update_insert =
css_custom_properties_wrapper &&
(tmp_anchor.name !== 'null'
? b`@insert(${tmp_anchor}.parentNode, ${css_custom_properties_wrapper}, ${tmp_anchor});`
: b`@insert(${parent_node}, ${css_custom_properties_wrapper}, ${tmp_anchor});`);
@ -457,16 +490,20 @@ export default class InlineComponentWrapper extends Wrapper {
if (${name}) @transition_in(${name}.$$.fragment, #local);
`);
block.chunks.outro.push(b`if (${name}) @transition_out(${name}.$$.fragment, #local);`);
block.chunks.destroy.push(b `if (${name}) @destroy_component(${name}, ${parent_node ? null : 'detaching'});`);
}
else {
const expression = this.node.name === 'svelte:self'
block.chunks.destroy.push(
b`if (${name}) @destroy_component(${name}, ${parent_node ? null : 'detaching'});`
);
} else {
const expression =
this.node.name === 'svelte:self'
? component.name
: this.renderer.reference(string_to_member_expression(this.node.name));
block.chunks.init.push(b`
${(this.node.attributes.length > 0 || this.node.bindings.length > 0) &&
${
(this.node.attributes.length > 0 || this.node.bindings.length > 0) &&
b`
${props && b `let ${props} = ${attribute_object};`}`}
${props && b`let ${props} = ${attribute_object};`}`
}
${statements}
${name} = new ${expression}(${component_opts});
@ -474,15 +511,30 @@ export default class InlineComponentWrapper extends Wrapper {
${munged_handlers}
`);
if (has_css_custom_properties) {
this.set_css_custom_properties(block, css_custom_properties_wrapper, css_custom_properties_wrapper_element, is_svg_namespace);
this.set_css_custom_properties(
block,
css_custom_properties_wrapper,
css_custom_properties_wrapper_element,
is_svg_namespace
);
}
block.chunks.create.push(b`@create_component(${name}.$$.fragment);`);
if (css_custom_properties_wrapper)
this.create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper);
this.create_css_custom_properties_wrapper_mount_chunk(
block,
parent_node,
css_custom_properties_wrapper
);
block.chunks.mount.push(b`@mount_component(${name}, ${mount_target}, ${mount_anchor});`);
if (to_claim) {
if (css_custom_properties_wrapper)
claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(block, claim_nodes, css_custom_properties_wrapper, css_custom_properties_wrapper_element, is_svg_namespace);
claim_nodes = this.create_css_custom_properties_wrapper_claim_chunk(
block,
claim_nodes,
css_custom_properties_wrapper,
css_custom_properties_wrapper_element,
is_svg_namespace
);
block.chunks.claim.push(b`@claim_component(${name}.$$.fragment, ${claim_nodes});`);
}
block.chunks.intro.push(b`
@ -507,18 +559,23 @@ export default class InlineComponentWrapper extends Wrapper {
* @param {import('estree').Identifier} parent_node
* @param {import('estree').Identifier | null} css_custom_properties_wrapper
*/
create_css_custom_properties_wrapper_mount_chunk(block, parent_node, css_custom_properties_wrapper) {
create_css_custom_properties_wrapper_mount_chunk(
block,
parent_node,
css_custom_properties_wrapper
) {
if (parent_node) {
block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
if (is_head(parent_node)) {
block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
}
}
else {
} else {
block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
// TODO we eventually need to consider what happens to elements
// that belong to the same outgroup as an outroing element...
block.chunks.destroy.push(b `if (detaching && ${this.var}) @detach(${css_custom_properties_wrapper});`);
block.chunks.destroy.push(
b`if (detaching && ${this.var}) @detach(${css_custom_properties_wrapper});`
);
}
}
@ -530,7 +587,13 @@ export default class InlineComponentWrapper extends Wrapper {
* @param {string} css_custom_properties_wrapper_element
* @param {boolean} is_svg_namespace
*/
create_css_custom_properties_wrapper_claim_chunk(block, parent_nodes, css_custom_properties_wrapper, css_custom_properties_wrapper_element, is_svg_namespace) {
create_css_custom_properties_wrapper_claim_chunk(
block,
parent_nodes,
css_custom_properties_wrapper,
css_custom_properties_wrapper_element,
is_svg_namespace
) {
const nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
const claim_element = is_svg_namespace ? x`@claim_svg_element` : x`@claim_element`;
block.chunks.claim.push(b`
@ -547,25 +610,37 @@ export default class InlineComponentWrapper extends Wrapper {
* @param {string} css_custom_properties_wrapper_element
* @param {boolean} is_svg_namespace
*/
set_css_custom_properties(block, css_custom_properties_wrapper, css_custom_properties_wrapper_element, is_svg_namespace) {
set_css_custom_properties(
block,
css_custom_properties_wrapper,
css_custom_properties_wrapper_element,
is_svg_namespace
) {
const element = is_svg_namespace ? x`@svg_element` : x`@element`;
block.chunks.create.push(b `${css_custom_properties_wrapper} = ${element}("${css_custom_properties_wrapper_element}");`);
block.chunks.create.push(
b`${css_custom_properties_wrapper} = ${element}("${css_custom_properties_wrapper_element}");`
);
if (!is_svg_namespace)
block.chunks.hydrate.push(b `@set_style(${css_custom_properties_wrapper}, "display", "contents");`);
block.chunks.hydrate.push(
b`@set_style(${css_custom_properties_wrapper}, "display", "contents");`
);
this.node.css_custom_properties.forEach((attr) => {
const dependencies = attr.get_dependencies();
const should_cache = attr.should_cache();
const last = should_cache &&
block.get_unique_name(`${attr.name.replace(regex_invalid_variable_identifier_characters, '_')}_last`);
if (should_cache)
block.add_variable(last);
const last =
should_cache &&
block.get_unique_name(
`${attr.name.replace(regex_invalid_variable_identifier_characters, '_')}_last`
);
if (should_cache) block.add_variable(last);
const value = attr.get_value(block);
const init = should_cache ? x`${last} = ${value}` : value;
block.chunks.hydrate.push(b `@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${init});`);
block.chunks.hydrate.push(
b`@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${init});`
);
if (dependencies.length > 0) {
let condition = block.renderer.dirty(dependencies);
if (should_cache)
condition = x `${condition} && (${last} !== (${last} = ${value}))`;
if (should_cache) condition = x`${condition} && (${last} !== (${last} = ${value}))`;
block.chunks.update.push(b`
if (${condition}) {
@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value});
@ -576,7 +651,6 @@ export default class InlineComponentWrapper extends Wrapper {
}
}
/**
* @typedef {{
* block: Block;
@ -585,4 +659,3 @@ export default class InlineComponentWrapper extends Wrapper {
* get_changes?: Node;
* }} SlotDefinition
*/

Write Preview
Loading…
Cancel
Save