Skip to content

Commit 842a44d

Browse files
snowystingersnowystinger
authored
feat: Icon builder to library (#8203)
* icon library builder * save * cleanup * remove dep * fix some versions * add back private * fix yarn lock * fix lint * update deps * fix yarn constraints * add missing dep * fix lint yet again * fix executable * fix yarn lock * Add dependencies * bump down glob * add swc helpers * try again * remove non-dependency * move some more things around * Add swc/helpers to * remove ts as a dependency * make test more realistic to use case * fix sub yarn project * fix install * publish namer plugin * fix builder * add swc helpers * fix test * fix swc/helpers * remove namer? * write to root and see if removing exports field fixes duplicates * remove default as maybe duplicate causing * debug output * try updating the namer * generate ts files * fix timing of async function * add another icon * hopefully fix source maps for library * attempt to get rid of esmodule helper * remove console logs and dead code * Add real application to test icon builder * use correct path * Make sure app builds without icon * Add icon back in * we use bundler-library, so use it here too * try more configs to mimic our own setup * add browsers list * add mode production * fix hoisting * update dependencies * fix browsers list * remove dead code * fix version number * turn off verdaccio * review updates * Revert "turn off verdaccio" This reverts commit 605cfef. * Reapply "turn off verdaccio" This reverts commit 801d9d2. * fix logic * Revert "turn off verdaccio" This reverts commit 605cfef. * actually fix logic * Reapply "turn off verdaccio" This reverts commit ece0dc4.
1 parent db1b174 commit 842a44d

File tree

22 files changed

+1190
-21
lines changed

22 files changed

+1190
-21
lines changed

‎.circleci/comment.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ async function run() {
5353
[RAC Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-tailwind/index.html)
5454
[RAC Spectrum + Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-spectrum-tailwind/index.html)
5555
[S2 Parcel Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-parcel-example/index.html)
56+
[S2 Custom Icons](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/icon-builder-fixture/index.html)
5657
[S2 Webpack Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-webpack-5-example/index.html)
5758
[CRA Test App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/build-stats.txt)
5859
[NextJS App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/next-build-stats.txt)

‎.circleci/config.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -685,6 +685,11 @@ jobs:
685685
environment:
686686
VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
687687

688+
- persist_to_workspace:
689+
root: verdaccio_dist
690+
paths:
691+
- '*/verdaccio/icon-builder-fixture'
692+
688693
v-publish-stats:
689694
executor: rsp
690695
steps:

‎.parcelrc-build

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"@parcel/transformer-react-refresh-wrap"
1717
]
1818
},
19-
"namers": ["parcel-namer-s2", "parcel-namer-intl", "..."],
19+
"namers": ["@react-spectrum/parcel-namer-s2", "parcel-namer-intl", "..."],
2020
"optimizers": {
2121
"**/spectrum-theme.cjs": ["parcel-optimizer-strict-mode"]
2222
}

