chore: cleanup, change tsconfig

examples/pro-provider.tsx

-import { computed, createApp, defineComponent, inject, reactive, toRefs } from 'vue';
+import { createApp, defineComponent, inject, reactive, toRefs } from 'vue';
 import { Card, Space, Button } from 'ant-design-vue';
 import { ContentWidth } from '../src/typings';
 import { warning } from '../src/utils';
-import GridContent from '../src/GridContent';
-import ProProvider, { injectProConfigKey, defaultProProviderProps } from '../src/ProProvider';
+import { default as ProProvider, useProProvider } from '../src/ProProvider';
 
 import 'ant-design-vue/dist/antd.less';
+import GridContent from '../src/GridContent';
 
 const trans = {
-  'render.test.i18n.hello': 'Hello My Friends'
-}
+  'render.test.i18n.hello': 'Hello My Friends',
+};
+const trans2 = {
+  'render.test.i18n.hello': 'Hello My Dear Friends',
+};
 
 const i18nRender = (t: string): string => {
-  warning(false, `i18n.key ${t}, value: ${trans[t]}`, )
   return trans[t];
-}
+};
+const i18nRender2 = (t: string): string => {
+  return trans2[t];
+};
 
 const ProProviderDemo = defineComponent({
-  setup () {
+  setup() {
     const state = reactive({
+      i18nRender,
       contentWidth: 'Fixed' as ContentWidth,
-    })
+    });
 
     return () => (
       <>
-        <ProProvider i18n={i18nRender} contentWidth={state.contentWidth}>
+        <ProProvider i18n={state.i18nRender} contentWidth={state.contentWidth}>
           <h2># BasicLayout</h2>
-          <div class="components" style={{ background: 'rgb(240, 240, 240)', paddingBottom: '20px' }}>
+          <div
+            class="components"
+            style={{ background: 'rgb(240, 240, 240)', paddingBottom: '20px' }}
+          >
             <Card style={{ marginBottom: '24px', background: 'rgb(244,244,244)' }}>
               <Space size="middle">
-                ContentWidth:
+                Change Current Config:
                 <Button
                   type="primary"
                   onClick={() => {
+                    state.i18nRender = (Math.random() > 0.5 && i18nRender2) || i18nRender;
                     state.contentWidth = state.contentWidth === 'Fixed' ? 'Fluid' : 'Fixed';
                   }}
                 >
                   {state.contentWidth}
                 </Button>
               </Space>
-              <div class="env">
-                state.contentWidth: { JSON.stringify(state.contentWidth) }
-              </div>
+              <div class="env">state.contentWidth: {JSON.stringify(state.contentWidth)}</div>
             </Card>
-            <TestChildComponent style={{ background: 'rgb(220, 220, 220)', padding: '22px' }}/>
+            <TestChildComponent style={{ background: 'rgb(220, 220, 220)', padding: '22px' }} />
           </div>
         </ProProvider>
       </>
-    )
-  }
-})
+    );
+  },
+});
 
 const TestChildComponent = defineComponent({
-  setup () {
-    const config = inject(injectProConfigKey, defaultProProviderProps);
+  setup() {
+    const config = useProProvider();
     const prefixCls = config.getPrefixCls('child-component');
 
     return () => {
-      const { i18n, contentWidth } = config
+      const { i18n, contentWidth } = config;
       return (
+        <GridContent contentWidth={contentWidth}>
           <div class={prefixCls}>
             <p>TestChildComponent:</p>
-          <div>
-            i18n: {i18n.toString()}
-          </div>
-          <div>
-            contentWidth: {contentWidth}
-          </div>
+            <div>contentWidth: {contentWidth} , <a>Fixed: 1200px; Fluid: auto width;</a></div>
             <p>{i18n('render.test.i18n.hello')}</p>
           </div>
-      )
-    }
-  }
+        </GridContent>
+      );
+    };
+  },
 });
 
 const app = createApp(ProProviderDemo);

package.json

@@ -69,7 +69,7 @@
     "port": 9528,
     "entry": {
       "@ant-design-vue/pro-layout": [
-        "./index.tsx"
+        "./src/index.ts"
       ]
     },
     "css": {

src/BasicLayout.tsx

@@ -49,7 +49,7 @@ const BasicLayout = (props, { emit, slots }) => {
                 minHeight: '280px',
               }}
             >
-              {slots.default && slots.default()}
+              {slots.default?.()}
             </Layout.Content>
           </Layout>
         </Layout>

src/FooterToolbar/index.tsx

@@ -54,7 +54,7 @@ const FooterToolbar = defineComponent({
       return (
         <>
           <div class={`${baseClassName.value}-left`}>{props.extra}</div>
-          <div class={`${baseClassName.value}-right`}>{slots.default()}</div>
+          <div class={`${baseClassName.value}-right`}>{slots.default?.()}</div>
         </>
       );
     };

src/GridContent/index.tsx

 import './GridContent.less';
 
-import { SetupContext, CSSProperties } from 'vue';
+import { FunctionalComponent, SetupContext, CSSProperties } from 'vue';
 import { PureSettings } from '../defaultSettings';
 
 interface GridContentProps {
@@ -9,8 +9,8 @@ interface GridContentProps {
   style?: CSSProperties;
 }
 
-const GridContent = (
-  { prefixCls = 'ant-pro', contentWidth }: GridContentProps,
+const GridContent: FunctionalComponent<GridContentProps> = (
+  { prefixCls = 'ant-pro', contentWidth },
   { slots }: SetupContext,
 ) => {
   return (
@@ -20,7 +20,7 @@ const GridContent = (
         wide: contentWidth === 'Fixed',
       }}
     >
-      <div class={`${prefixCls}-grid-content-children`}>{slots.default && slots.default()}</div>
+      <div class={`${prefixCls}-grid-content-children`}>{slots.default?.()}</div>
     </div>
   );
 };

src/ProProvider/index.tsx

-import { App, defineComponent, InjectionKey, PropType, provide, reactive, SetupContext, toRefs } from 'vue';
+import {
+  App,
+  defineComponent,
+  InjectionKey,
+  PropType,
+  provide,
+  inject,
+  reactive,
+  readonly,
+  SetupContext,
+  toRefs,
+} from 'vue';
 import { ContentWidth } from '../typings';
 
 export const defaultPrefixCls = 'ant-pro';
@@ -43,14 +54,14 @@ const ProProvider = defineComponent({
       return suffixCls ? `${prefixCls.value}-${suffixCls}` : prefixCls.value;
     };
 
-    const proConfigProvider = reactive({
+    const context = reactive({
       i18n,
       contentWidth,
       getPrefixCls,
     });
-    provide(injectProConfigKey, proConfigProvider);
+    provide(injectProConfigKey, readonly(context));
 
-    return () => slots.default && slots.default();
+    return () => slots.default?.();
   },
 });
 
@@ -58,4 +69,8 @@ ProProvider.install = function(app: App) {
   app.component(ProProvider.name, ProProvider);
 };
 
+export const useProProvider = (): ProProviderData => {
+  return inject(injectProConfigKey, defaultProProviderProps);
+};
+
 export default ProProvider;

src/SiderMenu/BaseMenu.tsx

@@ -2,7 +2,7 @@ import './index.less';
 
 import {
   defineComponent,
-  h,
+  resolveComponent,
   ref,
   reactive,
   computed,
@@ -16,7 +16,6 @@ import {
   isVNode,
   toRefs,
 } from 'vue';
-// import * as Icon from '@ant-design/icons-vue';
 import { createFromIconfontCN } from '@ant-design/icons-vue';
 
 // import 'ant-design-vue/es/menu/style'
@@ -26,7 +25,7 @@ import { Menu } from 'ant-design-vue';
 
 import defaultSettings, { PureSettings } from '../defaultSettings';
 import { isImg, isUrl } from '../utils';
-import { MenuMode, SelectInfo, OpenEventHandler } from './typings';
+import { MenuMode, SelectInfo, OpenEventHandler, MenuInfo } from './typings';
 import { RouteProps, MenuTheme, WithFalse } from '../typings';
 
 export { MenuMode, SelectInfo, OpenEventHandler };
@@ -179,38 +178,21 @@ const IconFont = createFromIconfontCN({
   scriptUrl: defaultSettings.iconfontUrl,
 });
 
-// const LazyIcon = (props, _) => {
-//   const { icon } = toRefs(props)
-//   if (typeof icon.value === 'string' && icon.value !== '') {
-//     if (isUrl(icon.value) || isImg(icon.value)) {
-//       return <img src={icon.value} alt="icon" class="ant-pro-sider-menu-icon" />
-//     }
-//     if (icon.value.startsWith('icon-')) {
-//       return <IconFont type={icon.value}  />
-//     }
-//   }
-//   if (isVNode(icon.value)) {
-//     return icon.value
-//   }
-//   const IconComponent = resolveComponent(`${icon.value}`)
-//   return h(IconComponent)
-// }
 const LazyIcon = props => {
-  const { icon } = toRefs(props);
-  if (typeof icon.value === 'string' && icon.value !== '') {
-    if (isUrl(icon.value) || isImg(icon.value)) {
-      return <img src={icon.value} alt="icon" class="ant-pro-sider-menu-icon" />;
+  const { icon, prefixCls } = props;
+  if (typeof icon === 'string' && icon !== '') {
+    if (isUrl(icon) || isImg(icon)) {
+      return <img src={icon} alt="icon" class={`${prefixCls}-sider-menu-icon`} />;
     }
-    if (icon.value.startsWith('icon-')) {
-      return <IconFont type={icon.value} />;
+    if (icon.startsWith('icon-')) {
+      return <IconFont type={icon} />;
     }
   }
-  if (isVNode(icon.value)) {
-    return icon.value;
+  if (isVNode(icon)) {
+    return icon;
   }
-  // const ALazyIcon = resolveComponent(`${icon.value}`);
-  // return ALazyIcon && ALazyIcon
-  return h(icon.value);
+  const LazyIcon = resolveComponent(icon);
+  return (typeof LazyIcon === 'function' && <LazyIcon />) || null;
 };
 
 LazyIcon.icon = {
@@ -236,7 +218,7 @@ export default defineComponent({
     const handleOpenChange: OpenEventHandler = (openKeys): void => {
       emit('update:openKeys', openKeys);
     };
-    const handleSelect = ({ selectedKeys }: SelectInfo): void => {
+    const handleSelect = ({ selectedKeys }: SelectInfo & MenuInfo) => {
       emit('update:selectedKeys', selectedKeys);
     };
 
@@ -245,8 +227,8 @@ export default defineComponent({
         inlineCollapsed={(isInline.value && props.collapsed) || undefined}
         mode={props.mode}
         theme={props.theme}
-        openKeys={props.openKeys}
-        selectedKeys={props.selectedKeys}
+        openKeys={props.openKeys || []}
+        selectedKeys={props.selectedKeys || []}
         onOpenChange={handleOpenChange}
         onSelect={handleSelect}
       >

src/SiderMenu/SiderMenu.tsx

@@ -95,7 +95,6 @@ const SiderMenu = (props: SiderMenuProps) => {
     onSelect,
     collapsedWidth = 48,
   } = props;
-  console.log('props', props);
   const { getPrefixCls } = inject(injectProConfigKey, defaultProProviderProps);
   const baseClassName = getPrefixCls('sider');
 

src/SiderMenu/index.tsx

-import { FunctionalComponent, toRefs } from 'vue';
+import { FunctionalComponent } from 'vue';
 
 import 'ant-design-vue/es/drawer/style';
 import Drawer from 'ant-design-vue/es/drawer';
@@ -7,7 +7,6 @@ import SiderMenu, { SiderMenuProps, PrivateSiderMenuProps } from './SiderMenu';
 
 const SiderMenuWrapper: FunctionalComponent<SiderMenuProps & PrivateSiderMenuProps> = (
   props,
-  ctx,
 ) => {
   return props.isMobile ? (
     <Drawer>

src/SiderMenu/typings.ts

@@ -3,14 +3,14 @@ import { VNodeChild, CSSProperties, HTMLAttributes } from 'vue';
 export type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'inline';
 
 export interface MenuInfo {
-  key: string;
-  keyPath: string[];
-  item: VNodeChild;
-  domEvent?: MouseEvent;
+  key: string | number;
+  keyPath: string[] | number[];
+  item: VNodeChild | any;
+  domEvent: MouseEvent;
 }
 
-export interface SelectInfo extends MenuInfo {
-  selectedKeys?: string[];
+export interface SelectInfo {
+  selectedKeys: string[];
 }
 
 export type OpenEventHandler = (

src/hooks/context/index.ts

@@ -31,7 +31,7 @@ export const createContext = <T>(
     inheritAttrs: false,
     setup(props, { slots }: SetupContext) {
       provide(contextInjectKey, readonly(state));
-      return () => slots.default();
+      return () => slots.default?.();
     },
   });
 

tsconfig.json

@@ -3,7 +3,7 @@
     "allowSyntheticDefaultImports": true,
     "declaration": true,
     "module": "esnext",
-    "target": "esnext",
+    "target": "es2018",
     "moduleResolution": "node",
     "jsx": "preserve",
     "esModuleInterop": true