Minification of code and html string template

js/entity/IntegerEntity.js

@@ -10,9 +10,9 @@ export default class IntegerEntity extends Entity {
         return IntegerEntity.attributes
     }
 
-    constructor(options = { value: 0 }) {
-        options.value = Math.round(options.value)
+    constructor(options = {}) {
         super(options)
+        this.value = Math.round(this.value)
     }
 
     valueOf() {

js/entity/NaturalNumberEntity.js

@@ -0,0 +1,10 @@
+import IntegerEntity from "./IntegerEntity"
+import Utility from "../Utility"
+
+export default class NaturalNumberEntity extends IntegerEntity {
+
+    constructor(options = {}) {
+        super(options)
+        this.value = Math.round(Utility.clamp(this.value, 0))
+    }
+}

js/input/Context.js

@@ -20,6 +20,8 @@ export default class Context {
         this.blueprint.removeEventListener("blueprintunfocus", this.blueprintunfocusHandler)
     }
 
+
+    /* Subclasses will probabily override the following methods */
     blueprintFocused() {
     }
 

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

package.json

@@ -25,6 +25,7 @@
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
     "rollup": "^2.58.0",
+    "rollup-plugin-minify-html-template-literals": "^1.2.0",
     "rollup-plugin-terser": "^7.0.2",
     "terser": "^5.9.0"
   },

rollup.config.js

@@ -1,4 +1,5 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve'
+import minifyHTML from 'rollup-plugin-minify-html-template-literals'
 import commonjs from '@rollup/plugin-commonjs'
 import { terser } from 'rollup-plugin-terser'
 
@@ -10,7 +11,8 @@ export default {
     },
     plugins: [
         nodeResolve({ browser: true }),
+        minifyHTML(),
         commonjs(),
-        //terser()
+        terser()
     ]
 }