Skip to content

Fix plugin-form and plugin-grid demo loading by resolving component registry conflicts#237

Merged
hotlong merged 5 commits intomainfrom
copilot/fix-plugin-loading-issue
Jan 27, 2026
Merged

Fix plugin-form and plugin-grid demo loading by resolving component registry conflicts#237
hotlong merged 5 commits intomainfrom
copilot/fix-plugin-loading-issue

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Jan 27, 2026

Plugin documentation demos were stuck on "Loading plugins..." due to component registry conflicts and inline data format mismatches. Additionally, the plugin-grid demo was causing browser crashes on the deployed site.

Changes

Removed conflicting type registrations:

  • plugin-form now only registers 'object-form' (was overriding base 'form' component)
  • plugin-grid now only registers 'object-grid' (was overriding layout 'grid' component)

Fixed ObjectGrid inline data handling:

  • Added array shorthand support: data: [...] now auto-wraps to {provider: 'value', items: [...]}
  • Added column format detection to handle both data-table format (accessorKey) and ListColumn format (field)
// Before: only handled ViewData format
if (schema.data) {
  return schema.data;
}

// After: handles both array shorthand and ViewData
if (schema.data) {
  if (Array.isArray(schema.data)) {
    return { provider: 'value', items: schema.data };
  }
  return schema.data;
}

Updated documentation:

  • plugin-grid.mdx demo now uses type: "object-grid" instead of type: "grid"
  • Disabled plugin-grid interactive demo to prevent browser crashes (with clear user notice)

Results

Plugin-form: Now renders correctly with all interactive fields working:

Plugin Form Working

Plugin-grid: Page loads successfully without crashes. Interactive demo temporarily disabled with clear notice:

Plugin Grid Fixed

Known Issue

Plugin-grid interactive demo triggers a pre-existing infinite loop in @object-ui/components data-table Select component. The demo has been disabled with a user-facing note until this underlying bug is fixed. All code examples remain available for reference.

Original prompt

plugin-form plugin-grid文档演示页面一直显示loading


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@vercel
Copy link
Copy Markdown

vercel Bot commented Jan 27, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
objectui-site Ready Ready Preview, Comment Jan 27, 2026 0:11am

Request Review

Copilot AI and others added 3 commits January 27, 2026 11:48
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…istrations

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
@hotlong
Copy link
Copy Markdown
Collaborator

hotlong commented Jan 27, 2026

@copilot plugin grid Application error: a client-side exception has occurred while loading objectui-site-git-copilot-fix-plugin-loading-issue-object-stack.vercel.app (see the browser console for more information).

Copilot AI changed the title [WIP] Fix loading issue on plugin-form plugin-grid documentation page Fix plugin-form and plugin-grid demo loading by resolving component registry conflicts Jan 27, 2026
Copilot AI requested a review from hotlong January 27, 2026 12:01
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Jan 27, 2026

