refactor: cleanup components cruft and add eval tag

async_fixtures/components-advanced-props-compat/compiled.js

@@ -2,7 +2,11 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += await template.compileComponent("components-advanced-props-compat/button")(template, template.getComponentState({ class: 'mb-4 px-4', id: 'foo-bar', title: 'Click me' }, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
+out += await template.compileComponent("components-advanced-props-compat/button")(template, template.getComponentState({
+  class: 'mb-4 px-4',
+  id: 'foo-bar',
+  title: 'Click me'
+}, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
 } catch (error) {
 template.reThrow(error, $filename, $lineNumber);
 }

async_fixtures/components-advanced-props/button.edge

@@ -1,3 +1,3 @@
-<button type="submit" {{ $props.except(['type', 'title']).toAttributes() }}>
+<button type="submit" {{ $props.except(['type', 'title']).toAttrs() }}>
   {{ title }}
 </button>

async_fixtures/components-advanced-props/compiled.js

@@ -2,7 +2,11 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += await template.compileComponent("components-advanced-props/button")(template, template.getComponentState({ class: 'mb-4 px-4', id: 'foo-bar', title: 'Click me' }, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
+out += await template.compileComponent("components-advanced-props/button")(template, template.getComponentState({
+  class: 'mb-4 px-4',
+  id: 'foo-bar',
+  title: 'Click me'
+}, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
 } catch (error) {
 template.reThrow(error, $filename, $lineNumber);
 }

async_fixtures/components-falsy-args/compiled.js

@@ -2,7 +2,9 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += await template.compileComponent("components-falsy-args/alert")(template, template.getComponentState({ index: 0 }, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
+out += await template.compileComponent("components-falsy-args/alert")(template, template.getComponentState({
+  index: 0
+}, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
 } catch (error) {
 template.reThrow(error, $filename, $lineNumber);
 }

async_fixtures/components-falsy-args/index.edge

@@ -1 +1 @@
-@!component("components-falsy-args/alert", index = 0)
+@!component("components-falsy-args/alert", { index: 0 })

async_fixtures/components-partials/compiled.js

@@ -2,7 +2,9 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += await template.compileComponent("components-partials/alert")(template, template.getComponentState({ username: "virk" }, { $context: Object.assign({}, $context), main: async function () { const $context = this.$context;
+out += await template.compileComponent("components-partials/alert")(template, template.getComponentState({
+  username: 'virk'
+}, { $context: Object.assign({}, $context), main: async function () { const $context = this.$context;
 let slot_main = "";
 try {
 slot_main += "  Hello ";

async_fixtures/components-partials/index.edge

@@ -1,3 +1,3 @@
-@component("components-partials/alert", username = "virk")
+@component("components-partials/alert", { username: 'virk' })
   Hello {{ username || "Guest" }}
 @endcomponent

async_fixtures/components-props/compiled.js

@@ -2,7 +2,9 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += await template.compileComponent("components-props/alert")(template, template.getComponentState({ "title": "H1" }, { $context: Object.assign({}, $context), main: async function () { const $context = this.$context;
+out += await template.compileComponent("components-props/alert")(template, template.getComponentState({
+  "title": "H1"
+}, { $context: Object.assign({}, $context), main: async function () { const $context = this.$context;
 let slot_main = "";
 try {
 slot_main += "Hello world";

async_fixtures/components-spread-and-literal/compiled.js

@@ -2,7 +2,10 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += await template.compileComponent("components-spread-and-literal/alert")(template, template.getComponentState({ ...state.data, name: 'virk' }, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
+out += await template.compileComponent("components-spread-and-literal/alert")(template, template.getComponentState({
+  ...state.data,
+  name: 'virk'
+}, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
 } catch (error) {
 template.reThrow(error, $filename, $lineNumber);
 }

async_fixtures/components-spread/compiled.js

@@ -2,7 +2,9 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += await template.compileComponent("components-spread/alert")(template, template.getComponentState({ ...state.data }, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
+out += await template.compileComponent("components-spread/alert")(template, template.getComponentState({
+  ...state.data
+}, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
 } catch (error) {
 template.reThrow(error, $filename, $lineNumber);
 }

fixtures/components-advanced-props-compat/compiled.js

@@ -2,7 +2,11 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += template.compileComponent("components-advanced-props-compat/button")(template, template.getComponentState({ class: 'mb-4 px-4', id: 'foo-bar', title: 'Click me' }, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
+out += template.compileComponent("components-advanced-props-compat/button")(template, template.getComponentState({
+  class: 'mb-4 px-4',
+  id: 'foo-bar',
+  title: 'Click me'
+}, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
 } catch (error) {
 template.reThrow(error, $filename, $lineNumber);
 }

fixtures/components-advanced-props/button.edge

@@ -1,3 +1,3 @@
-<button type="submit" {{ $props.except(['type', 'title']).toAttributes() }}>
+<button type="submit" {{ $props.except(['type', 'title']).toAttrs() }}>
   {{ title }}
 </button>

fixtures/components-advanced-props/compiled.js

@@ -2,7 +2,11 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += template.compileComponent("components-advanced-props/button")(template, template.getComponentState({ class: 'mb-4 px-4', id: 'foo-bar', title: 'Click me' }, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
+out += template.compileComponent("components-advanced-props/button")(template, template.getComponentState({
+  class: 'mb-4 px-4',
+  id: 'foo-bar',
+  title: 'Click me'
+}, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
 } catch (error) {
 template.reThrow(error, $filename, $lineNumber);
 }

fixtures/components-falsy-args/compiled.js

@@ -2,7 +2,9 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += template.compileComponent("components-falsy-args/alert")(template, template.getComponentState({ index: 0 }, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
+out += template.compileComponent("components-falsy-args/alert")(template, template.getComponentState({
+  index: 0
+}, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
 } catch (error) {
 template.reThrow(error, $filename, $lineNumber);
 }

fixtures/components-falsy-args/index.edge

@@ -1 +1 @@
-@!component("components-falsy-args/alert", index = 0)
+@!component("components-falsy-args/alert", { index: 0 })

fixtures/components-partials/compiled.js

@@ -2,7 +2,9 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += template.compileComponent("components-partials/alert")(template, template.getComponentState({ username: "virk" }, { $context: Object.assign({}, $context), main: function () { const $context = this.$context;
+out += template.compileComponent("components-partials/alert")(template, template.getComponentState({
+  username: 'virk'
+}, { $context: Object.assign({}, $context), main: function () { const $context = this.$context;
 let slot_main = "";
 try {
 slot_main += "  Hello ";

fixtures/components-partials/index.edge

@@ -1,3 +1,3 @@
-@component("components-partials/alert", username = "virk")
+@component("components-partials/alert", { username: 'virk' })
   Hello {{ username || "Guest" }}
 @endcomponent

fixtures/components-props/compiled.js

@@ -2,7 +2,9 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += template.compileComponent("components-props/alert")(template, template.getComponentState({ "title": "H1" }, { $context: Object.assign({}, $context), main: function () { const $context = this.$context;
+out += template.compileComponent("components-props/alert")(template, template.getComponentState({
+  "title": "H1"
+}, { $context: Object.assign({}, $context), main: function () { const $context = this.$context;
 let slot_main = "";
 try {
 slot_main += "Hello world";

fixtures/components-spread-and-literal/compiled.js

@@ -2,7 +2,10 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += template.compileComponent("components-spread-and-literal/alert")(template, template.getComponentState({ ...state.data, name: 'virk' }, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
+out += template.compileComponent("components-spread-and-literal/alert")(template, template.getComponentState({
+  ...state.data,
+  name: 'virk'
+}, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
 } catch (error) {
 template.reThrow(error, $filename, $lineNumber);
 }

fixtures/components-spread/compiled.js

@@ -2,7 +2,9 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += template.compileComponent("components-spread/alert")(template, template.getComponentState({ ...state.data }, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
+out += template.compileComponent("components-spread/alert")(template, template.getComponentState({
+  ...state.data
+}, { $context: Object.assign({}, $context), main: function () { return "" } }, { filename: $filename, line: $lineNumber, col: 0 }), $context);
 } catch (error) {
 template.reThrow(error, $filename, $lineNumber);
 }

fixtures/eval-tag/compiled.js

@@ -0,0 +1,12 @@
+let out = "";
+let $lineNumber = 1;
+let $filename = "{{__dirname}}index.edge";
+try {
+state.user.username = state.user.username.toUpperCase();
+out += "Hello ";
+$lineNumber = 2;
+out += `${template.escape(state.user.username)}`;
+} catch (error) {
+template.reThrow(error, $filename, $lineNumber);
+}
+return out;

fixtures/eval-tag/index.edge

@@ -0,0 +1,2 @@
+@eval(user.username = user.username.toUpperCase())
+Hello {{ user.username }}

fixtures/eval-tag/index.json

@@ -0,0 +1,5 @@
+{
+  "user": {
+    "username": "virk"
+  }
+}

fixtures/eval-tag/index.txt

@@ -0,0 +1 @@
+Hello VIRK

newline_fixtures/yaml-components-with-slots/index.edge

@@ -4,7 +4,7 @@
   name: {{ user.name }}
   job: {{ user.job }}
   skills:
-  @component('yaml-components/skills', skills = user.skills)
+  @component('yaml-components/skills', { skills: user.skills })
     @slot('skill', skill)
     - {{ skill }}
     @endslot

newline_fixtures/yaml-components/index.edge

@@ -4,6 +4,6 @@
   name: {{ user.name }}
   job: {{ user.job }}
   skills:
-  @component('yaml-components/skills', skills = user.skills)
+  @component('yaml-components/skills', { skills: user.skills })
   @endcomponent
 @endeach

package.json

@@ -63,7 +63,7 @@
     "classnames": "^2.3.2",
     "edge-error": "^4.0.0-0",
     "edge-lexer": "^6.0.0-4",
-    "edge-parser": "^9.0.0-2",
+    "edge-parser": "^9.0.0-3",
     "he": "^1.2.0",
     "js-stringify": "^1.0.2",
     "property-information": "^6.2.0",

src/compiler.ts

@@ -209,7 +209,6 @@ export class Compiler {
       async: this.async,
       statePropertyName: 'state',
       escapeCallPath: ['template', 'escape'],
-      toAttributesCallPath: ['template', 'toAttributes'],
       localVariables: this.#inlineVariables,
       onTag: (tag) => this.#processor.executeTag({ tag, path: templatePath }),
     })

src/component/props.ts

@@ -75,7 +75,7 @@ export class ComponentProps {
   /**
    * Converts props to HTML attributes
    */
-  toAttributes() {
+  toAttrs() {
     return htmlSafe(stringifyAttributes(this.#values))
   }
 }

src/edge/globals.ts

@@ -76,7 +76,9 @@ export const edgeGlobals = {
     escape: escape,
     safe: htmlSafe,
     classNames: classNames,
-    toAttributes: stringifyAttributes,
+    attrs: (values: Record<string, any>) => {
+      return htmlSafe(stringifyAttributes(values))
+    },
   },
 
   /**

src/tags/component.ts

@@ -80,19 +80,6 @@ function getComponentNameAndProps(
      * expression, as components allows a max of two arguments
      */
     const firstSequenceExpression = expression.expressions[0]
-
-    if (
-      firstSequenceExpression &&
-      [expressions.ObjectExpression, expressions.AssignmentExpression].includes(
-        firstSequenceExpression.type
-      )
-    ) {
-      return [
-        parser.utils.stringify(name),
-        StringifiedObject.fromAcornExpressions([firstSequenceExpression], parser),
-      ]
-    }
-
     return [parser.utils.stringify(name), parser.utils.stringify(firstSequenceExpression)]
   }
 

src/tags/eval.ts

@@ -0,0 +1,31 @@
+/*
+ * edge.js
+ *
+ * (c) EdgeJS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { parseJsArg } from '../utils.js'
+import type { TagContract } from '../types.js'
+
+/**
+ * The eval tag accepts expressions similar to double curly
+ * braces. However, it does not write anything to the
+ * output.
+ */
+export const evalTag: TagContract = {
+  block: false,
+  seekable: true,
+  tagName: 'eval',
+  noNewLine: true,
+
+  /**
+   * Compiles the tag AST
+   */
+  compile(parser, buffer, token) {
+    const parsed = parseJsArg(parser, token)
+    buffer.writeExpression(parser.utils.stringify(parsed), token.filename, token.loc.start.line)
+  },
+}

src/tags/main.ts

@@ -11,6 +11,7 @@ export { ifTag as if } from './if.js'
 export { eachTag as each } from './each.js'
 export { slotTag as slot } from './slot.js'
 export { elseTag as else } from './else.js'
+export { evalTag as eval } from './eval.js'
 export { injectTag as inject } from './inject.js'
 export { unlessTag as unless } from './unless.js'
 export { elseIfTag as elseif } from './else_if.js'

src/template.ts

@@ -15,7 +15,6 @@ import Macroable from '@poppinss/macroable'
 import { Compiler } from './compiler.js'
 import { Processor } from './processor.js'
 import { Props } from './migrate/props.js'
-import { stringifyAttributes } from './utils.js'
 import type { CompiledTemplate } from './types.js'
 import { ComponentProps } from './component/props.js'
 
@@ -171,13 +170,6 @@ export class Template extends Macroable {
     return escape(input)
   }
 
-  /**
-   * Converts an object to HTML attributes
-   */
-  toAttributes(attributes: Record<string, any>) {
-    return stringifyAttributes(attributes)
-  }
-
   /**
    * Raise an error
    */