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 */ /** @extends Wrapper */
export default class InlineComponentWrapper extends Wrapper { export default class InlineComponentWrapper extends Wrapper {
/** @type {import('estree').Identifier} */ /** @type {import('estree').Identifier} */
var; var;
@ -70,7 +69,8 @@ export default class InlineComponentWrapper extends Wrapper {
? renderer.component.name.name ? renderer.component.name.name
: this.node.name === 'svelte:component' : this.node.name === 'svelte:component'
? 'switch_instance' ? 'switch_instance'
: sanitize(this.node.name)).toLowerCase() : sanitize(this.node.name)
).toLowerCase()
}; };
if (this.node.children.length) { if (this.node.children.length) {
this.node.lets.forEach((l) => { this.node.lets.forEach((l) => {
@ -78,8 +78,17 @@ export default class InlineComponentWrapper extends Wrapper {
renderer.add_to_context(name, true); renderer.add_to_context(name, true);
}); });
}); });
this.children = this.node.children.map((child) => new SlotTemplateWrapper(renderer, block, this, this.children = this.node.children.map(
/** @type {import('../../../nodes/SlotTemplate.js').default} */ (child), strip_whitespace, next_sibling)); (child) =>
new SlotTemplateWrapper(
renderer,
block,
this,
/** @type {import('../../../nodes/SlotTemplate.js').default} */ (child),
strip_whitespace,
next_sibling
)
);
} }
block.add_outro(); block.add_outro();
} }
@ -122,7 +131,7 @@ export default class InlineComponentWrapper extends Wrapper {
const { component } = renderer; const { component } = renderer;
const name = this.var; const name = this.var;
block.add_variable(name); 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[]>} */ /** @type {Array<Node | import('estree').Node[]>} */
const statements = []; const statements = [];
@ -131,7 +140,7 @@ export default class InlineComponentWrapper extends Wrapper {
const updates = []; const updates = [];
this.children.forEach((child) => { this.children.forEach((child) => {
this.renderer.add_to_context('$$scope', true); 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} */ /** @type {import('estree').Identifier | undefined} */
@ -154,31 +163,33 @@ export default class InlineComponentWrapper extends Wrapper {
if (has_css_custom_properties) { if (has_css_custom_properties) {
block.add_variable(css_custom_properties_wrapper); 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]) => { ${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 ctx: #ctx
}` }`
] ]
: []; : [];
const attribute_object = uses_spread const attribute_object = uses_spread
? x `{ ${initial_props} }` ? x`{ ${initial_props} }`
: x `{ : x`{
${this.node.attributes.map((attr) => p `${attr.name}: ${attr.get_value(block)}`)}, ${this.node.attributes.map((attr) => p`${attr.name}: ${attr.get_value(block)}`)},
${initial_props} ${initial_props}
}`; }`;
if (this.node.attributes.length || this.node.bindings.length || initial_props.length) { if (this.node.attributes.length || this.node.bindings.length || initial_props.length) {
if (!uses_spread && this.node.bindings.length === 0) { if (!uses_spread && this.node.bindings.length === 0) {
component_opts.properties.push(p `props: ${attribute_object}`); component_opts.properties.push(p`props: ${attribute_object}`);
} } else {
else {
props = block.get_unique_name(`${name.name}_props`); 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) { if (component.compile_options.dev) {
@ -186,23 +197,24 @@ export default class InlineComponentWrapper extends Wrapper {
// will complain that options.target is missing. This would // will complain that options.target is missing. This would
// work better if components had separate public and private // work better if components had separate public and private
// APIs // APIs
component_opts.properties.push(p `$$inline: true`); component_opts.properties.push(p`$$inline: true`);
} }
const fragment_dependencies = new Set(this.slots.size ? ['$$scope'] : []); const fragment_dependencies = new Set(this.slots.size ? ['$$scope'] : []);
this.slots.forEach((slot) => { this.slots.forEach((slot) => {
slot.block.dependencies.forEach((name) => { slot.block.dependencies.forEach((name) => {
const is_let = slot.scope.is_let(name); const is_let = slot.scope.is_let(name);
const variable = renderer.component.var_lookup.get(name); const variable = renderer.component.var_lookup.get(name);
if (is_let || is_dynamic(variable)) if (is_let || is_dynamic(variable)) fragment_dependencies.add(name);
fragment_dependencies.add(name);
}); });
}); });
const dynamic_attributes = this.node.attributes.filter((a) => a.get_dependencies().length > 0); const dynamic_attributes = this.node.attributes.filter((a) => a.get_dependencies().length > 0);
if (!uses_spread && if (
!uses_spread &&
(dynamic_attributes.length > 0 || (dynamic_attributes.length > 0 ||
this.node.bindings.length > 0 || this.node.bindings.length > 0 ||
fragment_dependencies.size > 0)) { fragment_dependencies.size > 0)
updates.push(b `const ${name_changes} = {};`); ) {
updates.push(b`const ${name_changes} = {};`);
} }
if (this.node.attributes.length) { if (this.node.attributes.length) {
if (uses_spread) { if (uses_spread) {
@ -217,7 +229,8 @@ export default class InlineComponentWrapper extends Wrapper {
}); });
this.node.attributes.forEach((attr, i) => { this.node.attributes.forEach((attr, i) => {
const { name, dependencies } = attr; 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)) ? renderer.dirty(Array.from(dependencies))
: null; : null;
const unchanged = dependencies.size === 0; const unchanged = dependencies.size === 0;
@ -229,51 +242,50 @@ export default class InlineComponentWrapper extends Wrapper {
initial_props.push(value); initial_props.push(value);
let value_object = value; let value_object = value;
if (attr.expression.node.type !== 'ObjectExpression') { if (attr.expression.node.type !== 'ObjectExpression') {
value_object = x `@get_spread_object(${value})`; value_object = x`@get_spread_object(${value})`;
} }
change_object = value_object; change_object = value_object;
} } else {
else { const obj = x`{ ${name}: ${attr.get_value(block)} }`;
const obj = x `{ ${name}: ${attr.get_value(block)} }`;
initial_props.push(obj); initial_props.push(obj);
change_object = obj; change_object = obj;
} }
changes.push(unchanged changes.push(
? x `${levels}[${i}]` unchanged
? x`${levels}[${i}]`
: condition : condition
? x `${condition} && ${change_object}` ? x`${condition} && ${change_object}`
: change_object); : change_object
);
}); });
block.chunks.init.push(b ` block.chunks.init.push(b`
const ${levels} = [ const ${levels} = [
${initial_props} ${initial_props}
]; ];
`); `);
statements.push(b ` statements.push(b`
for (let #i = 0; #i < ${levels}.length; #i += 1) { for (let #i = 0; #i < ${levels}.length; #i += 1) {
${props} = @assign(${props}, ${levels}[#i]); ${props} = @assign(${props}, ${levels}[#i]);
} }
`); `);
if (all_dependencies.size) { if (all_dependencies.size) {
const condition = renderer.dirty(Array.from(all_dependencies)); const condition = renderer.dirty(Array.from(all_dependencies));
updates.push(b ` updates.push(b`
const ${name_changes} = ${condition} ? @get_spread_update(${levels}, [ const ${name_changes} = ${condition} ? @get_spread_update(${levels}, [
${changes} ${changes}
]) : {} ]) : {}
`); `);
} } else {
else { updates.push(b`
updates.push(b `
const ${name_changes} = {}; const ${name_changes} = {};
`); `);
} }
} } else {
else {
dynamic_attributes.forEach((attribute) => { dynamic_attributes.forEach((attribute) => {
const dependencies = attribute.get_dependencies(); const dependencies = attribute.get_dependencies();
if (dependencies.length > 0) { if (dependencies.length > 0) {
const condition = renderer.dirty(dependencies); const condition = renderer.dirty(dependencies);
updates.push(b ` updates.push(b`
if (${condition}) ${name_changes}.${attribute.name} = ${attribute.get_value(block)}; 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) { if (fragment_dependencies.size > 0) {
updates.push(b ` updates.push(b`
if (${renderer.dirty(Array.from(fragment_dependencies))}) { if (${renderer.dirty(Array.from(fragment_dependencies))}) {
${name_changes}.$$scope = { dirty: #dirty, ctx: #ctx }; ${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}`); const updating = block.get_unique_name(`updating_${binding.name}`);
block.add_variable(updating); block.add_variable(updating);
const snippet = binding.expression.manipulate(block); const snippet = binding.expression.manipulate(block);
statements.push(b ` statements.push(b`
if (${snippet} !== void 0) { if (${snippet} !== void 0) {
${props}.${binding.name} = ${snippet}; ${props}.${binding.name} = ${snippet};
}`); }`);
updates.push(b ` updates.push(b`
if (!${updating} && ${renderer.dirty(Array.from(binding.expression.dependencies))}) { if (!${updating} && ${renderer.dirty(Array.from(binding.expression.dependencies))}) {
${updating} = true; ${updating} = true;
${name_changes}.${binding.name} = ${snippet}; ${name_changes}.${binding.name} = ${snippet};
@ -321,8 +333,8 @@ export default class InlineComponentWrapper extends Wrapper {
} }
/** @type {import('estree').Identifier[]} */ /** @type {import('estree').Identifier[]} */
const params = [/** @type {import('estree').Identifier} */ (x `#value`)]; const params = [/** @type {import('estree').Identifier} */ (x`#value`)];
const args = [x `#value`]; const args = [x`#value`];
if (contextual_dependencies.length > 0) { if (contextual_dependencies.length > 0) {
contextual_dependencies.forEach((name) => { contextual_dependencies.forEach((name) => {
params.push({ params.push({
@ -334,36 +346,35 @@ export default class InlineComponentWrapper extends Wrapper {
}); });
block.maintain_context = true; // TODO put this somewhere more logical block.maintain_context = true; // TODO put this somewhere more logical
} }
block.chunks.init.push(b ` block.chunks.init.push(b`
function ${id}(#value) { function ${id}(#value) {
${callee}(${args}); ${callee}(${args});
} }
`); `);
let invalidate_binding = b ` let invalidate_binding = b`
${lhs} = #value; ${lhs} = #value;
${renderer.invalidate(dependencies[0])}; ${renderer.invalidate(dependencies[0])};
`; `;
if (binding.expression.node.type === 'MemberExpression') { if (binding.expression.node.type === 'MemberExpression') {
invalidate_binding = b ` invalidate_binding = b`
if ($$self.$$.not_equal(${lhs}, #value)) { if ($$self.$$.not_equal(${lhs}, #value)) {
${invalidate_binding} ${invalidate_binding}
} }
`; `;
} }
const body = b ` const body = b`
function ${id}(${params}) { function ${id}(${params}) {
${invalidate_binding} ${invalidate_binding}
} }
`; `;
component.partly_hoisted.push(body); 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 munged_handlers = this.node.handlers.map((handler) => {
const event_handler = new EventHandler(handler, this); const event_handler = new EventHandler(handler, this);
let snippet = event_handler.get_snippet(block); let snippet = event_handler.get_snippet(block);
if (handler.modifiers.has('once')) if (handler.modifiers.has('once')) snippet = x`@once(${snippet})`;
snippet = x `@once(${snippet})`; return b`${name}.$on("${handler.name}", ${snippet});`;
return b `${name}.$on("${handler.name}", ${snippet});`;
}); });
const mount_target = has_css_custom_properties const mount_target = has_css_custom_properties
? css_custom_properties_wrapper ? css_custom_properties_wrapper
@ -377,15 +388,22 @@ export default class InlineComponentWrapper extends Wrapper {
const snippet = this.node.expression.manipulate(block); const snippet = this.node.expression.manipulate(block);
const dependencies = this.node.expression.dynamic_dependencies(); const dependencies = this.node.expression.dynamic_dependencies();
if (has_css_custom_properties) { 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,
block.chunks.init.push(b ` css_custom_properties_wrapper,
css_custom_properties_wrapper_element,
is_svg_namespace
);
}
block.chunks.init.push(b`
var ${switch_value} = ${snippet}; var ${switch_value} = ${snippet};
function ${switch_props}(#ctx) { function ${switch_props}(#ctx) {
${(this.node.attributes.length > 0 || this.node.bindings.length > 0) && ${
b ` (this.node.attributes.length > 0 || this.node.bindings.length > 0) &&
${props && b `let ${props} = ${attribute_object};`}`} b`
${props && b`let ${props} = ${attribute_object};`}`
}
${statements} ${statements}
return ${component_opts}; return ${component_opts};
} }
@ -397,17 +415,31 @@ export default class InlineComponentWrapper extends Wrapper {
${munged_handlers} ${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) 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.chunks.mount.push(b `if (${name}) @mount_component(${name}, ${mount_target}, ${mount_anchor});`); 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 (to_claim) {
if (css_custom_properties_wrapper) 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.chunks.claim.push(b `if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`); 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) { if (updates.length) {
block.chunks.update.push(b ` block.chunks.update.push(b`
${updates} ${updates}
`); `);
} }
@ -416,22 +448,23 @@ export default class InlineComponentWrapper extends Wrapper {
const update_mount_node = has_css_custom_properties const update_mount_node = has_css_custom_properties
? css_custom_properties_wrapper ? css_custom_properties_wrapper
: this.get_update_mount_node(tmp_anchor); : 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' (tmp_anchor.name !== 'null'
? b `@insert(${tmp_anchor}.parentNode, ${css_custom_properties_wrapper}, ${tmp_anchor});` ? b`@insert(${tmp_anchor}.parentNode, ${css_custom_properties_wrapper}, ${tmp_anchor});`
: b `@insert(${parent_node}, ${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})`; let update_condition = x`${switch_value} !== (${switch_value} = ${snippet})`;
if (dependencies.length > 0) { 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 (${update_condition}) {
if (${name}) { if (${name}) {
@group_outros(); @group_outros();
const old_component = ${name}; const old_component = ${name};
@transition_out(old_component.$$.fragment, 1, 0, () => { @transition_out(old_component.$$.fragment, 1, 0, () => {
@destroy_component(old_component, 1); @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(); @check_outros();
} }
@ -450,23 +483,27 @@ export default class InlineComponentWrapper extends Wrapper {
${name} = null; ${name} = null;
} }
} else if (${switch_value}) { } 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); if (${name}) @transition_in(${name}.$$.fragment, #local);
`); `);
block.chunks.outro.push(b `if (${name}) @transition_out(${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'});`); block.chunks.destroy.push(
} b`if (${name}) @destroy_component(${name}, ${parent_node ? null : 'detaching'});`
else { );
const expression = this.node.name === 'svelte:self' } else {
const expression =
this.node.name === 'svelte:self'
? component.name ? component.name
: this.renderer.reference(string_to_member_expression(this.node.name)); : this.renderer.reference(string_to_member_expression(this.node.name));
block.chunks.init.push(b ` block.chunks.init.push(b`
${(this.node.attributes.length > 0 || this.node.bindings.length > 0) && ${
b ` (this.node.attributes.length > 0 || this.node.bindings.length > 0) &&
${props && b `let ${props} = ${attribute_object};`}`} b`
${props && b`let ${props} = ${attribute_object};`}`
}
${statements} ${statements}
${name} = new ${expression}(${component_opts}); ${name} = new ${expression}(${component_opts});
@ -474,30 +511,45 @@ export default class InlineComponentWrapper extends Wrapper {
${munged_handlers} ${munged_handlers}
`); `);
if (has_css_custom_properties) { 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,
block.chunks.create.push(b `@create_component(${name}.$$.fragment);`); 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) 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.chunks.mount.push(b `@mount_component(${name}, ${mount_target}, ${mount_anchor});`); block,
parent_node,
css_custom_properties_wrapper
);
block.chunks.mount.push(b`@mount_component(${name}, ${mount_target}, ${mount_anchor});`);
if (to_claim) { if (to_claim) {
if (css_custom_properties_wrapper) 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.chunks.claim.push(b `@claim_component(${name}.$$.fragment, ${claim_nodes});`); block,
} claim_nodes,
block.chunks.intro.push(b ` 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); @transition_in(${name}.$$.fragment, #local);
`); `);
if (updates.length) { if (updates.length) {
block.chunks.update.push(b ` block.chunks.update.push(b`
${updates} ${updates}
${name}.$set(${name_changes}); ${name}.$set(${name_changes});
`); `);
} }
block.chunks.destroy.push(b ` block.chunks.destroy.push(b`
@destroy_component(${name}, ${parent_node ? null : 'detaching'}); @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} parent_node
* @param {import('estree').Identifier | null} css_custom_properties_wrapper * @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) { 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)) { 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 { } else {
block.chunks.mount.push(b `@insert(#target, ${css_custom_properties_wrapper}, #anchor);`); block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
// TODO we eventually need to consider what happens to elements // TODO we eventually need to consider what happens to elements
// that belong to the same outgroup as an outroing element... // 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 {string} css_custom_properties_wrapper_element
* @param {boolean} is_svg_namespace * @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 nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
const claim_element = is_svg_namespace ? x `@claim_svg_element` : x `@claim_element`; const claim_element = is_svg_namespace ? x`@claim_svg_element` : x`@claim_element`;
block.chunks.claim.push(b ` block.chunks.claim.push(b`
${css_custom_properties_wrapper} = ${claim_element}(${parent_nodes}, "${css_custom_properties_wrapper_element.toUpperCase()}", { style: true }) ${css_custom_properties_wrapper} = ${claim_element}(${parent_nodes}, "${css_custom_properties_wrapper_element.toUpperCase()}", { style: true })
var ${nodes} = @children(${css_custom_properties_wrapper}); 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 {string} css_custom_properties_wrapper_element
* @param {boolean} is_svg_namespace * @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(
const element = is_svg_namespace ? x `@svg_element` : x `@element`; block,
block.chunks.create.push(b `${css_custom_properties_wrapper} = ${element}("${css_custom_properties_wrapper_element}");`); 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) 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) => { this.node.css_custom_properties.forEach((attr) => {
const dependencies = attr.get_dependencies(); const dependencies = attr.get_dependencies();
const should_cache = attr.should_cache(); const should_cache = attr.should_cache();
const last = should_cache && const last =
block.get_unique_name(`${attr.name.replace(regex_invalid_variable_identifier_characters, '_')}_last`); should_cache &&
if (should_cache) block.get_unique_name(
block.add_variable(last); `${attr.name.replace(regex_invalid_variable_identifier_characters, '_')}_last`
);
if (should_cache) block.add_variable(last);
const value = attr.get_value(block); const value = attr.get_value(block);
const init = should_cache ? x `${last} = ${value}` : value; 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) { if (dependencies.length > 0) {
let condition = block.renderer.dirty(dependencies); let condition = block.renderer.dirty(dependencies);
if (should_cache) if (should_cache) condition = x`${condition} && (${last} !== (${last} = ${value}))`;
condition = x `${condition} && (${last} !== (${last} = ${value}))`; block.chunks.update.push(b`
block.chunks.update.push(b `
if (${condition}) { if (${condition}) {
@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value}); @set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value});
} }
@ -576,7 +651,6 @@ export default class InlineComponentWrapper extends Wrapper {
} }
} }
/** /**
* @typedef {{ * @typedef {{
* block: Block; * block: Block;
@ -585,4 +659,3 @@ export default class InlineComponentWrapper extends Wrapper {
* get_changes?: Node; * get_changes?: Node;
* }} SlotDefinition * }} SlotDefinition
*/ */

Write Preview
Loading…
Cancel
Save