@antsoo-lib/components 0.1.2 → 0.1.4

package/src/_util/createRef.ts

@@ -0,0 +1,31 @@
+export interface RefObject extends Function {
+  current?: any
+}
+
+function createRef(): any {
+  const func: RefObject = (node: any) => {
+    func.current = node
+  }
+  return func
+}
+
+export function fillRef<T>(ref, node: T) {
+  if (typeof ref === 'function') {
+    ref(node)
+  } else if (typeof ref === 'object' && ref && 'current' in ref) {
+    ;(ref as any).current = node
+  }
+}
+
+/**
+ * Merge refs into one ref function to support ref passing.
+ */
+export function composeRef<T>(...refs: any[]) {
+  return (node: T) => {
+    refs.forEach((ref) => {
+      fillRef(ref, node)
+    })
+  }
+}
+
+export default createRef

package/src/_util/cssinjs/Cache.ts

@@ -0,0 +1,28 @@
+export type KeyType = string | number
+type ValueType = [number, any] // [times, realValue]
+const SPLIT = '%'
+class Entity {
+  instanceId: string
+  constructor(instanceId: string) {
+    this.instanceId = instanceId
+  }
+  cache = new Map<string, ValueType>()
+
+  get(keys: KeyType[] | string): ValueType | null {
+    return this.cache.get(Array.isArray(keys) ? keys.join(SPLIT) : keys) || null
+  }
+
+  update(keys: KeyType[] | string, valueFn: (origin: ValueType | null) => ValueType | null) {
+    const path = Array.isArray(keys) ? keys.join(SPLIT) : keys
+    const prevValue = this.cache.get(path)!
+    const nextValue = valueFn(prevValue)
+
+    if (nextValue === null) {
+      this.cache.delete(path)
+    } else {
+      this.cache.set(path, nextValue)
+    }
+  }
+}
+
+export default Entity

package/src/_util/cssinjs/Keyframes.ts

@@ -0,0 +1,19 @@
+import type { CSSInterpolation } from './hooks/useStyleRegister'
+
+class Keyframe {
+  private name: string
+  style: CSSInterpolation
+
+  constructor(name: string, style: CSSInterpolation) {
+    this.name = name
+    this.style = style
+  }
+
+  getName(hashId = ''): string {
+    return hashId ? `${hashId}-${this.name}` : this.name
+  }
+
+  _keyframe = true
+}
+
+export default Keyframe

package/src/_util/cssinjs/StyleContext.tsx

