@object-ui/react 3.3.0 → 3.3.2

package/src/SchemaRenderer.tsx

@@ -1,266 +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, { forwardRef, useContext, useMemo, Component } from 'react';
-import {
-  SchemaNode,
-  ComponentRegistry,
-  ExpressionEvaluator,
-  isObjectUIError,
-  type ObjectUIError,
-  ERROR_CODES,
-  debugLog,
-  debugTime,
-  debugTimeEnd,
-  DebugCollector,
-} from '@object-ui/core';
-import { SchemaRendererContext } from './context/SchemaRendererContext';
-import { resolveI18nLabel } from './utils/i18n';
-
-/**
- * Extract AriaPropsSchema properties from a schema node and convert
- * them to standard HTML ARIA attributes.
- *
- * @objectstack/spec AriaPropsSchema defines:
- *   ariaLabel: string | I18nLabel (→ aria-label)
- *   ariaDescribedBy: string (→ aria-describedby)
- *   role: string (→ role)
- */
-function resolveAriaProps(schema: Record<string, any>): Record<string, string | undefined> {
-  const aria: Record<string, string | undefined> = {};
-  if (schema.ariaLabel) {
-    aria['aria-label'] = resolveI18nLabel(schema.ariaLabel);
-  }
-  if (schema.ariaDescribedBy) {
-    aria['aria-describedby'] = schema.ariaDescribedBy;
-  }
-  if (schema.role) {
-    aria['role'] = schema.role;
-  }
-  return aria;
-}
-
-/**
- * Per-component Error Boundary for SchemaRenderer.
- * Catches render errors in individual components, preventing one broken
- * component from crashing the entire page.
- */
-interface SchemaErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-export class SchemaErrorBoundary extends Component<
-  { componentType?: string; children: React.ReactNode },
-  SchemaErrorBoundaryState
-> {
-  state: SchemaErrorBoundaryState = { hasError: false, error: null };
-
-  static getDerivedStateFromError(error: Error): SchemaErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  handleRetry = () => {
-    this.setState({ hasError: false, error: null });
-  };
-
-  render() {
-    if (this.state.hasError && this.state.error) {
-      const error = this.state.error;
-      const isDev = (globalThis as any).process?.env?.NODE_ENV !== 'production';
-      const objuiError = isObjectUIError(error) ? error as ObjectUIError : null;
-
-      return (
-        <div className="p-4 border border-orange-400 rounded bg-orange-50 text-orange-700 my-2" role="alert">
-          <p className="font-medium">
-            Component{this.props.componentType ? ` "${this.props.componentType}"` : ''} failed to render
-          </p>
-          <p className="text-sm mt-1">{error.message}</p>
-          {isDev && objuiError?.code && (
-            <p className="text-xs mt-1 text-orange-500">
-              Error code: {objuiError.code}
-              {objuiError.details?.suggestion ? (
-                <span className="block mt-0.5">💡 {String(objuiError.details.suggestion)}</span>
-              ) : null}
-            </p>
-          )}
-          <button
-            onClick={this.handleRetry}
-            className="mt-2 text-sm underline hover:no-underline"
-          >
-            Retry
-          </button>
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-export const SchemaRenderer = forwardRef<any, { schema: SchemaNode } & Record<string, any>>(({ schema, ...props }, _ref) => {
-  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;
-    }
-
-    // Evaluate visibility: visible / visibleOn / hidden / hiddenOn
-    const shouldHide = (() => {
-      if (newSchema.visible !== undefined) {
-        return !evaluator.evaluateCondition(newSchema.visible);
-      }
-      if (newSchema.visibleOn !== undefined) {
-        return !evaluator.evaluateCondition(newSchema.visibleOn);
-      }
-      if (newSchema.hidden !== undefined) {
-        return evaluator.evaluateCondition(newSchema.hidden);
-      }
-      if (newSchema.hiddenOn !== undefined) {
-        return evaluator.evaluateCondition(newSchema.hiddenOn);
-      }
-      return false;
-    })();
-
-    if (shouldHide) {
-      newSchema._hidden = true;
-    }
-
-    // Evaluate disabled: disabled / disabledOn
-    const isDisabled = (() => {
-      if (newSchema.disabled !== undefined) {
-        return evaluator.evaluateCondition(newSchema.disabled);
-      }
-      if (newSchema.disabledOn !== undefined) {
-        return evaluator.evaluateCondition(newSchema.disabledOn);
-      }
-      return false;
-    })();
-
-    if (isDisabled) {
-      newSchema._disabled = true;
-    }
-
-    return newSchema;
-  }, [schema, dataSource]);
-
-  if (!evaluatedSchema) return null;
-  // Handle visibility: if evaluated schema is hidden, render nothing
-  if (evaluatedSchema?._hidden) return null;
-  // If schema is just a string, render it as text
-  if (typeof evaluatedSchema === 'string') return <>{evaluatedSchema}</>;
-
-  debugLog('schema', 'Rendering schema node', { type: evaluatedSchema.type, id: evaluatedSchema.id });
-  
-  const Component = ComponentRegistry.get(evaluatedSchema.type);
-
-  if (!Component) {
-    debugLog('schema', 'Component not found in registry', { type: evaluatedSchema.type });
-    const errorInfo = ERROR_CODES['OBJUI-001'];
-    return (
-      <div className="p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2" role="alert">
-        <p className="font-medium">Unknown component type: <strong>{evaluatedSchema.type}</strong></p>
-        {(globalThis as any).process?.env?.NODE_ENV !== 'production' && (
-          <p className="text-xs mt-1">💡 {errorInfo.suggestion} (OBJUI-001)</p>
-        )}
-        <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,
-    _hidden: __hidden,    // stripped: internal visibility flag
-    _disabled: __disabled, // stripped: internal disabled flag
-    ...componentProps
-  } = evaluatedSchema;
-
-  // Extract AriaPropsSchema properties for accessibility
-  const ariaProps = resolveAriaProps(evaluatedSchema);
-
-  // Debug-mode enhancements: extra data attributes + perf tracking
-  const isDebug = context?.debug || context?.debugFlags?.enabled;
-  const debugAttrs: Record<string, string> = {};
-  if (isDebug) {
-    debugAttrs['data-debug-type'] = evaluatedSchema.type;
-    if (evaluatedSchema.id) {
-      debugAttrs['data-debug-id'] = evaluatedSchema.id;
-    }
-  }
-
-  debugTime(`render:${evaluatedSchema.type}:${evaluatedSchema.id ?? 'anon'}`);
-  const renderStart = isDebug ? performance.now() : 0;
-  const rendered = (
-    <SchemaErrorBoundary componentType={evaluatedSchema.type}>
-      {React.createElement(Component, {
-        schema: evaluatedSchema,
-        ...componentProps,  // Spread non-metadata schema properties as props
-        ...(evaluatedSchema.props || {}),  // Override with explicit props if provided
-        ...ariaProps,  // Inject ARIA attributes from AriaPropsSchema
-        ...debugAttrs, // Debug-mode data attributes
-        disabled: __disabled || undefined,
-        className: evaluatedSchema.className,
-        'data-obj-id': evaluatedSchema.id,
-        'data-obj-type': evaluatedSchema.type,
-        ...props
-      })}
-    </SchemaErrorBoundary>
-  );
-  debugTimeEnd(`render:${evaluatedSchema.type}:${evaluatedSchema.id ?? 'anon'}`);
-
-  // Report render perf to DebugCollector when debug mode is active
-  if (isDebug && renderStart) {
-    const durationMs = performance.now() - renderStart;
-    DebugCollector.getInstance().addPerf({
-      type: evaluatedSchema.type,
-      id: evaluatedSchema.id,
-      durationMs,
-      timestamp: Date.now(),
-    });
-  }
-
-  return rendered;
-});
-SchemaRenderer.displayName = 'SchemaRenderer';

package/src/__tests__/LazyPluginLoader.test.tsx

@@ -1,176 +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 { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
-import { createLazyPlugin, preloadPlugin } 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;
-  });
-
-  it('should preload a plugin without rendering', async () => {
-    const TestComponent = () => <div>Preloaded</div>;
-    const importFn = vi.fn(() => Promise.resolve({ default: TestComponent }));
-
-    const result = await preloadPlugin(importFn);
-
-    expect(importFn).toHaveBeenCalledTimes(1);
-    expect(result).toEqual({ default: TestComponent });
-  });
-
-  it('should render errorFallback when component fails to load', async () => {
-    const originalError = console.error;
-    console.error = vi.fn();
-
-    const ErrorFallback = ({ error, retry }: { error: Error; retry: () => void }) => (
-      <div>
-        <span>Error: {error.message}</span>
-        <button onClick={retry}>Retry</button>
-      </div>
-    );
-
-    const LazyComponent = createLazyPlugin(
-      () => Promise.reject(new Error('chunk failed')),
-      { retries: 0, errorFallback: ErrorFallback }
-    );
-
-    render(<LazyComponent />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Error: chunk failed')).toBeInTheDocument();
-    });
-
-    expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument();
-
-    console.error = originalError;
-  });
-
-  it('should not retry when retries=0', async () => {
-    const originalError = console.error;
-    console.error = vi.fn();
-
-    const importFn = vi.fn(() => Promise.reject(new Error('fail')));
-
-    const ErrorFallback = ({ error }: { error: Error; retry: () => void }) => (
-      <div>Error: {error.message}</div>
-    );
-
-    const LazyComponent = createLazyPlugin(importFn, {
-      retries: 0,
-      errorFallback: ErrorFallback,
-    });
-
-    render(<LazyComponent />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Error: fail')).toBeInTheDocument();
-    });
-
-    // Called only once — no retries
-    expect(importFn).toHaveBeenCalledTimes(1);
-
-    console.error = originalError;
-  });
-
-  it('should retry on failure then succeed', async () => {
-    const originalError = console.error;
-    console.error = vi.fn();
-
-    const TestComponent = () => <div>Success after retry</div>;
-
-    let callCount = 0;
-    const importFn = vi.fn(() => {
-      callCount++;
-      if (callCount <= 2) {
-        return Promise.reject(new Error('transient error'));
-      }
-      return Promise.resolve({ default: TestComponent as React.ComponentType });
-    });
-
-    const LazyComponent = createLazyPlugin(importFn, {
-      retries: 3,
-      retryDelay: 10,
-    });
-
-    render(<LazyComponent />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Success after retry')).toBeInTheDocument();
-    }, { timeout: 2000 });
-
-    // First call + 2 retries (fails) + 1 success = called 3 times
-    expect(importFn).toHaveBeenCalledTimes(3);
-
-    console.error = originalError;
-  });
-});

