Add :is modifier for simple value comparisons

Author: allmarkedup

README.md

@@ -220,11 +220,28 @@ StimulusX provides the following built-in modifiers:
 * `:downcase` - transform text to lowercase
 * `:strip` - strip leading and trailing whitespace
 * `:not` - negate (invert) a boolean value
+* `:is(<value>)` - performs a value comparison. See below for details.
 
 > [!TIP]
 > _If you need to you can add your own **custom modifiers** -
 see [the section on extending StimulusX](#extending) for details._
 
+#### `:is(<value>)` modifier
+
+The `:is` modifier compares the resolved property value with the `<value>` provided within the parentheses, returning `true` if they match and `false` if not.
+
+It is handy for using with [boolean attribute bindings](#boolean-attributes) to conditionally add an attributes based on `String` or `Number` comparisons.
+
+```html
+<input data-bind-attr="disabled~workflow#status:is('complete')">
+```
+
+> [!NOTE]
+> _The `:is` modifier only supports simple `String`, `Number` or `Boolean` comparisons.
+
+
+
+
 <h2 id="attribute-bindings">Attribute bindings</h2>
 
 Attribute bindings connect **HTML attribute values** to **controller properties**, and ensure that the attribute value is automatically updated so as to stay in sync with the value of the controller property at all times.

dist/stimulus-x.js

@@ -115,7 +115,7 @@ function toParsedDirectives({ name, value }) {
   const type = name.match(matchedAttributeRegex())[1];
   const bindingExpressions = value
     .trim()
-    .split(/\s+/)
+    .split(/\s+(?![^\(]*\))/) // split string on all spaces not contained in parentheses
     .filter((e) => e);
 
   return bindingExpressions.map((bindingExpression) => {

dist/stimulus-x.js.map

@@ -4,6 +4,7 @@ import { directive } from "./directives";
 import { nextTick } from "./scheduler";
 
 import "./modifiers/downcase";
+import "./modifiers/is";
 import "./modifiers/not";
 import "./modifiers/strip";
 import "./modifiers/upcase";

src/directives.js

@@ -9,17 +9,18 @@ export function modifier(name, handler) {
 
 export function applyModifiers(value, modifiers = []) {
   return modifiers.reduce((value, modifier) => {
-    if (modifierExists(modifier)) {
-      return applyModifier(modifier, value);
+    const { name, args } = parseModifierNameAndArguments(modifier);
+    if (modifierExists(name)) {
+      return applyModifier(value, name, args);
     } else {
       console.error(`Unknown modifier '${modifier}'`);
       return value;
     }
   }, value);
 }
 
-function applyModifier(name, value) {
-  return getModifier(name).handler(value);
+function applyModifier(value, name, args = []) {
+  return getModifier(name).handler(value, args);
 }
 
 function modifierExists(name) {
@@ -29,3 +30,28 @@ function modifierExists(name) {
 function getModifier(name) {
   return modifierHandlers.find((modifier) => modifier.name === name);
 }
+
+function parseModifierNameAndArguments(modifier) {
+  const matches = modifier.match(/^([^\(]+)(?=\((?=(.*)\)$)|$)/);
+
+  if (matches && typeof matches[2] !== "undefined") {
+    const argStr = matches[2].trim();
+    const firstChar = argStr[0];
+    const lastChar = argStr[argStr.length - 1];
+    let argValue = null;
+
+    if (
+      (firstChar === "'" && lastChar === "'") ||
+      (firstChar === "`" && lastChar === "`") ||
+      (firstChar === `"` && lastChar === `"`)
+    ) {
+      argValue = argStr.slice(1, argStr.length - 1);
+    } else {
+      argValue = JSON.parse(argStr);
+    }
+
+    return { name: matches[1], args: [argValue] };
+  } else {
+    return { name: modifier, args: [] };
+  }
+}

src/index.js

@@ -0,0 +1,11 @@
+import { modifier } from "../modifiers";
+import { isEqual } from "../utils";
+
+modifier("is", (value, args = []) => {
+  if (args.length === 0) {
+    console.warn("Missing argument for `:is` modifier");
+    return false;
+  } else {
+    return isEqual(value, args[0]);
+  }
+});

src/modifiers.js

@@ -17,3 +17,12 @@ export function walk(el, callback) {
     node = node.nextElementSibling;
   }
 }
+
+export function isEqual(x, y) {
+  const ok = Object.keys,
+    tx = typeof x,
+    ty = typeof y;
+  return x && y && tx === "object" && tx === ty
+    ? ok(x).length === ok(y).length && ok(x).every((key) => isEqual(x[key], y[key]))
+    : x === y;
+}

src/modifiers/is.js

@@ -0,0 +1,138 @@
+import { Controller } from "@hotwired/stimulus";
+import { createTestContext } from "../support/test-context";
+
+let context = await createTestContext();
+
+afterAll(() => context.teardown());
+
+describe("`is` modifier", async () => {
+  beforeAll(() =>
+    context.subject(
+      class extends Controller {
+        static values = {
+          string: {
+            type: String,
+            default: "string with spaces",
+          },
+          integer: {
+            type: Number,
+            default: 12345,
+          },
+          float: {
+            type: Number,
+            default: 12.345,
+          },
+          booleanTrue: {
+            type: Boolean,
+            default: true,
+          },
+          booleanFalse: {
+            type: Boolean,
+            default: false,
+          },
+        };
+      }
+    )
+  );
+
+  describe("string comparisons", () => {
+    test("single quoted string", async () => {
+      const { getTestElement } = await context.testDOM(`
+        <div data-controller="subject">
+          <div data-bind-attr="hidden~subject#stringValue:is('string with spaces')" data-test-element="target1"></div>
+          <div data-bind-attr="hidden~subject#stringValue:is('foo')" data-test-element="target2"></div>
+        </div>
+      `);
+
+      expect(getTestElement("target1").hidden).toBe(true);
+      expect(getTestElement("target2").hidden).toBe(false);
+    });
+
+    test("double quoted string", async () => {
+      const { getTestElement } = await context.testDOM(`
+        <div data-controller="subject">
+          <div data-bind-attr='hidden~subject#stringValue:is("string with spaces")' data-test-element="target1"></div>
+          <div data-bind-attr='hidden~subject#stringValue:is("foo")' data-test-element="target2"></div>
+        </div>
+      `);
+
+      expect(getTestElement("target1").hidden).toBe(true);
+      expect(getTestElement("target2").hidden).toBe(false);
+    });
+  });
+
+  describe("number comparisons", () => {
+    test("integer", async () => {
+      const { getTestElement } = await context.testDOM(`
+        <div data-controller="subject">
+          <div data-bind-attr="hidden~subject#integerValue:is(12345)" data-test-element="target1"></div>
+          <div data-bind-attr="hidden~subject#integerValue:is(54321)" data-test-element="target2"></div>
+        </div>
+      `);
+
+      expect(getTestElement("target1").hidden).toBe(true);
+      expect(getTestElement("target2").hidden).toBe(false);
+    });
+
+    test("float", async () => {
+      const { getTestElement } = await context.testDOM(`
+        <div data-controller="subject">
+          <div data-bind-attr="hidden~subject#floatValue:is(12.345)" data-test-element="target1"></div>
+          <div data-bind-attr="hidden~subject#floatValue:is(543.21)" data-test-element="target2"></div>
+        </div>
+      `);
+
+      expect(getTestElement("target1").hidden).toBe(true);
+      expect(getTestElement("target2").hidden).toBe(false);
+    });
+  });
+
+  describe("boolean comparisons", () => {
+    test("true", async () => {
+      const { getTestElement } = await context.testDOM(`
+        <div data-controller="subject">
+          <div data-bind-attr="hidden~subject#booleanTrueValue:is(true)" data-test-element="target1"></div>
+          <div data-bind-attr="hidden~subject#booleanFalseValue:is(true)" data-test-element="target2"></div>
+          <div data-bind-attr="hidden~subject#booleanTrueValue:is( true )" data-test-element="target3"></div>
+        </div>
+      `);
+
+      expect(getTestElement("target1").hidden).toBe(true);
+      expect(getTestElement("target2").hidden).toBe(false);
+      expect(getTestElement("target3").hidden).toBe(true);
+    });
+
+    test("false", async () => {
+      const { getTestElement } = await context.testDOM(`
+        <div data-controller="subject">
+          <div data-bind-attr="hidden~subject#booleanTrueValue:is(false)" data-test-element="target1"></div>
+          <div data-bind-attr="hidden~subject#booleanFalseValue:is(false)" data-test-element="target2"></div>
+          <div data-bind-attr="hidden~subject#booleanFalseValue:is( false )" data-test-element="target3"></div>
+        </div>
+      `);
+
+      expect(getTestElement("target1").hidden).toBe(false);
+      expect(getTestElement("target2").hidden).toBe(true);
+      expect(getTestElement("target3").hidden).toBe(true);
+    });
+
+    describe("multiple descriptors", () => {
+      test("true", async () => {
+        const { getTestElement } = await context.testDOM(`
+          <div data-controller="subject">
+            <input
+              data-bind-attr="
+                hidden~subject#stringValue:is('string with spaces')
+                disabled~subject#integerValue:is(12345)
+              "
+              data-test-element="target">
+          
+          </div>
+        `);
+
+        expect(getTestElement("target").hidden).toBe(true);
+        expect(getTestElement("target").disabled).toBe(true);
+      });
+    });
+  });
+});

src/utils.js

@@ -1,5 +1,5 @@
 import { Application, Controller } from "@hotwired/stimulus";
-import StimulusX from "../dist/stimulus-x";
+import StimulusX from "../src";
 import { isReactive } from "../src/reactivity";
 import { nextTick } from "./support/helpers";