feat(merge): 重构内部运行时工厂

Author: sonofmagic

.changeset/heavy-yaks-merge.md

@@ -0,0 +1,5 @@
+---
+"@weapp-tailwindcss/merge": minor
+---
+
+重构内部运行时工厂，统一 escape 处理并新增 tailwind-merge 版本元数据导出，提升不同 Tailwind CSS 版本下的适配能力。

packages/merge/src/core/create-runtime.ts

@@ -0,0 +1,74 @@
+import type { ClassValue } from 'clsx'
+import type {
+  CreateOptions,
+  EscapeFn,
+  TailwindMergeFactory,
+  TailwindMergeLibraryFn,
+  TailwindMergeRuntime,
+  TailwindMergeVersion,
+} from '../types'
+import { clsx } from 'clsx'
+import { resolveEscape } from './escape'
+
+type TailwindMergeFactoryFn = (...args: any[]) => TailwindMergeLibraryFn
+
+interface CreateRuntimeFactoryOptions<
+  TTwMerge extends TailwindMergeLibraryFn,
+  TTwJoin extends TailwindMergeLibraryFn,
+  TExtendFactory extends TailwindMergeFactoryFn,
+  TCreateFactory extends TailwindMergeFactoryFn,
+> {
+  version: TailwindMergeVersion
+  twMerge: TTwMerge
+  twJoin: TTwJoin
+  extendTailwindMerge: TExtendFactory
+  createTailwindMerge: TCreateFactory
+}
+
+function wrapClassAggregator(fn: TailwindMergeLibraryFn, escapeFn: EscapeFn): TailwindMergeRuntime {
+  return (...inputs: ClassValue[]) => {
+    return escapeFn(fn(clsx(...inputs)))
+  }
+}
+
+function wrapFactory<TFactory extends TailwindMergeFactoryFn>(
+  factory: TFactory,
+  escapeFn: EscapeFn,
+): TailwindMergeFactory<TFactory> {
+  return (...args: Parameters<TFactory>) => {
+    const runtime = factory(...args)
+    return wrapClassAggregator(runtime, escapeFn)
+  }
+}
+
+export function createRuntimeFactory<
+  TTwMerge extends TailwindMergeLibraryFn,
+  TTwJoin extends TailwindMergeLibraryFn,
+  TExtendFactory extends TailwindMergeFactoryFn,
+  TCreateFactory extends TailwindMergeFactoryFn,
+>(options: CreateRuntimeFactoryOptions<TTwMerge, TTwJoin, TExtendFactory, TCreateFactory>) {
+  const {
+    version,
+    twMerge: _twMerge,
+    twJoin: _twJoin,
+    extendTailwindMerge: _extendTailwindMerge,
+    createTailwindMerge: _createTailwindMerge,
+  } = options
+
+  return function createRuntime(createOptions?: CreateOptions) {
+    const escapeFn = resolveEscape(createOptions)
+
+    const twMerge: TailwindMergeRuntime = wrapClassAggregator(_twMerge, escapeFn)
+    const twJoin: TailwindMergeRuntime = wrapClassAggregator(_twJoin, escapeFn)
+    const extendTailwindMerge = wrapFactory(_extendTailwindMerge, escapeFn)
+    const createTailwindMerge = wrapFactory(_createTailwindMerge, escapeFn)
+
+    return {
+      version,
+      twMerge,
+      twJoin,
+      extendTailwindMerge,
+      createTailwindMerge,
+    }
+  }
+}

packages/merge/src/core/escape.ts

@@ -0,0 +1,16 @@
+import type { CreateOptions, EscapeFn } from '../types'
+import { escape } from 'weapp-tailwindcss/escape'
+
+const noop = (value: string) => value
+
+export function resolveEscape(options?: CreateOptions): EscapeFn {
+  if (options?.disableEscape) {
+    return noop
+  }
+
+  return options?.escapeFn ?? escape
+}
+
+export {
+  noop,
+}

packages/merge/src/cva.ts

@@ -1,16 +1,14 @@
 import type { ClassValue, Config, Props } from './cva/index'
 import type { CreateOptions } from './types'
 import { cva as _cva } from 'class-variance-authority'
-import { escape } from 'weapp-tailwindcss/escape'
-import { noop } from './utils'
+import { resolveEscape } from './core/escape'
 
 function create(options?: CreateOptions) {
-  const e = options?.disableEscape ? noop : escape
+  const escapeFn = resolveEscape(options)
   function cva<T>(base?: ClassValue, config?: Config<T>): (props?: Props<T> | undefined) => string {
-    // @ts-ignore
-    const fn = _cva(base, config)
+    const fn = _cva(base, config) as (...args: any[]) => string
     return (...props) => {
-      return e(fn(...props))
+      return escapeFn(fn(...props))
     }
   }
   return {

packages/merge/src/types.ts

@@ -1,4 +1,17 @@
+import type { ClassValue } from 'clsx'
+
+export type EscapeFn = (value: string) => string
+
 export interface CreateOptions {
   disableEscape?: boolean
-  escapeFn?: (value: string) => string
+  escapeFn?: EscapeFn
 }
+
+export type TailwindMergeLibraryFn = (...inputs: any[]) => string
+
+export type TailwindMergeRuntime = (...inputs: ClassValue[]) => string
+
+export type TailwindMergeFactory<TFactory extends (...args: any[]) => TailwindMergeLibraryFn>
+  = (...args: Parameters<TFactory>) => TailwindMergeRuntime
+
+export type TailwindMergeVersion = 2 | 3

packages/merge/src/utils.ts

@@ -8,24 +8,31 @@ import {
   mergeConfigs,
 } from 'tailwind-merge-v2'
 import { weappTwIgnore } from 'weapp-tailwindcss/escape'
-import { createFactory } from './utils'
+import { createRuntimeFactory } from './core/create-runtime'
 
-const create = createFactory({
+const create = createRuntimeFactory({
   createTailwindMerge: _createTailwindMerge,
   extendTailwindMerge: _extendTailwindMerge,
   twJoin: _twJoin,
   twMerge: _twMerge,
   version: 2,
 })
 
-const { twMerge, twJoin, extendTailwindMerge, createTailwindMerge } = create()
+const {
+  version: tailwindMergeVersion,
+  twMerge,
+  twJoin,
+  extendTailwindMerge,
+  createTailwindMerge,
+} = create()
 
 export {
   create,
   createTailwindMerge,
   extendTailwindMerge,
   getDefaultConfig,
   mergeConfigs,
+  tailwindMergeVersion,
   twJoin,
   twMerge,
   weappTwIgnore,

packages/merge/src/v3.ts

@@ -8,24 +8,31 @@ import {
   mergeConfigs,
 } from 'tailwind-merge'
 import { weappTwIgnore } from 'weapp-tailwindcss/escape'
-import { createFactory } from './utils'
+import { createRuntimeFactory } from './core/create-runtime'
 
-const create = createFactory({
+const create = createRuntimeFactory({
   createTailwindMerge: _createTailwindMerge,
   extendTailwindMerge: _extendTailwindMerge,
   twJoin: _twJoin,
   twMerge: _twMerge,
   version: 3,
 })
 
-const { twMerge, twJoin, extendTailwindMerge, createTailwindMerge } = create()
+const {
+  version: tailwindMergeVersion,
+  twMerge,
+  twJoin,
+  extendTailwindMerge,
+  createTailwindMerge,
+} = create()
 
 export {
   create,
   createTailwindMerge,
   extendTailwindMerge,
   getDefaultConfig,
   mergeConfigs,
+  tailwindMergeVersion,
   twJoin,
   twMerge,
   weappTwIgnore,