Skip to content

Commit 0ae8f9d

Browse files
author
furina-lu
committed
feat: support switch filter model
1 parent 0925440 commit 0ae8f9d

File tree

10 files changed

+54
-17
lines changed

10 files changed

+54
-17
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "rollup-plugin-visualizer",
3-
"version": "5.14.0",
3+
"version": "5.15.0",
44
"main": "./dist/plugin/index.js",
55
"author": "Denis Bardadym <[email protected]>",
66
"license": "MIT",

‎plugin/index.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,11 @@ export interface PluginVisualizerOptions {
113113
* default. Otherwise, an ID must match one or more of the picomatch patterns, and must not match any of the options.exclude patterns.
114114
*/
115115
exclude?: Filter | Filter[];
116+
117+
/**
118+
* filterModel: 'glob' | 'regexp'
119+
*/
120+
filterModel?: 'glob' | 'regexp'
116121
}
117122

118123
const defaultSizeGetter: SizeGetter = () => Promise.resolve(0);
@@ -152,7 +157,7 @@ export const visualizer = (
152157
const template = opts.template ?? "treemap";
153158
const projectRoot = opts.projectRoot ?? process.cwd();
154159

155-
const filter = createFilter(opts.include, opts.exclude);
160+
const filter = createFilter(opts.include, opts.exclude, opts.filterModel || 'glob');
156161

157162
const gzipSize = !!opts.gzipSize && !opts.sourcemap;
158163
const brotliSize = !!opts.brotliSize && !opts.sourcemap;

‎shared/create-filter.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { describe, it, expect } from "vitest";
2-
import { createFilter } from "./create-filter";
2+
import { createFilter as _createFilter, Filter } from "./create-filter";
33

44
describe("createFilter", () => {
5+
const createFilter = (include: Filter | Filter[] | undefined, exclude: Filter | Filter[] | undefined) => _createFilter(include, exclude, 'glob')
56
it("should return true when input and output is empty", () => {
67
const isIncluded = createFilter([], []);
7-
88
expect(isIncluded("bundle", "file")).toBe(true);
99
});
1010

@@ -92,7 +92,7 @@ describe("createFilter", () => {
9292
])(
9393
"%# should exclude included %j %j bundle %j file %j - %j",
9494
(include, exclude, bundle, file, result) => {
95-
const isIncluded = createFilter(include, exclude);
95+
const isIncluded = createFilter(include, exclude,);
9696
expect(isIncluded(bundle, file)).toBe(result);
9797
}
9898
);

‎shared/create-filter.ts‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ export type Filter = {
55
file?: string | null | undefined;
66
};
77

8+
export type FilterModel = 'glob' | 'regexp'
9+
810
function isArray(arg: unknown): arg is any[] | readonly any[] {
911
return Array.isArray(arg);
1012
}
@@ -39,20 +41,23 @@ const testTrue: Testable = {
3941
test: () => true,
4042
};
4143

42-
const getMatcher = (filter: Filter) => {
44+
const getMatcher = (filter: Filter, filterModel: FilterModel) => {
45+
const filterMethods = (str: string) => filterModel === 'glob' ? globToTest(str) : new RegExp(str)
46+
4347
const bundleTest =
44-
"bundle" in filter && filter.bundle != null ? globToTest(filter.bundle) : testTrue;
45-
const fileTest = "file" in filter && filter.file != null ? globToTest(filter.file) : testTrue;
48+
"bundle" in filter && filter.bundle != null ? filterMethods(filter.bundle) : testTrue;
49+
const fileTest = "file" in filter && filter.file != null ? filterMethods(filter.file) : testTrue;
4650

4751
return { bundleTest, fileTest };
4852
};
4953

5054
export const createFilter = (
5155
include: Filter | Filter[] | undefined,
52-
exclude: Filter | Filter[] | undefined
56+
exclude: Filter | Filter[] | undefined,
57+
filterModel: FilterModel
5358
) => {
54-
const includeMatchers = ensureArray(include).map(getMatcher);
55-
const excludeMatchers = ensureArray(exclude).map(getMatcher);
59+
const includeMatchers = ensureArray(include).map(item => getMatcher(item, filterModel));
60+
const excludeMatchers = ensureArray(exclude).map(item => getMatcher(item, filterModel));
5661

5762
return (bundleId: string, id: string) => {
5863
for (let i = 0; i < excludeMatchers.length; ++i) {

‎src/flamegraph/main.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const Main: FunctionalComponent = () => {
1919
HierarchyRectangularNode<ModuleTree | ModuleTreeLeaf> | undefined
2020
>(undefined);
2121

22-
const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter } = useFilter();
22+
const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter, setFilterModel } = useFilter();
2323

2424
console.time("getNodeSizeMultiplier");
2525
const getNodeSizeMultiplier = useMemo(() => {
@@ -87,6 +87,7 @@ export const Main: FunctionalComponent = () => {
8787
setSizeProperty={setSizeProperty}
8888
onExcludeChange={setExcludeFilter}
8989
onIncludeChange={setIncludeFilter}
90+
onFilterModelChange={setFilterModel}
9091
/>
9192
<Chart
9293
root={root}

‎src/network/main.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const Main: FunctionalComponent = () => {
3131
const [excludedNodes, setExcludedNodes] = useState<ModuleUID[]>([]);
3232
const [selectedNode, setSelectedNode] = useState<string>();
3333

34-
const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter } = useFilter();
34+
const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter, setFilterModel } = useFilter();
3535

3636
const getColor = (node: NodeInfo) => {
3737
if (selectedNode != null) {
@@ -139,6 +139,7 @@ export const Main: FunctionalComponent = () => {
139139
setSizeProperty={() => {}}
140140
onExcludeChange={setExcludeFilter}
141141
onIncludeChange={setIncludeFilter}
142+
onFilterModelChange={setFilterModel}
142143
/>
143144
<Chart
144145
nodes={animatedNodes}

‎src/sidebar.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@ import { FunctionalComponent, JSX } from "preact";
22
import { useState } from "preact/hooks";
33
import { SizeKey } from "../shared/types";
44
import { LABELS } from "./sizes";
5+
import { FilterModel } from "../shared/create-filter";
56

67
export interface SideBarProps {
78
availableSizeProperties: SizeKey[];
89
sizeProperty: SizeKey;
910
setSizeProperty: (key: SizeKey) => void;
1011
onExcludeChange: (value: string) => void;
1112
onIncludeChange: (value: string) => void;
13+
defaultFilterValue?: string;
14+
onFilterModelChange: (value: FilterModel) => void
1215
}
1316

1417
const PLACEHOLDER = "*/**/file.js";
@@ -19,6 +22,8 @@ export const SideBar: FunctionalComponent<SideBarProps> = ({
1922
setSizeProperty,
2023
onExcludeChange,
2124
onIncludeChange,
25+
defaultFilterValue = 'glob',
26+
onFilterModelChange
2227
}) => {
2328
const [includeValue, setIncludeValue] = useState("");
2429
const [excludeValue, setExcludeValue] = useState("");
@@ -41,6 +46,11 @@ export const SideBar: FunctionalComponent<SideBarProps> = ({
4146
onExcludeChange(value);
4247
};
4348

49+
const handleSelectFilterChange = (event: JSX.TargetedEvent<HTMLSelectElement, Event>) => {
50+
const value = event.currentTarget.value;
51+
onFilterModelChange(value as FilterModel)
52+
}
53+
4454
return (
4555
<aside className="sidebar">
4656
<div className="size-selectors">
@@ -81,6 +91,13 @@ export const SideBar: FunctionalComponent<SideBarProps> = ({
8191
placeholder={PLACEHOLDER}
8292
/>
8393
</div>
94+
<div>
95+
<label style={{ width: '80px' }} htmlFor="module-filter-include">filterModel</label>
96+
<select id="patternType" defaultValue={defaultFilterValue} onChange={handleSelectFilterChange}>
97+
<option value="glob">glob model</option>
98+
<option value="regexp">regexp model</option>
99+
</select>
100+
</div>
84101
</div>
85102
</aside>
86103
);

‎src/sunburst/main.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const Main: FunctionalComponent = () => {
2020
HierarchyRectangularNode<ModuleTree | ModuleTreeLeaf> | undefined
2121
>(undefined);
2222

23-
const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter } = useFilter();
23+
const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter, setFilterModel } = useFilter();
2424

2525
const getNodeSizeMultiplier = useMemo(() => {
2626
if (selectedNode === undefined) {
@@ -81,6 +81,7 @@ export const Main: FunctionalComponent = () => {
8181
setSizeProperty={setSizeProperty}
8282
onExcludeChange={setExcludeFilter}
8383
onIncludeChange={setIncludeFilter}
84+
onFilterModelChange={setFilterModel}
8485
/>
8586
<Chart
8687
root={root}

‎src/treemap/main.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const Main: FunctionalComponent = () => {
1919
HierarchyRectangularNode<ModuleTree | ModuleTreeLeaf> | undefined
2020
>(undefined);
2121

22-
const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter } = useFilter();
22+
const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter, setFilterModel } = useFilter();
2323

2424
console.time("getNodeSizeMultiplier");
2525
const getNodeSizeMultiplier = useMemo(() => {
@@ -88,6 +88,7 @@ export const Main: FunctionalComponent = () => {
8888
setSizeProperty={setSizeProperty}
8989
onExcludeChange={setExcludeFilter}
9090
onIncludeChange={setIncludeFilter}
91+
onFilterModelChange={setFilterModel}
9192
/>
9293
<Chart
9394
root={root}

‎src/use-filter.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useMemo, useCallback } from "preact/hooks";
2-
import { createFilter } from "../shared/create-filter";
2+
import { createFilter, FilterModel } from "../shared/create-filter";
33

44
export type FilterSetter = (value: string) => void;
55

@@ -22,6 +22,8 @@ export type UseFilter = {
2222
setIncludeFilter: FilterSetter;
2323
setExcludeFilter: FilterSetter;
2424
getModuleFilterMultiplier: (bundleId: string, data: { id: string }) => number;
25+
filterModel: string
26+
setFilterModel: (value: FilterModel) => void
2527
};
2628

2729
export const prepareFilter = (filt: string) => {
@@ -61,15 +63,17 @@ export const prepareFilter = (filt: string) => {
6163
);
6264
};
6365

66+
6467
export const useFilter = (): UseFilter => {
6568
const [includeFilter, setIncludeFilter] = useState<string>("");
6669
const [excludeFilter, setExcludeFilter] = useState<string>("");
70+
const [filterModel, setFilterModel] = useState<'glob' | 'regexp'>('glob')
6771

6872
const setIncludeFilterTrottled = useMemo(() => throttleFilter(setIncludeFilter, 200), []);
6973
const setExcludeFilterTrottled = useMemo(() => throttleFilter(setExcludeFilter, 200), []);
7074

7175
const isIncluded = useMemo(
72-
() => createFilter(prepareFilter(includeFilter), prepareFilter(excludeFilter)),
76+
() => createFilter(prepareFilter(includeFilter), prepareFilter(excludeFilter), filterModel),
7377
[includeFilter, excludeFilter],
7478
);
7579

@@ -86,5 +90,7 @@ export const useFilter = (): UseFilter => {
8690
excludeFilter,
8791
setExcludeFilter: setExcludeFilterTrottled,
8892
setIncludeFilter: setIncludeFilterTrottled,
93+
filterModel,
94+
setFilterModel
8995
};
9096
};

0 commit comments

Comments
 (0)