From c1672289ba3d2e0aa29ef3bcdf32d547fc5deb8f Mon Sep 17 00:00:00 2001 From: Andrii Kirmas Date: Fri, 12 Mar 2021 19:46:54 +0300 Subject: [PATCH] #35 Change global interface usage to be more common --- .gitignore | 1 + README.md | 2 +- __recipes__/global.d.ts | 9 +++++++++ __recipes__/index.test.ts | 23 +++++++---------------- __recipes__/tsconfig.json | 3 ++- __sandbox__/bem.test.ts | 1 - package.json | 7 ++++--- src/bem.types.ts | 1 - src/global.d.ts | 10 ++++++++++ src/index.ts | 11 ++--------- tsconfig.json | 9 ++++++--- 11 files changed, 42 insertions(+), 35 deletions(-) create mode 100644 __recipes__/global.d.ts create mode 100644 src/global.d.ts diff --git a/.gitignore b/.gitignore index a8c7599..fae2b86 100644 --- a/.gitignore +++ b/.gitignore @@ -80,6 +80,7 @@ typings/ # Nuxt.js build / generate output .nuxt dist +types # Gatsby files .cache/ diff --git a/README.md b/README.md index b617aa0..10d24dc 100644 --- a/README.md +++ b/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) diff --git a/__recipes__/global.d.ts b/__recipes__/global.d.ts new file mode 100644 index 0000000..a53c78c --- /dev/null +++ b/__recipes__/global.d.ts @@ -0,0 +1,9 @@ +/// + +declare namespace ReactClassNaming { + interface BemOptions { + elementDelimiter: "_"; + modDelimiter: "-"; + } +} + diff --git a/__recipes__/index.test.ts b/__recipes__/index.test.ts index dc14aaf..30bff15 100644 --- a/__recipes__/index.test.ts +++ b/__recipes__/index.test.ts @@ -1,15 +1,5 @@ -//-/ 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: "_", @@ -17,18 +7,19 @@ setOptions({ }) 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 & 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" }) }) \ No newline at end of file diff --git a/__recipes__/tsconfig.json b/__recipes__/tsconfig.json index 2713388..f991d6c 100644 --- a/__recipes__/tsconfig.json +++ b/__recipes__/tsconfig.json @@ -1,7 +1,8 @@ { "compilerOptions": { "types": [ - "jest" + "jest", + "react-classnaming" ] }, "exclude": [ diff --git a/__sandbox__/bem.test.ts b/__sandbox__/bem.test.ts index 2ef70f8..50f931b 100644 --- a/__sandbox__/bem.test.ts +++ b/__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", () => { diff --git a/package.json b/package.json index 9f3fb59..fb3a590 100644 --- a/package.json +++ b/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", diff --git a/src/bem.types.ts b/src/bem.types.ts index 7bf9c30..79e2c33 100644 --- a/src/bem.types.ts +++ b/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, diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..4de3a7e --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,10 @@ +/** namespace ReactClassNaming */ +declare namespace ReactClassNaming { + /** interface BemOptions */ + interface BemOptions { + $default: { + elementDelimiter: "__", + modDelimiter: "--" + } + } +} diff --git a/src/index.ts b/src/index.ts index 1ee97a8..f3f7579 100644 --- a/src/index.ts +++ b/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: "--" - } - } -} diff --git a/tsconfig.json b/tsconfig.json index 85978cb..3d93371 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,7 @@ "display": "CLI", "compilerOptions": { "baseUrl": ".", - "target": "es5", + "target": "es5", "module": "CommonJS", "isolatedModules": true, "moduleResolution": "node", @@ -46,11 +46,13 @@ "pretty": true, + "jsx": "react", + + "declarationDir": "types", "noEmit": true, "sourceMap": false, "outDir": "dist", - "declaration": true, - "jsx": "react" + "declaration": true }, "include": [ "**/*.ts", @@ -58,6 +60,7 @@ ], "exclude": [ "dist", + "types", "__recipes__" ] } \ No newline at end of file