@rebasepro/core 0.0.1-canary.f81da60 → 0.1.2

package/src/hooks/useResolvedComponent.tsx

@@ -0,0 +1,157 @@
+import React, { lazy, useMemo } from "react";
+import type { ComponentRef, LazyComponentRef } from "@rebasepro/types";
+import { isLazyComponentRef } from "@rebasepro/types";
+
+/**
+ * Internal cache for resolved lazy components.
+ *
+ * `React.lazy()` must return the SAME wrapper across renders — if we call
+ * `lazy(loader)` on every render, React will treat each result as a new
+ * component type and unmount/remount on each render cycle.
+ *
+ * This WeakMap keeps a stable mapping from a `ComponentRef` (object/function)
+ * to the `React.lazy()` wrapper it produced. Strings are keyed by a separate
+ * plain Map since they can't be WeakMap keys.
+ */
+const lazyCache = new WeakMap<object | Function, React.ComponentType<any>>();
+
+/**
+ * Resolves a `ComponentRef` into a renderable `React.ComponentType`.
+ *
+ * This hook handles all three forms of `ComponentRef`:
+ *
+ * 1. **`LazyComponentRef`** (produced by the Vite plugin from string paths):
+ *    Wraps the lazy loader with `React.lazy()` for automatic code-splitting.
+ *
+ * 2. **`() => Promise<{ default: ComponentType }>`** (manual lazy import):
+ *    Also wraps with `React.lazy()`. Distinguished from regular components
+ *    by checking that the function has no parameters and is not a known
+ *    React internal (no `$$typeof`).
+ *
+ * 3. **Direct `React.ComponentType`**:
+ *    Returned as-is.
+ *
+ * If the ref is `undefined` or a raw string (which should never happen at
+ * runtime in the browser since the Vite plugin transforms strings), returns `undefined`.
+ *
+ * The returned component is stable across re-renders as long as the `ref`
+ * is referentially stable.
+ *
+ * **Usage:** Wrap the rendered component in `<Suspense>` to handle the
+ * loading state of lazy components.
+ *
+ * @example
+ * ```tsx
+ * const ResolvedField = useResolvedComponent(property.ui?.Field);
+ * if (!ResolvedField) return null;
+ * return (
+ *     <Suspense fallback={<CircularProgress />}>
+ *         <ResolvedField {...fieldProps} />
+ *     </Suspense>
+ * );
+ * ```
+ */
+export function useResolvedComponent<P = unknown>(
+    ref: ComponentRef<P> | undefined
+): React.ComponentType<P> | undefined {
+    return useMemo(() => resolveComponentRef(ref), [ref]);
+}
+
+/**
+ * Wraps a loader function with `React.lazy()`, caching the result so the
+ * same loader always returns the same lazy component identity.
+ */
+function getOrCreateLazy<P>(
+    key: object | Function,
+    loader: () => Promise<{ default: React.ComponentType<P> }>
+): React.ComponentType<P> {
+    const cached = lazyCache.get(key);
+    if (cached) return cached as React.ComponentType<P>;
+
+    const LazyComponent = lazy(loader) as unknown as React.ComponentType<P>;
+    lazyCache.set(key, LazyComponent);
+    return LazyComponent;
+}
+
+/**
+ * Pure function version of the resolver, for use outside React components.
+ * Same resolution logic as `useResolvedComponent`.
+ *
+ * Results are cached per reference identity — calling this multiple times
+ * with the same `ref` object returns the same `React.ComponentType`.
+ */
+export function resolveComponentRef<P = unknown>(
+    ref: ComponentRef<P> | undefined
+): React.ComponentType<P> | undefined {
+    if (ref == null) return undefined;
+
+    // 1. String — should not happen at runtime (Vite transforms them).
+    //    Log a warning and bail out.
+    if (typeof ref === "string") {
+        console.warn(
+            `[Rebase] Encountered a raw string ComponentRef ("${ref}") at runtime. ` +
+            "This usually means the Vite transform plugin did not process this file. " +
+            "Ensure the file is inside the configured collectionsDir."
+        );
+        return undefined;
+    }
+
+    // 2. LazyComponentRef — produced by the Vite plugin from string paths.
+    //    The object has { __rebaseLazy: true, load: () => import(...) }.
+    if (isLazyComponentRef(ref)) {
+        return getOrCreateLazy<P>(
+            ref as unknown as object,
+            () => (ref as LazyComponentRef<P>).load()
+        );
+    }
+
+    // 3. Function — either a React component or a lazy import loader.
+    if (typeof ref === "function") {
+        const fn = ref as Function;
+
+        // Class components (React.Component / PureComponent) have this flag
+        if (fn.prototype?.isReactComponent) {
+            return ref as React.ComponentType<P>;
+        }
+
+        // React internals (forwardRef, memo, etc.) carry $$typeof
+        if ("$$typeof" in fn) {
+            return ref as React.ComponentType<P>;
+        }
+
+        // A function with declared parameters (fn.length > 0) is a regular
+        // component that accepts props — return as-is.
+        if (fn.length > 0) {
+            return ref as React.ComponentType<P>;
+        }
+
+        // Zero-parameter function — could be a React component with no props
+        // OR a lazy loader `() => import(...)`. We distinguish by checking
+        // if `fn.name` looks like a component (starts with uppercase) or is
+        // an anonymous arrow.
+        //
+        // Convention: named function components always start with an
+        // uppercase letter. Dynamic import wrappers are typically anonymous
+        // arrows or have lowercase names.
+        const name = fn.name;
+        if (name && /^[A-Z]/.test(name)) {
+            // Named component (e.g. `function MyField() { ... }`) — return as-is
+            return ref as React.ComponentType<P>;
+        }
+
+        // Treat as a lazy loader — wrap with React.lazy, cached by identity.
+        return getOrCreateLazy<P>(
+            fn,
+            ref as () => Promise<{ default: React.ComponentType<P> }>
+        );
+    }
+
+    // 4. React wrapper objects (React.forwardRef, React.memo) —
+    //    These are objects with $$typeof but are not functions.
+    if (typeof ref === "object" && "$$typeof" in (ref as object)) {
+        return ref as unknown as React.ComponentType<P>;
+    }
+
+    // 5. Unknown shape — return undefined to be safe
+    return undefined;
+}

