refactor: render with filepath

Author: vvenv

README-zh-CN.md

@@ -25,20 +25,13 @@
 
 ```javascript
 const engine = new Engine()
-const { render } = await engine.compile('{{= name }} 苍苍，白露为霜')
-const html = await render({ name: '蒹葭' })
+const html = await engine.render('{{= name }} 苍苍，白露为霜', { name: '蒹葭' })
+// or
+// const html = await engine.renderFile('./template.html', { name: '蒹葭' })
 
 document.body.innerHTML = html
 ```
 
-或，更简单的方式：
-
-```javascript
-document.body.innerHTML = await template('{{= name }} 苍苍，白露为霜', {
-  name: '蒹葭',
-})
-```
-
 [使用文档](./documentation-zh-CN.md)
 
 ## 许可证

README.md

@@ -25,20 +25,13 @@
 
 ```javascript
 const engine = new Engine()
-const { render } = await engine.compile('Hello, {{= name }}！')
-const html = await render({ name: 'World' })
+const html = await engine.render('Hello, {{= name }}！', { name: 'World' })
+// or
+// const html = await engine.renderFile('./template.html', { name: 'World' })
 
 document.body.innerHTML = html
 ```
 
-Or, in a simpler way:
-
-```javascript
-document.body.innerHTML = await template('Hello, {{= name }}!', {
-  name: 'World',
-})
-```
-
 [Documentation](./documentation.md)
 
 ## License

benchmark/engines/jianjia.js

@@ -6,6 +6,6 @@ export default {
   ext: 'jianjia',
   render: async function (templatePath, data) {
     const template = fs.readFileSync(templatePath, 'utf-8');
-    return (await new Engine().compile(template)).render(data);
+    return new Engine().render(template, data);
   },
 };

benchmark/readme.md

@@ -2,11 +2,11 @@
 
 | Template \ Engine | ejs | eta | handlebars | jianjia | liquidjs |
 |-------------------|:--------:|:--------:|:--------:|:--------:|:--------:|
-| **friends** | 🟡 0.81 | 🟢 0.14 | 🟡 0.66 | 🟡 0.53 | ⚫ 4.32 |
-| **if-expression** | 🟡 0.05 | 🟢 0.03 | - | 🟡 0.05 | ⚫ 0.16 |
-| **projects-escaped** | 🟡 0.06 | 🟢 0.04 | ⚫ 0.19 | 🟡 0.05 | 🔴 0.15 |
-| **projects-unescaped** | 🟡 0.06 | 🟢 0.05 | ⚫ 0.17 | 🟢 0.05 | 🔴 0.15 |
-| **search-results** | 🟡 0.14 | 🟢 0.05 | 🟠 0.29 | 🟡 0.10 | ⚫ 0.49 |
-| **simple-0** | 🟢 0.02 | 🟢 0.02 | 🟠 0.05 | 🟡 0.03 | ⚫ 0.07 |
-| **simple-1** | 🟡 0.05 | 🟢 0.03 | ⚫ 0.18 | 🟡 0.05 | 🔴 0.15 |
-| **simple-2** | 🟡 0.04 | 🟢 0.03 | ⚫ 0.18 | 🟡 0.05 | 🔴 0.13 |
+| **friends** | 🟡 1.04 | 🟢 0.18 | 🟡 0.80 | 🟡 0.66 | ⚫ 5.16 |
+| **if-expression** | 🟡 0.06 | 🟢 0.04 | - | 🟡 0.06 | ⚫ 0.20 |
+| **projects-escaped** | 🟡 0.07 | 🟢 0.05 | ⚫ 0.24 | 🟡 0.06 | 🔴 0.20 |
+| **projects-unescaped** | 🟡 0.07 | 🟢 0.04 | ⚫ 0.22 | 🟡 0.06 | 🔴 0.19 |
+| **search-results** | 🟡 0.19 | 🟢 0.06 | 🟠 0.38 | 🟡 0.13 | ⚫ 0.61 |
+| **simple-0** | 🟢 0.03 | 🟢 0.03 | 🔴 0.07 | 🟡 0.04 | ⚫ 0.09 |
+| **simple-1** | 🟡 0.07 | 🟢 0.04 | ⚫ 0.23 | 🟡 0.07 | 🔴 0.18 |
+| **simple-2** | 🟡 0.06 | 🟢 0.04 | ⚫ 0.22 | 🟡 0.06 | 🔴 0.16 |

packages/template/src/compile-error.test.ts

