refactor(wip): params render

modelscope · Jan 9, 2025 · b974c02 · b974c02
1 parent 3bcdda1
commit b974c02
Show file tree

Hide file tree

Showing 15 changed files with 219 additions and 159 deletions.
diff --git a/backend/modelscope_studio/components/base/div/__init__.py b/backend/modelscope_studio/components/base/div/__init__.py
@@ -63,7 +63,6 @@ def __init__(
                          elem_style=elem_style,
                          **kwargs)
 
-        self._internal.update(fragment=True)
         self.value = value
         self.props = props
 

diff --git a/backend/modelscope_studio/components/base/span/__init__.py b/backend/modelscope_studio/components/base/span/__init__.py
@@ -63,7 +63,6 @@ def __init__(
                          elem_style=elem_style,
                          **kwargs)
 
-        self._internal.update(fragment=True)
         self.value = value
         self.props = props
 

diff --git a/backend/modelscope_studio/components/base/text/__init__.py b/backend/modelscope_studio/components/base/text/__init__.py
@@ -34,7 +34,6 @@ def __init__(
                          as_item=as_item,
                          elem_style=elem_style,
                          **kwargs)
-        self._internal.update(fragment=True)
         self.value = value
 
     FRONTEND_DIR = resolve_frontend_dir("text", type="base")

diff --git a/frontend/base/div/Index.svelte b/frontend/base/div/Index.svelte
@@ -1,14 +1,17 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-  import { bindEvents } from '@svelte-preprocess-react/component';
+  import {
+    bindEvents,
+    importComponent,
+  } from '@svelte-preprocess-react/component';
   import { getSlotContext } from '@svelte-preprocess-react/slot';
   import type React from 'react';
   import type { Gradio } from '@gradio/utils';
-  import { styleObject2String } from '@utils/styleObject2String';
+  import cls from 'classnames';
   import { writable } from 'svelte/store';
 
-  import ShowFragment from '../fragment/ShowFragment.svelte';
+  const AwaitedDiv = importComponent(() => import('./div'));
 
   export let value: string = '';
   export let as_item: string | undefined;
@@ -21,31 +24,24 @@
   export let visible = true;
   export let _internal: {
     layout?: boolean;
-    fragment?: boolean;
   } = {};
 
   export let elem_id = '';
   export let elem_classes: string[] = [];
-  export let elem_style: React.CSSProperties | string = {};
+  export let elem_style: React.CSSProperties = {};
 
-  let el: HTMLDivElement | undefined;
-
-  const [mergedProps, update] = getSlotContext(
-    {
-      gradio,
-      props: $updatedProps,
-      _internal,
-      value,
-      as_item,
-      visible,
-      elem_id,
-      elem_classes,
-      elem_style,
-      restProps: $$restProps,
-    },
-    undefined,
-    { shouldRestSlotKey: !_internal.fragment }
-  );
+  const [mergedProps, update] = getSlotContext({
+    gradio,
+    props: $updatedProps,
+    _internal,
+    value,
+    as_item,
+    visible,
+    elem_id,
+    elem_classes,
+    elem_style,
+    restProps: $$restProps,
+  });
   $: update({
     gradio,
     props: $updatedProps,
@@ -58,50 +54,23 @@
     elem_style,
     restProps: $$restProps,
   });