‎eslint.config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export default [{
5252
"packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts",
5353
"examples/**/*",
5454
"starters/**/*",
55+
"scripts/icon-builder-fixture/**/*",
5556
"packages/@react-spectrum/s2/icon.d.ts",
5657
"packages/@react-spectrum/s2/spectrum-illustrations"
5758
],

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
"@parcel/transformer-inline-string": "^2.14.0",
9999
"@parcel/transformer-svg-react": "^2.14.0",
100100
"@parcel/transformer-typescript-types": "^2.14.0",
101+
"@react-spectrum/parcel-namer-s2": "^1.0.0",
101102
"@react-spectrum/s2-icon-builder": "^0.2.0",
102103
"@spectrum-css/component-builder": "workspace:^",
103104
"@spectrum-css/vars": "^2.3.0",
@@ -221,6 +222,9 @@
221222
"@babel/preset-env": "7.24.4",
222223
"@babel/traverse": "7.24.1",
223224
"@babel/types": "7.24.0",
225+
"@parcel/transformer-react-refresh-wrap": "2.14.0",
226+
"@parcel/transformer-js": "2.14.0",
227+
"@parcel/codeframe": "2.14.0",
224228
"postcss": "8.4.24",
225229
"postcss-custom-properties": "13.2.0",
226230
"postcss-import": "15.1.0",

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ const path = require('path');
1616
module.exports = new Namer({
1717
name({bundle}) {
1818
let mainAsset = bundle.getMainEntry();
19-
if (mainAsset?.filePath.includes('@react-spectrum/s2')) {
19+
20+
if (mainAsset?.filePath.includes('@react-spectrum/s2') || !mainAsset?.filePath.includes('react-spectrum/packages')) {
2021
if (bundle.needsStableName && bundle.target.distEntry) {
2122
return bundle.target.distEntry;
2223
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
{
2-
"name": "parcel-namer-s2",
2+
"name": "@react-spectrum/parcel-namer-s2",
33
"version": "1.0.0",
44
"main": "S2Namer.js",
5-
"private": true,
65
"engines": {
76
"parcel": "^2.0.0"
87
},

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "@parcel/config-default",
3+
"namers": ["@react-spectrum/parcel-namer-s2", "@parcel/namer-default"],
4+
"bundler": "@parcel/bundler-library",
5+
"transformers": {
6+
"*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
7+
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
8+
"@parcel/transformer-js",
9+
"@parcel/transformer-react-refresh-wrap"
10+
]
11+
}
12+
}

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

Lines changed: 55 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
#!/usr/bin/env node
22

3+
let path = require('path');
34
let {Parcel} = require('@parcel/core');
45
let {parseArgs} = require('util');
6+
let globSync = require('glob').sync;
7+
let fs = require('fs');
58

69
const args = parseArgs({
710
options: {
@@ -17,11 +20,14 @@ const args = parseArgs({
1720
output: {
1821
type: 'string',
1922
short: 'o'
23+
},
24+
isLibrary: {
25+
type: 'boolean'
2026
}
2127
}
2228
});
2329

24-
let bundler = new Parcel({
30+
let options = {
2531
entries: args.values.input,
2632
config: require.resolve('@react-spectrum/s2-icon-builder/.parcelrc'),
2733
shouldDisableCache: true,
@@ -38,7 +44,42 @@ let bundler = new Parcel({
3844
engines: {
3945
browsers: ['last 1 Chrome version']
4046
}
41-
});
47+
};
48+
49+
if (args.values.isLibrary) {
50+
options = {
51+
entries: args.values.input,
52+
config: require.resolve('@react-spectrum/s2-icon-builder/.parcelrc-library'),
53+
shouldDisableCache: true,
54+
mode: 'production',
55+
defaultTargetOptions: {
56+
shouldScopeHoist: true,
57+
shouldOptimize: false
58+
},
59+
targets: {
60+
[`${args.values.type}-module`]: {
61+
distDir: args.values.output,
62+
isLibrary: true,
63+
includeNodeModules: false,
64+
outputFormat: 'esmodule',
65+
engines: {
66+
browsers: ['last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions, last 2 Edge versions']
67+
}
68+
},
69+
[`${args.values.type}-main`]: {
70+
distDir: args.values.output,
71+
isLibrary: true,
72+
includeNodeModules: false,
73+
outputFormat: 'commonjs',
74+
engines: {
75+
browsers: ['last 2 Chrome versions, last 2 Safari versions, last 2 Firefox versions, last 2 Edge versions']
76+
}
77+
}
78+
}
79+
};
80+
}
81+
82+
let bundler = new Parcel(options);
4283

4384
async function run() {
4485
try {
@@ -50,4 +91,15 @@ async function run() {
5091
}
5192
}
5293

53-
run();
94+
run().then(() => {
95+
if (args.values.isLibrary) {
96+
for (let file of globSync(`${path.join(args.values.output, '.')}/*.mjs`)) {
97+
fs.writeFileSync(file.replace('.mjs', '.d.ts'), `import type {IconProps} from '@react-spectrum/s2';
98+
import type {ReactNode} from 'react';
99+
100+
declare function Icon(props: IconProps): ReactNode;
101+
export default Icon;
102+
`);
103+
}
104+
}
105+
});

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,33 @@
1212
"dependencies": {
1313
"@parcel/bundler-library": "^2.14.0",
1414
"@parcel/compressor-raw": "^2.14.0",
15+
"@parcel/config-default": "^2.14.0",
1516
"@parcel/core": "^2.14.0",
1617
"@parcel/namer-default": "^2.14.0",
1718
"@parcel/packager-raw": "^2.14.0",
19+
"@parcel/plugin": "^2.14.0",
1820
"@parcel/reporter-cli": "^2.14.0",
1921
"@parcel/resolver-default": "^2.14.0",
22+
"@parcel/transformer-js": "^2.14.0",
2023
"@parcel/transformer-raw": "^2.14.0",
21-
"@react-spectrum/parcel-transformer-s2-icon": "^0.3.0"
24+
"@parcel/transformer-react-refresh-wrap": "^2.14.0",
25+
"@react-spectrum/parcel-namer-s2": "^1.0.0",
26+
"@react-spectrum/parcel-transformer-s2-icon": "^0.3.0",
27+
"@swc/helpers": "^0.5.0",
28+
"glob": "^8.0.3"
29+
},
30+
"peerDependencies": {
31+
"@react-spectrum/s2": ">=0.8.0",
32+
"react": "^18.0.0 || ^19.0.0-rc.1",
33+
"react-dom": "^18.0.0 || ^19.0.0-rc.1"
2234
},
2335
"files": [
2436
"index.js",
25-
".parcelrc"
37+
".parcelrc",
38+
".parcelrc-library"
2639
],
2740
"engines": {
28-
"node": ">=18.0.0"
41+
"node": ">=20.0.0"
2942
},
3043
"rsp": {
3144
"type": "cli"

0 commit comments

Comments
 (0)