Minification of code and html string template

js/template/BlueprintTemplate.js

@@ -1,8 +1,9 @@
+import html from "./html"
 import Template from "./Template"
 
 export default class BlueprintTemplate extends Template {
     header(element) {
-        return `
+        return html`
             <div class="ueb-viewport-header">
                 <div class="ueb-viewport-zoom">1:1</div>
             </div>
@@ -10,7 +11,7 @@ export default class BlueprintTemplate extends Template {
     }
 
     overlay() {
-        return `
+        return html`
             <div class="ueb-viewport-overlay"></div>
         `
     }
@@ -21,7 +22,7 @@ export default class BlueprintTemplate extends Template {
      * @returns 
      */
     viewport(element) {
-        return `
+        return html`
             <div class="ueb-viewport-body">
                 <div class="ueb-grid"
                     style="--ueb-additional-x:${element.additional[0]}; --ueb-additional-y:${element.additional[1]}; --ueb-translate-x:${element.translateValue[0]}; --ueb-translate-y:${element.translateValue[1]}">
@@ -37,7 +38,7 @@ export default class BlueprintTemplate extends Template {
      * @returns The computed html 
      */
     render(element) {
-        return `
+        return html`
             ${this.header(element)}
             ${this.overlay(element)}
             ${this.viewport(element)}

js/template/NodeTemplate.js

@@ -1,3 +1,4 @@
+import html from "./html"
 import PinEntity from "../entity/PinEntity"
 import Template from "./Template"
 
@@ -12,7 +13,7 @@ export default class NodeTemplate extends Template {
      * @returns The computed html 
      */
     header(entity) {
-        return `
+        return html`
             <div class="ueb-node-header">
                 <span class="ueb-node-name">
                     <span class="ueb-node-symbol"></span>
@@ -32,10 +33,10 @@ export default class NodeTemplate extends Template {
         let inputs = entity.CustomProperties.filter(v => v instanceof PinEntity)
         let outputs = inputs.filter(v => v.isOutput())
         inputs = inputs.filter(v => !v.isOutput())
-        return `
+        return html`
             <div class="ueb-node-body">
                 <div class="ueb-node-inputs">
-                    ${inputs.map((input, index) => `
+                    ${inputs.map((input, index) => html`
                     <div class="ueb-node-input ueb-node-value-${input.type}">
                         <span class="ueb-node-value-icon ${inputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
                         ${input.getPinDisplayName()}
@@ -43,7 +44,7 @@ export default class NodeTemplate extends Template {
                     `).join("") ?? ""}
                 </div>
                 <div class="ueb-node-outputs">
-                    ${outputs.map((output, index) => `
+                    ${outputs.map((output, index) => html`
                     <div class="ueb-node-output ueb-node-value-${output.type}">
                         ${output.getPinDisplayName()}
                         <span class="ueb-node-value-icon ${outputs[index].connected ? 'ueb-node-value-fill' : ''}"></span>
@@ -60,7 +61,7 @@ export default class NodeTemplate extends Template {
      * @returns The computed html 
      */
     render(entity) {
-        return `
+        return html`
             <div class="ueb-node-border">
                 <div class="ueb-node-content">
                     ${this.header(entity)}

js/template/html.js

@@ -0,0 +1,2 @@
+const html = String.raw
+export default html