mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-14 05:06:16 -08:00
Takes Angular Material off the renderer's startup path: renderer.initialBytes 1,596,201 -> 1,344,067 bytes (-252,134, 15.8%) at the branch point; merged with master, where #1928 lands the form-field defaults per component, the branch measures 1,345,807 (-188,797, 12.3% against master's baseline). The bundler keeps each module in one chunk, so one eager import of any export carries the module's whole code; each item removes the last eager importer of one Material module. - EPG progress and update panels: eager host + `@defer (when visible)` view with an `@error` notice; the startup spinner is static markup copied from mat-spinner. - LazyMatDialog: the confirm dialog service, player service, parental lock prompt and shell actions resolve MatDialog on first use. - The theme emits tokens for the 21 imported components only, through a `$material-components` list and meta.apply; tools/nx/check-material-theme-scope.mjs (CI) keeps it in step with the imports in both directions. - No provideAnimations(): Material 22 animates with CSS and reads prefers-reduced-motion itself; apps/electron-backend-e2e/src/material-motion.e2e.ts proves dialogs, selects, menus, snack-bars and tooltips animate in and out and stop under reduced motion. Its renderer had deferred every DOM removal to the end of the tick, so the catalog list now tracks the grid offset from scroll events and the player settings panel decides "focus was inside" in a microtask, both with specs that detach the view first. - The snack-bar stays, and with it button, the icon-button chunk and the CDK overlay (about 190 KB): root services inject it. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
132 lines
4.0 KiB
JavaScript
132 lines
4.0 KiB
JavaScript
import assert from 'node:assert/strict';
|
|
import { test } from 'node:test';
|
|
|
|
import {
|
|
compareThemeScope,
|
|
requiredThemes,
|
|
themedComponents,
|
|
usedEntryPoints,
|
|
} from './check-material-theme-scope.mjs';
|
|
|
|
const lines = (...rows) => rows.join('\n');
|
|
|
|
test('usedEntryPoints lists each Material entry point with its first importer', () => {
|
|
const importers = usedEntryPoints([
|
|
{
|
|
file: 'a.component.ts',
|
|
source: lines(
|
|
"import { MatButtonModule } from '@angular/material/button';",
|
|
'import {',
|
|
' MatDialog,',
|
|
"} from '@angular/material/dialog';",
|
|
'import { MatIcon } from "@angular/material/icon";'
|
|
),
|
|
},
|
|
{
|
|
file: 'b.component.ts',
|
|
source: "import { MatButton } from '@angular/material/button';",
|
|
},
|
|
]);
|
|
|
|
assert.deepEqual(
|
|
[...importers],
|
|
[
|
|
['button', 'a.component.ts'],
|
|
['dialog', 'a.component.ts'],
|
|
['icon', 'a.component.ts'],
|
|
]
|
|
);
|
|
});
|
|
|
|
test('usedEntryPoints counts dynamic imports and ignores type-only ones and comments', () => {
|
|
const importers = usedEntryPoints([
|
|
{
|
|
file: 'lazy-mat-dialog.ts',
|
|
source: lines(
|
|
"import type { MatDialog } from '@angular/material/dialog';",
|
|
"type DialogModule = typeof import('@angular/material/dialog');",
|
|
'loadDialogModule = () =>',
|
|
" import('@angular/material/dialog');"
|
|
),
|
|
},
|
|
{
|
|
file: 'types-only.ts',
|
|
source: lines(
|
|
"import type { MatTooltip } from '@angular/material/tooltip';",
|
|
"// import { MatChipsModule } from '@angular/material/chips';",
|
|
"/* import { MatTabsModule } from '@angular/material/tabs'; */"
|
|
),
|
|
},
|
|
]);
|
|
|
|
assert.deepEqual([...importers], [['dialog', 'lazy-mat-dialog.ts']]);
|
|
});
|
|
|
|
test('requiredThemes always keeps core and expands the button entry point', () => {
|
|
const required = requiredThemes(
|
|
new Map([
|
|
['button', 'a.ts'],
|
|
['tooltip', 'b.ts'],
|
|
['testing', 'c.ts'],
|
|
])
|
|
);
|
|
|
|
assert.deepEqual(
|
|
[...required],
|
|
[
|
|
['core', 'always themed'],
|
|
['button', '@angular/material/button in a.ts'],
|
|
['icon-button', '@angular/material/button in a.ts'],
|
|
['fab', '@angular/material/button in a.ts'],
|
|
['tooltip', '@angular/material/tooltip in b.ts'],
|
|
]
|
|
);
|
|
});
|
|
|
|
test('themedComponents reads the list, direct includes and the all-components mixin', () => {
|
|
assert.deepEqual(
|
|
themedComponents(
|
|
lines(
|
|
'$material-components: (',
|
|
' core,',
|
|
' button, // used by every dialog',
|
|
' icon-button,',
|
|
');',
|
|
'@include mat.tooltip-theme($theme);'
|
|
)
|
|
),
|
|
{
|
|
themed: new Set(['core', 'button', 'icon-button', 'tooltip']),
|
|
all: false,
|
|
}
|
|
);
|
|
assert.deepEqual(
|
|
themedComponents('html { @include mat.all-component-themes($t); }'),
|
|
{ themed: new Set(), all: true }
|
|
);
|
|
});
|
|
|
|
test('compareThemeScope reports missing and surplus themes', () => {
|
|
const required = new Map([
|
|
['core', 'always themed'],
|
|
['button', '@angular/material/button in a.ts'],
|
|
]);
|
|
|
|
assert.deepEqual(
|
|
compareThemeScope(required, {
|
|
themed: new Set(['core', 'tabs']),
|
|
all: false,
|
|
}),
|
|
{
|
|
unthemed: [['button', '@angular/material/button in a.ts']],
|
|
unused: ['tabs'],
|
|
}
|
|
);
|
|
// all-component-themes leaves nothing unthemed, but is still surplus-free
|
|
// only when the list is empty.
|
|
assert.deepEqual(
|
|
compareThemeScope(required, { themed: new Set(), all: true }),
|
|
{ unthemed: [], unused: [] }
|
|
);
|
|
});
|