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

315
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();
}
@ -122,7 +131,7 @@ export default class InlineComponentWrapper extends Wrapper {
const { component } = renderer;
const name = this.var;
block.add_variable(name);
const component_opts = /** @type {import('estree').ObjectExpression} */ (x `{}`);
const component_opts = /** @type {import('estree').ObjectExpression} */ (x`{}`);
/** @type {Array<Node | import('estree').Node[]>} */
const statements = [];
@ -131,7 +140,7 @@ export default class InlineComponentWrapper extends Wrapper {
const updates = [];
this.children.forEach((child) => {
this.renderer.add_to_context('$$scope', true);
child.render(block, null, /** @type {import('estree').Identifier} */ (x `#nodes`));
child.render(block, null, /** @type {import('estree').Identifier} */ (x`#nodes`));
});
/** @type {import('estree').Identifier | undefined} */
@ -154,31 +163,33 @@ 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: {
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: {
p`$$scope: {
ctx: #ctx
}`
]
: [];
const attribute_object = uses_spread
? x `{ ${initial_props} }`
: x `{
${this.node.attributes.map((attr) => p `${attr.name}: ${attr.get_value(block)}`)},
? x`{ ${initial_props} }`
: x`{
${this.node.attributes.map((attr) => p`${attr.name}: ${attr.get_value(block)}`)},
${initial_props}
}`;
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 {
component_opts.properties.push(p`props: ${attribute_object}`);
} else {
props = block.get_unique_name(`${name.name}_props`);
component_opts.properties.push(p `props: ${props}`);
component_opts.properties.push(p`props: ${props}`);
}
}
if (component.compile_options.dev) {
@ -186,23 +197,24 @@ export default class InlineComponentWrapper extends Wrapper {
// will complain that options.target is missing. This would
// work better if components had separate public and private
// APIs
component_opts.properties.push(p `$$inline: true`);
component_opts.properties.push(p`$$inline: true`);
}
const fragment_dependencies = new Set(this.slots.size ? ['$$scope'] : []);
this.slots.forEach((slot) => {
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)) {
updates.push(b `const ${name_changes} = {};`);
fragment_dependencies.size > 0)
) {
updates.push(b`const ${name_changes} = {};`);
}
if (this.node.attributes.length) {
if (uses_spread) {
@ -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;
@ -229,51 +242,50 @@ export default class InlineComponentWrapper extends Wrapper {
initial_props.push(value);
let value_object = value;
if (attr.expression.node.type !== 'ObjectExpression') {
value_object = x `@get_spread_object(${value})`;
value_object = x`@get_spread_object(${value})`;
}
change_object = value_object;
}
else {
const obj = x `{ ${name}: ${attr.get_value(block)} }`;
} else {
const obj = x`{ ${name}: ${attr.get_value(block)} }`;
initial_props.push(obj);
change_object = obj;
}
changes.push(unchanged
? x `${levels}[${i}]`
changes.push(
unchanged
? x`${levels}[${i}]`
: condition
? x `${condition} && ${change_object}`
: change_object);
? x`${condition} && ${change_object}`
: change_object
);
});
block.chunks.init.push(b `
block.chunks.init.push(b`
const ${levels} = [
${initial_props}
];
`);
statements.push(b `
statements.push(b`
for (let #i = 0; #i < ${levels}.length; #i += 1) {
${props} = @assign(${props}, ${levels}[#i]);
}
`);
if (all_dependencies.size) {
const condition = renderer.dirty(Array.from(all_dependencies));
updates.push(b `
updates.push(b`
const ${name_changes} = ${condition} ? @get_spread_update(${levels}, [
${changes}
]) : {}
`);
}
else {
updates.push(b `
} else {
updates.push(b`
const ${name_changes} = {};
`);
}
}
else {
} else {
dynamic_attributes.forEach((attribute) => {
const dependencies = attribute.get_dependencies();
if (dependencies.length > 0) {
const condition = renderer.dirty(dependencies);
updates.push(b `
updates.push(b`
if (${condition}) ${name_changes}.${attribute.name} = ${attribute.get_value(block)};
`);
}
@ -281,7 +293,7 @@ export default class InlineComponentWrapper extends Wrapper {
}
}
if (fragment_dependencies.size > 0) {
updates.push(b `
updates.push(b`
if (${renderer.dirty(Array.from(fragment_dependencies))}) {
${name_changes}.$$scope = { dirty: #dirty, ctx: #ctx };
}`);
@ -297,11 +309,11 @@ export default class InlineComponentWrapper extends Wrapper {
const updating = block.get_unique_name(`updating_${binding.name}`);
block.add_variable(updating);
const snippet = binding.expression.manipulate(block);
statements.push(b `
statements.push(b`
if (${snippet} !== void 0) {
${props}.${binding.name} = ${snippet};
}`);
updates.push(b `
updates.push(b`
if (!${updating} && ${renderer.dirty(Array.from(binding.expression.dependencies))}) {
${updating} = true;
${name_changes}.${binding.name} = ${snippet};
@ -321,8 +333,8 @@ export default class InlineComponentWrapper extends Wrapper {
}
/** @type {import('estree').Identifier[]} */
const params = [/** @type {import('estree').Identifier} */ (x `#value`)];
const args = [x `#value`];
const params = [/** @type {import('estree').Identifier} */ (x`#value`)];
const args = [x`#value`];
if (contextual_dependencies.length > 0) {
contextual_dependencies.forEach((name) => {
params.push({
@ -334,36 +346,35 @@ export default class InlineComponentWrapper extends Wrapper {
});
block.maintain_context = true; // TODO put this somewhere more logical
}
block.chunks.init.push(b `
block.chunks.init.push(b`
function ${id}(#value) {
${callee}(${args});
}
`);
let invalidate_binding = b `
let invalidate_binding = b`
${lhs} = #value;
${renderer.invalidate(dependencies[0])};
`;
if (binding.expression.node.type === 'MemberExpression') {
invalidate_binding = b `
invalidate_binding = b`
if ($$self.$$.not_equal(${lhs}, #value)) {
${invalidate_binding}
}
`;
}
const body = b `
const body = b`
function ${id}(${params}) {
${invalidate_binding}
}
`;
component.partly_hoisted.push(body);
return b `@binding_callbacks.push(() => @bind(${this.var}, '${binding.name}', ${id}));`;
return b`@binding_callbacks.push(() => @bind(${this.var}, '${binding.name}', ${id}));`;
});
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})`;
return b `${name}.$on("${handler.name}", ${snippet});`;
if (handler.modifiers.has('once')) snippet = x`@once(${snippet})`;
return b`${name}.$on("${handler.name}", ${snippet});`;
});
const mount_target = has_css_custom_properties
? css_custom_properties_wrapper
@ -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);
}
block.chunks.init.push(b `
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) &&
b `
${props && b `let ${props} = ${attribute_object};`}`}
${
(this.node.attributes.length > 0 || this.node.bindings.length > 0) &&
b`
${props && b`let ${props} = ${attribute_object};`}`
}
${statements}
return ${component_opts};
}
@ -397,17 +415,31 @@ export default class InlineComponentWrapper extends Wrapper {
${munged_handlers}
}
`);
block.chunks.create.push(b `if (${name}) @create_component(${name}.$$.fragment);`);
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 `
block.chunks.update.push(b`
${updates}
`);
}
@ -416,22 +448,23 @@ 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});`);
let update_condition = x `${switch_value} !== (${switch_value} = ${snippet})`;
? b`@insert(${tmp_anchor}.parentNode, ${css_custom_properties_wrapper}, ${tmp_anchor});`
: b`@insert(${parent_node}, ${css_custom_properties_wrapper}, ${tmp_anchor});`);
let update_condition = x`${switch_value} !== (${switch_value} = ${snippet})`;
if (dependencies.length > 0) {
update_condition = x `${block.renderer.dirty(dependencies)} && ${update_condition}`;
update_condition = x`${block.renderer.dirty(dependencies)} && ${update_condition}`;
}
block.chunks.update.push(b `
block.chunks.update.push(b`
if (${update_condition}) {
if (${name}) {
@group_outros();
const old_component = ${name};
@transition_out(old_component.$$.fragment, 1, 0, () => {
@destroy_component(old_component, 1);
${has_css_custom_properties ? b `@detach(${update_mount_node})` : null}
${has_css_custom_properties ? b`@detach(${update_mount_node})` : null}
});
@check_outros();
}
@ -450,23 +483,27 @@ export default class InlineComponentWrapper extends Wrapper {
${name} = null;
}
} else if (${switch_value}) {
${updates.length > 0 && b `${name}.$set(${name_changes});`}
${updates.length > 0 && b`${name}.$set(${name_changes});`}
}
`);
block.chunks.intro.push(b `
block.chunks.intro.push(b`
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.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'
? 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) &&
b `
${props && b `let ${props} = ${attribute_object};`}`}
block.chunks.init.push(b`
${
(this.node.attributes.length > 0 || this.node.bindings.length > 0) &&
b`
${props && b`let ${props} = ${attribute_object};`}`
}
${statements}
${name} = new ${expression}(${component_opts});
@ -474,30 +511,45 @@ 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);
}
block.chunks.create.push(b `@create_component(${name}.$$.fragment);`);
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);
block.chunks.mount.push(b `@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`@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 `@claim_component(${name}.$$.fragment, ${claim_nodes});`);
}
block.chunks.intro.push(b `
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`
@transition_in(${name}.$$.fragment, #local);
`);
if (updates.length) {
block.chunks.update.push(b `
block.chunks.update.push(b`
${updates}
${name}.$set(${name_changes});
`);
}
block.chunks.destroy.push(b `
block.chunks.destroy.push(b`
@destroy_component(${name}, ${parent_node ? null : 'detaching'});
`);
block.chunks.outro.push(b `@transition_out(${name}.$$.fragment, #local);`);
block.chunks.outro.push(b`@transition_out(${name}.$$.fragment, #local);`);
}
}
@ -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})`);
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});`);
}
block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
}
else {
block.chunks.mount.push(b `@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
} 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,10 +587,16 @@ 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 `
const claim_element = is_svg_namespace ? x`@claim_svg_element` : x`@claim_element`;
block.chunks.claim.push(b`
${css_custom_properties_wrapper} = ${claim_element}(${parent_nodes}, "${css_custom_properties_wrapper_element.toUpperCase()}", { style: true })
var ${nodes} = @children(${css_custom_properties_wrapper});
`);
@ -547,26 +610,38 @@ 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) {
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}");`);
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}");`
);
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});`);
const init = should_cache ? x`${last} = ${value}` : value;
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}))`;
block.chunks.update.push(b `
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