iobroker.vis-jsontemplate 4.1.3 → 4.3.10

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2025 oweitman <oweitman@gmx.de>
+Copyright (c) 2025-2026 oweitman <oweitman@gmx.de>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -59,18 +59,52 @@ a combined form of HTML code + JavaScript + CSS + special tags that control
 the display of the JSON attributes.
 JSONTemplate now supports async calls with await.
 
-| Setting       | description                                                                                                                                                                                                                                                                       |
-| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| json_template | The template can be used to determine the appearance of the JSON data. All valid HTML tags (including CSS attributes in style tags) can be used in the template. There are also special tags within which the JSON data is displayed and JavaScript instructions can be executed. |
-| json_oid      | Selection of the data point with the corresponding JSON data.                                                                                                                                                                                                                     |
-| json_dpCount  | Number of data points to be made available in the template.                                                                                                                                                                                                                       |
-| json_dp       | Datapoint ID to be made available.                                                                                                                                                                                                                                                |
+| Setting          | description                                                                                                                                                                                                                                                                       |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| json_template    | The template can be used to determine the appearance of the JSON data. All valid HTML tags (including CSS attributes in style tags) can be used in the template. There are also special tags within which the JSON data is displayed and JavaScript instructions can be executed. |
+| json_oid         | Selection of the data point with the corresponding JSON data.                                                                                                                                                                                                                     |
+| json_dpCount     | Number of data points to be made available in the template.                                                                                                                                                                                                                       |
+| json_dp          | Datapoint ID to be made available.                                                                                                                                                                                                                                                |
+| json_scriptCount | Number of JavaScript URLs to be loaded                                                                                                                                                                                                                                            |
+| json_script[]    | JavaScript URL to be loaded. See example below.                                                                                                                                                                                                                                   |
+| json_cssCount    | Number of CSS URLs to be loaded.                                                                                                                                                                                                                                                  |
+| json_css[]       | CSS URL to be loaded.                                                                                                                                                                                                                                                             |
 
 For details on the template system, see chapter Template based on examples
 
-The JSON data is passed to the template with the prefix data. In addition,
-the current widgetID is also available as a variable so that it can be
-specified in individual CSS instructions.
+Available data objects in the template:
+
+| object/variable | description                                                              |
+| --------------- | ------------------------------------------------------------------------ |
+| widgetID        | widgetID of the widget.                                                  |
+| data            | JSON object referenced by the datapoint in json_oid.                     |
+| dp              | Array of the datapoint data, referenced by the additional datapoints     |
+| widget          | internal widget data. object with all available widget settings          |
+| style           | internal style data. object with all available widget style informations |
+
+The additional datapoints can be accessed by
+A) the name of the datapoint
+
+```javascript
+<%- dp["0_userdata.0.test"] %>
+<%- dp["0_userdata.0.abc"] %>
+```
+
+B) Indexnumber of the datapoint (the number always start with 0)
+
+```javascript
+<%- dp[Object.keys(dp)[0]] %>
+<%- dp[Object.keys(dp)[1]] %>
+```
+
+Example output of data, widget and style in the template
+
+```ejs
+<%- JSON
+    .stringify(style, null, 4)
+    .replace(/\n/g, '<br>')
+    .replace(/ /g, '&nbsp;'); %>
+```
 
 #### Advanced use case
 
