@syncfusion/ej2-vue-base 34.1.29 → 34.1.32

package/src/template.js

@@ -13,6 +13,137 @@ var __assign = (this && this.__assign) || function () {
 import { setTemplateEngine, getTemplateEngine, getUniqueID, createElement, detach, extend, getValue } from '@syncfusion/ej2-base';
 import { aVue as Vue, isExecute } from './component-base';
 var stringCompiler = getTemplateEngine();
+/**
+ * Returns true if the given Vue 3 component instance is inside a keep-alive.
+ *
+ * @param {any} vueInstance - Vue component instance.
+ * @returns {boolean} Returns true when inside keep-alive.
+ */
+function isInsideKeepAlive(vueInstance) {
+    var parent = vueInstance && vueInstance.$ && vueInstance.$.parent;
+    while (parent) {
+        if (parent.type && parent.type.__isKeepAlive) {
+            return true;
+        }
+        parent = parent.parent;
+    }
+    return false;
+}
+/**
+ * Collect activated/deactivated hooks from rendered vnode tree.
+ *
+ * @param {any} vnode - VNode instance.
+ * @param {any[]} out - Collection of hooks.
+ * @returns {void}
+ */
+function collectHooks(vnode, out) {
+    if (!vnode) {
+        return;
+    }
+    var ci = vnode.component;
+    if (ci && ci.type && ci.proxy && !ci.isUnmounted) {
+        if (typeof ci.type.activated === 'function' ||
+            typeof ci.type.deactivated === 'function') {
+            out.push({
+                activated: ci.type.activated ?
+                    ci.type.activated.bind(ci.proxy) : null,
+                deactivated: ci.type.deactivated ?
+                    ci.type.deactivated.bind(ci.proxy) : null
+            });
+        }
+        collectHooks(ci.subTree, out);
+    }
+    if (Array.isArray(vnode.children)) {
+        for (var i = 0; i < vnode.children.length; i++) {
+            // eslint-disable-next-line security/detect-object-injection
+            collectHooks(vnode.children[i], out);
+        }
+    }
+}
+/**
+ * Collect hooks from template collection.
+ *
+ * @param {any} proxy - Vue component proxy.
+ * @returns {any[]} Returns collected hooks.
+ */
+function collectFromTemplates(proxy) {
+    var hooks = [];
+    var tc = proxy.templateCollection;
+    if (!tc) {
+        return hooks;
+    }
+    var keys = Object.keys(tc);
+    for (var k = 0; k < keys.length; k++) {
+        // eslint-disable-next-line security/detect-object-injection
+        var key = keys[k];
+        // eslint-disable-next-line security/detect-object-injection
+        var elems = tc[key];
+        for (var i = 0; i < elems.length; i++) {
+            // eslint-disable-next-line security/detect-object-injection
+            var ele = elems[i];
+            if (ele && ele._vnode) {
+                collectHooks(ele._vnode, hooks);
+            }
+        }
+    }
+    return hooks;
+}
+/**
+ * Patch keep-alive lifecycle handling for slot templates.
+ *
+ * @param {any} vueInstance - Vue component instance.
+ * @param {any} app - Rendered vnode.
+ * @returns {void}
+ */
+function patchKeepAlive(vueInstance, app) {
+    // Walk up to find the direct child of keep-alive.
+    var start = vueInstance.$;
+    var cur = start;
+    var keepAliveChild = null;
+    while (cur) {
+        if (cur.parent &&
+            cur.parent.type &&
+            cur.parent.type.__isKeepAlive) {
+            keepAliveChild = cur;
+            break;
+        }
+        cur = cur.parent;
+    }
+    if (!keepAliveChild) {
+        return;
+    }
+    // templateCollection is on ejs-grid vueInstance
+    var gridProxy = vueInstance;
+    if (!keepAliveChild.isDeactivated) {
+        var immediateHooks = [];
+        collectHooks(app, immediateHooks);
+        immediateHooks.forEach(function (h) {
+            var activated = h.activated;
+            if (activated) {
+                activated();
+            }
+        });
+    }
+    if (!keepAliveChild._sfPatched) {
+        keepAliveChild._sfPatched = true;
+        (keepAliveChild.a || (keepAliveChild.a = [])).push(function () {
+            collectFromTemplates(gridProxy).forEach(function (h) {
+                var activated = h.activated;
+                if (activated) {
+                    activated();
+                }
+            });
+        });
+        (keepAliveChild.da || (keepAliveChild.da = [])).push(function () {
+            collectFromTemplates(gridProxy).forEach(function (h) {
+                var deactivated = h.deactivated;
+                if (deactivated) {
+                    deactivated();
+                }
+            });
+        });
+    }
+}
 /**
  * Compiler function that convert the template property to DOM element.
  *
@@ -61,6 +192,10 @@ export function compile(templateElement, helper) {
                             }
                             templateInstance["" + propName].push(ele);
                         }
+                        // Keep-alive support for Vue 3 slot templates.
+                        if (isInsideKeepAlive(vueInstance)) {
+                            patchKeepAlive(vueInstance, app);
+                        }
                     }
                     detach(ele);
                 }