added: support for slot fallback riot/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),
   )
 }
 

src/generators/template/constants.js

@@ -32,7 +32,6 @@ export const BINDING_SLOTS_KEY = 'slots'
 export const BINDING_EXPRESSIONS_KEY = 'expressions'
 export const BINDING_IS_BOOLEAN_ATTRIBUTE = 'isBoolean'
 export const BINDING_CHILD_NODE_INDEX_KEY = 'childNodeIndex'
-export const BINDING_SLOT_FALLBACK_KEY = 'fallback'
 // slots keys
 export const BINDING_BINDINGS_KEY = 'bindings'
 export const BINDING_ID_KEY = 'id'

test/generators/template.spec.js

@@ -11,7 +11,6 @@ import {
   BINDING_IS_BOOLEAN_ATTRIBUTE,
   BINDING_NAME_KEY,
   BINDING_SELECTOR_KEY,
-  BINDING_SLOT_FALLBACK_KEY,
   BINDING_TEMPLATE_KEY,
   BINDING_TYPE_KEY,
   NAME_ATTRIBUTE,
@@ -1295,7 +1294,7 @@ describe('Generators - Template', () => {
       expect(output[NAME_ATTRIBUTE]).to.be.equal('default')
     })
 
-    it.only('Slot fallback html', () => {
+    it('Slot fallback html', () => {
       const source =
         '<div><slot><ul><li each={item in items}>{item}</li></ul></slot></div>'
       const { template } = parse(source)
@@ -1307,7 +1306,7 @@ describe('Generators - Template', () => {
       const output = evaluateOutput(bindings[0])
 
       // the fallback template is defined
-      expect(output[BINDING_SLOT_FALLBACK_KEY]).to.be.ok()
+      expect(output[BINDING_TEMPLATE_KEY]).to.be.ok
       // the each binding should be part of the fallback template
       expect(bindings).to.have.length(1)
     })