docs: update compatiple #6415

Author: tangjinzhou

components/_util/cssinjs/StyleContext.tsx

@@ -1,10 +1,9 @@
-import type { App, ComputedRef, InjectionKey, Ref } from 'vue';
-import { provide, defineComponent, unref, computed, inject } from 'vue';
+import type { ShallowRef, ExtractPropTypes, InjectionKey, Ref } from 'vue';
+import { provide, defineComponent, unref, inject, watch, shallowRef } from 'vue';
 import CacheEntity from './Cache';
 import type { Linter } from './linters/interface';
 import type { Transformer } from './transformers/interface';
-import { arrayType, objectType } from '../type';
-import PropTypes from '../vue-types';
+import { arrayType, booleanType, objectType, someType, stringType, withInstall } from '../type';
 import initDefaultProps from '../props-util/initDefaultProps';
 export const ATTR_TOKEN = 'data-token-hash';
 export const ATTR_MARK = 'data-css-hash';
@@ -73,61 +72,62 @@ export interface StyleContextProps {
   linters?: Linter[];
 }
 
-const StyleContextKey: InjectionKey<ComputedRef<Partial<StyleContextProps>>> =
+const StyleContextKey: InjectionKey<ShallowRef<Partial<StyleContextProps>>> =
   Symbol('StyleContextKey');
 
-export type StyleProviderProps = Partial<StyleContextProps> | Ref<Partial<StyleContextProps>>;
+export type UseStyleProviderProps = Partial<StyleContextProps> | Ref<Partial<StyleContextProps>>;
 const defaultStyleContext: StyleContextProps = {
   cache: createCache(),
   defaultCache: true,
   hashPriority: 'low',
 };
 export const useStyleInject = () => {
-  return inject(
-    StyleContextKey,
-    computed(() => defaultStyleContext),
-  );
+  return inject(StyleContextKey, shallowRef({ ...defaultStyleContext }));
 };
