@questpie/admin 2.0.0 → 3.0.0

package/dist/client/views/collection/field-renderer.mjs

@@ -1,13 +1,14 @@
 import { useResolveText } from "../../i18n/hooks.mjs";
 import { useScopedLocale } from "../../runtime/locale-scope.mjs";
-import { buildComponentProps, getFieldContext, getFieldOptions, getFullFieldName } from "./field-context.mjs";
 import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
-import { useCollectionMeta } from "../../hooks/use-collection-meta.mjs";
+import { scopeDependencies, trackDependencies } from "../../utils/dependency-tracker.mjs";
+import { buildComponentProps, getFieldContext, getFieldOptions, getFullFieldName } from "./field-context.mjs";
+import { Spinner } from "../../components/ui/spinner.mjs";
 import { useFieldHooks } from "../../hooks/use-field-hooks.mjs";
-import { useGlobalMeta } from "../../hooks/use-global-meta.mjs";
-import * as React$1 from "react";
-import { useFormContext, useWatch } from "react-hook-form";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
+import { useFormContext, useWatch } from "react-hook-form";
 
 //#region src/client/views/collection/field-renderer.tsx
 /**
@@ -18,14 +19,101 @@ import { Fragment, jsx } from "react/jsx-runtime";
 */
 function renderConfigError(message) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive rounded",
+		className: "border-destructive/40 bg-destructive/5 text-destructive rounded border p-3 text-sm",
 		children: message
 	});
 }
 function stripFieldUiOptions(options) {
-	const { label, description, placeholder, required, disabled, readOnly, visible, localized, locale, ...rest } = options;
+	const rest = { ...options };
+	delete rest.label;
+	delete rest.description;
+	delete rest.placeholder;
+	delete rest.required;
+	delete rest.disabled;
+	delete rest.readOnly;
+	delete rest.visible;
+	delete rest.localized;
+	delete rest.locale;
 	return rest;
 }
+const DYNAMIC_FIELD_OPTION_KEYS = [
+	"hidden",
+	"readOnly",
+	"disabled",
+	"required",
+	"options",
+	"label",
+	"description",
+	"placeholder"
+];
+function collectFieldOptionDependencies(fieldOptions, values) {
+	const deps = /* @__PURE__ */ new Set();
+	for (const key of DYNAMIC_FIELD_OPTION_KEYS) {
+		const value = fieldOptions[key];
+		if (typeof value !== "function") continue;
+		const tracked = trackDependencies(values, value);
+		for (const dep of tracked.deps) deps.add(dep);
+	}
+	return [...deps];
+}
+function computeDynamicDependencyPaths({ fieldOptions, form, fieldPrefix }) {
+	return scopeDependencies(collectFieldOptionDependencies(fieldOptions, (fieldPrefix ? form.getValues(fieldPrefix) : form.getValues()) ?? {}), fieldPrefix);
+}
+/**
+* Resolve a MaybeLazyComponent to a concrete React component.
+* Handles direct components, React.lazy, and `() => import(...)` loaders.
+*/
+function useLazyComponent(loader) {
+	const [state, setState] = React.useState(() => {
+		if (!loader) return {
+			Component: null,
+			loading: false
+		};
+		if (!(typeof loader === "function" && !loader.prototype?.render && !loader.prototype?.isReactComponent && loader.length === 0 && !loader.$$typeof)) return {
+			Component: loader,
+			loading: false
+		};
+		return {
+			Component: null,
+			loading: true
+		};
+	});
+	React.useEffect(() => {
+		if (!loader) {
+			setState({
+				Component: null,
+				loading: false
+			});
+			return;
+		}
+		if (!(typeof loader === "function" && !loader.prototype?.render && !loader.prototype?.isReactComponent && loader.length === 0 && !loader.$$typeof)) {
+			setState({
+				Component: loader,
+				loading: false
+			});
+			return;
+		}
+		let mounted = true;
+		(async () => {
+			try {
+				const result = await loader();
+				if (mounted) setState({
+					Component: result.default || result,
+					loading: false
+				});
+			} catch {
+				if (mounted) setState({
+					Component: null,
+					loading: false
+				});
+			}
+		})();
+		return () => {
+			mounted = false;
+		};
+	}, [loader]);
+	return state;
+}
 /**
 * Render field using FieldDefinition.field.component
 *
@@ -83,30 +171,90 @@ function renderEmbeddedField({ context, registry, allCollectionsConfig, componen
 * 2. FieldDefinition.field.component (registry-first approach)
 * 3. Error message if no component registered
 */
