Merge pull request #23 from eta-dev/layout-support

Support for layouts!!
eta-dev · Sep 17, 2020 · 0856e6e · 0856e6e
2 parents 3a958ab + e111032
commit 0856e6e
Show file tree

Hide file tree

Showing 14 changed files with 172 additions and 74 deletions.
diff --git a/browser-tests/benchmark.html b/browser-tests/benchmark.html
@@ -100,8 +100,10 @@
       <script src="https://unpkg.com/[email protected]/doT.min.js"></script>
       <script src="https://unpkg.com/[email protected]/ejs.min.js"></script>
       <script src="https://unpkg.com/[email protected]/dist/handlebars.min.js"></script>
+      <!-- This is a fallback, since ../dist/browser/eta.min.js is not uploaded to GitHub -->
+      <script src="https://unpkg.com/eta"></script>
       <script src="../dist/browser/eta.min.js"></script>
-      <script src="https://unpkg.com/[email protected].0-beta.9"></script>
+      <script src="https://unpkg.com/[email protected].8"></script>
       <script src="https://unpkg.com/[email protected]/mustache.min.js"></script>
       <script src="https://pugjs.org/js/pug.js"></script>
       <script src="https://unpkg.com/[email protected]/dist/swig.min.js"></script>

diff --git a/browser-tests/benchmark.js b/browser-tests/benchmark.js
@@ -16,7 +16,10 @@ The above copyright notice and this permission notice shall be included in all c
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-Eta.defaultConfig.autoTrim = false
+Eta.configure({
+  autoTrim: false
+})
+
 Sqrl.defaultConfig.autoTrim = false
 
 var templateList = {}
@@ -51,7 +54,7 @@ templateList['template-fast-mode-raw'] = `
 
 templateList['eta'] = `
 <ul>
