iobroker.vis-jsontemplate 4.3.11 → 4.4.1

package/README.md

@@ -16,6 +16,9 @@
 Adapter to visualize JSON data and other data in Vis/Vis2.
 You can customize the output of the data with a template system.
 In the templates you can include HTML, CSS and Javascript.
+The template system used was `ejs`.
+You can try out the basic features here in the online playground.
+<https://ionicabizau.github.io/ejs-playground>
 
 The jsontemplate widget was previously available in the rssfeed (for vis1) and
 vis-2-widgets-ovarious adapters. The widgets will be removed from these
@@ -139,293 +142,21 @@ a specific layout. Here is an example:
 
 (In Markdown colors aren't visible)
 
-#### Use case for async calls
+#### More Use Cases
 
-**Block 1:**
-
-call sendToAsync Function with await. This example calls a test function
-in the admin adapter.
-
-**Block 2:**
-
-stringify the result and output to html
-
-**Block 3:**
-
-definition of the sendToAsync function
-
-```ejs
-<% req = await sendToAsync("admin.0","selectSendTo",{test:"test"}); %>
-<%- JSON.stringify(req) %>
-<% async function sendToAsync(instance, command, sendData) {
-    console.log(`sendToAsync ${command} ${sendData}`);
-    return new Promise((resolve, reject) => {
-        try {
-            vis.conn.sendTo(instance, command, sendData, function (receiveData) {
-                resolve(receiveData);
-            });
-        } catch (error) {
-            reject(error);
-        }
-    });
-} %>
-```
-
-**Result:**
-
-```text
-[{"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**
-
-This use case describes how to visualize and interactively modify
-a to-do list from a MySQL database in `ioBroker`.
-The focus is on implementing a simple
-status change via a button click. This concept serves as
-a **Proof of Concept (PoC)** and can be included in future documentation.
-
----
-
-##### **Database Structure (MySQL)**
-
-First, a MySQL database named `test` is created.
-It contains a table `test` with the following fields:
-
-- `id`: Unique ID for each entry
-- `todo`: Title of the to-do entry
-- `action`: Status of the entry (0 = in progress, 1 = completed)
-
-###### **SQL Code for Table Creation**
-
-<details>
-  <summary>Details</summary>
-  <pre><code>
-
-```sql
-
-CREATE TABLE `test` (
-`id` int(11) NOT NULL,
-`todo` varchar(100) NOT NULL,
-`action` int(11) NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-
-INSERT INTO `test` (`id`, `todo`, `action`) VALUES
-(1, 'Todo 1', 0),
-(2, 'Todo 2', 1),
-(3, 'Todo 3', 1),
-(4, 'Todo 4', 0);
-
-ALTER TABLE `test`
-ADD PRIMARY KEY (`id`),
-ADD UNIQUE KEY `id` (`id`),
-ADD KEY `idx` (`id`);
-
-ALTER TABLE `test`
-MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
-COMMIT;
-
-```
-
-</code></pre>
-
-</details>
-
----
-
-##### **Integration into ioBroker**
-
-###### **SQL Adapter**
-
-To interact with the database, the `ioBroker.sql` adapter is required.
-It is configured accordingly to connect to the MySQL database `test`.
-Note that `ioBroker` automatically creates its own structures in the
-database to store history data points.
-
-###### **JSONTemplate Widget**
-
-For visualization, we use the `JSONTemplate` widget.
-
-##### **Integration into VIS**
-
-We place the `JSONTemplate` widget and fill in the following fields:
-
-###### **Template Code**
-
-<details>
-  <summary>Details</summary>
-  <pre><code>
-
-```html
-<style>
-    .btn {
-        width: 100%;
-    }
-</style>
-<table>
-    <tr>
-        <th>ID</th>
-        <th>Todo</th>
-        <th>Action</th>
-    </tr>
-    <% let todos = await getTodo(); for (let i = 0; i < todos.length; i++) { let todo = todos[i]; %>
-    <tr>
-        <td><%- todo.id %></td>
-        <td><%- todo.todo %></td>
-        <td><%- getButton(todo.id, todo.action) %></td>
-    </tr>
-    <% } %>
-</table>
-
-<script>
-    window.vis-jsontemplate = { clicktodo: clicktodo };
-
-    function getButton(id, action) {
-        let text = action === 0 ? 'In Progress' : 'Completed';
-        return `<button class="btn" onclick="window.vis-jsontemplate.clicktodo(this)" data-id="${id}" data-action="${action}">${text}</button>`;
-    }
-
-    function clicktodo(el) {
-        let id = el.dataset.id;
-        let action = el.dataset.action;
-        let nextAction = action == 0 ? 1 : 0;
-        setAction(id, nextAction);
-    }
-
-    async function getTodo() {
-        let req = await sendToAsync('sql.0', 'query', 'SELECT * FROM test.test');
-        return req.result;
-    }
-
-    async function setAction(id, action) {
-        await sendToAsync('sql.0', 'query', `UPDATE test.test SET action = ${action} WHERE id = ${id}`);
-        vis.setValue('local_trigger', Math.random());
-    }
-
-    async function sendToAsync(instance, command, sendData) {
-        return new Promise((resolve, reject) => {
-            try {
-                vis.conn.sendTo(instance, command, sendData, receiveData => resolve(receiveData));
-            } catch (error) {
-                reject(error);
-            }
-        });
-    }
-</script>
-```
-
-</code></pre>
-
-</details>
-
-###### **Data Point for Refreshing Content**
-
-To ensure updates are reflected after a status change,
-we add the following local data point:
-
-```text
-local_trigger
-```
-
-This data point **does not need to be explicitly created**,
-as `local_?` data points are processed internally within VIS (see `vis` documentation).
-
-##### **Code Explanation**
-
-###### **Template Structure**
-
-| Line  | Content                                                                |
-| ----- | ---------------------------------------------------------------------- |
-| 1-5   | CSS styles for button appearance                                       |
-| 6-11  | Table header with columns ID, Todo, Action                             |
-| 12-16 | Fetching data from the MySQL database using `getTodo()`                |
-| 17-21 | Loop to display to-do entries with buttons                             |
-| 23-28 | Global reference of the `clicktodo()` function                         |
-| 30-37 | `getButton()` function to create a button with the current status      |
-| 38-44 | `clicktodo()` function to change the status via button click           |
-| 45-48 | `getTodo()` function to fetch data via the SQL adapter                 |
-| 49-52 | `setAction()` function to update the database entry                    |
-| 53-58 | `sendToAsync()` function to use `async/await` with `vis.conn.sendTo()` |
+- [Use Case Async calls](documentation/usecase-asynccall.md)
+- [Use Case loading scripts](documentation/usecase-loadingscripts.md)
+- [Use Case Tasklist](documentation/usecase-tasklist.md)
 
 ## Templatesystem
 
 ## Important note for the template system in vis
 
-In vis, all object notations in the following form are recognized and replaced as bindings.
+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:
+Therefore, the opening and closing brackets of all object notations must
+be placed on separate lines:
 
 Incorrect:
 
@@ -632,6 +363,19 @@ Loop over the attributes of an object
   Placeholder for the next version (at the beginning of the line):
   ### **WORK IN PROGRESS**
 -->
+### 4.4.1 (2026-04-13)
+
+- fix regression
+- update packages
+
+### 4.4.0 (2026-03-24)
+
+- optimize lib size
+- The ability to load additional JavaScript and CSS files
+  has been added (also for vis2).
+- Improve react components
+- align translation for vis2 widget
+
 ### 4.3.11 (2026-01-25)
 
 - check test release workflow

package/io-package.json

@@ -1,8 +1,34 @@
 {
   "common": {
     "name": "vis-jsontemplate",
-    "version": "4.3.11",
+    "version": "4.4.1",
     "news": {
+      "4.4.1": {
+        "en": "fix regression\nupdate packages",
+        "de": "regression\nupdate-pakete",
+        "ru": "фиксировать регрессию\nобновление пакетов",
+        "pt": "corrigir regressão\natualizar pacotes",
+        "nl": "repareren regressie\npakketten bijwerken",
+        "fr": "fixer la régression\nmettre à jour les paquets",
+        "it": "correzione della regressione\npacchetti di aggiornamento",
+        "es": "regreso\nactualizar paquetes",
+        "pl": "naprawić regresję\naktualizacja pakietów",
+        "uk": "фіксація регресія\nоновлення пакетів",
+        "zh-cn": "修复回归\n更新软件包"
+      },
+      "4.4.0": {
+        "en": "- optimize lib size\n- The ability to load additional JavaScript and CSS files\n  has been added (also for vis2).\n- Improve react components\n- align translation for vis2 widget",
+        "de": "- optimierung der lib-größe\n- Die Möglichkeit, zusätzliche JavaScript- und CSS-Dateien zu laden\nwurde hinzugefügt (auch für vis2).\n- Reaktionskomponenten verbessern\n- übersetzung ausrichten für vis2 widget",
+        "ru": "оптимизируйте размер lib\nВозможность загрузки дополнительных файлов JavaScript и CSS\nдобавлено (также для vis2).\nУлучшение компонентов реакции\nперевод для vis2 widget",
+        "pt": "- otimizar o tamanho da lib\n- A capacidade de carregar arquivos adicionais de JavaScript e CSS\nfoi adicionado (também para vis2).\n- Melhorar os componentes de reacção\n- alinhar a tradução para o widget vis2",
+        "nl": "- optimalisatie van de grootte van de lib\n- De mogelijkheid om extra JavaScript- en CSS-bestanden te laden\nis toegevoegd (ook voor vis2).\n- Verbeter reactiecomponenten\n- align vertaling voor vis2 widget",
+        "fr": "- optimiser la taille de la lib\n- La possibilité de charger des fichiers supplémentaires JavaScript et CSS\na été ajouté (également pour vis2).\n- Améliorer les composants de réaction\n- traduction alignée pour le widget vis2",
+        "it": "- ottimizza la dimensione lib\n- La capacità di caricare ulteriori file JavaScript e CSS\nè stato aggiunto (anche per vis2).\n- Migliorare i componenti reattivi\n- traduzione allineare per widget vis2",
+        "es": "- optimizar el tamaño de la lib\n- La capacidad de cargar archivos adicionales JavaScript y CSS\nse ha añadido (también para vis2).\n- Mejorar los componentes de reacción\n- traducción alineada para vis2 widget",
+        "pl": "- optymalizacja rozmiaru lib\n- Możliwość wczytania dodatkowych plików JavaScript i CSS\nzostał dodany (także dla vis2).\n- Poprawa składników reakcji\n- tłumaczenie wyrównawcze dla vis2 widget",
+        "uk": "- оптимізація розміру lib\n- Можливість завантаження додаткових файлів JavaScript та CSS\nдодано (також для vis2).\n- Покращити компоненти реакції\n- вирівняти переклад для віджету vis2",
+        "zh-cn": "- 优化自由体积\n- 装入额外的 JavaScript 和 CSS 文件的能力\n已添加(也用于对比2).\n- 改进反应组件\n- 对齐粘合元件的翻译"
+      },
       "4.3.11": {
         "en": "check test release workflow",
         "de": "testfreigabe workflow",
@@ -28,71 +54,6 @@
         "pl": "aktualizacja skryptu testowego i wydania",
         "uk": "скрипт тестування і реліз",
         "zh-cn": "更新测试并发布脚本"
-      },
-      "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.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.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": "更新测试并发布脚本"
       }
     },
     "titleLang": {
@@ -170,7 +131,7 @@
     ],
     "dependencies": [
       {
-        "js-controller": ">=5.0.19"
+        "js-controller": ">=6.0.11"
       }
     ]
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.vis-jsontemplate",
-  "version": "4.3.11",
+  "version": "4.4.1",
   "description": "vis-jsontemplate",
   "author": {
     "name": "oweitman",
@@ -21,17 +21,17 @@
   ],
   "dependencies": {},
   "devDependencies": {
-    "@alcalzone/release-script": "^5.0.0",
-    "@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",
+    "@alcalzone/release-script": "^5.1.1",
+    "@alcalzone/release-script-plugin-iobroker": "^5.1.2",
+    "@alcalzone/release-script-plugin-license": "^5.1.1",
+    "@alcalzone/release-script-plugin-manual-review": "^5.1.1",
     "@iobroker/adapter-dev": "^1.5.0",
     "@iobroker/eslint-config": "^2.2.0",
     "@iobroker/testing": "^5.2.2",
-    "@iobroker/build-tools": "^2.0.15",
+    "@iobroker/build-tools": "^3.0.1",
     "@iobroker/vis-2-widgets-react-dev": "^4.0.4",
     "@iobroker/vis-2-widgets-testing": "^1.0.6",
-    "@types/node": "^24.10.1"
+    "@types/node": "^25.5.2"
   },
   "main": "widgets/vis2jsontemplate/customWidgets.js",
   "files": [
@@ -57,7 +57,8 @@
     "update-packages": "ncu --upgrade && cd src-widgets && ncu --upgrade && cd ..",
     "npm": "npm i -f && cd src-widgets && npm i -f && cd ..",
     "debug": "npx dev-server watch --noStart --doNotWatch widgets/vis2vis-jsontemplate/**",
-    "repochecker": "npx github:oweitman/ioBroker.repochecker https://github.com/oweitman/ioBroker.vis-jsontemplate --local",
+    "repocheckerx": "npx github:oweitman/ioBroker.repochecker https://github.com/oweitman/ioBroker.vis-jsontemplate --local",
+    "repocheckerx2": "npx @iobroker/repochecker https://github.com/oweitman/ioBroker.vis-jsontemplate",
     "translate": "translate-adapter",
     "translate-widgets-vis2": "node ./bin/translate.js --source src-widgets/src/i18n/",
     "translate-widgets-vis1": "node ./bin/translate.js --source widgets/vis-jsontemplate/i18n/en.json --format single",

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

@@ -58,7 +58,7 @@
   var version;
   var init_package = __esm({
     "../package.json"() {
-      version = "4.3.11";
+      version = "4.4.1";
     }
   });
 
@@ -571,8 +571,8 @@
           return e;
         })())({ 1: [function(require2, module3, exports3) {
           "use strict";
-          var fs = require2("fs");
-          var path = require2("path");
+          var fs = require2("node:fs");
+          var path = require2("node:path");
           var utils = require2("./utils");
           var scopeOptionWarned = false;
           var _VERSION_STRING = require2("../package.json").version;