@vesperjs/vue 0.1.0

package/dist/index.mjs

@@ -0,0 +1,282 @@
+import { computed, ref } from "@vue/reactivity";
+import { persistentAtom } from "@nanostores/persistent";
+import { ofetch } from "ofetch";
+import { createI18n } from "vue-i18n";
+//#region src/stores/nano/base-url.ts
+const $baseUrl = persistentAtom("baseURL", "");
+persistentAtom("timeZone", "");
+//#endregion
+//#region src/stores/use-base-url-store.ts
+function useBaseUrlStore() {
+	return { baseURL: computed({
+		get() {
+			return $baseUrl.get();
+		},
+		set(value) {
+			$baseUrl.set(value);
+		}
+	}) };
+}
+//#endregion
+//#region src/composables/backend/api/use-api-constants.ts
+function useApiConstants() {
+	const { baseURL } = useBaseUrlStore();
+	return { baseURL };
+}
+//#endregion
+//#region src/composables/backend/api/use-ofetch.ts
+const useOFetch = async (url, options) => {
+	const pending = ref(true);
+	const data = ref();
+	const error = ref();
+	try {
+		data.value = await ofetch(url, options);
+	} catch (err) {
+		error.value = err;
+	}
+	pending.value = false;
+	return {
+		data: data.value,
+		error: error.value,
+		pending: pending.value
+	};
+};
+//#endregion
+//#region src/i18n/i18n.ts
+const i18n = createI18n({
+	legacy: false,
+	locale: "en",
+	fallbackLocale: "en",
+	messages: {
+		en: { backend: { error: {
+			api: "An error has occurred.({message})",
+			login: "Please log in.",
+			not_found: "This {source} has been deleted."
+		} } },
+		ja: { backend: { error: {
+			api: "不具合が発生しました。({message})",
+			login: "ログインしなおしてください。",
+			not_found: "この{source}は削除されています。"
+		} } }
+	}
+});
+//#endregion
+//#region src/composables/use-locale.ts
+const useLocale = () => {
+	const { locale, availableLocales, fallbackLocale } = i18n.global;
+	const autoDetect = () => {
+		const viewLocale = globalThis.navigator.languages[0];
+		locale.value = availableLocales.includes(viewLocale) ? viewLocale : fallbackLocale.value;
+	};
+	return {
+		locale,
+		autoDetect
+	};
+};
+//#endregion
+//#region src/composables/backend/api/use-http-headers.ts
+const useHttpHeaders = () => {
+	const { locale } = useLocale();
+	return { commonHeaders: computed(() => ({
+		"X-Requested-With": "XMLHttpRequest",
+		Accept: "application/json",
+		"Accept-Language": locale.value
+	})) };
+};
+//#endregion
+//#region src/composables/backend/api/use-query-api.ts
+const useQueryApi = async (url, options) => {
+	const { commonHeaders } = useHttpHeaders();
+	const { baseURL } = useApiConstants();
+	const tokenRef = ref();
+	const headers = commonHeaders.value;
+	if (options?.token) {
+		headers.Authorization = `Bearer ${options.token}`;
+		tokenRef.value = options.token;
+	}
+	const getOptions = {
+		baseURL: baseURL.value,
+		method: "get",
+		query: options?.query ?? {},
+		headers,
+		onResponse({ response }) {
+			if (!tokenRef.value) tokenRef.value = response.headers.get("Authorization")?.split(" ")[1];
+		}
+	};
+	if (options?.signal) getOptions.signal = options.signal;
+	if (options?.onRequestError) getOptions.onRequestError = options.onRequestError;
+	if (options?.onResponseError) getOptions.onResponseError = options.onResponseError;
+	const { data, error, pending } = await useOFetch(url, getOptions);
+	return {
+		token: tokenRef.value,
+		data,
+		error,
+		pending
+	};
+};
+//#endregion
+//#region src/composables/backend/api/use-mutation-api.ts
+const useMutationApi = async (url, { method, body = {}, token = null, onRequestError, onResponseError }) => {
+	const { commonHeaders } = useHttpHeaders();
+	const { baseURL } = useApiConstants();
+	const headers = commonHeaders.value;
+	const tokenRef = ref();
+	if (token) {
+		headers.Authorization = `Bearer ${token}`;
+		tokenRef.value = token;
+	}
+	const options = {
+		baseURL: baseURL.value,
+		headers,
+		method
+	};
+	if (onRequestError) options.onRequestError = onRequestError;
+	if (onResponseError) options.onResponseError = onResponseError;
+	if (method == "post" || method == "put") {
+		options.body = body;
+		options.onResponse = ({ response }) => {
+			if (method == "post" && !tokenRef.value || method == "put") tokenRef.value = response.headers.get("Authorization")?.split(" ")[1];
+		};
+	}
+	const { data, error, pending } = await useOFetch(url, options);
+	return {
+		token: tokenRef.value,
+		data,
+		error,
+		pending
+	};
+};
+//#endregion
+//#region src/composables/backend/error/use-external-errors.ts
+function useExternalErrors({ flash }) {
+	const errors = ref({});
+	const externalErrors = computed({
+		get() {
+			return errors.value;
+		},
+		set(value) {
+			if (errors.value) for (const key in value) errors.value[key] = value[key] ?? [];
+		}
+	});
+	const clearExternalErrors = () => {
+		externalErrors.value = {};
+	};
+	const isSuccess = () => {
+		let result = true;
+		for (const key in errors.value) if (errors.value[key].length > 0) result = false;
+		if (flash.value.alert) result = false;
+		return result;
+	};
+	return {
+		externalErrors,
+		clearExternalErrors,
+		isSuccess
+	};
+}
+//#endregion
+//#region src/composables/backend/error/use-backend-error-info.ts
+function useBackendErrorInfo() {
+	const info = ref({});
+	const backendErrorInfo = computed(() => {
+		return info.value;
+	});
+	const clearBackendErrorInfo = () => {
+		info.value = {};
+	};
+	return {
+		backendErrorInfo,
+		clearBackendErrorInfo
+	};
+}
+//#endregion
+//#region src/composables/backend/use-alert.ts
+function useAlert({ flash, caller }) {
+	const { backendErrorInfo, clearBackendErrorInfo } = useBackendErrorInfo();
+	const setError = function(error, options) {
+		const off = options?.off ?? false;
+		clearBackendErrorInfo();
+		backendErrorInfo.value.status = error.status;
+		if (off) switch (error.status) {
+			case 401:
+				if (caller && "clearAccount" in caller && caller.clearAccount) caller.clearAccount();
+				break;
+		}
+		else switch (error.status) {
+			case 401:
+				flash.value.alert = i18n.global.t("backend.error.login");
+				if (caller && "clearAccount" in caller && caller.clearAccount) caller.clearAccount();
+				break;
+			case 404:
+				{
+					const backendError = error.data;
+					backendErrorInfo.value.error = backendError;
+				}
+				break;
+			case 422:
+				if (caller && "externalErrors" in caller && caller.externalErrors && error.data) {
+					const { errors } = error.data;
+					caller.externalErrors.value = errors;
+				}
+				break;
+			default: flash.value.alert = i18n.global.t("backend.error.api", { message: error.message });
+		}
+	};
+	const reload = () => {
+		if (backendErrorInfo.value.status == 404) globalThis.setTimeout(() => {
+			globalThis.location.reload();
+		}, 1e3);
+	};
+	return {
+		backendErrorInfo,
+		setError,
+		reload
+	};
+}
+//#endregion
+//#region src/composables/util/use-date.ts
+function useDate() {
+	const isValidDate = (str) => {
+		return !!str && !!str.match(/\d{4}\/\d{2}\/\d{2}/) && !isNaN(Date.parse(str));
+	};
+	return { isValidDate };
+}
+//#endregion
+//#region src/composables/use-entity.ts
+function useEntity() {
+	const create = ({ from }) => {
+		const model = {};
+		Object.assign(model, from);
+		return model;
+	};
+	const copy = ({ from, to }) => {
+		Object.assign(to, from);
+	};
+	return {
+		create,
+		copy
+	};
+}
+//#endregion
+//#region src/composables/use-flash.ts
+function useFlash() {
+	const flash = ref({});
+	const clearFlash = () => {
+		flash.value = {};
+	};
+	return {
+		flash,
+		clearFlash
+	};
+}
+//#endregion
+//#region src/composables/use-nano-route.ts
+function useNanoRoute(router) {
+	const page = router.get();
+	return {
+		params: page?.params,
+		query: page?.search,
+		path: page?.path
+	};
+}
+//#endregion
+export { i18n, useAlert, useApiConstants, useDate, useEntity, useExternalErrors, useFlash, useLocale, useMutationApi, useNanoRoute, useOFetch, useQueryApi };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@vesperjs/vue",
+  "version": "0.1.0",
+  "keywords": [
+    "vue.js"
+  ],
+  "license": "MIT",
+  "author": "Yasumada Ashida",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@formkit/tempo": "^1.0.0",
+    "@nanostores/persistent": "^1.3.3",
+    "@nanostores/router": "^1.0.0",
+    "@vue/reactivity": "^3.6.0-beta.8",
+    "nanostores": "^1.2.0",
+    "ofetch": "1.5.1",
+    "undici": "7.24.4",
+    "vue-i18n": "11.3.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-vue": "^10.8.0",
+    "oxfmt": "^0.41.0",
+    "tsdown": "^0.21.4",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "build": "tsdown --dts",
+    "build:check": "tsc--noEmit",
+    "lint": "eslint --fix './src/**/*.{js,ts}'",
+    "fmt": "oxfmt",
+    "fmt:check": "oxfmt --check"
+  }
+}