@sigmaott/base-next 1.0.6

package/src/modules/api-party/runtime/composables/useApiData.ts

@@ -0,0 +1,229 @@
+import { computed, reactive } from 'vue'
+import { hash } from 'ohash'
+import type { FetchError } from 'ofetch'
+import type { NitroFetchOptions } from 'nitropack'
+import type { WatchSource } from 'vue'
+import type { AsyncData, AsyncDataOptions } from 'nuxt/app'
+import type { ModuleOptions } from '../../module'
+import { CACHE_KEY_PREFIX } from '../constants'
+import { headersToObject, resolvePath, serializeMaybeEncodedBody, toValue } from '../utils'
+import { isFormData } from '../formData'
+import type { AllPaths, EndpointFetchOptions, GETPaths, GETPlainPaths, HttpMethod, IgnoreCase, MaybeRef, MaybeRefOrGetter, OpenApiError, OpenApiRequestOptions, OpenApiResponse, PathItemObject } from '../types'
+import { useAsyncData, useRequestHeaders, useRuntimeConfig } from '#imports'
+
+type ComputedOptions<T extends Record<string, any>> = {
+  [K in keyof T]: T[K] extends (...args: any[]) => any
+    ? T[K]
+    : T[K] extends Record<string, any>
+      ? ComputedOptions<T[K]> | MaybeRef<T[K]>
+      : MaybeRef<T[K]>;
+}
+
+export type BaseUseApiDataOptions<ResT, DataT = ResT> = Omit<AsyncDataOptions<ResT, DataT>, 'watch'> & {
+  /**
+   * Skip the Nuxt server proxy and fetch directly from the API.
+   * Requires `allowClient` to be enabled in the module options as well.
+   * @default false
+   */
+  client?: boolean
+  /**
+   * Cache the response for the same request.
+   * You can customize the cache key with the `key` option.
+   * @default true
+   */
+  cache?: boolean
+  /**
+   * By default, a cache key will be generated from the request options.
+   * With this option, you can provide a custom cache key.
+   * @default undefined
+   */
+  key?: MaybeRefOrGetter<string>
+  /**
+   * Watch an array of reactive sources and auto-refresh the fetch result when they change.
+   * Fetch options and URL are watched by default. You can completely ignore reactive sources by using `watch: false`.
+   * @default undefined
+   */
+  watch?: (WatchSource<unknown> | object)[] | false
+}
+
+export type UseApiDataOptions<T> = Pick<
+  ComputedOptions<NitroFetchOptions<string>>,
+  | 'onRequest'
+  | 'onRequestError'
+  | 'onResponse'
+  | 'onResponseError'
+  | 'query'
+  | 'headers'
+  | 'method'
+  | 'retry'
+  | 'retryDelay'
+  | 'timeout'
+> & {
+  pathParams?: MaybeRefOrGetter<Record<string, string>>
+  body?: MaybeRef<string | Record<string, any> | FormData | null>
+} & BaseUseApiDataOptions<T>
+
+export type UseOpenApiDataOptions<
+  P extends PathItemObject,
+  M extends IgnoreCase<keyof P & HttpMethod> = IgnoreCase<keyof P & 'get'>,
+  ResT = OpenApiResponse<P[Lowercase<M>]>,
+  DataT = ResT,
+> = BaseUseApiDataOptions<ResT, DataT> & ComputedOptions<OpenApiRequestOptions<P, M>>
+
+export type UseApiData = <T = any>(
+  path: MaybeRefOrGetter<string>,
+  opts?: UseApiDataOptions<T>,
+) => AsyncData<T | undefined, FetchError>
+
+export interface UseOpenApiData<Paths extends Record<string, PathItemObject>> {
+  <P extends GETPlainPaths<Paths>, ResT = OpenApiResponse<Paths[`/${P}`]['get']>, DataT = ResT>(
+    path: MaybeRefOrGetter<P>,
+    opts?: Omit<UseOpenApiDataOptions<Paths[`/${P}`], IgnoreCase<keyof Paths[`/${P}`] & HttpMethod>, ResT, DataT>, 'method'>,
+  ): AsyncData<DataT, FetchError<OpenApiError<Paths[`/${P}`]['get']>>>
+  <P extends GETPaths<Paths>, ResT = OpenApiResponse<Paths[`/${P}`]['get']>, DataT = ResT>(
+    path: MaybeRefOrGetter<P>,
+    opts: Omit<UseOpenApiDataOptions<Paths[`/${P}`], IgnoreCase<keyof Paths[`/${P}`] & HttpMethod>, ResT, DataT>, 'method'>,
+  ): AsyncData<DataT, FetchError<OpenApiError<Paths[`/${P}`]['get']>>>
+  <P extends AllPaths<Paths>, M extends IgnoreCase<keyof Paths[`/${P}`] & HttpMethod>, ResT = OpenApiResponse<Paths[`/${P}`][Lowercase<M>]>, DataT = ResT>(
+    path: MaybeRefOrGetter<P>,
+    opts: UseOpenApiDataOptions<Paths[`/${P}`], M, ResT, DataT> & { method: M },
+  ): AsyncData<DataT, FetchError<OpenApiError<Paths[`/${P}`][Lowercase<M>]>>>
+}
+
+export function _useApiData<T = any>(
+  endpointId: string,
+  path: MaybeRefOrGetter<string>,
+  opts: UseApiDataOptions<T> = {},
+) {
+  const { apiParty } = useRuntimeConfig().public
+  const {
+    server,
+    lazy,
+    default: defaultFn,
+    transform,
+    pick,
+    watch,
+    immediate,
+    pathParams,
+    query,
+    headers,
+    method,
+    body,
+    client = false,
+    cache = true,
+    key,
+    ...fetchOptions
+  } = opts
+
+  const _path = computed(() => resolvePath(toValue(path), toValue(pathParams)))
+  const _key = computed(key === undefined
+    ? () => CACHE_KEY_PREFIX + hash([
+        endpointId,
+        _path.value,
+        toValue(query),
+        toValue(method),
+        ...(isFormData(toValue(body)) ? [] : [toValue(body)]),
+      ])
+    : () => CACHE_KEY_PREFIX + toValue(key),
+  )
+
+  if (client && !apiParty.allowClient)
+    throw new Error('Client-side API requests are disabled. Set "allowClient: true" in the module options to enable them.')
+
+  const endpoints = (apiParty as unknown as ModuleOptions).endpoints || {}
+  const endpoint = endpoints[endpointId]
+
+  const _fetchOptions = reactive(fetchOptions)
+
+  const _endpointFetchOptions: EndpointFetchOptions = reactive({
+    path: _path,
+    query,
+    headers: computed(() => ({
+      ...headersToObject(toValue(headers)),
+      ...(endpoint.cookies && useRequestHeaders(['cookie'])),
+    })),
+    method,
+    body,
+  })
+
+  const _asyncDataOptions: AsyncDataOptions<T> = {
+    server,
+    lazy,
+    default: defaultFn,
+    transform,
+    pick,
+    watch: watch === false
+      ? []
+      : [
+          _endpointFetchOptions,
+          ...(watch || []),
+        ],
+    immediate,
+  }
+
+  let controller: AbortController | undefined
+
+  return useAsyncData<T, FetchError>(
+    _key.value,
+    async (nuxt) => {
+      controller?.abort?.()
+
+      // Workaround to persist response client-side
+      // https://github.com/nuxt/nuxt/issues/15445
+      if ((nuxt!.isHydrating || cache) && _key.value in nuxt!.payload.data)
+        return nuxt!.payload.data[_key.value]
+
+      controller = new AbortController()
+
+      let result: T | undefined
+
+      try {
+        if (client) {
+          result = (await globalThis.$fetch<T>(_path.value, {
+            ..._fetchOptions,
+            signal: controller.signal,
+            baseURL: endpoint.url,
+            method: _endpointFetchOptions.method,
+            query: {
+              ...endpoint.query,
+              ..._endpointFetchOptions.query,
+            },
+            headers: {
+              ...(endpoint.token && { Authorization: `Bearer ${endpoint.token}` }),
+              ...endpoint.headers,
+              ..._endpointFetchOptions.headers,
+            },
+            body: _endpointFetchOptions.body,
+          })) as T
+        }
+        else {
+          result = (await globalThis.$fetch<T>(
+            `/api/__api_party/${endpointId}`,
+            {
+              ..._fetchOptions,
+              signal: controller.signal,
+              method: 'POST',
+              body: {
+                ..._endpointFetchOptions,
+                body: await serializeMaybeEncodedBody(_endpointFetchOptions.body),
+              } satisfies EndpointFetchOptions,
+            },
+          )) as T
+        }
+      }
+      catch (error) {
+        // Invalidate cache if request fails
+        if (_key.value in nuxt!.payload.data)
+          delete nuxt!.payload.data[_key.value]
+
+        throw error
+      }
+
+      if (cache)
+        nuxt!.payload.data[_key.value] = result
+
+      return result
+    },
+    _asyncDataOptions,
+  ) as AsyncData<T | undefined, FetchError>
+}

