feat: disallow elements or modifiers including delimiters (#241)

Existing code (e.g. `b("foo-bar")`) can occur errors.
To avoid errors, you can set the option: `strict: false`.

Author: ybiquitous

README.md

@@ -66,6 +66,7 @@ b("element", ["mod1", null, "mod3"]);
 | [`modifierDelimiter`](#modifierdelimiter)   | `string`             | `"--"`  |
 | [`namespace`](#namespace)                   | `string`, `string[]` | `""`    |
 | [`namespaceDelimiter`](#namespacedelimiter) | `string`             | `"-"`   |
+| [`strict`](#strict)                         | `boolean`            | `true`  |
 
 ### `elementDelimiter`
 
@@ -134,6 +135,29 @@ b("element", { mod1: true, mod2: true });
 //=> "block__element block__element--mod1 block__element--mod2"
 ```
 
+### `strict`
+
+When you set `true` to this option, given elements or modifiers are checked.
+And if the check fails, then an runtime error is thrown.
+
+For example, when setting `true`, the following code throws an error.
+
+```ts
+const b = block("foo", { strict: true });
+b("element__");
+b({ modifier--: true });
+```
+
+When setting `false`, the following code throws no errors.
+
+```ts
+const b = block("foo", { strict: false });
+b("element__");
+//=> foo__element__
+b({ modifier_: true });
+//=> foo__modifier_
+```
+
 ### `setup()`
 
 Change default options.
@@ -146,6 +170,7 @@ setup({
   modifierDelimiter: "-",
   namespace: "ns",
   namespaceDelimiter: "---",
+  strict: false,
 });
 
 const b = block("block");

index.ts

@@ -3,6 +3,7 @@ interface Options {
   modifierDelimiter: string;
   namespace: string | string[];
   namespaceDelimiter: string;
+  strict: boolean;
 }
 
 type PartialOptions = Partial<Options>;
@@ -12,13 +13,15 @@ const defaultOptions: Options = {
   modifierDelimiter: "--",
   namespace: "",
   namespaceDelimiter: "-",
+  strict: true,
 };
 
 export function setup({
   elementDelimiter,
   modifierDelimiter,
   namespace,
   namespaceDelimiter,
+  strict,
 }: PartialOptions): void {
   if (elementDelimiter) {
     defaultOptions.elementDelimiter = elementDelimiter;
@@ -32,6 +35,9 @@ export function setup({
   if (namespaceDelimiter) {
     defaultOptions.namespaceDelimiter = namespaceDelimiter;
   }
+  if (typeof strict === "boolean") {
+    defaultOptions.strict = strict;
+  }
 }
 
 type Modifiers =
@@ -42,8 +48,22 @@ type Modifiers =
 
 type BemBlockFunction = (elementOrModifiers?: string | Modifiers, modifiers?: Modifiers) => string;
 
+const uniqueChars = (list: string[]): string[] =>
+  list
+    .join("")
+    .split("")
+    .filter((value, index, self) => self.indexOf(value) === index);
+
+const includesChars = (str: string, chars: string[]): boolean =>
+  chars.some(char => str.includes(char));
+
+const invalidMessage = (subject: string, subjectValue: string, delimiters: string[]): string => {
+  const delims = `"${delimiters.join('", "')}"`;
+  return `The ${subject} ("${subjectValue}") must not use the characters contained within the delimiters (${delims}).`;
+};
+
 export default function bem(block: string, options: PartialOptions = {}): BemBlockFunction {
-  const { elementDelimiter, modifierDelimiter, namespace, namespaceDelimiter } = {
+  const { elementDelimiter, modifierDelimiter, namespace, namespaceDelimiter, strict } = {
     ...defaultOptions,
     ...options,
   };
@@ -53,32 +73,46 @@ export default function bem(block: string, options: PartialOptions = {}): BemBlo
     .filter(Boolean) // compact
     .reduce((joined, ns) => joined + `${ns}${namespaceDelimiter}`, "");
 
-  const baseBlock = `${namespaces}${block}`;
+  const namespaceBlock = `${namespaces}${block}`;
+
+  const delimiters = strict ? [namespaceDelimiter, elementDelimiter, modifierDelimiter] : [];
+  const delimiterChars = strict ? uniqueChars(delimiters) : [];
 
   return function bemBlock(elementOrModifiers, modifiers) {
     if (!elementOrModifiers) {
-      return baseBlock;
+      return namespaceBlock;
     }
 
-    const base =
-      typeof elementOrModifiers === "string"
-        ? `${baseBlock}${elementDelimiter}${elementOrModifiers}`
-        : baseBlock;
+    const element = typeof elementOrModifiers === "string" ? elementOrModifiers : null;
+
+    if (strict && element && includesChars(element, delimiterChars)) {
+      throw new Error(invalidMessage("element", element, delimiters));
+    }
+
+    const base = element ? `${namespaceBlock}${elementDelimiter}${element}` : namespaceBlock;
+
     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;
+    const addModifiers = (className: string, modifier: string | null | undefined): string => {
+      if (modifier) {
+        if (strict && includesChars(modifier, delimiterChars)) {
+          throw new Error(invalidMessage("modifier", modifier, delimiters));
+        }
+        return `${className} ${base}${modifierDelimiter}${modifier}`;
+      }
+      return className;
+    };
 
     if (Array.isArray(mods)) {
-      return mods.reduce(reducer, base);
+      return mods.reduce(addModifiers, base);
     }
 
     return Object.keys(mods)
       .filter(mod => mods[mod])
-      .reduce(reducer, base);
+      .reduce(addModifiers, base);
   };
 }

test.ts

@@ -106,6 +106,7 @@ const testCases = [
         modifierDelimiter: "-",
         namespace: "ns",
         namespaceDelimiter: "---",
+        strict: true,
       });
       return block("block");
     },
@@ -185,6 +186,37 @@ testCases.forEach(({ description, tested, expectations }) => {
   });
 });
 
+test("invalid arguments", t => {
+  const b = block("invalid", {
+    namespaceDelimiter: "-",
+    elementDelimiter: "__",
+    modifierDelimiter: "--",
+  });
+
+  const expectedError = (subject: string, value: string): RegExp =>
+    new RegExp(
+      `^Error: The ${subject} \\("${value}"\\) must not use the characters contained within the delimiters \\("-", "__", "--"\\)\\.$`
+    );
+
+  t.test("element is invalid", assert => {
+    assert.throws(() => b("element--"), expectedError("element", "element--"));
+    assert.throws(() => b("element_"), expectedError("element", "element_"));
+    assert.throws(() => b("---element"), expectedError("element", "---element"));
+    assert.throws(() => b("-_element"), expectedError("element", "-_element"));
+    assert.throws(() => b("ele-me_nt"), expectedError("element", "ele-me_nt"));
+    assert.end();
+  });
+
+  t.test("modifier is invalid", assert => {
+    assert.throws(() => b(["modifier--"]), expectedError("modifier", "modifier--"));
+    assert.throws(() => b(["modifier_"]), expectedError("modifier", "modifier_"));
+    assert.throws(() => b(["---modifier"]), expectedError("modifier", "---modifier"));
+    assert.throws(() => b(["-_modifier"]), expectedError("modifier", "-_modifier"));
+    assert.throws(() => b(["mod-ifi_er"]), expectedError("modifier", "mod-ifi_er"));
+    assert.end();
+  });
+});
+
 // `setup()` test must be at last
 test("`setup()` additional case", t => {
   t.test("overrides options which was setup", assert => {
@@ -193,8 +225,9 @@ test("`setup()` additional case", t => {
       modifierDelimiter: "/",
       namespace: "n",
       namespaceDelimiter: "=",
+      strict: false,
     });
-    assert.is(b("element", { mod: true }), "n=block:element n=block:element/mod");
+    assert.is(b("element:", { mod: true }), "n=block:element: n=block:element:/mod");
     assert.end();
   });