vite-plugin-material-symbols 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## Version 0
 
+### v0.8.0
+
+- Replaced `getUrl` option with two new ones:
+  - `fontUrl` (string): Material Symbols CSS Provider;
+  - `paramName` (string): The name of the query parameter to add to the `fontUrl` (default: "icon_names");
+  - The plugin will automatically add the query parameter with the icon names list to the font URL.
+
+### 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,17 +98,27 @@ 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
+fontUrl:
+  type: string
   description: Material Symbols CSS Provider
-  arguments: [string] # icon_names parameter
-  exampleArguments: ["icon_names=chevron_right,comment,home"] # can be empty string
-  returns: string # the URL
-  default: (iconNamesParam) => `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&${iconNamesParam}`
+  # Standard settings: Outlined, no infill, 24px, weight 400
+  default: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0
+paramName:
+  type: string
+  description: The name of the query parameter to add to the fontUrl
+  default: icon_names
 preload:
   type: boolean
   description: Enables higher priority for loading symbols

package/dist/index.d.ts

@@ -2,17 +2,32 @@ 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
-   * @default () => `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined...&${iconNamesParam}`
+   * @default "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
+   * */
+  fontUrl: string;
+  /**
+   * The name of the query parameter to add to the fontUrl
+   * @default "icon_names"
    * */
-  getUrl: (iconNamesParam: string) => string;
+  paramName: string;
   /**
-   * The name of JSX component to obtain the icon names from
-   * @default Icon
+   * 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,8 +37,11 @@ type PluginOptions = {
   preload: boolean;
 };
 declare const plugin: ({
+  moduleIdRegex,
+  jsxNodeRegex,
   component,
-  getUrl,
+  fontUrl,
+  paramName,
   preload
 }?: Partial<PluginOptions>) => Plugin;
 //#endregion

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,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(` > `),r=(e,t,n)=>{let r=new URL(e);if(n.size){let e=[];for(let t of n.values())e.push(t);r.searchParams.append(t,e.toSorted().join(`,`))}return decodeURIComponent(r.toString())},i=({moduleIdRegex:i=/.([jt])sx?$/i,jsxNodeRegex:a=/jsx/,component:o=`Icon`,fontUrl:s=`https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0`,paramName:c=`icon_names`,preload:l=!1}={})=>{let u=new Set;return{name:`material-symbols`,enforce:`pre`,moduleParsed:function({id:r,code:s}){if(!s||!i.test(r))return;let c=this.parse(s),l=n(a,o),d=e.query(c,l).filter(t);for(let{value:e}of d)this.debug({id:r,message:e}),u.add(e)},transformIndexHtml:e=>{let t=r(s,c,u).toString(),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{i as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-material-symbols",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "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"