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/Slot.js

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 6bdbfbb735
commit fb06ba3bae
1 changed files with 203 additions and 178 deletions
Show Stats Download Patch File Download Diff File

91
src/compiler/compile/render_dom/wrappers/Slot.js
Unescape View File

@ -10,7 +10,6 @@ import create_debugging_comment from './shared/create_debugging_comment.js';
/** @extends Wrapper */ /** @extends Wrapper */
export default class SlotWrapper extends Wrapper { export default class SlotWrapper extends Wrapper {
/** @type {import('../../nodes/Slot.js').default} */ /** @type {import('../../nodes/Slot.js').default} */
node; node;
@ -47,7 +46,14 @@ export default class SlotWrapper extends Wrapper {
}); });
renderer.blocks.push(this.fallback); renderer.blocks.push(this.fallback);
} }
this.fragment = new FragmentWrapper(renderer, this.fallback, node.children, this, strip_whitespace, next_sibling); this.fragment = new FragmentWrapper(
renderer,
this.fallback,
node.children,
this,
strip_whitespace,
next_sibling
);
this.node.values.forEach((attribute) => { this.node.values.forEach((attribute) => {
add_to_set(this.dependencies, attribute.dependencies); add_to_set(this.dependencies, attribute.dependencies);
}); });
@ -78,16 +84,24 @@ export default class SlotWrapper extends Wrapper {
/** @type {import('estree').Identifier | 'null'} */ /** @type {import('estree').Identifier | 'null'} */
let get_slot_context_fn; let get_slot_context_fn;
if (this.node.values.size > 0) { if (this.node.values.size > 0) {
get_slot_changes_fn = renderer.component.get_unique_name(`get_${sanitize(slot_name)}_slot_changes`); get_slot_changes_fn = renderer.component.get_unique_name(
get_slot_context_fn = renderer.component.get_unique_name(`get_${sanitize(slot_name)}_slot_context`); `get_${sanitize(slot_name)}_slot_changes`
);
get_slot_context_fn = renderer.component.get_unique_name(
`get_${sanitize(slot_name)}_slot_context`
);
const changes = /** @type {import('estree').ObjectExpression} */ (x`{}`); const changes = /** @type {import('estree').ObjectExpression} */ (x`{}`);
const spread_dynamic_dependencies = new Set(); const spread_dynamic_dependencies = new Set();
this.node.values.forEach((attribute) => { this.node.values.forEach((attribute) => {
if (attribute.type === 'Spread') { if (attribute.type === 'Spread') {
add_to_set(spread_dynamic_dependencies, Array.from(attribute.dependencies).filter((name) => this.is_dependency_dynamic(name))); add_to_set(
} spread_dynamic_dependencies,
else { Array.from(attribute.dependencies).filter((name) => this.is_dependency_dynamic(name))
const dynamic_dependencies = Array.from(attribute.dependencies).filter((name) => this.is_dependency_dynamic(name)); );
} else {
const dynamic_dependencies = Array.from(attribute.dependencies).filter((name) =>
this.is_dependency_dynamic(name)
);
if (dynamic_dependencies.length > 0) { if (dynamic_dependencies.length > 0) {
changes.properties.push(p`${attribute.name}: ${renderer.dirty(dynamic_dependencies)}`); changes.properties.push(p`${attribute.name}: ${renderer.dirty(dynamic_dependencies)}`);
} }
@ -98,19 +112,26 @@ export default class SlotWrapper extends Wrapper {
const ${get_slot_context_fn} = #ctx => ${get_slot_data(this.node.values, block)}; const ${get_slot_context_fn} = #ctx => ${get_slot_data(this.node.values, block)};
`); `);
if (spread_dynamic_dependencies.size) { if (spread_dynamic_dependencies.size) {
get_slot_spread_changes_fn = renderer.component.get_unique_name(`get_${sanitize(slot_name)}_slot_spread_changes`); get_slot_spread_changes_fn = renderer.component.get_unique_name(
`get_${sanitize(slot_name)}_slot_spread_changes`
);
renderer.blocks.push(b` renderer.blocks.push(b`
const ${get_slot_spread_changes_fn} = #dirty => ${renderer.dirty(Array.from(spread_dynamic_dependencies))}; const ${get_slot_spread_changes_fn} = #dirty => ${renderer.dirty(
Array.from(spread_dynamic_dependencies)
)};
`); `);
} }
} } else {
else {
get_slot_changes_fn = 'null'; get_slot_changes_fn = 'null';
get_slot_context_fn = 'null'; get_slot_context_fn = 'null';
} }
let has_fallback = !!this.fallback; let has_fallback = !!this.fallback;
if (this.fallback) { if (this.fallback) {
this.fragment.render(this.fallback, null, /** @type {import('estree').Identifier} */ (x `#nodes`)); this.fragment.render(
this.fallback,
null,
/** @type {import('estree').Identifier} */ (x`#nodes`)
);
has_fallback = this.fallback.has_content(); has_fallback = this.fallback.has_content();
if (!has_fallback) { if (!has_fallback) {
renderer.remove_block(this.fallback); renderer.remove_block(this.fallback);
@ -123,7 +144,9 @@ export default class SlotWrapper extends Wrapper {
: slot; : slot;
block.chunks.init.push(b` block.chunks.init.push(b`
const ${slot_definition} = ${renderer.reference('#slots')}.${slot_name}; const ${slot_definition} = ${renderer.reference('#slots')}.${slot_name};
const ${slot} = @create_slot(${slot_definition}, #ctx, ${renderer.reference('$$scope')}, ${get_slot_context_fn}); const ${slot} = @create_slot(${slot_definition}, #ctx, ${renderer.reference(
'$$scope'
)}, ${get_slot_context_fn});
${has_fallback ? b`const ${slot_or_fallback} = ${slot} || ${this.fallback.name}(#ctx);` : null} ${has_fallback ? b`const ${slot_or_fallback} = ${slot} || ${this.fallback.name}(#ctx);` : null}
`); `);
block.chunks.create.push(b`if (${slot_or_fallback}) ${slot_or_fallback}.c();`); block.chunks.create.push(b`if (${slot_or_fallback}) ${slot_or_fallback}.c();`);
@ -137,7 +160,9 @@ export default class SlotWrapper extends Wrapper {
`); `);
block.chunks.intro.push(b`@transition_in(${slot_or_fallback}, #local);`); block.chunks.intro.push(b`@transition_in(${slot_or_fallback}, #local);`);
block.chunks.outro.push(b`@transition_out(${slot_or_fallback}, #local);`); block.chunks.outro.push(b`@transition_out(${slot_or_fallback}, #local);`);
const dynamic_dependencies = Array.from(this.dependencies).filter((name) => this.is_dependency_dynamic(name)); const dynamic_dependencies = Array.from(this.dependencies).filter((name) =>
this.is_dependency_dynamic(name)
);
const fallback_dynamic_dependencies = has_fallback const fallback_dynamic_dependencies = has_fallback
? Array.from(this.fallback.dependencies).filter((name) => this.is_dependency_dynamic(name)) ? Array.from(this.fallback.dependencies).filter((name) => this.is_dependency_dynamic(name))
: []; : [];
@ -157,17 +182,24 @@ export default class SlotWrapper extends Wrapper {
/** @type {import('estree').Node[]} */ /** @type {import('estree').Node[]} */
let slot_update; let slot_update;
if (all_dirty_condition) { if (all_dirty_condition) {
const dirty = x `${all_dirty_condition} ? @get_all_dirty_from_scope(${renderer.reference('$$scope')}) : @get_slot_changes(${slot_definition}, ${renderer.reference('$$scope')}, #dirty, ${get_slot_changes_fn})`; const dirty = x`${all_dirty_condition} ? @get_all_dirty_from_scope(${renderer.reference(
'$$scope'
)}) : @get_slot_changes(${slot_definition}, ${renderer.reference(
'$$scope'
)}, #dirty, ${get_slot_changes_fn})`;
slot_update = b` slot_update = b`
if (${slot}.p && ${condition}) { if (${slot}.p && ${condition}) {
@update_slot_base(${slot}, ${slot_definition}, #ctx, ${renderer.reference('$$scope')}, ${dirty}, ${get_slot_context_fn}); @update_slot_base(${slot}, ${slot_definition}, #ctx, ${renderer.reference(
'$$scope'
)}, ${dirty}, ${get_slot_context_fn});
} }
`; `;
} } else {
else {
slot_update = b` slot_update = b`
if (${slot}.p && ${condition}) { if (${slot}.p && ${condition}) {
@update_slot(${slot}, ${slot_definition}, #ctx, ${renderer.reference('$$scope')}, #dirty, ${get_slot_changes_fn}, ${get_slot_context_fn}); @update_slot(${slot}, ${slot_definition}, #ctx, ${renderer.reference(
'$$scope'
)}, #dirty, ${get_slot_changes_fn}, ${get_slot_context_fn});
} }
`; `;
} }
@ -177,7 +209,8 @@ export default class SlotWrapper extends Wrapper {
fallback_condition = x`!#current || ${fallback_condition}`; fallback_condition = x`!#current || ${fallback_condition}`;
fallback_dirty = x`!#current ? ${renderer.get_initial_dirty()} : ${fallback_dirty}`; fallback_dirty = x`!#current ? ${renderer.get_initial_dirty()} : ${fallback_dirty}`;
} }
const fallback_update = has_fallback && const fallback_update =
has_fallback &&
fallback_dynamic_dependencies.length > 0 && fallback_dynamic_dependencies.length > 0 &&
b` b`
if (${slot_or_fallback} && ${slot_or_fallback}.p && ${fallback_condition}) { if (${slot_or_fallback} && ${slot_or_fallback}.p && ${fallback_condition}) {
@ -192,8 +225,7 @@ export default class SlotWrapper extends Wrapper {
${fallback_update} ${fallback_update}
} }
`); `);
} } else {
else {
block.chunks.update.push(b` block.chunks.update.push(b`
if (${slot}) { if (${slot}) {
${slot_update} ${slot_update}
@ -205,17 +237,10 @@ export default class SlotWrapper extends Wrapper {
/** @param {string} name */ /** @param {string} name */
is_dependency_dynamic(name) { is_dependency_dynamic(name) {
if (name === '$$scope') if (name === '$$scope') return true;
return true; if (this.node.scope.is_let(name)) return true;
if (this.node.scope.is_let(name)) if (is_reserved_keyword(name)) return true;
return true;
if (is_reserved_keyword(name))
return true;
const variable = this.renderer.component.var_lookup.get(name); const variable = this.renderer.component.var_lookup.get(name);
return is_dynamic(variable); return is_dynamic(variable);
} }
} }

Write Preview
Loading…
Cancel
Save