package/src/locales/de.ts

@@ -44,6 +44,7 @@ export const de: RebaseTranslations = {
     all_entries_loaded: "Alle {{count}} Einträge geladen",
     create_your_first_entry: "Erstellen Sie Ihren ersten Eintrag",
     no_results_filter_sort: "Keine Ergebnisse mit angewendetem Filter/Sortierung",
+    no_results_search: "Keine Ergebnisse gefunden für \"{{search}}\"",
     add: "Hinzufügen",
     remove: "Entfernen",
     multiple_entities: "Mehrere Entitäten",

package/src/locales/en.ts

@@ -52,6 +52,7 @@ export const en: RebaseTranslations = {
     all_entries_loaded: "All {{count}} entries loaded",
     create_your_first_entry: "Create your first entry",
     no_results_filter_sort: "No results with the applied filter/sort",
+    no_results_search: "No results found for \"{{search}}\"",
     add: "Add",
     remove: "Remove",
     multiple_entities: "Multiple entities",

package/src/locales/es.ts

@@ -52,6 +52,7 @@ export const es: RebaseTranslations = {
     all_entries_loaded: "Todas las {{count}} entradas cargadas",
     create_your_first_entry: "Crea tu primera entrada",
     no_results_filter_sort: "No hay resultados con el filtro/orden aplicado",
+    no_results_search: "No se encontraron resultados para \"{{search}}\"",
     add: "Añadir",
     remove: "Quitar",
     multiple_entities: "Múltiples entidades",

package/src/locales/fr.ts

@@ -44,6 +44,7 @@ export const fr: RebaseTranslations = {
     all_entries_loaded: "Toutes les {{count}} entrées chargées",
     create_your_first_entry: "Créez votre première entrée",
     no_results_filter_sort: "Aucun résultat avec le filtre/tri appliqué",
+    no_results_search: "Aucun résultat trouvé pour \"{{search}}\"",
     add: "Ajouter",
     remove: "Supprimer",
     multiple_entities: "Entités multiples",

package/src/locales/hi.ts

@@ -44,6 +44,7 @@ export const hi: RebaseTranslations = {
     all_entries_loaded: "सभी {{count}} प्रविष्टियाँ लोड हो गईं",
     create_your_first_entry: "अपनी पहली प्रविष्टि बनाएं",
     no_results_filter_sort: "लागू किए गए फ़िल्टर/सॉर्ट के साथ कोई परिणाम नहीं",
+    no_results_search: "\"{{search}}\" के लिए कोई परिणाम नहीं मिला",
     add: "जोड़ें",
     remove: "हटाएं",
     multiple_entities: "एकाधिक इकाइयां",

package/src/locales/it.ts

@@ -44,6 +44,7 @@ export const it: RebaseTranslations = {
     all_entries_loaded: "Tutte le {{count}} voci caricate",
     create_your_first_entry: "Crea la tua prima voce",
     no_results_filter_sort: "Nessun risultato con il filtro/ordinamento applicato",
+    no_results_search: "Nessun risultato trovato per \"{{search}}\"",
     add: "Aggiungi",
     remove: "Rimuovi",
     multiple_entities: "Entità multiple",

package/src/locales/pt.ts

@@ -49,6 +49,7 @@ export const pt: RebaseTranslations = {
     all_entries_loaded: "Todos os {{count}} registos carregados",
     create_your_first_entry: "Crie o seu primeiro registo",
     no_results_filter_sort: "Sem resultados com o filtro/ordenação aplicado",
+    no_results_search: "Nenhum resultado encontrado para \"{{search}}\"",
     add: "Adicionar",
     remove: "Remover",
     multiple_entities: "Múltiplas entidades",

package/src/util/previews.ts

@@ -36,7 +36,7 @@ export function getEntityPreviewKeys(
     if (listProperties && listProperties.length > 0) {
         return listProperties;
     } else {
-        listProperties = allProperties;
+        listProperties = (targetCollection.propertiesOrder as string[]) || allProperties;
         return listProperties
             .filter(key => {
                 const prop = targetCollection.properties[key];
@@ -54,16 +54,25 @@ export function getEntityTitlePropertyKey<M extends Record<string, any>>(collect
     if (collection.titleProperty) {
         return collection.titleProperty as string;
     }
-    // find first text field property
-    for (const key in collection.properties) {
+    
+    const orderToSearch = (collection.propertiesOrder as string[]) || Object.keys(collection.properties);
+    let firstStringCandidate: string | undefined;
+
+    for (const key of orderToSearch) {
         const property = collection.properties[key];
-        if (!isPropertyBuilder(property)) {
+        if (property && !isPropertyBuilder(property)) {
             const prop = property as Property;
             if (prop.type === "string" && !prop.ui?.multiline && !prop.ui?.markdown && !prop.storage && !prop.isId) {
-                return key;
+                if (!firstStringCandidate) {
+                    firstStringCandidate = key;
+                }
+                const lowerKey = key.toLowerCase();
+                if (["name", "title", "label", "displayname", "username"].includes(lowerKey)) {
+                    return key; // Immediate return if it's a strong title candidate
+                }
             }
         }
     }
-    return undefined;
+    return firstStringCandidate;
 }
 

package/src/vitePlugin.ts

@@ -1,4 +1,5 @@
 
+import path from "path";
 
 export interface RebaseCollectionsPluginOptions {
     /**
@@ -8,22 +9,70 @@ export interface RebaseCollectionsPluginOptions {
     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 = ["Field", "Preview", "Builder"];
+
+/**
+ * Regex that matches `Key: "relative/path"` or `Key: 'relative/path'`
+ * for each key listed in LAZY_COMPONENT_KEYS.
+ *
+ * It captures:
+ *   $1 — everything before the quote (e.g. `Field: `)
+ *   $2 — the quote character (' or ")
+ *   $3 — the path (must start with ./ or ../)
+ *
+ * The lookbehind-free pattern avoids issues with older runtimes.
+ */
+function buildTransformRegex(): RegExp {
+    const keys = LAZY_COMPONENT_KEYS.join("|");
+    // Match property key, colon, optional whitespace, then a string starting with a dot-path
+    return new RegExp(
+        `((?:${keys})\\s*:\\s*)(['"])(\\.\\.?\\/[^'"]+)\\2`,
+        "g"
+    );
+}
+
 /**
  * A Vite plugin that dynamically loads and automatically wires Rebase collections.
- * It provides a virtual module "virtual:rebase-collections" that statically exports the resolved collections array.
+ *
+ * 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;
+    const transformRegex = buildTransformRegex();
+
     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.
@@ -41,6 +90,43 @@ export function rebaseCollectionsPlugin(options: RebaseCollectionsPluginOptions)
                 `;
             }
             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;
+
+            // Reset the regex state (global flag means lastIndex persists)
+            transformRegex.lastIndex = 0;
+
+            if (!transformRegex.test(code)) return null;
+
+            // Reset again after the test consumed the regex
+            transformRegex.lastIndex = 0;
+
+            const transformed = code.replace(
+                transformRegex,
+                (_match, prefix: string, quote: string, importPath: string) => {
+                    return `${prefix}{ __rebaseLazy: true, load: () => import(${quote}${importPath}${quote}) }`;
+                }
+            );
+
+            return { code: transformed, map: null };
         }
     };
 }