feat: allow to receive an array as modifiers (#236)

Author: ybiquitous

README.md

@@ -44,6 +44,9 @@ b({ mod1: true, mod2: false });
 b({ mod1: true, mod2: false, mod3: true });
 //=> "block block--mod1 block--mod3"
 
+b(["mod1", null, "mod3"]);
+//=> "block block--mod1 block--mod3"
+
 b("element");
 //=> "block__element"
 
@@ -52,6 +55,9 @@ b("element", { mod1: true, mod2: false });
 
 b("element", { mod1: true, mod2: false, mod3: true });
 //=> "block__element block__element--mod1 block__element--mod3"
+
+b("element", ["mod1", null, "mod3"]);
+//=> "block__element block__element--mod1 block__element--mod3"
 ```
 
 ## Options

docs/index.html

@@ -70,9 +70,11 @@ <h2>Output:</h2>
       import block from "https://unpkg.com/bem-ts/dist/bem-ts.min.js";
       const b = block("block");
       print(b());
-      print(b({ modifier: true }));
+      print(b({ modifier: true, noModifier: false }));
+      print(b(["modifier2"]));
       print(b("element"));
-      print(b("element", { modifier: true }));
+      print(b("element", { modifier: true, noModifier: false }));
+      print(b("element", ["modifier2", null]));
     </script>
 
     <script>

index.ts

@@ -34,9 +34,11 @@ export function setup({
   }
 }
 
-interface Modifiers {
-  [key: string]: boolean | null | undefined;
-}
+type Modifiers =
+  | {
+      [key: string]: boolean | null | undefined;
+    }
+  | (string | null | undefined)[];
 
 type BemBlockFunction = (elementOrModifiers?: string | Modifiers, modifiers?: Modifiers) => string;
 
@@ -58,16 +60,25 @@ export default function bem(block: string, options: PartialOptions = {}): BemBlo
       return baseBlock;
     }
 
-    const isElement = typeof elementOrModifiers === "string";
-    const base = isElement ? `${baseBlock}${elementDelimiter}${elementOrModifiers}` : baseBlock;
-    const mods = isElement ? modifiers : elementOrModifiers;
+    const base =
+      typeof elementOrModifiers === "string"
+        ? `${baseBlock}${elementDelimiter}${elementOrModifiers}`
+        : baseBlock;
+    const mods = typeof elementOrModifiers === "string" ? modifiers : elementOrModifiers;
 
     if (!mods) {
       return base;
     }
 
+    const reducer = (result: string, modifier: string | null | undefined): string =>
+      modifier ? `${result} ${base}${modifierDelimiter}${modifier}` : result;
+
+    if (Array.isArray(mods)) {
+      return mods.reduce(reducer, base);
+    }
+
     return Object.keys(mods)
-      .filter(mod => (mods as Modifiers)[mod])
-      .reduce((result, mod) => `${result} ${base}${modifierDelimiter}${mod}`, base);
+      .filter(mod => mods[mod])
+      .reduce(reducer, base);
   };
 }

test.ts

@@ -125,40 +125,61 @@ testCases.forEach(({ description, tested, expectations }) => {
     const b = tested();
 
     t.test("returns block", assert => {
-      assert.is(b(), expectations[0]);
-      assert.is(b({ mod1: false }), expectations[0]);
-      assert.is(b({ mod1: false, mod2: false }), expectations[0]);
+      const expected = expectations[0];
+      assert.is(b(), expected);
+      assert.is(b({ mod1: false }), expected);
+      assert.is(b({ mod1: null }), expected);
+      assert.is(b({ mod1: undefined }), expected);
+      assert.is(b({ mod1: false, mod2: false, mod3: null, mod4: undefined }), expected);
+      assert.is(b([]), expected);
+      assert.is(b([""]), expected);
+      assert.is(b([null]), expected);
+      assert.is(b([undefined]), expected);
+      assert.is(b(["", null, undefined]), expected);
       assert.end();
     });
 
     t.test("returns block with modifier", assert => {
-      assert.is(b({ mod1: true }), expectations[1]);
-      assert.is(b({ mod1: true, mod2: false }), expectations[1]);
-      assert.is(b({ mod1: true, mod2: null }), expectations[1]);
-      assert.is(b({ mod1: true, mod2: undefined }), expectations[1]);
+      const expected = expectations[1];
+      assert.is(b({ mod1: true }), expected);
+      assert.is(b({ mod1: true, mod2: false, mod3: null, mod4: undefined }), expected);
+      assert.is(b(["mod1"]), expected);
+      assert.is(b(["mod1", "", null, undefined]), expected);
       assert.end();
     });
 
     t.test("returns block with multiple modifiers", assert => {
-      assert.is(b({ mod1: true, mod2: true }), expectations[2]);
-      assert.is(b({ mod1: true, mod2: true, mod3: false }), expectations[2]);
+      const expected = expectations[2];
+      assert.is(b({ mod1: true, mod2: true }), expected);
+      assert.is(b({ mod1: true, mod2: true, mod3: false }), expected);
+      assert.is(b(["mod1", "mod2"]), expected);
+      assert.is(b(["mod1", "mod2", null]), expected);
       assert.end();
     });
 
     t.test("returns block with element", assert => {
-      assert.is(b("element"), expectations[3]);
+      const expected = expectations[3];
+      assert.is(b("element"), expected);
+      assert.is(b("element", {}), expected);
+      assert.is(b("element", { mod: false }), expected);
+      assert.is(b("element", [""]), expected);
       assert.end();
     });
 
     t.test("returns block with element and modifier", assert => {
-      assert.is(b("element", { mod1: true }), expectations[4]);
-      assert.is(b("element", { mod1: true, mod2: false }), expectations[4]);
+      const expected = expectations[4];
+      assert.is(b("element", { mod1: true }), expected);
+      assert.is(b("element", { mod1: true, mod2: false }), expected);
+      assert.is(b("element", ["mod1"]), expected);
+      assert.is(b("element", ["mod1", null]), expected);
       assert.end();
     });
 
     t.test("returns block with element and multiple modifiers", assert => {
-      assert.is(b("element", { mod1: true, mod2: true }), expectations[5]);
-      assert.is(b("element", { mod1: true, mod2: true, mod3: false }), expectations[5]);
+      const expected = expectations[5];
+      assert.is(b("element", { mod1: true, mod2: true }), expected);
+      assert.is(b("element", { mod1: true, mod2: true, mod3: false }), expected);
+      assert.is(b("element", ["mod1", "mod2"]), expected);
       assert.end();
     });
   });