Remove option and automate setting

Author: iamrob-nl

package.json

@@ -1,7 +1,7 @@
 {
     "name": "javascriptsnippet",
     "widgetName": "JavaScriptSnippet",
-    "version": "2.2.0",
+    "version": "2.2.1",
     "description": "Insert custom JavaScript to your page.",
     "copyright": "2024 Incentro International BV",
     "author": "Rob Duits",

src/JavaScriptSnippet.jsx

@@ -1,7 +1,7 @@
 import "./ui/JavaScriptSnippet.css";
 import { createElement, useEffect, useState } from "react";
 
-export function JavaScriptSnippet({ attributeList, jsCode, waitForAttributeList, ...rest }) {
+export function JavaScriptSnippet({ attributeList, jsCode, ...rest }) {
     const [canRender, setCanRender] = useState(false);
     const [javaScriptString, setJavaScriptString] = useState([]);
     const widgetName = rest.name || "";
@@ -28,7 +28,18 @@ export function JavaScriptSnippet({ attributeList, jsCode, waitForAttributeList,
     useEffect(() => {
         let JSArray = jsCode;
 
-        if (waitForAttributeList && attributeList.length) {
+        // Auto-detect if we need to wait based on attributeList having items and any pending attributes
+        const hasAttributes = attributeList && attributeList.length > 0;
+        const allAttributesAvailable = hasAttributes
+            ? attributeList.every(attr => attr.jsAttribute.status === "available")
+            : true;
+
+        if (hasAttributes) {
+            if (!allAttributesAvailable) {
+                setCanRender(false);
+                return; // Exit early if attributes aren't ready
+            }
+
             attributeList.map(attr => {
                 if (attr.jsAttribute.status === "available") {
                     const useValue =
@@ -58,17 +69,7 @@ export function JavaScriptSnippet({ attributeList, jsCode, waitForAttributeList,
 
         JSArray = JSArray.split("this").join(`'${widgetName}_${uid[0]}'`);
         setJavaScriptString(JSArray);
-
-        if (!waitForAttributeList && !attributeList.length) {
-            setCanRender(true);
-        }
-
-        // clean-up function
-        return () => {
-            if (waitForAttributeList && attributeList.length) {
-                setCanRender(true);
-            }
-        };
+        setCanRender(true); // Only set to true when everything is ready
     }, [attributeList, jsCode, widgetName]);
 
     if (canRender) {

src/JavaScriptSnippet.xml

@@ -52,10 +52,6 @@ Whenever using the `this`  string inside the widget, it will be replaced by the
                     </propertyGroup>
                 </properties>
             </property>
-            <property key="waitForAttributeList" type="boolean" defaultValue="false">
-                <caption>Wait for AttributeList</caption>
-                <description>Widget only continues after Attributes have been loaded (on false, the widget might get more inside reloads).</description>
-            </property>
         </propertyGroup>
     </properties>
 </widget>

src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="JavaScriptSnippet" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="JavaScriptSnippet" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="JavaScriptSnippet.xml" />
         </widgetFiles>