feat: new namespace / namespaceDelimiter options (#36)

`prefix` options becomes **deprecated**.

Author: ybiquitous

README.md

@@ -62,8 +62,46 @@ b('element', { mod: true })
 //=> 'block__element-mod'
 ```
 
+### `namespace = ''`
+
+```ts
+const b = block('block', { namespace: 'ns' })
+
+b()
+//=> 'ns-block'
+
+b('element', { mod1: true, mod2: true })
+//=> 'ns-block__element--mod1 ns-block__element--mod2'
+```
+
+### `namespaceDelimiter = '-'`
+
+```ts
+const b = block('block', { namespace: 'ns', namespaceDelimiter: '---' })
+
+b()
+//=> 'ns---block'
+
+b('element', { mod1: true, mod2: true })
+//=> 'ns---block__element--mod1 ns---block__element--mod2'
+```
+
+When `namespace` is not given, `namespaceDelimiter` will be ignored.
+
+```ts
+const b = block('block', { namespaceDelimiter: '---' })
+
+b()
+//=> 'block'
+
+b('element', { mod1: true, mod2: true })
+//=> 'block__element--mod1 block__element--mod2'
+```
+
 ### `prefix = ''`
 
+**[DEPRECATED]**: Please use `namespace` and `namespaceDelimiter`.
+
 ```ts
 const b = block('block', { prefix: 'pre---' })
 
@@ -84,13 +122,14 @@ import block, { setup } from 'bem-ts'
 setup({
   elementDelimiter: '_',
   modifierDelimiter: '-',
-  prefix: 'pre---'
+  namespace: 'ns',
+  namespaceDelimiter: '---'
 })
 
 const b = block('block')
 
 b('element', { mod: true })
-//=> 'pre---block_element-mod'
+//=> 'ns---block_element-mod'
 ```
 
 ## Install

index.ts

@@ -3,17 +3,31 @@ type Modifiers = { [key: string]: boolean; }
 const defaults = {
   elementDelimiter: '__',
   modifierDelimiter:  '--',
+  namespace: '',
+  namespaceDelimiter: '-',
   prefix: '',
 }
 
-export function setup(options: { elementDelimiter?: string, modifierDelimiter?: string, prefix?: string }) {
-  if (options.elementDelimiter) {
+export function setup(options: {
+  elementDelimiter?: string,
+  modifierDelimiter?: string,
+  namespace?: string,
+  namespaceDelimiter?: string,
+  prefix?: string,
+}) {
+  if (typeof options.elementDelimiter === 'string') {
     defaults.elementDelimiter = options.elementDelimiter
   }
-  if (options.modifierDelimiter) {
+  if (typeof options.modifierDelimiter === 'string') {
     defaults.modifierDelimiter = options.modifierDelimiter
   }
-  if (options.prefix) {
+  if (typeof options.namespace === 'string') {
+    defaults.namespace = options.namespace
+  }
+  if (typeof options.namespaceDelimiter === 'string') {
+    defaults.namespaceDelimiter = options.namespaceDelimiter
+  }
+  if (typeof options.prefix === 'string') {
     defaults.prefix = options.prefix
   }
 }
@@ -23,11 +37,19 @@ export default function bem(
   {
     elementDelimiter = defaults.elementDelimiter,
     modifierDelimiter = defaults.modifierDelimiter,
+    namespace = defaults.namespace,
+    namespaceDelimiter = defaults.namespaceDelimiter,
     prefix = defaults.prefix,
   } = {},
 ) {
   return (elementOrModifiers?: string | Modifiers, modifiers?: Modifiers) => {
-    let base = `${prefix}${block}`
+    if (namespace && prefix) {
+      throw new TypeError(`prefix('${prefix}') is deprecated. Use namespace('${namespace}') instead.`)
+    }
+
+    const nsDelim = namespace ? namespaceDelimiter : ''
+    const pre = prefix || `${namespace}${nsDelim}`
+    let base = `${pre}${block}`
 
     if (!elementOrModifiers) {
       return base

test.ts

@@ -37,6 +37,42 @@ const testCases = [
       'block__element-mod1 block__element-mod2',
     ],
   },
+  {
+    description: '`namespace` option',
+    tested: () => block('block', { namespace: 'ns' }),
+    expectations: [
+      'ns-block',
+      'ns-block--mod1',
+      'ns-block--mod1 ns-block--mod2',
+      'ns-block__element',
+      'ns-block__element--mod1',
+      'ns-block__element--mod1 ns-block__element--mod2',
+    ],
+  },
+  {
+    description: '`namespaceDelimiter` option',
+    tested: () => block('block', { namespace: 'ns', namespaceDelimiter: '---' }),
+    expectations: [
+      'ns---block',
+      'ns---block--mod1',
+      'ns---block--mod1 ns---block--mod2',
+      'ns---block__element',
+      'ns---block__element--mod1',
+      'ns---block__element--mod1 ns---block__element--mod2',
+    ],
+  },
+  {
+    description: '`namespaceDelimiter` option without `namespace` option',
+    tested: () => block('block', { namespaceDelimiter: '---' }),
+    expectations: [
+      'block',
+      'block--mod1',
+      'block--mod1 block--mod2',
+      'block__element',
+      'block__element--mod1',
+      'block__element--mod1 block__element--mod2',
+    ],
+  },
   {
     description: '`prefix` option',
     tested: () => block('block', { prefix: 'pre---' }),
@@ -55,17 +91,19 @@ const testCases = [
       setup({
         elementDelimiter: '_',
         modifierDelimiter: '-',
-        prefix: 'pre---',
+        namespace: 'ns',
+        namespaceDelimiter: '---',
+        // prefix: 'pre---',
       })
       return block('block')
     },
     expectations: [
-      'pre---block',
-      'pre---block-mod1',
-      'pre---block-mod1 pre---block-mod2',
-      'pre---block_element',
-      'pre---block_element-mod1',
-      'pre---block_element-mod1 pre---block_element-mod2',
+      'ns---block',
+      'ns---block-mod1',
+      'ns---block-mod1 ns---block-mod2',
+      'ns---block_element',
+      'ns---block_element-mod1',
+      'ns---block_element-mod1 ns---block_element-mod2',
     ],
   },
 ]
@@ -104,14 +142,33 @@ testCases.forEach(({ description, tested, expectations }) => {
   })
 })
 
-describe('`setup()` additional cases', () => {
+describe('`namespace` and `prefix` at the same time', () => {
+  it('throws `TypeError`', () => {
+    const b = block('block', { namespace: 'ns', prefix: 'pre' })
+    expect(() => b()).toThrow(TypeError)
+    expect(() => b()).toThrow("prefix('pre') is deprecated. Use namespace('ns') instead.")
+  })
+})
+
+// `setup()` test must be at last
+describe('`setup()` additional case', () => {
   it('overrides options which was setup', () => {
-    const b = block('block', { elementDelimiter: ':', modifierDelimiter: '/', prefix: 'p-' })
-    expect(b('element', { mod: true })).toBe('p-block:element/mod')
+    const b = block('block', {
+      elementDelimiter: ':',
+      modifierDelimiter: '/',
+      namespace: 'n',
+      namespaceDelimiter: '=',
+    })
+    expect(b('element', { mod: true })).toBe('n=block:element/mod')
   })
 
   it('has no effect when empty options are passed', () => {
     setup({})
-    expect(block('block')('element', { mod: true })).toBe('pre---block_element-mod')
+    expect(block('block')('element', { mod: true })).toBe('ns---block_element-mod')
+  })
+
+  it('`prefix` option [deprecated]', () => {
+    setup({ prefix: 'pre:', namespace: '' })
+    expect(block('block')('element', { mod: true })).toBe('pre:block_element-mod')
   })
 })

tslint.json

@@ -4,7 +4,7 @@
   "rules": {
     "interface-over-type-literal": false,
     "object-literal-sort-keys": false,
-    "quotemark": [true, "single"],
+    "quotemark": [true, "single", "avoid-escape"],
     "semicolon": [true, "never"]
   }
 }