-    <% for (var i = 0, l = it.list.length; i < l; i ++) { %>
+    <% for (var i = 0, ln = it.list.length; i < ln; i ++) { %>
         <li>User: <%= it.list[i].user %> / Web Site: <%= it.list[i].site %></li>
     <% } %>
 </ul>`
@@ -112,7 +115,7 @@ templateList['handlebars-raw'] = `
 
 templateList['squirrelly'] = `
 <ul>
-{{~each(it.list) => val}}
+{{@each(it.list) => val}}
     <li>User: {{val.user}} / Web Site: {{val.site}}</li>
 {{/each}}
 </ul>`
@@ -146,7 +149,7 @@ var config = {
   escape: true
 }
 
-function getParameterByName (name) {
+function getParameterByName(name) {
   var url = window.location.href
   var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
   var results = regex.exec(url)
@@ -261,79 +264,78 @@ var testList = [
   },
 
   {
-    name: 'Jade / pug',
+    name: 'Handlebars',
     tester: function () {
-      var id = config.escape ? 'pug' : 'pug-raw'
+      var id = config.escape ? 'handlebars' : 'handlebars-raw'
       var source = templateList[id]
-      var pug = require('pug')
       var html = ''
       for (var i = 0; i < config.calls; i++) {
-        var fn = pug.compile(source)
+        var fn = Handlebars.compile(source)
 
         html = fn(data)
       }
       return html
     }
   },
-
   {
-    name: 'Handlebars',
+    name: 'Eta',
     tester: function () {
-      var id = config.escape ? 'handlebars' : 'handlebars-raw'
-      var source = templateList[id]
+      if (!config.escape) {
+        Eta.defaultConfig.autoEscape = false
+      }
+      var source = templateList['eta']
+      //   console.log(fn.toString())
       var html = ''
+      data.$name = 'temp'
       for (var i = 0; i < config.calls; i++) {
-        var fn = Handlebars.compile(source)
-
-        html = fn(data)
+        html = Eta.render(source, data)
       }
       return html
     }
   },
-  // {
-  //   name: 'Squirrelly',
-  //   tester: function() {
-  //     if (!config.escape) {
-  //       Sqrl.defaultConfig.autoEscape = false
-  //     }
-  //     var source = templateList['squirrelly']
-  //     //   console.log(fn.toString())
-  //     var html = ''
-  //     data.$name = 'temp'
-  //     for (var i = 0; i < config.calls; i++) {
-  //       html = Sqrl.render(source, data)
-  //     }
-  //     return html
-  //   }
-  // },
-  // {
-  //   name: 'Squirrelly - Fast',
-  //   tester: function() {
-  //     if (!config.escape) {
-  //       Sqrl.defaultConfig.autoEscape = false
-  //     }
-  //     var source = templateList['squirrelly-fast']
-  //     //   console.log(fn.toString())
-  //     var html = ''
-  //     data.$name = 'temp'
-  //     for (var i = 0; i < config.calls; i++) {
-  //       html = Sqrl.render(source, data)
-  //     }
-  //     return html
-  //   }
-  // },
   {
-    name: 'Eta',
+    name: 'Squirrelly',
     tester: function () {
       if (!config.escape) {
-        Eta.defaultConfig.autoEscape = false
+        Sqrl.defaultConfig.autoEscape = false
       }
-      var source = templateList['eta']
+      var source = templateList['squirrelly']
       //   console.log(fn.toString())
       var html = ''
       data.$name = 'temp'
       for (var i = 0; i < config.calls; i++) {
-        html = Eta.render(source, data)
+        html = Sqrl.render(source, data)
+      }
+      return html
+    }
+  },
+  {
+    name: 'Squirrelly - Fast',
+    tester: function () {
+      if (!config.escape) {
+        Sqrl.defaultConfig.autoEscape = false
+      }
+      var source = templateList['squirrelly-fast']
+      //   console.log(fn.toString())
+      var html = ''
+      data.$name = 'temp'
+      for (var i = 0; i < config.calls; i++) {
+        html = Sqrl.render(source, data)
+      }
+      return html
+    }
+  },
+  {
+    name: 'Jade / pug',
+    tester: function () {
+      var id = config.escape ? 'pug' : 'pug-raw'
+      var source = templateList[id]
+      var pug = require('pug')
+      var html = ''
+      for (var i = 0; i < config.calls; i++) {
+        var fn = pug.compile(source)
+
+        html = fn(data)
       }
       return html
     }
@@ -461,7 +463,7 @@ var runTest = function (callback) {
     ]
   })
 
-  function tester (target) {
+  function tester(target) {
     var time = new Timer()
     var html = target.tester()
     var endTime = time.stop()
@@ -495,7 +497,7 @@ window['restart'] = function (key, value) {
   config[key] = value
 }
 
-function getLink () {
+function getLink() {
   window.location.search =
     'length=' + config.length + '&calls=' + config.calls + '&escape=' + config.escape
 }
@@ -509,6 +511,8 @@ window['app'] = function (selector) {
 <br><br>
 <em>Note: doT and Eta usually trade off the lead on unescaped templates. Keep in mind that Eta supports template tags inside strings & comments, plugins, whitespace trimming, etc.</em>
 <br><br>
+<em>Note: these benchmarks are ONLY VALID if page is served by a server (localhost, RawGit are ok). Otherwise results are highly variable and inaccurate (I don't know why!)</em>
+<br><br>
 <strong>Longer (more ops/sec) is better</strong>
 
 <div class="header">
@@ -520,7 +524,7 @@ window['app'] = function (selector) {
         <label><input type="number" value="{{it.length}}" onchange="restart('length', this.value)"> list</label>
         <strong>×</strong>
         <label><input type="number" value="{{it.calls}}" onchange="restart('calls', this.value)"> calls</label>
-        <label><input type="checkbox" {{~if(it.escape)}}checked{{/if}} onchange="restart('escape', this.checked)"> escape</label>
+        <label><input type="checkbox" {{@if(it.escape)}}checked{{/if}} onchange="restart('escape', this.checked)"> escape</label>
         <button id="get-link" class="button">&#x1f517; Get link</button>
 
     </p>

diff --git a/deno_dist/README.md b/deno_dist/README.md
@@ -8,9 +8,7 @@
 </p>
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-
-[logo]: https://img.shields.io/badge/all_contributors-3-orange.svg 'Number of contributors on All-Contributors'
-
+[logo]: https://img.shields.io/badge/all_contributors-4-orange.svg 'Number of contributors on All-Contributors'
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <span align="center">
@@ -207,12 +205,12 @@ Made with ❤ by [@nebrelbug](https://github.com/eta-dev) and all these wonderfu
     <td align="center"><a href="http://www.bengubler.com"><img src="https://avatars3.githubusercontent.com/u/25597854?v=4" width="100px;" alt=""/><br /><sub><b>Ben Gubler</b></sub></a><br /><a href="https://github.com/eta-dev/eta/commits?author=nebrelbug" title="Code">💻</a> <a href="#question-nebrelbug" title="Answering Questions">💬</a> <a href="https://github.com/eta-dev/eta/commits?author=nebrelbug" title="Documentation">📖</a> <a href="https://github.com/eta-dev/eta/commits?author=nebrelbug" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/clitetailor"><img src="https://avatars1.githubusercontent.com/u/16368559?v=4" width="100px;" alt=""/><br /><sub><b>Clite Tailor</b></sub></a><br /><a href="#ideas-clitetailor" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/eta-dev/eta/commits?author=clitetailor" title="Code">💻</a></td>
     <td align="center"><a href="https://twitter.com/ioan_chiriac"><img src="https://avatars2.githubusercontent.com/u/173203?v=4" width="100px;" alt=""/><br /><sub><b>Ioan CHIRIAC</b></sub></a><br /><a href="https://github.com/eta-dev/eta/commits?author=ichiriac" title="Code">💻</a> <a href="#ideas-ichiriac" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://www.linkedin.com/in/craig-morten/"><img src="https://avatars1.githubusercontent.com/u/46491566?v=4" width="100px;" alt=""/><br /><sub><b>Craig Morten</b></sub></a><br /><a href="https://github.com/eta-dev/eta/commits?author=asos-craigmorten" title="Code">💻</a></td>
   </tr>
 </table>
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
-
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!

diff --git a/deno_dist/compile-string.ts b/deno_dist/compile-string.ts
@@ -24,12 +24,21 @@ export default function compileToString(
 ): string {
   var buffer: Array<AstObject> = Parse(str, config);
 
-  var res = "var tR=''" +
+  var res = "var tR='',__l" +
     (config.include ? ",include=E.include.bind(E)" : "") +
     (config.includeFile ? ",includeFile=E.includeFile.bind(E)" : "") +
-    "\n" +
+    "\nfunction layout(p){__l=p}\n" +
     (config.useWith ? "with(" + config.varName + "||{}){" : "") +
     compileScope(buffer, config) +
+    (config.includeFile
+      ? "if(__l)tR=" +
+        (config.async ? "await " : "") +
+        `includeFile(__l,Object.assign(${config.varName},{body:tR}))\n`
+      : config.include
+      ? "if(__l)tR=" +
+        (config.async ? "await " : "") +
+        `include(__l,Object.assign(${config.varName},{body:tR}))\n`
+      : "") +
     "if(cb){cb(null,tR)} return tR" +
     (config.useWith ? "}" : "");
 

diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "require": "./dist/eta.cjs.js",
     "browser": "./dist/browser/eta.min.js"
   },
+  "types": "dist/types/index.d.ts",
   "typings": "dist/types/index.d.ts",
   "jsdelivr": "dist/browser/eta.min.js",
   "unpkg": "dist/browser/eta.min.js",

diff --git a/src/compile-string.ts b/src/compile-string.ts
@@ -22,12 +22,21 @@ export default function compileToString(str: string, config: EtaConfig): string
   var buffer: Array<AstObject> = Parse(str, config)
 
   var res =
-    "var tR=''" +
+    "var tR='',__l" +
     (config.include ? ',include=E.include.bind(E)' : '') +
     (config.includeFile ? ',includeFile=E.includeFile.bind(E)' : '') +
-    '\n' +
+    '\nfunction layout(p){__l=p}\n' +
     (config.useWith ? 'with(' + config.varName + '||{}){' : '') +
     compileScope(buffer, config) +
+    (config.includeFile
+      ? 'if(__l)tR=' +
+        (config.async ? 'await ' : '') +
+        `includeFile(__l,Object.assign(${config.varName},{body:tR}))\n`
+      : config.include
+      ? 'if(__l)tR=' +
+        (config.async ? 'await ' : '') +
+        `include(__l,Object.assign(${config.varName},{body:tR}))\n`
+      : '') +
     'if(cb){cb(null,tR)} return tR' +
     (config.useWith ? '}' : '')
 

diff --git a/test/async.spec.ts b/test/async.spec.ts
@@ -47,8 +47,10 @@ describe('Async Render checks', () => {
         await Eta.render('<%= @#$%^ %>', {}, { async: true })
       }).rejects.toThrow(
         buildRegEx(`
-var tR='',include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+var tR='',__l,include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+function layout(p){__l=p}
 tR+=E.e(@#$%^)
+if(__l)tR=await includeFile(__l,Object.assign(it,{body:tR}))
 if(cb){cb(null,tR)} return tR
 `)
       )
@@ -59,8 +61,10 @@ if(cb){cb(null,tR)} return tR
         expect(err).toBeTruthy()
         expect((err as Error).message).toMatch(
           buildRegEx(`
-var tR='',include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+var tR='',__l,include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+function layout(p){__l=p}
 tR+=E.e(@#$%^)
+if(__l)tR=await includeFile(__l,Object.assign(it,{body:tR}))
 if(cb){cb(null,tR)} return tR
 `)
         )

diff --git a/test/compile-string.spec.ts b/test/compile-string.spec.ts
@@ -10,9 +10,11 @@ const complexTemplate = fs.readFileSync(filePath, 'utf8')
 describe('Compile to String test', () => {
   it('parses a simple template', () => {
     var str = compileToString('hi <%= hey %>', defaultConfig)
-    expect(str).toEqual(`var tR='',include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+    expect(str).toEqual(`var tR='',__l,include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+function layout(p){__l=p}
 tR+='hi '
 tR+=E.e(hey)
+if(__l)tR=includeFile(__l,Object.assign(it,{body:tR}))
 if(cb){cb(null,tR)} return tR`)
   })
 
@@ -21,33 +23,39 @@ if(cb){cb(null,tR)} return tR`)
       'hi <%= hey %>',
       getConfig({ include: undefined, includeFile: undefined })
     )
-    expect(str).toEqual(`var tR=''
+    expect(str).toEqual(`var tR='',__l
+function layout(p){__l=p}
 tR+='hi '
 tR+=E.e(hey)
 if(cb){cb(null,tR)} return tR`)
   })
 
   it('parses a simple template with raw tag', () => {
     var str = compileToString('hi <%~ hey %>', defaultConfig)
-    expect(str).toEqual(`var tR='',include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+    expect(str).toEqual(`var tR='',__l,include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+function layout(p){__l=p}
 tR+='hi '
 tR+=hey
+if(__l)tR=includeFile(__l,Object.assign(it,{body:tR}))
 if(cb){cb(null,tR)} return tR`)
   })
 
   it('works with whitespace trimming', () => {
     var str = compileToString('hi\n<%- = hey-%>\n<%_ = hi_%>', defaultConfig)
-    expect(str).toEqual(`var tR='',include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+    expect(str).toEqual(`var tR='',__l,include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+function layout(p){__l=p}
 tR+='hi'
 tR+=E.e(hey)
 tR+=E.e(hi)
+if(__l)tR=includeFile(__l,Object.assign(it,{body:tR}))
 if(cb){cb(null,tR)} return tR`)
   })
 
   it('compiles complex template', () => {
     var str = compileToString(complexTemplate, defaultConfig)
     expect(str).toEqual(
-      `var tR='',include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+      `var tR='',__l,include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+function layout(p){__l=p}
 tR+='Hi\\n'
 console.log("Hope you like Eta!")
 tR+=E.e(it.htmlstuff)
@@ -71,6 +79,7 @@ tR+='      \\n  '
 }
 tR+='\\nThis is a partial: '
 tR+=include("mypartial")
+if(__l)tR=includeFile(__l,Object.assign(it,{body:tR}))
 if(cb){cb(null,tR)} return tR`
     )
   })

diff --git a/test/compile.spec.ts b/test/compile.spec.ts
@@ -31,8 +31,10 @@ describe('Compile test', () => {
       compile('<% hi (=h) %>')
     }).toThrow(
       buildRegEx(`
-var tR='',include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+var tR='',__l,include=E.include.bind(E),includeFile=E.includeFile.bind(E)
+function layout(p){__l=p}
 hi (=h)
+if(__l)tR=includeFile(__l,Object.assign(it,{body:tR}))
 if(cb){cb(null,tR)} return tR
 `)
     )