build: 清理 tinyflow-ui 构建告警
- 收口 Svelte props 响应式引用与 custom element props 声明 - 清理局部未使用样式与类型告警并保持现有业务语义
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
<svelte:options customElement={{
|
||||
tag: "tinyflow-component",
|
||||
shadow: "none",
|
||||
// props: {
|
||||
// options: { reflect: true, type: 'Object', attribute: 'options' },
|
||||
// onInit: { reflect: true, type: 'Object', attribute: 'onInit' }
|
||||
// },
|
||||
props: {
|
||||
options: { type: 'Object', attribute: 'options' },
|
||||
onInit: { type: 'Object', attribute: 'on-init' }
|
||||
},
|
||||
}} />
|
||||
|
||||
<script lang="ts">
|
||||
@@ -14,31 +14,50 @@
|
||||
import type {TinyflowData, TinyflowOptions} from '#types';
|
||||
import {setContext} from 'svelte';
|
||||
|
||||
const { options, onInit }: {
|
||||
const props = $props<{
|
||||
options: TinyflowOptions,
|
||||
onInit: (svelteFlow: ReturnType<typeof useSvelteFlow>) => void,
|
||||
} = $props();
|
||||
}>();
|
||||
|
||||
let { data } = options;
|
||||
let initialViewport = null;
|
||||
|
||||
if (typeof data === 'string') {
|
||||
try {
|
||||
data = JSON.parse(data.trim());
|
||||
} catch (e) {
|
||||
console.error('Invalid JSON data:', data);
|
||||
const parseData = (source: TinyflowOptions['data']) => {
|
||||
let nextData = source;
|
||||
if (typeof nextData === 'string') {
|
||||
try {
|
||||
nextData = JSON.parse(nextData.trim());
|
||||
} catch (error) {
|
||||
console.error('Invalid JSON data:', nextData, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
initialViewport = (data as TinyflowData)?.viewport || null;
|
||||
return nextData as TinyflowData | null | undefined;
|
||||
};
|
||||
|
||||
const getOptions = () => props.options;
|
||||
const contextOptions = new Proxy({} as TinyflowOptions, {
|
||||
get(_target, property) {
|
||||
return (getOptions() as Record<PropertyKey, unknown>)[property];
|
||||
},
|
||||
has(_target, property) {
|
||||
return property in getOptions();
|
||||
},
|
||||
ownKeys() {
|
||||
return Reflect.ownKeys(getOptions());
|
||||
},
|
||||
getOwnPropertyDescriptor(_target, property) {
|
||||
const descriptor = Object.getOwnPropertyDescriptor(getOptions(), property);
|
||||
return descriptor ? { ...descriptor, configurable: true } : undefined;
|
||||
}
|
||||
}) as TinyflowOptions;
|
||||
const data = parseData(getOptions().data);
|
||||
const initialViewport = data?.viewport || null;
|
||||
store.init(
|
||||
(data as TinyflowData)?.nodes || [],
|
||||
(data as TinyflowData)?.edges || [],
|
||||
data?.nodes || [],
|
||||
data?.edges || [],
|
||||
initialViewport,
|
||||
);
|
||||
setContext('tinyflow_options', options);
|
||||
setContext('tinyflow_options', contextOptions);
|
||||
</script>
|
||||
|
||||
|
||||
<SvelteFlowProvider>
|
||||
<TinyflowCore {onInit} />
|
||||
<TinyflowCore onInit={props.onInit} />
|
||||
</SvelteFlowProvider>
|
||||
|
||||
Reference in New Issue
Block a user