@@ -17,6 +17,28 @@ it('compile error', () => {
     " JianJia  if tag must have a value
 
     {{ #if }}
-    "
+
+    0:9"
+  `)
+})
+
+it('compile error w/ filepath', () => {
+  const error = new CompileError('if tag must have a value', {
+    name: 'if',
+    value: '',
+    raw: '{{ #if }}',
+    previous: null,
+    next: null,
+    start: 0,
+    end: 9,
+  }, '/path/to/file.jianjia')
+  expect(error.name).toBe('CompileError')
+  expect(error.message).toBe('if tag must have a value')
+  expect(error.details).toMatchInlineSnapshot(`
+    " JianJia  if tag must have a value
+
+    {{ #if }}
+
+    at /path/to/file.jianjia:0:9"
   `)
 })

packages/template/src/compile-error.ts

@@ -5,6 +5,7 @@ export class CompileError extends Error {
   constructor(
     message: string,
     private token: Token,
+    private filepath?: string,
   ) {
     super(message)
     this.name = 'CompileError'
@@ -15,6 +16,7 @@ export class CompileError extends Error {
     return `${c.bgRed(c.bold(' JianJia '))} ${c.red(this.message)}
 
 ${this.token.raw}
-`
+
+${this.filepath ? `at ${this.filepath}:` : ''}${this.token.start}:${this.token.end}`
   }
 }

packages/template/src/compiler.test.ts

@@ -73,7 +73,8 @@ it('invalid', async () => {
     " JianJia  Unexpected /if
 
     {{ /if }}
-    "
+
+    0:9"
   `,
   )
 })

packages/template/src/compiler.ts

@@ -8,7 +8,7 @@ import { Validator } from './validator'
 export class Compiler {
   constructor(public options: Required<EngineOptions>) {}
 
-  async compile(token: Token | null) {
+  async compile(token: Token | null, filepath?: string) {
     const ctx = new Context(this.options)
     const out = new OutScript(this.options)
     const sourcemap = new SourceMap(this.options)
@@ -42,7 +42,7 @@ export class Compiler {
         }
         catch (error: any) {
           if (this.options.debug) {
-            throw new CompileError(error.message, token)
+            throw new CompileError(error.message, token, filepath)
           }
 
           return { value: '', script: (async () => 'invalid template') as unknown as Script, sourcemap }

packages/template/src/engine.test.ts

@@ -209,7 +209,8 @@ it('compile error', async () => {
       " JianJia  Unexpected /if
 
       {{ /if }}
-      "
+
+      24:33"
     `)
 })
 

packages/template/src/engine.ts

@@ -1,5 +1,5 @@
 import type { SourceMap } from './source-map'
-import type { EngineOptions, Filters, Globals, Render, Script, Tag } from './types'
+import type { EngineOptions, Filters, Globals, Script, Tag } from './types'
 import { Compiler } from './compiler'
 import { escape } from './escape'
 import * as filters from './filters'
@@ -25,7 +25,11 @@ export const defaultOptions: Required<EngineOptions> = {
   cache: false,
 }
 
-const cache = new Map<string, Render>()
+const cache = new Map<string, {
+  template: string
+  script: Script
+  sourcemap: SourceMap
+}>()
 
 export class Engine {
   protected options: Required<EngineOptions>
@@ -49,46 +53,43 @@ export class Engine {
     Object.assign(this.options.tags, tags)
   }
 
-  async load(filepath: string) {
+  async render(
+    template: string,
+    globals: Globals,
+  ) {
+    const { script, sourcemap } = await this._compile(template)
+    return this._render(template, globals, script, sourcemap)
+  }
+
+  async renderFile(filepath: string, globals: Globals) {
     if (this.options.cache && cache.has(filepath)) {
-      return cache.get(filepath)
+      const { template, script, sourcemap } = cache.get(filepath)!
+      return this._render(template, globals, script, sourcemap)
     }
 
     const template = await this.options.loader!(filepath)
-
-    return {
-      template,
-      compile: async () => this.compile(template, filepath),
+    const { script, sourcemap } = await this._compile(template)
+    if (this.options.cache) {
+      cache.set(filepath, { template, script, sourcemap })
     }
+    return this._render(template, globals, script, sourcemap)
   }
 
-  async compile(template: string, filepath?: string) {
-    const { value, script, sourcemap } = await new Compiler(this.options).compile(
+  private async _compile(template: string, filepath?: string) {
+    return new Compiler(this.options).compile(
       await new Tokenizer(this.options).parse(template),
+      filepath,
     )
-
-    const render = async (globals: Globals) => this.render(globals, script, template, sourcemap)
-
-    if (this.options.cache && filepath) {
-      cache.set(filepath, render)
-    }
-
-    return {
-      value,
-      script,
-      sourcemap,
-      render,
-    }
   }
 
-  async render(
-    globals: Globals,
-    func: Script,
+  private async _render(
     template: string,
+    globals: Globals,
+    script: Script,
     sourcemap: SourceMap,
   ) {
     try {
-      return await func(
+      return await script(
         { ...this.options.globals, ...globals },
         { ...this.options.filters, ...filters },
         (v: unknown) => {