@rebasepro/app 0.0.1-canary.4829d6e

package/src/util/useStorageUploadController.tsx

@@ -0,0 +1,350 @@
+
+import type { ArrayProperty, Property, StringProperty } from "@rebasepro/types";
+import Compressor from "compressorjs";
+import { deepEqual as equal } from "fast-equals";
+
+import { EntityValues, StorageConfig, StorageSource, StorageSourceRegistry } from "@rebasepro/types";import { useCallback, useEffect, useMemo, useState } from "react";
+import { resolveStorageFilenameString, resolveStoragePathString, resolveStorageSource } from "@rebasepro/common";
+import { useAuthController } from "../hooks";
+import { useStorageSources } from "../contexts/StorageSourcesContext";
+import { randomString } from "@rebasepro/utils";
+
+export type StorageFieldSize = "smallest" | "small" | "medium" | "large" | number;
+
+/**
+ * Internal representation of an item in the storage
+ * It can have two states, having a storagePathOrDownloadUrl set,
+ * which means the file has been uploaded, and it is rendered as a preview
+ * Or have a pending file being uploaded.
+ */
+export interface StorageFieldItem {
+    id: number; // generated on the fly for internal use only
+    storagePathOrDownloadUrl?: string;
+    file?: File;
+    fileName?: string;
+    metadata?: Record<string, unknown>,
+    size: StorageFieldSize
+}
+
+export function useStorageUploadController<M extends Record<string, unknown>>({
+    entityId,
+    entityValues,
+    path,
+    value,
+    property,
+    propertyKey,
+    storageSource,
+    storageSourceRegistry,
+    disabled,
+    onChange
+}:
+    {
+        entityId?: string | number,
+        entityValues: EntityValues<M>,
+        value: string | string[] | null;
+        path?: string,
+        propertyKey: string,
+        property: StringProperty | ArrayProperty | StringProperty | ArrayProperty,
+        storageSource: StorageSource,
+        /** Optional explicit registry. When omitted, the hook reads from the
+         *  `StorageSourcesContext` provided by `<Rebase storageSources={...}>`. */
+        storageSourceRegistry?: StorageSourceRegistry,
+        disabled: boolean,
+        onChange: (value: string | string[] | null) => void
+    }) {
+
+    const authController = useAuthController();
+    const storageSources = useStorageSources();
+    const storage: StorageConfig | undefined = property.type === "string"
+        ? property.storage
+        : property.type === "array" &&
+            (property.of as Property).type === "string"
+            ? (property.of as StringProperty).storage
+            : undefined;
+
+    // Resolve the correct storage source for this property.
+    // Priority: explicit registry prop → StorageSourcesContext → default.
+    const resolvedStorageSource = useMemo(() => resolveStorageSource({
+        sourceKey: storage?.storageSource,
+        registry: storageSourceRegistry,
+        sources: storageSources.sources,
+        defaultSource: storageSource
+    }), [storage?.storageSource, storageSourceRegistry, storageSources.sources, storageSource]);
+
+    const multipleFilesSupported = property.type === "array";
+
+    if (!storage)
+        throw Error("Storage meta must be specified");
+
+    const processFile = storage?.processFile;
+
+    const metadata: Record<string, unknown> | undefined = storage?.metadata;
+    const size = multipleFilesSupported ? "medium" : "large";
+
+    const imageResize = storage?.imageResize;
+
+    const internalInitialValue: StorageFieldItem[] =
+        getInternalInitialValue(multipleFilesSupported, value, metadata, size);
+
+    const [initialValue, setInitialValue] = useState<string | string[] | null>(value);
+    const [internalValue, setInternalValue] = useState<StorageFieldItem[]>(internalInitialValue);
+
+    useEffect(() => {
+        if (!equal(initialValue, value)) {
+            setInitialValue(value);
+            setInternalValue(internalInitialValue);
+        }
+    }, [internalInitialValue, value, initialValue]);
+
+    const fileNameBuilder = useCallback(async (file: File) => {
+        if (storage.fileName) {
+            const fileName = await resolveStorageFilenameString({
+                input: storage.fileName,
+                storage,
+                values: entityValues,
+                entityId,
+                path,
+                property: property,
+                file,
+                propertyKey
+            });
+            if (!fileName || fileName.length === 0) {
+                throw Error("You need to return a valid filename");
+            }
+            return fileName;
+        }
+        return randomString() + "_" + file.name;
+    }, [entityId, entityValues, path, property, propertyKey, storage]);
+
+    const storagePathBuilder = useCallback((file: File) => {
+        return resolveStoragePathString({
+            input: storage.storagePath,
+            storage,
+            values: entityValues,
+            entityId,
+            path,
+            property: property,
+            file,
+            propertyKey
+        }) ?? "/";
+    }, [entityId, entityValues, path, property, propertyKey, storage]);
+
+    const onFileUploadComplete = useCallback(async (uploadedPath: string,
+        entry: StorageFieldItem,
+        metadata?: Record<string, unknown>,
+        uploadedUrl?: string) => {
+
+        console.debug("onFileUploadComplete", uploadedPath, entry);
+
+        let uploadPathOrDownloadUrl: string | null = uploadedPath;
+
+        if (storage.includeBucketUrl) {
+            if (!uploadedUrl) {
+                console.warn("includeBucketUrl is set but no fully-qualified storage URL was returned by the StorageSource. Falling back to the storage path.");
+            } else {
+                uploadPathOrDownloadUrl = uploadedUrl;
+            }
+        }
+
+        if (storage.storeUrl) {
+            uploadPathOrDownloadUrl = (await resolvedStorageSource.getSignedUrl(uploadedPath)).url;
+        }
+        if (storage.postProcess && uploadPathOrDownloadUrl) {
+            uploadPathOrDownloadUrl = await storage.postProcess(uploadPathOrDownloadUrl);
+        }
+
+        if (!uploadPathOrDownloadUrl) {
+            console.warn("uploadPathOrDownloadUrl is null")
+            return;
+        }
+
+        let newValue: StorageFieldItem[];
+
+        entry.storagePathOrDownloadUrl = uploadPathOrDownloadUrl;
+        entry.metadata = metadata;
+        newValue = [...internalValue];
+
+        newValue = removeDuplicates(newValue);
+        setInternalValue(newValue);
+
+        const fieldValue = newValue
+            .filter(e => !!e.storagePathOrDownloadUrl)
+            .map(e => e.storagePathOrDownloadUrl as string);
+
+        if (multipleFilesSupported) {
+            onChange(fieldValue);
+        } else {
+            onChange(fieldValue ? fieldValue[0] : null);
+        }
+    }, [internalValue, multipleFilesSupported, onChange, storage, resolvedStorageSource]);
+
+    const onFileUploadError = useCallback((entry: StorageFieldItem) => {
+        console.debug("onFileUploadError", entry);
+
+        // Remove the failed entry from internalValue
+        const newValue = internalValue.filter(item => item.id !== entry.id);
+        setInternalValue(newValue);
+    }, [internalValue]);
+
+    const onFilesAdded = useCallback(async (acceptedFiles: File[]) => {
+
+        if (!acceptedFiles.length || disabled)
+            return;
+
+        if (processFile) {
+            try {
+                acceptedFiles = await Promise.all(acceptedFiles.map(async file => {
+                    const processedFile = await processFile(file);
+                    if (!processedFile) {
+                        return file;
+                    }
+                    return processedFile;
+                }));
+            } catch (e) {
+                console.error("Error processing file with custom code. Attempting to continue uploading.", e);
+            }
+        }
+
+        let newInternalValue: StorageFieldItem[];
+
+        if (multipleFilesSupported) {
+            newInternalValue = [...internalValue,
+            ...(await Promise.all(acceptedFiles.map(async file => {
+                if (imageResize && isImageFile(file)) {
+                    file = await resizeImage(file, imageResize);
+                }
+
+                return {
+                    id: getRandomId(),
+                    file,
+                    fileName: await fileNameBuilder(file),
+                    metadata,
+                    size
+                } as StorageFieldItem;
+            })))];
+        } else {
+            let file = acceptedFiles[0];
+            if (imageResize && isImageFile(file)) {
+                file = await resizeImage(file, imageResize);
+            }
+
+            newInternalValue = [{
+                id: getRandomId(),
+                file,
+                fileName: await fileNameBuilder(file),
+                metadata,
+                size
+            }];
+        }
+
+        // Remove either storage path or file duplicates
+        newInternalValue = removeDuplicates(newInternalValue);
+        setInternalValue(newInternalValue);
+    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size, imageResize]);
+
+    return {
+        internalValue,
+        setInternalValue,
+        storage,
+        fileNameBuilder,
+        storagePathBuilder,
+        onFileUploadComplete,
+        onFileUploadError,
+        onFilesAdded,
+        multipleFilesSupported,
+        /** The resolved StorageSource for this property — may differ from the
+         *  default context source when `StorageConfig.storageSource` is set. */
+        resolvedStorageSource
+    }
+}
+
+function getInternalInitialValue(multipleFilesSupported: boolean,
+    value: string | string[] | null,
+    metadata: Record<string, unknown> | undefined,
+    size: StorageFieldSize): StorageFieldItem[] {
+    let strings: string[] = [];
+    if (multipleFilesSupported) {
+        if (Array.isArray(value) && value.every((v) => typeof v === "string")) {
+            strings = (value ?? []) as string[];
+        }
+    } else {
+        if (typeof value === "string") {
+            strings = value ? [value as string] : [];
+        }
+    }
+
+    return strings
+        .map(entry => (
+            {
+                id: getRandomId(),
+                storagePathOrDownloadUrl: entry,
+                metadata,
+                size
+            }
+        ));
+}
+
+function removeDuplicates(items: StorageFieldItem[]) {
+    return items.filter(
+        (item, i) => {
+            return ((items.map((v) => v.storagePathOrDownloadUrl).indexOf(item.storagePathOrDownloadUrl) === i) || !item.storagePathOrDownloadUrl) &&
+                ((items.map((v) => v.file).indexOf(item.file) === i) || !item.file);
+        }
+    );
+}
+
+function getRandomId() {
+    return Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER));
+}
+
+/**
+ * Check if a file is an image type supported for resizing
+ */
+function isImageFile(file: File): boolean {
+    return file.type === "image/jpeg" ||
+        file.type === "image/png" ||
+        file.type === "image/webp";
+}
+
+/**
+ * Resize and compress an image using compressorjs.
+ */
+async function resizeImage(
+    file: File,
+    imageResize?: StorageConfig["imageResize"]
+): Promise<File> {
+    const maxWidth = imageResize?.maxWidth;
+    const maxHeight = imageResize?.maxHeight;
+    const quality = (imageResize?.quality ?? 80) / 100;
+    const mode = imageResize?.mode ?? "contain";
+
+    // Determine output format
+    let mimeType = file.type;
+    if (imageResize?.format && imageResize.format !== "original") {
+        mimeType = `image/${imageResize.format}`;
+    }
+
+    return new Promise<File>((resolve, reject) => {
+        new Compressor(file, {
+            quality,
+            maxWidth,
+            maxHeight,
+            mimeType,
+            // Use cover mode if specified (crops to fit)
+            // Otherwise use contain mode (scales to fit)
+            ...(mode === "cover" || mode === undefined ? {
+                width: maxWidth,
+                height: maxHeight,
+                resize: "cover" as const
+            } : {}),
+            success: (result) => {
+                const compressedFile = new File([result], file.name, {
+                    type: result.type,
+                    lastModified: Date.now()
+                });
+                resolve(compressedFile);
+            },
+            error: reject
+        });
+    });
+}

