From 9581405e60b887aaa01f8889d1e7d2499e17caf6 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 12 May 2023 15:13:10 +0200 Subject: [PATCH] Convert src/compiler/compile/render_dom/wrappers/SlotTemplate.ts to JavaScript --- .../render_dom/wrappers/SlotTemplate.ts | 137 +++++++++--------- 1 file changed, 65 insertions(+), 72 deletions(-) diff --git a/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts b/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts index 5d84ba9944..bc6e42bbe8 100644 --- a/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts +++ b/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts @@ -1,86 +1,79 @@ -import Wrapper from './shared/Wrapper'; -import Renderer from '../Renderer'; -import Block from '../Block'; -import FragmentWrapper from './Fragment'; -import create_debugging_comment from './shared/create_debugging_comment'; -import { get_slot_definition } from './shared/get_slot_definition'; +import Wrapper from './shared/Wrapper.js'; +import FragmentWrapper from './Fragment.js'; +import create_debugging_comment from './shared/create_debugging_comment.js'; +import { get_slot_definition } from './shared/get_slot_definition.js'; import { b, x } from 'code-red'; -import { sanitize } from '../../../utils/names'; -import { Identifier } from 'estree'; -import InlineComponentWrapper from './InlineComponent'; +import { sanitize } from '../../../utils/names.js'; import { extract_names } from 'periscopic'; -import SlotTemplate from '../../nodes/SlotTemplate'; -import { add_const_tags, add_const_tags_context } from './shared/add_const_tags'; +import { add_const_tags, add_const_tags_context } from './shared/add_const_tags.js'; +/** @extends Wrapper */ export default class SlotTemplateWrapper extends Wrapper { - node: SlotTemplate; - fragment: FragmentWrapper; - block: Block; - parent: InlineComponentWrapper; - constructor( - renderer: Renderer, - block: Block, - parent: Wrapper, - node: SlotTemplate, - strip_whitespace: boolean, - next_sibling: Wrapper - ) { - super(renderer, block, parent, node); + /** @type {import('../../nodes/SlotTemplate.js').default} */ + node; - const { scope, lets, const_tags, slot_template_name } = this.node; + /** @type {import('./Fragment.js').default} */ + fragment; - lets.forEach((l) => { - extract_names(l.value || l.name).forEach((name) => { - renderer.add_to_context(name, true); - }); - }); + /** @type {import('../Block.js').default} */ + block; - add_const_tags_context(renderer, const_tags); + /** @type {import('./InlineComponent.js').default} */ + parent; - this.block = block.child({ - comment: create_debugging_comment(this.node, this.renderer.component), - name: this.renderer.component.get_unique_name(`create_${sanitize(slot_template_name)}_slot`), - type: 'slot' - }); - this.renderer.blocks.push(this.block); - - const seen = new Set(lets.map((l) => l.name.name)); - this.parent.node.lets.forEach((l) => { - if (!seen.has(l.name.name)) lets.push(l); - }); - - this.parent.set_slot(slot_template_name, get_slot_definition(this.block, scope, lets)); - - this.fragment = new FragmentWrapper( - renderer, - this.block, - node.type === 'SlotTemplate' ? node.children : [node], - this, - strip_whitespace, - next_sibling - ); - - this.block.parent.add_dependencies(this.block.dependencies); - } - - render() { - this.fragment.render(this.block, null, x`#nodes` as Identifier); - - if (this.node.const_tags.length > 0) { - this.render_get_context(); - } - } - render_get_context() { - const get_context = this.block.renderer.component.get_unique_name('get_context'); - this.block.renderer.blocks.push(b` + /** + * @param {import('../Renderer.js').default} renderer + * @param {import('../Block.js').default} block + * @param {import('./shared/Wrapper.js').default} parent + * @param {import('../../nodes/SlotTemplate.js').default} node + * @param {boolean} strip_whitespace + * @param {import('./shared/Wrapper.js').default} next_sibling + */ + constructor(renderer, block, parent, node, strip_whitespace, next_sibling) { + super(renderer, block, parent, node); + const { scope, lets, const_tags, slot_template_name } = this.node; + lets.forEach((l) => { + extract_names(l.value || l.name).forEach((name) => { + renderer.add_to_context(name, true); + }); + }); + add_const_tags_context(renderer, const_tags); + this.block = block.child({ + comment: create_debugging_comment(this.node, this.renderer.component), + name: this.renderer.component.get_unique_name(`create_${sanitize(slot_template_name)}_slot`), + type: 'slot' + }); + this.renderer.blocks.push(this.block); + const seen = new Set(lets.map((l) => l.name.name)); + this.parent.node.lets.forEach((l) => { + if (!seen.has(l.name.name)) + lets.push(l); + }); + this.parent.set_slot(slot_template_name, get_slot_definition(this.block, scope, lets)); + this.fragment = new FragmentWrapper(renderer, this.block, node.type === 'SlotTemplate' ? node.children : [node], this, strip_whitespace, next_sibling); + this.block.parent.add_dependencies(this.block.dependencies); + } + render() { + this.fragment.render(this.block, null, /** @type {import('estree').Identifier} */ (x `#nodes`)); + if (this.node.const_tags.length > 0) { + this.render_get_context(); + } + } + render_get_context() { + const get_context = this.block.renderer.component.get_unique_name('get_context'); + this.block.renderer.blocks.push(b ` function ${get_context}(#ctx) { ${add_const_tags(this.block, this.node.const_tags, '#ctx')} } `); - this.block.chunks.declarations.push(b`${get_context}(#ctx)`); - if (this.block.has_update_method) { - this.block.chunks.update.unshift(b`${get_context}(#ctx)`); - } - } + this.block.chunks.declarations.push(b `${get_context}(#ctx)`); + if (this.block.has_update_method) { + this.block.chunks.update.unshift(b `${get_context}(#ctx)`); + } + } } + + + +