vite-plugin-material-symbols 0.7.0 → 0.7.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Version 0
 
+### v0.7.1
+
+- Added the following configuration options for flexibility:
+  - `moduleIdRegex` — the regex to match module IDs that should be processed for finding icon names;
+  - `jsxNodeRegex` — The regex to match JSX nodes that should be processed in parsed AST;
+- The option `component` now also can be a regex to match multiple component names.
+
 ### v0.7.0
 
 - Supporting Vite 8;

package/README.md

@@ -98,9 +98,17 @@ The plugin substitutes the `icon_names` URL parameter **ONLY** in `vite build` m
 The plugin accepts an object of the following options:
 
 ```yaml
+moduleIdRegex:
+  type: RegExp
+  description: The regex to match module IDs that should be processed for finding icon names
+  default: /\.([jt])sx?$/i # *.js, *.jsx, *.ts, *.tsx
+jsxNodeRegex:
+  type: RegExp
+  description: The regex to match JSX nodes that should be processed in parsed AST (e.g. "jsx", "_jsx" or "jsxs")
+  default: /jsx/
 component:
-  type: string
-  description: The name of JSX component to obtain the icon names from
+  type: string | RegExp
+  description: The name of JSX component to get the icon names from (or regex to match the component name)
   default: Icon
 getUrl:
   type: function

package/dist/index.d.ts

@@ -2,6 +2,16 @@ import { Plugin } from "vite";
 
 //#region src/index.d.ts
 type PluginOptions = {
+  /**
+   * The regex to match module IDs that should be processed for finding icon names
+   * @default /\.([jt])sx?$/i
+   * */
+  moduleIdRegex: RegExp;
+  /**
+   * The regex to match JSX nodes that should be processed in parsed AST (e.g. "jsx", "_jsx" or "jsxs")
+   * @default /jsx/
+   * */
+  jsxNodeRegex: RegExp;
   /**
    * Material Symbols CSS Provider. Default: outlined, no infill, 24px, weight 400
    * @see https://fonts.google.com/icons?icon.set=Material+Symbols
@@ -9,10 +19,10 @@ type PluginOptions = {
    * */
   getUrl: (iconNamesParam: string) => string;
   /**
-   * The name of JSX component to obtain the icon names from
+   * The name of JSX component to get the icon names from (or regex to match the component name)
    * @default Icon
    * */
-  component: string;
+  component: string | RegExp;
   /**
    * Enables higher priority for loading symbols
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
@@ -22,6 +32,8 @@ type PluginOptions = {
   preload: boolean;
 };
 declare const plugin: ({
+  moduleIdRegex,
+  jsxNodeRegex,
   component,
   getUrl,
   preload

package/dist/index.js

@@ -1 +1 @@
-import e from"esquery";const t=e=>e.type===`Literal`&&`value`in e&&typeof e.value==`string`,n=e=>`https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&${e}`,r=e=>[`CallExpression[callee.name=/jsx/][arguments.0.name='${e}']`,`.arguments`,`Property[key.name='children'] Literal`].join(` > `),i=e=>{if(!e.size)return``;let t=[];for(let n of e.values())t.push(n);return`icon_names=${t.toSorted().join(`,`)}`},a=({component:a=`Icon`,getUrl:o=n,preload:s=!1}={})=>{let c=new Set;return{name:`material-symbols`,enforce:`pre`,moduleParsed:function({id:n,code:i}){if(!i||!/.([jt])sx?$/i.test(n))return;let o=this.parse(i),s=r(a),l=e.query(o,s).filter(t);for(let{value:e}of l)this.debug({id:n,message:e}),c.add(e)},transformIndexHtml:e=>{let t=o(i(c)),n=[{injectTo:`head`,tag:`link`,attrs:{rel:`stylesheet`,href:t}}];return s&&n.push({injectTo:`head-prepend`,tag:`link`,attrs:{rel:`preload`,as:`style`,href:t}},{injectTo:`head-prepend`,tag:`link`,attrs:{rel:`preconnect`,href:`https://fonts.gstatic.com`}}),{html:e,tags:n}}}};export{a as default};
+import e from"esquery";const t=e=>e.type===`Literal`&&`value`in e&&typeof e.value==`string`,n=e=>`https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&${e}`,r=(e,t)=>[`CallExpression[callee.name=${`/${e.source}/${e.flags}`}][arguments.0.name=${typeof t==`string`?`'${t}'`:`/${t.source}/${t.flags}`}]`,`.arguments`,`Property[key.name='children'] Literal`].join(` > `),i=e=>{if(!e.size)return``;let t=[];for(let n of e.values())t.push(n);return`icon_names=${t.toSorted().join(`,`)}`},a=({moduleIdRegex:a=/.([jt])sx?$/i,jsxNodeRegex:o=/jsx/,component:s=`Icon`,getUrl:c=n,preload:l=!1}={})=>{let u=new Set;return{name:`material-symbols`,enforce:`pre`,moduleParsed:function({id:n,code:i}){if(!i||!a.test(n))return;let c=this.parse(i),l=r(o,s),d=e.query(c,l).filter(t);for(let{value:e}of d)this.debug({id:n,message:e}),u.add(e)},transformIndexHtml:e=>{let t=c(i(u)),n=[{injectTo:`head`,tag:`link`,attrs:{rel:`stylesheet`,href:t}}];return l&&n.push({injectTo:`head-prepend`,tag:`link`,attrs:{rel:`preload`,as:`style`,href:t}},{injectTo:`head-prepend`,tag:`link`,attrs:{rel:`preconnect`,href:`https://fonts.gstatic.com`}}),{html:e,tags:n}}}};export{a as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-material-symbols",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Selective loading of Material Symbols for production",
   "main": "dist/index.js",
   "repository": {
@@ -13,7 +13,7 @@
   "scripts": {
     "lint": "bun run biome check",
     "prebuild": "tsc --noEmit",
-    "build": "tsdown",
+    "build": "bunx --bun tsdown",
     "mdfix": "bunx --bun prettier *.md --write",
     "version": "bun run tools/version.ts",
     "prepublishOnly": "bun lint && bun test && bun run build"