@object-ui/react 3.3.0 → 3.3.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @object-ui/react
 
+## 3.3.2
+
+### Patch Changes
+
+- @object-ui/types@3.3.2
+- @object-ui/core@3.3.2
+- @object-ui/i18n@3.3.2
+- @object-ui/data-objectstack@3.3.2
+
+## 3.3.1
+
+### Patch Changes
+
+- @object-ui/types@3.3.1
+- @object-ui/core@3.3.1
+- @object-ui/i18n@3.3.1
+- @object-ui/data-objectstack@3.3.1
+
 ## 3.3.0
 
 ### Patch Changes

package/README.md

@@ -162,6 +162,26 @@ The `previewMode` object contains:
 
 See [full documentation](https://objectui.org/api/react) for detailed API reference.
 
+<!-- release-metadata:v3.3.0 -->
+
+## Compatibility
+
+- **React:** 18.x or 19.x
+- **Node.js:** ≥ 18
+- **TypeScript:** ≥ 5.0 (strict mode)
+- **`@objectstack/spec`:** ^3.3.0
+- **`@objectstack/client`:** ^3.3.0
+- **Tailwind CSS:** ≥ 3.4 (for packages with UI)
+
+## Links
+
+- 📚 [Documentation](https://www.objectui.org/docs/packages/react)
+- 📦 [npm package](https://www.npmjs.com/package/@object-ui/react)
+- 📝 [Changelog](./CHANGELOG.md)
+- 🐛 [Report an issue](https://github.com/objectstack-ai/objectui/issues)
+- 🤝 [Contributing Guide](https://github.com/objectstack-ai/objectui/blob/main/CONTRIBUTING.md)
+- 🗺️ [Roadmap](https://github.com/objectstack-ai/objectui/blob/main/ROADMAP.md)
+
 ## License
 
-MIT
+MIT — see [LICENSE](./LICENSE).

package/dist/SchemaRenderer.js

@@ -6,7 +6,7 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { forwardRef, useContext, useMemo, Component } from 'react';
+import React, { forwardRef, useContext, useMemo, useEffect, useReducer, useState, Component } from 'react';
 import { ComponentRegistry, ExpressionEvaluator, isObjectUIError, ERROR_CODES, debugLog, debugTime, debugTimeEnd, DebugCollector, } from '@object-ui/core';
 import { SchemaRendererContext } from './context/SchemaRendererContext';
 import { resolveI18nLabel } from './utils/i18n';
@@ -66,6 +66,11 @@ export class SchemaErrorBoundary extends Component {
 export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
     const context = useContext(SchemaRendererContext);
     const dataSource = context?.dataSource || {};
+    // Re-render trigger when the global ComponentRegistry mutates (e.g. a
+    // lazy-loaded plugin finishes registering its components).
+    const [, forceUpdate] = useReducer((n) => n + 1, 0);
+    useEffect(() => ComponentRegistry.subscribe(forceUpdate), []);
+    const [lazyError, setLazyError] = useState(null);
     // Evaluate schema expressions against the data source
     const evaluatedSchema = useMemo(() => {
         if (!schema || typeof schema === 'string')
@@ -135,9 +140,21 @@ export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
     debugLog('schema', 'Rendering schema node', { type: evaluatedSchema.type, id: evaluatedSchema.id });
     const Component = ComponentRegistry.get(evaluatedSchema.type);
     if (!Component) {
+        // If a lazy loader is registered for this type, kick it off — the
+        // registry will notify us via subscribe() once the plugin module's
+        // top-level register() side-effects have run.
+        if (!lazyError && ComponentRegistry.hasLazy(evaluatedSchema.type)) {
+            const pending = ComponentRegistry.loadLazy(evaluatedSchema.type);
+            if (pending) {
+                pending.catch((err) => {
+                    setLazyError(err instanceof Error ? err : new Error(String(err)));
+                });
+                return (_jsxs("div", { className: "p-2 text-sm text-muted-foreground animate-pulse", role: "status", "aria-live": "polite", "data-lazy-loading": evaluatedSchema.type, children: ["Loading ", _jsx("code", { children: evaluatedSchema.type }), "\u2026"] }));
+            }
+        }
         debugLog('schema', 'Component not found in registry', { type: evaluatedSchema.type });
         const errorInfo = ERROR_CODES['OBJUI-001'];
-        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", role: "alert", children: [_jsxs("p", { className: "font-medium", children: ["Unknown component type: ", _jsx("strong", { children: evaluatedSchema.type })] }), globalThis.process?.env?.NODE_ENV !== 'production' && (_jsxs("p", { className: "text-xs mt-1", children: ["\uD83D\uDCA1 ", errorInfo.suggestion, " (OBJUI-001)"] })), _jsx("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(evaluatedSchema, null, 2) })] }));
+        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", role: "alert", children: [_jsxs("p", { className: "font-medium", children: ["Unknown component type: ", _jsx("strong", { children: evaluatedSchema.type })] }), lazyError && (_jsxs("p", { className: "text-xs mt-1", children: ["Failed to load plugin: ", lazyError.message] })), globalThis.process?.env?.NODE_ENV !== 'production' && (_jsxs("p", { className: "text-xs mt-1", children: ["\uD83D\uDCA1 ", errorInfo.suggestion, " (OBJUI-001)"] })), _jsx("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(evaluatedSchema, null, 2) })] }));
     }
     // Note: We don't forward the ref to the Component because components in the registry
     // may not support refs. The SchemaRenderer itself can still receive refs for its own use.

