Fix lack of reactivity of data-fs-error (#66)

Co-authored-by: Jeremy Haak <[email protected]> Co-authored-by: Hunter Johnston <[email protected]>
svecosystem · Oct 30, 2023 · c0573e3 · c0573e3
1 parent 2f4d1d4
commit c0573e3
Show file tree

Hide file tree

Showing 12 changed files with 17 additions and 11 deletions.
diff --git a/.changeset/cool-mayflies-heal.md b/.changeset/cool-mayflies-heal.md
@@ -0,0 +1,5 @@
+---
+"formsnap": patch
+---
+
+Fix lack of reactivity of `data-fs-error`
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
 		"build:content-cachebust": "contentlayer build --clearCache",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
+		"prepare": "pnpm package",
 		"prepublishOnly": "pnpm run package",
 		"test": "pnpm run test:integration && pnpm run test:unit",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

diff --git a/src/lib/components/form-checkbox.svelte b/src/lib/components/form-checkbox.svelte
@@ -4,7 +4,7 @@
 
 	type $$Props = CheckboxProps;
 	const { actions, errors } = getFormField();
-	const attrs = {
+	$: attrs = {
 		"data-fs-checkbox": "",
 		"data-fs-error": $errors ? "" : undefined
 	};

diff --git a/src/lib/components/form-description.svelte b/src/lib/components/form-description.svelte
@@ -5,7 +5,7 @@
 	type $$Props = DescriptionProps;
 	export let tag = "p";
 	const { actions, errors } = getFormField();
-	const attrs = {
+	$: attrs = {
 		"data-fs-description": "",
 		"data-fs-error": $errors ? "" : undefined
 	};

diff --git a/src/lib/components/form-input.svelte b/src/lib/components/form-input.svelte
@@ -4,7 +4,7 @@
 
 	type $$Props = InputProps;
 	const { actions, errors } = getFormField();
-	const attrs = {
+	$: attrs = {
 		"data-fs-input": "",
 		"data-fs-error": $errors ? "" : undefined
 	};

diff --git a/src/lib/components/form-label.svelte b/src/lib/components/form-label.svelte
@@ -4,7 +4,7 @@
 
 	type $$Props = LabelProps;
 	const { actions, errors } = getFormField();
-	const attrs = {
+	$: attrs = {
 		"data-fs-label": "",
 		"data-fs-error": $errors ? "" : undefined
 	};

diff --git a/src/lib/components/form-radio.svelte b/src/lib/components/form-radio.svelte
@@ -4,7 +4,7 @@
 
 	type $$Props = RadioProps;
 	const { actions, errors } = getFormField();
-	const attrs = {
+	$: attrs = {
 		"data-fs-radio": "",
 		"data-fs-error": $errors ? "" : undefined
 	};

diff --git a/src/lib/components/form-select.svelte b/src/lib/components/form-select.svelte
@@ -4,7 +4,7 @@
 
 	type $$Props = SelectProps;
 	const { actions, errors } = getFormField();
-	const attrs = {
+	$: attrs = {
 		"data-fs-select": "",
 		"data-fs-error": $errors ? "" : undefined
 	};

diff --git a/src/lib/components/form-textarea.svelte b/src/lib/components/form-textarea.svelte
@@ -4,7 +4,7 @@
 
 	type $$Props = TextareaProps;
 	const { actions, errors } = getFormField();
-	const attrs = {
+	$: attrs = {
 		"data-fs-textarea": "",
 		"data-fs-error": $errors ? "" : undefined
 	};

diff --git a/src/lib/components/form-validation.svelte b/src/lib/components/form-validation.svelte
@@ -5,7 +5,7 @@
 	type $$Props = ValidationProps;
 	export let tag = "p";
 	const { actions, errors } = getFormField();
-	const attrs = {
+	$: attrs = {
 		"data-fs-validation": "",
 		"data-fs-error": $errors ? "" : undefined
 	};

diff --git a/src/lib/components/form.svelte b/src/lib/components/form.svelte
@@ -72,7 +72,7 @@
 		form: superFrm,
 		schema
 	};
-	const attrs = {
+	$: attrs = {
 		"data-fs-form": "",
 		"data-fs-error": $errors ? "" : undefined
 	};

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -47,7 +47,7 @@ export type DescriptionProps = {
 	 *
 	 * @default "p"
 	 */
-	tag?: "string";
+	tag?: string;
 } & HTMLAttributes<HTMLElement>;
 
 export type ValidationProps = {
@@ -56,7 +56,7 @@ export type ValidationProps = {
 	 *
 	 * @default "p"
 	 */
-	tag?: "string";
+	tag?: string;
 } & HTMLAttributes<HTMLElement>;
 
 export type RadioProps = HTMLInputAttributes;