Skip to content

Commit 889ae33

Browse files
curlyfriespleasecurlyfriesplease
committed
Cater to both CJS and ESM
1 parent caf388c commit 889ae33

4 files changed

Lines changed: 1113 additions & 89 deletions

File tree

‎babel.config.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,36 @@
11
// eslint-disable-next-line func-names
22
module.exports = function (api) {
3-
api.cache(true);
3+
const format = process.env.MODULE_FORMAT;
4+
5+
api.cache.using(() => `${format || 'node'}:${process.env.NODE_ENV || 'development'}`);
46

5-
const presets = [['react-app', { absoluteRuntime: false }]];
67
const plugins = [
78
['babel-plugin-styled-components'],
89
['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }]
910
];
1011

12+
const presetEnvOptions = { bugfixes: true };
13+
14+
if (format === 'esm') {
15+
presetEnvOptions.modules = false;
16+
} else {
17+
presetEnvOptions.modules = 'commonjs';
18+
if (!format) {
19+
presetEnvOptions.targets = { node: 'current' };
20+
}
21+
}
22+
23+
const presets = [
24+
['@babel/preset-env', presetEnvOptions],
25+
[
26+
'@babel/preset-react',
27+
{
28+
runtime: 'classic',
29+
development: process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'development'
30+
}
31+
]
32+
];
33+
1134
return {
1235
presets,
1336
plugins

‎package.json‎

Lines changed: 94 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@comicrelief/component-library",
33
"author": "Comic Relief Engineering Team",
44
"version": "0.0.0-see.readme.for.semantic.release.process",
5-
"main": "dist/index.js",
5+
"main": "dist/cjs/index.js",
66
"sideEffects": [
77
"**/*.css",
88
"**/components/Atoms/Picture/Picture.js",
@@ -12,141 +12,142 @@
1212
],
1313
"exports": {
1414
".": {
15-
"import": "./dist/index.js",
16-
"require": "./dist/index.js",
17-
"default": "./dist/index.js"
15+
"import": "./dist/esm/index.js",
16+
"require": "./dist/cjs/index.js",
17+
"default": "./dist/esm/index.js"
1818
},
1919
"./theme": {
20-
"import": "./dist/theme.js",
21-
"require": "./dist/theme.js",
22-
"default": "./dist/theme.js"
20+
"import": "./dist/esm/theme.js",
21+
"require": "./dist/cjs/theme.js",
22+
"default": "./dist/esm/theme.js"
2323
},
2424
"./atoms": {
25-
"import": "./dist/atoms.js",
26-
"require": "./dist/atoms.js",
27-
"default": "./dist/atoms.js"
25+
"import": "./dist/esm/atoms.js",
26+
"require": "./dist/cjs/atoms.js",
27+
"default": "./dist/esm/atoms.js"
2828
},
2929
"./molecules": {
30-
"import": "./dist/molecules.js",
31-
"require": "./dist/molecules.js",
32-
"default": "./dist/molecules.js"
30+
"import": "./dist/esm/molecules.js",
31+
"require": "./dist/cjs/molecules.js",
32+
"default": "./dist/esm/molecules.js"
3333
},
3434
"./organisms": {
35-
"import": "./dist/organisms.js",
36-
"require": "./dist/organisms.js",
37-
"default": "./dist/organisms.js"
35+
"import": "./dist/esm/organisms.js",
36+
"require": "./dist/cjs/organisms.js",
37+
"default": "./dist/esm/organisms.js"
3838
},
3939
"./atoms/form": {
40-
"import": "./dist/atoms-form.js",
41-
"require": "./dist/atoms-form.js",
42-
"default": "./dist/atoms-form.js"
40+
"import": "./dist/esm/atoms-form.js",
41+
"require": "./dist/cjs/atoms-form.js",
42+
"default": "./dist/esm/atoms-form.js"
4343
},
4444
"./atoms/actions": {
45-
"import": "./dist/atoms-actions.js",
46-
"require": "./dist/atoms-actions.js",
47-
"default": "./dist/atoms-actions.js"
45+
"import": "./dist/esm/atoms-actions.js",
46+
"require": "./dist/cjs/atoms-actions.js",
47+
"default": "./dist/esm/atoms-actions.js"
4848
},
4949
"./atoms/text": {
50-
"import": "./dist/atoms-text.js",
51-
"require": "./dist/atoms-text.js",
52-
"default": "./dist/atoms-text.js"
50+
"import": "./dist/esm/atoms-text.js",
51+
"require": "./dist/cjs/atoms-text.js",
52+
"default": "./dist/esm/atoms-text.js"
5353
},
5454
"./atoms/media": {
55-
"import": "./dist/atoms-media.js",
56-
"require": "./dist/atoms-media.js",
57-
"default": "./dist/atoms-media.js"
55+
"import": "./dist/esm/atoms-media.js",
56+
"require": "./dist/cjs/atoms-media.js",
57+
"default": "./dist/esm/atoms-media.js"
5858
},
5959
"./atoms/brand": {
60-
"import": "./dist/atoms-brand.js",
61-
"require": "./dist/atoms-brand.js",
62-
"default": "./dist/atoms-brand.js"
60+
"import": "./dist/esm/atoms-brand.js",
61+
"require": "./dist/cjs/atoms-brand.js",
62+
"default": "./dist/esm/atoms-brand.js"
6363
},
6464
"./atoms/navigation": {
65-
"import": "./dist/atoms-navigation.js",
66-
"require": "./dist/atoms-navigation.js",
67-
"default": "./dist/atoms-navigation.js"
65+
"import": "./dist/esm/atoms-navigation.js",
66+
"require": "./dist/cjs/atoms-navigation.js",
67+
"default": "./dist/esm/atoms-navigation.js"
6868
},
6969
"./atoms/icons": {
70-
"import": "./dist/atoms-icons.js",
71-
"require": "./dist/atoms-icons.js",
72-
"default": "./dist/atoms-icons.js"
70+
"import": "./dist/esm/atoms-icons.js",
71+
"require": "./dist/cjs/atoms-icons.js",
72+
"default": "./dist/esm/atoms-icons.js"
7373
},
7474
"./atoms/effects": {
75-
"import": "./dist/atoms-effects.js",
76-
"require": "./dist/atoms-effects.js",
77-
"default": "./dist/atoms-effects.js"
75+
"import": "./dist/esm/atoms-effects.js",
76+
"require": "./dist/cjs/atoms-effects.js",
77+
"default": "./dist/esm/atoms-effects.js"
7878
},
7979
"./molecules/search-lookup": {
80-
"import": "./dist/molecules-search-lookup.js",
81-
"require": "./dist/molecules-search-lookup.js",
82-
"default": "./dist/molecules-search-lookup.js"
80+
"import": "./dist/esm/molecules-search-lookup.js",
81+
"require": "./dist/cjs/molecules-search-lookup.js",
82+
"default": "./dist/esm/molecules-search-lookup.js"
8383
},
8484
"./molecules/cards-ctas": {
85-
"import": "./dist/molecules-cards-ctas.js",
86-
"require": "./dist/molecules-cards-ctas.js",
87-
"default": "./dist/molecules-cards-ctas.js"
85+
"import": "./dist/esm/molecules-cards-ctas.js",
86+
"require": "./dist/cjs/molecules-cards-ctas.js",
87+
"default": "./dist/esm/molecules-cards-ctas.js"
8888
},
8989
"./molecules/banners-heroes": {
90-
"import": "./dist/molecules-banners-heroes.js",
91-
"require": "./dist/molecules-banners-heroes.js",
92-
"default": "./dist/molecules-banners-heroes.js"
90+
"import": "./dist/esm/molecules-banners-heroes.js",
91+
"require": "./dist/cjs/molecules-banners-heroes.js",
92+
"default": "./dist/esm/molecules-banners-heroes.js"
9393
},
9494
"./molecules/engagement": {
95-
"import": "./dist/molecules-engagement.js",
96-
"require": "./dist/molecules-engagement.js",
97-
"default": "./dist/molecules-engagement.js"
95+
"import": "./dist/esm/molecules-engagement.js",
96+
"require": "./dist/cjs/molecules-engagement.js",
97+
"default": "./dist/esm/molecules-engagement.js"
9898
},
9999
"./molecules/cards-initiatives": {
100-
"import": "./dist/molecules-cards-ctas.js",
101-
"require": "./dist/molecules-cards-ctas.js",
102-
"default": "./dist/molecules-cards-ctas.js"
100+
"import": "./dist/esm/molecules-cards-ctas.js",
101+
"require": "./dist/cjs/molecules-cards-ctas.js",
102+
"default": "./dist/esm/molecules-cards-ctas.js"
103103
},
104104
"./molecules/footer": {
105-
"import": "./dist/molecules-footer.js",
106-
"require": "./dist/molecules-footer.js",
107-
"default": "./dist/molecules-footer.js"
105+
"import": "./dist/esm/molecules-footer.js",
106+
"require": "./dist/cjs/molecules-footer.js",
107+
"default": "./dist/esm/molecules-footer.js"
108108
},
109109
"./molecules/footer-email": {
110-
"import": "./dist/molecules-footer.js",
111-
"require": "./dist/molecules-footer.js",
112-
"default": "./dist/molecules-footer.js"
110+
"import": "./dist/esm/molecules-footer.js",
111+
"require": "./dist/cjs/molecules-footer.js",
112+
"default": "./dist/esm/molecules-footer.js"
113113
},
114114
"./molecules/icons": {
115-
"import": "./dist/molecules-icons.js",
116-
"require": "./dist/molecules-icons.js",
117-
"default": "./dist/molecules-icons.js"
115+
"import": "./dist/esm/molecules-icons.js",
116+
"require": "./dist/cjs/molecules-icons.js",
117+
"default": "./dist/esm/molecules-icons.js"
118118
},
119119
"./organisms/headers": {
120-
"import": "./dist/organisms-headers.js",
121-
"require": "./dist/organisms-headers.js",
122-
"default": "./dist/organisms-headers.js"
120+
"import": "./dist/esm/organisms-headers.js",
121+
"require": "./dist/cjs/organisms-headers.js",
122+
"default": "./dist/esm/organisms-headers.js"
123123
},
124124
"./organisms/footers": {
125-
"import": "./dist/organisms-footers.js",
126-
"require": "./dist/organisms-footers.js",
127-
"default": "./dist/organisms-footers.js"
125+
"import": "./dist/esm/organisms-footers.js",
126+
"require": "./dist/cjs/organisms-footers.js",
127+
"default": "./dist/esm/organisms-footers.js"
128128
},
129129
"./organisms/compliance": {
130-
"import": "./dist/organisms-compliance.js",
131-
"require": "./dist/organisms-compliance.js",
132-
"default": "./dist/organisms-compliance.js"
130+
"import": "./dist/esm/organisms-compliance.js",
131+
"require": "./dist/cjs/organisms-compliance.js",
132+
"default": "./dist/esm/organisms-compliance.js"
133133
},
134134
"./organisms/donation": {
135-
"import": "./dist/organisms-donation.js",
136-
"require": "./dist/organisms-donation.js",
137-
"default": "./dist/organisms-donation.js"
135+
"import": "./dist/esm/organisms-donation.js",
136+
"require": "./dist/cjs/organisms-donation.js",
137+
"default": "./dist/esm/organisms-donation.js"
138138
},
139139
"./organisms/email-contact": {
140-
"import": "./dist/organisms-email-contact.js",
141-
"require": "./dist/organisms-email-contact.js",
142-
"default": "./dist/organisms-email-contact.js"
140+
"import": "./dist/esm/organisms-email-contact.js",
141+
"require": "./dist/cjs/organisms-email-contact.js",
142+
"default": "./dist/esm/organisms-email-contact.js"
143143
},
144144
"./organisms/media": {
145-
"import": "./dist/organisms-media.js",
146-
"require": "./dist/organisms-media.js",
147-
"default": "./dist/organisms-media.js"
145+
"import": "./dist/esm/organisms-media.js",
146+
"require": "./dist/cjs/organisms-media.js",
147+
"default": "./dist/esm/organisms-media.js"
148148
},
149-
"./dist/*": "./dist/*",
149+
"./dist/cjs/*": "./dist/cjs/*",
150+
"./dist/esm/*": "./dist/esm/*",
150151
"./src/*": "./src/*",
151152
"./package.json": "./package.json"
152153
},
@@ -163,7 +164,7 @@
163164
"^axios$": "axios/dist/node/axios.cjs"
164165
}
165166
},
166-
"module": "dist/index.js",
167+
"module": "dist/esm/index.js",
167168
"repository": {
168169
"type": "git",
169170
"url": "https://github.com/comicrelief/component-library.git"
@@ -206,7 +207,9 @@
206207
"nth-check": "2.0.1"
207208
},
208209
"scripts": {
209-
"build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js",
210+
"build": "rm -rf dist && run-s build:cjs build:esm",
211+
"build:cjs": "cross-env MODULE_FORMAT=cjs NODE_ENV=production babel src --out-dir dist/cjs --copy-files --ignore __tests__,spec.js,test.js",
212+
"build:esm": "cross-env MODULE_FORMAT=esm NODE_ENV=production babel src --out-dir dist/esm --copy-files --ignore __tests__,spec.js,test.js && node scripts/write-esm-package-json.js",
210213
"test:unit": "yarn run jest",
211214
"test:unit:update": "yarn jest -u",
212215
"styleguide": "cross-env FAST_REFRESH=false styleguidist server",
@@ -217,7 +220,9 @@
217220
"test:e2e:local": "export NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e",
218221
"lint": "eslint src",
219222
"lint-fix": "yarn lint --fix",
220-
"build-pr": "rm -rf dist && NODE_ENV=development BABEL_ENV=development yarn babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js",
223+
"build-pr": "rm -rf dist && run-s build-pr:cjs build-pr:esm",
224+
"build-pr:cjs": "cross-env MODULE_FORMAT=cjs NODE_ENV=development BABEL_ENV=development babel src --out-dir dist/cjs --copy-files --ignore __tests__,spec.js,test.js",
225+
"build-pr:esm": "cross-env MODULE_FORMAT=esm NODE_ENV=development BABEL_ENV=development babel src --out-dir dist/esm --copy-files --ignore __tests__,spec.js,test.js && node scripts/write-esm-package-json.js",
221226
"postinstall": "yarn build-pr"
222227
},
223228
"browserslist": {
@@ -233,6 +238,9 @@
233238
]
234239
},
235240
"devDependencies": {
241+
"@babel/core": "^7.26.0",
242+
"@babel/preset-env": "^7.26.0",
243+
"@babel/preset-react": "^7.26.3",
236244
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
237245
"@playwright/test": "^1.38.1",
238246
"cross-env": "^7.0.3",

‎scripts/write-esm-package-json.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
4+
const target = path.join(__dirname, '..', 'dist', 'esm', 'package.json');
5+
6+
fs.mkdirSync(path.dirname(target), { recursive: true });
7+
fs.writeFileSync(target, `${JSON.stringify({ type: 'module' }, null, 2)}\n`);

0 commit comments

Comments
 (0)