Tolerate empty classNames

Author: Andrii Kirmas

src/ctx.spec.tsx

@@ -3,31 +3,49 @@ import { classNamesCheck, classNamingCtx } from "."
 import expectToRender from "../expect-to-render"
 import { ClassNames } from "./defs"
 
-describe(classNamingCtx.name, () => {
-  it("demo", () => {
-    function Component(props: ClassNames<true, "class1"|"class2">) {
-      const classes = classNamingCtx(props)
+function Component(props: ClassNames<true, "class1"|"class2">) {
+  const classes = classNamingCtx(props)
+  return <>
+    <div {...classes(true, {class1: true, class2: false})}/>
+    <div {...classes("class2")}/>
+  </>
+}
 
-      return <>
-        <div {...classes(true, {class1: true, class2: false})}/>
-        <div {...classes("class2")}/>
-      </>
-    }
+function App({classNames, className}: ClassNames<true, "App__Item", typeof Component>) {
+  return <Component {...{
+    ...classNamingCtx({
+      classNames, className
+    })(
+      true, "App__Item"
+    ),
+    classNames
+  }}/>
+}
 
-    function App({classNames, className}: ClassNames<true, "App__Item", typeof Component>) {
-      const classes = classNamingCtx({classNames, className})
+describe(classNamingCtx.name, () => {
+  it("demo", () => expectToRender(
+    <App className="MyApp" classNames={classNamesCheck()} />,
+    [
+      '<div class="MyApp App__Item class1"></div>',
+      '<div class="class2"></div>'
+    ]
+  ))
 
-      return <>
-        <Component {...classes("App__Item")} {...{classNames}}/>
-      </>
-    }
+  it("forget className", () => expectToRender(
+    //@ts-expect-error Property 'className' is missing
+    <App classNames={classNamesCheck()}/>,
+    [
+      '<div class="App__Item class1"></div>',
+      '<div class="class2"></div>'
+    ]  
+  ))
+  it("forget classNames", () => expectToRender(
+    //@ts-expect-error Property 'classNames' is missing
+    <App className={"MyApp"}/>,
+    [
+      '<div class="MyApp App__Item class1"></div>',
+      '<div class="class2"></div>'
+    ]  
+  ))
 
-    expectToRender(
-      <App className="MyApp" classNames={classNamesCheck()} />,
-      [
-        '<div class="App__Item class1"></div>',
-        '<div class="class2"></div>'
-      ]
-    )
-  })
 })

src/ctx.ts

@@ -34,8 +34,6 @@ function classNamingCtx<ClassKeys extends string/*, withClassNames extends boole
   {classNames, className}: ClassNamer<ClassKeys>,
   options?: ClassNamerOptions//<withClassNames>
 ): tClassNaming<ClassKeys> {
-  emptize(classNames)
-
   return classNamer.bind({classNames, className, ...options}) as tClassNaming<ClassKeys>
 }
 
@@ -49,7 +47,7 @@ type ClassNamerOptions<
 }>
 
 function classNamer<ClassKeys extends string>(
-  this: ClassNamer<ClassKeys> & ClassNamerOptions,
+  this: Partial<ClassNamer<ClassKeys> & ClassNamerOptions>,
   arg0: true | ToggleMap<ClassKeys> | ClassKeys,
   arg1?: ToggleMap<ClassKeys> | ClassKeys,
   ...args: (ClassKeys | Falsy)[]
@@ -82,7 +80,7 @@ function classNamer<ClassKeys extends string>(
 
   for (let i = allowed.length; i--;) {
     const key = allowed[i]
-    , hash: ClassValue = classNames[key]
+    , hash: ClassValue = classNames?.[key]
 
     if (hash !== undefined)
       //@ts-expect-error

src/utils.ts

@@ -39,8 +39,11 @@ function classNamedToString(this: {className: string}) {
   return this.className
 }
 
-function emptize(source: Record<string, any>) {
-  if (!source.hasOwnProperty(stringifyProperty))
+function emptize(source: undefined|Record<string, any>) {
+  if (
+    source
+    && !source.hasOwnProperty(stringifyProperty)
+  )
     $defineProperty(source, stringifyProperty, {value: emptyLambda})
   return source
 }