-export const useStyleProvider = (props: StyleProviderProps) => {
+export const useStyleProvider = (props: UseStyleProviderProps) => {
   const parentContext = useStyleInject();
+  const context = shallowRef<Partial<StyleContextProps>>({ ...defaultStyleContext });
+  watch(
+    [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 context = computed<Partial<StyleContextProps>>(() => {
-    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;
-    return mergedContext;
-  });
+      const { cache } = propsValue;
+      mergedContext.cache = mergedContext.cache || createCache();
+      mergedContext.defaultCache = !cache && parentContext.value.defaultCache;
+      context.value = mergedContext;
+    },
+    { immediate: true },
+  );
   provide(StyleContextKey, context);
   return context;
 };
-const AStyleProviderProps = () => ({
-  autoClear: PropTypes.bool,
+export const styleProviderProps = () => ({
+  autoClear: booleanType(),
   /** @private Test only. Not work in production. */
-  mock: PropTypes.oneOf(['server', 'client'] as const),
+  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: PropTypes.bool,
+  defaultCache: booleanType(),
   /** Use `:where` selector to reduce hashId css selector priority */
-  hashPriority: PropTypes.oneOf(['low', 'high'] as const),
+  hashPriority: stringType<HashPriority>(),
   /** Tell cssinjs where to inject style in */
-  container: PropTypes.oneOfType([objectType<Element>(), objectType<ShadowRoot>()]),
+  container: someType<Element | ShadowRoot>(),
   /** Component wil render inline  `<style />` for fallback in SSR. Not recommend. */
-  ssrInline: PropTypes.bool,
+  ssrInline: booleanType(),
   /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */
   transformers: arrayType<Transformer[]>(),
   /**
@@ -137,20 +137,21 @@ const AStyleProviderProps = () => ({
    */
   linters: arrayType<Linter[]>(),
 });
+export type StyleProviderProps = Partial<ExtractPropTypes<ReturnType<typeof styleProviderProps>>>;
+export const StyleProvider = withInstall(
+  defineComponent({
+    name: 'AStyleProvider',
+    inheritAttrs: false,
+    props: initDefaultProps(styleProviderProps(), defaultStyleContext),
+    setup(props, { slots }) {
+      useStyleProvider(props);
+      return () => slots.default?.();
+    },
+  }),
+);
 
-export const StyleProvider = defineComponent({
-  name: 'AStyleProvider',
-  props: initDefaultProps(AStyleProviderProps(), defaultStyleContext),
-  setup(props, { slots }) {
-    useStyleProvider(props);
-    return () => slots.default?.();
-  },
-});
-
-StyleProvider.install = function (app: App) {
-  app.component(StyleProvider.name, StyleProvider);
-};
 export default {
   useStyleInject,
   useStyleProvider,
+  StyleProvider,
 };

components/_util/cssinjs/index.ts

@@ -4,13 +4,34 @@ import useStyleRegister, { extractStyle } from './hooks/useStyleRegister';
 import Keyframes from './Keyframes';
 import type { Linter } from './linters';
 import { legacyNotSelectorLinter, logicalPropertiesLinter } from './linters';
-import type { StyleContextProps } from './StyleContext';
+import type { StyleContextProps, StyleProviderProps } from './StyleContext';
 import { createCache, useStyleInject, useStyleProvider, StyleProvider } from './StyleContext';
 import type { DerivativeFunc, TokenType } from './theme';
 import { createTheme, Theme } from './theme';
 import type { Transformer } from './transformers/interface';
 import legacyLogicalPropertiesTransformer from './transformers/legacyLogicalProperties';
 
+const cssinjs = {
+  Theme,
+  createTheme,
+  useStyleRegister,
+  useCacheToken,
+  createCache,
+  useStyleInject,
+  useStyleProvider,
+  Keyframes,
+  extractStyle,
+
+  // Transformer
+  legacyLogicalPropertiesTransformer,
+
+  // Linters
+  logicalPropertiesLinter,
+  legacyNotSelectorLinter,
+
+  // cssinjs
+  StyleProvider,
+};
 export {
   Theme,
   createTheme,
@@ -40,4 +61,7 @@ export type {
   Transformer,
   Linter,
   StyleContextProps,
+  StyleProviderProps,
 };
+
+export default cssinjs;

components/components.ts

@@ -48,7 +48,7 @@ export { default as Comment } from './comment';
 
 export type { ConfigProviderProps } from './config-provider';
 export { default as ConfigProvider } from './config-provider';
-export * from './_util/cssinjs';
+
 export type { DatePickerProps } from './date-picker';
 export {
   default as DatePicker,

components/index.ts

@@ -2,7 +2,10 @@ import type { App } from 'vue';
 
 import * as components from './components';
 import { default as version } from './version';
+import cssinjs from './_util/cssinjs';
 export * from './components';
+export * from './_util/cssinjs';
+
 export { default as theme } from './theme';
 export const install = function (app: App) {
   Object.keys(components).forEach(key => {
@@ -11,7 +14,7 @@ export const install = function (app: App) {
       app.use(component);
     }
   });
-
+  app.use(cssinjs.StyleProvider);
   app.config.globalProperties.$message = components.message;
   app.config.globalProperties.$notification = components.notification;
   app.config.globalProperties.$info = components.Modal.info;
@@ -23,7 +26,7 @@ export const install = function (app: App) {
   return app;
 };
 
-export { version };
+export { version, cssinjs };
 
 export default {
   version,

site/src/App.vue

@@ -1,9 +1,11 @@
 <template>
-  <a-config-provider :locale="locale" :theme="themeConfig">
-    <SiteToken>
-      <router-view />
-    </SiteToken>
-  </a-config-provider>
+  <a-style-provider :hash-priority="hashPriority">
+    <a-config-provider :locale="locale" :theme="themeConfig">
+      <SiteToken>
+        <router-view />
+      </SiteToken>
+    </a-config-provider>
+  </a-style-provider>
 </template>
 
 <script lang="ts">
@@ -57,6 +59,10 @@ export default defineComponent({
     const themeConfig = computed(() => {
       return { algorithm: getAlgorithm([...new Set([theme.value, compactTheme.value])]) };
     });
+    const hashPriority = ref('low' as const);
+    watch(hashPriority, () => {
+      location.reload();
+    });
     // useSiteToken();
     const responsive = computed(() => {
       if (colSize.value === 'xs') {
@@ -132,7 +138,7 @@ export default defineComponent({
       },
       { immediate: true },
     );
-    return { globalConfig, locale, themeConfig };
+    return { globalConfig, locale, themeConfig, hashPriority };
   },
 });
 </script>

site/src/vueDocs/compatible-style.en-US.md

@@ -27,7 +27,11 @@ It will turn `:where` to class selector:
     }
 ```
 
-Note: After turning off the `:where` downgrade, you may need to manually adjust the priority of some styles.
+Note:
+
+1、After turning off the `:where` downgrade, you may need to manually adjust the priority of some styles.
+
+2、hashPriority not support change，you can reload for new value.
 
 ### CSS Logical Properties
 

site/src/vueDocs/compatible-style.zh-CN.md

@@ -27,7 +27,11 @@ Ant Design Vue 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector
     }
 ```
 
-注意：关闭 `:where` 降权后，你可能需要手动调整一些样式的优先级。
+注意：
+
+1、关闭 `:where` 降权后，你可能需要手动调整一些样式的优先级。
+
+2、hashPriority 不支持动态修改，修改后请刷新浏览器
 
 ### CSS 逻辑属性