@piying/view-svelte 1.4.0

package/builder.d.ts

@@ -0,0 +1,4 @@
+import { FormBuilder } from '@piying/view-core';
+import type { SvelteSchemaHandle } from './svelte-schema';
+export declare class SvelteFormBuilder extends FormBuilder<SvelteSchemaHandle> {
+}

package/builder.js

@@ -0,0 +1,24 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { FormBuilder } from '@piying/view-core';
+var SvelteFormBuilder = /** @class */ (function (_super) {
+    __extends(SvelteFormBuilder, _super);
+    function SvelteFormBuilder() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return SvelteFormBuilder;
+}(FormBuilder));
+export { SvelteFormBuilder };

package/component/field-template.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { PiResolvedViewFieldConfig } from '../type/group';
+	import { signalToRef } from '../util/signal-convert.svelte';
+	import { PI_VIEW_FIELD_TOKEN, InjectorToken } from '../token';
+	import { createViewControlLink, getLazyImport, isLazyMark } from '@piying/view-core';
+	import { getContext, setContext } from 'svelte';
+	import type { Injector } from 'static-injector';
+	import PiWrapper from './wrapper.svelte';
+	const props: {
+		field: PiResolvedViewFieldConfig;
+	} = $props();
+	const injector = getContext<Injector>(InjectorToken)!;
+	const fieldInputs = signalToRef(() => {
+		return {
+			...props.field.attributes(),
+			...props.field.inputs(),
+			// todo outputs不应该加signal,因为没必要动态更新?
+			...props.field.outputs()
+		};
+	});
+	let controlRef = $state<any>();
+	const renderConfig = signalToRef(() => props.field.renderConfig());
+	const control = $derived.by(() => props.field.form.control);
+	$effect.pre(() => {
+		let dispose: (() => any) | undefined;
+		if (controlRef?.cva) {
+			dispose = createViewControlLink((() => control) as any, controlRef?.cva, injector);
+		}
+		return () => {
+			dispose?.();
+			dispose = undefined;
+		};
+	});
+	const fieldChildren = signalToRef(() => props.field.children?.());
+
+	const wrappers = signalToRef(() => props.field.wrappers());
+	const ComponentType = $derived.by(() => {
+		return props.field.define?.type;
+	});
+	const isLazy = $derived.by(() => {
+		return isLazyMark(props.field.define?.type);
+	});
+	const loading = $derived.by(() => {
+		return getLazyImport<() => Promise<any>>(props.field.define?.type)!();
+	});
+	const field = $derived(props.field);
+	setContext(PI_VIEW_FIELD_TOKEN, () => field);
+</script>
+
+{#if !renderConfig()?.hidden}
+	{#if field.define?.type}
+		{#snippet children()}
+			{#if isLazy}
+				{#await loading then LazyComponent}
+					{#if fieldChildren()}
+						<LazyComponent {...fieldInputs()}></LazyComponent>
+					{:else if field.form.control}
+						<LazyComponent {...fieldInputs()} bind:this={controlRef}></LazyComponent>
+					{:else}
+						<LazyComponent {...fieldInputs()}></LazyComponent>
+					{/if}
+				{/await}
+			{:else if fieldChildren()}
+				<ComponentType {...fieldInputs()}></ComponentType>
+			{:else if field.form.control}
+				<ComponentType {...fieldInputs()} bind:this={controlRef}></ComponentType>
+			{:else}
+				<ComponentType {...fieldInputs()}></ComponentType>
+			{/if}
+		{/snippet}
+		<PiWrapper wrappers={wrappers()!} {children}></PiWrapper>
+	{/if}
+{/if}

package/component/field-template.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PiResolvedViewFieldConfig } from '../type/group';
+type $$ComponentProps = {
+    field: PiResolvedViewFieldConfig;
+};
+declare const FieldTemplate: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldTemplate = ReturnType<typeof FieldTemplate>;
+export default FieldTemplate;

package/component/group.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import FieldTemplate from './field-template.svelte';
+	import { getContext } from 'svelte';
+	import { PI_VIEW_FIELD_TOKEN } from '../token';
+	import { signalToRef } from '../util/signal-convert.svelte';
+
+	const field = getContext<PI_VIEW_FIELD_TOKEN>(PI_VIEW_FIELD_TOKEN);
+	const children = signalToRef(() => field().children!())!;
+</script>
+
+{#each children()! as field, i (i)}
+	<FieldTemplate {field}></FieldTemplate>
+{/each}

package/component/group.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Group: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Group = InstanceType<typeof Group>;
+export default Group;

package/component/piying-view.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import * as v from 'valibot';
+	import { convert } from '@piying/view-core';
+	import {
+		ChangeDetectionScheduler,
+		ChangeDetectionSchedulerImpl,
+		createInjector,
+		createRootInjector,
+		DestroyRef,
+		untracked,
+		type EffectRef
+	} from 'static-injector';
+	import type { Injector } from 'static-injector';
+	import { setContext, untrack } from 'svelte';
+	import { InjectorToken } from '../token';
+	import { SvelteSchemaHandle } from '../svelte-schema';
+	import { SvelteFormBuilder } from '../builder';
+	import FieldTemplate from './field-template.svelte';
+	import { initListen } from '@piying/view-core';
+	let props: {
+		schema: v.BaseSchema<any, any, any> | v.SchemaWithPipe<any>;
+		model?: any;
+		modelChange?: (value: any) => void;
+		options: any;
+	} = $props();
+
+	const rootInjector = createRootInjector({
+		providers: [
+			{
+				provide: ChangeDetectionScheduler,
+				useClass: ChangeDetectionSchedulerImpl
+			}
+		]
+	});
+	setContext(InjectorToken, rootInjector);
+	const [field, subInjector] = $derived.by(() => {
+		const subInjector = createInjector({ providers: [], parent: rootInjector });
+
+		const field = convert(props.schema as any, {
+			handle: SvelteSchemaHandle as any,
+			builder: SvelteFormBuilder,
+			injector: subInjector,
+			registerOnDestroy: (fn) => {
+				subInjector!.get(DestroyRef).onDestroy(() => {
+					fn();
+				});
+			},
+			...props.options
+		});
+		return [field, subInjector];
+	});
+	$effect.pre(() => {
+		let ref: EffectRef | undefined;
+		if (field.form.control) {
+			const model = untrack(() => props.model);
+			ref = initListen(
+				typeof model !== 'undefined' ? model : undefined,
+				field!.form.control!,
+				subInjector as Injector,
+				(value) => {
+					untracked(() => {
+						if (field!.form.control?.valueNoError$$()) {
+							props.modelChange?.(value);
+						}
+					});
+				}
+			);
+		}
+		return () => {
+			subInjector.destroy();
+			ref?.destroy();
+		};
+	});
+
+	$effect.pre(() => {
+		field!.form.control?.updateValue(props.model);
+	});
+</script>
+
+<FieldTemplate {field}></FieldTemplate>

package/component/piying-view.svelte.d.ts

@@ -0,0 +1,10 @@
+import * as v from 'valibot';
+type $$ComponentProps = {
+    schema: v.BaseSchema<any, any, any> | v.SchemaWithPipe<any>;
+    model?: any;
+    modelChange?: (value: any) => void;
+    options: any;
+};
+declare const PiyingView: import("svelte").Component<$$ComponentProps, {}, "">;
+type PiyingView = ReturnType<typeof PiyingView>;
+export default PiyingView;

package/component/wrapper.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { CoreResolvedWrapperConfig } from '@piying/view-core';
+	import { signalToRef } from '../util/signal-convert.svelte';
+	import PiWrapper from './wrapper.svelte';
+	const dProps: {
+		wrappers: CoreResolvedWrapperConfig[];
+		children: any;
+	} = $props();
+	const restWrappers = $derived.by(() => dProps.wrappers!.slice(1));
+	const wrapper = $derived.by(() => dProps.wrappers?.[0]);
+	const inputs = signalToRef(() => ({
+		...wrapper?.inputs(),
+		...wrapper?.attributes(),
+		...wrapper?.outputs
+	}));
+</script>
+
+{#if wrapper}
+	{#snippet childWrapper()}
+		<PiWrapper wrappers={restWrappers} children={dProps.children}></PiWrapper>
+	{/snippet}
+	<wrapper.type {...inputs()} children={childWrapper}></wrapper.type>
+{:else}
+	{@render dProps.children()}
+{/if}

package/component/wrapper.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CoreResolvedWrapperConfig } from '@piying/view-core';
+type $$ComponentProps = {
+    wrappers: CoreResolvedWrapperConfig[];
+    children: any;
+};
+declare const Wrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type Wrapper = ReturnType<typeof Wrapper>;
+export default Wrapper;

package/index.d.ts

@@ -0,0 +1,12 @@
+import PiyingView from './component/piying-view.svelte';
+export { PiyingView };
+import PiyingFieldTemplate from './component/field-template.svelte';
+export { PiyingFieldTemplate };
+import PiyingViewGroup from './component/group.svelte';
+export { PiyingViewGroup };
+export * from './type';
+export * from './token';
+export * from './builder';
+export * from './svelte-schema';
+export * from './util/use-control-value-accessor.svelte';
+export * from './util/signal-convert.svelte';

package/index.js

@@ -0,0 +1,12 @@
+import PiyingView from './component/piying-view.svelte';
+export { PiyingView };
+import PiyingFieldTemplate from './component/field-template.svelte';
+export { PiyingFieldTemplate };
+import PiyingViewGroup from './component/group.svelte';
+export { PiyingViewGroup };
+export * from './type';
+export * from './token';
+export * from './builder';
+export * from './svelte-schema';
+export * from './util/use-control-value-accessor.svelte';
+export * from './util/signal-convert.svelte';

package/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "@piying/view-svelte",
+    "version": "1.4.0",
+    "description": "Piying view For Svelte;Valibot to Component",
+    "type": "module",
+    "homepage": "https://piying-org.github.io/website/docs/client/intro",
+    "repository": {
+        "url": "git+https://github.com/piying-org/piying-view.git",
+        "directory": "packages/svelte",
+        "type": "git"
+    },
+    "bugs": {
+        "url": "https://github.com/piying-org/piying-view/issues"
+    },
+    "author": {
+        "name": "wszgrcy",
+        "url": "https://github.com/wszgrcy",
+        "email": "wszgrcy@gmail.com"
+    },
+    "keywords": [
+        "Svelte",
+        "form",
+        "valibot",
+        "validation",
+        "validator",
+        "layout",
+        "listen",
+        "field",
+        "control",
+        "group",
+        "array",
+        "control",
+        "metadata"
+    ],
+    "license": "MIT",
+    "dependencies": {
+        "@piying/view-core": "^1.4.0",
+        "fast-equals": "^5.2.2",
+        "static-injector": "^6.1.2",
+        "valibot": "^1.1.0"
+    },
+    "sideEffects": false,
+    "peerDependencies": {
+        "svelte": "^5.0.0"
+    },
+    "module": "index.js",
+    "typings": "index.d.ts",
+    "exports": {
+        "./package.json": {
+            "default": "./package.json"
+        },
+        ".": {
+            "types": "./index.d.ts",
+            "svelte": "./index.js",
+            "default": "./index.js"
+        }
+    }
+}

package/readme.md

@@ -0,0 +1,27 @@
+<div><a href="https://www.npmjs.com/package/@piying/view-core"><img src="https://img.shields.io/npm/v/@piying/view-core" alt="NPM Version" /></a> <a href="https://coveralls.io/github/piying-org/piying-view?branch=main"><img src="https://coveralls.io/repos/github/piying-org/piying-view/badge.svg" alt="Coverage Status" ></a> <a href=""><img src="https://img.shields.io/badge/License-MIT-teal.svg" alt="MIT License" /></a></div>
+
+## document
+
+- https://piying-org.github.io/website/docs/client/intro
+
+## start
+
+- npm i
+- npm run build:core
+
+## test
+
+- npx playwright install
+- npm run test:all
+
+### test Core/Angular
+
+- npm run test
+
+### test Vue
+
+- npm run test:vue
+
+### test React
+
+- npm run test:react

package/svelte-schema.d.ts

@@ -0,0 +1,6 @@
+import { CoreSchemaHandle } from '@piying/view-core';
+import type { PiResolvedViewFieldConfig } from './type/group';
+export declare class SvelteSchemaHandle extends CoreSchemaHandle<SvelteSchemaHandle, () => PiResolvedViewFieldConfig> {
+    type?: any;
+    contents?: any[];
+}

package/svelte-schema.js

@@ -0,0 +1,24 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { CoreSchemaHandle } from '@piying/view-core';
+var SvelteSchemaHandle = /** @class */ (function (_super) {
+    __extends(SvelteSchemaHandle, _super);
+    function SvelteSchemaHandle() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return SvelteSchemaHandle;
+}(CoreSchemaHandle));
+export { SvelteSchemaHandle };

package/token.d.ts

@@ -0,0 +1,4 @@
+import type { PiResolvedViewFieldConfig } from './type/group';
+export declare const InjectorToken: unique symbol;
+export declare const PI_VIEW_FIELD_TOKEN: unique symbol;
+export type PI_VIEW_FIELD_TOKEN = () => PiResolvedViewFieldConfig;

package/token.js

@@ -0,0 +1,2 @@
+export var InjectorToken = Symbol();
+export var PI_VIEW_FIELD_TOKEN = Symbol();

package/type/group.d.ts

@@ -0,0 +1,41 @@
+import type { SvelteSchemaHandle } from '../svelte-schema';
+import type { ConfigMergeStrategy, CoreResolvedComponentDefine, PiResolvedCommonViewFieldConfig } from '@piying/view-core';
+import type { SetOptional } from '@piying/view-core';
+export interface RawDirectiveOutputs {
+    [name: string]: (event: any, field: PiResolvedViewFieldConfig) => void;
+}
+export type RawWrapperDefine = {
+    inputs?: Record<string, any>;
+    type: string;
+};
+export type ResolvedrapperDefine = {
+    inputs?: Record<string, any>;
+    type: any;
+};
+export interface RawComponentDefine {
+    type: string;
+}
+export interface ComponentFieldConfig {
+    type?: string;
+    contents?: any[];
+}
+export type ResolvedComponentFieldConfig = Omit<ComponentFieldConfig, 'inputs' | 'outputs' | 'directives' | 'wrappers'>;
+export type PiDefaultRawViewFieldConfig = Pick<SvelteSchemaHandle, 'inputs' | 'outputs' | 'wrappers' | 'formConfig' | 'renderConfig' | 'props'>;
+export type PiResolvedViewFieldConfig = PiResolvedCommonViewFieldConfig<() => PiResolvedViewFieldConfig, CoreResolvedComponentDefine> & ResolvedComponentFieldConfig & {
+    /** 除了无component的控件,其他情况下都应该有define,group/array会赋值默认 */
+    define?: RawComponentDefine;
+};
+export type PiComponentDefaultConfig = {
+    type: any | (() => Promise<any>);
+} & Omit<SetOptional<PiDefaultRawViewFieldConfig, 'formConfig'>, 'type'>;
+export interface PiViewConfig {
+    types?: Record<string, PiComponentDefaultConfig>;
+    wrappers?: Record<string, {
+        type: any | (() => Promise<any>);
+        inputs?: Record<string, any>;
+    }>;
+    defaultConfig?: PiDefaultRawViewFieldConfig;
+    /** merge 数组/对象会合并 replace 优先自身/组件/全局 */
+    defaultConfigMergeStrategy?: ConfigMergeStrategy | ConfigMergeStrategyObject;
+}
+export type ConfigMergeStrategyObject = Record<keyof PiDefaultRawViewFieldConfig, ConfigMergeStrategy>;

package/type/group.js

@@ -0,0 +1 @@
+export {};

package/type/index.d.ts

@@ -0,0 +1 @@
+export * from './group';

package/type/index.js

@@ -0,0 +1 @@
+export * from './group';

package/util/signal-convert.svelte.d.ts

@@ -0,0 +1 @@
+export declare function signalToRef<T>(value: () => T | undefined): () => T;

package/util/signal-convert.svelte.js

@@ -0,0 +1,20 @@
+import { effect } from 'static-injector';
+import { InjectorToken } from '../token';
+import { getContext } from 'svelte';
+export function signalToRef(value) {
+    var injector = getContext(InjectorToken);
+    var dataRef = $state.raw(undefined);
+    $effect.pre(function () {
+        dataRef = value();
+        var ref = effect(function () {
+            var currentValue = value();
+            if (!Object.is(dataRef, currentValue)) {
+                dataRef = currentValue;
+            }
+        }, { injector: injector });
+        return function () {
+            ref.destroy();
+        };
+    });
+    return function () { return dataRef; };
+}

package/util/use-control-value-accessor.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare function useControlValueAccessor(): {
+    cva: ControlValueAccessor;
+    cvaa: {
+        readonly value: unknown;
+        readonly disabled: boolean;
+        valueChange: (input: any) => void;
+        touchedChange: () => void;
+    };
+};

package/util/use-control-value-accessor.svelte.js

@@ -0,0 +1,38 @@
+export function useControlValueAccessor() {
+    var value = $state();
+    var disabled = $state(false);
+    var onChange;
+    var touched;
+    var instance = {
+        writeValue: function (obj) {
+            value = obj;
+        },
+        registerOnChange: function (fn) {
+            onChange = fn;
+        },
+        registerOnTouched: function (fn) {
+            touched = fn;
+        },
+        setDisabledState: function (value) {
+            disabled = value;
+        }
+    };
+    return {
+        cva: instance,
+        cvaa: {
+            get value() {
+                return value;
+            },
+            get disabled() {
+                return disabled;
+            },
+            valueChange: function (input) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(input);
+                value = input;
+            },
+            touchedChange: function () {
+                touched();
+            }
+        }
+    };
+}