iobroker.vis-jsontemplate 4.2.0 → 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,12 +59,16 @@ 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
 
@@ -173,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**
@@ -558,6 +632,19 @@ 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
@@ -592,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,72 +1,98 @@
 {
   "common": {
     "name": "vis-jsontemplate",
-    "version": "4.2.0",
+    "version": "4.3.10",
     "news": {
-      "4.2.0": {
-        "en": "Improve documentation for the object notation in a template\nfix some translations\nalign attribute name to vis1\nadd widget data to the available template objects in vis2\nadd style and widget object to the available template objects in vis1\nimprove documentation",
-        "de": "Verbessern Sie die Dokumentation der Objektnotation in einer Vorlage\neinige übersetzungen beheben\nattributname auf vis1 ausrichten\nwidget-daten zu den verfügbaren vorlagenobjekten in vis2 hinzufügen\nstyle und widget-objekt zu den verfügbaren vorlagenobjekten in vis1 hinzufügen\nverbesserung der dokumentation",
-        "ru": "Улучшить документацию для обозначения объекта в шаблоне\nисправить некоторые переводы\nвыравнивание имени атрибута для vis1\nдобавить данные виджета в доступные объекты шаблона в vis2\nдобавить стиль и объект виджета к доступным объектам шаблона в vis1\nулучшить документацию",
-        "pt": "Melhorar a documentação para a notação do objeto em um modelo\ncorrigir algumas traduções\nalinhar o nome do atributo para vis1\nadicionar dados de widget aos objetos de modelo disponíveis em vis2\nadicionar estilo e objeto widget aos objetos de modelo disponíveis em vis1\nmelhorar a documentação",
-        "nl": "De documentatie voor de objectnotatie in een sjabloon verbeteren\nsommige vertalingen te herstellen\nuitlijnen attribuutnaam naar vis1\nwidgetgegevens toevoegen aan de beschikbare sjabloonobjecten in vis2\ntoevoegen van stijl en widget object aan de beschikbare sjabloon objecten in vis1\nde documentatie verbeteren",
-        "fr": "Améliorer la documentation pour la notation d'objet dans un modèle\ncorriger certaines traductions\naligner le nom d'attribut sur vis1\najouter des données de widget aux objets de gabarit disponibles dans vis2\najouter style et objet widget aux objets template disponibles dans vis1\naméliorer la documentation",
-        "it": "Migliorare la documentazione per la notazione degli oggetti in un modello\nfissare alcune traduzioni\nalign attributo name a vis1\naggiungere i dati dei widget agli oggetti di modello disponibili in vis2\naggiungere oggetto stile e widget agli oggetti template disponibili in vis1\nmigliorare la documentazione",
-        "es": "Mejorar la documentación para la notación de objetos en una plantilla\narreglar algunas traducciones\nnombre de atributo alineado a vis1\nañadir datos de widget a los objetos de plantilla disponibles en vis2\nañadir estilo y objeto widget a los objetos de plantilla disponibles en vis1\nmejorar la documentación",
-        "pl": "Popraw dokumentację zapisu obiektu w szablonie\nnaprawić niektóre tłumaczenia\nwyrównać nazwę atrybutu do vis1\ndodaj dane widget do dostępnych obiektów szablonu w vis2\ndodaj styl i obiekt widget do dostępnych obiektów szablonu w vis1\npoprawić dokumentację",
-        "uk": "Покращити документацію для позначення об'єкта в шаблоні\nвиправити деякі переклади\nalign name атрибута в vis1\nдодати дані віджету на доступні шаблонні об'єкти в vis2\nдодати стиль і віджет об'єкта в доступні шаблони об'єктів в vis1\nвдосконалення документації",
-        "zh-cn": "改进模板中对象标记的文档\n修复一些翻译\n将属性名称与 vis1 对齐\n在 vis2 中将部件数据添加到可用的模板对象\n在 vis1 中将样式和部件对象添加到可用的模板对象\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.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.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.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.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.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.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.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.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.2.0",
+  "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.2.2",
-    "@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.2.0";
+      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,6 +169,14 @@
                   );
                 }
               }
+              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);
             });
           },
@@ -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();