refactor: do not stringify x-data

x-data needs a JavaScript expression and not a JSON string, therefore JSON stringifying it will not work
edge-js · Aug 8, 2023 · bd7387f · bd7387f
1 parent 1c78d1e
commit bd7387f
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 15 deletions.
diff --git a/example/index.ts b/example/index.ts
@@ -2,8 +2,10 @@ import { Edge } from '../index.js'
 import { join } from 'node:path'
 import { createServer } from 'node:http'
 import { getDirname } from '@poppinss/utils'
+import { migrate } from '../src/migrate/plugin.js'
 
 const edge = Edge.create()
+edge.use(migrate)
 edge.mount(join(getDirname(import.meta.url), 'views'))
 
 class Base {
@@ -37,11 +39,11 @@ user.parent = user
 
 createServer(async (_req, res) => {
   res.writeHead(200, { 'content-type': 'text/html' })
-  res.end(
-    await edge.render('welcome', {
-      user: user,
-    })
-  )
+  const html = await edge.render('welcome', {
+    user: user,
+  })
+  console.log(html)
+  res.end(html)
 }).listen(3000, () => {
   console.log('Listening on 127.0.0.1:3000')
 })
diff --git a/example/views/components/modal.edge b/example/views/components/modal.edge
@@ -1,6 +1,21 @@
 {{ inspect(state) }}
 
-<div class="modal">
+<div {{
+  ({
+    class: 'modal',
+    x: {
+      data: `{
+        title: '${title}',
+        trigger: {
+          ['@click']() {
+            alert(this.title)
+          }
+        }
+      }`
+    }
+  })
+}}
+>
   <h1 class="title">{{ title }}</h1>
   <div>
     {{{ await $slots.body() }}}

diff --git a/example/views/partials/button.edge b/example/views/partials/button.edge
@@ -1 +1 @@
-<button>delete</button>
+<button x-bind="trigger">delete</button>
diff --git a/example/views/welcome.edge b/example/views/welcome.edge
@@ -3,6 +3,7 @@
 <head>
 	<meta charset="UTF-8">
 	<title></title>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 </head>
 <body>
   {{ inspect(state.user) }}

diff --git a/src/utils.ts b/src/utils.ts
@@ -7,8 +7,6 @@
  * file that was distributed with this source code.
  */
 
-// @ts-expect-error untyped module
-import JSStringify from 'js-stringify'
 import classNames from 'classnames'
 import { EdgeError } from 'edge-error'
 import type { TagToken } from 'edge-lexer/types'
@@ -341,14 +339,11 @@ export function stringifyAttributes(props: any, namespace?: string): string {
        * Encoding rules for certain properties.
        *
        * - Class values can be objects with conditionals
-       * - x-data as an object will be converted to a JSON value
-       * - Arrays will be concatenated into a string list and html escaped
        * - Non-booleanish and numeric properties will be html escaped
+       * - Arrays will be concatenated into a string list and html escaped
        */
       if (key === 'class') {
         value = `"${classNames(value)}"`
-      } else if (key === 'x-data') {
-        value = typeof value === 'string' ? `"${value}"` : JSStringify(value)
       } else if (Array.isArray(value)) {
         value = `"${value.join(propInfo.commaSeparated ? ',' : ' ')}"`
       } else if (!propInfo.booleanish && !propInfo.number) {

diff --git a/tests/template.spec.ts b/tests/template.spec.ts
@@ -378,7 +378,7 @@ test.group('Template | toAttributes', () => {
       <div {{
         ({
           x: {
-            data: { open: false },
+            data: '{ open: false }',
             init: "console.log('Here I am')",
             show: 'open',
           }
@@ -392,7 +392,7 @@ test.group('Template | toAttributes', () => {
     assert.equal(
       html,
       dedent`
-      <div x-data={"open":false} x-init="console.log('Here I am')" x-show="open">
+      <div x-data="{ open: false }" x-init="console.log('Here I am')" x-show="open">
       </div>
     `
     )
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<button>delete</button>
		<button x-bind="trigger">delete</button>