#35 Change global interface usage to be more common

Author: Andrii Kirmas

.gitignore

@@ -80,6 +80,7 @@ typings/
 # Nuxt.js build / generate output
 .nuxt
 dist
+types
 
 # Gatsby files
 .cache/

README.md

@@ -241,7 +241,7 @@ Default options BEM naming:
 - Modifier's and value's separator is a double hyphen `"--"`
 - Element's separator is a double underscore `"__"`
 
-It is required to change this options twice, both on JS (`setOpts(...)`) and TS `namespace ReactClassNaming { interface BemOptions {...} }`) levels
+It is required to change this options twice, both on JS (`setOpts(...)`) and TS `namespace ReactClassNaming { interface BemOptions {...} }`) levels. See [./\__recipes__/](https://github.com/askirmas/react-classnaming/tree/main/__recipes__/)
 
 ### function [`classNamesMap`](https://github.com/askirmas/react-classnaming/projects/5)
 

__recipes__/global.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react-classnaming" />
+
+declare namespace ReactClassNaming {
+  interface BemOptions {
+    elementDelimiter: "_";
+    modDelimiter: "-";
+  }
+}
+

__recipes__/index.test.ts

@@ -1,34 +1,25 @@
-//-/ <reference path="node_modules/react-classnaming/dist" />
 import {classBeming, ClassNamed, ClassNamesProperty, setOptions} from "react-classnaming"
-import type {ClassHash, ReactClassNaming} from "react-classnaming"
-
-declare module "react-classnaming" {
-  namespace ReactClassNaming {
-    interface BemOptions {
-      elementDelimiter: "_";
-      modDelimiter: "-";
-    }
-  }
-}
+import type {ClassHash} from "react-classnaming"
 
 setOptions({
   elementDelimiter: "_",
   modDelimiter: "-",
 })
 
 type CssModule = Record<
-  |"block-m"
-  |"block_el"|"block_el-m-X"|"block_el-m-Y",
+  |"block1-m"
+  |"block2_el-m-X"|"block2_el-m-Y",
   ClassHash
 >
 
 it("go", () => {
   const bem = classBeming<ClassNamesProperty<CssModule> & ClassNamed>()
   , classNamed = bem(true, {
-    block: "m",
-    block_el: {"m": "X"}
+    block1: "m",
+    block2: true,
+    block2_el: {"m": "X"}
   })
   expect(classNamed).toStrictEqual({
-    className: "block block-m block_el block_el-m-X"
+    className: "block1 block1-m block2 block2_el block2_el-m-X"
   })
 })

__recipes__/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     "types": [
-      "jest"
+      "jest",
+      "react-classnaming"
     ]
   },
   "exclude": [

__sandbox__/bem.test.ts

@@ -1,5 +1,4 @@
 import type { Ever0, Extends, PartDeep } from "src/ts-swiss.types"
-import type {ReactClassNaming} from "../src"
 import { CssModule } from "../src/definitions.types"
 
 it("tree2classes", () => {

package.json

@@ -3,6 +3,7 @@
   "version": "0.15.0",
   "description": "Tools to establish CSS classes as an explicit abstraction layer and to handle it as an interface between React and CSSStyleDeclaration",
   "main": "dist",
+  "types": "types",
   "scripts": {
     "dev": "npm run jest -- --collectCoverageFrom=[] --bail=false --onlyFailures --watch",
     "test": "npm run jest --",
@@ -14,8 +15,8 @@
     "-prerelease": "./prerelease.sh",
     "postrelease": "./postrelease.sh",
     "compile": "tsc --project tsconfig.compile.json",
-    "precompile": "rm -rf dist",
-    "postcompile": "mkdir -p dist/types && find src -name '*.d.ts' -exec cp {} dist \\;",
+    "precompile": "rm -rf dist types",
+    "postcompile": "find src -name '*.d.ts' -exec cp {} types \\;",
     "spec": "cd __recipes__ && npm run test --",
     "setup": "git config include.path ../.gitconfig && git-hooks-wrapper init",
     "jest": "jest --runInBand"
@@ -48,7 +49,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@types/react": ">=15"
+    "@types/react": "*"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.11",

src/bem.types.ts

@@ -9,7 +9,6 @@ import type {
   Ever
 } from "./ts-swiss.types"
 import type { ClassNamed } from "./main.types"
-import type {ReactClassNaming} from "."
 
 export type ClassBeming<
   ClassNames extends CssModule,

src/global.d.ts

@@ -0,0 +1,10 @@
+/**  namespace ReactClassNaming */
+declare namespace ReactClassNaming {
+  /** interface BemOptions */
+  interface BemOptions {
+    $default: {
+      elementDelimiter: "__",
+      modDelimiter: "--"
+    } 
+  }  
+}

src/index.ts

@@ -1,3 +1,5 @@
+/** Comment */ 
+
 import { classNaming } from "./naming"
 
 export type {
@@ -15,12 +17,3 @@ export { classNamesCheck } from "./check"
 export { classNamesMap } from "./map"
 export { classBeming } from "./bem"
 export { setOptions } from "./bem.core"
-
-export declare namespace ReactClassNaming {
-  export interface BemOptions {
-    $default: {
-      elementDelimiter: "__",
-      modDelimiter: "--"
-    } 
-  }  
-}