@object-ui/react 0.3.1 → 0.5.0

package/.turbo/turbo-build.log

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

package/dist/LazyPluginLoader.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 from 'react';
+export interface LazyPluginOptions {
+    /**
+     * Fallback component to show while loading
+     */
+    fallback?: React.ReactNode;
+}
+/**
+ * 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> }
+ * );
+ * ```
+ */
+export declare function createLazyPlugin<P extends object = any>(importFn: () => Promise<{
+    default: React.ComponentType<P>;
+}>, options?: LazyPluginOptions): React.ComponentType<P>;

package/dist/LazyPluginLoader.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { lazy, Suspense } from 'react';
+/**
+ * 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> }
+ * );
+ * ```
+ */
+export function createLazyPlugin(importFn, options) {
+    const LazyComponent = lazy(importFn);
+    const PluginWrapper = (props) => (_jsx(Suspense, { fallback: options?.fallback || null, children: _jsx(LazyComponent, { ...props }) }));
+    return PluginWrapper;
+}

package/dist/SchemaRenderer.js

@@ -6,26 +6,58 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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 } from 'react';
-import { ComponentRegistry } from '@object-ui/core';
+import React, { forwardRef, useContext, useMemo } from 'react';
+import { ComponentRegistry, ExpressionEvaluator } from '@object-ui/core';
+import { SchemaRendererContext } from './context/SchemaRendererContext';
 export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
-    if (!schema)
+    const context = useContext(SchemaRendererContext);
+    const dataSource = context?.dataSource || {};
+    // Evaluate schema expressions against the data source
+    const evaluatedSchema = useMemo(() => {
+        if (!schema || typeof schema === 'string')
+            return schema;
+        const evaluator = new ExpressionEvaluator({ data: dataSource });
+        // Shallow copy
+        const newSchema = { ...schema };
+        // COMPAT: Hoist 'properties' up to schema level
+        // This allows support for strict configs that wrap all props in 'properties'
+        if (newSchema.properties) {
+            Object.assign(newSchema, newSchema.properties);
+        }
+        // Evaluate 'content' (common in Text, Button)
+        if (typeof newSchema.content === 'string') {
+            newSchema.content = evaluator.evaluate(newSchema.content);
+        }
+        // Evaluate 'props'
+        if (newSchema.props) {
+            const newProps = { ...newSchema.props };
+            for (const [key, val] of Object.entries(newProps)) {
+                newProps[key] = evaluator.evaluate(val);
+            }
+            newSchema.props = newProps;
+        }
+        return newSchema;
+    }, [schema, dataSource]);
+    if (!evaluatedSchema)
         return null;
     // If schema is just a string, render it as text
-    if (typeof schema === 'string')
-        return _jsx(_Fragment, { children: schema });
-    const Component = ComponentRegistry.get(schema.type);
+    if (typeof evaluatedSchema === 'string')
+        return _jsx(_Fragment, { children: evaluatedSchema });
+    const Component = ComponentRegistry.get(evaluatedSchema.type);
     if (!Component) {
-        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", children: ["Unknown component type: ", _jsx("strong", { children: schema.type }), _jsx("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(schema, null, 2) })] }));
+        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", children: ["Unknown component type: ", _jsx("strong", { children: evaluatedSchema.type }), _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.
+    // Extract schema metadata properties that should NOT be passed as React props
+    const { type: _type, children: _children, body: _body, schema: _schema, visible: _visible, visibleOn: _visibleOn, hidden: _hidden, hiddenOn: _hiddenOn, disabled: _disabled, disabledOn: _disabledOn, ...componentProps } = evaluatedSchema;
     return React.createElement(Component, {
-        schema,
-        ...(schema.props || {}),
-        className: schema.className,
-        'data-obj-id': schema.id,
-        'data-obj-type': schema.type,
+        schema: evaluatedSchema,
+        ...componentProps, // Spread non-metadata schema properties as props
+        ...(evaluatedSchema.props || {}), // Override with explicit props if provided
+        className: evaluatedSchema.className,
+        'data-obj-id': evaluatedSchema.id,
+        'data-obj-type': evaluatedSchema.type,
         ...props
     });
 });

