feat: support switch filter model

Author: furina-lu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-visualizer",
-  "version": "5.14.0",
+  "version": "5.15.0",
   "main": "./dist/plugin/index.js",
   "author": "Denis Bardadym <[email protected]>",
   "license": "MIT",

plugin/index.ts

@@ -113,6 +113,11 @@ export interface PluginVisualizerOptions {
    * default. Otherwise, an ID must match one or more of the picomatch patterns, and must not match any of the options.exclude patterns.
    */
   exclude?: Filter | Filter[];
+
+  /**
+   * filterModel: 'glob' | 'regexp'
+   */
+  filterModel?: 'glob' | 'regexp'
 }
 
 const defaultSizeGetter: SizeGetter = () => Promise.resolve(0);
@@ -152,7 +157,7 @@ export const visualizer = (
       const template = opts.template ?? "treemap";
       const projectRoot = opts.projectRoot ?? process.cwd();
 
-      const filter = createFilter(opts.include, opts.exclude);
+      const filter = createFilter(opts.include, opts.exclude, opts.filterModel || 'glob');
 
       const gzipSize = !!opts.gzipSize && !opts.sourcemap;
       const brotliSize = !!opts.brotliSize && !opts.sourcemap;

shared/create-filter.test.ts

@@ -1,10 +1,10 @@
 import { describe, it, expect } from "vitest";
-import { createFilter } from "./create-filter";
+import { createFilter as _createFilter, Filter } from "./create-filter";
 
 describe("createFilter", () => {
+  const createFilter = (include: Filter | Filter[] | undefined, exclude: Filter | Filter[] | undefined) => _createFilter(include, exclude, 'glob')
   it("should return true when input and output is empty", () => {
     const isIncluded = createFilter([], []);
-
     expect(isIncluded("bundle", "file")).toBe(true);
   });
 
@@ -92,7 +92,7 @@ describe("createFilter", () => {
     ])(
       "%# should exclude included %j %j bundle %j file %j - %j",
       (include, exclude, bundle, file, result) => {
-        const isIncluded = createFilter(include, exclude);
+        const isIncluded = createFilter(include, exclude,);
         expect(isIncluded(bundle, file)).toBe(result);
       }
     );

shared/create-filter.ts

@@ -5,6 +5,8 @@ export type Filter = {
   file?: string | null | undefined;
 };
 
+export type FilterModel = 'glob' | 'regexp'
+
 function isArray(arg: unknown): arg is any[] | readonly any[] {
   return Array.isArray(arg);
 }
@@ -39,20 +41,23 @@ const testTrue: Testable = {
   test: () => true,
 };
 
-const getMatcher = (filter: Filter) => {
+const getMatcher = (filter: Filter, filterModel: FilterModel) => {
+  const filterMethods = (str: string) => filterModel === 'glob' ? globToTest(str) : new RegExp(str)
+
   const bundleTest =
-    "bundle" in filter && filter.bundle != null ? globToTest(filter.bundle) : testTrue;
-  const fileTest = "file" in filter && filter.file != null ? globToTest(filter.file) : testTrue;
+    "bundle" in filter && filter.bundle != null ? filterMethods(filter.bundle) : testTrue;
+  const fileTest = "file" in filter && filter.file != null ? filterMethods(filter.file) : testTrue;
 
   return { bundleTest, fileTest };
 };
 
 export const createFilter = (
   include: Filter | Filter[] | undefined,
-  exclude: Filter | Filter[] | undefined
+  exclude: Filter | Filter[] | undefined,
+  filterModel: FilterModel
 ) => {
-  const includeMatchers = ensureArray(include).map(getMatcher);
-  const excludeMatchers = ensureArray(exclude).map(getMatcher);
+  const includeMatchers = ensureArray(include).map(item => getMatcher(item, filterModel));
+  const excludeMatchers = ensureArray(exclude).map(item => getMatcher(item, filterModel));
 
   return (bundleId: string, id: string) => {
     for (let i = 0; i < excludeMatchers.length; ++i) {

src/flamegraph/main.tsx

@@ -19,7 +19,7 @@ export const Main: FunctionalComponent = () => {
     HierarchyRectangularNode<ModuleTree | ModuleTreeLeaf> | undefined
   >(undefined);
 
-  const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter } = useFilter();
+  const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter,  setFilterModel } = useFilter();
 
   console.time("getNodeSizeMultiplier");
   const getNodeSizeMultiplier = useMemo(() => {
@@ -87,6 +87,7 @@ export const Main: FunctionalComponent = () => {
         setSizeProperty={setSizeProperty}
         onExcludeChange={setExcludeFilter}
         onIncludeChange={setIncludeFilter}
+        onFilterModelChange={setFilterModel}
       />
       <Chart
         root={root}

src/network/main.tsx

@@ -31,7 +31,7 @@ export const Main: FunctionalComponent = () => {
   const [excludedNodes, setExcludedNodes] = useState<ModuleUID[]>([]);
   const [selectedNode, setSelectedNode] = useState<string>();
 
-  const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter } = useFilter();
+  const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter, setFilterModel } = useFilter();
 
   const getColor = (node: NodeInfo) => {
     if (selectedNode != null) {
@@ -139,6 +139,7 @@ export const Main: FunctionalComponent = () => {
         setSizeProperty={() => {}}
         onExcludeChange={setExcludeFilter}
         onIncludeChange={setIncludeFilter}
+        onFilterModelChange={setFilterModel}
       />
       <Chart
         nodes={animatedNodes}

src/sidebar.tsx

@@ -2,13 +2,16 @@ import { FunctionalComponent, JSX } from "preact";
 import { useState } from "preact/hooks";
 import { SizeKey } from "../shared/types";
 import { LABELS } from "./sizes";
+import { FilterModel } from "../shared/create-filter";
 
 export interface SideBarProps {
   availableSizeProperties: SizeKey[];
   sizeProperty: SizeKey;
   setSizeProperty: (key: SizeKey) => void;
   onExcludeChange: (value: string) => void;
   onIncludeChange: (value: string) => void;
+  defaultFilterValue?: string;
+  onFilterModelChange: (value: FilterModel) => void
 }
 
 const PLACEHOLDER = "*/**/file.js";
@@ -19,6 +22,8 @@ export const SideBar: FunctionalComponent<SideBarProps> = ({
   setSizeProperty,
   onExcludeChange,
   onIncludeChange,
+  defaultFilterValue = 'glob',
+  onFilterModelChange
 }) => {
   const [includeValue, setIncludeValue] = useState("");
   const [excludeValue, setExcludeValue] = useState("");
@@ -41,6 +46,11 @@ export const SideBar: FunctionalComponent<SideBarProps> = ({
     onExcludeChange(value);
   };
 
+  const handleSelectFilterChange =  (event: JSX.TargetedEvent<HTMLSelectElement, Event>) => {
+    const value = event.currentTarget.value;
+    onFilterModelChange(value as FilterModel)
+  }
+
   return (
     <aside className="sidebar">
       <div className="size-selectors">
@@ -81,6 +91,13 @@ export const SideBar: FunctionalComponent<SideBarProps> = ({
             placeholder={PLACEHOLDER}
           />
         </div>
+        <div>
+          <label style={{ width: '80px' }} htmlFor="module-filter-include">filterModel</label>
+          <select id="patternType" defaultValue={defaultFilterValue} onChange={handleSelectFilterChange}>
+            <option value="glob">glob model</option>
+            <option value="regexp">regexp model</option>
+          </select>
+        </div>
       </div>
     </aside>
   );

src/sunburst/main.tsx

@@ -20,7 +20,7 @@ export const Main: FunctionalComponent = () => {
     HierarchyRectangularNode<ModuleTree | ModuleTreeLeaf> | undefined
   >(undefined);
 
-  const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter } = useFilter();
+  const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter, setFilterModel } = useFilter();
 
   const getNodeSizeMultiplier = useMemo(() => {
     if (selectedNode === undefined) {
@@ -81,6 +81,7 @@ export const Main: FunctionalComponent = () => {
         setSizeProperty={setSizeProperty}
         onExcludeChange={setExcludeFilter}
         onIncludeChange={setIncludeFilter}
+        onFilterModelChange={setFilterModel}
       />
       <Chart
         root={root}

src/treemap/main.tsx

@@ -19,7 +19,7 @@ export const Main: FunctionalComponent = () => {
     HierarchyRectangularNode<ModuleTree | ModuleTreeLeaf> | undefined
   >(undefined);
 
-  const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter } = useFilter();
+  const { getModuleFilterMultiplier, setExcludeFilter, setIncludeFilter, setFilterModel } = useFilter();
 
   console.time("getNodeSizeMultiplier");
   const getNodeSizeMultiplier = useMemo(() => {
@@ -88,6 +88,7 @@ export const Main: FunctionalComponent = () => {
         setSizeProperty={setSizeProperty}
         onExcludeChange={setExcludeFilter}
         onIncludeChange={setIncludeFilter}
+        onFilterModelChange={setFilterModel}
       />
       <Chart
         root={root}

src/use-filter.ts

@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback } from "preact/hooks";
-import { createFilter } from "../shared/create-filter";
+import { createFilter, FilterModel } from "../shared/create-filter";
 
 export type FilterSetter = (value: string) => void;
 
@@ -22,6 +22,8 @@ export type UseFilter = {
   setIncludeFilter: FilterSetter;
   setExcludeFilter: FilterSetter;
   getModuleFilterMultiplier: (bundleId: string, data: { id: string }) => number;
+  filterModel: string
+  setFilterModel: (value: FilterModel) => void
 };
 
 export const prepareFilter = (filt: string) => {
@@ -61,15 +63,17 @@ export const prepareFilter = (filt: string) => {
   );
 };
 
+
 export const useFilter = (): UseFilter => {
   const [includeFilter, setIncludeFilter] = useState<string>("");
   const [excludeFilter, setExcludeFilter] = useState<string>("");
+  const [filterModel, setFilterModel] = useState<'glob' | 'regexp'>('glob') 
 
   const setIncludeFilterTrottled = useMemo(() => throttleFilter(setIncludeFilter, 200), []);
   const setExcludeFilterTrottled = useMemo(() => throttleFilter(setExcludeFilter, 200), []);
 
   const isIncluded = useMemo(
-    () => createFilter(prepareFilter(includeFilter), prepareFilter(excludeFilter)),
+    () => createFilter(prepareFilter(includeFilter), prepareFilter(excludeFilter), filterModel),
     [includeFilter, excludeFilter],
   );
 
@@ -86,5 +90,7 @@ export const useFilter = (): UseFilter => {
     excludeFilter,
     setExcludeFilter: setExcludeFilterTrottled,
     setIncludeFilter: setIncludeFilterTrottled,
+    filterModel, 
+    setFilterModel
   };
 };