@@ -0,0 +1,187 @@
+import type { ExtractPropTypes, InjectionKey, Ref, ShallowRef } from 'vue'
+import { defineComponent, getCurrentInstance, inject, provide, shallowRef, unref, watch } from 'vue'
+
+import { arrayType, booleanType, objectType, someType, stringType, withInstall } from '../type'
+import CacheEntity from './Cache'
+import type { Linter } from './linters/interface'
+import type { Transformer } from './transformers/interface'
+
+export const ATTR_TOKEN = 'data-token-hash'
+export const ATTR_MARK = 'data-css-hash'
+export const ATTR_CACHE_PATH = 'data-cache-path'
+
+// Mark css-in-js instance in style element
+export const CSS_IN_JS_INSTANCE = '__cssinjs_instance__'
+
+export function createCache() {
+  const cssinjsInstanceId = Math.random().toString(12).slice(2)
+
+  // Tricky SSR: Move all inline style to the head.
+  // PS: We do not recommend tricky mode.
+  if (typeof document !== 'undefined' && document.head && document.body) {
+    const styles = document.body.querySelectorAll(`style[${ATTR_MARK}]`) || []
+    const { firstChild } = document.head
+
+    Array.from(styles).forEach((style) => {
+      ;(style as any)[CSS_IN_JS_INSTANCE] = (style as any)[CSS_IN_JS_INSTANCE] || cssinjsInstanceId
+
+      // Not force move if no head
+      // Not force move if no head
+      if ((style as any)[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
+        document.head.insertBefore(style, firstChild)
+      }
+    })
+
+    // Deduplicate of moved styles
+    const styleHash: Record<string, boolean> = {}
+    Array.from(document.querySelectorAll(`style[${ATTR_MARK}]`)).forEach((style) => {
+      const hash = style.getAttribute(ATTR_MARK)!
+      if (styleHash[hash]) {
+        if ((style as any)[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
+          style.parentNode?.removeChild(style)
+        }
+      } else {
+        styleHash[hash] = true
+      }
+    })
+  }
+
+  return new CacheEntity(cssinjsInstanceId)
+}
+
+export type HashPriority = 'low' | 'high'
+
+export interface StyleContextProps {
+  autoClear?: boolean
+  mock?: 'server' | 'client'
+  /**
+   * Only set when you need ssr to extract style on you own.
+   * If not provided, it will auto create <style /> on the end of Provider in server side.
+   */
+  cache: CacheEntity
+  /** Tell children that this context is default generated context */
+  defaultCache: boolean
+  /** Use `:where` selector to reduce hashId css selector priority */
+  hashPriority?: HashPriority
+  /** Tell cssinjs where to inject style in */
+  container?: Element | ShadowRoot
+  /** Component wil render inline  `<style />` for fallback in SSR. Not recommend. */
+  ssrInline?: boolean
+  /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */
+  transformers?: Transformer[]
+  /**
+   * Linters to lint css before inject in document.
+   * Styles will be linted after transforming.
+   * Please note that `linters` do not support dynamic update.
+   */
+  linters?: Linter[]
+}
+
+const StyleContextKey: InjectionKey<ShallowRef<Partial<StyleContextProps>>> =
+  Symbol('StyleContextKey')
+
+export type UseStyleProviderProps = Partial<StyleContextProps> | Ref<Partial<StyleContextProps>>
+
+// fix: https://github.com/vueComponent/ant-design-vue/issues/7023
+const getCache = () => {
+  const instance = getCurrentInstance()
+  let cache: CacheEntity
+  if (instance && instance.appContext) {
+    const globalCache = instance.appContext?.config?.globalProperties?.__ANTDV_CSSINJS_CACHE__
+    if (globalCache) {
+      cache = globalCache
+    } else {
+      cache = createCache()
+      if (instance.appContext.config.globalProperties) {
+        instance.appContext.config.globalProperties.__ANTDV_CSSINJS_CACHE__ = cache
+      }
+    }
+  } else {
+    cache = createCache()
+  }
+  return cache
+}
+
+const defaultStyleContext: StyleContextProps = {
+  cache: createCache(),
+  defaultCache: true,
+  hashPriority: 'low',
+}
+// fix: https://github.com/vueComponent/ant-design-vue/issues/6912
+export const useStyleInject = () => {
+  const cache = getCache()
+  return inject(StyleContextKey, shallowRef({ ...defaultStyleContext, cache }))
+}
+export const useStyleProvider = (props: UseStyleProviderProps) => {
+  const parentContext = useStyleInject()
+  const context = shallowRef<Partial<StyleContextProps>>({
+    ...defaultStyleContext,
+    cache: createCache(),
+  })
+  watch(
+    [() => unref(props), parentContext],
+    () => {
+      const mergedContext: Partial<StyleContextProps> = {
+        ...parentContext.value,
+      }
+      const propsValue = unref(props)
+      Object.keys(propsValue).forEach((key) => {
+        const value = propsValue[key]
+        if (propsValue[key] !== undefined) {
+          mergedContext[key] = value
+        }
+      })
+
+      const { cache } = propsValue
+      mergedContext.cache = mergedContext.cache || createCache()
+      mergedContext.defaultCache = !cache && parentContext.value.defaultCache
+      context.value = mergedContext
+    },
+    { immediate: true },
+  )
+  provide(StyleContextKey, context)
+  return context
+}
+export const styleProviderProps = () => ({
+  autoClear: booleanType(),
+  mock: stringType<'server' | 'client'>(),
+  /**
+   * Only set when you need ssr to extract style on you own.
+   * If not provided, it will auto create <style /> on the end of Provider in server side.
+   */
+  cache: objectType<CacheEntity>(),
+  /** Tell children that this context is default generated context */
+  defaultCache: booleanType(),
+  /** Use `:where` selector to reduce hashId css selector priority */
+  hashPriority: stringType<HashPriority>(),
+  /** Tell cssinjs where to inject style in */
+  container: someType<Element | ShadowRoot>(),
+  /** Component wil render inline  `<style />` for fallback in SSR. Not recommend. */
+  ssrInline: booleanType(),
+  /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */
+  transformers: arrayType<Transformer[]>(),
+  /**
+   * Linters to lint css before inject in document.
+   * Styles will be linted after transforming.
+   * Please note that `linters` do not support dynamic update.
+   */
+  linters: arrayType<Linter[]>(),
+})
+export type StyleProviderProps = Partial<ExtractPropTypes<ReturnType<typeof styleProviderProps>>>
+export const StyleProvider = withInstall(
+  defineComponent({
+    name: 'AStyleProvider',
+    inheritAttrs: false,
+    props: styleProviderProps(),
+    setup(props, { slots }) {
+      useStyleProvider(props)
+      return () => slots.default?.()
+    },
+  }),
+)
+
+export default {
+  useStyleInject,
+  useStyleProvider,
+  StyleProvider,
+}

package/src/_util/cssinjs/hooks/useCacheToken.tsx

@@ -0,0 +1,167 @@
+import hash from '@emotion/hash'
+
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+import { ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleInject } from '../StyleContext'
+import type Theme from '../theme/Theme'
+import { flattenToken, token2key } from '../util'
+import useGlobalCache from './useGlobalCache'
+
+const EMPTY_OVERRIDE = {}
+
+const isProduction = process.env.NODE_ENV === 'production'
+// nuxt generate when NODE_ENV is prerender
+const isPrerender = process.env.NODE_ENV === 'prerender'
+
+// Generate different prefix to make user selector break in production env.
+// This helps developer not to do style override directly on the hash id.
+const hashPrefix = !isProduction && !isPrerender ? 'css-dev-only-do-not-override' : 'css'
+
+export interface Option<DerivativeToken, DesignToken> {
+  /**
+   * Generate token with salt.
+   * This is used to generate different hashId even same derivative token for different version.
+   */
+  salt?: string
+  override?: object
+  /**
+   * Format token as you need. Such as:
+   *
+   * - rename token
+   * - merge token
+   * - delete token
+   *
+   * This should always be the same since it's one time process.
+   * It's ok to useMemo outside but this has better cache strategy.
+   */
+  formatToken?: (mergedToken: any) => DerivativeToken
+  /**
+   * Get final token with origin token, override token and theme.
+   * The parameters do not contain formatToken since it's passed by user.
+   * @param origin The original token.
+   * @param override Extra tokens to override.
+   * @param theme Theme instance. Could get derivative token by `theme.getDerivativeToken`
+   */
+  getComputedToken?: (
+    origin: DesignToken,
+    override: object,
+    theme: Theme<any, any>,
+  ) => DerivativeToken
+}
+
+const tokenKeys = new Map<string, number>()
+function recordCleanToken(tokenKey: string) {
+  tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) + 1)
+}
+
+function removeStyleTags(key: string, instanceId: string) {
+  if (typeof document !== 'undefined') {
+    const styles = document.querySelectorAll(`style[${ATTR_TOKEN}="${key}"]`)
+
+    styles.forEach((style) => {
+      if ((style as any)[CSS_IN_JS_INSTANCE] === instanceId) {
+        style.parentNode?.removeChild(style)
+      }
+    })
+  }
+}
+
+const TOKEN_THRESHOLD = 0
+
+// Remove will check current keys first
+function cleanTokenStyle(tokenKey: string, instanceId: string) {
+  tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1)
+
+  const tokenKeyList = Array.from(tokenKeys.keys())
+  const cleanableKeyList = tokenKeyList.filter((key) => {
+    const count = tokenKeys.get(key) || 0
+
+    return count <= 0
+  })
+
+  // Should keep tokens under threshold for not to insert style too often
+  if (tokenKeyList.length - cleanableKeyList.length > TOKEN_THRESHOLD) {
+    cleanableKeyList.forEach((key) => {
+      removeStyleTags(key, instanceId)
+      tokenKeys.delete(key)
+    })
+  }
+}
+
+export const getComputedToken = <DerivativeToken = object, DesignToken = DerivativeToken>(
+  originToken: DesignToken,
+  overrideToken: object,
+  theme: Theme<any, any>,
+  format?: (token: DesignToken) => DerivativeToken,
+) => {
+  const derivativeToken = theme.getDerivativeToken(originToken)
+  // Merge with override
+  let mergedDerivativeToken = {
+    ...derivativeToken,
+    ...overrideToken,
+  }
+
+  // Format if needed
+  if (format) {
+    mergedDerivativeToken = format(mergedDerivativeToken)
+  }
+
+  return mergedDerivativeToken
+}
+
+/**
+ * Cache theme derivative token as global shared one
+ * @param theme Theme entity
+ * @param tokens List of tokens, used for cache. Please do not dynamic generate object directly
+ * @param option Additional config
+ * @returns Call Theme.getDerivativeToken(tokenObject) to get token
+ */
+export default function useCacheToken<DerivativeToken = object, DesignToken = DerivativeToken>(
+  theme: Ref<Theme<any, any>>,
+  tokens: Ref<Partial<DesignToken>[]>,
+  option: Ref<Option<DerivativeToken, DesignToken>> = ref({}),
+) {
+  const style = useStyleInject()
+
+  // Basic - We do basic cache here
+  const mergedToken = computed(() => Object.assign({}, ...tokens.value))
+  const tokenStr = computed(() => flattenToken(mergedToken.value))
+  const overrideTokenStr = computed(() => flattenToken(option.value.override || EMPTY_OVERRIDE))
+
+  const cachedToken = useGlobalCache<[DerivativeToken & { _tokenKey: string }, string]>(
+    'token',
+    computed(() => [
+      option.value.salt || '',
+      theme.value.id,
+      tokenStr.value,
+      overrideTokenStr.value,
+    ]),
+    () => {
+      const {
+        salt = '',
+        override = EMPTY_OVERRIDE,
+        formatToken,
+        getComputedToken: compute,
+      } = option.value
+      const mergedDerivativeToken = compute
+        ? compute(mergedToken.value, override, theme.value)
+        : getComputedToken(mergedToken.value, override, theme.value, formatToken)
+
+      // Optimize for `useStyleRegister` performance
+      const tokenKey = token2key(mergedDerivativeToken, salt)
+      mergedDerivativeToken._tokenKey = tokenKey
+      recordCleanToken(tokenKey)
+
+      const hashId = `${hashPrefix}-${hash(tokenKey)}`
+      mergedDerivativeToken._hashId = hashId // Not used
+      return [mergedDerivativeToken, hashId]
+    },
+    (cache) => {
+      // Remove token will remove all related style
+      cleanTokenStyle(cache[0]._tokenKey, style.value?.cache.instanceId)
+    },
+  )
+
+  return cachedToken
+}

