|
|
|
@ -5,61 +5,61 @@ import { is_head } from './shared/is_head.js';
|
|
|
|
|
|
|
|
|
|
|
|
/** @extends Tag */
|
|
|
|
/** @extends Tag */
|
|
|
|
export default class RawMustacheTagWrapper extends Tag {
|
|
|
|
export default class RawMustacheTagWrapper extends Tag {
|
|
|
|
|
|
|
|
/** @type {import('estree').Identifier} */
|
|
|
|
|
|
|
|
var = { type: 'Identifier', name: 'raw' };
|
|
|
|
|
|
|
|
|
|
|
|
/** @type {import('estree').Identifier} */
|
|
|
|
/**
|
|
|
|
var = { type: 'Identifier', name: 'raw' };
|
|
|
|
* @param {import('../Renderer.js').default} renderer
|
|
|
|
|
|
|
|
* @param {import('../Block.js').default} block
|
|
|
|
|
|
|
|
* @param {import('./shared/Wrapper.js').default} parent
|
|
|
|
|
|
|
|
* @param {import('../../nodes/MustacheTag.js').default | import('../../nodes/RawMustacheTag.js').default} node
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
constructor(renderer, block, parent, node) {
|
|
|
|
|
|
|
|
super(renderer, block, parent, node);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* @param {import('../Renderer.js').default} renderer
|
|
|
|
* @param {import('../Block.js').default} block
|
|
|
|
* @param {import('../Block.js').default} block
|
|
|
|
* @param {import('estree').Identifier} parent_node
|
|
|
|
* @param {import('./shared/Wrapper.js').default} parent
|
|
|
|
* @param {import('estree').Identifier} _parent_nodes
|
|
|
|
* @param {import('../../nodes/MustacheTag.js').default | import('../../nodes/RawMustacheTag.js').default} node
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
render(block, parent_node, _parent_nodes) {
|
|
|
|
constructor(renderer, block, parent, node) {
|
|
|
|
const in_head = is_head(parent_node);
|
|
|
|
super(renderer, block, parent, node);
|
|
|
|
const can_use_innerhtml = !in_head && parent_node && !this.prev && !this.next;
|
|
|
|
}
|
|
|
|
if (can_use_innerhtml) {
|
|
|
|
|
|
|
|
/** @param {import('estree').Node} content */
|
|
|
|
/**
|
|
|
|
const insert = (content) => b`${parent_node}.innerHTML = ${content};`[0];
|
|
|
|
* @param {import('../Block.js').default} block
|
|
|
|
const { init } = this.rename_this_method(block, (content) => insert(content));
|
|
|
|
* @param {import('estree').Identifier} parent_node
|
|
|
|
block.chunks.mount.push(insert(init));
|
|
|
|
* @param {import('estree').Identifier} _parent_nodes
|
|
|
|
} else {
|
|
|
|
*/
|
|
|
|
const needs_anchor =
|
|
|
|
render(block, parent_node, _parent_nodes) {
|
|
|
|
in_head ||
|
|
|
|
const in_head = is_head(parent_node);
|
|
|
|
(this.next ? !this.next.is_dom_node() : !this.parent || !this.parent.is_dom_node());
|
|
|
|
const can_use_innerhtml = !in_head && parent_node && !this.prev && !this.next;
|
|
|
|
const html_tag = block.get_unique_name('html_tag');
|
|
|
|
if (can_use_innerhtml) {
|
|
|
|
const html_anchor = needs_anchor && block.get_unique_name('html_anchor');
|
|
|
|
|
|
|
|
block.add_variable(html_tag);
|
|
|
|
/** @param {import('estree').Node} content */
|
|
|
|
const { init } = this.rename_this_method(block, (content) => x`${html_tag}.p(${content})`);
|
|
|
|
const insert = (content) => b `${parent_node}.innerHTML = ${content};`[0];
|
|
|
|
const update_anchor = needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
|
|
|
|
const { init } = this.rename_this_method(block, (content) => insert(content));
|
|
|
|
const parent_element = /** @type {import('../../nodes/Element.js').default} */ (
|
|
|
|
block.chunks.mount.push(insert(init));
|
|
|
|
this.node.find_nearest(/^Element/)
|
|
|
|
}
|
|
|
|
);
|
|
|
|
else {
|
|
|
|
const is_svg = parent_element && parent_element.namespace === namespaces.svg;
|
|
|
|
const needs_anchor = in_head ||
|
|
|
|
block.chunks.create.push(b`${html_tag} = new @HtmlTag(${is_svg ? 'true' : 'false'});`);
|
|
|
|
(this.next ? !this.next.is_dom_node() : !this.parent || !this.parent.is_dom_node());
|
|
|
|
if (this.renderer.options.hydratable) {
|
|
|
|
const html_tag = block.get_unique_name('html_tag');
|
|
|
|
block.chunks.claim.push(
|
|
|
|
const html_anchor = needs_anchor && block.get_unique_name('html_anchor');
|
|
|
|
b`${html_tag} = @claim_html_tag(${_parent_nodes}, ${is_svg ? 'true' : 'false'});`
|
|
|
|
block.add_variable(html_tag);
|
|
|
|
);
|
|
|
|
const { init } = this.rename_this_method(block, (content) => x `${html_tag}.p(${content})`);
|
|
|
|
}
|
|
|
|
const update_anchor = needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
|
|
|
|
block.chunks.hydrate.push(b`${html_tag}.a = ${update_anchor};`);
|
|
|
|
const parent_element = /** @type {import('../../nodes/Element.js').default} */ (this.node.find_nearest(/^Element/));
|
|
|
|
block.chunks.mount.push(
|
|
|
|
const is_svg = parent_element && parent_element.namespace === namespaces.svg;
|
|
|
|
b`${html_tag}.m(${init}, ${parent_node || '#target'}, ${parent_node ? null : '#anchor'});`
|
|
|
|
block.chunks.create.push(b `${html_tag} = new @HtmlTag(${is_svg ? 'true' : 'false'});`);
|
|
|
|
);
|
|
|
|
if (this.renderer.options.hydratable) {
|
|
|
|
if (needs_anchor) {
|
|
|
|
block.chunks.claim.push(b `${html_tag} = @claim_html_tag(${_parent_nodes}, ${is_svg ? 'true' : 'false'});`);
|
|
|
|
block.add_element(html_anchor, x`@empty()`, x`@empty()`, parent_node);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
block.chunks.hydrate.push(b `${html_tag}.a = ${update_anchor};`);
|
|
|
|
if (!parent_node || in_head) {
|
|
|
|
block.chunks.mount.push(b `${html_tag}.m(${init}, ${parent_node || '#target'}, ${parent_node ? null : '#anchor'});`);
|
|
|
|
block.chunks.destroy.push(b`if (detaching) ${html_tag}.d();`);
|
|
|
|
if (needs_anchor) {
|
|
|
|
}
|
|
|
|
block.add_element(html_anchor, x `@empty()`, x `@empty()`, parent_node);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (!parent_node || in_head) {
|
|
|
|
|
|
|
|
block.chunks.destroy.push(b `if (detaching) ${html_tag}.d();`);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|