package/src/modules/api-party/runtime/constants.ts

@@ -0,0 +1 @@
+export const CACHE_KEY_PREFIX = '$apiParty'

package/src/modules/api-party/runtime/formData.ts

@@ -0,0 +1,85 @@
+export interface SerializedBlob {
+  data: string
+  type: string
+  size: number
+  name?: string
+}
+
+export type SerializedFormData = Record<
+  string,
+  string | (SerializedBlob & { __type: 'blob' })
+>
+
+export function isFormData(obj: unknown): obj is FormData {
+  return obj instanceof FormData
+}
+
+export function isSerializedFormData(obj: unknown): obj is SerializedFormData {
+  return (
+    typeof obj === 'object'
+    && obj !== null
+    && '__type' in obj
+    && obj.__type === 'form-data'
+  )
+}
+
+export async function formDataToObject(formData: FormData) {
+  const obj: SerializedFormData = {
+    __type: 'form-data',
+  }
+
+  for (const [key, value] of formData.entries()) {
+    if (value instanceof Blob) {
+      obj[key] = {
+        __type: 'blob',
+        ...(await serializeBlob(value)),
+        name: value.name,
+      }
+    }
+    else {
+      obj[key] = value
+    }
+  }
+
+  return obj
+}
+
+export async function objectToFormData(obj: SerializedFormData) {
+  const formData = new FormData()
+  const entries = Object.entries(obj).filter(([key]) => key !== '__type')
+
+  for (const [key, value] of entries) {
+    if (isSerializedBlob(value)) {
+      const arrayBuffer = Uint8Array.from(atob(value.data), c => c.charCodeAt(0))
+      const blob = new Blob([arrayBuffer], { type: value.type })
+      formData.append(key, blob, value.name)
+    }
+    else {
+      formData.append(key, value)
+    }
+  }
+
+  return formData
+}
+
+function isSerializedBlob(obj: unknown): obj is SerializedBlob {
+  return (
+    typeof obj === 'object'
+    && obj !== null
+    && '__type' in obj
+    && obj.__type === 'blob'
+  )
+}
+
+async function serializeBlob(blob: Blob) {
+  const arrayBuffer = await blob.arrayBuffer()
+  const bytes = new Uint8Array(arrayBuffer)
+  const binary = bytes.reduce((acc, byte) => acc + String.fromCharCode(byte), '')
+  const base64 = btoa(binary)
+
+  return {
+    data: base64,
+    type: blob.type,
+    size: blob.size,
+  }
+}

