@xuda.io/runtime-bundle 1.0.1089 → 1.0.1091

package/js/xuda-runtime-slim.js

@@ -12206,7 +12206,7 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
             }
             $elm.remove();
           } else {
-            $elm.data('xuTeleportData', []);
+            $elm.data('xuTeleportData', []).attr('hidden', true);
             for (const [key, node] of Object.entries(nodeP.children)) {
               const $to_container = $(val.value);
               if (!$to_container?.length) {
@@ -14743,36 +14743,156 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
     },
   };
 
-  const draw_html_element = async function (element) {
-    // let temp_$container = $('<tmp>').data('xuData', $container.data().xuData);
-    // if (!glb.new_xu_render) {
-    //   temp_$container = $container;
-    // }
+  const draw_html_element_org = async function (element) {
     const done = async function (ret = {}) {
-      if (glb.new_xu_render) {
-        const xu_ui_id = $div.attr('xu-ui-id');
-        if (ret.has_xu_exp_render_attribute) {
-          const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($div.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
-          UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = { $div: $div.clone(true), paramsP };
-          nodeP.xu_render_xu_ui_id = xu_ui_id;
-          nodeP.xu_render_cache_id = xu_render_cache_id;
-          if (ret.xu_render_background_processing) {
-            $container.find(`[xu-ui-id="${xu_ui_id}"]`).remove();
-            return $div;
-          } //else {
-          //   $container.append(temp_$container.children());
-          //   return $div;
+      return $div;
+    };
+    if (!element || element === 'script') return await done();
+    let str = '';
+
+    var $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, str);
+
+    $div.hover(
+      function (e) {
+        hover_in($div, e);
+      },
+      function (e) {
+        hover_out();
+      },
+    );
+    if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
+      $div.on('click contextmenu', function (e) {
+        hover_in($div, e);
+      });
+    }
+
+    let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $container, nodeP, $div, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
+    if (ret.abort || nodeP.tagName === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
+      return await done(ret);
+    }
+    // check if iterator made to prevent children render
+
+    if (nodeP?.attributes?.['xu-viewport'] == 'true') {
+      // const xu_viewport = async function () {
+      //   const data = { $div: $div.clone(true), nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
+      //   const container_id = $container.attr('xu-ui-id');
+      //   if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
+      //     UI_WORKER_OBJ.pending_for_viewport_render[container_id] = { base_$div: $div, data: [], $container };
+      //     await iterate_child($div, nodeP, parent_infoP, $root_container);
+      //   } else {
+      //     $div.remove();
+      //   }
+      //   UI_WORKER_OBJ.pending_for_viewport_render[container_id].data.push(data);
+
+      //   // if (!$div.children().length) {
+      //   //   // render the first element to determine height
+      //   //   await iterate_child($div, nodeP, parent_infoP, $root_container);
+      //   //   // hover_in($div);
+      //   //   // func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', data, null, null, paramsP.dsSessionP);
+      //   // } else {
+      //   // }
+      // };
+      const xu_viewport = function () {
+        const observer_inViewport = new IntersectionObserver(
+          function (entries) {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                $(entry.target).trigger('inViewport');
+
+                // Optional: stop observing once triggered
+                observer_inViewport.unobserve(entry.target);
+              }
+            });
+          },
+          {
+            threshold: 0.1, // Trigger when 10% of element is visible
+          },
+        );
+
+        const observer_outViewport = new IntersectionObserver(
+          function (entries) {
+            entries.forEach((entry) => {
+              if (!entry.isIntersecting) {
+                // Element is OUT of viewport - trigger custom event
+                $(entry.target).trigger('outViewport');
+
+                // Optional: stop observing once triggered
+                // observer_outViewport.unobserve(entry.target);
+              }
+            });
+          },
+          {
+            threshold: 0, // Trigger when element is completely out of view
+          },
+        );
+
+        let ui_job_id;
+        $div.on('inViewport', function () {
+          if ($div.children().length) {
+            $div.removeClass('skeleton');
+            return;
+          }
+
+          // if (UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]) {
+          //   $div[0].style.removeProperty('height');
+          //   $div.removeClass('skeleton');
+          //   $div.html(UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]);
+          // } else {
+          hover_in($div);
+          ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, temp_$container }, null, null, paramsP.dsSessionP);
           // }
+          observer_outViewport.observe($div[0]);
+        });
 
-          return $div;
-        } else {
-          // $container.append(temp_$container.children());
-          if (ret.has_xu_render_attribute) {
-            $container.find(`[xu-ui-id="${xu_ui_id}"]`).remove();
+        $div.on('outViewport', function () {
+          func.UI.worker.delete_job(SESSION_ID, ui_job_id);
+
+          if ($div.children().length) {
+            // UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')] = $div.children().clone(true);
+            $div.empty();
+            const height = $div?.data()?.xuData?.viewport_height || 10;
+            if (typeof height !== 'undefined') {
+              $div.css('height', height);
+            }
           }
+          // $div.addClass('skeleton');
+          observer_inViewport.observe($div[0]);
+        });
+        $div.addClass('skeleton');
+        observer_inViewport.observe($div[0]);
+      };
+      xu_viewport();
+    } else {
+      await iterate_child($div, nodeP, parent_infoP, $root_container);
+    }
+
+    // const ret_iterate_child = await iterate_child($div, nodeP, parent_infoP, null, $root_container);
+    return await done(ret);
+  };
+
+  const draw_html_element = async function (element) {
+    const done = async function (ret = {}) {
+      const xu_ui_id = $div.attr('xu-ui-id');
+      $div.css('display', 'unset');
+      if (ret.has_xu_exp_render_attribute) {
+        const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($div.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
+        UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = { $div: $div.clone(true), paramsP };
+        nodeP.xu_render_xu_ui_id = xu_ui_id;
+        nodeP.xu_render_cache_id = xu_render_cache_id;
+        if (ret.xu_render_background_processing) {
+          $container.find(`[xu-ui-id="${xu_ui_id}"]`).remove();
           return $div;
-        }
+        } //else {
+        //   $container.append(temp_$container.children());
+        //   return $div;
+        // }
+
+        return $div;
       } else {
+        // $container.append(temp_$container.children());
+        if (ret.has_xu_render_attribute) {
+          $container.find(`[xu-ui-id="${xu_ui_id}"]`).remove();
+        }
         return $div;
       }
     };
@@ -14781,6 +14901,11 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
 
     var $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, str);
 
+    $div.css('display', 'none');
+
+    let temp_$container = $('<tmp>').data('xuData', $container.data().xuData);
+    let temp_$div = $div.clone(true);
+
     $div.hover(
       function (e) {
         hover_in($div, e);
@@ -14795,7 +14920,7 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
       });
     }
 
-    let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
+    let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, temp_$container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, temp_$div, true);
     if (ret.abort || nodeP.tagName === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
       return await done(ret);
     }
@@ -14892,13 +15017,9 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
       };
       xu_viewport();
     } else {
-      if (glb.new_xu_render) {
-        if (ret.xu_render_background_processing) {
-          let temp_$div = $div.clone(true);
-          iterate_child(temp_$div, nodeP, parent_infoP, $root_container);
-        } else {
-          await iterate_child($div, nodeP, parent_infoP, $root_container);
-        }
+      if (ret.xu_render_background_processing) {
+        // let temp_$div = $div.clone(true);
+        iterate_child($div, nodeP, parent_infoP, $root_container);
       } else {
         await iterate_child($div, nodeP, parent_infoP, $root_container);
       }
@@ -14932,7 +15053,11 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
   // if (nodeP?.attributes?.['xu-viewport'] == 'true') {
   //   return await xu_viewport();
   // } else {
+  if (!glb.new_xu_render) {
+    return await draw_html_element_org(nodeP.tagName);
+  }
   return await draw_html_element(nodeP.tagName);
+
   // }
 };
 

package/js/xuda-runtime-slim.min.es.js

@@ -9931,7 +9931,7 @@ func.UI.screen.execute_xu_functions = async function (SESSION_ID, is_skeleton, $
             }
             $elm.remove();
           } else {
-            $elm.data('xuTeleportData', []);
+            $elm.data('xuTeleportData', []).attr('hidden', true);
             for (const [key, node] of Object.entries(nodeP.children)) {
               const $to_container = $(val.value);
               if (!$to_container?.length) {
@@ -12468,36 +12468,156 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
     },
   };
 
-  const draw_html_element = async function (element) {
-    // let temp_$container = $('<tmp>').data('xuData', $container.data().xuData);
-    // if (!glb.new_xu_render) {
-    //   temp_$container = $container;
-    // }
+  const draw_html_element_org = async function (element) {
     const done = async function (ret = {}) {
-      if (glb.new_xu_render) {
-        const xu_ui_id = $div.attr('xu-ui-id');
-        if (ret.has_xu_exp_render_attribute) {
-          const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($div.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
-          UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = { $div: $div.clone(true), paramsP };
-          nodeP.xu_render_xu_ui_id = xu_ui_id;
-          nodeP.xu_render_cache_id = xu_render_cache_id;
-          if (ret.xu_render_background_processing) {
-            $container.find(`[xu-ui-id="${xu_ui_id}"]`).remove();
-            return $div;
-          } //else {
-          //   $container.append(temp_$container.children());
-          //   return $div;
+      return $div;
+    };
+    if (!element || element === 'script') return await done();
+    let str = '';
+
+    var $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, str);
+
+    $div.hover(
+      function (e) {
+        hover_in($div, e);
+      },
+      function (e) {
+        hover_out();
+      },
+    );
+    if (paramsP.paramsP === 'grid' || parent_infoP?.iterate_info) {
+      $div.on('click contextmenu', function (e) {
+        hover_in($div, e);
+      });
+    }
+
+    let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $container, nodeP, $div, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
+    if (ret.abort || nodeP.tagName === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
+      return await done(ret);
+    }
+    // check if iterator made to prevent children render
+
+    if (nodeP?.attributes?.['xu-viewport'] == 'true') {
+      // const xu_viewport = async function () {
+      //   const data = { $div: $div.clone(true), nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, $container };
+      //   const container_id = $container.attr('xu-ui-id');
+      //   if (!UI_WORKER_OBJ.pending_for_viewport_render[container_id]) {
+      //     UI_WORKER_OBJ.pending_for_viewport_render[container_id] = { base_$div: $div, data: [], $container };
+      //     await iterate_child($div, nodeP, parent_infoP, $root_container);
+      //   } else {
+      //     $div.remove();
+      //   }
+      //   UI_WORKER_OBJ.pending_for_viewport_render[container_id].data.push(data);
+
+      //   // if (!$div.children().length) {
+      //   //   // render the first element to determine height
+      //   //   await iterate_child($div, nodeP, parent_infoP, $root_container);
+      //   //   // hover_in($div);
+      //   //   // func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', data, null, null, paramsP.dsSessionP);
+      //   // } else {
+      //   // }
+      // };
+      const xu_viewport = function () {
+        const observer_inViewport = new IntersectionObserver(
+          function (entries) {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                $(entry.target).trigger('inViewport');
+
+                // Optional: stop observing once triggered
+                observer_inViewport.unobserve(entry.target);
+              }
+            });
+          },
+          {
+            threshold: 0.1, // Trigger when 10% of element is visible
+          },
+        );
+
+        const observer_outViewport = new IntersectionObserver(
+          function (entries) {
+            entries.forEach((entry) => {
+              if (!entry.isIntersecting) {
+                // Element is OUT of viewport - trigger custom event
+                $(entry.target).trigger('outViewport');
+
+                // Optional: stop observing once triggered
+                // observer_outViewport.unobserve(entry.target);
+              }
+            });
+          },
+          {
+            threshold: 0, // Trigger when element is completely out of view
+          },
+        );
+
+        let ui_job_id;
+        $div.on('inViewport', function () {
+          if ($div.children().length) {
+            $div.removeClass('skeleton');
+            return;
+          }
+
+          // if (UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]) {
+          //   $div[0].style.removeProperty('height');
+          //   $div.removeClass('skeleton');
+          //   $div.html(UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')]);
+          // } else {
+          hover_in($div);
+          ui_job_id = func.UI.worker.add_to_queue(SESSION_ID, 'gui event', 'render_viewport', { $div, nodeP, parent_infoP, $root_container, paramsP, jobNoP, is_skeleton, keyP, refreshed_ds, parent_nodeP, check_existP, temp_$container }, null, null, paramsP.dsSessionP);
           // }
+          observer_outViewport.observe($div[0]);
+        });
 
-          return $div;
-        } else {
-          // $container.append(temp_$container.children());
-          if (ret.has_xu_render_attribute) {
-            $container.find(`[xu-ui-id="${xu_ui_id}"]`).remove();
+        $div.on('outViewport', function () {
+          func.UI.worker.delete_job(SESSION_ID, ui_job_id);
+
+          if ($div.children().length) {
+            // UI_WORKER_OBJ.cache[$div.attr('xu-ui-id')] = $div.children().clone(true);
+            $div.empty();
+            const height = $div?.data()?.xuData?.viewport_height || 10;
+            if (typeof height !== 'undefined') {
+              $div.css('height', height);
+            }
           }
+          // $div.addClass('skeleton');
+          observer_inViewport.observe($div[0]);
+        });
+        $div.addClass('skeleton');
+        observer_inViewport.observe($div[0]);
+      };
+      xu_viewport();
+    } else {
+      await iterate_child($div, nodeP, parent_infoP, $root_container);
+    }
+
+    // const ret_iterate_child = await iterate_child($div, nodeP, parent_infoP, null, $root_container);
+    return await done(ret);
+  };
+
+  const draw_html_element = async function (element) {
+    const done = async function (ret = {}) {
+      const xu_ui_id = $div.attr('xu-ui-id');
+      $div.css('display', 'unset');
+      if (ret.has_xu_exp_render_attribute) {
+        const xu_render_cache_id = await get_xu_render_cache_str(SESSION_ID, paramsP.dsSessionP, Object.keys($div.data()?.xuData?.attr_exp_info?.['xu-render']?.fields || {}));
+        UI_WORKER_OBJ.xu_render_cache[xu_ui_id + xu_render_cache_id] = { $div: $div.clone(true), paramsP };
+        nodeP.xu_render_xu_ui_id = xu_ui_id;
+        nodeP.xu_render_cache_id = xu_render_cache_id;
+        if (ret.xu_render_background_processing) {
+          $container.find(`[xu-ui-id="${xu_ui_id}"]`).remove();
           return $div;
-        }
+        } //else {
+        //   $container.append(temp_$container.children());
+        //   return $div;
+        // }
+
+        return $div;
       } else {
+        // $container.append(temp_$container.children());
+        if (ret.has_xu_render_attribute) {
+          $container.find(`[xu-ui-id="${xu_ui_id}"]`).remove();
+        }
         return $div;
       }
     };
@@ -12506,6 +12626,11 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
 
     var $div = await func.UI.screen.create_container(SESSION_ID, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, prop, null, null, element, null, str);
 
+    $div.css('display', 'none');
+
+    let temp_$container = $('<tmp>').data('xuData', $container.data().xuData);
+    let temp_$div = $div.clone(true);
+
     $div.hover(
       function (e) {
         hover_in($div, e);
@@ -12520,7 +12645,7 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
       });
     }
 
-    let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, $container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, $div, true);
+    let ret = await func.UI.screen.set_attributes_new(SESSION_ID, is_skeleton, $root_container, nodeP, temp_$container, paramsP, parent_infoP, jobNoP, keyP, parent_nodeP, temp_$div, true);
     if (ret.abort || nodeP.tagName === 'svg' || !_.isEmpty(nodeP?.attributes?.['xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-html']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-text']) || !_.isEmpty(nodeP?.attributes?.['xu-exp:xu-html'])) {
       return await done(ret);
     }
@@ -12617,13 +12742,9 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
       };
       xu_viewport();
     } else {
-      if (glb.new_xu_render) {
-        if (ret.xu_render_background_processing) {
-          let temp_$div = $div.clone(true);
-          iterate_child(temp_$div, nodeP, parent_infoP, $root_container);
-        } else {
-          await iterate_child($div, nodeP, parent_infoP, $root_container);
-        }
+      if (ret.xu_render_background_processing) {
+        // let temp_$div = $div.clone(true);
+        iterate_child($div, nodeP, parent_infoP, $root_container);
       } else {
         await iterate_child($div, nodeP, parent_infoP, $root_container);
       }
@@ -12657,7 +12778,11 @@ func.UI.screen.render_ui_tree = async function (SESSION_ID, $container, nodeP, p
   // if (nodeP?.attributes?.['xu-viewport'] == 'true') {
   //   return await xu_viewport();
   // } else {
+  if (!glb.new_xu_render) {
+    return await draw_html_element_org(nodeP.tagName);
+  }
   return await draw_html_element(nodeP.tagName);
+
   // }
 };