feat: Icon builder to library

.circleci/comment.js

@@ -53,6 +53,7 @@ async function run() {
       [RAC Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-tailwind/index.html)
       [RAC Spectrum + Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-spectrum-tailwind/index.html)
       [S2 Parcel Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-parcel-example/index.html)
+      [S2 Custom Icons](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/icon-builder-fixture/index.html)
       [S2 Webpack Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-webpack-5-example/index.html)
       [CRA Test App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/build-stats.txt)
       [NextJS App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/next-build-stats.txt)

.circleci/config.yml

@@ -673,6 +673,11 @@ jobs:
           environment:
             VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
 
+      - persist_to_workspace:
+          root: verdaccio_dist
+          paths:
+            - '*/verdaccio/icon-builder-fixture'
+
   v-publish-stats:
     executor: rsp
     steps:

.parcelrc-build

@@ -16,7 +16,7 @@
       "@parcel/transformer-react-refresh-wrap"
     ]
   },
-  "namers": ["parcel-namer-s2", "parcel-namer-intl", "..."],
+  "namers": ["@react-spectrum/parcel-namer-s2", "parcel-namer-intl", "..."],
   "optimizers": {
     "**/spectrum-theme.cjs": ["parcel-optimizer-strict-mode"]
   }

eslint.config.mjs

