fixed: Handling of inherited slots

Author: GianlucaGuarini

src/generators/template/bindings/tag.js

@@ -24,6 +24,7 @@ import build from '../builder.js'
 import { builders } from '../../../utils/build-types.js'
 import compose from 'cumpa'
 import { simplePropertyNode } from '../../../utils/custom-ast-nodes.js'
+import { hasChildrenNodes, isSlotNode } from '../checks.js'
 
 /**
  * Find the slots in the current component and group them under the same id
@@ -64,16 +65,27 @@ function buildSlot(id, sourceNode, sourceFile, sourceCode) {
     ...sourceNode,
     attributes: getNodeAttributes(sourceNode),
   }
-  const [html, bindings] = build(cloneNode, sourceFile, sourceCode)
 
-  return builders.objectExpression([
-    simplePropertyNode(BINDING_ID_KEY, builders.literal(id)),
-    simplePropertyNode(BINDING_HTML_KEY, builders.literal(html)),
-    simplePropertyNode(
-      BINDING_BINDINGS_KEY,
-      builders.arrayExpression(bindings),
-    ),
-  ])
+  // If the node is an empty slot we do not create the html key (https://github.com/riot/riot/issues/3055)
+  const [html, bindings] =
+    isSlotNode(cloneNode) && !hasChildrenNodes(cloneNode)
+      ? [null, null]
+      : build(cloneNode, sourceFile, sourceCode)
+
+  return builders.objectExpression(
+    [
+      simplePropertyNode(BINDING_ID_KEY, builders.literal(id)),
+      html
+        ? simplePropertyNode(BINDING_HTML_KEY, builders.literal(html))
+        : null,
+      bindings
+        ? simplePropertyNode(
+            BINDING_BINDINGS_KEY,
+            builders.arrayExpression(bindings),
+          )
+        : null,
+    ].filter(Boolean),
+  )
 }
 
 /**

src/generators/template/checks.js

@@ -261,3 +261,4 @@ export const hasIfAttribute = compose(Boolean, findIfAttribute)
 export const hasEachAttribute = compose(Boolean, findEachAttribute)
 export const hasIsAttribute = compose(Boolean, findIsAttribute)
 export const hasKeyAttribute = compose(Boolean, findKeyAttribute)
+export const hasChildrenNodes = (node) => node?.nodes?.length > 0

test/generators/template.spec.js

@@ -919,6 +919,41 @@ describe('Generators - Template', () => {
       expect(output[BINDING_ATTRIBUTES_KEY]).to.have.length(0)
     })
 
+    it('Empty inherited slots do not create the HTML key', () => {
+      const source = '<my-tag><slot name="default" slot="default"/></my-tag>'
+
+      const { template } = parse(source)
+
+      const input = tagBinding(template, 'expr0', FAKE_SRC_FILE, source)
+      const output = evaluateOutput(input)
+      const defaultSlot = output.slots[0]
+
+      expect(output[BINDING_SELECTOR_KEY]).to.be.equal('[expr0]')
+      expect(output[BINDING_TYPE_KEY]).to.be.equal(bindingTypes.TAG)
+      expect(output[BINDING_EVALUATE_KEY]()).to.be.equal('my-tag')
+      expect(defaultSlot[BINDING_HTML_KEY]).to.be.not.ok
+      expect(defaultSlot[BINDING_ID_KEY]).to.be.equal('default')
+    })
+
+    it('Not empty inherited slots do create the HTML key', () => {
+      const source =
+        '<my-tag><slot name="default" slot="default">Hello there</slot></my-tag>'
+
+      const { template } = parse(source)
+
+      const input = tagBinding(template, 'expr0', FAKE_SRC_FILE, source)
+      const output = evaluateOutput(input)
+      const defaultSlot = output.slots[0]
+
+      expect(output[BINDING_SELECTOR_KEY]).to.be.equal('[expr0]')
+      expect(output[BINDING_TYPE_KEY]).to.be.equal(bindingTypes.TAG)
+      expect(output[BINDING_EVALUATE_KEY]()).to.be.equal('my-tag')
+      expect(defaultSlot[BINDING_HTML_KEY]).to.be.equal(
+        '<slot expr34="expr34" name="default" slot="default"></slot>',
+      )
+      expect(defaultSlot[BINDING_ID_KEY]).to.be.equal('default')
+    })
+
     it('Tag binding on a custom input element', () => {
       const source = '<input is="bar" value="1"/>'
       const { template } = parse(source)