` and the `| ` chrome already make.
+ *
+ * Worth it because this cell was the most expensive thing left in the row:
+ * measured at 2 251 B and 10 whitespace text nodes per row, more than the entire
+ * rest of a three-column row. Memoised per table instance, which is also per
+ * render — Livewire rebuilds the Table on every request, so nothing goes stale.
+ */
+ public function getSelectionCellSkeleton(): Skeleton
+ {
+ return $this->selectionCellSkeleton ??= Skeleton::compile(
+ view('wire-table::tables.partials.selection-cell', [
+ 'cellPadding' => $this->getCellPadding(),
+ 'usesRangeSelection' => $this->usesRangeSelection(),
+ 'checkIcon' => $this->getSelectionCheckIcon(),
+ 'keyJs' => Skeleton::slot('keyJs'),
+ ])->render(),
+ 'keyJs',
+ );
+ }
+
/**
* Enable model policy auto-resolution.
*
@@ -1313,6 +1383,22 @@ public function isCompact(): bool
return $this->compact;
}
+ /**
+ * The body cell's padding utilities. One owner for the density map, so the row
+ * view and anything that renders a cell outside it (the selection cell) cannot
+ * drift apart.
+ */
+ public function getCellPadding(): string
+ {
+ return $this->compact ? 'px-4 py-2' : 'px-6 py-4';
+ }
+
+ /** The header cell's padding utilities — {@see getCellPadding()}. */
+ public function getHeaderPadding(): string
+ {
+ return $this->compact ? 'px-4 py-2' : 'px-6 py-3';
+ }
+
/**
* Set bordered mode
*/
@@ -1489,7 +1575,9 @@ protected function flattenMobileRowActions(): array
foreach ($this->getMobileRowActionsForDisplay() as $action) {
if ($action instanceof ActionGroup) {
foreach ($action->getActions() as $inner) {
- if ($inner instanceof Action && $inner->isDivider()) {
+ // Dividers are chrome, and a group's record-less members
+ // belong to another surface than a row's actions.
+ if (! $inner instanceof Action || $inner->isDivider()) {
continue;
}
@@ -1557,7 +1645,7 @@ public function getMobileSubRowActionGroup(): ActionGroup
}
/**
- * @param array $actions
+ * @param array $actions
*/
private function buildMobileActionGroup(array $actions): ActionGroup
{
@@ -1566,6 +1654,106 @@ private function buildMobileActionGroup(array $actions): ActionGroup
->mobileBreakpoint($this->getMobileBreakpoint());
}
+ /**
+ * Collapse the toolbar's header actions into one dropdown group on a phone,
+ * so a narrow toolbar shows a single "⋮" trigger instead of several labelled
+ * buttons competing with the search field, the filters and the view menu.
+ *
+ * Unlike {@see collapseActionsOnMobile()} this needs no `stackedOnMobile()`:
+ * the toolbar is the same toolbar at every width, so the collapse is purely a
+ * width switch. **Desktop is untouched** — from the mobile breakpoint up the
+ * inline buttons render exactly as before; the breakpoint is the table's
+ * {@see mobileBreakpoint()} (`sm` by default, i.e. below 640px).
+ *
+ * The collapse only kicks in once the toolbar carries at least `$threshold`
+ * executable header actions (default 2 — one button alone is not a crowd, and
+ * the toolbar folds sooner than a card's row actions because it also holds the
+ * search field and the view menu). The threshold is clamped to at least 1.
+ */
+ public function collapseHeaderActionsOnMobile(bool $collapse = true, int $threshold = 2): static
+ {
+ $this->collapseHeaderActionsOnMobile = $collapse;
+ $this->collapseHeaderActionsOnMobileThreshold = max(1, $threshold);
+
+ return $this;
+ }
+
+ public function getCollapseHeaderActionsOnMobileThreshold(): int
+ {
+ return $this->collapseHeaderActionsOnMobileThreshold;
+ }
+
+ /**
+ * Whether the toolbar should collapse its header actions on a phone: the
+ * feature is enabled and at least the configured threshold of header actions
+ * would actually render. The count only includes actions the viewer may run,
+ * because those are the ones that reach the toolbar at all — a table whose
+ * per-viewer guards leave one action keeps that action as a plain button.
+ */
+ public function shouldCollapseHeaderActionsOnMobile(): bool
+ {
+ return $this->collapseHeaderActionsOnMobile
+ && count($this->executableHeaderActions()) >= $this->collapseHeaderActionsOnMobileThreshold;
+ }
+
+ /**
+ * The header actions that reach the toolbar at all: the ones the viewer may
+ * run. Shared by the collapse threshold and {@see getMobileHeaderActionGroup()}
+ * so the count matches what the dropdown would really contain — the inline
+ * buttons drop a guarded action the same way.
+ *
+ * @return array
+ */
+ protected function executableHeaderActions(): array
+ {
+ return array_values(array_filter(
+ $this->headerActions,
+ fn (BaseAction $action): bool => $action->canExecute(),
+ ));
+ }
+
+ /**
+ * Canonical builder for the toolbar's collapsed header-action dropdown: the
+ * same {@see ActionGroup} the row actions collapse into, so a phone gets one
+ * dropdown vocabulary rather than two.
+ *
+ * Both halves sit in the document at every width — CSS decides which is shown
+ * — so the collapsed copy drops each action's `keyboardShortcut()`: a rendered
+ * menu row binds it as a *window* listener, and two of them would answer one
+ * keypress twice. Same reason the mobile row actions and the mobile empty
+ * state clone.
+ */
+ public function getMobileHeaderActionGroup(): ActionGroup
+ {
+ return $this->buildMobileActionGroup(array_map(
+ fn (BaseAction $action): BaseAction => (clone $action)->withoutKeyboardShortcut(),
+ $this->executableHeaderActions(),
+ ));
+ }
+
+ /**
+ * Responsive class for the toolbar's inline header actions: hidden below the
+ * mobile breakpoint (the dropdown stands in for them), a plain flex row from
+ * it up. Empty while the collapse is off, so the buttons render unwrapped.
+ */
+ public function getInlineHeaderActionsClass(): string
+ {
+ if (! $this->shouldCollapseHeaderActionsOnMobile()) {
+ return '';
+ }
+
+ return Breakpoint::resolve($this->getMobileBreakpoint())->flexFromClass();
+ }
+
+ /**
+ * Companion to {@see getInlineHeaderActionsClass()}: shows the collapsed
+ * dropdown only below the mobile breakpoint.
+ */
+ public function getMobileHeaderActionsVisibleClass(): string
+ {
+ return Breakpoint::resolve($this->getMobileBreakpoint())->hiddenAtClass();
+ }
+
/**
* Set custom table class
*/
@@ -1976,6 +2164,115 @@ public function getRowContextMenuHtml(Model $record): Htmlable
return new HtmlString($html);
}
+ /**
+ * A group's header row, rendered once for the table and spliced per group.
+ *
+ * Only the label varies, so this is a one-slot skeleton. It matters because group
+ * count is not bounded by anything: grouped by a status there are three of these,
+ * grouped by a date there is one per row — and it used to be a view render and six
+ * DOM text nodes either way.
+ *
+ * The label is escaped here, at the one place that knows it is text content.
+ */
+ public function getGroupHeaderRow(Model $record, int $colSpan): string
+ {
+ $skeleton = $this->groupHeaderSkeleton ??= Skeleton::compile(
+ view('wire-table::tables.partials.group-header', [
+ 'colSpan' => $colSpan,
+ 'cellPadding' => $this->getCellPadding(),
+ 'label' => Skeleton::slot('label'),
+ ])->render(),
+ 'label',
+ );
+
+ return $skeleton->fill(['label' => e((string) $this->resolveGroupLabel($record))]);
+ }
+
+ /**
+ * The sub-row expander cell for one row, rendered once per shape and spliced.
+ *
+ * The cell has exactly three shapes — no toggle, toggle collapsed, toggle expanded
+ * — and every row is one of them, so `tables.partials.sub-row-cell` is rendered at
+ * most three times per table instead of once per row. Before this it was an
+ * `@include` inside the row loop, which is the N×View anti-pattern the render fuse
+ * exists to catch: 1 044 B, 8 whitespace text nodes and a view render per row.
+ *
+ * A record with no sub-rows still gets the cell, empty — drop it and the columns
+ * stop lining up.
+ *
+ * @param string $keyJs the record key, already encoded for an Alpine expression
+ */
+ public function getSubRowCell(string $keyJs, bool $hasToggle, bool $isExpanded): string
+ {
+ $shape = ($hasToggle ? 't' : '-').($isExpanded ? 'e' : '-');
+
+ $skeleton = $this->subRowCellSkeletons[$shape] ??= Skeleton::compile(
+ view('wire-table::tables.partials.sub-row-cell', [
+ 'cellPadding' => $this->getCellPadding(),
+ 'borderClass' => $this->isBordered() ? 'border border-gray-200 dark:border-gray-700' : '',
+ 'hasToggle' => $hasToggle,
+ 'isExpanded' => $isExpanded,
+ 'keyJs' => Skeleton::slot('keyJs'),
+ ])->render(),
+ 'keyJs',
+ );
+
+ return $skeleton->fill(['keyJs' => $keyJs]);
+ }
+
+ /**
+ * The teleported context-menu panel, rendered once and spliced per row.
+ *
+ * The panel is pure scaffolding — position, colours, `role="menu"` — and it holds
+ * no per-row Alpine state, because one `wireRecordActions` controller on the
+ * `` drives every row's menu by record key. So the whole thing is one shape
+ * with two holes: the key, and the item markup {@see getRowContextMenuHtml()}
+ * already renders per record.
+ *
+ * Rendering the scaffolding per row cost a measured 1 659 B and 14 whitespace text
+ * nodes per row for a one-item menu, most of it identical on every row.
+ *
+ * Memoised per table instance, which is per render — Livewire rebuilds the Table on
+ * every request, so nothing goes stale.
+ */
+ public function getRowContextMenuSkeleton(): Skeleton
+ {
+ return $this->rowContextMenuSkeleton ??= Skeleton::compile(
+ view('wire-table::tables.partials.record-context-menu', [
+ 'key' => Skeleton::slot('key'),
+ 'menu' => Skeleton::slot('menu'),
+ ])->render(),
+ 'key',
+ 'menu',
+ );
+ }
+
+ /**
+ * This record's context-menu panel, or an empty string when the row has no visible
+ * action.
+ *
+ * The caller still wraps the echo in an `@if`, and must: the morph markers that
+ * conditional emits are what let morphdom pair a row's children when the cell list
+ * changes under it (a column reorder). See the note at the call site.
+ */
+ public function getRowContextMenuPanel(Model $record): string
+ {
+ if (! $this->hasRowContextMenu()) {
+ return '';
+ }
+
+ $menu = trim($this->getRowContextMenuHtml($record)->toHtml());
+
+ if ($menu === '') {
+ return '';
+ }
+
+ return $this->getRowContextMenuSkeleton()->fill([
+ 'key' => e((string) $record->{$this->getPrimaryKey()}),
+ 'menu' => $menu,
+ ]);
+ }
+
// Record actions (row-level interaction: click, double-click, right-click, keys)
/**
diff --git a/packages/table/src/WireTableServiceProvider.php b/packages/table/src/WireTableServiceProvider.php
index daffb23f..dd426ad8 100644
--- a/packages/table/src/WireTableServiceProvider.php
+++ b/packages/table/src/WireTableServiceProvider.php
@@ -10,8 +10,7 @@
use NyonCode\LaravelPackageToolkit\Packager;
use NyonCode\LaravelPackageToolkit\PackageServiceProvider;
use NyonCode\WireCore\Actions\Action;
-use NyonCode\WireCore\Foundation\Assets\AssetManager;
-use NyonCode\WireCore\Foundation\Assets\Js;
+use NyonCode\WireCore\Foundation\Assets\Bundle;
use NyonCode\WireTable\Livewire\TableStateSynthesizer;
use NyonCode\WireTable\Support\RecordAction;
use Symfony\Component\HttpFoundation\BinaryFileResponse;
@@ -37,11 +36,15 @@ public function configure(Packager $packager): void
$this->registerRecordActionMacros();
$this->registerAssetRoutes();
- $this->registerAssets();
})
->hasConfig()
->hasViews()
- ->hasAssets('dist')
+ ->hasAssets('dist', entries: [
+ Bundle::make('wire-table-records.js'),
+ Bundle::make('wire-table-selection.js'),
+ Bundle::make('wire-table-live.js'),
+ ])
+ ->hasAssetFallback(Bundle::servedByRoute('wire-table'))
->hasMigrations()
->hasTranslations()
->hasAbout()
@@ -104,27 +107,6 @@ protected function registerAssetRoutes(): void
->name('wire-table.asset');
}
- /**
- * Declare the table's browser bundles with the canonical AssetManager, so an app
- * that renders `@wireStackScripts` in its layout carries `wireRecordActions` and
- * `wireRecordSelection` on every page — including one with no table, which is
- * the page a `wire:navigate` visit to a table is made *from*.
- */
- protected function registerAssets(): void
- {
- app(AssetManager::class)->register([
- Js::make('records', self::ASSETS_PATH.'/wire-table-records.js')
- ->navigateTrack()
- ->navigateOnce(),
- Js::make('selection', self::ASSETS_PATH.'/wire-table-selection.js')
- ->navigateTrack()
- ->navigateOnce(),
- Js::make('live', self::ASSETS_PATH.'/wire-table-live.js')
- ->navigateTrack()
- ->navigateOnce(),
- ], 'wire-table');
- }
-
/**
* Extra rows for this package's `php artisan about` section (the toolkit
* already prepends "Version"). Values are closures so config resolves at
diff --git a/packages/table/tests/Feature/CollapseMobileHeaderActionsTest.php b/packages/table/tests/Feature/CollapseMobileHeaderActionsTest.php
new file mode 100644
index 00000000..f41ddd8a
--- /dev/null
+++ b/packages/table/tests/Feature/CollapseMobileHeaderActionsTest.php
@@ -0,0 +1,134 @@
+model(CollapseHeaderActionsUser::class)
+ ->columns([TextColumn::make('name')])
+ ->headerActions([
+ HeaderAction::make('create')->label('New user')->keyboardShortcut('c'),
+ HeaderAction::make('import')->label('Import')->requiresConfirmation(),
+ ])
+ ->collapseHeaderActionsOnMobile($this->collapse)
+ ->paginated(false);
+ }
+
+ public function render()
+ {
+ return $this->getTableProperty();
+ }
+}
+
+class CollapseHeaderActionsSingleHost extends Component
+{
+ use WithTable;
+
+ public function table(Table $table): Table
+ {
+ return $table
+ ->model(CollapseHeaderActionsUser::class)
+ ->columns([TextColumn::make('name')])
+ ->headerActions([
+ HeaderAction::make('create')->label('New user'),
+ HeaderAction::make('import')->label('Import')->visible(false),
+ ])
+ ->collapseHeaderActionsOnMobile(threshold: 1)
+ ->paginated(false);
+ }
+
+ public function render()
+ {
+ return $this->getTableProperty();
+ }
+}
+
+beforeEach(function () {
+ Schema::create('collapse_header_actions_users', function (Blueprint $table) {
+ $table->id();
+ $table->string('name');
+ $table->timestamps();
+ });
+
+ CollapseHeaderActionsUser::create(['name' => 'Ada Lovelace']);
+});
+
+afterEach(fn () => Schema::dropIfExists('collapse_header_actions_users'));
+
+it('renders header actions as plain toolbar buttons by default', function () {
+ Livewire::test(CollapseHeaderActionsHost::class)
+ ->assertSee('header-action-create', escape: false)
+ ->assertSee('header-action-import', escape: false)
+ // No dropdown, and nothing wrapping the buttons for a breakpoint.
+ ->assertDontSee('table-header-actions-mobile', escape: false)
+ ->assertDontSee('action-group-trigger', escape: false)
+ ->assertDontSee('hidden sm:flex', escape: false);
+});
+
+it('collapses the header actions into one dropdown below the mobile breakpoint', function () {
+ Livewire::test(CollapseHeaderActionsHost::class)
+ ->set('collapse', true)
+ // Desktop half: the same buttons, now hidden below the breakpoint.
+ ->assertSee('hidden sm:flex', escape: false)
+ ->assertSee('header-action-create', escape: false)
+ // Mobile half: one trigger, shown only below the breakpoint.
+ ->assertSee('table-header-actions-mobile', escape: false)
+ ->assertSee('sm:hidden', escape: false)
+ ->assertSee('action-group-trigger', escape: false)
+ // …with both actions as menu rows wired to the record-less host methods.
+ ->assertSee('menu-action-create', escape: false)
+ ->assertSee('menu-action-import', escape: false)
+ // (escaped: the expression sits in a wire:click attribute)
+ ->assertSee("executeHeaderAction('create')")
+ // The confirmation action opens the modal instead of running.
+ ->assertSee("openHeaderActionModal('import')");
+});
+
+it('renders a lone surviving action as a button instead of a one-item menu', function () {
+ Livewire::test(CollapseHeaderActionsSingleHost::class)
+ // Collapse is on (threshold 1) but the viewer may run only one action,
+ // so the extra tap of a dropdown would buy nothing.
+ ->assertSee('table-header-actions-mobile', escape: false)
+ ->assertSee('header-action-create', escape: false)
+ ->assertDontSee('action-group-trigger', escape: false);
+});
+
+it('binds the header action keyboard shortcut once, on the button half only', function () {
+ $html = Livewire::test(CollapseHeaderActionsHost::class)->set('collapse', true)->html();
+
+ // A rendered shortcut is a *window* listener and both halves are in the
+ // document at every width; a second binding would run the action twice on
+ // one keypress.
+ expect(substr_count($html, 'keydown.c.window'))->toBe(1);
+});
diff --git a/packages/table/tests/Feature/TableSearchSyntaxTest.php b/packages/table/tests/Feature/TableSearchSyntaxTest.php
index 1fb598be..f62d8faf 100644
--- a/packages/table/tests/Feature/TableSearchSyntaxTest.php
+++ b/packages/table/tests/Feature/TableSearchSyntaxTest.php
@@ -490,3 +490,94 @@ public function render()
expect($records->pluck('reference')->all())->toBe(['8866 05']);
});
+
+// ── The declaration the search box cannot ask for ───────────
+//
+// `searchAs()` only says which comparisons a column can answer; without
+// `ranges()` none can be typed, so the table would come back empty with nothing
+// to explain it. That is refused at render, before anything is typed.
+
+class GuardedSearchHost extends Component
+{
+ use WithTable;
+
+ public string $type = 'code';
+
+ public bool $columnSearchable = true;
+
+ public bool $tableSearchable = true;
+
+ public bool $ranges = false;
+
+ public function table(Table $table): Table
+ {
+ $reference = TextColumn::make('reference')->searchAs($this->type);
+
+ $table
+ ->model(CodeOrder::class)
+ ->columns([$reference->searchable($this->columnSearchable)])
+ ->searchable($this->tableSearchable)
+ ->paginated(false);
+
+ return $this->ranges
+ ? $table->search(fn (SearchConfig $s) => $s->ranges())
+ : $table;
+ }
+
+ public function render()
+ {
+ return $this->getTableProperty();
+ }
+}
+
+/**
+ * The root cause of a render: the guard fires while the table is being built,
+ * so Blade wraps it before it reaches the caller.
+ */
+function guardFailure(array $params = []): Throwable
+{
+ try {
+ Livewire::test(GuardedSearchHost::class, $params);
+ } catch (Throwable $error) {
+ return $error->getPrevious() ?? $error;
+ }
+
+ throw new RuntimeException('The table rendered without refusing its search declaration.');
+}
+
+it('refuses a code column the search box cannot range over', function () {
+ $error = guardFailure();
+
+ expect($error)->toBeInstanceOf(TableConfigurationException::class)
+ ->and($error->getMessage())->toContain("Column [reference] declares searchAs('code')");
+});
+
+it('names tokenize() as well, since a code carries its series as a word', function () {
+ expect(guardFailure()->getMessage())->toContain('$s->tokenize()->ranges())');
+});
+
+it('asks only for ranges() where no series has to be rejoined', function () {
+ expect(guardFailure(['type' => 'numeric']))
+ ->getMessage()->toContain('$s->ranges())')
+ ->getMessage()->not->toContain('tokenize');
+});
+
+it('accepts the declaration once the table reads ranges', function () {
+ Livewire::test(GuardedSearchHost::class, ['ranges' => true])
+ ->assertOk();
+});
+
+it('leaves a text declaration alone, since it asserts no comparison', function () {
+ Livewire::test(GuardedSearchHost::class, ['type' => 'text'])
+ ->assertOk();
+});
+
+it('leaves a column that is not searchable alone', function () {
+ Livewire::test(GuardedSearchHost::class, ['columnSearchable' => false])
+ ->assertOk();
+});
+
+it('leaves a table with no search box alone', function () {
+ Livewire::test(GuardedSearchHost::class, ['tableSearchable' => false])
+ ->assertOk();
+});
diff --git a/packages/table/tests/Feature/WireStackScriptsTest.php b/packages/table/tests/Feature/WireStackScriptsTest.php
index 9591752d..f5735cf5 100644
--- a/packages/table/tests/Feature/WireStackScriptsTest.php
+++ b/packages/table/tests/Feature/WireStackScriptsTest.php
@@ -4,7 +4,6 @@
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\Facades\Route;
-use NyonCode\WireTable\WireTableServiceProvider;
/**
* The defect this closes: an app navigates from a page with no table to a page
@@ -21,23 +20,26 @@
$response
->assertSee('No table here.')
// wireRecordSelection — the factory the table wrapper's x-data references.
- ->assertSee('/wire-table/assets/selection.js', false)
+ ->assertSee('/vendor/wire-table/wire-table-selection.js', false)
// wireRecordActions — row click/dblclick/context-menu triggers.
- ->assertSee('/wire-table/assets/records.js', false)
+ ->assertSee('/vendor/wire-table/wire-table-records.js', false)
// wireDropdown & friends, from the package below.
- ->assertSee('/wire-core/assets/dropdown.js', false)
+ ->assertSee('/vendor/wire-core/wire-core-dropdown.js', false)
->assertDontSee('toContain('/wire-table/assets/selection.js?id='.filemtime(
- WireTableServiceProvider::ASSETS_PATH.'/wire-table-selection.js'
+ ->toContain('/vendor/wire-table/wire-table-selection.js?id='.filemtime(
+ public_path('vendor/wire-table/wire-table-selection.js')
))
- ->toContain('/wire-table/assets/records.js?id='.filemtime(
- WireTableServiceProvider::ASSETS_PATH.'/wire-table-records.js'
+ ->toContain('/vendor/wire-table/wire-table-records.js?id='.filemtime(
+ public_path('vendor/wire-table/wire-table-records.js')
));
});
@@ -45,9 +47,15 @@
// The per-surface @assets partials still exist for apps without the directive;
// the directive must not turn into a second copy of them for apps with it.
//
- // Five, since the live-broadcast bridge joined them. It ships on every page
- // for the same reason the other two do: the factory the table's x-data
- // references has to exist before a wire:navigate visit renders the table, and
- // the page that visit is made *from* may have no table on it at all.
- expect(substr_count(Blade::render('@wireStackScripts'), 'toBe(5);
+ // Seven: dropdown, copy and chart from core, image from forms, records,
+ // selection and live from the table. They ship on every page for the same
+ // reason: the behaviour a table's markup reaches for has to exist before a
+ // wire:navigate visit renders the table, and the page that visit is made
+ // *from* may have no table on it at all.
+ //
+ // Chart is the one that moved. It was held back as an optional heavy body,
+ // which it is not — 671 bytes of Alpine registrar around the app's own
+ // Chart.js — and delivering a registrar late is precisely what ADR 0024
+ // forbids.
+ expect(substr_count(Blade::render('@wireStackScripts'), 'toBe(7);
});
diff --git a/packages/table/tests/Unit/Columns/ColumnPartialRenderTest.php b/packages/table/tests/Unit/Columns/ColumnPartialRenderTest.php
index fc466188..6ce1c95b 100644
--- a/packages/table/tests/Unit/Columns/ColumnPartialRenderTest.php
+++ b/packages/table/tests/Unit/Columns/ColumnPartialRenderTest.php
@@ -189,9 +189,14 @@ function partialRecord(array $attributes): Model
it('renders base text cell copyable through the text partial', function () {
$html = TextColumn::make('email')->copyable()->renderCell(partialRecord(['email' => 'a@b.test']));
- expect($html)->toContain('x-data')
- ->and($html)->toContain('clipboard')
- ->and($html)->toContain('a@b.test');
+ // The behaviour is bound once for the document by the record-copy bundle, so the
+ // cell carries the value on `data-copy` and no Alpine component of its own. The
+ // assertion used to look for the string "clipboard", which only ever matched the
+ // `navigator.clipboard` call in the inline handler that has now moved out.
+ expect($html)->toContain('data-copy="a@b.test"')
+ ->and($html)->toContain('data-testid="cell-copy"')
+ ->and($html)->toContain('a@b.test')
+ ->and($html)->not->toContain('x-data');
});
it('renders base text cell tooltip + description through the text partial', function () {
diff --git a/packages/table/tests/Unit/Columns/TextColumnSkeletonTest.php b/packages/table/tests/Unit/Columns/TextColumnSkeletonTest.php
index 1441b251..dee80b6e 100644
--- a/packages/table/tests/Unit/Columns/TextColumnSkeletonTest.php
+++ b/packages/table/tests/Unit/Columns/TextColumnSkeletonTest.php
@@ -19,13 +19,13 @@
* proves both for TextColumn, and measures the interactive TextInputColumn (the Rule 2
* boundary, where per-record structure is not spliceable).
*/
-function skelRecord(mixed $value): Model
+function skelRecord(mixed $value, mixed $id = 1): Model
{
$record = new class extends Model
{
protected $guarded = [];
};
- $record->forceFill(['val' => $value, 'id' => 1]);
+ $record->forceFill(['val' => $value, 'id' => $id]);
return $record;
}
@@ -69,20 +69,117 @@ function skelViewRenders(Closure $c): int
}
});
-it('falls back to renderCell (still identical) for non-skeletonable columns', function () use ($contents) {
- $configs = [
- 'copyable' => fn () => TextColumn::make('val')->copyable(),
- 'url' => fn () => TextColumn::make('val')->actionUrl(fn ($r) => 'https://x.test/'.$r->id),
- 'description-closure' => fn () => TextColumn::make('val')->description(fn ($r) => 'desc-'.$r->id),
- ];
+/**
+ * The per-record configs — the ones that used to drop the column back onto a
+ * per-cell render, at a measured 18–33× the cost of a splice.
+ *
+ * Each is now its own slot, and each slot is one position with one encoding: the
+ * url inside `href="…"`, the copy value inside `data-copy="…"`, the description
+ * inside a ` `, the icon as raw markup. That is the property the whole multi-slot
+ * move rests on, so the ids below are hostile on purpose — a quote or an ampersand
+ * reaching a slot under the wrong encoding is exactly what byte-identity catches.
+ */
+$skelPerRecordConfigs = [
+ 'copyable' => fn () => TextColumn::make('val')->copyable(),
+ 'url' => fn () => TextColumn::make('val')->actionUrl(fn ($r) => 'https://x.test/'.$r->id),
+ 'url+newtab' => fn () => TextColumn::make('val')->actionUrl(fn ($r) => '/p?a=1&b="2"&c='.$r->id, true),
+ 'description-closure' => fn () => TextColumn::make('val')->description(fn ($r) => 'desc & '.$r->id.''),
+ 'icon-closure' => fn () => TextColumn::make('val')->icon(fn ($record) => $record->id % 2 ? 'pencil' : 'trash'),
+ 'copyable+url' => fn () => TextColumn::make('val')->copyable()->actionUrl(fn ($r) => 'https://x.test/'.$r->id),
+ 'all-at-once' => fn () => TextColumn::make('val')
+ ->copyable()
+ ->actionUrl(fn ($r) => 'https://x.test/?q='.$r->id)
+ ->description(fn ($r) => 'd'.$r->id)
+ ->icon(fn ($record) => 'pencil')
+ ->tooltip('t'),
+];
- foreach ($configs as $label => $make) {
+$skelIds = [1, 7, 'a&b', 'q"uote', "ap'os", '', 'ünï'];
+
+it('splices per-record url / copy / description / icon byte-identically', function () use ($contents, $skelPerRecordConfigs, $skelIds) {
+ foreach ($skelPerRecordConfigs as $label => $make) {
foreach ($contents as $content) {
- $slow = ($make)();
- $fast = ($make)();
- $record = skelRecord($content);
- expect($fast->renderCellFast($record))->toBe($slow->renderCell($record), $label);
+ foreach ($skelIds as $id) {
+ // One fresh column per case so the shape cache starts cold, and one
+ // shared column below to prove the cache does not leak between rows.
+ $slow = ($make)();
+ $fast = ($make)();
+ $record = skelRecord($content, $id);
+
+ expect($fast->renderCellFast($record))->toBe(
+ $slow->renderCell($record),
+ "config=$label id=".var_export($id, true).' content='.var_export($content, true)
+ );
+ }
+ }
+ }
+});
+
+it('keeps rows apart when one column serves many records', function () use ($skelPerRecordConfigs, $skelIds) {
+ // The real loop: ONE column instance, many records. A skeleton cached from the
+ // first row must not carry that row's url, copy value, description or icon into
+ // the next — the failure mode a per-column cache invites.
+ foreach ($skelPerRecordConfigs as $label => $make) {
+ $shared = ($make)();
+
+ foreach ($skelIds as $id) {
+ $record = skelRecord('v', $id);
+
+ expect($shared->renderCellFast($record))->toBe(
+ ($make)()->renderCell($record),
+ "config=$label id=".var_export($id, true)
+ );
+ }
+ }
+});
+
+it('renders one view per cell SHAPE, not one per row', function () {
+ // A url-bearing column is now spliced, so 100 rows cost the one skeleton render
+ // their shape needs — where before every row paid a full view render.
+ $records = array_map(fn ($i) => skelRecord("row $i", $i), range(1, 100));
+
+ $column = TextColumn::make('val')->actionUrl(fn ($r) => 'https://x.test/'.$r->id)->copyable();
+ $renders = skelViewRenders(function () use ($column, $records) {
+ foreach ($records as $r) {
+ $column->renderCellFast($r);
}
+ });
+
+ // 3, all one-off: the text partial, the copyable partial it includes, and core's
+ // copy-button partial that one compiles into its own skeleton. What matters is
+ // that the number does not move with the row count — 100 rows, 3 renders.
+ expect($renders)->toBeLessThanOrEqual(3);
+});
+
+it('renders one skeleton per shape when a record turns a part off', function () {
+ // A closure that answers for some records and not others is two shapes, and each
+ // is compiled once however many rows share it — never once per row.
+ $records = array_map(fn ($i) => skelRecord("row $i", $i), range(1, 100));
+
+ $column = TextColumn::make('val')->actionUrl(fn ($r) => $r->id % 2 ? 'https://x.test/'.$r->id : null);
+ $renders = skelViewRenders(function () use ($column, $records) {
+ foreach ($records as $r) {
+ $column->renderCellFast($r);
+ }
+ });
+
+ expect($renders)->toBe(2);
+
+ // …and both shapes are still right.
+ $withUrl = TextColumn::make('val')->actionUrl(fn ($r) => $r->id % 2 ? 'https://x.test/'.$r->id : null);
+ foreach ([1, 2] as $id) {
+ $record = skelRecord('v', $id);
+ expect($column->renderCellFast($record))->toBe($withUrl->renderCell($record), "id=$id");
+ }
+});
+
+it('leaks no sentinel into a rendered cell', function () use ($skelPerRecordConfigs) {
+ // The one failure a skeleton can produce that no other assertion would notice:
+ // an unfilled hole shipping its placeholder to the browser.
+ foreach ($skelPerRecordConfigs as $label => $make) {
+ $html = ($make)()->renderCellFast(skelRecord('v', 3));
+
+ expect($html)->not->toContain('ᐊWIRE_SLOT_', $label);
}
});
diff --git a/packages/table/tests/Unit/Concerns/TablePayloadFuseTest.php b/packages/table/tests/Unit/Concerns/TablePayloadFuseTest.php
new file mode 100644
index 00000000..0fff576f
--- /dev/null
+++ b/packages/table/tests/Unit/Concerns/TablePayloadFuseTest.php
@@ -0,0 +1,530 @@
+render()`, which is the SERVER cost. It is
+ * blind to the cost the browser pays, and that one is not small: every commit ships
+ * the whole table back and Livewire morphs it, walking each node it finds. Measured
+ * on a 40-row preview, the morph took ~100 ms — longer than the round-trip that
+ * carried it — and 79 % of the nodes it walked held no content at all.
+ *
+ * Two things make a node the morph must walk, and neither shows up in a render count:
+ *
+ * 1. **A run of whitespace between two tags is one text node**, however long it is.
+ * So indentation is not free at the DOM level, and — the part that matters when
+ * fixing it — SHORTENING the indentation saves bytes but not nodes. Only removing
+ * the run removes the node.
+ * 2. **Every `@if` / `@foreach` costs two comment nodes**, injected by Livewire so its
+ * morph can tell a change from an insertion (`inject_morph_markers`).
+ *
+ * So this counts the three things a payload is made of — bytes, whitespace runs and
+ * comments — as a SLOPE per row, the same trick the render fuse uses: the fixed
+ * chrome (toolbar, filters, modals) drops out of a difference, so the budgets pin
+ * the per-row cost and stay honest when the chrome legitimately grows.
+ *
+ * The budgets are deliberately near the measured values (see each `expect`). A change
+ * that trips one is not necessarily wrong — but it is a change to what every user's
+ * browser does on every keystroke, and it should be a decision, not a side effect.
+ */
+
+// ─── Test Model + Component ──────────────────────────────────────────────────
+
+class PfRow extends Model
+{
+ protected $table = 'pf_rows';
+
+ protected $guarded = [];
+
+ public function kids()
+ {
+ return $this->hasMany(PfKid::class, 'row_id');
+ }
+}
+
+class PfKid extends Model
+{
+ protected $table = 'pf_kids';
+
+ protected $guarded = [];
+}
+
+class PfComponent extends Component
+{
+ use WithTable;
+
+ public int $cols = 3;
+
+ public bool $copyable = false;
+
+ public bool $selectable = false;
+
+ public bool $contextMenu = false;
+
+ public bool $subRows = false;
+
+ public bool $actions = false;
+
+ public string $siblings = '';
+
+ public function mount(
+ int $cols = 3,
+ bool $copyable = false,
+ bool $selectable = false,
+ bool $contextMenu = false,
+ bool $subRows = false,
+ bool $actions = false,
+ string $siblings = '',
+ ): void {
+ $this->cols = $cols;
+ $this->copyable = $copyable;
+ $this->selectable = $selectable;
+ $this->contextMenu = $contextMenu;
+ $this->subRows = $subRows;
+ $this->actions = $actions;
+ $this->siblings = $siblings;
+ }
+
+ public function table(Table $table): Table
+ {
+ $columns = [];
+
+ for ($i = 0; $i < $this->cols; $i++) {
+ // displayUsing keeps the value off any DB attribute and constant across
+ // rows, so the slope measures the SCAFFOLDING around the cell, never the
+ // content in it.
+ $column = TextColumn::make('c'.$i)->displayUsing(fn () => 'v');
+
+ if ($this->copyable) {
+ $column->copyable();
+ }
+
+ $columns[] = $column;
+ }
+
+ if ($this->contextMenu) {
+ $table->gestures()->rowContextMenu([Action::make('edit')->label('Edit')]);
+ }
+
+ if ($this->subRows) {
+ $table->subRows('kids')->subRowColumns([TextColumn::make('label')]);
+ }
+
+ if ($this->actions) {
+ $table->actions([Action::make('edit')->label('Edit')]);
+ }
+
+ // The sibling-row variants all carry a real DB column (`name`) so grouping has
+ // something to group by. 'none' is their baseline: same columns, no siblings,
+ // so a delta against it measures the sibling row and nothing else.
+ if ($this->siblings !== '') {
+ array_unshift($columns, TextColumn::make('name'));
+ }
+
+ // Worst case on purpose: `name` is unique, so there is one group per row and
+ // the slope measures a group header (and subtotal) per row rather than per
+ // group. A table grouped by a timestamp behaves like this.
+ if ($this->siblings === 'grouped') {
+ $table->groupBy('name');
+ }
+
+ if ($this->siblings === 'grouped-summaries') {
+ $table->groupBy('name')->groupSummaries();
+ $columns[0]->summarize('count');
+ }
+
+ if ($this->siblings === 'stacked') {
+ $table->stackedOnMobile();
+ }
+
+ if ($this->siblings === 'subrows-expanded') {
+ $table->subRows('kids')
+ ->subRowColumns([TextColumn::make('label')])
+ ->subRowsDefaultExpanded();
+ }
+
+ return $table
+ ->model(PfRow::class)
+ ->paginated(false)
+ ->selectable($this->selectable)
+ ->columns($columns);
+ }
+
+ public function render()
+ {
+ return $this->getTableProperty();
+ }
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+/**
+ * The three payload metrics for one rendered table.
+ *
+ * `whitespaceRuns` counts `> <` — each one is exactly one whitespace-only text
+ * node in the browser. `comments` counts every ` |