feat: add property to context

edge-js · Feb 28, 2020 · ae5dd79 · ae5dd79
1 parent 1d6aa75
commit ae5dd79
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 12 deletions.
diff --git a/examples/views/alert.edge b/examples/views/alert.edge
@@ -1,3 +1,4 @@
+{{ inspect($state, 1) }}
 @if($slots.title)
   {{{ $slots.title({ title }) }}}
 @else

diff --git a/examples/views/partial.edge b/examples/views/partial.edge
@@ -1 +1,2 @@
-<h1>Inside slot: {{ slotTitle() }}</h1>
+{{ inspect($state, 1) }}
+<h1>Inside slot: {{ slotTitle() }}</h1>
diff --git a/examples/views/user.edge b/examples/views/user.edge
@@ -6,12 +6,23 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title></title>
   <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
 
+    .__inspect_output {
+      margin-bottom: 20px;
+    }
   </style>
 </head>
 <body>
-  @set('user', { username: 'virk' })
-
   {{ inspect($state, 1) }}
+
+  @component('alert', { title: 'hello world' })
+    @slot('title', props)
+      @include('partial')
+    @endslot
+  @endcomponent
 </body>
 </html>
diff --git a/examples/views/user.presenter.js b/examples/views/user.presenter.js
@@ -6,4 +6,4 @@ module.exports = class User {
   slotTitle (ctx) {
     return ctx.resolve('props').title.toUpperCase()
   }
-}
+}
diff --git a/src/Compiler/index.ts b/src/Compiler/index.ts
@@ -230,12 +230,9 @@ export class Compiler implements CompilerContract {
     const wrapAsFunction = !inline
 
     /**
-     * Get a new instance of the parser. We use the `templatePath` as the filename
-     * instead of the `absPath`, since `templatePath` is relative and readable.
+     * Get a new instance of the parser.
      */
-    const parser = new Parser(this._tags, {
-      filename: `${absPath.replace(/\.edge$/, '')}.edge`,
-    })
+    const parser = new Parser(this._tags, { filename: absPath })
 
     /**
      * Resolve the template and Presenter using the given loader
@@ -252,6 +249,7 @@ export class Compiler implements CompilerContract {
      * Finally process the ast
      */
     const buffer = new EdgeBuffer()
+    buffer.writeStatement(`ctx.set('$filename', '${templatePath.replace(/\.edge$/, '')}.edge')`)
     templateTokens.forEach((token) => parser.processLexerToken(token, buffer))
 
     const payload = {

diff --git a/src/Edge/globals/index.ts b/src/Edge/globals/index.ts
@@ -18,11 +18,24 @@ import { EdgeContract, ContextContract } from '../../Contracts'
  * Inspect value.
  */
 function inspect (ctx: ContextContract, valueToInspect: any, depth: number = 1) {
-  return ctx.safe(`<pre style="background: #000; color: #fff; padding: 20px;">${utilInspect(valueToInspect, {
+  const inspectedString = `<pre>${utilInspect(valueToInspect, {
     showHidden: true,
     compact: false,
     depth: depth,
-  })}</pre>`)
+  })}</pre>`
+
+  const filename = `<span style="color: #999; position: absolute; right: 20px; top: 10px;">
+    ${ctx.resolve('$filename')}
+  </span>`
+
+  return ctx.safe(`<div class="__inspect_output" style="background: #000; color: #fff; padding: 20px; position: relative;">${inspectedString}${filename}</div>`)
+}
+
+/**
+ * Compacting the inspect output of self
+ */
+inspect[Symbol.for('nodejs.util.inspect.custom')] = function customInspect () {
+  return '[inspect]'
 }
 
 export default function globals (edge: EdgeContract) {

diff --git a/src/Tags/Component.ts b/src/Tags/Component.ts
@@ -35,7 +35,7 @@ const componentNameAllowedExpressions: (keyof typeof expressions)[] = [
  * Returns the component name and props by parsing the component jsArg expression
  */
 function getComponentNameAndProps (expression: any, parser: Parser): [string, string] {
-  let name
+  let name: string
 
   /**
    * Use the first expression inside the sequence expression as the name
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,4 +6,4 @@ module.exports = class User { @@
       slotTitle (ctx) {
         return ctx.resolve('props').title.toUpperCase()
       }
-    }
+    }