@@ -143,6 +177,76 @@ definition of the sendToAsync function
 [{"label":"Afghanistan","value":"AF"},{"label":"Åland Islands","value":"AX"},{"label":"Albania","value":"AL"}]
 ```
 
+#### Use case for loading additional scripts
+
+Additional fields allow you to load JavaScript libraries (e.g., from CDNs
+like jsDelivr or cdnjs). The following example demonstrates this
+for the chartJS library.
+
+**Step 1:**
+
+Create a new Datapoint with type string or json named `0_userdata.0.chartData`
+and the following content
+
+```json
+[12, 19, 3, 5, 2, 3]
+```
+
+**Step 2:**
+
+Enter the following url in the json_script[1] field:
+
+```text
+https://cdn.jsdelivr.net/npm/chart.js
+```
+
+**Step 3:**
+
+Enter the created data point name in the JSON Datapoint field.
+Enter the following template in the JSON Template field.
+
+Except for one line, this is standard HTML + JavaScript.
+
+```html
+data: <%- JSON.stringify(data) %>,
+```
+
+The data read from the data point is available in the JavaScript
+variable `data` and is output within the template instructions <%- ... %>.
+Once the template is compiled and included in the HTML document,
+it is executed by the browser, so that the chart is displayed via JavaScript.
+
+```ejs
+<div>
+  <canvas id="myChart"></canvas>
+</div>
+
+<script>
+  const ctx = document.getElementById('myChart');
+
+  new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+      datasets: [{
+        label: '# of Votes',
+        data: <%- JSON.stringify(data) %>,
+        borderWidth: 1
+      }]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+</script>
+```
+
+![Example](img/example_extscripts.png)
+
 #### Use case for a database-supported task list
 
 ##### **Introduction**
@@ -317,6 +421,27 @@ as `local_?` data points are processed internally within VIS (see `vis` document
 
 ## Templatesystem
 
+## Important note for the template system in vis
+
+In vis, all object notations in the following form are recognized and replaced as bindings.
+
+Therefore, the opening and closing brackets of all object notations must be placed on separate lines:
+
+Incorrect:
+
+```json
+{ "a": 1, "b": 2 }
+```
+
+Correct
+
+```json
+{
+    "a": 1,
+    "b": 2
+}
+```
+
 ## Tags
 
 The template system works with certain tags.
@@ -507,6 +632,28 @@ Loop over the attributes of an object
   Placeholder for the next version (at the beginning of the line):
   ### **WORK IN PROGRESS**
 -->
+### 4.3.10 (2026-01-25)
+
+- update test and release script
+
+### 4.3.1 (2026-01-24)
+
+- try again to publish
+
+### 4.3.0 (2026-01-24)
+
+- The ability to load additional JavaScript and CSS files has been added.
+  This is currently only available for vis1 for testing purposes.
+
+### 4.2.0 (2025-11-14)
+
+- Improve documentation for the object notation in a template
+- fix some translations
+- align attribute name to vis1
+- add widget data to the available template objects in vis2
+- add style and widget object to the available template objects in vis1
+- improve documentation
+
 ### 4.1.3 (2025-11-03)
 
 - fix race condition if more than one widget use the same datapoint
@@ -532,7 +679,7 @@ Loop over the attributes of an object
 
 MIT License
 
-Copyright (c) 2021-2025 oweitman <oweitman@gmx.de>
+Copyright (c) 2021-2026 oweitman <oweitman@gmx.de>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/io-package.json

@@ -1,59 +1,98 @@
 {
   "common": {
     "name": "vis-jsontemplate",
-    "version": "4.1.3",
+    "version": "4.3.10",
     "news": {
-      "4.1.3": {
-        "en": "fix race condition if more than one widget use the same datapoint\nswitch to trusted publishing",
-        "de": "fixe rassenbedingung, wenn mehr als ein widget den gleichen datenpunkt verwenden\nauf vertrauenswürdige veröffentlichung wechseln",
-        "ru": "исправить состояние гонки, если более чем один виджет использует одну и ту же точку данных\nпереход к доверенной публикации",
-        "pt": "corrigir a condição de corrida se mais de um elemento usar o mesmo ponto de dados\nmudar para publicação confiável",
-        "nl": "fix race conditie als meer dan één widget hetzelfde datapoint gebruiken\noverschakelen naar vertrouwde publicatie",
-        "fr": "fixer l'état de la course si plus d'un widget utilise le même point de données\npasser à une publication fiable",
-        "it": "correzione condizione di gara se più di un widget utilizzare lo stesso datapoint\npassare alla pubblicazione di fiducia",
-        "es": "arreglar la condición de carrera si más de un widget utiliza el mismo punto de datos\ncambio a la publicación de confianza",
-        "pl": "naprawić stan wyścigu, jeśli więcej niż jeden widget korzystać z tego samego punktu danych\nprzełączanie na zaufaną publikację",
-        "uk": "фіксувати стан забігу, якщо більше одного віджета використовувати однакову точку даних\nпереключення до перевіреного видання",
-        "zh-cn": "如果多个部件使用相同的数据点, 则固定种族条件\n切换到可信任的出版"
+      "4.3.10": {
+        "en": "update test and release script",
+        "de": "update-test und release-skript",
+        "ru": "обновить тест и выпустить скрипт",
+        "pt": "atualizar script de teste e lançamento",
+        "nl": "update test- en releasescript",
+        "fr": "mettre à jour le script test et release",
+        "it": "test di aggiornamento e script di rilascio",
+        "es": "actualización de prueba y script de liberación",
+        "pl": "aktualizacja skryptu testowego i wydania",
+        "uk": "скрипт тестування і реліз",
+        "zh-cn": "更新测试并发布脚本"
       },
-      "4.1.2": {
-        "en": "new try of publish",
-        "de": "neuer Versuch der Veröffentlichung",
-        "ru": "новая попытка публикации",
-        "pt": "nova tentativa de publicação",
-        "nl": "nieuwe poging tot publiceren",
-        "fr": "nouvel essai de publication",
-        "it": "nuovo tentativo di pubblicazione",
-        "es": "nuevo intento de publicar",
-        "pl": "nowa próba publikacji",
-        "uk": "нова спроба публікації",
-        "zh-cn": "new try of publish"
+      "4.3.9": {
+        "en": "update test and release script",
+        "de": "update-test und release-skript",
+        "ru": "обновить тест и выпустить скрипт",
+        "pt": "atualizar script de teste e lançamento",
+        "nl": "update test- en releasescript",
+        "fr": "mettre à jour le script test et release",
+        "it": "test di aggiornamento e script di rilascio",
+        "es": "actualización de prueba y script de liberación",
+        "pl": "aktualizacja skryptu testowego i wydania",
+        "uk": "скрипт тестування і реліз",
+        "zh-cn": "更新测试并发布脚本"
       },
-      "4.0.2": {
-        "en": "remove v4.0.0 from io-package",
-        "de": "entfernen v4.0.0 von io-package",
-        "ru": "удалить v4.0.0 из пакета io",
-        "pt": "remover v4.0.0 do pacote io",
-        "nl": "v4.0.0 uit io-package verwijderen",
-        "fr": "supprimer v4.0.0 du io-package",
-        "it": "rimuovere v4.0.0 da io-package",
-        "es": "quitar v4.0.0 de io-paquete",
-        "pl": "usunąć v4.0.0 z opakowania jo-",
-        "uk": "remove v4.0.0 від io-package",
-        "zh-cn": "从 io 包装中删除 v4. 0.0"
+      "4.3.8": {
+        "en": "update test and release script",
+        "de": "update-test und release-skript",
+        "ru": "обновить тест и выпустить скрипт",
+        "pt": "atualizar script de teste e lançamento",
+        "nl": "update test- en releasescript",
+        "fr": "mettre à jour le script test et release",
+        "it": "test di aggiornamento e script di rilascio",
+        "es": "actualización de prueba y script de liberación",
+        "pl": "aktualizacja skryptu testowego i wydania",
+        "uk": "скрипт тестування і реліз",
+        "zh-cn": "更新测试并发布脚本"
       },
-      "4.0.1": {
-        "en": "move vis1 and vis2 widgets to vis-jsontemplate adapter",
-        "de": "vis1 und vis2 widgets zu vis-jsontemplate adapter verschieben",
-        "ru": "переместить виджеты vis1 и vis2 в адаптер vis-jsontemplate",
-        "pt": "mover widgets vis1 e vis2 para o adaptador vis-jsontemplate",
-        "nl": "vis1 en vis2 widgets verplaatsen naar vis-jsentemplaatadapter",
-        "fr": "déplacer les widgets vis1 et vis2 vers l'adaptateur vis-jsontemplate",
-        "it": "spostare i widget vis1 e vis2 per l'adattatore vis-jsontemplate",
-        "es": "mover vis1 y vis2 widgets al adaptador vis-jsontemplate",
-        "pl": "przesuń widżety vis1 i vis2 do adaptera vis- jsonszablon",
-        "uk": "перемістіть віджети vis1 і vis2 до адаптера vis-jsontemplate",
-        "zh-cn": "将粘度1和粘度2的部件移动到粘度调试器上"
+      "4.3.7": {
+        "en": "update test and release script",
+        "de": "update-test und release-skript",
+        "ru": "обновить тест и выпустить скрипт",
+        "pt": "atualizar script de teste e lançamento",
+        "nl": "update test- en releasescript",
+        "fr": "mettre à jour le script test et release",
+        "it": "test di aggiornamento e script di rilascio",
+        "es": "actualización de prueba y script de liberación",
+        "pl": "aktualizacja skryptu testowego i wydania",
+        "uk": "скрипт тестування і реліз",
+        "zh-cn": "更新测试并发布脚本"
+      },
+      "4.3.6": {
+        "en": "update test and release script",
+        "de": "update-test und release-skript",
+        "ru": "обновить тест и выпустить скрипт",
+        "pt": "atualizar script de teste e lançamento",
+        "nl": "update test- en releasescript",
+        "fr": "mettre à jour le script test et release",
+        "it": "test di aggiornamento e script di rilascio",
+        "es": "actualización de prueba y script de liberación",
+        "pl": "aktualizacja skryptu testowego i wydania",
+        "uk": "скрипт тестування і реліз",
+        "zh-cn": "更新测试并发布脚本"
+      },
+      "4.3.5": {
+        "en": "update test and release script",
+        "de": "update-test und release-skript",
+        "ru": "обновить тест и выпустить скрипт",
+        "pt": "atualizar script de teste e lançamento",
+        "nl": "update test- en releasescript",
+        "fr": "mettre à jour le script test et release",
+        "it": "test di aggiornamento e script di rilascio",
+        "es": "actualización de prueba y script de liberación",
+        "pl": "aktualizacja skryptu testowego i wydania",
+        "uk": "скрипт тестування і реліз",
+        "zh-cn": "更新测试并发布脚本"
+      },
+      "4.3.4": {
+        "en": "update test and release script",
+        "de": "update-test und release-skript",
+        "ru": "обновить тест и выпустить скрипт",
+        "pt": "atualizar script de teste e lançamento",
+        "nl": "update test- en releasescript",
+        "fr": "mettre à jour le script test et release",
+        "it": "test di aggiornamento e script di rilascio",
+        "es": "actualización de prueba y script de liberación",
+        "pl": "aktualizacja skryptu testowego i wydania",
+        "uk": "скрипт тестування і реліз",
+        "zh-cn": "更新测试并发布脚本"
       }
     },
     "titleLang": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.vis-jsontemplate",
-  "version": "4.1.3",
+  "version": "4.3.10",
   "description": "vis-jsontemplate",
   "author": {
     "name": "oweitman",
@@ -25,14 +25,13 @@
     "@alcalzone/release-script-plugin-iobroker": "^4.0.0",
     "@alcalzone/release-script-plugin-license": "^4.0.0",
     "@alcalzone/release-script-plugin-manual-review": "^4.0.0",
-    "@iobroker/build-tools": "^2.0.15",
+    "@iobroker/adapter-dev": "^1.5.0",
     "@iobroker/eslint-config": "^2.2.0",
+    "@iobroker/testing": "^5.2.2",
+    "@iobroker/build-tools": "^2.0.15",
     "@iobroker/vis-2-widgets-react-dev": "^4.0.4",
     "@iobroker/vis-2-widgets-testing": "^1.0.6",
-    "@iobroker/adapter-dev": "^1.5.0",
-    "@iobroker/testing": "^5.1.1",
-    "@types/gulp": "^4.0.18",
-    "@types/node": "^24.10.0"
+    "@types/node": "^24.10.1"
   },
   "main": "widgets/vis2jsontemplate/customWidgets.js",
   "files": [
@@ -44,6 +43,7 @@
   "scripts": {
     "test:package": "mocha test/package --exit",
     "test:widgets": "mocha ./test/*.test.js",
+    "test:integration": "mocha test/package --exit",
     "test": "npm run test:package && npm run test:widgets",
     "prepublishOnly": "npm run build-vis1widgets && npm run build-vis2widgets",
     "lint": "npm run lint-adapter && npm run lint-vis1widgets && npm run lint-vis2widgets",

package/widgets/vis-jsontemplate/dist/jsontemplate-dist.js

@@ -58,7 +58,7 @@
   var version;
   var init_package = __esm({
     "../package.json"() {
-      version = "4.1.3";
+      version = "4.3.10";
     }
   });
 
@@ -73,6 +73,8 @@
       }));
       vis.binds["jsontemplate"] = {
         version,
+        _assetCache: vis.binds["jsontemplate"] && vis.binds["jsontemplate"]._assetCache || /* @__PURE__ */ new Map(),
+        _widgetInit: vis.binds["jsontemplate"] && vis.binds["jsontemplate"]._widgetInit || /* @__PURE__ */ new Map(),
         /**
          * Log the version of jsontemplate and remove it.
          * Should be called from the main thread, as it logs to the console.
@@ -139,6 +141,20 @@
                   bound.push(data[`json_dp${i}`]);
                 }
               }
+              const scriptCount = data.json_scriptCount ? data.json_scriptCount : 1;
+              const scripts = [];
+              for (let i = 1; i <= scriptCount; i++) {
+                if (data[`json_script${i}`]) {
+                  scripts.push(data[`json_script${i}`]);
+                }
+              }
+              const cssCount = data.json_cssCount ? data.json_cssCount : 1;
+              const css = [];
+              for (let i = 1; i <= cssCount; i++) {
+                if (data[`json_css${i}`]) {
+                  css.push(data[`json_css${i}`]);
+                }
+              }
               if (bound) {
                 if (!vis.editMode) {
                   yield vis.binds["jsontemplate"].bindStatesAsync(
@@ -153,7 +169,15 @@
                   );
                 }
               }
-              yield this.render(widgetID, view, data);
+              try {
+                yield vis.binds["jsontemplate"].initWidgetAssetsOnce(widgetID, scripts, css);
+              } catch (e) {
+                let msg = vis.binds["jsontemplate"].escapeHTML(e.message).replace(/(?:\r\n|\r|\n)/g, "<br>");
+                msg = msg.replace(/ /gm, "&nbsp;");
+                $div.html(`<code style="color:red;">${msg}</code>`);
+                return;
+              }
+              yield this.render(widgetID, view, data, style);
             });
           },
           /**
@@ -178,7 +202,7 @@
            * It then uses EJS to render the template with the provided data and updates the widget's HTML content.
            * In case of an error during rendering, it escapes and formats the error message to display it in the widget.
            */
-          render: function(widgetID, view, data) {
+          render: function(widgetID, view, data, style) {
             return __async(this, null, function* () {
               const oiddata = data.json_oid ? JSON.parse(vis.states.attr(`${data.json_oid}.val`)) : {};
               const dpCount = data.json_dpCount ? data.json_dpCount : 1;
@@ -193,7 +217,7 @@
               try {
                 text = yield ejs.render(
                   template,
-                  { widgetID, data: oiddata, dp: datapoints },
+                  { widgetID, data: oiddata, dp: datapoints, widget: data, style },
                   { async: true }
                 );
               } catch (e) {
@@ -393,6 +417,105 @@
             }
           };
           return line;
+        },
+        loadAsset: function(url, kind) {
+          const u = (url || "").trim();
+          if (!u) {
+            return Promise.resolve();
+          }
+          const cache = vis.binds["jsontemplate"]._assetCache;
+          if (cache.has(u)) {
+            return cache.get(u);
+          }
+          const p = new Promise((resolve, reject) => {
+            try {
+              const isCss = kind === "css" || u.toLowerCase().endsWith(".css");
+              const isJs = kind === "js" || u.toLowerCase().endsWith(".js") || !isCss;
+              if (isCss) {
+                const existing = document.querySelector(`link[rel="stylesheet"][href="${CSS.escape(u)}"]`);
+                if (existing) {
+                  return resolve();
+                }
+                const link = document.createElement("link");
+                link.rel = "stylesheet";
+                link.href = u;
+                link.onload = () => resolve();
+                link.onerror = () => reject(new Error(`CSS konnte nicht geladen werden: ${u}`));
+                document.head.appendChild(link);
+                return;
+              }
+              if (isJs) {
+                const existing = document.querySelector(`script[src="${CSS.escape(u)}"]`);
+                if (existing) {
+                  return resolve();
+                }
+                const s = document.createElement("script");
+                s.src = u;
+                s.async = false;
+                s.defer = false;
+                s.onload = () => resolve();
+                s.onerror = () => reject(new Error(`Script konnte nicht geladen werden: ${u}`));
+                document.head.appendChild(s);
+                return;
+              }
+              resolve();
+            } catch (err) {
+              reject(err);
+            }
+          });
+          cache.set(u, p);
+          return p;
+        },
+        loadAssetsInOrder: function(assets) {
+          return __async(this, null, function* () {
+            if (!assets || !assets.length) {
+              return;
+            }
+            for (const a of assets) {
+              if (!a) {
+                continue;
+              }
+              if (typeof a === "string") {
+                yield vis.binds["jsontemplate"].loadAsset(a);
+              } else {
+                yield vis.binds["jsontemplate"].loadAsset(a.url, a.kind);
+              }
+            }
+          });
+        },
+        /**
+         * Lädt CSS und Scripts (einmalig) in definierter Reihenfolge:
+         * 1) CSS (Reihenfolge beibehalten, relevant für Overrides)
+         * 2) JS  (sequentiell, relevant für Abhängigkeiten)
+         */
+        loadScriptsAndCssOnce: function(scripts, css) {
+          return __async(this, null, function* () {
+            if (Array.isArray(css) && css.length) {
+              const cssAssets = css.map((u) => (u || "").trim()).filter(Boolean).map((u) => ({ url: u, kind: "css" }));
+              yield vis.binds["jsontemplate"].loadAssetsInOrder(cssAssets);
+            }
+            if (Array.isArray(scripts) && scripts.length) {
+              const scriptAssets = scripts.map((u) => (u || "").trim()).filter(Boolean).map((u) => ({ url: u, kind: "js" }));
+              yield vis.binds["jsontemplate"].loadAssetsInOrder(scriptAssets);
+            }
+          });
+        },
+        /**
+         * Einmalige Initialisierung pro WidgetID + Asset-Set.
+         * Dadurch wird bei render()-Aufrufen (State changes) nicht erneut geladen.
+         * Wenn sich Assets in den Properties ändern, erzeugt der Key ein neues Init-Promise.
+         */
+        initWidgetAssetsOnce: function(widgetID, scripts, css) {
+          const initMap = vis.binds["jsontemplate"]._widgetInit;
+          const key = `${widgetID}::css=${(css || []).map((s) => String(s).trim()).filter(Boolean).join("|")}::js=${(scripts || []).map((s) => String(s).trim()).filter(Boolean).join("|")}`;
+          if (initMap.has(key)) {
+            return initMap.get(key);
+          }
+          const p = (() => __async(null, null, function* () {
+            yield vis.binds["jsontemplate"].loadScriptsAndCssOnce(scripts, css);
+          }))();
+          initMap.set(key, p);
+          return p;
         }
       };
       vis.binds["jsontemplate"].showVersion();