adds trim magic

eaCe · Jul 20, 2023 · 8847181 · 8847181
1 parent 9210902
commit 8847181
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -114,3 +114,8 @@ You may pass an array of values as the first argument.
 <div x-data x-text="$hasClass('foo')" class="foo"></div>
 ```
 
+### `$trim()`
+
+```html
+<div x-data x-text="$trim(' foo ')"></div>
+```
diff --git a/src/magics.js b/src/magics.js
@@ -123,4 +123,15 @@ export default function Magics (Alpine) {
 
     return false
   });
+
+  /**
+   * trim the string
+   */
+  Alpine.magic('trim', () => subject => {
+    if (subject && typeof subject === 'string') {
+      return subject.trim();
+    }
+
+    return subject;
+  });
 }
diff --git a/tests/magics.spec.js b/tests/magics.spec.js
@@ -206,3 +206,9 @@ test('should check whether the element has a specific class or not', async () =>
   mutateDom();
   expect(document.querySelector('.foo').innerHTML).toEqual('false');
 });
+
+test('should trim the string', async () => {
+  document.body.innerHTML = `<div x-data x-text="$trim('  foo  ')"></div>`;
+  mutateDom();
+  expect(document.querySelector('div').innerHTML).toEqual('foo');
+});