Fix clone for BC

packages/alpinejs/src/alpine.js

@@ -5,7 +5,7 @@ import { onElRemoved, onAttributeRemoved, onAttributesAdded, mutateDom, deferMut
 import { mergeProxies, closestDataStack, addScopeToNode, scope as $data } from './scope'
 import { setEvaluator, evaluate, evaluateLater, dontAutoEvaluateFunctions } from './evaluator'
 import { transition } from './directives/x-transition'
-import { clone, skipDuringClone, onlyDuringClone } from './clone'
+import { clone, cloneNode, skipDuringClone, onlyDuringClone } from './clone'
 import { interceptor } from './interceptor'
 import { getBinding as bound, extractProp } from './utils/bind'
 import { debounce } from './utils/debounce'
@@ -69,6 +69,7 @@ let Alpine = {
     store,
     start,
     clone, // INTERNAL
+    cloneNode, // INTERNAL
     bound,
     $data,
     walk,

packages/alpinejs/src/clone.js

@@ -1,5 +1,6 @@
 import { effect, release, overrideEffect } from "./reactivity"
-import { initTree } from "./lifecycle"
+import { initTree, isRoot } from "./lifecycle"
+import { walk } from "./utils/walk"
 
 export let isCloning = false
 
@@ -11,7 +12,7 @@ export function onlyDuringClone(callback) {
     return (...args) => isCloning && callback(...args)
 }
 
-export function clone(from, to)
+export function cloneNode(from, to)
 {
     // Transfer over existing runtime Alpine state from
     // the existing dom tree over to the new one...
@@ -40,6 +41,40 @@ export function clone(from, to)
     isCloning = false
 }
 
+let isCloningLegacy = false
+
+/** deprecated */
+export function clone(oldEl, newEl) {
+    if (! newEl._x_dataStack) newEl._x_dataStack = oldEl._x_dataStack
+
+    isCloning = true
+    isCloningLegacy = true
+
+    dontRegisterReactiveSideEffects(() => {
+        cloneTree(newEl)
+    })
+
+    isCloning = false
+    isCloningLegacy = false
+}
+
+/** deprecated */
+export function cloneTree(el) {
+    let hasRunThroughFirstEl = false
+
+    let shallowWalker = (el, callback) => {
+        walk(el, (el, skip) => {
+            if (hasRunThroughFirstEl && isRoot(el)) return skip()
+
+            hasRunThroughFirstEl = true
+
+            callback(el, skip)
+        })
+    }
+
+    initTree(el, shallowWalker)
+}
+
 function dontRegisterReactiveSideEffects(callback) {
     let cache = effect
 
@@ -62,6 +97,7 @@ function dontRegisterReactiveSideEffects(callback) {
 // from the live tree before hydrating the clone tree.
 export function shouldSkipRegisteringDataDuringClone(el) {
     if (! isCloning) return false
+    if (isCloningLegacy) return true
 
     return el.hasAttribute('data-has-alpine-state')
 }

packages/morph/src/morph.js

@@ -40,7 +40,7 @@ export function morph(from, toHtml, options) {
 
         // Initialize the server-side HTML element with Alpine...
         if (from.nodeType === 1 && window.Alpine) {
-            window.Alpine.clone(from, to)
+            window.Alpine.cloneNode(from, to)
         }
 
         if (textOrComment(to)) {
@@ -352,7 +352,7 @@ export function morph(from, toHtml, options) {
         toEl._x_dataStack = window.Alpine.closestDataStack(from)
 
         // We will kick off a clone on the root element.
-        toEl._x_dataStack && window.Alpine.clone(from, toEl)
+        toEl._x_dataStack && window.Alpine.cloneNode(from, toEl)
     }
 
     patch(from, toEl)