package/src/__tests__/SchemaRenderer.aria.test.tsx

@@ -1,118 +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 { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import { SchemaRenderer } from '../SchemaRenderer';
-
-// A simple test component that forwards ARIA attributes
-const TestWidget: React.FC<any> = (props) => (
-  <div
-    data-testid="test-widget"
-    aria-label={props['aria-label']}
-    aria-describedby={props['aria-describedby']}
-    role={props['role']}
-  >
-    {props.content || 'Test'}
-  </div>
-);
-
-describe('SchemaRenderer AriaProps injection', () => {
-  beforeEach(() => {
-    ComponentRegistry.register('test-widget', TestWidget);
-  });
-
-  afterEach(() => {
-    ComponentRegistry.unregister?.('test-widget');
-  });
-
-  it('should inject aria-label from ariaLabel string', () => {
-    render(
-      <SchemaRenderer
-        schema={{
-          type: 'test-widget',
-          ariaLabel: 'Close dialog',
-        }}
-      />
-    );
-    const el = screen.getByTestId('test-widget');
-    expect(el).toHaveAttribute('aria-label', 'Close dialog');
-  });
-
-  it('should resolve ariaLabel from I18nLabel object', () => {
-    render(
-      <SchemaRenderer
-        schema={{
-          type: 'test-widget',
-          ariaLabel: { key: 'dialog.close', defaultValue: 'Close dialog' },
-        }}
-      />
-    );
-    const el = screen.getByTestId('test-widget');
-    expect(el).toHaveAttribute('aria-label', 'Close dialog');
-  });
-
-  it('should inject aria-describedby from ariaDescribedBy', () => {
-    render(
-      <SchemaRenderer
-        schema={{
-          type: 'test-widget',
-          ariaDescribedBy: 'help-text-1',
-        }}
-      />
-    );
-    const el = screen.getByTestId('test-widget');
-    expect(el).toHaveAttribute('aria-describedby', 'help-text-1');
-  });
-
-  it('should inject role from schema', () => {
-    render(
-      <SchemaRenderer
-        schema={{
-          type: 'test-widget',
-          role: 'navigation',
-        }}
-      />
-    );
-    const el = screen.getByTestId('test-widget');
-    expect(el).toHaveAttribute('role', 'navigation');
-  });
-
-  it('should inject all ARIA props together', () => {
-    render(
-      <SchemaRenderer
-        schema={{
-          type: 'test-widget',
-          ariaLabel: 'Main nav',
-          ariaDescribedBy: 'nav-desc',
-          role: 'navigation',
-        }}
-      />
-    );
-    const el = screen.getByTestId('test-widget');
-    expect(el).toHaveAttribute('aria-label', 'Main nav');
-    expect(el).toHaveAttribute('aria-describedby', 'nav-desc');
-    expect(el).toHaveAttribute('role', 'navigation');
-  });
-
-  it('should not inject ARIA attrs when not in schema', () => {
-    render(
-      <SchemaRenderer
-        schema={{
-          type: 'test-widget',
-          content: 'Hello',
-        }}
-      />
-    );
-    const el = screen.getByTestId('test-widget');
-    expect(el).not.toHaveAttribute('aria-label');
-    expect(el).not.toHaveAttribute('aria-describedby');
-  });
-});

package/src/__tests__/SchemaRenderer.debug.test.tsx

@@ -1,69 +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 { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render } from '@testing-library/react';
-import React from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import { SchemaRenderer } from '../SchemaRenderer';
-import { SchemaRendererProvider } from '../context/SchemaRendererContext';
-
-// Suppress console.warn from deprecated namespace registration
-const originalWarn = console.warn;
-beforeEach(() => {
-  console.warn = vi.fn();
-});
-afterEach(() => {
-  console.warn = originalWarn;
-});
-
-// A simple test component that passes all props through to a div
-const TestDiv: React.FC<any> = (props) => {
-  const { schema, ...rest } = props;
-  return <div data-testid="test-div" {...rest} />;
-};
-
-describe('SchemaRenderer debug attributes', () => {
-  beforeEach(() => {
-    ComponentRegistry.register('test-debug-div', TestDiv);
-  });
-
-  it('should NOT inject data-debug-* attributes when debug is off', () => {
-    const { getByTestId } = render(
-      <SchemaRendererProvider dataSource={{}}>
-        <SchemaRenderer schema={{ type: 'test-debug-div', id: 'myBtn' }} />
-      </SchemaRendererProvider>,
-    );
-    const el = getByTestId('test-div');
-    expect(el.getAttribute('data-debug-type')).toBeNull();
-    expect(el.getAttribute('data-debug-id')).toBeNull();
-  });
-
-  it('should inject data-debug-type when debug is enabled', () => {
-    const { getByTestId } = render(
-      <SchemaRendererProvider dataSource={{}} debug={true}>
-        <SchemaRenderer schema={{ type: 'test-debug-div', id: 'myBtn' }} />
-      </SchemaRendererProvider>,
-    );
-    const el = getByTestId('test-div');
-    expect(el.getAttribute('data-debug-type')).toBe('test-debug-div');
-    expect(el.getAttribute('data-debug-id')).toBe('myBtn');
-  });
-
-  it('should inject data-debug-type when debugFlags.enabled is true', () => {
-    const { getByTestId } = render(
-      <SchemaRendererProvider dataSource={{}} debugFlags={{ enabled: true }}>
-        <SchemaRenderer schema={{ type: 'test-debug-div' }} />
-      </SchemaRendererProvider>,
-    );
-    const el = getByTestId('test-div');
-    expect(el.getAttribute('data-debug-type')).toBe('test-debug-div');
-    // No id on schema, so data-debug-id should not be present
-    expect(el.getAttribute('data-debug-id')).toBeNull();
-  });
-});