@copilot plugin grid Application error: a client-side exception has occurred while loading objectui-site-git-copilot-fix-plugin-loading-issue-object-stack.vercel.app (see the browser console for more ...

Fixed in commit 1ce0071. The plugin-grid interactive demo has been disabled to prevent the browser crash. The page now loads successfully with a note explaining the demo is temporarily disabled due to a data-table component issue. All code examples remain available.

Plugin Grid - No Crash

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • fonts.googleapis.com
    • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/objectui/objectui/node_modules/.pnpm/next@16.1.4_@babel&#43;core@7.28.6_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/server/lib/start-server.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

@hotlong hotlong marked this pull request as ready for review January 27, 2026 12:10
Copilot AI review requested due to automatic review settings January 27, 2026 12:10
@hotlong hotlong merged commit 11e6f36 into main Jan 27, 2026
6 checks passed
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes docs demo pages getting stuck on “Loading plugins…” by removing component registry alias collisions between plugins and core components, and improves ObjectGrid’s handling of inline demo data/columns to avoid crashes and format mismatches.

Changes:

  • Removed conflicting component registrations so plugins no longer override core form / layout grid types.
  • Enhanced ObjectGrid to accept inline data array shorthand and to detect/convert between column formats.
  • Updated plugin-grid docs demo to use type: "object-grid" and temporarily disabled the interactive demo with a user-facing note.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File Description
packages/plugin-grid/src/index.tsx Stops registering the conflicting grid alias; keeps only object-grid.
packages/plugin-grid/src/ObjectGrid.tsx Adds inline data array shorthand support and column format detection/conversion.
packages/plugin-form/src/index.tsx Stops registering the conflicting form alias; keeps only object-form.
content/docs/plugins/plugin-grid.mdx Switches demo schema to object-grid and disables the interactive demo with a note.

Comment on lines 55 to 66
if (schema.data) {
// Check if data is an array (shorthand format) or already a ViewData object
if (Array.isArray(schema.data)) {
// Convert array shorthand to proper ViewData format
return {
provider: 'value',
items: schema.data,
};
}
// Already in ViewData format
return schema.data;
}
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ObjectGridSchema.data is typed as ViewData, but getDataConfig now accepts schema.data as an array shorthand. This creates a public API mismatch: TypeScript users (and the Zod schema/spec alignment) can’t express data: [...] without casts, and it diverges from the stated ViewData contract. Consider updating @object-ui/types (and its Zod schema) to allow data?: ViewData | any[] (or a separate items/staticData shorthand) so docs/runtime/types stay consistent.

Copilot uses AI. Check for mistakes.
Comment on lines +166 to +177
// Check if columns are already in data-table format (have 'accessorKey')
// vs ListColumn format (have 'field')
if (cols.length > 0 && typeof cols[0] === 'object' && cols[0] !== null) {
return (cols as ListColumn[])
.filter((col) => col?.field && typeof col.field === 'string') // Filter out invalid column objects
.map((col) => ({
header: col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' '),
accessorKey: col.field,
...(col.width && { width: col.width }),
...(col.align && { align: col.align }),
sortable: col.sortable !== false,
}));
const firstCol = cols[0] as any;

// Already in data-table format - use as-is
if ('accessorKey' in firstCol) {
return cols;
}

// ListColumn format - convert to data-table format
if ('field' in firstCol) {
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Column format detection only checks the first entry and then returns cols as-is when it finds accessorKey. If later entries are in ListColumn (field) format (or mixed), the conversion will be skipped and downstream rendering will be inconsistent. Consider normalizing based on every column (e.g., detect per-column or validate the array is uniform) and either convert all field columns or throw a clear error when formats are mixed.

Copilot uses AI. Check for mistakes.
Comment on lines 53 to +60
function getDataConfig(schema: ObjectGridSchema): ViewData | null {
// New format: explicit data configuration
if (schema.data) {
// Check if data is an array (shorthand format) or already a ViewData object
if (Array.isArray(schema.data)) {
// Convert array shorthand to proper ViewData format
return {
provider: 'value',
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR adds new normalization behavior (array shorthand in getDataConfig and column format detection in generateColumns), but @object-ui/plugin-grid doesn’t appear to have Vitest coverage like other plugin packages (e.g., packages/plugin-aggrid/src/index.test.ts). Adding focused tests for these branches would help prevent regressions in the docs demos and runtime.

Copilot uses AI. Check for mistakes.
pagination: false
}}
title="Basic Data Grid"
description="Grid with sorting, filtering, and pagination"
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even though the interactive demo is commented out, the title/description still say the example includes filtering and pagination, while the schema sets filterable: false and pagination: false. Consider aligning the text with the schema (or keep the schema flags true if the intent is to demonstrate those features once the underlying bug is fixed).

Suggested change
description="Grid with sorting, filtering, and pagination"
description="Grid with basic sorting (filtering & pagination disabled in this demo)"

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants