fix: renderItems

modelscope · Jan 20, 2025 · 3000de2 · 3000de2
1 parent 1bf3cdf
commit 3000de2
Show file tree

Hide file tree

Showing 11 changed files with 251 additions and 152 deletions.
diff --git a/frontend/antd/anchor/Index.svelte b/frontend/antd/anchor/Index.svelte
@@ -11,8 +11,6 @@
   import cls from 'classnames';
   import { writable } from 'svelte/store';
 
-  import { getItems } from './context';
-
   const AwaitedAnchor = importComponent(() => import('./anchor'));
 
   export let gradio: Gradio;
@@ -53,7 +51,6 @@
     as_item,
     restProps: $$restProps,
   });
-  const { items, default: children } = getItems(['items', 'default']);
 </script>
 
 {#if $mergedProps.visible}
@@ -66,7 +63,6 @@
       {...$mergedProps.props}
       {...bindEvents($mergedProps)}
       slots={$slots}
-      slotItems={$items.length > 0 ? $items : $children}
     >
       <slot></slot>
     </Anchor>

diff --git a/frontend/antd/anchor/anchor.tsx b/frontend/antd/anchor/anchor.tsx
@@ -4,47 +4,42 @@ import { useFunction } from '@utils/hooks/useFunction';
 import { renderItems } from '@utils/renderItems';
 import { Anchor as AAnchor, type GetProps } from 'antd';
 
-import { type Item } from './context';
+import { useItems, withItemsContextProvider } from './context';
 
 type AnchorProps = GetProps<typeof AAnchor>;
-export const Anchor = sveltify<
-  AnchorProps & {
-    slotItems: Item[];
-  }
->(
-  ({
-    getContainer,
-    getCurrentAnchor,
-    children,
-    items,
-    slotItems,
-    ...props
-  }) => {
-    const getContainerFunction = useFunction(getContainer);
-    const getCurrentAnchorFunction = useFunction(getCurrentAnchor);
-    return (
-      <>
-        {children}
-        <AAnchor
-          {...props}
-          items={useMemo(() => {
-            // ["title"]
-            return (
-              items ||
-              renderItems<NonNullable<AnchorProps['items']>[number]>(
-                slotItems,
-                {
-                  clone: true,
-                }
-              )
-            );
-          }, [items, slotItems])}
-          getContainer={getContainerFunction}
-          getCurrentAnchor={getCurrentAnchorFunction}
-        />
-      </>
-    );
-  }
+export const Anchor = sveltify<AnchorProps>(
+  withItemsContextProvider(
+    ['items', 'default'],
+    ({ getContainer, getCurrentAnchor, children, items, ...props }) => {
+      const getContainerFunction = useFunction(getContainer);
+      const getCurrentAnchorFunction = useFunction(getCurrentAnchor);
+      const { items: slotItems } = useItems<['items', 'default']>();
+      const resolvedSlotItems =
+        slotItems.items.length > 0 ? slotItems.items : slotItems.default;
+      return (
+        <>
+          <div style={{ display: 'none' }}>{children}</div>
+          <AAnchor
+            {...props}
+            items={useMemo(() => {
+              // ["title"]
+              return (
+                items ||
+                renderItems<NonNullable<AnchorProps['items']>[number]>(
+                  resolvedSlotItems,
+                  {
+                    clone: true,
+                  }
+                )
+              );
+            }, [items, resolvedSlotItems])}
+            getContainer={getContainerFunction}
+            getCurrentAnchor={getCurrentAnchorFunction}
+          />
+        </>
+      );
+    }
+  )
 );
 
 export default Anchor;
diff --git a/frontend/antd/anchor/context.ts b/frontend/antd/anchor/context.ts
@@ -1,6 +1,6 @@
-import { createItemsContext } from '@utils/createItemsContext';
+import { createItemsContext } from '@utils/createItemsContext2';
 
-const { getItems, getSetItemFn } = createItemsContext('anchor');
+export const { useItems, withItemsContextProvider, ItemHandler } =
+  createItemsContext();
 
-export { getItems, getSetItemFn };
-export * from '@utils/createItemsContext';
+export * from '@utils/createItemsContext2';
diff --git a/frontend/antd/anchor/item/Index.svelte b/frontend/antd/anchor/item/Index.svelte
@@ -1,7 +1,10 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-  import { bindEvents } from '@svelte-preprocess-react/component';
+  import {
+    bindEvents,
+    importComponent,
+  } from '@svelte-preprocess-react/component';
   import {
     getSlotContext,
     getSlotKey,
@@ -12,7 +15,7 @@
   import cls from 'classnames';
   import { writable } from 'svelte/store';
 
-  import { getItems, getSetItemFn } from '../context';
+  const AwaitedAnchorItem = importComponent(() => import('./anchor.item'));
 
   export let gradio: Gradio;
   export let props: Record<string, any> = {};
@@ -59,28 +62,22 @@
     as_item,
     restProps: $$restProps,
   });
-  const setItem = getSetItemFn();
-  const { default: items } = getItems();
-  $: setItem($slotKey, $mergedProps._internal.index || 0, {
-    props: {
-      style: $mergedProps.elem_style,
-      className: cls($mergedProps.elem_classes, 'ms-gr-antd-anchor-item'),
-      id: $mergedProps.elem_id,
-      ...$mergedProps.restProps,
-      ...$mergedProps.props,
-      ...bindEvents($mergedProps),
-    },
-    slots: $slots,
-    children: $items.length > 0 ? $items : undefined,
-  });
 </script>
 
 {#if $mergedProps.visible}
-  <slot></slot>
+  {#await AwaitedAnchorItem then AnchorItem}
+    <AnchorItem
+      style={$mergedProps.elem_style}
+      className={cls($mergedProps.elem_classes, 'ms-gr-antd-anchor-item')}
+      id={$mergedProps.elem_id}
+      {...$mergedProps.restProps}
+      {...$mergedProps.props}
+      {...bindEvents($mergedProps)}
+      slots={$slots}
+      itemIndex={$mergedProps._internal.index || 0}
+      itemSlotKey={$slotKey}
+    >
+      <slot></slot>
+    </AnchorItem>
+  {/await}
 {/if}
-
-<style>
-  :global(.ms-gr-antd-noop-class) {
-    display: none;
-  }
-</style>
diff --git a/frontend/antd/anchor/item/anchor.item.tsx b/frontend/antd/anchor/item/anchor.item.tsx
@@ -0,0 +1,23 @@
+import { sveltify } from '@svelte-preprocess-react';
+import React from 'react';
+import type { AnchorLinkItemProps } from 'antd/es/anchor/Anchor';
+
+import { ItemHandler, type ItemHandlerProps } from '../context';
+
+export const AnchorItem = sveltify<AnchorLinkItemProps & ItemHandlerProps>(
+  (props) => {
+    return (
+      <>
+        <ItemHandler<['default']>
+          {...props}
+          allowedSlots={['default']}
+          itemChildren={(items) => {
+            return items.default.length > 0 ? items.default : undefined;
+          }}
+        />
+      </>
+    );
+  }
+);
+
+export default AnchorItem;
diff --git a/frontend/antd/grid/col/Index.svelte b/frontend/antd/grid/col/Index.svelte
@@ -68,11 +68,12 @@
       itemSlotKey={$slotKey}
       itemElement={$slot}
       slots={{}}
-    />
+    >
+      <svelte-slot bind:this={$slot}>
+        <slot></slot>
+      </svelte-slot>
+    </Col>
   {/await}
-  <svelte-slot bind:this={$slot}>
-    <slot></slot>
-  </svelte-slot>
 {/if}
 
 <style>

diff --git a/frontend/antd/grid/col/col.tsx b/frontend/antd/grid/col/col.tsx
@@ -1,34 +1,13 @@
 import { sveltify } from '@svelte-preprocess-react';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import { type Col as ACol, type GetProps } from 'antd';
-import { isEqual } from 'lodash-es';
 
-import { type Item, useItems } from '../context';
+import { ItemHandler, type ItemHandlerProps } from '../context';
 
-export const Col = sveltify<
-  GetProps<typeof ACol> & {
-    itemIndex: number;
-    itemSlotKey?: string;
-    itemElement?: HTMLElement;
-  },
-  ['children']
->(({ itemIndex, itemSlotKey, itemElement, slots, ...props }) => {
-  const prevValueRef = useRef<Item>();
-  const { setItem } = useItems();
-  useEffect(() => {
-    if (itemElement) {
-      const value: Item = {
-        el: itemElement,
-        props,
-        slots,
-      };
-      if (!isEqual(prevValueRef.current, value)) {
-        prevValueRef.current = value;
-        setItem(itemSlotKey, itemIndex, value);
-      }
-    }
-  }, [itemIndex, itemSlotKey, itemElement, props, setItem, slots]);
-  return <span />;
-});
+export const Col = sveltify<GetProps<typeof ACol> & ItemHandlerProps>(
+  (props) => {
+    return <ItemHandler {...props} />;
+  }
+);
 
 export default Col;
diff --git a/frontend/antd/grid/context.ts b/frontend/antd/grid/context.ts
@@ -1,5 +1,6 @@
 import { createItemsContext } from '@utils/createItemsContext2';
 
-export const { withItemsContext, useItems } = createItemsContext();
+export const { withItemsContextProvider, useItems, ItemHandler } =
+  createItemsContext();
 
 export * from '@utils/createItemsContext2';
diff --git a/frontend/antd/grid/row/row.tsx b/frontend/antd/grid/row/row.tsx
@@ -2,10 +2,10 @@ import { sveltify } from '@svelte-preprocess-react';
 import { ReactSlot } from '@svelte-preprocess-react/react-slot';
 import { Col as ACol, type GetProps, Row as ARow } from 'antd';
 
-import { useItems, withItemsContext } from '../context';
+import { useItems, withItemsContextProvider } from '../context';
 
 export const Row = sveltify<GetProps<typeof ARow>>(
-  withItemsContext(['default'], ({ children, ...props }) => {
+  withItemsContextProvider(['default'], ({ children, ...props }) => {
     const {
       items: { default: cols },
     } = useItems<['default']>();