#5 TBD chained toggler. Requires another lambda or options

Author: Andrii Kirmas

src/basic.ts

@@ -44,7 +44,7 @@ function _classNaming(
   const className = joinWithLead(propagate, dehash(classes))  
   , host: ClassNamingCall = classes => _classNaming(classes, className)
 
-  return wrapper(className, undefined, host)
+  return wrapper(host, className)
 }
 
 type ClassNamingChain = ClassNamingCall & {

src/core.ts

@@ -14,13 +14,11 @@ export {
 }
 
 function wrapper<T>(
-  className: Parameters<typeof joinWithLead>[0],
-  classKeys: Parameters<typeof joinWithLead>[1],
-  destination: T
+  destination: T,
+  className: undefined | string
 ) {
   //@ts-expect-error
-  destination[classNameKey]
-  = joinWithLead(className, classKeys)
+  destination[classNameKey] = className
 
   return stringifyClassNamed(destination as T & ClassNamed)
 }
@@ -59,7 +57,7 @@ function truthyKeys<T>(source: T) {
 }
 
 //TODO Consider returning `undefined` on empty string
-function joinWithLead(value: Falsy|ClassValue, arr: undefined| readonly string[]) : string {
+function joinWithLead(value: Falsy|ClassValue, arr: undefined | readonly string[]) : string {
   const str1 = value || ""
   if (!(arr && arr.length))
     return str1

src/ctx.test.ts

@@ -9,92 +9,133 @@ describe(classNamingCtx.name, () => {
 
   describe("classnames", () => {
     const classes = classNamingCtx({classnames})
-    it("map", () => expect(classes(
-      {
+    it("map", () => expect({
+      ...classes({
         class1: true,
         class2: false,
         class3: "",
         //@ts-expect-error Truthy not allowed by TS
         class4: 1,
-      }
-    )).toStrictEqual({
+      })
+    }).toStrictEqual({
       className: "class1 hash4"
     }))
 
-    it("array", () => expect(classes(
-      true && "class1",
-      false && "class2",
-      "" && "class3",
-      1 && "class4"
-    )).toStrictEqual({
+    it("array", () => expect({
+      ...classes(
+        true && "class1",
+        false && "class2",
+        "" && "class3",
+        1 && "class4"
+      )
+    }).toStrictEqual({
       className: "class1 hash4"
     }))
 
-    it("map + array", () => expect(classes(
-      {
-        class1: false,
-        class4: true
-      },
-      "class1",
-      false && "class4"
-    )).toStrictEqual({
+    it("map + array", () => expect({
+      ...classes(
+        {
+          class1: false,
+          class4: true
+        },
+        "class1",
+        false && "class4"
+      )
+    }).toStrictEqual({
       className: "hash4 class1"
     }))
 
-    it("redundant in map", () => expect(classes({
-      //@ts-expect-error Object literal may only specify known properties, and 'etc' does not exist 
-      etc: true
-    })).toStrictEqual({
+    it("redundant in map", () => expect({
+      ...classes({
+        //@ts-expect-error Object literal may only specify known properties, and 'etc' does not exist 
+        etc: true
+      })
+    }).toStrictEqual({
       className: "etc"
     }))
 
-    it("redundant in array", () => expect(classes(
-      //@ts-expect-error Argument of type '"etc"' is not assignable
-      "etc"
-    )).toStrictEqual({
+    it("redundant in array", () => expect({
+      ...classes(
+        //@ts-expect-error Argument of type '"etc"' is not assignable
+        "etc"
+      )
+    }).toStrictEqual({
       className: "etc"
     }))
 
     //TODO Raise TS error
-    it("propagate absent className", () => expect(classes(
-      true,
-      {class1: true},
-      "class4"
-    )).toStrictEqual({
+    it("propagate absent className", () => expect({
+      ...classes(
+        true,
+        {class1: true},
+        "class4"
+      )
+    }).toStrictEqual({
       className: "class1 hash4"
     }))
   })
 
   describe("className + classnames", () => {
     const classes = classNamingCtx({className, classnames})
-    it("only propagated", () => expect(classes(
-      true
-    )).toStrictEqual({
-      className
-    }))
+    it("only propagated", () => expect({
+      ...classes(
+        true
+      )
+    }).toStrictEqual({
+        className
+      }))
 
-    it("without propagation", () => expect(classes(
-      "class1",
-      "class4"
-    )).toStrictEqual({
+    it("without propagation", () => expect({
+      ...classes(
+        "class1",
+        "class4"
+      )
+    }).toStrictEqual({
       className: "class1 hash4"
     }))
 
-    it("both", () => expect(classes(
-      true,
-      "class1",
-      "class4"
-    )).toStrictEqual({ 
+    it("both", () => expect({
+      ...classes(
+        true,
+        "class1",
+        "class4"
+      )
+    }).toStrictEqual({ 
       className: "App class1 hash4"
     }))
   })
 
-  it("only propagate classnames", () => expect(classNamingCtx(
-    {classnames},
-    {withClassNames: true}
-  )()).toStrictEqual({
+  it("only propagate classnames", () => expect({
+    ...classNamingCtx(
+      {classnames},
+      {withClassNames: true}
+    )(
+    )
+  }).toStrictEqual({
     className: "",
     classnames
   }))
 
+  describe("chained", () => {
+    it("Cur", () => expect({
+      //@ts-expect-error
+      ...classNamingCtx({classnames})(
+        {class1: true}
+      )({class2: true}
+      )({class1: false}
+      )({class3: true})
+    }).not.toStrictEqual({
+      className: "class3"
+    }))
+    it("TBD", () => expect({
+      //@ts-expect-error
+      ...classNamingCtx({classnames})(
+        {class1: true}
+      )({class2: true}
+      )({class1: false}
+      )({class3: true})
+    }).not.toStrictEqual({
+      className: "class2 class3"
+    }))
+  })
 })

src/ctx.ts

@@ -1,7 +1,8 @@
 import type { Falsy, ToggleMap, ClassNamer, ClassNamed, ClassNamesMap, EmptyObject } from "./defs"
-import {dehash, truthyKeys, wrapper} from "./core"
+import {dehash, joinWithLead, truthyKeys, wrapper} from "./core"
 import { emptize } from "./utils"
 
+
 emptize(classNamer)
 
 //TODO no `className` - no first `true`
@@ -45,7 +46,7 @@ function classNamingCtx<
   {classnames, className}: ClassNamer<ClassKeys>,
   options?: ClassNamerOptions<withClassNames>
 ) {
-  return classNamer.bind({classnames, className, ...options}) as tClassNaming<ClassKeys, withClassNames>
+  return classNamer.bind({classnames, className, options}) as tClassNaming<ClassKeys, withClassNames>
 }
 
 type ClassNamerOptions<
@@ -59,17 +60,20 @@ function classNamer<
   ClassKeys extends string,
   withClassNames extends boolean|undefined
 >(
-  this: Partial<ClassNamer<ClassKeys> & ClassNamerOptions<withClassNames>>,
+  this: Partial<ClassNamer<ClassKeys> & {options: ClassNamerOptions<withClassNames>}>,
   arg0?: true | ToggleMap<ClassKeys> | ClassKeys,
   arg1?: ToggleMap<ClassKeys> | ClassKeys,
   ...args: (ClassKeys | Falsy)[]
 ): ClassNamed & Partial<Pick<typeof this, "classnames">> {
   const {
     className: propagated,
     classnames,
+    options
+  } = this
+  , {
     withClassNames,
     // withSelf
-  } = this
+  } = options ?? {}
   , withPropagation = arg0 === true
   , allowed: ClassKeys[] = truthyKeys(arg0 === true ? false : arg0)
   .concat(truthyKeys(arg1))
@@ -83,10 +87,16 @@ function classNamer<
   emptize(classnames)
 
   classnames && dehash(classnames, allowed)
-    
+  
+  const className = joinWithLead(withPropagation && propagated, allowed)
+  , host = classNamer.bind({classnames, className, options})
+
+  withClassNames && (
+    //@ts-expect-error
+    host["classnames"] = classnames
+  )
   return wrapper(
-    withPropagation && propagated,
-    allowed,
-    !withClassNames ? {} : {classnames}
+    host,
+    className,
   )
 }   

src/versus-classnames.test.ts

@@ -40,12 +40,12 @@ it("css module", () => expect({
     // No error on redundant CSS-class
     "class1", "class3"
   )
-}).toStrictEqual(
-  classNamingCtx({classnames: module_css})(
+}).toStrictEqual({
+  ...classNamingCtx({classnames: module_css})(
     "class1",
     //@ts-expect-error Argument of type '"class3"' is not assignable to parameter
     "class3"
   )
-))
+}))
 
 it.todo("Does `classnames` have chainable interface?")