-  let events: { event: string; handler: (...args: any[]) => any }[] = [];
-
-  $: {
-    const reactEvents = bindEvents($mergedProps);
-    events.forEach(({ event, handler }) => {
-      el?.removeEventListener(event, handler);
-    });
-    events = Object.keys(reactEvents).reduce(
-      (acc, prop) => {
-        const event = prop.replace(/^on(.+)/, (_, replaceValue: string) => {
-          return replaceValue[0].toLowerCase() + replaceValue.slice(1);
-        });
-        const handler = reactEvents[prop];
-        el?.addEventListener(event, handler);
-        acc.push({
-          event,
-          handler,
-        });
-        return acc;
-      },
-      [] as typeof events
-    );
-  }
 </script>
 
 {#if $mergedProps.visible}
-  <ShowFragment {...$$props} show={$mergedProps._internal.fragment}>
-    <div
-      bind:this={el}
-      style={typeof $mergedProps.elem_style === 'object'
-        ? styleObject2String($mergedProps.elem_style)
-        : $mergedProps.elem_style}
-      class={$mergedProps.elem_classes.join(' ')}
+  {#await AwaitedDiv then Div}
+    <Div
+      style={$mergedProps.elem_style}
+      className={cls($mergedProps.elem_classes)}
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
+      {...bindEvents($mergedProps)}
+      slots={{}}
+      value={$mergedProps.value}
     >
-      {#if $mergedProps._internal.layout}
-        <slot></slot>
-      {:else}
-        {$mergedProps.value}
-      {/if}
-    </div>
-  </ShowFragment>
+      <slot></slot>
+    </Div>
+  {/await}
 {/if}
 
 <style>

diff --git a/frontend/base/div/div.tsx b/frontend/base/div/div.tsx
@@ -0,0 +1,17 @@
+import { sveltify } from '@svelte-preprocess-react';
+import React from 'react';
+import { useTargets } from '@utils/hooks/useTargets';
+
+export const Div = sveltify<
+  React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > & {
+    value?: string;
+  }
+>(({ slots: _slots, value, children, ...props }) => {
+  const targets = useTargets(children);
+  return <div {...props}>{targets.length > 0 ? children : value}</div>;
+});
+
+export default Div;
diff --git a/frontend/base/each/Each.svelte b/frontend/base/each/Each.svelte
@@ -12,7 +12,6 @@
   export let value: Record<PropertyKey, any>;
   const setSlotContext = getSetSlotContextFn();
 
-  // 如果是 array 呢
   $: resolved_value =
     typeof value !== 'object' || Array.isArray(value) ? { value } : value;
 

diff --git a/frontend/base/each/each.tsx b/frontend/base/each/each.tsx
@@ -0,0 +1,46 @@
+import { sveltify } from '@svelte-preprocess-react';
+import { RenderParamsProvider } from '@svelte-preprocess-react/context';
+import type React from 'react';
+import { useMemo } from 'react';
+import { merge } from 'lodash-es';
+
+export interface EachProps {
+  value?: any[];
+  context_value?: Record<PropertyKey, any>;
+  children?: React.ReactNode;
+}
+// 在使用时需要判断是否是 each 组件，然后执行这个方法，不需要 subSlotIndex 了
+
+const Item: React.FC<{
+  value?: any;
+  context_value?: Record<PropertyKey, any>;
+  children?: React.ReactNode;
+}> = ({ value, children, context_value }) => {
+  const resolvedValue = useMemo(() => {
+    return typeof value !== 'object' || Array.isArray(value)
+      ? { value }
+      : value;
+  }, [value]);
+  const ctx = useMemo(() => {
+    return merge(context_value, resolvedValue);
+  }, [context_value, resolvedValue]);
+  return <RenderParamsProvider ctx={ctx}>{children}</RenderParamsProvider>;
+};
+
+export function getEachChildren({ value, children, context_value }: EachProps) {
+  return value?.map((item, i) => {
+    return (
+      <Item key={i} value={item} context_value={context_value}>
+        {children}
+      </Item>
+    );
+  });
+}
+
+export const Each = sveltify<EachProps>(
+  ({ value, context_value, children }) => {
+    return getEachChildren({ value, children, context_value });
+  }
+);
+
+export default Each;
diff --git a/frontend/base/slot/Index.svelte b/frontend/base/slot/Index.svelte
@@ -2,11 +2,11 @@
 
 <script lang="ts">
   import {
-    getSetSlotContextFn,
+    // getSetSlotContextFn,
     getSetSlotFn,
     getSetSlotParamsMappingFnFn,
     getSlotContext,
-    getSlotParams,
+    // getSlotParams,
     setSlotKey,
   } from '@svelte-preprocess-react/slot';
   import { createFunction } from '@utils/createFunction';
@@ -19,7 +19,7 @@
   export let _internal = {};
   export let skip_context_value = true;
 
-  const slotParams = getSlotParams();
+  // const slotParams = getSlotParams();
 
   const [mergedProps, update] = getSlotContext({
     _internal,
@@ -60,14 +60,14 @@
   const slotParamsMappingFn = getSetSlotParamsMappingFnFn(paramsMappingFn);
   $: slotParamsMappingFn.set(paramsMappingFn);
 
-  const setSlotContext = getSetSlotContextFn({ inherit: true });
-  $: {
-    if ($slotParams && $slotParams[currentValue]) {
-      if (paramsMappingFn) {
-        setSlotContext(paramsMappingFn(...$slotParams[currentValue]));
-      }
-    }
-  }
+  // const setSlotContext = getSetSlotContextFn({ inherit: true });
+  // $: {
+  //   if ($slotParams && $slotParams[currentValue]) {
+  //     if (paramsMappingFn) {
+  //       setSlotContext(paramsMappingFn(...$slotParams[currentValue]));
+  //     }
+  //   }
+  // }
 </script>
 
 {#if $mergedProps.visible}

diff --git a/frontend/base/span/Index.svelte b/frontend/base/span/Index.svelte
@@ -1,14 +1,17 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-  import { bindEvents } from '@svelte-preprocess-react/component';
+  import {
+    bindEvents,
+    importComponent,
+  } from '@svelte-preprocess-react/component';
   import { getSlotContext } from '@svelte-preprocess-react/slot';
   import type React from 'react';
   import type { Gradio } from '@gradio/utils';
-  import { styleObject2String } from '@utils/styleObject2String';
+  import cls from 'classnames';
   import { writable } from 'svelte/store';
 
-  import ShowFragment from '../fragment/ShowFragment.svelte';
+  const AwaitedSpan = importComponent(() => import('./span'));
 
   export let value: string = '';
   export let as_item: string | undefined;
@@ -21,31 +24,24 @@
   export let visible = true;
   export let _internal: {
     layout?: boolean;
-    fragment?: boolean;
   } = {};
 
   export let elem_id = '';
   export let elem_classes: string[] = [];
-  export let elem_style: React.CSSProperties | string = {};
+  export let elem_style: React.CSSProperties = {};
 
-  let el: HTMLSpanElement | undefined;
-
-  const [mergedProps, update] = getSlotContext(
-    {
-      gradio,
-      props: $updatedProps,
-      _internal,
-      value,
-      as_item,
-      visible,
-      elem_id,
-      elem_classes,
-      elem_style,
-      restProps: $$restProps,
-    },
-    undefined,
-    { shouldRestSlotKey: !_internal.fragment }
-  );
+  const [mergedProps, update] = getSlotContext({
+    gradio,
+    props: $updatedProps,
+    _internal,
+    value,
+    as_item,
+    visible,
+    elem_id,
+    elem_classes,
+    elem_style,
+    restProps: $$restProps,
+  });
   $: update({
     gradio,
     props: $updatedProps,
@@ -58,50 +54,23 @@
     elem_style,
     restProps: $$restProps,
   });
-  let events: { event: string; handler: (...args: any[]) => any }[] = [];
-
-  $: {
-    const reactEvents = bindEvents($mergedProps);
-    events.forEach(({ event, handler }) => {
-      el?.removeEventListener(event, handler);
-    });
-    events = Object.keys(reactEvents).reduce(
-      (acc, prop) => {
-        const event = prop.replace(/^on(.+)/, (_, replaceValue: string) => {
-          return replaceValue[0].toLowerCase() + replaceValue.slice(1);
-        });
-        const handler = reactEvents[prop];
-        el?.addEventListener(event, handler);
-        acc.push({
-          event,
-          handler,
-        });
-        return acc;
-      },
-      [] as typeof events
-    );
-  }
 </script>
 
 {#if $mergedProps.visible}
-  <ShowFragment {...$$props} show={$mergedProps._internal.fragment}>
-    <span
-      bind:this={el}
-      style={typeof $mergedProps.elem_style === 'object'
-        ? styleObject2String($mergedProps.elem_style)
-        : $mergedProps.elem_style}
-      class={$mergedProps.elem_classes.join(' ')}
+  {#await AwaitedSpan then Span}
+    <Span
+      style={$mergedProps.elem_style}
+      className={cls($mergedProps.elem_classes)}
       id={$mergedProps.elem_id}
       {...$mergedProps.restProps}
       {...$mergedProps.props}
+      {...bindEvents($mergedProps)}
+      slots={{}}
+      value={$mergedProps.value}
     >
-      {#if $mergedProps._internal.layout}
-        <slot></slot>
-      {:else}
-        {$mergedProps.value}
-      {/if}
-    </span>
-  </ShowFragment>
+      <slot></slot>
+    </Span>
+  {/await}
 {/if}
 
 <style>