@fluentui/react-icons-atomic-webpack-loader 2.0.324-alpha.1

package/README.md

@@ -0,0 +1,104 @@
+# @fluentui/react-icons-atomic-webpack-loader
+
+> **⚠️ Alpha** — this package is available as an alpha prerelease only.
+> ⚠️ The API may change before the first stable release.
+
+> Install via `npm install @fluentui/react-icons-atomic-webpack-loader@alpha --save-dev`
+
+Webpack loader that transforms barrel imports and re-exports from `@fluentui/react-icons` into atomic deep paths for better tree-shaking and smaller bundles.
+
+## Before / After
+
+```js
+// Before — barrel import pulls in the entire icon set
+import { AddFilled, bundleIcon, useIconContext } from '@fluentui/react-icons';
+export { ArrowLeftRegular } from '@fluentui/react-icons';
+
+// After — each reference resolves to a small, isolated module
+import { AddFilled } from '@fluentui/react-icons/svg/add';
+import { bundleIcon } from '@fluentui/react-icons/utils';
+import { useIconContext } from '@fluentui/react-icons/providers';
+export { ArrowLeftRegular } from '@fluentui/react-icons/svg/arrow-left';
+```
+
+## Usage
+
+Add the loader to your webpack config as an [`enforce: 'pre'`](https://webpack.js.org/configuration/module/#ruleenforce) rule so it runs on the original source before any other loaders:
+
+NOTE: Unlike most loaders, this one should NOT exclude `node_modules`. It needs to process files inside `node_modules` as well to transform barrel imports from `@fluentui/react-icons` in your third-party dependencies. Files that don't reference `@fluentui/react-icons` are skipped via a fast regex pre-check, so there is no meaningful overhead.
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.[mc]?[jt]sx?$/,
+        enforce: 'pre',
+        use: ['@fluentui/react-icons-atomic-webpack-loader'],
+      },
+      // … your other rules (babel-loader, ts-loader, etc.)
+    ],
+  },
+};
+```
+
+If your existing rules exclude `node_modules`, add a separate rule to cover dependencies:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.[mc]?[jt]sx?$/,
+        include: /[\\/]node_modules[\\/]/,
+        enforce: 'pre',
+        use: ['@fluentui/react-icons-atomic-webpack-loader'],
+      },
+      // … your other rules (babel-loader, ts-loader, etc.)
+    ],
+  },
+};
+```
+
+## Options
+
+| Option        | Type                 | Default | Description                                           |
+| ------------- | -------------------- | ------- | ----------------------------------------------------- |
+| `iconVariant` | `'svg'` \| `'fonts'` | `'svg'` | Whether icons resolve to SVG or font-based components |
+
+### Using font icons
+
+```js
+{
+  test: /\.[mc]?[jt]sx?$/,
+  enforce: 'pre',
+  use: [
+    {
+      loader: '@fluentui/react-icons-atomic-webpack-loader',
+      options: {
+        iconVariant: 'fonts',
+      },
+    },
+  ],
+}
+```
+
+This changes icon resolution from `@fluentui/react-icons/svg/*` to `@fluentui/react-icons/fonts/*`. Non-icon exports (`utils`, `providers`) are unaffected.
+
+## How it works
+
+The loader uses a Babel transform to rewrite import and re-export declarations that reference `@fluentui/react-icons`. Each named specifier is routed to an atomic subpath based on its name:
+
+| Export type    | Example                                          | Resolved path                                     |
+| -------------- | ------------------------------------------------ | ------------------------------------------------- |
+| Icon component | `AddFilled`, `ArrowLeftRegular`                  | `@fluentui/react-icons/svg/add` (or `/fonts/add`) |
+| Context / hook | `useIconContext`, `IconDirectionContextProvider` | `@fluentui/react-icons/providers`                 |
+| Utility        | `bundleIcon`, `createFluentIcon`                 | `@fluentui/react-icons/utils`                     |
+
+Files that don't reference `@fluentui/react-icons` are passed through untouched (fast regex pre-check).
+
+## Requirements
+
+- `webpack` >= 5
+- `@fluentui/react-icons` >= 2 (with atomic subpath exports)

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+import type { LoaderContext } from 'webpack';
+export interface FluentIconsAtomicImportLoaderOptions {
+    iconVariant?: 'svg' | 'fonts';
+}
+export default function fluentIconsAtomicImportLoader(this: LoaderContext<FluentIconsAtomicImportLoaderOptions>, sourceCode: string): void;

