Added support for liquidjs template library (v9.0.0) (with sync rende…

…ring)
Munawwar · Sep 3, 2019 · 3251a21 · 3251a21
1 parent 3c1f24c
commit 3251a21
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 0 deletions.
diff --git a/sahte-react.js b/sahte-react.js
@@ -172,6 +172,7 @@
             return id;
         },
 
+        _liquidEngine: null,
         /**
          * Compiles the given template using detected template engine.
          *
@@ -183,6 +184,11 @@
                 return template;
             } else if (window.doT) {
                 return window.doT.template(template);
+            } else if (window.liquidjs) {
+                if (!SahteReact._liquidEngine) {
+                    SahteReact._liquidEngine = new window.liquidjs.Liquid();
+                }
+                return SahteReact._liquidEngine.parse(template);
             }
             // doesn't support pre-compilation
             return template;
@@ -327,6 +333,8 @@
                 return window.nunjucks.render(this.template, data);
             } else if (window.swig) {
                 return window.swig.run(window.swig._precompiled[this.template], data, this.template);
+            } else if (SahteReact._liquidEngine) {
+                return SahteReact._liquidEngine.renderSync(this.template, data);
             } else { // assume this.template is a compiled template function that takes data
                 return this.template(data);
             }

diff --git a/template-library/liquid.min.js b/template-library/liquid.min.js
diff --git a/test/liquidjs/test.html b/test/liquidjs/test.html
@@ -0,0 +1,25 @@
+<html>
+    <head>
+        <script src="../../dom-diff.js"></script>
+        <script src="../../template-library/liquid.min.js"></script>
+        <script src="../../sahte-react.js"></script>
+    </head>
+    <body>
+        <div id="myview"></div>
+        <script>
+            var view = new SahteReact({
+                template:
+                    `<div on-click="onClick">
+                        <span ref="spanEl">{{ text }}</span>
+                    </div>`
+                ,
+                data: { text: 'Test' },
+                target: '#myview',
+                onClick: function () {
+                    console.log('Clicked!');
+                }
+            });
+            view.mount();
+        </script>
+    </body>
+</html>
diff --git a/test/liquidjs/test2.html b/test/liquidjs/test2.html
@@ -0,0 +1,45 @@
+<html>
+    <head>
+        <script src="../../dom-diff.js"></script>
+        <script src="../../template-library/liquid.min.js"></script>
+        <script src="../../sahte-react.js"></script>
+    </head>
+    <body>
+        <div id="myview1"></div>
+        <div id="myview2"></div>
+        <div id="myview3"></div>
+        <script>
+            SahteReact.store.data = {
+                counter: {
+                    value: 1
+                }
+            };
+            var view1 = new SahteReact({
+                template: `<div><span>Counter = {{ counter.value }}</span></div>`,
+                connect: ['counter'],
+                target: '#myview1'
+            });
+            var view2 = new SahteReact({
+                template: `<div><span>Counter = {{ counter.value }}</span></div>`,
+                connect: ['counter'],
+                target: '#myview2'
+            });
+            var view3 = new SahteReact({
+                template: `<div><span>View 3 cant access global store's counter.value, because it isn't connected to it</span></div>`,
+                target: '#myview3'
+            });
+            view1.mount();
+            view2.mount();
+            view3.mount();
+
+            // update counter
+            window.setInterval(function () {
+                SahteStore.assign({
+                    counter: {
+                        value: SahteStore.data.counter.value + 1
+                    }
+                });
+            }, 1000);
+        </script>
+    </body>
+</html>