package/dist/__tests__/LazyPluginLoader.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 {};

package/dist/__tests__/LazyPluginLoader.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { createLazyPlugin } from '../LazyPluginLoader';
+describe('createLazyPlugin', () => {
+    it('should create a lazy-loaded component', async () => {
+        const TestComponent = () => _jsx("div", { children: "Test Component" });
+        const LazyComponent = createLazyPlugin(() => Promise.resolve({ default: TestComponent }));
+        render(_jsx(LazyComponent, {}));
+        await waitFor(() => {
+            expect(screen.getByText('Test Component')).toBeInTheDocument();
+        });
+    });
+    it('should show custom fallback while loading', async () => {
+        const TestComponent = () => _jsx("div", { children: "Test Component" });
+        const LazyComponent = createLazyPlugin(() => new Promise((resolve) => {
+            setTimeout(() => resolve({ default: TestComponent }), 100);
+        }), { fallback: _jsx("div", { children: "Loading..." }) });
+        render(_jsx(LazyComponent, {}));
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+        await waitFor(() => {
+            expect(screen.getByText('Test Component')).toBeInTheDocument();
+        });
+    });
+    it('should pass props to the lazy component', async () => {
+        const TestComponent = ({ message }) => _jsx("div", { children: message });
+        const LazyComponent = createLazyPlugin(() => Promise.resolve({ default: TestComponent }));
+        render(_jsx(LazyComponent, { message: "Hello World" }));
+        await waitFor(() => {
+            expect(screen.getByText('Hello World')).toBeInTheDocument();
+        });
+    });
+    it('should handle loading errors gracefully', async () => {
+        // Mock console.error to avoid noise in test output
+        const originalError = console.error;
+        console.error = vi.fn();
+        const LazyComponent = createLazyPlugin(() => Promise.reject(new Error('Load error')));
+        expect(() => render(_jsx(LazyComponent, {}))).not.toThrow();
+        // Restore console.error
+        console.error = originalError;
+    });
+});

package/dist/context/SchemaRendererContext.d.ts

@@ -3,6 +3,8 @@ interface SchemaRendererContextType {
     dataSource: any;
     debug?: boolean;
 }