package/src/modules/api-party/runtime/server/$api.ts

@@ -0,0 +1,29 @@
+import { headersToObject, resolvePath } from '../utils'
+import type { ModuleOptions } from '../../module'
+import type { ApiFetchOptions } from '../composables/$api'
+import { useRuntimeConfig } from '#imports'
+
+export function _$api<T = any>(
+  endpointId: string,
+  path: string,
+  opts: ApiFetchOptions = {},
+): Promise<T> {
+  const { pathParams, query, headers, ...fetchOptions } = opts
+  const { apiParty } = useRuntimeConfig()
+  const endpoints = (apiParty as unknown as ModuleOptions).endpoints || {}
+  const endpoint = endpoints[endpointId]
+
+  return globalThis.$fetch<T>(resolvePath(path, pathParams), {
+    ...fetchOptions,
+    baseURL: endpoint.url,
+    query: {
+      ...endpoint.query,
+      ...query,
+    },
+    headers: {
+      ...(endpoint.token && { Authorization: `Bearer ${endpoint.token}` }),
+      ...endpoint.headers,
+      ...headersToObject(headers),
+    },
+  }) as Promise<T>
+}

package/src/modules/api-party/runtime/server/handler.ts

@@ -0,0 +1,92 @@
+import { createError, defineEventHandler, getRequestHeader, getRouterParam, readBody, removeResponseHeader, send, setResponseHeaders, setResponseStatus } from 'h3'
+import { deserializeMaybeEncodedBody } from '../utils'
+import type { ModuleOptions } from '../../module'
+import type { EndpointFetchOptions } from '../types'
+import { useRuntimeConfig } from '#imports'
+
+export default defineEventHandler(async (event): Promise<any> => {
+  const endpointId = getRouterParam(event, 'endpointId')!
+  const { apiParty } = useRuntimeConfig()
+  const endpoints = (apiParty as unknown as ModuleOptions).endpoints || {}
+  const endpoint = endpoints[endpointId]
+
+  if (!endpoint) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: `Unknown API endpoint "${endpointId}"`,
+    })
+  }
+
+  const _body = await readBody<EndpointFetchOptions>(event)
+
+  const {
+    path,
+    query,
+    headers,
+    body,
+    ...fetchOptions
+  } = _body
+
+  // Check if the path is an absolute URL
+  if (new URL(path, 'http://localhost').origin !== 'http://localhost') {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Absolute URLs are not allowed',
+    })
+  }
+
+  // Allows to overwrite the backend url with a custom header
+  // (e.g. `jsonPlaceholder` endpoint becomes `Json-Placeholder-Endpoint-Url`)
+  const baseURL = new Headers(headers).get(`${endpointId}-endpoint-url`) || endpoint.url
+
+  // Check if the base URL is in the allow list
+  if (
+    baseURL !== endpoint.url
+    && !endpoint.allowedUrls?.includes(baseURL)
+  ) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: `Base URL "${baseURL}" is not allowed`,
+    })
+  }
+
+  try {
+    const response = await globalThis.$fetch.raw<ArrayBuffer>(
+      path,
+      {
+        ...fetchOptions,
+        baseURL,
+        query: {
+          ...endpoint.query,
+          ...query,
+        },
+        headers: {
+          ...(endpoint.token && { Authorization: `Bearer ${endpoint.token}` }),
+          ...(endpoint.cookies && { cookie: getRequestHeader(event, 'cookie') }),
+          ...endpoint.headers,
+          ...headers,
+        },
+        ...(body && { body: await deserializeMaybeEncodedBody(body) }),
+        ignoreResponseError: true,
+        responseType: 'arrayBuffer',
+      },
+    )
+    setResponseStatus(event, response.status, response.statusText)
+    setResponseHeaders(event, Object.fromEntries(response.headers.entries()))
+
+    // ofetch has already decoded the response. Leaving this header can cause the
+    // client issues when decoding and may create a conflict if a compression
+    // middleware is used
+    removeResponseHeader(event, 'content-encoding')
+
+    await send(event, new Uint8Array(response._data ?? []))
+  }
+  catch (error) {
+    console.error(error)
+
+    throw createError({
+      statusCode: 503,
+      statusMessage: 'Service Unavailable',
+    })
+  }
+})

