Merge pull request #547 from HugoDF/template-warn

feat(warn-template-multiple-root-elements)

src/directives/for.js

@@ -1,7 +1,7 @@
-import { transitionIn, transitionOut, getXAttrs, saferEval } from '../utils'
+import { transitionIn, transitionOut, getXAttrs, warnIfMalformedTemplate } from '../utils'
 
 export function handleForDirective(component, templateEl, expression, initialUpdate, extraVars) {
-    warnIfNotTemplateTag(templateEl)
+    warnIfMalformedTemplate(templateEl, 'x-for')
 
     let iteratorNames = typeof expression === 'function'
         ? parseForExpression(component.evaluateReturnExpression(templateEl, expression))
@@ -85,10 +85,6 @@ function generateKeyForIteration(component, el, index, iterationScopeVariables)
     return component.evaluateReturnExpression(el, bindKeyAttribute.expression, () => iterationScopeVariables)
 }
 
-function warnIfNotTemplateTag(el) {
-    if (el.tagName.toLowerCase() !== 'template') console.warn('Alpine: [x-for] directive should only be added to <template> tags.')
-}
-
 function evaluateItemsAndReturnEmptyIfXIfIsPresentAndFalseOnElement(component, el, iteratorNames, extraVars) {
     let ifAttribute = getXAttrs(el, component, 'if')[0]
 
@@ -102,8 +98,6 @@ function evaluateItemsAndReturnEmptyIfXIfIsPresentAndFalseOnElement(component, e
 function addElementInLoopAfterCurrentEl(templateEl, currentEl) {
     let clone = document.importNode(templateEl.content, true  )
 
-    if (clone.childElementCount !== 1) console.warn('Alpine: <template> tag with [x-for] encountered with multiple element roots. Make sure <template> only has a single child node.')
-
     currentEl.parentElement.insertBefore(clone, currentEl.nextElementSibling)
 
     return currentEl.nextElementSibling

src/directives/if.js

@@ -1,7 +1,7 @@
-import { transitionIn, transitionOut } from '../utils'
+import { transitionIn, transitionOut, warnIfMalformedTemplate } from '../utils'
 
 export function handleIfDirective(component, el, expressionResult, initialUpdate, extraVars) {
-    if (el.nodeName.toLowerCase() !== 'template') console.warn(`Alpine: [x-if] directive should only be added to <template> tags. See https://github.com/alpinejs/alpine#x-if`)
+    warnIfMalformedTemplate(el, 'x-if')
 
     const elementHasAlreadyBeenAdded = el.nextElementSibling && el.nextElementSibling.__x_inserted_me === true
 

src/utils.js

@@ -20,6 +20,14 @@ export function isTesting() {
         || navigator.userAgent.includes("jsdom")
 }
 
+export function warnIfMalformedTemplate(el, directive) {
+    if (el.tagName.toLowerCase() !== 'template') {
+        console.warn(`Alpine: [${directive}] directive should only be added to <template> tags. See https://github.com/alpinejs/alpine#${directive}`)
+    } else if (el.content.childElementCount !== 1) {
+        console.warn(`Alpine: <template> tag with [${directive}] encountered with multiple element roots. Make sure <template> only has a single child node.`)
+    }
+}
+
 export function kebabCase(subject) {
     return subject.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/[_\s]/, '-').toLowerCase()
 }