+declare const SchemaRendererContext: React.Context<SchemaRendererContextType | null>;
+export { SchemaRendererContext };
 export declare const SchemaRendererProvider: ({ children, dataSource, debug }: {
     children: React.ReactNode;
     dataSource: any;
@@ -10,4 +12,3 @@ export declare const SchemaRendererProvider: ({ children, dataSource, debug }: {
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const useSchemaContext: () => SchemaRendererContextType;
 export declare const useDataScope: (path?: string) => any;
-export {};

package/dist/context/SchemaRendererContext.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from 'react';
 const SchemaRendererContext = createContext(null);
+export { SchemaRendererContext };
 export const SchemaRendererProvider = ({ children, dataSource, debug }) => {
     const value = useMemo(() => ({ dataSource, debug }), [dataSource, debug]);
     return (_jsx(SchemaRendererContext.Provider, { value: value, children: children }));
@@ -13,8 +14,9 @@ export const useSchemaContext = () => {
     return context;
 };
 export const useDataScope = (path) => {
-    const { dataSource } = useSchemaContext();
-    if (!path)
+    const context = useContext(SchemaRendererContext);
+    const dataSource = context?.dataSource;
+    if (!dataSource || !path)
         return dataSource;
     // Simple path resolution for now. In real app might be more complex
     return path.split('.').reduce((acc, part) => acc && acc[part], dataSource);

package/dist/index.d.ts

@@ -9,3 +9,4 @@ export * from './SchemaRenderer';
 export * from './hooks';
 export * from './context';
 export * from './components/form';
+export * from './LazyPluginLoader';

package/dist/index.js

@@ -9,3 +9,4 @@ export * from './SchemaRenderer';
 export * from './hooks'; // will be empty for now
 export * from './context'; // will be empty for now
 export * from './components/form';
+export * from './LazyPluginLoader';

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@object-ui/react",
-  "version": "0.3.1",
+  "version": "0.5.0",
+  "type": "module",
   "license": "MIT",
   "description": "React bindings and SchemaRenderer component for Object UI",
   "homepage": "https://www.objectui.org",
@@ -12,19 +13,26 @@
   "bugs": {
     "url": "https://github.com/objectstack-ai/objectui/issues"
   },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
   "dependencies": {
-    "@objectstack/spec": "^0.3.3",
+    "@objectstack/spec": "^0.9.1",
     "react-hook-form": "^7.71.1",
-    "@object-ui/core": "0.3.1"
+    "@object-ui/core": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.9",
+    "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
     "typescript": "^5.9.3"
   },

package/src/LazyPluginLoader.tsx

@@ -0,0 +1,52 @@
+/**
+ * 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 } from 'react';
+
+export interface LazyPluginOptions {
+  /**
+   * Fallback component to show while loading
+   */
+  fallback?: React.ReactNode;
+}
+
+/**
+ * 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> }
+ * );
+ * ```
+ */
+export function createLazyPlugin<P extends object = any>(
+  importFn: () => Promise<{ default: React.ComponentType<P> }>,
+  options?: LazyPluginOptions
+): React.ComponentType<P> {
+  const LazyComponent = lazy(importFn);
+  
+  const PluginWrapper: React.FC<P> = (props) => (
+    <Suspense fallback={options?.fallback || null}>
+      <LazyComponent {...props} />
+    </Suspense>
+  );
+  
+  return PluginWrapper;
+}

package/src/SchemaRenderer.tsx

@@ -6,33 +6,85 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { forwardRef } from 'react';
-import { SchemaNode, ComponentRegistry } from '@object-ui/core';
+import React, { forwardRef, useContext, useMemo } from 'react';
+import { SchemaNode, ComponentRegistry, ExpressionEvaluator } from '@object-ui/core';
+import { SchemaRendererContext } from './context/SchemaRendererContext';
 
 export const SchemaRenderer = forwardRef<any, { schema: SchemaNode } & Record<string, any>>(({ schema, ...props }, _ref) => {
-  if (!schema) return null;
+  const context = useContext(SchemaRendererContext);
+  const dataSource = context?.dataSource || {};
+
+  // Evaluate schema expressions against the data source
+  const evaluatedSchema = useMemo(() => {
+    if (!schema || typeof schema === 'string') return schema;
+
+    const evaluator = new ExpressionEvaluator({ data: dataSource });
+    // Shallow copy
+    const newSchema = { ...schema };
+
+    // COMPAT: Hoist 'properties' up to schema level
+    // This allows support for strict configs that wrap all props in 'properties'
+    if (newSchema.properties) {
+        Object.assign(newSchema, newSchema.properties);
+    }
+
+    // Evaluate 'content' (common in Text, Button)
+    if (typeof newSchema.content === 'string') {
+      newSchema.content = evaluator.evaluate(newSchema.content);
+    }
+    
+    // Evaluate 'props'
+    if (newSchema.props) {
+      const newProps = { ...newSchema.props };
+      for (const [key, val] of Object.entries(newProps)) {
+        newProps[key] = evaluator.evaluate(val as any);
+      }
+      newSchema.props = newProps;
+    }
+
+    return newSchema;
+  }, [schema, dataSource]);
+
+  if (!evaluatedSchema) return null;
   // If schema is just a string, render it as text
-  if (typeof schema === 'string') return <>{schema}</>;
+  if (typeof evaluatedSchema === 'string') return <>{evaluatedSchema}</>;
   
-  const Component = ComponentRegistry.get(schema.type);
+  const Component = ComponentRegistry.get(evaluatedSchema.type);
 
   if (!Component) {
     return (
       <div className="p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2">
-        Unknown component type: <strong>{schema.type}</strong>
-        <pre className="text-xs mt-2 overflow-auto">{JSON.stringify(schema, null, 2)}</pre>
+        Unknown component type: <strong>{evaluatedSchema.type}</strong>
+        <pre className="text-xs mt-2 overflow-auto">{JSON.stringify(evaluatedSchema, null, 2)}</pre>
       </div>
     );
   }
 
   // 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.
+  
+  // Extract schema metadata properties that should NOT be passed as React props
+  const {
+    type: _type,
+    children: _children,
+    body: _body,
+    schema: _schema,
+    visible: _visible,
+    visibleOn: _visibleOn,
+    hidden: _hidden,
+    hiddenOn: _hiddenOn,
+    disabled: _disabled,
+    disabledOn: _disabledOn,
+    ...componentProps
+  } = evaluatedSchema;
+
   return React.createElement(Component, {
-    schema,
-    ...(schema.props || {}),
-    className: schema.className,
-    'data-obj-id': schema.id,
-    'data-obj-type': schema.type,
+    schema: evaluatedSchema,
+    ...componentProps,  // Spread non-metadata schema properties as props
+    ...(evaluatedSchema.props || {}),  // Override with explicit props if provided
+    className: evaluatedSchema.className,
+    'data-obj-id': evaluatedSchema.id,
+    'data-obj-type': evaluatedSchema.type,
     ...props
   });
 });

package/src/__tests__/LazyPluginLoader.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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 { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { createLazyPlugin } from '../LazyPluginLoader';
+
+describe('createLazyPlugin', () => {
+  it('should create a lazy-loaded component', async () => {
+    const TestComponent = () => <div>Test Component</div>;
+    
+    const LazyComponent = createLazyPlugin(
+      () => Promise.resolve({ default: TestComponent })
+    );
+    
+    render(<LazyComponent />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Test Component')).toBeInTheDocument();
+    });
+  });
+
+  it('should show custom fallback while loading', async () => {
+    const TestComponent = () => <div>Test Component</div>;
+    
+    const LazyComponent = createLazyPlugin(
+      () => new Promise<{ default: React.ComponentType }>((resolve) => {
+        setTimeout(() => resolve({ default: TestComponent }), 100);
+      }),
+      { fallback: <div>Loading...</div> }
+    );
+    
+    render(<LazyComponent />);
+    
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    
+    await waitFor(() => {
+      expect(screen.getByText('Test Component')).toBeInTheDocument();
+    });
+  });
+
+  it('should pass props to the lazy component', async () => {
+    interface TestProps {
+      message: string;
+    }
+    
+    const TestComponent = ({ message }: TestProps) => <div>{message}</div>;
+    
+    const LazyComponent = createLazyPlugin<TestProps>(
+      () => Promise.resolve({ default: TestComponent })
+    );
+    
+    render(<LazyComponent message="Hello World" />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Hello World')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle loading errors gracefully', async () => {
+    // Mock console.error to avoid noise in test output
+    const originalError = console.error;
+    console.error = vi.fn();
+
+    const LazyComponent = createLazyPlugin<any>(
+      () => Promise.reject(new Error('Load error'))
+    );
+    
+    expect(() => render(<LazyComponent />)).not.toThrow();
+    
+    // Restore console.error
+    console.error = originalError;
+  });
+});

package/src/context/SchemaRendererContext.tsx

@@ -7,6 +7,8 @@ interface SchemaRendererContextType {
 
 const SchemaRendererContext = createContext<SchemaRendererContextType | null>(null);
 
+export { SchemaRendererContext };
+
 export const SchemaRendererProvider = ({ 
   children, 
   dataSource, 
@@ -33,8 +35,9 @@ export const useSchemaContext = () => {
 };
 
 export const useDataScope = (path?: string) => {
-  const { dataSource } = useSchemaContext();
-  if (!path) return dataSource;
+  const context = useContext(SchemaRendererContext);
+  const dataSource = context?.dataSource;
+  if (!dataSource || !path) return dataSource;
   // Simple path resolution for now. In real app might be more complex
   return path.split('.').reduce((acc, part) => acc && acc[part], dataSource);
 }

package/src/index.ts

@@ -10,4 +10,5 @@ export * from './SchemaRenderer';
 export * from './hooks'; // will be empty for now
 export * from './context'; // will be empty for now
 export * from './components/form';
+export * from './LazyPluginLoader';