noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cut duplicated and speculative code across the package

Browse Source 
An over-engineering audit of the whole tree, applied in five reviewed
batches. Behaviour stays the same except where UPGRADE.md says otherwise.

PHP: the showcase and error-page stylesheets are prebuilt into
resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import
(first occurrence kept, the order an application's build gives), instead
of Stylesheets::bundle() inlining imports on every request; only the
import walk DesignGuard needs stays. SchemeStylesheet::withProfiles()
replaces three copies of the scheme-plus-profiles loop, material:scheme
leaves spec and contrast checks to the node script that already made
them, and the error page's scheme cache, the hashed view namespace, the
translations path with no lang/ folder and DesignGuard's 1.x-name hints
are gone.

JS: the androidx shape port progress.js and both bin scripts each carried
lives once in resources/js/shapes.js (the generated SVGs are unchanged);
util.js holds ringIndex(), ms(), reopenGuard() and remember(), which
were written out several times; listeners are released through
AbortController; tooltip.js's hoverPopover() serves the rich tooltip too.

CSS: every rule for an element inside the navigation rail queries
`--md-navigation-rail-value` instead of repeating the seven collapsed
conditions under five media branches; badge, alert, progress, slider and
button read one non-inheriting colour-role table (components/color.css);
the dialog chrome, the submenu's popover chrome, the chip's state layer
and touch target, and the visually-hidden inputs use the shared rules
they copied; foundation/tokens.css is folded into foundation.css.

Views: Support\Field and Support\Link replace the error-key, bound-value
and link-attribute blocks copied into the fields and link components;
the timepicker period group, the menu filter and the showcase head are
partials; the datepicker's steppers and entry fields are loops; component
docblocks no longer restate SKILL.md.

Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces
four per-group files, DesignGuardTest and the layout-component tests use
datasets, browser tests share one ready() helper, CSS parsing lives in
ComponentStylesheet alone. docs/audits and the finding IDs citing it are
removed, as are pestphp/pest-plugin-laravel, the unused composer scripts
and check:font; the lint job runs in the feature job, which now installs
node packages so the prebuilt-stylesheet staleness test runs in CI.

Feature suite 1177 passed, Chrome browser suite 299 passed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-17 19:29:21 +02:00
co-authored by Claude Opus 5
parent 471d927e64
commit 247c596c3a
233 changed files with 16635 additions and 10579 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/CommunicationTest.php
+17 -32
View File
@@ -39,14 +39,13 @@ class RichTooltipMorphProbe extends Component
}
}
// The live region is the host itself, in the page before any message is (actions.md ACT-02).
// The live region is the host itself, in the page before any message is.
const SNACKBAR = "document.querySelector('[x-data=\"materialSnackbar\"][aria-live]')";
const TOAST = "document.querySelector('[data-md-toast-snackbar]')";
it('shows a toast as a snackbar, then the next in turn', function () {
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
$page->script("materialToast('First', { type: 'success', timeout: 600 }); materialToast('Second', { type: 'error' })");
@@ -60,8 +59,7 @@ it('shows a toast as a snackbar, then the next in turn', function () {
});
it('shows a toast dispatched as a browser event, as the Toasts concern does', function () {
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
// Through Livewire, in the page's own realm: an event built inside Playwright's evaluate
// carries a detail object Firefox's sandbox will not let the page read.
@@ -71,8 +69,7 @@ it('shows a toast dispatched as a browser event, as the Toasts concern does', fu
});
it('runs a toast\'s action and dismisses it', function () {
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
$page->script("window.__undone = false; materialToast('Share deleted', { action: { label: 'Undo', handler: () => window.__undone = true } })");
@@ -83,8 +80,7 @@ it('runs a toast\'s action and dismisses it', function () {
});
it('does not let a toast dismissed early cut the next one short', function () {
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
$page->script("window.eval(\"materialToast('Share deleted', { timeout: 800, action: { label: 'Undo' } }); materialToast('Link copied', { timeout: 2500 })\")");
@@ -99,8 +95,7 @@ it('does not let a toast dismissed early cut the next one short', function () {
});
it('keeps a sticky toast aside while a passing one shows, brings back the newest, and lets it go once dismissed', function () {
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
// As an application dispatches it; built in the page's realm (see above).
$page->script("window.eval(\"window.dispatchEvent(new CustomEvent('toast', { detail: { type: 'info', title: 'A new version is ready', sticky: true, timeout: 300, action: { label: 'Reload', event: 'material:test-reload' } } }))\")");
@@ -130,8 +125,7 @@ it('keeps a sticky toast aside while a passing one shows, brings back the newest
});
it('dispatches a toast action\'s window event alongside its handler, and closes', function () {
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
$page->script("window.eval(\"window.reloads = 0; window.handled = 0; window.addEventListener('material:test-reload', () => window.reloads++); materialToast('A new version is ready', { sticky: true, action: { label: 'Reload', event: 'material:test-reload', handler: () => window.handled++ } })\")");
@@ -142,10 +136,9 @@ it('dispatches a toast action\'s window event alongside its handler, and closes'
});
it('keeps an actioned snackbar on screen past the default timeout, until it is acted on', function () {
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
// No timeout written out: M3 forbids an actioned snackbar from auto-dismissing (ACT-03).
// No timeout written out: M3 forbids an actioned snackbar from auto-dismissing.
$page->script("materialToast('Share deleted', { action: { label: 'Undo', handler: () => {} } })");
$page->assertScript(TOAST."?.textContent.includes('Share deleted')")
@@ -157,8 +150,7 @@ it('keeps an actioned snackbar on screen past the default timeout, until it is a
});
it('dismisses a focused snackbar with Escape', function () {
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
$page->script("materialToast('Share deleted', { action: { label: 'Undo', handler: () => {} } })");
@@ -171,8 +163,7 @@ it('dismisses a focused snackbar with Escape', function () {
});
it('keeps the snackbar\'s live region in the page, polite, before any message arrives', function () {
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
$page->assertScript(SNACKBAR.' !== null')
->assertScript(SNACKBAR."?.getAttribute('aria-live') === 'polite'")
@@ -181,8 +172,7 @@ it('keeps the snackbar\'s live region in the page, polite, before any message ar
});
it('grows to M3\'s two-line height with a description, and Alt+G reaches its action from anywhere on the page', function () {
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
$page->script("materialToast('Upload paused', { description: 'The connection dropped at 64%.', action: { label: 'Retry now', handler: () => {} } })");
@@ -198,8 +188,7 @@ it('grows to M3\'s two-line height with a description, and Alt+G reaches its act
});
it('keeps a two-line snackbar\'s action on the title\'s row from 600px, wrapping under it only below that', function () {
$page = visit('/material/communication')->resize(400, 800)->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication')->resize(400, 800));
$page->script("materialToast('Upload paused', { description: 'The connection dropped at 64%.', action: { label: 'Retry now', handler: () => {} } })");
@@ -220,8 +209,7 @@ it('keeps a two-line snackbar\'s action on the title\'s row from 600px, wrapping
it('opens a persistent rich tooltip on press', function () {
$bubble = "document.querySelector('#communication [role=\"dialog\"][popover]')";
visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'")
ready(visit('/material/communication'))
->click('#communication button:has-text("Press for details")')
->assertScript("{$bubble}.matches(':popover-open')");
});
@@ -230,8 +218,7 @@ it('closes a transient rich tooltip 1.5s after focus leaves, not at once', funct
$trigger = '#communication button[aria-label="About expiry"]';
$bubble = "document.querySelector('#communication [role=\"tooltip\"][popover]')";
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
// A key press first, so the browser is in keyboard modality, as a keyboard user would be.
$page->keys('#communication', 'Tab');
@@ -272,8 +259,7 @@ it('keeps a rich tooltip open while its action renders the component, and opens
$persistent = "document.querySelector('[role=\"dialog\"][popover]')";
$transient = "document.querySelector('[role=\"tooltip\"][popover]')";
$page = visit('/rich-tooltip-morph-probe')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'")
$page = ready(visit('/rich-tooltip-morph-probe'))
->assertNoJavaScriptErrors();
$page->click('@details')
@@ -300,8 +286,7 @@ it('keeps a rich tooltip open while its action renders the component, and opens
it('fades a persistent rich tooltip out when a second press closes it', function () {
$bubble = "document.querySelector('#communication [role=\"dialog\"][popover]')";
$page = visit('/material/communication')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
$page = ready(visit('/material/communication'));
// Slow tokens, so the exit copy (resources/js/popover-exit.js) is still on screen after the round trip.
$page->script("document.head.insertAdjacentHTML('beforeend', '<style>:root { --md-sys-motion-effects-fast-duration: 1500ms; }</style>')");