Feature/riot 3014

src/generators/template/bindings/slot.js

@@ -10,12 +10,14 @@ import {
 import {
   createBindingAttributes,
   createSelectorProperties,
+  createTemplateProperty,
   getName,
   getNodeAttributes,
 } from '../utils.js'
 import { builders } from '../../../utils/build-types.js'
 import { findAttribute } from '../find.js'
 import { simplePropertyNode } from '../../../utils/custom-ast-nodes.js'
+import { createNestedBindings } from '../builder.js'
 
 /**
  * Transform a RiotParser.Node.Tag of type slot into a slot binding
@@ -61,6 +63,14 @@ export default function createSlotBinding(
       ),
     ),
     simplePropertyNode(BINDING_NAME_KEY, builders.literal(slotName)),
+    createTemplateProperty(
+      createNestedBindings(
+        sourceNode,
+        sourceFile,
+        sourceCode,
+        selectorAttribute,
+      ),
+    ),
     ...createSelectorProperties(selectorAttribute),
   ])
 }

src/generators/template/builder.js

@@ -110,7 +110,10 @@ function createTagWithBindings(sourceNode, sourceFile, sourceCode) {
       ]
     case isSlotNode(cloneNode):
       // slot tag
-      return [tagOpeningHTML, [slotBinding(cloneNode, bindingsSelector)]]
+      return [
+        tagOpeningHTML,
+        [slotBinding(cloneNode, bindingsSelector, sourceFile, sourceCode)],
+      ]
     default:
       // this node has expressions bound to it
       return [

src/generators/template/checks.js

@@ -236,13 +236,13 @@ export function hasExpressions(node) {
 }
 
 /**
- * True if the node is a directive having its own template
+ * True if the node is a directive having its own template or it's a slot node
  * @param   {RiotParser.Node} node - riot parser node
- * @returns {boolean} true only for the IF EACH and TAG bindings
+ * @returns {boolean} true only for the IF EACH and TAG bindings or it's a slot node
  */
 export function hasItsOwnTemplate(node) {
-  return [findEachAttribute, findIfAttribute, isCustomNode].some((test) =>
-    test(node),
+  return [findEachAttribute, findIfAttribute, isCustomNode, isSlotNode].some(
+    (test) => test(node),
   )
 }
 

test/generators/template.spec.js

@@ -34,6 +34,7 @@
 import simpleBinding from '../../src/generators/template/bindings/simple.js'
 import slotBinding from '../../src/generators/template/bindings/slot.js'
 import tagBinding from '../../src/generators/template/bindings/tag.js'
+import build from '../../src/generators/template/builder.js'
 
 const FAKE_SRC_FILE = 'fake-file.js'
 const renderExpr = compose(renderExpression, toScopedFunction, (expr) => ({
@@ -1292,6 +1293,23 @@
       expect(output[BINDING_TYPE_KEY]).to.be.equal(bindingTypes.SLOT)
       expect(output[NAME_ATTRIBUTE]).to.be.equal('default')
     })
+
+    it('Slot fallback html', () => {
+      const source =
+        '<div><slot><ul><li each={item in items}>{item}</li></ul></slot></div>'
+      const { template } = parse(source)
+      const [, bindings] = builder(
+        createRootNode(template),
+        FAKE_SRC_FILE,
+        source,
+      )
+      const output = evaluateOutput(bindings[0])
+
+      // the fallback template is defined
+      expect(output[BINDING_TEMPLATE_KEY]).to.be.ok
+      // the each binding should be part of the fallback template
+      expect(bindings).to.have.length(1)
+    })
   })
 
   describe('Template builder', () => {