#42 Add nested in array support to BEM core

Author: Andrii Kirmas

src/bem.core.test.ts

@@ -18,6 +18,9 @@ describe(bem2arr.name, () => {
         [{base: {mod: false}}, "base"],
         [{base: {mod: true }}, "base base--mod"],
         [{base: {mod: "val"}}, "base base--mod--val"],
+        [{base: [{mod: false}]}, "base"],
+        [{base: [{mod: true }]}, "base base--mod"],
+        [{base: [{mod: "val"}]}, "base base--mod--val"],
       ],
     }
 
@@ -51,3 +54,12 @@ describe("optioning", () => {
     expect(true).toBe(true)
   })
 })
+
+it("extended values shape", () => expect(bem2arr({
+  base: [
+    {"mod1": 1},
+    "mod2"
+  ]
+}).join(" ")).toBe(
+  "base base--mod1--1 base--mod2"
+))

src/bem.core.ts

@@ -1,3 +1,4 @@
+import type { primitive } from "ts-swiss.types"
 import type { BemInGeneral } from "./bem.types"
 
 const {isArray: $isArray} = Array
@@ -30,30 +31,50 @@ function bem2arr(query: BemInGeneral) {
       continue
     }
 
-    const isArray = $isArray(baseQ)
-
-    // TODO check performance of `const in Array`
-    for (const mod in baseQ) {
-      //@ts-expect-error //TODO Split Array and Object?
-      const modValue = baseQ[mod]
-      if (!modValue)
-        continue
-
-      $return.push(`${base}${
-        isArray
-        ? ""
-        : `${modDelimiter}${mod}`
-      }${
-        typeof modValue !== "string"
-        ? ""
-        : `${modDelimiter}${modValue}`
-      }`)
+    if (!$isArray(baseQ))
+      $return.push(...mods2arr(base, baseQ))
+    else {
+      const {length} = baseQ
+
+      for (let i = 0; i < length; i++) {
+        const modQ = baseQ[i]
+
+        if (modQ === false)
+          continue
+          
+        if (modQ !== null && typeof modQ === "object")
+          $return.push(...mods2arr(base, modQ))
+        else
+          $return.push(bmv(base, modQ))
+      }
     }
   }
 
   return $return
 }
 
+function mods2arr(base: string, mods: Record<string, primitive>) {
+  const classes = []
+
+  for (const mod in mods) {
+    const value = mods[mod]
+    if (value === false)
+      continue
+
+    classes.push(bmv(base, mod, value))
+  }
+
+  return classes
+}
+
+function bmv(base: string, mod: string, value: Exclude<primitive, false> = true) {
+  return `${base}${modDelimiter}${mod}${
+    value === true
+    ? ""
+    : `${modDelimiter}${value}`
+  }`
+}
+
 function setOptions({
   elementDelimiter: elD = elementDelimiter,
   modDelimiter: modDel = modDelimiter

src/bem.types.ts

@@ -6,7 +6,8 @@ import type {
   PartDeep,
   Extends,
   KeyOf,
-  Ever
+  Ever,
+  primitive
 } from "./ts-swiss.types"
 import type { ClassNamed } from "./main.types"
 
@@ -81,9 +82,13 @@ export type Mods<Bools extends string, Enums extends Record<string, string>>
 }
 
 export type BemInGeneral = {
-  [base: string]: undefined | boolean | string
+  [base: string]: primitive
   | (false|string)[]
-  | {
-    [mod: string]: undefined | boolean | string
-  }
+  | [
+    // TODO Why not one array expression?
+    // false | string
+    | { [mod: string]: primitive },
+    ...(false|string)[]
+  ]
+  | { [mod: string]: primitive }
 }

src/ts-swiss.types.ts

@@ -20,7 +20,7 @@ export type KnownKeys<T> = {
 
 export type OmitIndexed<T> = Pick<T, KnownKeys<T> & keyof T>
 
-export type Primitive = undefined | null | boolean | number | string | symbol | bigint
+export type primitive = undefined | null | boolean | number | string | bigint
 
 export type Strip<Str extends string, Delimiter extends string, toNever extends boolean = false>
 = Str extends `${infer Lead}${Delimiter}${string}` ? Lead : toNever extends false ? Str : never