@svadmin/lite 0.3.7 → 0.3.12

package/dist/server-adapter.js

@@ -0,0 +1,422 @@
+import { redirect, isRedirect } from '@sveltejs/kit';
+import { resourceToZodSchema } from './schema-generator';
+/**
+ * Creates a SvelteKit `load` function that fetches a resource list
+ * via the DataProvider. All state is driven by URL search params.
+ */
+export function createListLoader(dp, resource) {
+    return async ({ url }) => {
+        const page = Math.max(1, Number(url.searchParams.get('page')) || 1);
+        const pageSize = resource.pageSize ?? 20;
+        const sort = url.searchParams.get('sort') ?? undefined;
+        const order = url.searchParams.get('order') ?? 'asc';
+        const search = url.searchParams.get('q') ?? undefined;
+        const sorters = sort ? [{ field: sort, order }] :
+            resource.defaultSort ? [resource.defaultSort] : [];
+        const filters = [];
+        if (search) {
+            const searchable = resource.fields.find((f) => f.searchable);
+            if (searchable) {
+                filters.push({ field: searchable.key, operator: 'contains', value: search });
+            }
+        }
+        const result = await dp.getList({
+            resource: resource.name,
+            pagination: { current: page, pageSize },
+            sorters,
+            filters,
+        });
+        return {
+            records: result.data,
+            total: result.total,
+            page,
+            pageSize,
+            totalPages: Math.ceil(result.total / pageSize),
+            sort,
+            order,
+            search,
+            resource,
+        };
+    };
+}
+// ─── Detail Loader ────────────────────────────────────────────
+export function createDetailLoader(dp, resource) {
+    return async ({ params }) => {
+        const result = await dp.getOne({
+            resource: resource.name,
+            id: params.id,
+        });
+        return { record: result.data, resource };
+    };
+}
+// ─── CRUD Form Actions ────────────────────────────────────────
+/**
+ * Creates SvelteKit form actions for create / update / delete.
+ * Works with standard `<form method="POST">` submissions — no JS needed.
+ */
+export function createCrudActions(dp, resource) {
+    const pk = resource.primaryKey ?? 'id';
+    return {
+        create: async ({ request }) => {
+            const formData = await request.formData();
+            const submittedValues = formDataToObject(formData, resource.fields);
+            const validation = validateFormVariables(resource, 'create', submittedValues);
+            if (!validation.success)
+                return validation.failure;
+            const variables = validation.data;
+            try {
+                const result = await dp.create({ resource: resource.name, variables });
+                return { success: true, id: result.data[pk] };
+            }
+            catch (e) {
+                if (isRedirect(e))
+                    throw e;
+                return { success: false, error: e.message, values: variables };
+            }
+        },
+        update: async ({ request }) => {
+            const formData = await request.formData();
+            const id = formData.get('_id');
+            formData.delete('_id');
+            const submittedValues = formDataToObject(formData, resource.fields);
+            const validation = validateFormVariables(resource, 'edit', submittedValues);
+            if (!validation.success)
+                return validation.failure;
+            const variables = validation.data;
+            try {
+                await dp.update({ resource: resource.name, id, variables });
+                return { success: true };
+            }
+            catch (e) {
+                if (isRedirect(e))
+                    throw e;
+                return { success: false, error: e.message, values: variables };
+            }
+        },
+        delete: async ({ request }) => {
+            const formData = await request.formData();
+            const id = formData.get('id');
+            const redirectTo = formData.get('redirect');
+            try {
+                await dp.deleteOne({ resource: resource.name, id });
+                if (redirectTo)
+                    throw redirect(303, redirectTo);
+                return { success: true };
+            }
+            catch (e) {
+                if (isRedirect(e))
+                    throw e;
+                return { success: false, error: e.message };
+            }
+        },
+    };
+}
+// ─── Auth Helpers ─────────────────────────────────────────────
+/**
+ * Creates a SvelteKit server hook that checks auth via AuthProvider
+ * and redirects unauthenticated users to a login page.
+ */
+export function createAuthGuard(authProvider, loginPath = '/lite/login') {
+    return async ({ event, resolve }) => {
+        // Skip auth check for the login page itself
+        if (event.url.pathname === loginPath) {
+            return resolve(event);
+        }
+        // Local Lite Session Verify 
+        const session = event.cookies.get('svadmin-session');
+        if (!session) {
+            return new Response(null, {
+                status: 302,
+                headers: { Location: loginPath },
+            });
+        }
+        try {
+            const check = await authProvider.check();
+            if (!check.authenticated) {
+                event.cookies.delete('svadmin-session', { path: '/' });
+                return new Response(null, {
+                    status: 302,
+                    headers: { Location: loginPath },
+                });
+            }
+        }
+        catch {
+            event.cookies.delete('svadmin-session', { path: '/' });
+            return new Response(null, {
+                status: 302,
+                headers: { Location: loginPath },
+            });
+        }
+        return resolve(event);
+    };
+}
+/**
+ * Creates login/logout form actions using AuthProvider.
+ */
+export function createAuthActions(authProvider) {
+    return {
+        login: async ({ request, cookies }) => {
+            const formData = await request.formData();
+            const params = Object.fromEntries(formData);
+            try {
+                const result = await authProvider.login(params);
+                if (result.success) {
+                    // Store a session indicator in a cookie
+                    cookies.set('svadmin-session', 'active', {
+                        path: '/',
+                        httpOnly: true,
+                        sameSite: 'lax',
+                        maxAge: 60 * 60 * 24 * 7, // 7 days
+                    });
+                    throw redirect(303, result.redirectTo ?? '/lite');
+                }
+                return { success: false, error: result.error?.message ?? 'Login failed' };
+            }
+            catch (e) {
+                if (isRedirect(e))
+                    throw e;
+                return { success: false, error: e.message };
+            }
+        },
+        logout: async ({ cookies }) => {
+            try {
+                await authProvider.logout();
+            }
+            catch { /* ignore */ }
+            cookies.delete('svadmin-session', { path: '/' });
+            return { success: true };
+        },
+    };
+}
+// ─── UA Detection ─────────────────────────────────────────────
+/**
+ * Detects IE11 user agents for applications that maintain a dedicated fallback.
+ * This helper does not imply that Svelte 5 or the consuming app supports IE11.
+ */
+export function isLegacyBrowser(userAgent) {
+    return /MSIE|Trident|rv:11/.test(userAgent);
+}
+/**
+ * Creates an opt-in SvelteKit hook that redirects detected IE11 user agents.
+ * Consumers remain responsible for their own transpilation and browser support.
+ */
+export function createLegacyRedirectHook(litePrefix = '/lite') {
+    return async ({ event, resolve }) => {
+        const ua = event.request.headers.get('user-agent') ?? '';
+        if (isLegacyBrowser(ua) && !event.url.pathname.startsWith(litePrefix)) {
+            return new Response(null, {
+                status: 302,
+                headers: { Location: `${litePrefix}${event.url.pathname}` },
+            });
+        }
+        return resolve(event);
+    };
+}
+function formatValidationErrors(issues) {
+    const errors = {};
+    for (const issue of issues) {
+        const root = issue.path[0];
+        const field = typeof root === 'string' || typeof root === 'number' ? String(root) : '_form';
+        const messages = errors[field] ?? [];
+        if (!messages.includes(issue.message))
+            messages.push(issue.message);
+        errors[field] = messages;
+    }
+    return errors;
+}
+function validateFormVariables(resource, mode, values) {
+    const result = resourceToZodSchema(resource, mode).safeParse(values);
+    if (result.success)
+        return { success: true, data: result.data };
+    return {
+        success: false,
+        failure: {
+            success: false,
+            error: 'Validation failed',
+            values,
+            errors: formatValidationErrors(result.error.issues),
+        },
+    };
+}
+function isNativeFile(value) {
+    return typeof File !== 'undefined' && value instanceof File;
+}
+function isNonEmptyNativeFile(value) {
+    return isNativeFile(value) && value.size > 0 && value.name !== '';
+}
+function formDataToObject(formData, fields) {
+    const obj = {};
+    for (const field of fields) {
+        if (field.showInForm === false)
+            continue;
+        if (field.type === 'array') {
+            obj[field.key] = parseArrayField(formData, field);
+            continue;
+        }
+        if (field.type === 'multiselect') {
+            const values = formData.getAll(field.key);
+            if (values.length > 0) {
+                obj[field.key] = values.map(v => String(v));
+            }
+            continue;
+        }
+        if (field.type === 'images') {
+            const values = formData
+                .getAll(field.key)
+                .filter((value) => !isNativeFile(value) || isNonEmptyNativeFile(value));
+            if (values.length > 0)
+                obj[field.key] = values;
+            continue;
+        }
+        const raw = formData.get(field.key);
+        if (raw === null) {
+            if (field.type === 'boolean')
+                obj[field.key] = false;
+            continue;
+        }
+        // Don't coerce File objects, but ignore empty native file inputs
+        if (isNativeFile(raw)) {
+            if (isNonEmptyNativeFile(raw)) {
+                obj[field.key] = raw;
+            }
+            continue;
+        }
+        const strRaw = String(raw);
+        switch (field.type) {
+            case 'number':
+                if (strRaw.trim() !== '') {
+                    const numberValue = Number(strRaw);
+                    obj[field.key] = Number.isNaN(numberValue) ? strRaw : numberValue;
+                }
+                break;
+            case 'boolean':
+                obj[field.key] = strRaw === 'on' || strRaw === 'true' || strRaw === '1';
+                break;
+            case 'tags':
+                obj[field.key] = strRaw ? strRaw.split(',').map(s => s.trim()).filter(Boolean) : [];
+                break;
+            case 'json':
+                try {
+                    obj[field.key] = strRaw ? JSON.parse(strRaw) : null;
+                }
+                catch {
+                    obj[field.key] = strRaw; // Let Zod handle validation errors
+                }
+                break;
+            default:
+                obj[field.key] = strRaw;
+        }
+    }
+    return obj;
+}
+function parseArrayField(formData, field) {
+    const escapedKey = field.key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const entryPattern = new RegExp(`^${escapedKey}\\[(\\d+)\\]\\[([^\\]]+)\\]$`);
+    const rows = new Map();
+    for (const [name, value] of formData.entries()) {
+        const match = entryPattern.exec(name);
+        if (!match)
+            continue;
+        const index = Number(match[1]);
+        const key = match[2];
+        if (!Number.isSafeInteger(index) || index < 0 || !key)
+            continue;
+        const row = rows.get(index) ?? new Map();
+        const values = row.get(key) ?? [];
+        values.push(value);
+        row.set(key, values);
+        rows.set(index, row);
+    }
+    const result = [];
+    for (const [, entries] of [...rows.entries()].sort(([a], [b]) => a - b)) {
+        if (isChecked(entries.get('_delete')))
+            continue;
+        const item = {};
+        let hasMeaningfulValue = false;
+        for (const subField of field.subFields ?? []) {
+            const rawValues = entries.get(subField.key) ?? [];
+            if (subField.type === 'boolean') {
+                const value = isChecked(rawValues);
+                item[subField.key] = value;
+                hasMeaningfulValue ||= value;
+                continue;
+            }
+            if (rawValues.length === 0)
+                continue;
+            const value = coerceFieldValues(subField, rawValues);
+            if (value === undefined)
+                continue;
+            item[subField.key] = value;
+            hasMeaningfulValue ||= isMeaningfulValue(value);
+        }
+        if (hasMeaningfulValue)
+            result.push(item);
+    }
+    return result;
+}
+function isChecked(values) {
+    return (values ?? []).some((value) => {
+        if (typeof value !== 'string')
+            return false;
+        return value === 'on' || value === 'true' || value === '1';
+    });
+}
+function isMeaningfulValue(value) {
+    if (value == null || value === '')
+        return false;
+    if (Array.isArray(value))
+        return value.length > 0;
+    if (isNativeFile(value))
+        return isNonEmptyNativeFile(value);
+    return true;
+}
+function coerceFieldValues(field, rawValues) {
+    if (field.type === 'multiselect') {
+        return rawValues.filter((value) => typeof value === 'string');
+    }
+    if (field.type === 'images') {
+        const uploadedFiles = rawValues.filter(isNonEmptyNativeFile);
+        if (uploadedFiles.length > 0)
+            return uploadedFiles;
+        const retainedReferences = rawValues.filter((value) => typeof value === 'string' && value.trim().length > 0);
+        return retainedReferences.length > 0 ? retainedReferences : undefined;
+    }
+    if (field.type === 'file' || field.type === 'image') {
+        for (let index = rawValues.length - 1; index >= 0; index -= 1) {
+            const value = rawValues[index];
+            if (isNonEmptyNativeFile(value))
+                return value;
+        }
+        for (let index = rawValues.length - 1; index >= 0; index -= 1) {
+            const value = rawValues[index];
+            if (typeof value === 'string' && value.trim().length > 0)
+                return value;
+        }
+        return undefined;
+    }
+    const raw = rawValues.at(-1);
+    if (raw === undefined)
+        return undefined;
+    if (isNativeFile(raw)) {
+        return isNonEmptyNativeFile(raw) ? raw : undefined;
+    }
+    switch (field.type) {
+        case 'number':
+            if (raw.trim() === '')
+                return undefined;
+            return Number.isNaN(Number(raw)) ? raw : Number(raw);
+        case 'boolean':
+            return raw === 'on' || raw === 'true' || raw === '1';
+        case 'tags':
+            return raw ? raw.split(',').map((value) => value.trim()).filter(Boolean) : [];
+        case 'json':
+            try {
+                return raw ? JSON.parse(raw) : null;
+            }
+            catch {
+                return raw;
+            }
+        default:
+            return raw;
+    }
+}

