@antsoo-lib/components 0.1.11 → 0.1.12

package/src/_util/createRef.ts

@@ -1,31 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,187 +0,0 @@
-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

@@ -1,167 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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]
-}