Skip to content

Commit 330fde1

Browse files
Col0ringCol0ring
committed
refactor(wip): components
1 parent 63b838e commit 330fde1

11 files changed

Lines changed: 89 additions & 80 deletions

File tree

‎frontend/antd/button/Index.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
const AwaitedButton = importComponent(() => import('./button'));
1212
1313
const props = $props();
14-
const { gradio, getComponentProps, getAdditionalProps, children } = getProps<{
14+
const { getComponentProps, getAdditionalProps, children } = getProps<{
1515
additional_props: Record<string, any>;
1616
value: string | undefined;
1717
elem_style: React.CSSProperties;
@@ -36,7 +36,6 @@
3636
} = getComponentProps();
3737
return {
3838
additionalProps: getAdditionalProps(),
39-
gradio,
4039
_internal,
4140
as_item,
4241
restProps,

‎frontend/antd/icon/Index.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
const AwaitedIcon = importComponent(() => import('./icon'));
1111
const props = $props();
1212
13-
const { gradio, getComponentProps, getAdditionalProps, children } = getProps<{
13+
const { getComponentProps, getAdditionalProps, children } = getProps<{
1414
additional_props: Record<string, any>;
1515
_internal: {
1616
layout?: boolean;
@@ -31,7 +31,6 @@
3131
} = getComponentProps();
3232
return {
3333
additionalProps: getAdditionalProps(),
34-
gradio,
3534
_internal,
3635
as_item,
3736
restProps,

‎frontend/antd/icon/iconfont-provider/Index.svelte‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<script lang="ts">
22
import {
3-
importComponent,
43
getProps,
4+
importComponent,
55
processProps,
66
} from '@svelte-preprocess-react/component';
77
88
const AwaitIconFontProvider = importComponent(
99
() => import('./iconfont-provider')
1010
);
1111
const props = $props();
12-
const { gradio, getComponentProps, getAdditionalProps, children } = getProps<{
12+
const { getComponentProps, getAdditionalProps, children } = getProps<{
1313
additionalProps: Record<string, any>;
1414
}>(() => props);
1515
@@ -25,7 +25,6 @@
2525
} = getComponentProps();
2626
return {
2727
additionalProps: getAdditionalProps(),
28-
gradio,
2928
_internal,
3029
as_item,
3130
restProps,

‎frontend/antdx/actions/actions.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { sveltify } from '@svelte-preprocess-react';
22
import React, { useMemo } from 'react';
33
import { Actions as XActions, type ActionsProps } from '@ant-design/x';
4-
import type { ActionItem } from '@ant-design/x/es/actions/interface';
4+
import type { ItemType } from '@ant-design/x/es/actions/interface';
55
import { renderItems } from '@utils/renderItems';
66
import classNames from 'classnames';
77

@@ -24,7 +24,7 @@ export const Actions = sveltify<Partial<ActionsProps>>(
2424
items={useMemo(() => {
2525
return (
2626
items ||
27-
renderItems<ActionItem>(resolvedSlotItems, {
27+
renderItems<ItemType>(resolvedSlotItems, {
2828
clone: true,
2929
}) ||
3030
[]

‎frontend/base/application/Application.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<svelte:options />
22

33
<script lang="ts">
4-
import type React from 'react';
54
import { getProps } from '@svelte-preprocess-react/component';
5+
import type React from 'react';
66
import { styleObject2String } from '@utils/style';
77
import cls from 'classnames';
88
import { onDestroy, onMount } from 'svelte';

‎frontend/base/auto-loading/Index.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
const AwaitedAutoLoading = importComponent(() => import('./auto-loading'));
1313
const props = $props();
1414
15-
const { gradio, getComponentProps, getAdditionalProps, children } = getProps<{
15+
const { getComponentProps, getAdditionalProps, children } = getProps<{
1616
additionalProps: Record<string, any>;
1717
generating: boolean;
1818
showError: boolean;
@@ -33,7 +33,6 @@
3333
} = getComponentProps();
3434
return {
3535
additionalProps: getAdditionalProps(),
36-
gradio,
3736
restProps,
3837
_internal,
3938
as_item,

‎frontend/base/div/Index.svelte‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<script lang="ts">
22
import {
3+
getProps,
34
importComponent,
45
processProps,
5-
getProps,
66
} from '@svelte-preprocess-react/component';
77
import type React from 'react';
88
import cls from 'classnames';
99
1010
const AwaitedDiv = importComponent(() => import('./div'));
1111
const props = $props();
1212
13-
const { gradio, getComponentProps, getAdditionalProps, children } = getProps<{
13+
const { getComponentProps, getAdditionalProps, children } = getProps<{
1414
value: string;
1515
elem_style: React.CSSProperties;
1616
additional_props: Record<string, any>;
@@ -32,7 +32,6 @@
3232
} = getComponentProps();
3333
return {
3434
additionalProps: getAdditionalProps(),
35-
gradio,
3635
_internal,
3736
as_item,
3837
restProps,

‎frontend/base/each/EachItem.svelte‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,37 @@
1-
<svelte:options accessors={true} />
2-
31
<script lang="ts">
42
import { importComponent } from '@svelte-preprocess-react/component';
53
// import { getSetSlotContextFn } from '@svelte-preprocess-react/slot';
64
import { merge } from 'lodash-es';
75
86
import Fragment from '../fragment/Index.svelte';
7+
import type { Snippet } from 'svelte';
98
109
const AwaitedEachItem = importComponent(() => import('./each.item'));
11-
export let context_value: Record<PropertyKey, any>;
12-
export let index: number;
13-
export let subIndex: number;
14-
export let value: Record<PropertyKey, any>;
15-
// const setSlotContext = getSetSlotContextFn();
10+
const {
11+
context_value,
12+
index,
13+
subIndex,
14+
value,
15+
children,
16+
}: {
17+
context_value: Record<PropertyKey, any>;
18+
index: number;
19+
subIndex: number;
20+
value: Record<PropertyKey, any>;
21+
children: Snippet;
22+
} = $props();
23+
24+
const resolved_value = $derived(
25+
typeof value !== 'object' || Array.isArray(value) ? { value } : value
26+
);
1627
17-
$: resolved_value =
18-
typeof value !== 'object' || Array.isArray(value) ? { value } : value;
19-
$: merged_value = merge({}, context_value, resolved_value);
20-
// use lodash to deep merge
21-
// setSlotContext(merged_value);
22-
// $: setSlotContext(merged_value);
28+
const merged_value = $derived(merge({}, context_value, resolved_value));
2329
</script>
2430

2531
<Fragment _internal={{ index, subIndex: index + subIndex }}>
2632
{#await AwaitedEachItem then EachItem}
2733
<EachItem __internal_value={merged_value} slots={{}}>
28-
<slot />
34+
{@render children()}
2935
</EachItem>
3036
{/await}
3137
</Fragment>

‎frontend/base/each/Index.svelte‎

Lines changed: 56 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,74 @@
1-
<svelte:options accessors={true} />
2-
31
<script lang="ts">
42
import {
5-
importComponent,
63
getProps,
4+
importComponent,
75
processProps,
86
} from '@svelte-preprocess-react/component';
9-
import { getSlotKey } from '@svelte-preprocess-react/svelte-contexts/slot.svelte';
107
import { getSubIndex } from '@svelte-preprocess-react/svelte-contexts/each.svelte';
8+
import { getSlotKey } from '@svelte-preprocess-react/svelte-contexts/slot.svelte';
119
1210
import EachItem from './EachItem.svelte';
1311
1412
const AwaitedEach = importComponent(() => import('./each'));
1513
const AwaitedEachPlaceholder = importComponent(
1614
() => import('./each.placeholder')
1715
);
18-
export let context_value: Record<PropertyKey, any>;
19-
export let value: Record<PropertyKey, any>[] = [];
20-
export let as_item: string | undefined;
21-
// gradio properties
22-
export let visible = true;
23-
export let _internal: {
24-
index?: number;
25-
} = {};
16+
const props = $props();
17+
const { getComponentProps, children } = getProps<{
18+
context_value: Record<PropertyKey, any> | undefined;
19+
value: Record<PropertyKey, any>[] | undefined;
20+
_internal: {
21+
index?: number;
22+
};
23+
}>(() => props);
24+
2625
// if ms.Each inside ms.Each
2726
const subIndex = getSubIndex();
2827
const slotKey = getSlotKey();
29-
const [mergedProps, update] = getSlotContext(
30-
{
31-
_internal,
32-
value,
33-
as_item,
34-
visible,
35-
restProps: $$restProps,
36-
context_value,
28+
29+
const getProceedProps = processProps(
30+
() => {
31+
const {
32+
visible,
33+
_internal,
34+
value,
35+
as_item,
36+
elem_classes,
37+
elem_id,
38+
elem_style,
39+
context_value,
40+
...restProps
41+
} = getComponentProps();
42+
return {
43+
_internal,
44+
as_item,
45+
value,
46+
visible,
47+
elem_id,
48+
elem_classes,
49+
elem_style,
50+
context_value,
51+
restProps,
52+
};
3753
},
3854
undefined,
39-
{
40-
shouldResetSlotKey: false,
41-
}
55+
{ shouldResetSlotKey: false }
4256
);
43-
$: update({
44-
_internal,
45-
value,
46-
as_item,
47-
visible,
48-
restProps: $$restProps,
49-
context_value,
50-
});
51-
let merged_value: typeof value = [];
52-
let merged_context_value: typeof context_value;
53-
let force_clone = false;
57+
58+
const proceedProps = $derived(getProceedProps());
59+
60+
let merged_value: typeof proceedProps.value = $state([]);
61+
let merged_context_value: typeof proceedProps.context_value = $state({});
62+
let force_clone = $state(false);
5463
</script>
5564

56-
{#if $mergedProps.visible}
65+
{#if proceedProps.visible}
5766
{#await AwaitedEachPlaceholder then EachPlaceholder}
5867
<EachPlaceholder
59-
value={$mergedProps.value}
60-
contextValue={$mergedProps.context_value}
68+
value={proceedProps.value}
69+
contextValue={proceedProps.context_value}
6170
slots={{}}
62-
{...$mergedProps.restProps}
71+
{...proceedProps.restProps}
6372
onChange={(props) => {
6473
merged_value = props.value || [];
6574
merged_context_value = props.contextValue || {};
@@ -69,24 +78,24 @@
6978
{#if force_clone}
7079
{#await AwaitedEach then Each}
7180
<Each
72-
{...$mergedProps.restProps}
73-
contextValue={$mergedProps.context_value}
74-
value={$mergedProps.value}
75-
__internal_slot_key={$slotKey}
81+
{...proceedProps.restProps}
82+
contextValue={proceedProps.context_value}
83+
value={proceedProps.value}
84+
__internal_slot_key={slotKey?.value}
7685
slots={{}}
7786
>
78-
<slot />
87+
{@render children()}
7988
</Each>
8089
{/await}
8190
{:else}
8291
{#each merged_value as item, i (i)}
8392
<EachItem
84-
context_value={merged_context_value}
93+
context_value={merged_context_value || {}}
8594
value={item}
86-
index={($mergedProps._internal.index || 0) + (subIndex || 0)}
87-
subIndex={(subIndex || 0) + i}
95+
index={(proceedProps._internal.index || 0) + (subIndex || 0)}
96+
subIndex={(subIndex?.value || 0) + i}
8897
>
89-
<slot />
98+
{@render children()}
9099
</EachItem>
91100
{/each}
92101
{/if}

‎frontend/base/slot/Index.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import { createFunction } from '@utils/createFunction';
99
1010
const props = $props();
11-
const { gradio, getComponentProps, getAdditionalProps, children } = getProps<{
11+
const { getComponentProps, getAdditionalProps, children } = getProps<{
1212
value: string;
1313
visible: boolean;
1414
params_mapping: string;
@@ -20,7 +20,6 @@
2020
const { value, visible, as_item, _internal, params_mapping } =
2121
getComponentProps();
2222
return {
23-
gradio,
2423
restProps: {},
2524
additionalProps: getAdditionalProps(),
2625
value,

0 commit comments

Comments
 (0)