package/dist/context/AppShellContext.d.ts

@@ -0,0 +1,26 @@
+import type { ObjectStackAdapter } from '@object-ui/data-objectstack';
+export declare const AdapterCtx: import("react").Context<ObjectStackAdapter<unknown> | null>;
+export declare function useAdapter(): ObjectStackAdapter | null;
+export interface MetadataState {
+    apps: any[];
+    objects: any[];
+    dashboards: any[];
+    reports: any[];
+    pages: any[];
+    loading: boolean;
+    error: Error | null;
+}
+export interface MetadataContextValue extends MetadataState {
+    refresh: (type?: string) => Promise<void>;
+    invalidate: (type: string, name?: string) => void;
+    ensureType: (type: string) => Promise<any[]>;
+    getItem: (type: string, name: string) => Promise<any | null>;
+    getItemsByType: (type: string) => any[];
+}
+export declare const MetadataCtx: import("react").Context<MetadataContextValue | null>;
+export declare function useMetadata(): MetadataContextValue;
+export declare function useMetadataItem(type: string, name: string | undefined | null): {
+    item: any | null;
+    loading: boolean;
+    error: Error | null;
+};

package/dist/context/AppShellContext.js

@@ -0,0 +1,67 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+// ---------------------------------------------------------------------------
+// AdapterContext
+// ---------------------------------------------------------------------------
+export const AdapterCtx = createContext(null);
+export function useAdapter() {
+    return useContext(AdapterCtx);
+}
+export const MetadataCtx = createContext(null);
+export function useMetadata() {
+    const ctx = useContext(MetadataCtx);
+    if (!ctx) {
+        // Graceful fallback: when a consumer is rendered outside a MetadataProvider
+        // (common in unit tests that only need to assert on rendering), return an
+        // empty no-op implementation rather than crash. Production code paths
+        // should always wrap in <MetadataProvider>.
+        return {
+            apps: [],
+            objects: [],
+            dashboards: [],
+            reports: [],
+            pages: [],
+            loading: false,
+            error: null,
+            refresh: async () => { },
+            invalidate: () => { },
+            ensureType: async () => [],
+            getItem: async () => null,
+            getItemsByType: () => [],
+        };
+    }
+    return ctx;
+}
+export function useMetadataItem(type, name) {
+    const { getItem } = useMetadata();
+    const [state, setState] = useState({
+        item: null,
+        loading: !!name,
+        error: null,
+    });
+    useEffect(() => {
+        if (!name) {
+            setState({ item: null, loading: false, error: null });
+            return;
+        }
+        let cancelled = false;
+        setState(s => ({ ...s, loading: true, error: null }));
+        getItem(type, name)
+            .then(item => {
+            if (!cancelled)
+                setState({ item, loading: false, error: null });
+        })
+            .catch(err => {
+            if (!cancelled) {
+                setState({
+                    item: null,
+                    loading: false,
+                    error: err instanceof Error ? err : new Error(String(err)),
+                });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [type, name, getItem]);
+    return state;
+}

package/dist/context/index.d.ts

@@ -1,12 +1,6 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 export * from './SchemaRendererContext';
 export * from './ActionContext';
 export * from './ThemeContext';
 export * from './NotificationContext';
 export * from './DndContext';
+export * from './AppShellContext';

package/dist/context/index.js

@@ -1,12 +1,6 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 export * from './SchemaRendererContext';
 export * from './ActionContext';
 export * from './ThemeContext';
 export * from './NotificationContext';
 export * from './DndContext';
+export * from './AppShellContext';

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@object-ui/react",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "type": "module",
   "license": "MIT",
   "description": "React bindings and SchemaRenderer component for Object UI",
-  "homepage": "https://www.objectui.org",
+  "homepage": "https://www.objectui.org/docs/packages/react",
   "repository": {
     "type": "git",
-    "url": "https://github.com/objectstack-ai/objectui.git",
+    "url": "git+https://github.com/objectstack-ai/objectui.git",
     "directory": "packages/react"
   },
   "bugs": {
@@ -24,11 +24,12 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^4.0.3",
-    "react-hook-form": "^7.72.1",
-    "@object-ui/core": "3.3.0",
-    "@object-ui/i18n": "3.3.0",
-    "@object-ui/types": "3.3.0"
+    "@objectstack/spec": "^4.0.4",
+    "react-hook-form": "^7.75.0",
+    "@object-ui/core": "3.3.2",
+    "@object-ui/data-objectstack": "3.3.2",
+    "@object-ui/i18n": "3.3.2",
+    "@object-ui/types": "3.3.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -37,8 +38,30 @@
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "typescript": "^6.0.2"
+    "typescript": "^6.0.3"
   },
+  "keywords": [
+    "objectui",
+    "sdui",
+    "schema-driven-ui",
+    "react",
+    "tailwind",
+    "shadcn",
+    "objectstack",
+    "renderer",
+    "schema-renderer",
+    "hooks"
+  ],
+  "author": "ObjectStack Team <team@objectstack.ai>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
   "scripts": {
     "build": "tsc",
     "test": "vitest run",

package/.turbo/turbo-build.log

@@ -1,4 +0,0 @@
-
-> @object-ui/react@3.3.0 build /home/runner/work/objectui/objectui/packages/react
-> tsc
-

package/src/LazyPluginLoader.tsx

@@ -1,174 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { lazy, Suspense, Component } from 'react';
-
-export interface LazyPluginOptions {
-  /**
-   * Fallback component to show while loading
-   */
-  fallback?: React.ReactNode;
-  /**
-   * Number of retry attempts on load failure (default: 2)
-   */
-  retries?: number;
-  /**
-   * Delay in ms between retries (default: 1000)
-   */
-  retryDelay?: number;
-  /**
-   * Custom error fallback component
-   */
-  errorFallback?: React.ComponentType<{ error: Error; retry: () => void }>;
-}
-
-/**
- * Error boundary for lazy-loaded plugins
- */
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-class PluginErrorBoundary extends Component<
-  { fallback?: React.ComponentType<{ error: Error; retry: () => void }>; children: React.ReactNode },
-  ErrorBoundaryState
-> {
-  state: ErrorBoundaryState = { hasError: false, error: null };
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  handleRetry = () => {
-    this.setState({ hasError: false, error: null });
-  };
-
-  render() {
-    if (this.state.hasError && this.state.error) {
-      const FallbackComponent = this.props.fallback;
-      if (FallbackComponent) {
-        return <FallbackComponent error={this.state.error} retry={this.handleRetry} />;
-      }
-      return null;
-    }
-    return this.props.children;
-  }
-}
-
-/**
- * Create a lazy-loaded import function with retry support
- */
-function createRetryImport<P extends object>(
-  importFn: () => Promise<{ default: React.ComponentType<P> }>,
-  retries: number,
-  retryDelay: number,
-): () => Promise<{ default: React.ComponentType<P> }> {
-  return () => {
-    let attempt = 0;
-    const tryImport = (): Promise<{ default: React.ComponentType<P> }> =>
-      importFn().catch((err) => {
-        attempt++;
-        if (attempt <= retries) {
-          return new Promise((resolve) =>
-            setTimeout(() => resolve(tryImport()), retryDelay),
-          );
-        }
-        throw err;
-      });
-    return tryImport();
-  };
-}
-
-/**
- * Create a lazy-loaded plugin component with Suspense wrapper
- * 
- * @param importFn - Dynamic import function that returns a module with default export
- * @param options - Configuration options for the lazy plugin
- * @returns A component that lazy loads the plugin
- * 
- * @example
- * ```tsx
- * // Basic usage
- * const ObjectGrid = createLazyPlugin(
- *   () => import('@object-ui/plugin-grid')
- * );
- * 
- * // With custom fallback
- * const ObjectGrid = createLazyPlugin(
- *   () => import('@object-ui/plugin-grid'),
- *   { fallback: <div>Loading grid...</div> }
- * );
- * 
- * // With retry and error handling
- * const ObjectGrid = createLazyPlugin(
- *   () => import('@object-ui/plugin-grid'),
- *   {
- *     retries: 3,
- *     errorFallback: ({ error, retry }) => (
- *       <div>
- *         <p>Failed to load: {error.message}</p>
- *         <button onClick={retry}>Retry</button>
- *       </div>
- *     ),
- *   }
- * );
- * ```
- */
-export function createLazyPlugin<P extends object = any>(
-  importFn: () => Promise<{ default: React.ComponentType<P> }>,
-  options?: LazyPluginOptions
-): React.ComponentType<P> {
-  const { retries = 2, retryDelay = 1000, errorFallback } = options || {};
-
-  const retryImport = retries > 0
-    ? createRetryImport(importFn, retries, retryDelay)
-    : importFn;
-
-  const LazyComponent = lazy(retryImport);
-  
-  const PluginWrapper: React.FC<P> = (props) => {
-    const content = (
-      <Suspense fallback={options?.fallback || null}>
-        <LazyComponent {...props} />
-      </Suspense>
-    );
-
-    if (errorFallback) {
-      return (
-        <PluginErrorBoundary fallback={errorFallback}>
-          {content}
-        </PluginErrorBoundary>
-      );
-    }
-
-    return content;
-  };
-  
-  return PluginWrapper;
-}
-
-/**
- * Preload a plugin module without rendering it.
- * Useful for preloading plugins that will be needed soon.
- *
- * @param importFn - Dynamic import function
- * @returns Promise that resolves when the module is loaded
- *
- * @example
- * ```tsx
- * // Preload on hover
- * const loadGrid = () => import('@object-ui/plugin-grid');
- * <button onMouseEnter={() => preloadPlugin(loadGrid)}>Show Grid</button>
- * ```
- */
-export function preloadPlugin<T = unknown>(
-  importFn: () => Promise<T>,
-): Promise<T> {
-  return importFn();
-}