package/src/modules/api-party/runtime/types.ts

@@ -0,0 +1,97 @@
+import type { NitroFetchOptions } from 'nitropack'
+import type { Ref } from 'vue'
+
+export type EndpointFetchOptions = NitroFetchOptions<string> & {
+  path: string
+}
+
+export type MaybeRef<T> = T | Ref<T>
+export type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T)
+
+export type IgnoreCase<T extends string> = Lowercase<T> | Uppercase<T>
+export type RemovePrefix<T extends string, P extends string> = T extends `${P}${infer S}` ? S : never
+
+export type PathItemObject = { [M in HttpMethod]?: any } & { parameters?: any }
+
+// HTTP status codes and methods
+export type HttpMethod = 'get' | 'put' | 'post' | 'delete' | 'options' | 'head' | 'patch' | 'trace'
+export type OkStatus = 200 | 201 | 202 | 203 | 204 | 206 | 207 | '2XX' | 'default'
+export type ErrorStatus = 500 | '5XX' | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 429 | 431 | 444 | 450 | 451 | 497 | 498 | 499 | '4XX'
+
+// General purpose types
+export type RequestBody<T> = T extends { requestBody?: { content: infer Body } }
+  ?
+    | (Body extends { 'application/octet-stream': any }
+      ? {
+          body: string | Blob
+          headers: { 'content-type': 'application/octet-stream' }
+        }
+      : Record<string, any>)
+    | (Body extends { 'application/json': infer Schema }
+      ? { body: Schema; headers?: { 'content-type'?: 'application/json' } }
+      : Record<string, any>)
+    | (Body extends { '*/*': infer Schema }
+      ? { body: Schema; headers?: { 'content-type'?: 'application/json' } }
+      : Record<string, any>)
+    | (Body extends { 'application/x-www-form-urlencoded': any }
+      ? {
+          body: FormData
+          headers: { 'content-type': 'application/x-www-form-urlencoded' }
+        }
+      : Record<string, any>)
+  : unknown
+
+export type Method<M extends IgnoreCase<HttpMethod>> =
+  'get' extends Lowercase<M> ? { method?: M } : { method: M }
+
+export type Param<T, N extends string, K extends string = N> = T extends {
+  parameters: { [_ in N]?: any }
+}
+  ? { [_ in keyof Pick<T['parameters'], N> as K]: T['parameters'][N] }
+  : unknown
+
+export type PathParameters<T> = Param<T, 'path', 'pathParams'>
+export type QueryParameters<T> = Param<T, 'query'>
+export type HeaderParameters<T> = Param<T, 'header', 'headers'>
+
+export type OpenApiRequestOptions<
+  P extends PathItemObject,
+  M extends IgnoreCase<keyof P & HttpMethod> = IgnoreCase<keyof P & 'get'>,
+> = Omit<
+  NitroFetchOptions<any, Lowercase<M>>,
+  'params' | 'query' | 'headers' | 'method' | 'body' | 'cache'
+> & RequestBody<P[Lowercase<M>]> & PathParameters<P[Lowercase<M>]> & QueryParameters<P[Lowercase<M>]> & Method<M>
+
+type MediaTypes<T, Status extends keyof any> = {
+  [S in Status]: T extends {
+    responses: {
+      [_ in S]: {
+        content: {
+          'application/json': infer Model
+        }
+      };
+    }
+  }
+    ? Model
+    : never;
+}[Status]
+
+// Fetch types
+export type OpenApiResponse<T> = MediaTypes<T, OkStatus>
+export type OpenApiError<T> = MediaTypes<T, ErrorStatus>
+
+export type AllPaths<Paths> = RemovePrefix<keyof Paths & string, '/'>
+
+/** All endpoints that don't require a `method` property */
+export type GETPaths<Paths> = {
+  [P in keyof Paths]: Paths[P] extends { get: any } ? RemovePrefix<P & string, '/'> : never;
+}[keyof Paths]
+
+/** All endpoints that don't require additional options */
+export type GETPlainPaths<Paths> = {
+  [P in keyof Paths]: Paths[P] extends { get: infer O }
+    ? O extends { parameters: { query: any } | { header: any } | { path: any } }
+      ? never
+      : RemovePrefix<P & string, '/'>
+    : never;
+}[keyof Paths]

package/src/modules/api-party/runtime/utils.ts

@@ -0,0 +1,43 @@
+import { unref } from 'vue'
+import { formDataToObject, isFormData, isSerializedFormData, objectToFormData } from './formData'
+import type { MaybeRefOrGetter } from './types'
+import type { ApiFetchOptions } from './composables/$api'
+
+export function toValue<T>(r: MaybeRefOrGetter<T>): T {
+  return typeof r === 'function'
+    ? (r as (...args: any[]) => any)()
+    : unref(r)
+}
+
+export function headersToObject(headers: HeadersInit = {}): Record<string, string> {
+  if (headers instanceof Headers || Array.isArray(headers))
+    return Object.fromEntries(headers)
+
+  return headers
+}
+
+export async function serializeMaybeEncodedBody(value: ApiFetchOptions['body']) {
+  if (isFormData(value))
+    return await formDataToObject(value)
+
+  return value
+}
+
+export async function deserializeMaybeEncodedBody(value: ApiFetchOptions['body']) {
+  if (isSerializedFormData(value))
+    return await objectToFormData(value)
+
+  return value
+}
+
+export function resolvePath(path: string, params?: Record<string, MaybeRefOrGetter<unknown>>) {
+  // To simplify typings, OpenAPI path parameters can be expanded here
+  if (params) {
+    return Object.entries(params).reduce(
+      (path, [name, value]) => path.replace(`{${name}}`, encodeURIComponent(String(toValue(value)))),
+      path,
+    )
+  }
+
+  return path
+}

package/src/pages/403.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+definePageMeta({
+  title: '403',
+  layout: 'empty',
+  notAsMenu: true,
+})
+</script>
+
+<template>
+  <SSException403 />
+</template>

package/src/pages/500.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+definePageMeta({
+  title: '500',
+  layout: 'empty',
+  notAsMenu: true,
+})
+</script>
+
+<template>
+  <SSException500 />
+</template>

package/src/pages/[...all].vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+definePageMeta({
+  title: '404',
+  layout: 'empty',
+  notAsMenu: true,
+})
+</script>
+
+<template>
+  <SSException404 />
+</template>

package/src/pages/login.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Login',
+  key: 'Login',
+  icon: 'i-carbon:user-avatar',
+  requiresAuth: false,
+  keepAlive: true,
+  notAsMenu: true,
+  order: 4,
+  isHideSubApp: true,
+})
+
+const router = useRouter()
+const token = ref('')
+const appId = ref(APP_ID_STORAGE.value || 'd48b652d-b023-449a-8690-30be16b98934')
+
+function setLogin() {
+  TOKEN_PROP_STORAGE.value = 'Authorization'
+  TOKEN_STORAGE.value = `Bearer ${token.value}`
+  APP_ID_STORAGE.value = appId.value
+  router.push('/')
+}
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <el-card shadow="never" class="lg:h-full" :body-style="{ height: 'calc(100% - 61px)' }">
+    <template #header>
+      <div class="card-header">
+        <span>{{ t('title') }}</span>
+      </div>
+    </template>
+    <el-form label-width="120px">
+      <el-form-item :label="t('token')">
+        <el-input v-model="token" :placeholder="t('placeholder.token')" />
+      </el-form-item>
+      <el-form-item :label="t('appId')">
+        <el-input v-model="appId" :placeholder="t('placeholder.appId')" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="setLogin">
+          {{ t('submit') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<i18n lang="yaml">
+en:
+  title: Login
+  submit: Submit
+  token: Token
+  appId: App ID
+  placeholder:
+    token: Please input token
+    appId: Please input app id
+vi:
+  title: Đăng nhập
+  submit: Đăng nhập
+  token: Khóa
+  appId: ID ứng dụng
+  placeholder:
+    token: Vui lòng nhập khóa
+    appId: Vui lòng nhập ID ứng dụng
+</i18n>

package/src/plugins/auth.ts

@@ -0,0 +1,10 @@
+export default defineNuxtPlugin(() => {
+  const visibility = useDocumentVisibility()
+
+  watch(TOKEN_STORAGE, () => {
+    nextTick(() => {
+      if (!TOKEN_STORAGE.value && visibility.value === 'hidden')
+        window.location.reload()
+    })
+  })
+})