package/package.json

@@ -1,37 +1,74 @@
 {
   "name": "@svadmin/lite",
-  "version": "0.3.7",
-  "description": "SSR-compatible lightweight admin UI for @svadmin — zero client-side JS, works in IE11",
+  "version": "0.3.12",
+  "description": "SSR-first lightweight admin UI for @svadmin with optional progressive enhancement",
   "type": "module",
+  "sideEffects": [
+    "./dist/lite.css",
+    "./dist/enhance.js"
+  ],
   "files": [
-    "src/**/*.ts",
-    "!src/**/*.test.*",
-    "!src/**/*.spec.*",
-    "!src/**/vitest.config.*",
-    "!src/**/setupTest.*"
+    "dist",
+    "README.md",
+    "!dist/**/*.test.*",
+    "!dist/**/*.test-*",
+    "!dist/**/*.spec.*",
+    "!dist/**/*.spec-*"
   ],
-  "main": "src/index.ts",
-  "types": "src/index.ts",
-  "svelte": "./src/index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "svelte": "./dist/index.js",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "svelte": "./src/index.ts",
-      "default": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./components/*.svelte": {
+      "types": "./dist/components/*.svelte.d.ts",
+      "svelte": "./dist/components/*.svelte",
+      "default": "./dist/components/*.svelte"
+    },
+    "./components/*": "./dist/components/*",
+    "./enhance.js": {
+      "import": "./dist/enhance.js",
+      "default": "./dist/enhance.js"
+    },
+    "./lite.css": {
+      "svelte": "./dist/lite.css",
+      "style": "./dist/lite.css",
+      "import": "./dist/lite.css",
+      "default": "./dist/lite.css"
     },
-    "./enhance.js": "./static/enhance.js",
-    "./src/lite.css": "./src/lite.css"
+    "./src/lite.css": {
+      "svelte": "./dist/lite.css",
+      "style": "./dist/lite.css",
+      "import": "./dist/lite.css",
+      "default": "./dist/lite.css"
+    }
   },
   "peerDependencies": {
-    "svelte": "^5.0.0",
-    "@svadmin/core": "^0.31.0",
-    "@sveltejs/kit": "^2.0.0"
+    "svelte": "^5.56.8",
+    "@svadmin/core": "^0.34.2",
+    "@sveltejs/kit": "^2.70.2"
   },
   "dependencies": {
-    "@lucide/svelte": "^1.17.0",
-    "sveltekit-superforms": "^2.30.1",
+    "@lucide/svelte": "^1.30.0",
+    "sveltekit-superforms": "^2.30.2",
     "zod": "^4.4.3"
   },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.11.2",
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/svelte": "^5.4.2",
+    "happy-dom": "^20.11.2",
+    "vitest": "^4.1.10"
+  },
+  "scripts": {
+    "build": "node ../../node_modules/@sveltejs/package/svelte-package.js -i src -o dist && bun ../../scripts/copy-package-assets.ts static/enhance.js dist/enhance.js",
+    "test": "vitest run --config ./vitest.config.ts"
+  },
   "license": "MIT",
   "publishConfig": {
     "access": "public",

package/src/schema-generator.ts

@@ -1,147 +0,0 @@
-/**
- * @svadmin/lite — Schema Generator
- *
- * Auto-generates Zod schemas from @svadmin/core FieldDefinitions.
- * Used with sveltekit-superforms for server-side form validation.
- */
-import { z } from 'zod';
-import type { FieldDefinition, ResourceDefinition } from '@svadmin/core';
-
-/**
- * Convert a single FieldDefinition to its corresponding Zod type.
- */
-function fieldToZod(field: FieldDefinition): z.ZodTypeAny {
-  let schema: z.ZodTypeAny;
-
-  switch (field.type) {
-    case 'number':
-      schema = z.coerce.number({ message: `${field.label} must be a number` });
-      break;
-    case 'boolean':
-      schema = z.coerce.boolean();
-      break;
-    case 'email':
-      schema = z.string().email(`${field.label} must be a valid email`);
-      break;
-    case 'url':
-      schema = z.string().url(`${field.label} must be a valid URL`);
-      break;
-    case 'date':
-      schema = z.string().refine(
-        (v: string | undefined) => !v || !isNaN(Date.parse(v)),
-        { message: `${field.label} must be a valid date` },
-      );
-      break;
-    case 'select':
-      if (field.options?.length) {
-        schema = z.enum(
-          field.options.map((o: { value: string | number }) => String(o.value)) as [string, ...string[]],
-          { message: `${field.label} must be one of the options` },
-        );
-      } else {
-        schema = z.string();
-      }
-      break;
-    case 'multiselect':
-      schema = z.array(z.string()).default([]);
-      break;
-    case 'tags':
-      schema = z.string().transform((v: string) => v ? v.split(',').map((s: string) => s.trim()) : []);
-      break;
-    case 'textarea':
-    case 'richtext':
-      schema = z.string().max(50000, `${field.label} is too long`);
-      break;
-    case 'json':
-      schema = z.string().refine(
-        (v: string) => { try { JSON.parse(v); return true; } catch { return false; } },
-        { message: `${field.label} must be valid JSON` },
-      );
-      break;
-    case 'phone':
-      schema = z.string().regex(/^[+\d\s()-]*$/, `${field.label} must be a valid phone number`);
-      break;
-    default:
-      schema = z.string();
-  }
-
-  // Wrap with optional/required
-  if (!field.required) {
-    schema = schema.optional().or(z.literal(''));
-  }
-
-  return schema;
-}
-
-/**
- * Generate a Zod object schema from a ResourceDefinition's fields.
- * Only includes fields that are relevant for form rendering.
- *
- * @param mode - 'create' | 'edit' to filter fields by showInCreate / showInEdit
- */
-export function fieldsToZodSchema(
-  fields: FieldDefinition[],
-  mode: 'create' | 'edit' = 'create',
-): z.ZodObject<Record<string, z.ZodTypeAny>> {
-  const shape: Record<string, z.ZodTypeAny> = {};
-
-  for (const field of fields) {
-    // Skip fields not shown in forms
-    if (field.showInForm === false) continue;
-    if (mode === 'create' && field.showInCreate === false) continue;
-    if (mode === 'edit' && field.showInEdit === false) continue;
-
-    shape[field.key] = fieldToZod(field);
-  }
-
-  return z.object(shape);
-}
-
-/**
- * Generate a Zod schema from a ResourceDefinition.
- * Convenience wrapper around fieldsToZodSchema.
- */
-export function resourceToZodSchema(
-  resource: ResourceDefinition,
-  mode: 'create' | 'edit' = 'create',
-): z.ZodObject<Record<string, z.ZodTypeAny>> {
-  return fieldsToZodSchema(resource.fields, mode);
-}
-
-/**
- * Determine the appropriate HTML input type for an IE11-friendly `<input>`.
- * Falls back to 'text' for unsupported HTML5 types.
- */
-export function fieldToInputType(field: FieldDefinition): string {
-  switch (field.type) {
-    case 'number': return 'text';      // IE11 <input type="number"> has bugs
-    case 'email': return 'text';       // IE11 email validation is broken
-    case 'url': return 'text';
-    case 'phone': return 'tel';
-    case 'boolean': return 'checkbox';
-    case 'date': return 'text';        // IE11 doesn't support type="date"
-    case 'textarea':
-    case 'richtext': return 'textarea';
-    case 'select':
-    case 'multiselect': return 'select';
-    case 'image':
-    case 'images':
-    case 'file': return 'file';
-    default: return 'text';
-  }
-}
-
-/**
- * Generate an input placeholder with format hint for IE11
- * (which cannot show native date pickers, etc.)
- */
-export function fieldToPlaceholder(field: FieldDefinition): string {
-  switch (field.type) {
-    case 'date': return 'YYYY-MM-DD';
-    case 'email': return 'user@example.com';
-    case 'url': return 'https://example.com';
-    case 'phone': return '+1 (555) 000-0000';
-    case 'number': return '0';
-    default: return '';
-  }
-}