Skip to content

Commit

Permalink
Update the plugin code with comments. Also no longer need to check fo…
Browse files Browse the repository at this point in the history
…r icon names in className
  • Loading branch information
Omkar76 committed Mar 17, 2024
1 parent ec0da60 commit 0bcc32b
Showing 1 changed file with 24 additions and 10 deletions.
34 changes: 24 additions & 10 deletions vite.config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,26 @@ import * as fs from "fs";
import * as path from "path";
import * as glob from "glob";

/**
* Interface defining options for the treeShakeUniconPathsPlugin.
*
* @interface TreeShakeUniconPathsPluginOptions
* @property {string[]} iconWhitelist - An array of icon names to always include, even if not found in code.
*/
interface TreeShakeUniconPathsPluginOptions {
iconWhitelist: string[];
}

/**
* Creates a Webpack plugin that tree-shakes unused Unicon paths from UniconPaths.json in production builds.
*
* @param {TreeShakeUniconPathsPluginOptions} [options] - Optional configuration options. Defaults to an empty iconWhitelist.
* @returns {Plugin} Webpack plugin object.
*/
export function treeShakeUniconPathsPlugin(
options: TreeShakeUniconPathsPluginOptions = { iconWhitelist: [] }
): Plugin {
const rootDir = __dirname; // update this if moving this code to a different file
const careLineClassRegex = /\bcare-l-[a-z]+(?:-[a-z]+)*\b/g;
const lineIconNameRegex = /"l-[a-z]+(?:-[a-z]+)*"/g;
const allUniconPaths = JSON.parse(
fs.readFileSync(
Expand All @@ -22,22 +33,20 @@ export function treeShakeUniconPathsPlugin(
)
);

// Extracts icon names from a given file's content.
// Returns an array of icon names like ["l-eye", "l-sync", "l-hearbeat"]
function extractCareIconNames(file: string): string[] {
const fileContent = fs.readFileSync(file, "utf8");
const careLineClassNamesMatches =
fileContent.match(careLineClassRegex) || [];

const lineIconNameMatches = fileContent.match(lineIconNameRegex) || [];
const careIconNames = careLineClassNamesMatches.map(
(careLineClassName) => careLineClassName.slice(5) // remove "care-" prefix
);

const lineIconNames = lineIconNameMatches.map(
(lineIconName) => lineIconName.slice(1, -1) // remove quotes
);

return [...careIconNames, ...lineIconNames];
return lineIconNames;
}

// Finds all used icon names within the project's source files (`.tsx` or `.res` extensions).
function getAllUsedIconNames() {
const files = glob.sync(path.resolve(rootDir, "src/**/*.{tsx,res}"));
const usedIconsArray: string[] = [];
Expand All @@ -49,7 +58,7 @@ export function treeShakeUniconPathsPlugin(

return new Set(usedIconsArray);
}

// Generates a map of used icon names to their paths from UniconPaths.json, including any whitelisted icons.
function getTreeShakenUniconPaths() {
const usedIcons = [...getAllUsedIconNames(), ...options.iconWhitelist];
const treeshakenUniconPaths = {};
Expand All @@ -72,8 +81,13 @@ export function treeShakeUniconPathsPlugin(
if (process.env.NODE_ENV !== "production") {
return;
}

// Replace the UniconPaths with the tree-shaken version
if (id.endsWith("UniconPaths.json")) {
return `export default ${JSON.stringify(getTreeShakenUniconPaths())}`;
return {
code: `export default ${JSON.stringify(getTreeShakenUniconPaths())}`,
map: null,
};
}
},
};
Expand Down

0 comments on commit 0bcc32b

Please sign in to comment.