package/src/_util/cssinjs/hooks/useGlobalCache.tsx

@@ -0,0 +1,60 @@
+import type { Ref, ShallowRef } from 'vue'
+import { onBeforeUnmount, shallowRef, watch, watchEffect } from 'vue'
+
+import type { KeyType } from '../Cache'
+import { useStyleInject } from '../StyleContext'
+import useHMR from './useHMR'
+
+export default function useClientCache<CacheType>(
+  prefix: string,
+  keyPath: Ref<KeyType[]>,
+  cacheFn: () => CacheType,
+  onCacheRemove?: (cache: CacheType, fromHMR: boolean) => void,
+): ShallowRef<CacheType> {
+  const styleContext = useStyleInject()
+  const fullPathStr = shallowRef('')
+  const res = shallowRef<CacheType>()
+  watchEffect(() => {
+    fullPathStr.value = [prefix, ...keyPath.value].join('%')
+  })
+  const HMRUpdate = useHMR()
+  const clearCache = (pathStr: string) => {
+    styleContext.value.cache.update(pathStr, (prevCache) => {
+      const [times = 0, cache] = prevCache || []
+      const nextCount = times - 1
+      if (nextCount === 0) {
+        onCacheRemove?.(cache, false)
+        return null
+      }
+
+      return [times - 1, cache]
+    })
+  }
+
+  watch(
+    fullPathStr,
+    (newStr, oldStr) => {
+      if (oldStr) clearCache(oldStr)
+      // Create cache
+      styleContext.value.cache.update(newStr, (prevCache) => {
+        const [times = 0, cache] = prevCache || []
+
+        // HMR should always ignore cache since developer may change it
+        let tmpCache = cache
+        if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) {
+          onCacheRemove?.(tmpCache, HMRUpdate)
+          tmpCache = null
+        }
+        const mergedCache = tmpCache || cacheFn()
+
+        return [times + 1, mergedCache]
+      })
+      res.value = styleContext.value.cache.get(fullPathStr.value)![1]
+    },
+    { immediate: true },
+  )
+  onBeforeUnmount(() => {
+    clearCache(fullPathStr.value)
+  })
+  return res
+}

