#39 Change bem query shape to be without element

Author: Andrii Kirmas

__recipes__/index.test.ts

@@ -24,16 +24,13 @@ type CssModule = Record<
   ClassHash
 >
 
-describe("go", () => {
+it("go", () => {
   const bem = classBeming<ClassNamesProperty<CssModule> & ClassNamed>()
   , classNamed = bem(true, {
     block: "m",
     block_el: {"m": "X"}
   })
-  it("TBD", () => expect(classNamed).not.toStrictEqual({
-    className: "block block-m block_el block_el_m-X"
-  }))
-  it("Now", () => expect(classNamed).toStrictEqual({
-    className: "block block-m block_el_m block_el_m-X"
-  }))
+  expect(classNamed).toStrictEqual({
+    className: "block block-m block_el block_el-m-X"
+  })
 })

__recipes__/package.json

@@ -7,7 +7,7 @@
     "pretest": "npm run setup",
     "ci": "npm ci --prefer-offline --no-audit --silent --quiet --progress=false",
     "setup": "npm uninstall --prefer-offline --no-audit --silent --quiet --progress=false react-classnaming && npm install --prefer-offline --no-audit --silent --quiet --progress=false ../",
-    "jest": "jest --"
+    "jest": "jest"
   },
   "keywords": [],
   "author": "",

__tests__/readme.spec.tsx

@@ -180,7 +180,7 @@ describe("bem", () => {
       button: {status: "danger"},
       button__icon: {hover: true}
     })}/>
-  ).not.toSame(
+  ).toSame(
     <div className="${props.className} form__item button button--status--danger button__icon button__icon--hover" />
   )
 })

package.json

@@ -16,9 +16,9 @@
     "compile": "tsc --project tsconfig.compile.json",
     "precompile": "rm -rf dist",
     "postcompile": "mkdir -p dist/types && find src -name '*.d.ts' -exec cp {} dist \\;",
-    "spec": "cd __recipes__ && npm run test",
+    "spec": "cd __recipes__ && npm run test --",
     "setup": "git config include.path ../.gitconfig && git-hooks-wrapper init",