-function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", registry, fieldPrefix, allCollectionsConfig, renderEmbeddedFields, className, entityMeta: entityMetaProp }) {
+function FieldRenderer(t0) {
+	const $ = c(32);
+	const { fieldName, fieldDef, collection, mode: t1, registry, fieldPrefix, allCollectionsConfig, renderEmbeddedFields, className, entityMeta: entityMetaProp } = t0;
+	const mode = t1 === void 0 ? "collection" : t1;
 	const form = useFormContext();
 	const { locale } = useScopedLocale();
 	const resolveText = useResolveText();
 	const { data: adminConfig } = useAdminConfig();
-	const watchedValues = useWatch({ control: form.control });
-	const fullFieldName = getFullFieldName(fieldName, fieldPrefix);
-	const watchedFieldValue = useWatch({
-		control: form.control,
-		name: fullFieldName
-	});
-	const formValues = React$1.useMemo(() => {
-		if (!watchedValues) return {};
-		if (!fieldPrefix) return watchedValues;
-		const parts = fieldPrefix.split(".");
-		let result = watchedValues;
-		for (const part of parts) {
-			result = result?.[part];
-			if (result === void 0) return {};
+	let t2;
+	if ($[0] !== fieldName || $[1] !== fieldPrefix) {
+		t2 = getFullFieldName(fieldName, fieldPrefix);
+		$[0] = fieldName;
+		$[1] = fieldPrefix;
+		$[2] = t2;
+	} else t2 = $[2];
+	const fullFieldName = t2;
+	let t3;
+	if ($[3] !== fieldDef) {
+		t3 = getFieldOptions(fieldDef);
+		$[3] = fieldDef;
+		$[4] = t3;
+	} else t3 = $[4];
+	const fieldOptions = t3;
+	let t4;
+	if ($[5] !== fieldOptions || $[6] !== fieldPrefix || $[7] !== form) {
+		t4 = computeDynamicDependencyPaths({
+			fieldOptions,
+			form,
+			fieldPrefix
+		});
+		$[5] = fieldOptions;
+		$[6] = fieldPrefix;
+		$[7] = form;
+		$[8] = t4;
+	} else t4 = $[8];
+	const dynamicDependencyPaths = t4;
+	let t5;
+	if ($[9] !== dynamicDependencyPaths || $[10] !== fullFieldName) {
+		t5 = new Set([fullFieldName, ...dynamicDependencyPaths]);
+		$[9] = dynamicDependencyPaths;
+		$[10] = fullFieldName;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = [...t5];
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	const t7 = t6;
+	let t8;
+	if ($[14] !== form.control || $[15] !== t7) {
+		t8 = {
+			control: form.control,
+			name: t7
+		};
+		$[14] = form.control;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	const watchedDependencyValues = useWatch(t8);
+	const watchedFieldValue = Array.isArray(watchedDependencyValues) ? watchedDependencyValues[0] : watchedDependencyValues;
+	let t9;
+	bb0: {
+		if (!fieldPrefix) {
+			let t10$2;
+			if ($[17] !== form) {
+				t10$2 = form.getValues() ?? {};
+				$[17] = form;
+				$[18] = t10$2;
+			} else t10$2 = $[18];
+			t9 = t10$2;
+			break bb0;
 		}
-		return result ?? {};
-	}, [watchedValues, fieldPrefix]);
-	const { data: fetchedCollectionMeta } = useCollectionMeta(collection, { enabled: !entityMetaProp && mode === "collection" });
-	const { data: fetchedGlobalMeta } = useGlobalMeta(collection, { enabled: !entityMetaProp && mode === "global" });
+		let t10$1;
+		if ($[19] !== fieldPrefix || $[20] !== form) {
+			t10$1 = form.getValues(fieldPrefix) ?? {};
+			$[19] = fieldPrefix;
+			$[20] = form;
+			$[21] = t10$1;
+		} else t10$1 = $[21];
+		t9 = t10$1;
+	}
+	const formValues = t9;
 	const context = getFieldContext({
 		fieldName,
 		fieldDef,
@@ -114,10 +262,10 @@ function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", r
 		form,
 		fieldPrefix,
 		locale,
-		entityMeta: entityMetaProp ?? (mode === "global" ? fetchedGlobalMeta : fetchedCollectionMeta),
+		entityMeta: entityMetaProp,
 		formValues
 	});
-	const fieldOptions = getFieldOptions(fieldDef);
+	const { Component: resolvedComponent, loading: componentLoading } = useLazyComponent(context.component);
 	const clientSideCompute = typeof fieldOptions.compute === "function" ? fieldOptions.compute : void 0;
 	const { handleChange, computedValue, isComputed, options: hookOptions, optionsLoading } = useFieldHooks({
 		fieldName,
@@ -130,7 +278,16 @@ function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", r
 		staticOptions: context.options
 	});
 	if (context.isHidden) return null;
-	if (!fieldDef) return renderConfigError(`Field "${fieldName}" not found in ${mode === "global" ? "global" : "collection"} "${collection}" config.`);
+	if (!fieldDef) {
+		const t10$1 = `Field "${fieldName}" not found in ${mode === "global" ? "global" : "collection"} "${collection}" config.`;
+		let t11;
+		if ($[22] !== t10$1) {
+			t11 = renderConfigError(t10$1);
+			$[22] = t10$1;
+			$[23] = t11;
+		} else t11 = $[23];
+		return t11;
+	}
 	const resolvedOptions = hookOptions ?? context.options;
 	const rawComponentProps = buildComponentProps(context);
 	const fieldValue = isComputed ? computedValue : watchedFieldValue === void 0 ? rawComponentProps.value : watchedFieldValue;
@@ -147,25 +304,65 @@ function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", r
 	};
 	let content = null;
 	if (context.type === "embedded") content = renderEmbeddedField({
-		context,
+		context: {
+			...context,
+			component: resolvedComponent ?? void 0
+		},
 		registry,
 		allCollectionsConfig,
 		componentProps,
 		renderEmbeddedFields
 	});
-	if (!content && context.component) content = renderDefinitionComponent({
-		context,
+	if (!content && componentLoading) {
+		let t10$1;
+		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+			t10$1 = /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center p-4",
+				children: /* @__PURE__ */ jsx(Spinner, { className: "size-5" })
+			});
+			$[24] = t10$1;
+		} else t10$1 = $[24];
+		content = t10$1;
+	}
+	if (!content && resolvedComponent) content = renderDefinitionComponent({
+		context: {
+			...context,
+			component: resolvedComponent
+		},
 		componentProps,
 		blocks: adminConfig?.blocks
 	});
-	if (!content) content = renderConfigError(`No component registered for field type "${context.type}" (field: "${context.fieldName}").`);
-	if (className) return /* @__PURE__ */ jsx("div", {
-		className,
-		children: content
-	});
-	return /* @__PURE__ */ jsx(Fragment, { children: content });
+	if (!content) {
+		const t10$1 = `No component registered for field type "${context.type}" (field: "${context.fieldName}").`;
+		let t11;
+		if ($[25] !== t10$1) {
+			t11 = renderConfigError(t10$1);
+			$[25] = t10$1;
+			$[26] = t11;
+		} else t11 = $[26];
+		content = t11;
+	}
+	if (className) {
+		let t10$1;
+		if ($[27] !== className || $[28] !== content) {
+			t10$1 = /* @__PURE__ */ jsx("div", {
+				className,
+				children: content
+			});
+			$[27] = className;
+			$[28] = content;
+			$[29] = t10$1;
+		} else t10$1 = $[29];
+		return t10$1;
+	}
+	let t10;
+	if ($[30] !== content) {
+		t10 = /* @__PURE__ */ jsx(Fragment, { children: content });
+		$[30] = content;
+		$[31] = t10;
+	} else t10 = $[31];
+	return t10;
 }
 
 //#endregion
-export { FieldRenderer };
-//# sourceMappingURL=field-renderer.mjs.map
+export { FieldRenderer };