package/src/_util/cssinjs/hooks/useHMR.ts

@@ -0,0 +1,34 @@
+function useProdHMR() {
+  return false
+}
+
+let webpackHMR = false
+
+function useDevHMR() {
+  return webpackHMR
+}
+
+export default process.env.NODE_ENV === 'production' ? useProdHMR : useDevHMR
+
+// Webpack `module.hot.accept` do not support any deps update trigger
+// We have to hack handler to force mark as HRM
+if (
+  process.env.NODE_ENV !== 'production' &&
+  typeof module !== 'undefined' &&
+  module &&
+  (module as any).hot &&
+  typeof window !== 'undefined'
+) {
+  const win = window as any
+  if (typeof win.webpackHotUpdate === 'function') {
+    const originWebpackHotUpdate = win.webpackHotUpdate
+
+    win.webpackHotUpdate = (...args: any[]) => {
+      webpackHMR = true
+      setTimeout(() => {
+        webpackHMR = false
+      }, 0)
+      return originWebpackHotUpdate(...args)
+    }
+  }
+}

package/src/_util/cssinjs/hooks/useStyleRegister/cacheMapUtil.ts

@@ -0,0 +1,91 @@
+import canUseDom from '../../../../_util/canUseDom'
+import { ATTR_MARK } from '../../StyleContext'
+
+export const ATTR_CACHE_MAP = 'data-ant-cssinjs-cache-path'
+
+/**
+ * This marks style from the css file.
+ * Which means not exist in `<style />` tag.
+ */
+export const CSS_FILE_STYLE = '_FILE_STYLE__'
+
+export function serialize(cachePathMap: Record<string, string>) {
+  return Object.keys(cachePathMap)
+    .map((path) => {
+      const hash = cachePathMap[path]
+      return `${path}:${hash}`
+    })
+    .join(';')
+}
+
+let cachePathMap: Record<string, string>
+let fromCSSFile = true
+
+/**
+ * @private
+ */
+export function reset(mockCache?: Record<string, string>, fromFile = true) {
+  cachePathMap = mockCache!
+  fromCSSFile = fromFile
+}
+
+export function prepare() {
+  if (!cachePathMap) {
+    cachePathMap = {}
+
+    if (canUseDom()) {
+      const div = document.createElement('div')
+      div.className = ATTR_CACHE_MAP
+      div.style.position = 'fixed'
+      div.style.visibility = 'hidden'
+      div.style.top = '-9999px'
+      document.body.appendChild(div)
+
+      let content = getComputedStyle(div).content || ''
+      content = content.replace(/^"/, '').replace(/"$/, '')
+
+      // Fill data
+      content.split(';').forEach((item) => {
+        const [path, hash] = item.split(':')
+        cachePathMap[path] = hash
+      })
+
+      // Remove inline record style
+      const inlineMapStyle = document.querySelector(`style[${ATTR_CACHE_MAP}]`)
+      if (inlineMapStyle) {
+        fromCSSFile = false
+        inlineMapStyle.parentNode?.removeChild(inlineMapStyle)
+      }
+
+      document.body.removeChild(div)
+    }
+  }
+}
+
+export function existPath(path: string) {
+  prepare()
+
+  return !!cachePathMap[path]
+}
+
+export function getStyleAndHash(path: string): [style: string | null, hash: string] {
+  const hash = cachePathMap[path]
+  let styleStr: string | null = null
+
+  if (hash && canUseDom()) {
+    if (fromCSSFile) {
+      styleStr = CSS_FILE_STYLE
+    } else {
+      const style = document.querySelector(`style[${ATTR_MARK}="${cachePathMap[path]}"]`)
+
+      if (style) {
+        styleStr = style.innerHTML
+      } else {
+        // Clean up since not exist anymore
+        delete cachePathMap[path]
+      }
+    }
+  }
+
+  return [styleStr, hash]
+}