package/src/vitePlugin.ts

@@ -0,0 +1,196 @@
+
+import path from "path";
+import ts from "typescript";
+import MagicString from "magic-string";
+
+export interface RebaseCollectionsPluginOptions {
+    /**
+     * The path to the collections directory containing the schema definitions.
+     * Use a relative or absolute path from the root of your frontend workspace.
+     */
+    collectionsDir: string;
+}
+
+/**
+ * Properties on collection objects that accept `ComponentRef` values.
+ * When a string literal is found for any of these keys in a collection file,
+ * the transform plugin replaces it with a `LazyComponentRef` object so the
+ * component is loaded lazily and never evaluated by the backend.
+ */
+const LAZY_COMPONENT_KEYS = new Set(["Field", "Preview", "Builder"]);
+
+/**
+ * Walk a TypeScript AST node tree, invoking `visitor` for every node.
+ */
+function walkAST(node: ts.Node, visitor: (n: ts.Node) => void): void {
+    visitor(node);
+    node.forEachChild(child => walkAST(child, visitor));
+}
+
+/**
+ * Return the property name text of a `PropertyAssignment` if the name is
+ * a plain identifier or a string literal.  Returns `undefined` for computed
+ * property names or other exotic forms.
+ */
+function getPropertyName(node: ts.PropertyAssignment): string | undefined {
+    const { name } = node;
+    if (ts.isIdentifier(name)) return name.text;
+    if (ts.isStringLiteral(name)) return name.text;
+    return undefined;
+}
+
+/**
+ * Perform the AST-based transform on `code`.
+ *
+ * Parses the source with the TypeScript compiler API, walks the tree for
+ * `PropertyAssignment` nodes whose name matches one of `LAZY_COMPONENT_KEYS`
+ * and whose initializer is a string literal starting with `./` or `../`.
+ *
+ * Each match is rewritten in-place via `magic-string` so that source-maps
+ * remain correct.
+ *
+ * @returns `{ code, map }` if at least one replacement was made; `null` otherwise.
+ */
+export function transformCollectionSource(
+    code: string,
+    id: string
+): { code: string; map: ReturnType<MagicString["generateMap"]> } | null {
+    // Use TSX kind to handle both .ts and .tsx files uniformly.
+    const sourceFile = ts.createSourceFile(
+        id,
+        code,
+        ts.ScriptTarget.Latest,
+        /* setParentNodes */ true,
+        ts.ScriptKind.TSX
+    );
+
+    const ms = new MagicString(code);
+    let replaced = false;
+
+    walkAST(sourceFile, (node) => {
+        // Only look at PropertyAssignment nodes (key: value in object literals)
+        if (!ts.isPropertyAssignment(node)) return;
+
+        // Check the property name matches one of the lazy component keys
+        const propName = getPropertyName(node);
+        if (!propName || !LAZY_COMPONENT_KEYS.has(propName)) return;
+
+        // Check the initializer is a string literal
+        const init = node.initializer;
+        if (!ts.isStringLiteral(init)) return;
+
+        // Only transform dot-relative paths
+        const importPath = init.text;
+        if (!importPath.startsWith("./") && !importPath.startsWith("../")) return;
+
+        // Preserve the original quote character from the source
+        const initStart = init.getStart(sourceFile);
+        const quoteChar = code.charAt(initStart);
+
+        const replacement =
+            `{ __rebaseLazy: true, load: () => import(${quoteChar}${importPath}${quoteChar}) }`;
+
+        ms.overwrite(initStart, init.getEnd(), replacement);
+        replaced = true;
+    });
+
+    if (!replaced) return null;
+
+    return {
+        code: ms.toString(),
+        map: ms.generateMap({ hires: true })
+    };
+}
+
+/**
+ * A Vite plugin that dynamically loads and automatically wires Rebase collections.
+ *
+ * It provides two capabilities:
+ * 1. A **virtual module** `"virtual:rebase-collections"` that statically exports
+ *    the resolved collections array.
+ * 2. A **transform hook** that converts string-based component references
+ *    (e.g. `Field: "../../components/MyField"`) into `LazyComponentRef` objects
+ *    (`{ __rebaseLazy: true, load: () => import(...) }`), enabling code-splitting
+ *    and preventing the backend from loading React-dependent modules.
+ */
+export function rebaseCollectionsPlugin(options: RebaseCollectionsPluginOptions) {
+    const virtualModuleId = "virtual:rebase-collections";
+    const resolvedVirtualModuleId = "\0" + virtualModuleId;
+
+    let resolvedCollectionsDir: string;
+
+    return {
+        name: "rebase-collections-plugin",
+
+        configResolved(config: { root: string }) {
+            // Resolve the collections directory to an absolute path
+            // so the `transform` hook can match files reliably.
+            resolvedCollectionsDir = path.isAbsolute(options.collectionsDir)
+                ? options.collectionsDir
+                : path.resolve(config.root, options.collectionsDir);
+        },
+
+        resolveId(id: string) {
+            if (id === virtualModuleId) {
+                return resolvedVirtualModuleId;
+            }
+            return null;
+        },
+
+        load(id: string) {
+            if (id === resolvedVirtualModuleId) {
+                // Vite evaluates `import.meta.glob` relative to the project root.
+                // We ensure it starts with '/' so Vite knows evaluating it from the root.
+                const globPath = options.collectionsDir.startsWith("/")
+                    ? `${options.collectionsDir}/*.ts`
+                    : `/${options.collectionsDir}/*.ts`;
+
+                return `
+                    // GENERATED BY @rebasepro/app Vite Plugin
+                    const collectionModules = import.meta.glob('${globPath}', { eager: true });
+
+                    // index exports the directory's defaults, not a collection —
+                    // it has no default export, so it drops out of the list below.
+                    // Mirrors loadCollectionsFromDirectory in @rebasepro/server:
+                    // the admin would otherwise show a collection as having no
+                    // rules while the database enforces the inherited ones.
+                    const indexEntry = Object.entries(collectionModules)
+                        .find(([path]) => path.endsWith("/index.ts") || path.endsWith("/index.js"));
+                    const defaultSecurityRules = indexEntry?.[1]?.defaultSecurityRules;
+
+                    export const collections = Object.values(collectionModules)
+                        .map((module) => module.default)
+                        .filter(Boolean)
+                        .map((collection) =>
+                            defaultSecurityRules?.length && !collection.securityRules?.length
+                                ? { ...collection, securityRules: defaultSecurityRules }
+                                : collection
+                        );
+                `;
+            }
+            return null;
+        },
+
+        /**
+         * Transform collection files to convert string component references
+         * into lazy-loading `LazyComponentRef` objects.
+         *
+         * Example transform:
+         * ```
+         * // Input
+         * Field: "../../frontend/src/components/MyField"
+         *
+         * // Output
+         * Field: { __rebaseLazy: true, load: () => import("../../frontend/src/components/MyField") }
+         * ```
+         */
+        transform(code: string, id: string) {
+            // Only process .ts/.tsx files inside the collections directory
+            if (!resolvedCollectionsDir) return null;
+            if (!id.startsWith(resolvedCollectionsDir)) return null;
+            if (!/\.tsx?$/.test(id)) return null;
+
+            return transformCollectionSource(code, id);
+        }
+    };
+}