refactor: cleanup and performance improvements

bin/test.ts

@@ -18,7 +18,7 @@ import { BASE_URL } from '../test_helpers/index.js'
 */
 processCLIArgs(process.argv.slice(2))
 configure({
-  files: ['test/**/*.spec.ts'],
+  files: ['tests/**/*.spec.ts'],
   plugins: [assert(), fileSystem({ basePath: BASE_URL })],
 })
 

index.ts

@@ -8,7 +8,7 @@
  */
 
 import { Edge } from './src/edge/index.js'
-import { safeValue } from './src/template/index.js'
+import { safeValue } from './src/template.js'
 import { GLOBALS } from './src/edge/globals/index.js'
 
 /**

src/cache_manager/index.ts → src/cache_manager.ts

@@ -7,13 +7,13 @@
  * file that was distributed with this source code.
  */
 
-import type { LoaderTemplate, CacheManagerContract } from '../types.js'
+import type { CacheManagerContract, CompiledTemplate } from './types.js'
 
 /**
  * In memory cache manager to cache pre-compiled templates.
  */
 export class CacheManager implements CacheManagerContract {
-  #cacheStore: Map<string, LoaderTemplate> = new Map()
+  #cacheStore: Map<string, CompiledTemplate> = new Map()
 
   constructor(public enabled: boolean) {}
 
@@ -29,7 +29,7 @@ export class CacheManager implements CacheManagerContract {
    * Returns the template from the cache. If caching is disabled,
    * then it will return undefined.
    */
-  get(absPath: string): undefined | LoaderTemplate {
+  get(absPath: string): undefined | CompiledTemplate {
     if (!this.enabled) {
       return
     }
@@ -41,7 +41,7 @@ export class CacheManager implements CacheManagerContract {
    * Set's the template path and the payload to the cache. If
    * cache is disabled, then this function results in a noop.
    */
-  set(absPath: string, payload: LoaderTemplate) {
+  set(absPath: string, payload: CompiledTemplate) {
     if (!this.enabled) {
       return
     }

src/compiler/index.ts → src/compiler.ts

@@ -8,25 +8,38 @@
  */
 
 import { EdgeError } from 'edge-error'
+import * as lexerUtils from 'edge-lexer/utils'
 import { Parser, EdgeBuffer, Stack } from 'edge-parser'
 import type { Token, TagToken } from 'edge-lexer/types'
-import * as lexerUtils from 'edge-lexer/utils'
-import { Processor } from '../processor/index.js'
-import { CacheManager } from '../cache_manager/index.js'
+
+import { Processor } from './processor.js'
+import { CacheManager } from './cache_manager.js'
 import type {
   ClaimTagFn,
   TagsContract,
   LoaderContract,
-  LoaderTemplate,
   CompilerOptions,
-  CompilerContract,
-} from '../types.js'
+  CompiledTemplate,
+} from './types.js'
+
+const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
 
 /**
  * Compiler is to used to compile templates using the `edge-parser`. Along with that
  * it natively merges the contents of a layout with a parent template.
  */
-export class Compiler implements CompilerContract {
+export class Compiler {
+  /**
+   * The variables someone can access inside templates. All other
+   * variables will get prefixed with `state` property name
+   */
+  #inlineVariables: string[] = ['$filename', 'state', '$context']
+
+  /**
+   * A fixed set of params to pass to the template every time.
+   */
+  #templateParams = ['template', 'state', '$context']
+
   #claimTagFn?: ClaimTagFn
   #loader: LoaderContract
   #tags: TagsContract
@@ -38,7 +51,7 @@ export class Compiler implements CompilerContract {
   cacheManager: CacheManager
 
   /**
-   * Know if compiler is compiling for the async mode or not
+   * Know if compiler is compiling in the async mode or not
    */
   async: boolean
 
@@ -183,7 +196,8 @@ export class Compiler implements CompilerContract {
       async: this.async,
       statePropertyName: 'state',
       escapeCallPath: ['template', 'escape'],
-      localVariables: ['$filename', 'state', '$context'],
+      toAttributesCallPath: ['template', 'toAttributes'],
+      localVariables: this.#inlineVariables,
       onTag: (tag) => this.#processor.executeTag({ tag, path: templatePath }),
     })
 
@@ -209,6 +223,19 @@ export class Compiler implements CompilerContract {
     })
   }
 
+  /**
+   * Wraps template output to a function along with local variables
+   */
+  #wrapToFunction(template: string, localVariables?: string[]): CompiledTemplate {
+    const args = localVariables ? this.#templateParams.concat(localVariables) : this.#templateParams
+
+    if (this.async) {
+      return new AsyncFunction(...args, template)
+    }
+
+    return new Function(...args, template) as CompiledTemplate
+  }
+
   /**
    * Define a function to claim tags
    */
@@ -252,9 +279,9 @@ export class Compiler implements CompilerContract {
    * compiler.compile('welcome')
    * ```
    */
-  compile(templatePath: string, localVariables?: string[], skipCache = false): LoaderTemplate {
+  compile(templatePath: string, localVariables?: string[]): CompiledTemplate {
     const absPath = this.#loader.makePath(templatePath)
-    let cachedResponse = skipCache ? null : this.cacheManager.get(absPath)
+    let cachedResponse = localVariables ? null : this.cacheManager.get(absPath)
 
     /**
      * Process the template and cache it
@@ -269,20 +296,23 @@ export class Compiler implements CompilerContract {
       const templateTokens = this.tokenize(absPath, parser)
       templateTokens.forEach((token) => parser.processToken(token, buffer))
 
-      const template = buffer.flush()
-      if (!skipCache) {
-        this.cacheManager.set(absPath, { template })
+      /**
+       * Processing template via hook
+       */
+      const template = this.#processor.executeCompiled({
+        path: absPath,
+        compiled: buffer.flush(),
+      })
+
+      const compiledTemplate = this.#wrapToFunction(template, localVariables)
+      if (!localVariables) {
+        this.cacheManager.set(absPath, compiledTemplate)
       }
 
-      cachedResponse = { template }
+      cachedResponse = compiledTemplate
     }
 
-    const template = this.#processor.executeCompiled({
-      path: absPath,
-      compiled: cachedResponse.template,
-    })
-
-    return { template }
+    return cachedResponse!
   }
 
   /**
@@ -291,10 +321,10 @@ export class Compiler implements CompilerContract {
    * handles layouts.
    *
    * ```js
-   * compiler.compile('welcome')
+   * compiler.compileRaw('welcome')
    * ```
    */
-  compileRaw(contents: string, templatePath: string = 'eval.edge'): LoaderTemplate {
+  compileRaw(contents: string, templatePath: string = 'eval.edge'): CompiledTemplate {
     const parser = this.#getParserFor(templatePath)
     const buffer = this.#getBufferFor(templatePath)
     const templateTokens = this.tokenizeRaw(contents, templatePath, parser)
@@ -306,6 +336,6 @@ export class Compiler implements CompilerContract {
       compiled: buffer.flush(),
     })
 
-    return { template }
+    return this.#wrapToFunction(template)
   }
 }

src/component/props.ts

@@ -10,7 +10,7 @@
 import lodash from '@poppinss/utils/lodash'
 import stringifyAttributes from 'stringify-attributes'
 
-import { safeValue } from '../template/index.js'
+import { htmlSafe } from '../template.js'
 import { PropsContract } from '../types.js'
 
 /**
@@ -102,7 +102,7 @@ export class Props implements PropsContract {
       ? lodash.merge({}, this.all(), mergeProps)
       : lodash.merge({}, mergeProps, this.all())
 
-    return safeValue(stringifyAttributes(this.#mergeClassAttributes(attributes)))
+    return htmlSafe(stringifyAttributes(this.#mergeClassAttributes(attributes)))
   }
 
   /**
@@ -116,7 +116,7 @@ export class Props implements PropsContract {
       ? lodash.merge({}, this.only(keys), mergeProps)
       : lodash.merge({}, mergeProps, this.only(keys))
 
-    return safeValue(stringifyAttributes(this.#mergeClassAttributes(attributes)))
+    return htmlSafe(stringifyAttributes(this.#mergeClassAttributes(attributes)))
   }
 
   /**
@@ -130,6 +130,6 @@ export class Props implements PropsContract {
       ? lodash.merge({}, this.except(keys), mergeProps)
       : lodash.merge({}, mergeProps, this.except(keys))
 
-    return safeValue(stringifyAttributes(this.#mergeClassAttributes(attributes)))
+    return htmlSafe(stringifyAttributes(this.#mergeClassAttributes(attributes)))
   }
 }

src/edge/globals/index.ts

@@ -15,7 +15,7 @@ import inspect from '@poppinss/inspect'
 const { string: prettyPrintHtml } = inspect
 import string from '@poppinss/utils/string'
 
-import { safeValue, escape } from '../../template/index.js'
+import { htmlSafe, escape } from '../../template.js'
 
 export const GLOBALS = {
   /**
@@ -33,7 +33,7 @@ export const GLOBALS = {
    * Inspect state
    */
   inspect: (value: any) => {
-    return safeValue(prettyPrintHtml.html(value))
+    return htmlSafe(prettyPrintHtml.html(value))
   },
 
   /**
@@ -90,7 +90,7 @@ export const GLOBALS = {
    * whereas this method converts it to an actual instance of date
    */
   stringify: stringify,
-  safe: safeValue,
+  safe: htmlSafe,
   camelCase: string.camelCase,
   snakeCase: string.snakeCase,
   dashCase: string.dashCase,

src/edge/index.ts

@@ -7,12 +7,12 @@
  * file that was distributed with this source code.
  */
 
-import * as Tags from '../tags/index.js'
-import { Loader } from '../loader/index.js'
-import { Compiler } from '../compiler/index.js'
-import { Template } from '../template/index.js'
-import { Processor } from '../processor/index.js'
-import { EdgeRenderer } from '../renderer/index.js'
+import * as Tags from '../tags/main.js'
+import { Loader } from '../loader.js'
+import { Compiler } from '../compiler.js'
+import { Template } from '../template.js'
+import { Processor } from '../processor.js'
+import { EdgeRenderer } from '../renderer.js'
 
 import {
   TagContract,

src/loader/index.ts → src/loader.ts

@@ -9,7 +9,7 @@
 
 import { readFileSync } from 'node:fs'
 import { join, isAbsolute } from 'node:path'
-import type { LoaderContract, LoaderTemplate } from '../types.js'
+import type { LoaderContract, LoaderTemplate } from './types.js'
 
 /**
  * The job of a loader is to load the template from a given path.

src/processor/index.ts → src/processor.ts

@@ -7,14 +7,14 @@
  * file that was distributed with this source code.
  */
 
+import type { Template } from './template.js'
 import type { TagToken } from 'edge-lexer/types'
-import { ProcessorContract, TemplateContract } from '../types.js'
 
 /**
  * Exposes the API to register a set of handlers to process the
  * templates output at different stages
  */
-export class Processor implements ProcessorContract {
+export class Processor {
   #handlers: Map<string, Set<(...args: any[]) => any>> = new Map()
 
   /**
@@ -72,11 +72,7 @@ export class Processor implements ProcessorContract {
   /**
    * Execute output handlers
    */
-  executeOutput(data: {
-    output: string
-    template: TemplateContract
-    state: Record<string, any>
-  }): string {
+  executeOutput(data: { output: string; template: Template; state: Record<string, any> }): string {
     const handlers = this.#handlers.get('output')
     if (!handlers) {
       return data.output
@@ -105,7 +101,7 @@ export class Processor implements ProcessorContract {
     event: 'output',
     handler: (data: {
       output: string
-      template: TemplateContract
+      template: Template
       state: Record<string, any>
     }) => string | void
   ): this

src/renderer/index.ts → src/renderer.ts

@@ -9,26 +9,21 @@
 
 import lodash from '@poppinss/utils/lodash'
 
-import { Template } from '../template/index.js'
-import { Processor } from '../processor/index.js'
-import { EdgeRendererContract, CompilerContract } from '../types.js'
+import { Template } from './template.js'
+import { Processor } from './processor.js'
+import type { Compiler } from './compiler.js'
 
 /**
  * Renders a given template with it's shared state
  */
-export class EdgeRenderer implements EdgeRendererContract {
+export class EdgeRenderer {
   #locals: any = {}
-  #compiler: CompilerContract
-  #asyncCompiler: CompilerContract
+  #compiler: Compiler
+  #asyncCompiler: Compiler
   #globals: any
   #processor: Processor
 
-  constructor(
-    compiler: CompilerContract,
-    asyncCompiler: CompilerContract,
-    globals: any,
-    processor: Processor
-  ) {
+  constructor(compiler: Compiler, asyncCompiler: Compiler, globals: any, processor: Processor) {
     this.#compiler = compiler
     this.#asyncCompiler = asyncCompiler
     this.#globals = globals

src/tags/component.ts

@@ -13,8 +13,8 @@ import * as lexerUtils from 'edge-lexer/utils'
 import { EdgeBuffer, expressions, Parser } from 'edge-parser'
 
 import { TagContract } from '../types.js'
-import { StringifiedObject } from '../stringified_object/index.js'
-import { isSubsetOf, unallowedExpression, parseJsArg } from '../utils/index.js'
+import { StringifiedObject } from '../stringified_object.js'
+import { isSubsetOf, unallowedExpression, parseJsArg } from '../utils.js'
 
 /**
  * A list of allowed expressions for the component name

src/tags/each.ts

@@ -12,7 +12,7 @@ import * as lexerUtils from 'edge-lexer/utils'
 import { Parser, expressions } from 'edge-parser'
 
 import { TagContract } from '../types.js'
-import { isSubsetOf, asyncEach, each, unallowedExpression } from '../utils/index.js'
+import { isSubsetOf, asyncEach, each, unallowedExpression } from '../utils.js'
 
 /**
  * Returns the list to loop over for the each binary expression

src/tags/else_if.ts

@@ -9,7 +9,7 @@
 
 import { expressions } from 'edge-parser'
 import { TagContract } from '../types.js'
-import { isNotSubsetOf, unallowedExpression, parseJsArg } from '../utils/index.js'
+import { isNotSubsetOf, unallowedExpression, parseJsArg } from '../utils.js'
 
 /**
  * Else if tag is used to define conditional blocks. We keep `@elseif` tag