REST Data Source Driver
fable-ui/rest-driverFreeUtility
Optional Fable UI data source driver for host-owned REST endpoints.
Live preview
live · rendered by the registry
Rendered by fable-ui on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://fable-ui.shobky.com/r/rest-driver.jsonSource
1import type {2 DataActionInput,3 DataActionResult,4 DataQuery,5 DataQueryResult,6 DataRow,7 DataSourceContext,8 DataSourceDriver,9 ResourceConfig,10 ResourceRuntime,11} from "@/lib/fable-ui/core"12import type { RestDriverConfig, RestListResponse, RestResourceSource } from "./rest-driver.types"1314function replaceTemplate(value: string, ctx: DataSourceContext) {15 return value.replace(/\{([^}]+)\}/g, (_match, key: string) => {16 const replacement = ctx[key]1718 if (replacement == null) {19 throw new Error(`Missing REST path parameter "${key}".`)20 }2122 return encodeURIComponent(String(replacement))23 })24}2526function buildUrl(path: string, baseUrl: string | undefined, ctx: DataSourceContext) {27 const resolvedPath = replaceTemplate(path, ctx)2829 if (/^https?:\/\//i.test(resolvedPath)) {30 return new URL(resolvedPath)31 }3233 const base = baseUrl || (typeof window !== "undefined" ? window.location.origin : "http://localhost")34 return new URL(resolvedPath, base)35}3637function appendQuery(url: URL, query: DataQuery) {38 if (query.cursor) {39 url.searchParams.set("cursor", query.cursor)40 }4142 if (query.pageSize) {43 url.searchParams.set("pageSize", String(query.pageSize))44 }4546 if (query.search) {47 url.searchParams.set("search", query.search)48 }4950 if (query.sort) {51 url.searchParams.set("sort", `${query.sort.key}:${query.sort.direction}`)52 }5354 for (const [key, value] of Object.entries(query.filters ?? {})) {55 if (value == null || value === "") {56 continue57 }5859 if (Array.isArray(value)) {60 for (const item of value) {61 url.searchParams.append(`filter[${key}]`, String(item))62 }63 } else {64 url.searchParams.set(`filter[${key}]`, String(value))65 }66 }67}6869async function getHeaders(config: RestDriverConfig, ctx: DataSourceContext) {70 const configuredHeaders =71 typeof config.headers === "function" ? await config.headers(ctx) : (config.headers ?? {})72 const token = await ctx.auth?.getAccessToken?.()7374 return {75 Accept: "application/json",76 "Content-Type": "application/json",77 ...configuredHeaders,78 ...(token ? { Authorization: `Bearer ${token}` } : {}),79 }80}8182async function readJsonResponse(response: Response) {83 const text = await response.text()8485 if (!text) {86 return null87 }8889 try {90 return JSON.parse(text) as unknown91 } catch {92 return text93 }94}9596async function assertOk(response: Response) {97 if (response.ok) {98 return99 }100101// … truncated
What it pulls in
Other registry items
Files it writes
More from fable-ui
All 10 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Fable UI Corecore | fable-ui | Utilities | Free | 2 deps · 9 files | |
| Firebase Data Source Driverfirebase-driver | fable-ui | Utilities | Free | 1 dep · 3 files |
