runeforge 0.0.7 → 0.0.9

package/README.md

@@ -23,6 +23,7 @@ A SvelteKit toolkit that forges forms, tables, actions, and CRUD workflows from
   - [Theming](#theming)
     - [Tailwind source scanning](#tailwind-source-scanning)
     - [CSS variables](#css-variables)
+  - [Configuration](#configuration)
   - [Basic Usage](#basic-usage)
     - [1. Define your interface and metadata](#1-define-your-interface-and-metadata)
     - [2. Create the model](#2-create-the-model)
@@ -136,6 +137,25 @@ Responsive overrides work too:
 
 ---
 
+## Configuration
+
+Global settings are applied once in your root layout via `setConfig`. This avoids passing the same prop to every CRUD component.
+
+```svelte
+<!-- +layout.svelte -->
+<script>
+  import { setConfig } from 'runeforge';
+
+  setConfig({ homeHref: '/admin' });
+</script>
+```
+
+| Option | Default | Description |
+| --- | --- | --- |
+| `homeHref` | `'/'` | URL for the home crumb in every breadcrumb trail |
+
+---
+
 ## Basic Usage
 
 ### 1. Define your interface and metadata
@@ -284,6 +304,14 @@ The `load` function returns a single record when `?id=` is present (used by the
 
 `dataKey` must match the key returned by the load function for the list. Each `endpoint` maps to a SvelteKit form action on the same page.
 
+If your records use a different identifier field than `_id` (e.g. a plain `id`), pass the `idKey` prop:
+
+```svelte
+<GenericCRUD idKey="id" ... />
+```
+
+This propagates to navigation URLs, form submissions, deletion calls, and the auto-excluded column list, so no other changes are needed on your end.
+
 ---
 
 ## Components

package/dist/components/common/Header.svelte

@@ -7,19 +7,17 @@
     title,
     breadcrumbs = [],
     buttons,
-    admin = false,
   }: {
     title: string;
     breadcrumbs?: BreadcrumbItem[];
     buttons?: Snippet;
-    admin?: boolean;
   } = $props();
 </script>
 
 <div class="header-root flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
   <div class="flex flex-col gap-1 flex-1">
     <h1>{title}</h1>
-    <Breadcrumbs items={breadcrumbs} {admin} />
+    <Breadcrumbs items={breadcrumbs} />
   </div>
 
   {#if buttons}

package/dist/components/common/Header.svelte.d.ts

@@ -4,7 +4,6 @@ type $$ComponentProps = {
     title: string;
     breadcrumbs?: BreadcrumbItem[];
     buttons?: Snippet;
-    admin?: boolean;
 };
 declare const Header: import("svelte").Component<$$ComponentProps, {}, "">;
 type Header = ReturnType<typeof Header>;

package/dist/components/crud/GenericCRUD.svelte

@@ -18,6 +18,7 @@
   let {
     data = undefined as Record<string, unknown> | undefined,
     dataKey = undefined as string | undefined,
+    idKey = '_id',
     labelOne = '',
     labelMany = '',
     icon,
@@ -34,6 +35,7 @@
   }: {
     data?: Record<string, unknown>;
     dataKey?: string;
+    idKey?: string;
     labelOne?: string;
     labelMany?: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -61,9 +63,11 @@
   const reading  = $derived(idParam !== null && viewParam === null);
   const editing  = $derived(idParam !== null && viewParam === 'edit');
 
+  const excluded = $derived(new Set([...AUTO_EXCLUDED, idKey]));
+
   const singleInstance = $derived<T | undefined>(
     (Object.values(page.data as Record<string, unknown>).find(
-      (v) => v !== null && typeof v === 'object' && !Array.isArray(v) && '_id' in (v as object)
+      (v) => v !== null && typeof v === 'object' && !Array.isArray(v) && idKey in (v as object)
     ) as T | undefined)
   );
 
@@ -72,10 +76,10 @@
   async function navList()      { await goto('?'); }
   async function navCreate()    { await goto('?view=create'); }
   async function navRead(item: T) {
-    await goto(`?id=${encodeURIComponent(String((item as Record<string, unknown>)._id ?? ''))}`);
+    await goto(`?id=${encodeURIComponent(String((item as Record<string, unknown>)[idKey] ?? ''))}`);
   }
   async function navEdit(item: T) {
-    await goto(`?id=${encodeURIComponent(String((item as Record<string, unknown>)._id ?? ''))}&view=edit`);
+    await goto(`?id=${encodeURIComponent(String((item as Record<string, unknown>)[idKey] ?? ''))}&view=edit`);
   }
 
   const resolvedColumns: ColumnDefinition<T>[] = $derived(
@@ -93,7 +97,7 @@
           }))
       : entityData.length > 0
         ? (Object.keys(entityData[0]) as (keyof T & string)[])
-            .filter((k) => k !== '_id')
+            .filter((k) => !excluded.has(k))
             .map((k) => ({ attribute: k, title: k }))
         : [])
   );
@@ -101,7 +105,7 @@
   const resolvedFields: FieldDefinition<T>[] = $derived(
     fields ?? (meta
       ? (Object.entries(meta) as [string, AttributeMetadata][])
-          .filter(([k, m]) => !AUTO_EXCLUDED.has(k) && !m.excludedFromCreate)
+          .filter(([k, m]) => !excluded.has(k) && !m.excludedFromCreate)
           .map(([k, m]) => ({
             attribute: k as keyof T & string,
             title: m.label,
@@ -114,7 +118,7 @@
           }))
       : entityData.length > 0
         ? (Object.entries(entityData[0]) as [string, unknown][])
-            .filter(([k]) => !AUTO_EXCLUDED.has(k))
+            .filter(([k]) => !excluded.has(k))
             .map(([k, v]) => ({ attribute: k as keyof T & string, type: inferType(k, v) }))
         : [])
   );
@@ -122,7 +126,7 @@
   const resolvedReadFields: FieldDefinition<T>[] = $derived(
     fields ?? (meta
       ? (Object.entries(meta) as [string, AttributeMetadata][])
-          .filter(([k, m]) => !AUTO_EXCLUDED.has(k) && !m.excludedFromRead)
+          .filter(([k, m]) => !excluded.has(k) && !m.excludedFromRead)
           .map(([k, m]) => ({
             attribute: k as keyof T & string,
             title: m.label,
@@ -135,7 +139,7 @@
           }))
       : entityData.length > 0
         ? (Object.entries(entityData[0]) as [string, unknown][])
-            .filter(([k]) => !AUTO_EXCLUDED.has(k))
+            .filter(([k]) => !excluded.has(k))
             .map(([k, v]) => ({ attribute: k as keyof T & string, type: inferType(k, v) }))
         : [])
   );
@@ -143,7 +147,7 @@
   const resolvedUpdateFields: FieldDefinition<T>[] = $derived(
     fields ?? (meta
       ? (Object.entries(meta) as [string, AttributeMetadata][])
-          .filter(([k, m]) => !AUTO_EXCLUDED.has(k) && !m.excludedFromUpdate)
+          .filter(([k, m]) => !excluded.has(k) && !m.excludedFromUpdate)
           .map(([k, m]) => ({
             attribute: k as keyof T & string,
             title: m.label,
@@ -156,7 +160,7 @@
           }))
       : entityData.length > 0
         ? (Object.entries(entityData[0]) as [string, unknown][])
-            .filter(([k]) => !AUTO_EXCLUDED.has(k))
+            .filter(([k]) => !excluded.has(k))
             .map(([k, v]) => ({ attribute: k as keyof T & string, type: inferType(k, v) }))
         : [])
   );
@@ -184,6 +188,7 @@
     {labelOne}
     {labelMany}
     {icon}
+    {idKey}
     fields={resolvedReadFields}
     instance={singleInstance ?? {} as T}
     {read}
@@ -194,6 +199,7 @@
     {labelOne}
     {labelMany}
     {icon}
+    {idKey}
     fields={resolvedUpdateFields}
     instance={singleInstance ?? {} as T}
     {update}
@@ -208,6 +214,7 @@
     {labelMany}
     {icon}
     {pageSize}
+    {idKey}
     {creation}
     {update}
     {read}

package/dist/components/crud/GenericCRUD.svelte.d.ts

@@ -4,6 +4,7 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
     props: {
         data?: Record<string, unknown>;
         dataKey?: string;
+        idKey?: string;
         labelOne?: string;
         labelMany?: string;
         icon?: any;

package/dist/components/crud/utils/formatters.d.ts

@@ -1,6 +1,4 @@
 export declare const formatBoolean: (trueLabel?: string, falseLabel?: string) => () => (value: boolean) => string;
 export declare const formatDatetime: (format?: string) => () => (value: Date) => string;
 export declare function formatTruncateTextUpTo(maxLength: number): () => (value: string) => string;
-export declare function formatInstance<T extends {
-    _id: string;
-}>(attribute: keyof T & string, instances: T[], urlPath: string): (value: unknown) => string;
+export declare function formatInstance<T extends Record<string, unknown>>(attribute: keyof T & string, instances: T[], urlPath: string, idKey?: keyof T & string): (value: unknown) => string;

package/dist/components/crud/utils/formatters.js

@@ -30,8 +30,8 @@ function escapeHtml(str) {
         .replace(/>/g, '>')
         .replace(/"/g, '"');
 }
-export function formatInstance(attribute, instances, urlPath) {
-    const map = new Map(instances.map((i) => [i._id, i]));
+export function formatInstance(attribute, instances, urlPath, idKey = '_id') {
+    const map = new Map(instances.map((i) => [String(i[idKey] ?? ''), i]));
     return (value) => {
         const id = String(value ?? '');
         const instance = map.get(id);

package/dist/components/crud/views/Create.svelte

@@ -75,7 +75,6 @@
 <div class="flex flex-col gap-6">
 
   <Header
-    admin
     title={labelMany}
     breadcrumbs={[
       { label: labelMany, icon: entityIcon, link: { href: '#', onclick: (e) => { e.preventDefault(); onCancel?.(); } }, prominent: true },

package/dist/components/crud/views/List.svelte

@@ -22,6 +22,7 @@
     labelMany = '',
     icon,
     pageSize = 10,
+    idKey = '_id',
     creation = {} as ActionConfiguration<T>,
     update = {} as ActionConfiguration<T>,
     read = {} as ActionConfiguration<T>,
@@ -39,6 +40,7 @@
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     icon?: any;
     pageSize?: number;
+    idKey?: string;
     creation?: ActionConfiguration<T>;
     update?: ActionConfiguration<T>;
     read?: ActionConfiguration<T>;
@@ -67,7 +69,7 @@
   async function runEndpointAction(endpoint: string, items: T[]) {
     await Promise.all(items.map((item) => {
       const fd = new FormData();
-      fd.set('id', String((item as Record<string, unknown>)._id ?? ''));
+      fd.set('id', String((item as Record<string, unknown>)[idKey] ?? ''));
       return fetch(endpoint, { method: 'POST', body: fd });
     }));
     await invalidateAll();
@@ -124,7 +126,6 @@
 <div class="flex flex-col gap-6">
 
   <Header
-    admin
     title={labelMany}
     breadcrumbs={[
       { label: labelMany, icon: entityIcon, link: { href: '#' }, prominent: true },

package/dist/components/crud/views/List.svelte.d.ts

@@ -6,6 +6,7 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         labelMany?: string;
         icon?: any;
         pageSize?: number;
+        idKey?: string;
         creation?: ActionConfiguration<T>;
         update?: ActionConfiguration<T>;
         read?: ActionConfiguration<T>;

package/dist/components/crud/views/Read.svelte

@@ -15,6 +15,7 @@
     labelOne = '',
     labelMany = '',
     icon,
+    idKey = '_id',
     fields = [] as FieldDefinition<T>[],
     instance = {} as T,
     read = {} as ActionConfiguration<T>,
@@ -24,6 +25,7 @@
     labelMany?: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     icon?: any;
+    idKey?: string;
     fields?: FieldDefinition<T>[];
     instance?: T;
     read?: ActionConfiguration<T>;
@@ -37,7 +39,7 @@
 
   $effect(() => {
     const endpoint = read.endpoint;
-    const id = (instance as Record<string, unknown>)._id;
+    const id = (instance as Record<string, unknown>)[idKey];
     if (!endpoint || id == null) return;
 
     let cancelled = false;
@@ -50,7 +52,7 @@
         const data = result.data as Record<string, unknown> | undefined;
         const fetched = data
           ? Object.values(data).find(
-              (v) => v !== null && typeof v === 'object' && !Array.isArray(v) && '_id' in (v as object)
+              (v) => v !== null && typeof v === 'object' && !Array.isArray(v) && idKey in (v as object)
             )
           : undefined;
         if (fetched && typeof fetched === 'object') record = fetched as Record<string, unknown>;
@@ -63,7 +65,6 @@
 <div class="flex flex-col gap-6">
 
   <Header
-    admin
     title={labelMany}
     breadcrumbs={[
       { label: labelMany, icon: entityIcon, link: { href: '#', onclick: (e) => { e.preventDefault(); onCancel?.(); } }, prominent: true },

package/dist/components/crud/views/Read.svelte.d.ts

@@ -4,6 +4,7 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         labelOne?: string;
         labelMany?: string;
         icon?: any;
+        idKey?: string;
         fields?: FieldDefinition<T>[];
         instance?: T;
         read?: ActionConfiguration<T>;

package/dist/components/crud/views/Update.svelte

@@ -16,6 +16,7 @@
     labelOne = '',
     labelMany = '',
     icon,
+    idKey = '_id',
     fields = [] as FieldDefinition<T>[],
     instance = {} as T,
     update = {} as ActionConfiguration<T>,
@@ -27,6 +28,7 @@
     labelMany?: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     icon?: any;
+    idKey?: string;
     fields?: FieldDefinition<T>[];
     instance?: T;
     update?: ActionConfiguration<T>;
@@ -56,7 +58,7 @@
   );
 
   $effect(() => {
-    const id = (instance as Record<string, unknown>)._id;
+    const id = (instance as Record<string, unknown>)[idKey];
     if (!id) return;
     untrack(() => { record = seedFromInstance(instance as Record<string, unknown>); });
   });
@@ -83,7 +85,6 @@
 <div class="flex flex-col gap-6">
 
   <Header
-    admin
     title={labelMany}
     breadcrumbs={[
       { label: labelMany, icon: entityIcon, link: { href: '#', onclick: (e) => { e.preventDefault(); onCancel?.(); } }, prominent: true },
@@ -130,7 +131,7 @@
       };
     }}
   >
-    <input type="hidden" name="id" value={String(record._id ?? '')} />
+    <input type="hidden" name="id" value={String(record[idKey] ?? '')} />
 
     {#each fields as field (field.attribute)}
       <Field {field} bind:record error={fieldErrors[field.attribute] ?? ''} />

package/dist/components/crud/views/Update.svelte.d.ts

@@ -4,6 +4,7 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         labelOne?: string;
         labelMany?: string;
         icon?: any;
+        idKey?: string;
         fields?: FieldDefinition<T>[];
         instance?: T;
         update?: ActionConfiguration<T>;

package/dist/components/navigation/Breadcrumbs.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import { getIconSet } from '../../icons/context.js';
   import { defaultIconSet } from '../../icons/sets/default.js';
+  import { getConfig } from '../../config/context.js';
   import type { BreadcrumbItem } from '../../types/breadcrumb.js';
 
   let {
     items = [],
-    admin = false,
     homeHref,
   }: {
     items?: BreadcrumbItem[];
-    admin?: boolean;
     homeHref?: string;
   } = $props();
 
@@ -18,7 +17,7 @@
   const home: BreadcrumbItem = $derived({
     label: 'Inicio',
     icon: icons.home,
-    link: { href: homeHref ?? (admin ? '/admin' : '/') },
+    link: { href: homeHref ?? getConfig().homeHref ?? '/' },
   });
 
   const allItems = $derived([home, ...items]);

package/dist/components/navigation/Breadcrumbs.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { BreadcrumbItem } from '../../types/breadcrumb.js';
 type $$ComponentProps = {
     items?: BreadcrumbItem[];
-    admin?: boolean;
     homeHref?: string;
 };
 declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/config/context.d.ts

@@ -0,0 +1,5 @@
+export interface RuneforgeConfig {
+    homeHref?: string;
+}
+export declare function setConfig(config: RuneforgeConfig): void;
+export declare function getConfig(): RuneforgeConfig;

package/dist/config/context.js

@@ -0,0 +1,9 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('runeforge-config');
+export function setConfig(config) {
+    const existing = getContext(KEY) ?? {};
+    setContext(KEY, { ...existing, ...config });
+}
+export function getConfig() {
+    return getContext(KEY) ?? {};
+}

package/dist/index.d.ts

@@ -3,6 +3,8 @@ export { AttributeType } from './types/attribute.js';
 export type { AttributeMetadata, InterfaceMetadata, SelectOption, OptionsResolver, FormatterResolver } from './types/attribute.js';
 export type { CellProps, CellComponent, CellFormatter, SortDirection, IndexedRow, DistinctEntry } from './types/table.js';
 export type { ColumnDefinition, FieldDefinition, ActionConfiguration, CustomAction, RowAction } from './types/crud.js';
+export type { RuneforgeConfig } from './config/context.js';
+export { setConfig, getConfig } from './config/context.js';
 export type { CRUDIconSet, IconComponent } from './icons/types.js';
 export { setIconSet, getIconSet } from './icons/context.js';
 export { defaultIconSet } from './icons/sets/default.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export { AttributeType } from './types/attribute.js';
+export { setConfig, getConfig } from './config/context.js';
 export { setIconSet, getIconSet } from './icons/context.js';
 export { defaultIconSet } from './icons/sets/default.js';
 export { bootstrapIconSet } from './icons/sets/bootstrap.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "runeforge",
-	"version": "0.0.7",
+	"version": "0.0.9",
 	"description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
 	"license": "MIT",
 	"author": "Ezequiel Puerta",