-    "jest": "jest --runInBand --"
+    "jest": "jest --runInBand"
   },
   "repository": {
     "type": "git",

src/bem.core.test.ts

@@ -8,57 +8,21 @@ import {
 
 describe(bem2arr.name, () => {
   describe("singletons", () => {
-    const mod = undefined
     const suites: Record<string, [BemInGeneral, string][]> = {
-      "block singleton": [
-        [{block: false           },   ""],
-        [{block: true            },   "block"],
-        [{block: "mod"           },   "block block--mod"],
-
-        [{block: {$:  false      }},  "block"],
-        [{block: {$:  true       }},  "block"],        
-        [{block: {$:  "mod"      }},  "block block--mod"],
-        [{block: {$:  {}         }},  "block"],
-
-        [{block: {$:  {mod: false}}}, "block"],
-        [{block: {$:  {mod: true }}}, "block block--mod"],
-        [{block: {$:  {mod: "val"}}}, "block block--mod--val"],  
-      ],
-      "element singleton": [
-        [{block: {el: false      }},  ""],
-        [{block: {el: true       }},  "block__el"],
-        [{block: {el: "mod"      }},  "block__el block__el--mod"],
-        [{block: {el: {}         }},  "block__el"],
-        [{block: {el: {mod: false}}}, "block__el"],
-        [{block: {el: {mod: true }}}, "block__el block__el--mod"],
-        [{block: {el: {mod: "val"}}}, "block__el block__el--mod--val"],  
-      ],
-      "block and el combine": [
-        [{block: {
-          $: {mod: true},
-          el: true               }},  "block block--mod block__el"]
-      ],
-      "wrong shape": [
-        //@ts-expect-error
-        [{block: {$:  {mod: {}   }}}, "block block--mod"],
-        //@ts-expect-error
-        [{block: {el: {mod: {}}  }}, "block__el block__el--mod"],  
-      ],
-      "weird stuff": [
-        [{block: ""              },   "" /* or "block" */],
-        [{block: {}              },   "" /* or "block" */],
-        [{block: {$:  ""         }},  "block"],
-        [{block: {$:  {mod: ""   }}}, "block"],
-        [{block: {el: ""         }},  "" /* or "block__el" */],
-        [{block: {el: {mod: ""   }}}, "block__el"],
+      "singletons": [
+        [{base: undefined  },  "base"],
+        [{base: false      },  "base"],
+        [{base: true       },  "base"],
+        [{base: "mod"      },  "base base--mod"],
+        //@ts-expect-error //TODO #40
+        [{base: ["mod"]    },  "base base--0--mod" /* TODO #40 "base base--mod"*/],
+        //@ts-expect-error //TODO #40
+        [{base: [false]    },  "base"],
+        [{base: {}         },  "base"],
+        [{base: {mod: false}}, "base"],
+        [{base: {mod: true }}, "base base--mod"],
+        [{base: {mod: "val"}}, "base base--mod--val"],  
       ],
-      "undefineds": [
-        [{block: undefined       },   ""],      
-        [{block: {$:  undefined  }},  "block"], 
-        [{block: {$:  {mod       }}}, "block"], 
-        [{block: {el: undefined  }},  ""],         
-        [{block: {el: {mod       }}}, "block__el"],
-      ]
     }
 
     Object.entries(suites).forEach(([title, launches]) => describe(title, () => launches

src/bem.core.ts

@@ -19,47 +19,28 @@ export {
 function bem2arr(query: BemInGeneral) {
   const $return: string[] = []
 
-  for (const block in query) {
-    const blockQ = query[block]
+  for (const base in query) {
+    const baseQ = query[base]
+    $return.push(base)
 
-    if (!blockQ) 
+    if (!baseQ) 
       continue
-    if (typeof blockQ !== "object") {
-      $return.push(block)
-      if (typeof blockQ === "string")
-        $return.push(`${block}${modDelimiter}${blockQ}`)
+    if (typeof baseQ !== "object") {
+      if (typeof baseQ === "string")
+        $return.push(`${base}${modDelimiter}${baseQ}`)
       continue
     }
 
-    for (const el in blockQ) {
-      const elementQ = blockQ[el]
-      , isBlockMod = el === blockModKey
-      , element = isBlockMod ? block : `${block}${elementDelimiter}${el}`
-      
-      if (!elementQ) {
-        isBlockMod && $return.push(element)
+    for (const mod in baseQ) {
+      const modValue = baseQ[mod]
+      if (!modValue)
         continue
-      }
-      
-      $return.push(element)
 
-      if (typeof elementQ !== "object") {
-        if (typeof elementQ === "string")
-          $return.push(`${element}${modDelimiter}${elementQ}`)
-        continue
-      }
-
-      for (const mod in elementQ) {
-        const modValue = elementQ[mod]
-        if (!modValue)
-          continue
-
-        $return.push(`${element}${modDelimiter}${mod}${
-          typeof modValue !== "string"
-          ? ""
-          : `${modDelimiter}${modValue}`
-        }`)
-      }
+      $return.push(`${base}${modDelimiter}${mod}${
+        typeof modValue !== "string"
+        ? ""
+        : `${modDelimiter}${modValue}`
+      }`)
     }
   }
 

src/bem.test.ts

@@ -8,7 +8,7 @@ describe("contexting", () => {
 
     it("1", () => expect(bem({
       block1: true,
-      block2: { el: true }
+      block2__el: true
     })).toStrictEqual({
       className: "block1 block2__el"
     }))

src/bem.types.ts

@@ -79,11 +79,9 @@ type MVs<
 > = classes extends `${b}${delM}${infer MV}` ? MV : never
 
 export type BemInGeneral = {
-  [block: string]: undefined | boolean | string | {
-    [el: string]: undefined | boolean | string
-    // TODO #40 | (false|string)[]
-    | {
-      [mod: string]: undefined | boolean | string
-    }
+  [base: string]: undefined | boolean | string
+  // TODO #40 | (false|string)[]
+  | {
+    [mod: string]: undefined | boolean | string
   }
 }