Update "JS code" when input changes

Author: smnandre

ux.symfony.com/assets/controllers/translator-demo-block-controller.js

@@ -23,9 +23,19 @@ export default class extends Controller {
         this.parametersTargets.forEach((target) => {
             if (target.name.includes('date')) {
                 parameters.set(target.name, new Date(target.value));
-                return;
+            } else if (target.name.includes('progress')) {
+                parameters.set(target.name, Number(target.value) / 100);
+            } else {
+                parameters.set(target.name, target.value);
+            }
+        });
+        parameters.forEach((value, name) => {
+            const code = this.codeTarget.querySelector(`span[data-code-parameter="${name}"]`);
+            if (value instanceof Date) {
+                code.innerText = value.toLocaleString();
+            } else {
+                code.innerText = value.toString();
             }
-            parameters.set(target.name, target.value);
         });
 
         this.outputsTargets.forEach((target) => {

ux.symfony.com/templates/ux_packages/translator.html.twig

@@ -140,14 +140,14 @@
          {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
             message: 'PROGRESS',
             parameters: {
-                progress: 0.5
+                progress: 42
             },
         } %}
             {% block parameters %}
                 <div>
                     <label for="PROGRESS-progress" class="small opacity-50">Place</label>
                     <input id="PROGRESS-progress" class="form-range"
-                           name="progress" type="range" min="0" max="100" value="50"
+                           name="progress" type="range" min="0" max="100" value="42"
                            data-translator-demo-block-target="parameters"
                            data-action="translator-demo-block#render"
                     >
@@ -165,7 +165,7 @@
                 <div>
                     <label for="VALUE_OF_OBJECT-value" class="small opacity-50">Value</label>
                     <input id="VALUE_OF_OBJECT-value" class="form-control"
-                           name="value" type="number" min="1"  value="30"
+                           name="value" type="number" min="1"  value="30" step="0.1"
                            data-translator-demo-block-target="parameters"
                            data-action="translator-demo-block#render"
                     >

ux.symfony.com/templates/ux_packages/translator/_translator_demo_block.html.twig

@@ -1,6 +1,6 @@
 {% set parameters = parameters ?? {} %}
 
-<div class="row mb-4 align-items-center"
+<div class="row mt-4 mb-4 align-items-center"
      data-controller="translator-demo-block"
      data-translator-demo-block-message-value="{{ message }}"
 >
@@ -11,9 +11,9 @@
 <small><span class="hljs-keyword">import</span> { trans, <span class="hljs-variable constant_">{{ message }}</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'../translator'</span>;</small>
 
 <span class="hljs-title function_">trans</span>(<span class="hljs-variable constant_">{{ message }}</span>{% if parameters %}, {
-{% for name, value in parameters %}
-    <span class="hljs-attr" data-parameter-name="{{ name }}">{{ name }}</span>:&nbsp;
-{{- name ends with 'date' ? '<span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(' }}{{- value|length > 1 ? "'" }}<span class="hljs-string" data-parameter-value="{{ name }}">{{ value }}</span>{{ value|length > 1 ? "'" }}{{ name ends with 'date' ? ')' }},
+{% for name, value in parameters %} {% set isString = not (value matches '/^[\\d\\.]+$/') %}
+    <span class="hljs-attr">{{ name }}</span>:&nbsp;
+{{- name ends with 'date' ? '<span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(' }}{{- isString ? "'" }}<span class="hljs-string" data-code-parameter="{{ name }}">{{ value }}</span>{{ isString ? "'" }}{{ name ends with 'date' ? ')' }},
 {% endfor %}
 }}{% endif %})</pre>
             </div>