package/lib/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const transform_1 = require("./transform");
+const REACT_ICONS_IMPORT_REGEX = /['"]@fluentui\/react-icons['";\s]/;
+function fluentIconsAtomicImportLoader(sourceCode) {
+    if (!REACT_ICONS_IMPORT_REGEX.test(sourceCode)) {
+        this.callback(null, sourceCode);
+        return;
+    }
+    const options = this.getOptions();
+    const iconVariant = options.iconVariant ?? 'svg';
+    const isTsx = this.resourcePath.endsWith('.tsx');
+    const isTypescript = /\.[mc]?tsx?$/.test(this.resourcePath);
+    try {
+        const { code, map } = (0, transform_1.transformSource)(sourceCode, { iconVariant, isTypescript, isTsx });
+        this.callback(null, code, map);
+    }
+    catch {
+        this.emitWarning(new Error(`FluentIconsAtomicImportLoader: Failed to transform "${this.resourcePath}"`));
+        this.callback(null, sourceCode);
+    }
+}
+exports.default = fluentIconsAtomicImportLoader;

package/lib/transform.d.ts

@@ -0,0 +1,12 @@
+import MagicString from 'magic-string';
+interface TransformOptions {
+    iconVariant: 'svg' | 'fonts';
+    isTypescript: boolean;
+    isTsx: boolean;
+}
+export interface TransformResult {
+    code: string;
+    map: ReturnType<MagicString['generateMap']>;
+}
+export declare function transformSource(source: string, options: TransformOptions): TransformResult;
+export {};

package/lib/transform.js

@@ -0,0 +1,117 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformSource = void 0;
+const acorn = __importStar(require("acorn"));
+const acorn_typescript_1 = __importDefault(require("acorn-typescript"));
+const magic_string_1 = __importDefault(require("magic-string"));
+const MODULE_NAME = '@fluentui/react-icons';
+const ICON_SUFFIX_REGEX = /(\d*)?(Regular|Filled|Light|Color)$/;
+function getAtomicImportPath(importName, iconVariant) {
+    if (importName === 'useIconContext' || importName === 'IconDirectionContextProvider') {
+        return '@fluentui/react-icons/providers';
+    }
+    const isIcon = importName.match(ICON_SUFFIX_REGEX);
+    if (!isIcon) {
+        return '@fluentui/react-icons/utils';
+    }
+    const withoutSuffix = importName.replace(ICON_SUFFIX_REGEX, '');
+    const kebabCase = withoutSuffix.replace(/[a-z\d](?=[A-Z])|[a-zA-Z](?=\d)|[A-Z](?=[A-Z][a-z])/g, '$&-').toLowerCase();
+    return `@fluentui/react-icons/${iconVariant}/${kebabCase}`;
+}
+function getName(node) {
+    return (node.name ?? String(node.value));
+}
+function getParser(options) {
+    if (!options.isTypescript) {
+        return acorn.Parser;
+    }
+    const plugin = (0, acorn_typescript_1.default)(options.isTsx ? { jsx: {} } : undefined);
+    return acorn.Parser.extend(plugin);
+}
+function transformSource(source, options) {
+    const parser = getParser(options);
+    const ast = parser.parse(source, {
+        sourceType: 'module',
+        ecmaVersion: 'latest',
+        locations: false,
+    });
+    const src = new magic_string_1.default(source);
+    for (const node of ast.body) {
+        if (node.type === 'ImportDeclaration') {
+            const n = node;
+            if (n.source.value !== MODULE_NAME) {
+                continue;
+            }
+            const memberImports = n.specifiers.filter((s) => s.type === 'ImportSpecifier');
+            if (memberImports.length === 0) {
+                continue;
+            }
+            const fullImports = n.specifiers.filter((s) => s.type !== 'ImportSpecifier');
+            const lines = [];
+            if (fullImports.length > 0) {
+                const names = fullImports
+                    .map((s) => (s.type === 'ImportDefaultSpecifier' ? s.local.name : `* as ${s.local.name}`))
+                    .join(', ');
+                lines.push(`import ${names} from '${MODULE_NAME}';`);
+            }
+            for (const specifier of memberImports) {
+                const importedName = getName(specifier.imported);
+                const localName = specifier.local.name;
+                const newSource = getAtomicImportPath(importedName, options.iconVariant);
+                const spec = importedName === localName ? importedName : `${importedName} as ${localName}`;
+                lines.push(`import { ${spec} } from '${newSource}';`);
+            }
+            src.overwrite(n.start, n.end, lines.join('\n'));
+        }
+        if (node.type === 'ExportNamedDeclaration') {
+            const n = node;
+            if (!n.source || n.source.value !== MODULE_NAME) {
+                continue;
+            }
+            const specifiers = n.specifiers.filter((s) => s.type === 'ExportSpecifier');
+            if (specifiers.length === 0) {
+                continue;
+            }
+            const lines = [];
+            for (const specifier of specifiers) {
+                const localName = getName(specifier.local);
+                const exportedName = getName(specifier.exported);
+                const newSource = getAtomicImportPath(localName, options.iconVariant);
+                const spec = localName === exportedName ? localName : `${localName} as ${exportedName}`;
+                lines.push(`export { ${spec} } from '${newSource}';`);
+            }
+            src.overwrite(n.start, n.end, lines.join('\n'));
+        }
+    }
+    return {
+        code: src.toString(),
+        map: src.generateMap({ hires: true }),
+    };
+}
+exports.transformSource = transformSource;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@fluentui/react-icons-atomic-webpack-loader",
+  "version": "2.0.324-alpha.1",
+  "description": "Webpack loader that transforms barrel imports and re-exports from @fluentui/react-icons into atomic deep paths",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "tsc -p .",
+    "test": "webpack -c test/webpack.config.js"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/microsoft/fluentui-system-icons.git",
+    "directory": "packages/react-icons-atomic-webpack-loader"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/microsoft/fluentui-system-icons/issues"
+  },
+  "dependencies": {
+    "acorn-typescript": "^1.4.13",
+    "magic-string": "^0.30.0"
+  },
+  "devDependencies": {
+    "typescript": "5.0.4",
+    "webpack": "^5.72.0",
+    "@types/node": "22"
+  },
+  "peerDependencies": {
+    "acorn": ">=8.9.0",
+    "webpack": ">=5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib/*"
+  ]
+}