Skip to content

Feat/custom rendering composition - #19

Merged
fabric0de merged 2 commits into
mainfrom
feat/custom-rendering-composition
Aug 14, 2026
Merged

Feat/custom rendering composition#19
fabric0de merged 2 commits into
mainfrom
feat/custom-rendering-composition

Conversation

@fabric0de

@fabric0de fabric0de commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Add typed framework-native header and cell renderer contracts for React, Vue, and Svelte.
  • Add composition points for product toolbars and loading, error, and empty states.
  • Keep product-specific UI outside the grid core while preserving framework-native rendering behavior.
  • Add createSvelteDataGridRenderer for rendering Svelte components with typed context and stable props.
  • Add React and Vue renderer tests, Svelte 4 compatibility coverage, external consumer validation, and task-oriented documentation.
  • Rebaseline the required Svelte UI gzip ceiling to 21,000 bytes after measuring the renderer addition.

Svelte performance follow-up

  • Render primitive Svelte header, cell, toolbar, and state values directly instead of creating a component boundary for every value.
  • Use the RenderValue component only for explicit Svelte renderer descriptors.
  • Reduce Svelte document nodes from 1,124 to 1,092 in the standard profile.
  • Reduce Svelte document nodes from 1,437 to 1,395 in the wide profile.
  • Rebaseline the measured Svelte-to-Vue document-node delta from 64 to 80.
  • Retain the existing absolute DOM element, document-node, mounted-row, and mounted-cell budgets.

Public API

React

  • renderHeader
  • renderCell
  • renderToolbar
  • renderEmptyState
  • renderLoadingState
  • renderErrorState

Vue

  • renderHeader
  • renderCell
  • renderToolbar
  • renderEmptyState
  • renderLoadingState
  • renderErrorState

Svelte

  • renderHeader
  • renderCell
  • renderToolbar
  • renderEmptyState
  • renderLoadingState
  • renderErrorState
  • createSvelteDataGridRenderer

Documentation

  • Add a custom rendering guide for React, Vue, and Svelte.
  • Add product composition guidance for toolbars and query states.
  • Update framework package documentation and the public roadmap.
  • Document the measured performance impact in CHANGELOG.md.

Verification

  • Tests cover changed renderer and composition behavior.
  • pnpm test && pnpm check passes.
  • pnpm build && pnpm compatibility:check passes.
  • Svelte 4 compatibility build passes.
  • pnpm api:check && pnpm docs:build passes.
  • pnpm release:consumer-smoke passes for all 10 packages.
  • pnpm benchmark:structure:run passes all 40 structure checks.
  • pnpm benchmark:core-filter:massive:run passes the 100K-to-1M row scaling budgets.
  • pnpm benchmark:bundle:check passes all required package budgets.
  • Svelte UI gzip is 20.06 KiB against a 20.51 KiB required limit.
  • Public API and workflow documentation is updated.
  • CHANGELOG.md is updated.
  • No generated .benchmark-results/, .release/, credentials, or private data are included.

@fabric0de
fabric0de force-pushed the feat/custom-rendering-composition branch from 5f88c1c to f51c921 Compare August 13, 2026 16:35
@fabric0de
fabric0de merged commit 1a77dff into main Aug 14, 2026
9 checks passed
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.

1 participant