@datagouv/components-next 1.0.2-dev.93 → 1.0.2-dev.94

package/dist/{vue3-xml-viewer.common-ByPlyYhy.js → vue3-xml-viewer.common-BGsoNyZe.js}

@@ -1,4 +1,4 @@
-import { c as Ke } from "./main-DEpfIocP.js";
+import { c as Ke } from "./main-D4WQMky0.js";
 import We from "vue";
 function Fe(I, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.93",
+  "version": "1.0.2-dev.94",
   "private": false,
   "type": "module",
   "engines": {

package/src/composables/useMetrics.ts

@@ -13,6 +13,6 @@ export function useMetrics() {
     getDatasetMetrics: (datasetId: string) => getDatasetMetrics(datasetId, config.metricsApiUrl!),
     getDataserviceMetrics: (dataserviceId: string) => getDataserviceMetrics(dataserviceId, config.metricsApiUrl!),
     getReuseMetrics: (reuseId: string) => getReuseMetrics(reuseId, config.metricsApiUrl!),
-    createDatasetsForOrganizationMetricsUrl: (organizationId: string) => createDatasetsForOrganizationMetricsUrl(organizationId, config.metricsApiUrl!, config.apiBase),
+    createDatasetsForOrganizationMetricsUrl: (organizationId: string) => createDatasetsForOrganizationMetricsUrl(organizationId, config.metricsApiUrl!, config.apiBase, config.$fetch),
   }
 }

package/src/config.ts

@@ -1,6 +1,6 @@
 import { inject, type Component, type InjectionKey } from 'vue'
 import type { UseFetchFunction } from './functions/api.types'
-import type { FetchOptions } from 'ofetch'
+import type { $Fetch, FetchOptions } from 'ofetch'
 
 export type PluginConfig = {
   name: string // Name of the application (ex: data.gouv.fr)
@@ -25,6 +25,16 @@ export type PluginConfig = {
   tabularAllowRemote?: boolean
   tabularApiDataserviceId?: string
   customUseFetch?: UseFetchFunction | null
+  /**
+   * Imperative configured fetch (auth, headers, error handling): the single source of truth for
+   * requests. The default `useFetch` uses it as its transport, and imperative helpers (metrics CSV
+   * export, …) call it directly — so they never need a `?? ofetch` fallback.
+   * Optional for consumers: when omitted, the plugin defaults it to an `ofetch` instance built from
+   * the `onRequest`/`onResponse` hooks below (see the `datagouv` plugin install). A consumer can
+   * instead provide its own (e.g. a Bearer-authenticated `$fetch`) and skip the hooks entirely.
+   */
+  $fetch?: $Fetch | null
+  /** Auth/headers/error hooks. Folded into the default `$fetch` when no `$fetch` is provided. */
   onRequest?: FetchOptions['onRequest']
   onRequestError?: FetchOptions['onRequestError']
   onResponse?: FetchOptions['onResponse']
@@ -38,8 +48,12 @@ export type PluginConfig = {
 
 export const configKey = Symbol() as InjectionKey<PluginConfig>
 
-export function useComponentsConfig(): PluginConfig {
+// After the `datagouv` plugin install, `$fetch` is always set (defaulted to an ofetch instance), so
+// consumers of the config can rely on it without a fallback.
+export type ResolvedPluginConfig = PluginConfig & { $fetch: $Fetch }
+
+export function useComponentsConfig(): ResolvedPluginConfig {
   const config = inject(configKey)
   if (!config) throw new Error('Calling `useComponentsConfig` outside @datagouv/components')
-  return config
+  return config as ResolvedPluginConfig
 }

package/src/functions/api.ts

@@ -1,7 +1,6 @@
 import { ref, toValue, watchEffect, onMounted, type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue'
 import { ofetch } from 'ofetch'
 import { useComponentsConfig } from '../config'
-import { useTranslation } from '../composables/useTranslation'
 import type { AsyncData, AsyncDataRequestStatus, UseFetchOptions } from './api.types'
 
 function deepToValue(obj: MaybeRefOrGetter<Record<string, unknown> | undefined>): Record<string, unknown> | undefined {
@@ -18,8 +17,6 @@ export async function useFetch<DataT, ErrorT = never>(
 ): Promise<AsyncData<DataT, ErrorT>> {
   const config = useComponentsConfig()
 
-  const { locale } = useTranslation()
-
   if (config.customUseFetch) {
     return await config.customUseFetch(url, options)
   }
@@ -37,38 +34,12 @@ export async function useFetch<DataT, ErrorT = never>(
     status.value = 'pending'
     try {
       data.value = isRaw
+        // Raw targets another data.gouv service (the Tabular API in TabularExplorer) via its own
+        // absolute URL, so it must stay bare ofetch: no datagouv apiBase, no datagouv auth attached.
         ? await ofetch<DataT | null>(urlValue, { params: params ?? query })
-        : await ofetch<DataT | null>(urlValue, {
-            baseURL: config.apiBase,
-            params: params ?? query,
-            onRequest(param) {
-              if (config.onRequest) {
-                if (Array.isArray(config.onRequest)) {
-                  config.onRequest.forEach(r => r(param))
-                }
-                else {
-                  config.onRequest(param)
-                }
-              }
-              const { options } = param
-              options.headers.set('Content-Type', 'application/json')
-              options.headers.set('Accept', 'application/json')
-              options.credentials = 'include'
-              if (config.devApiKey) {
-                options.headers.set('X-API-KEY', config.devApiKey)
-              }
-
-              if (locale) {
-                if (!options.params) {
-                  options.params = {}
-                }
-                options.params['lang'] = locale
-              }
-            },
-            onRequestError: config.onRequestError,
-            onResponse: config.onResponse,
-            onResponseError: config.onResponseError,
-          })
+        // The configured `$fetch` carries baseURL + auth + headers (see the `datagouv` plugin install
+        // for the default one). We only forward the URL and params here.
+        : await config.$fetch<DataT | null>(urlValue, { baseURL: config.apiBase, params: params ?? query })
       status.value = 'success'
     }
     catch (e) {

package/src/functions/metrics.ts

@@ -1,5 +1,5 @@
 import { escapeCsvValue } from './helpers'
-import { ofetch } from 'ofetch'
+import { ofetch, type $Fetch } from 'ofetch'
 import type { DatasetV2 } from '../types/datasets'
 import type { PaginatedArray } from '../types/api'
 
@@ -119,14 +119,16 @@ export async function getDatasetMetrics(datasetId: string, metricsApi: string):
   }
 }
 
-export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string) {
+export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string, apiFetch: $Fetch) {
   let data = 'dataset_title,dataset_id,month,monthly_visit,monthly_download_resource\n'
 
-  // fetch datasets info from organization datasets
+  // fetch datasets info from organization datasets through the configured fetch, so it carries the
+  // consumer's auth (cookie for cdata via `$api`, Bearer for verticals) instead of a hardcoded
+  // `credentials: 'include'`, which breaks CORS cross-origin on the verticals.
   const datasets: Record<string, Record<string, string>> = {}
   let datasetsUrl: string | null = `/api/2/datasets/?organization=${organizationId}&page_size=200`
   while (datasetsUrl) {
-    const body: PaginatedArray<DatasetV2> = await ofetch(datasetsUrl, { baseURL: apiBase, credentials: 'include' })
+    const body: PaginatedArray<DatasetV2> = await apiFetch(datasetsUrl, { baseURL: apiBase })
     datasetsUrl = body.next_page
     for (const row of body.data) {
       datasets[row.id] = { title: row.title }

package/src/main.ts

@@ -104,6 +104,8 @@ import InfiniteLoader from './components/InfiniteLoader.vue'
 import TabularExplorer from './components/TabularExplorer/TabularExplorer.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
+import { ofetch } from 'ofetch'
+import { useTranslation } from './composables/useTranslation'
 
 export { Toaster, toast } from 'vue-sonner'
 
@@ -278,6 +280,31 @@ export {
 // Vue Plugin
 const datagouv: Plugin<PluginConfig> = {
   async install(app: App, options) {
+    // Default `$fetch` to an ofetch instance carrying the datagouv API specifics + the consumer's
+    // auth hooks, so everything downstream (the default `useFetch`, imperative helpers) can rely on
+    // a single configured fetch. A consumer that provides its own `$fetch` keeps full control.
+    if (!options.$fetch) {
+      options.$fetch = ofetch.create({
+        baseURL: options.apiBase,
+        onRequest(context) {
+          if (options.onRequest) {
+            if (Array.isArray(options.onRequest)) options.onRequest.forEach(hook => hook(context))
+            else options.onRequest(context)
+          }
+          context.options.headers.set('Content-Type', 'application/json')
+          context.options.headers.set('Accept', 'application/json')
+          if (options.devApiKey) context.options.headers.set('X-API-KEY', options.devApiKey)
+          const { locale } = useTranslation()
+          if (locale) {
+            context.options.params ??= {}
+            context.options.params['lang'] = locale
+          }
+        },
+        onRequestError: options.onRequestError,
+        onResponse: options.onResponse,
+        onResponseError: options.onResponseError,
+      })
+    }
     app.provide(configKey, options)
     if (!options.textClamp) {
       const textClamp = await import('vue3-text-clamp')