Split function in submodules

Author: Andrii Kirmas

src/basic.spec.tsx

@@ -0,0 +1,57 @@
+import React from "react"
+import expectToRender from "../expect-to-render"
+import type { ClassNames } from "./defs"
+import classNamingBasic from "./basic"
+import classNamesCheck from "./check"
+
+function Button({className, "classNames": { Btn }}: ClassNames<true, "Btn">) {
+  return <button {...classNamingBasic(className, { Btn })}/>
+}
+
+function Root({
+  classNames, "classNames": { App__Item, App__Footer }
+}: ClassNames<"App__Item"|"App__Footer", typeof Button>) {
+  return <>
+    <Button {...{
+      ...classNamingBasic({ App__Item }),
+      classNames
+    }}/>
+    <div
+      className={classNamingBasic<string>({App__Footer})}
+      data-class={`${classNamingBasic({App__Footer})}`}
+    />
+  </>
+}
+
+it("not css module", () => expectToRender(
+  <Root classNames={classNamesCheck()}/>,
+  [
+    '<button class="App__Item Btn"></button>',
+    '<div class="App__Footer" data-class="App__Footer"></div>'
+  ]
+))
+
+it("css module", () => expectToRender(
+  <Root classNames={{
+    App__Footer: "footer-hash",
+    App__Item: "item-hash",
+    Btn: "btn-hash"
+  }}/>,
+  [
+    '<button class="item-hash btn-hash"></button>',
+    '<div class="footer-hash" data-class="footer-hash"></div>'
+  ]
+))
+
+it("vscode renamed", () => {
+  function Root({
+    "classNames": {App: App__Container}
+  }: ClassNames<"App">) {
+    return <div {...classNamingBasic({App: App__Container})}/>
+  }
+
+  expectToRender(
+    <Root classNames={classNamesCheck()} />,
+    '<div class="App"></div>'
+  )
+})

src/basic.ts

@@ -0,0 +1,91 @@
+/** TBD 
+ * 1. <div {...{false, undefined, null}}/> falls attributes
+*/
+export type { ClassNames } from "./defs"
+import type { ClassNamesMap, ClassNamed } from "./defs"
+
+const {
+  keys: $keys,
+  defineProperty: $defineProperty,
+  assign: $assign
+} = Object
+, classNameKey = "className" as const
+
+export default classNamingBasic
+
+/**
+ * Makes `className` string from imported CSS
+ * @example <div className={classNaming<string>({ClassName})} />
+ * @example <div {...classNaming({ClassName})} />
+ */
+function classNamingBasic<Return, ClassKeys extends string = string>(
+  classNames: ClassNamesMap<ClassKeys>
+): Return extends string ? string : ClassNamed
+
+/**
+ * Makes `className` string from imported CSS
+ * @example <div className={classNaming<string>({ClassName})} />
+ * @example <div {...classNaming({ClassName})} />
+ */
+function classNamingBasic<Return, ClassKeys extends string = string>(
+  propagatedClassName: undefined|string,
+  classNames: ClassNamesMap<ClassKeys>
+): Return extends string ? string : ClassNamed
+
+function classNamingBasic(
+  arg0: undefined|string|ClassNamesMap<string>,
+  arg1: undefined|ClassNamesMap<string> = undefined
+): ClassNamed {
+  const classNames = typeof arg0 === "object" ? arg0 : arg1
+  , className = typeof arg0 === "object" ? undefined : arg0
+
+  return _classNaming(classNames!, className, {})
+}
+
+function _classNaming<T extends Partial<ClassNamed>>(
+  classNames: ClassNamesMap<string>,
+  className: undefined|string,
+  destination: T
+): T & ClassNamed {
+  const keys = $keys(classNames)
+  , {length} = keys
+
+  for (let i = length; i--;) {
+    const key = keys[i]
+    , value = classNames[key]
+
+    if (typeof value === "string")
+      keys[i] = value
+  }
+
+  const classString = `${
+    !className
+    ? ""
+    : `${className} `
+  }${
+    keys
+    .join(" ")
+  }`
+
+  // TODO For propagation
+  // $defineProperty(
+  //   classNames,
+  //   "toString",
+  //   {
+  //     value: undefined
+  //   }
+  // )
+  // $assign(destination, {classNames})
+
+  $assign(destination, {[classNameKey]: classString})
+
+  $defineProperty(
+    destination,
+    "toString",
+    {
+      value: () => classString
+    }
+  )
+
+  return destination as T & ClassNamed
+}

src/check.spec.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import classNamesCheck from "./check"
+import type { ClassNames, ClassNamesMap } from "./defs"
+
+function Root(_: ClassNames<"fc1"|"fc2">) {
+  return null
+}
+
+it("dummy", () => {
+  <Root classNames={classNamesCheck()}/>;
+
+  //@ts-expect-error Property 'fc2' is missing
+  <Root classNames={classNamesCheck<"fc1">()}/>;
+  <Root classNames={classNamesCheck<"fc1"|"fc2"|"etc">()}/>;
+
+  expect(true).toBe(true)
+})
+
+it("check that all are used", () => {
+  const classNames = {} as ClassNamesMap<"fc1"|"fc2"|"fc3">;
+  //@ts-expect-error is missing the following properties
+  <Root classNames={
+    classNamesCheck<"">(classNames)
+  } />;
+
+  // TypeScript doesn't check redundant props
+  <Root classNames={{} as ClassNamesMap<"fc1"|"fc2">} />;
+  <Root classNames={classNames} />;
+  <Root classNames={classNames as ClassNames<typeof Root>["classNames"]} />;
+  
+  //@ts-expect-error //TODO TBD redundant props
+  <Root classNames={classNamesCheck<typeof Root>(classNames)} />;
+  //@ts-expect-error //TODO TBD not error
+  <Root3 classNames={classNamesCheck<typeof Root3>(classNames)} />;
+
+  function Root3(_: ClassNames<"fc1"|"fc2"|"fc3">) {
+    return null
+  }
+
+  expect(true).toBe(true)
+})  

src/check.ts

@@ -0,0 +1,17 @@
+export type { ClassNames } from "./defs"
+import { EMPTY_OBJECT } from "./consts"
+import type { ClassNamesMap, ReactRelated } from "./defs"
+
+export default classNamesCheck
+
+function classNamesCheck<
+  K extends string | ReactRelated = string,
+  T extends ClassNamesMap<string> = never
+>(
+  classNames = EMPTY_OBJECT as [T] extends [never] ? ClassNamesMap<string> : T
+) {
+  
+  return classNames as ClassNamesMap<
+    Extract<K, string>
+  >
+}