@@ -52,6 +52,7 @@ export default [{
         "packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts",
         "examples/**/*",
         "starters/**/*",
+        "scripts/icon-builder-fixture/**/*",
         "packages/@react-spectrum/s2/icon.d.ts",
         "packages/@react-spectrum/s2/spectrum-illustrations"
     ],

package.json

@@ -100,6 +100,7 @@
     "@parcel/transformer-inline-string": "^2.14.0",
     "@parcel/transformer-svg-react": "^2.14.0",
     "@parcel/transformer-typescript-types": "^2.14.0",
+    "@react-spectrum/parcel-namer-s2": "^1.0.0",
     "@react-spectrum/s2-icon-builder": "^0.2.0",
     "@spectrum-css/component-builder": "workspace:^",
     "@spectrum-css/vars": "^2.3.0",
@@ -222,6 +223,9 @@
     "@babel/preset-env": "7.24.4",
     "@babel/traverse": "7.24.1",
     "@babel/types": "7.24.0",
+    "@parcel/transformer-react-refresh-wrap": "2.14.0",
+    "@parcel/transformer-js": "2.14.0",
+    "@parcel/codeframe": "2.14.0",
     "postcss": "8.4.24",
     "postcss-custom-properties": "13.2.0",
     "postcss-import": "15.1.0",

packages/dev/parcel-namer-s2/S2Namer.js

@@ -16,6 +16,28 @@ const path = require('path');
 module.exports = new Namer({
   name({bundle}) {
     let mainAsset = bundle.getMainEntry();
+
+    if (!mainAsset?.filePath.includes('react-spectrum/packages')) {
+      if (bundle.needsStableName && bundle.target.distEntry) {
+        return bundle.target.distEntry;
+      }
+      let ext = '.' + bundle.type;
+      if (bundle.type === 'js') {
+        ext = bundle.env.outputFormat === 'esmodule' ? '.mjs' : '.cjs';
+      }
+      let originalExt = path.extname(mainAsset.filePath);
+      let name = path.basename(mainAsset.filePath, originalExt).replace(/\*/g, 'intlStrings');
+
+      return name
+        .replace(/^S2_Icon_(.*?)(Size\d+)?_\d+(?:x\d+)?_N$/, '$1')
+        .replace(/^S2_(fill|lin)_(.+)_(generic\d)_(\d+)$/, (m, type, name, style) => {
+          name = name[0].toUpperCase() + name.slice(1).replace(/_/g, '');
+          return 'gradient/' + style + '/' + name;
+        })
+        .replace(/\.module$/, '_module')
+        + ext;
+    }
+
     if (mainAsset?.filePath.includes('@react-spectrum/s2')) {
       if (bundle.needsStableName && bundle.target.distEntry) {
         return bundle.target.distEntry;

packages/dev/parcel-namer-s2/package.json

@@ -1,8 +1,7 @@
 {
-  "name": "parcel-namer-s2",
+  "name": "@react-spectrum/parcel-namer-s2",
   "version": "1.0.0",
   "main": "S2Namer.js",
-  "private": true,
   "engines": {
     "parcel": "^2.0.0"
   },

packages/dev/s2-icon-builder/.parcelrc-library

@@ -0,0 +1,12 @@
+{
+  "extends": "@parcel/config-default",
+  "namers": ["@react-spectrum/parcel-namer-s2", "@parcel/namer-default"],
+  "bundler": "@parcel/bundler-library",
+  "transformers": {
+    "*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
+    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  }
+}

packages/dev/s2-icon-builder/index.js

@@ -1,7 +1,10 @@
 #!/usr/bin/env node
 
+let path = require('path');
 let {Parcel} = require('@parcel/core');
 let {parseArgs} = require('util');
+let globSync = require('glob').sync;
+let fs = require('fs');
 
 const args = parseArgs({
   options: {
@@ -17,11 +20,14 @@ const args = parseArgs({
     output: {
       type: 'string',
       short: 'o'
+    },
+    isLibrary: {
+      type: 'boolean'
     }
   }
 });
 
-let bundler = new Parcel({
+let options = {
   entries: args.values.input,
   config: require.resolve('@react-spectrum/s2-icon-builder/.parcelrc'),
   shouldDisableCache: true,
@@ -38,7 +44,42 @@ let bundler = new Parcel({
   engines: {
     browsers: ['last 1 Chrome version']
   }
-});
+};
+
+if (args.values.isLibrary) {
+  options = {
+    entries: args.values.input,
+    config: require.resolve('@react-spectrum/s2-icon-builder/.parcelrc-library'),
+    shouldDisableCache: true,
+    mode: 'production',
+    defaultTargetOptions: {
+      shouldScopeHoist: true,
+      shouldOptimize: false
+    },
+    targets: {
+      [`${args.values.type}-module`]: {
+        distDir: args.values.output,
+        isLibrary: true,
+        includeNodeModules: false,
+        outputFormat: 'esmodule',
+        engines: {
+          browsers: ['last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions, last 2 Edge versions']
+        }
+      },
+      [`${args.values.type}-main`]: {
+        distDir: args.values.output,
+        isLibrary: true,
+        includeNodeModules: false,
+        outputFormat: 'commonjs',
+        engines: {
+          browsers: ['last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions, last 2 Edge versions']
+        }
+      }
+    }
+  };
+}
+
+let bundler = new Parcel(options);
 
 async function run() {
   try {
@@ -50,4 +91,15 @@ async function run() {
   }
 }
 
-run();
+run().then(() => {
+  if (args.values.isLibrary) {
+    for (let file of globSync(`${path.join(args.values.output, '.')}/*.mjs`)) {
+      fs.writeFileSync(file.replace('.mjs', '.d.ts'), `import type {IconProps} from '@react-spectrum/s2';
+import type {ReactNode} from 'react';
+
+declare function Icon(props: IconProps): ReactNode;
+export default Icon;
+    `);
+    }
+  }
+});

packages/dev/s2-icon-builder/package.json

@@ -12,20 +12,33 @@
   "dependencies": {
     "@parcel/bundler-library": "^2.14.0",
     "@parcel/compressor-raw": "^2.14.0",
+    "@parcel/config-default": "^2.14.0",
     "@parcel/core": "^2.14.0",
     "@parcel/namer-default": "^2.14.0",
     "@parcel/packager-raw": "^2.14.0",
+    "@parcel/plugin": "^2.14.0",
     "@parcel/reporter-cli": "^2.14.0",
     "@parcel/resolver-default": "^2.14.0",
+    "@parcel/transformer-js": "^2.14.0",
     "@parcel/transformer-raw": "^2.14.0",
-    "@react-spectrum/parcel-transformer-s2-icon": "^0.2.1"
+    "@parcel/transformer-react-refresh-wrap": "^2.14.0",
+    "@react-spectrum/parcel-namer-s2": "^1.0.0",
+    "@react-spectrum/parcel-transformer-s2-icon": "^0.2.1",
+    "@swc/helpers": "^0.5.0",
+    "glob": "^8.0.3"
+  },
+  "peerDependencies": {
+    "@react-spectrum/s2": ">=0.8.0",
+    "react": "^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^18.0.0 || ^19.0.0-rc.1"
   },
   "files": [
     "index.js",
-    ".parcelrc"
+    ".parcelrc",
+    ".parcelrc-library"
   ],
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "rsp": {
     "type": "cli"

scripts/icon-builder-fixture/.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+package-lock.json