feat: optional hydration

BREAKING CHANGE: iGetPage no longer hydratable

Author: vis97c

packages/common-types/src/fetch.ts

@@ -31,8 +31,7 @@ export interface iPagination<O = tOrderBy> {
 	 */
 	first?: number;
 	/**
-	 * JSON string
-	 * aplica a cualquiera columna
+	 * Ordenar segun columna o propiedad
 	 * ej: ["id", "asc" ], order ascendente de id
 	 * ej: ["id", "desc" ], order descendente de id
 	 */
@@ -45,6 +44,5 @@ export interface iPagination<O = tOrderBy> {
 export type tHydrate<T> = (c: T, e?: unknown) => void;
 
 export type iGetPage<T, C extends string | number = string> = (
-	hydrate: tHydrate<iPage<T, C> | null>,
 	params?: iPagination
 ) => Promise<iPage<T, C>>;

packages/components-vue/src/components/form/InputCountriesAPI.vue

@@ -5,14 +5,14 @@
 			:el="LoaderContentFetch"
 			:wrap="!states && !!countryValue"
 			:theme="theme"
-			:promise="unHydrate(getCountryStates)"
+			:promise="getCountryStates"
 			:payload="[countryValue]"
 			unwrap
 		>
 			<LoaderContentFetch
 				v-slot="citiesReq"
 				:theme="theme"
-				:promise="!!model[1] && unHydrate(getStateCities)"
+				:promise="!!model[1] && getStateCities"
 				:payload="[countryValue, model[1]]"
 				:no-loader="statesReq.loading"
 				:fallback="[]"
@@ -34,7 +34,6 @@
 
 	import type { iUseThemeProps } from "../../types/props";
 	import type { iState } from "../../types/countries";
-	import useFetch from "../../composables/fetch";
 	import useCountries from "../../composables/countries";
 
 	interface iFormInputCountriesApi extends iUseThemeProps {
@@ -52,7 +51,6 @@
 
 	const props = defineProps<iFormInputCountriesApi>();
 
-	const { unHydrate } = useFetch();
 	const { defaultCountry, getCountryStates, getStateCities } = useCountries();
 
 	const countryValue = computed(() => props.model[0] || defaultCountry || "");

packages/components-vue/src/components/form/Simple.vue

@@ -5,7 +5,7 @@
 			v-slot="{ content }"
 			:theme="theme"
 			:label="t('form_loading_countries')"
-			:promise="(withLocationInput || withPhoneInput) && getCountriesAndStates"
+			:promise="(withLocationInput || !!withPhoneInput) && getCountriesAndStates"
 			class="flx --flxColumn --flx-start-stretch --gap-10 --maxWidth-full"
 			:el="noForm ? 'fieldset' : 'form'"
 			:fallback="{ countries: [], states: [] }"

packages/components-vue/src/components/loader/ContentFetch.vue

@@ -21,7 +21,7 @@
 	</BaseErrorBoundary>
 </template>
 
-<script setup lang="ts" generic="T, P extends unknown[] = unknown[]">
+<script setup lang="ts" generic="T, P extends any[] = any[]">
 	import {
 		ref,
 		watch,
@@ -39,7 +39,9 @@
 
 	import type { iUseThemeProps } from "../../types/props";
 
-	export interface iLoaderContentFetchProps<Ti, Pi extends unknown[]> extends iUseThemeProps {
+	type tDataPromise<Ti, Pi extends any[]> = (...args: Pi) => Promise<Ti>;
+
+	interface iLoaderContentFetchProps<Ti, Pi extends any[]> extends iUseThemeProps {
 		/**
 		 * Loader label
 		 */
@@ -48,10 +50,11 @@
 		 * Hide loader
 		 */
 		noLoader?: boolean;
-		promise?: false | ((hydrate: tHydrate<Ti>, ...args: Pi) => Promise<Ti>);
-		url?: false | string;
 		fallback?: Ti;
 		unwrap?: boolean;
+		url?: false | string;
+		promise?: false | tDataPromise<Ti, Pi>;
+		hydratablePromise?: false | ((hydrate: tHydrate<Ti>) => tDataPromise<Ti, Pi>);
 		payload?: Pi;
 		/**
 		 * Component or tag to render
@@ -80,6 +83,11 @@
 	const fetchedContent = ref<T>();
 	const firstLoad = ref(false);
 	const hydrated = ref(false);
+	/**
+	 * Hydrate content
+	 *
+	 * Useful with firebase client approach
+	 */
 	const hydrate: tHydrate<T> = (newContent, newErrors) => {
 		// prevent hydration
 		if (fetchedContent.value && !hydrated.value) return (hydrated.value = true);
@@ -91,18 +99,21 @@
 	const content = computed(() => fetchedContent.value ?? props.fallback);
 
 	async function refresh() {
-		if (props.promise || props.url) {
-			try {
+		try {
+			if (props.promise || props.hydratablePromise || props.url) {
 				loading.value = true;
 
-				// use fallback while the real content loaads
+				// use fallback while the real content loads
 				if (props.fallback) firstLoad.value = true;
 
-				if (props.promise) {
-					fetchedContent.value = await props.promise(
-						hydrate,
-						...(<P>(props.payload || []))
-					);
+				if (props.promise || props.hydratablePromise) {
+					const payload = <P>(props.payload || []);
+
+					if (props.promise) {
+						fetchedContent.value = await props.promise(...payload);
+					} else if (props.hydratablePromise) {
+						fetchedContent.value = await props.hydratablePromise(hydrate)(...payload);
+					}
 				} else if (props.url) {
 					const response = await (await fetch(props.url)).json();
 					const data = "data" in response ? response.data : response;
@@ -113,15 +124,17 @@
 
 				// success, clear errors
 				errors.value = undefined;
-			} catch (err) {
-				console.error(err);
-				fetchedContent.value = undefined;
-				errors.value = err;
+			} else {
+				throw new Error("No data source url or promise provided");
 			}
-
-			firstLoad.value = true;
-			loading.value = false;
+		} catch (err) {
+			console.error(err);
+			fetchedContent.value = undefined;
+			errors.value = err;
 		}
+
+		firstLoad.value = true;
+		loading.value = false;
 	}
 
 	// lifecycle

packages/components-vue/src/components/pagination/Content.vue

@@ -36,7 +36,7 @@
 
 	import type { iUseThemeProps } from "../../types/props";
 
-	export interface iPaginationContentProps<Ti, Ci extends string | number = string>
+	export interface iPCProps<Ti, Ci extends string | number = string>
 		extends iPagination,
 			iUseThemeProps {
 		/**
@@ -63,10 +63,8 @@
 	}
 
 	/**
-	 * Menu de paginacion [PROGRESS]
+	 * Menu de paginacion
 	 * Redirecciona a la misma ruta + el query de pagina
-	 * TODO: Add conditional items per page selector
-	 * Not sure what this was supposed to mean
 	 *
 	 * @component
 	 * @example
@@ -75,7 +73,7 @@
 
 	defineOptions({ name: "PaginationContent", inheritAttrs: false });
 
-	const props = defineProps<iPaginationContentProps<T, C>>();
+	const props = defineProps<iPCProps<T, C>>();
 
 	const xamuOptions = inject<iPluginOptions>("xamu");
 	const router = getCurrentInstance()?.appContext.config.globalProperties.$router;
@@ -111,7 +109,7 @@
 
 		return newPagination;
 	});
-	const pagination = computed<iPagination | undefined>({
+	const pagination = computed<iPagination>({
 		get() {
 			if (props.withRoute) return routePagination.value;