Skip to content

Commit 265e5a3

Browse files
Hyperkid123Hyperkid123
committed
feat(renderer): optimize build process
1 parent d0f3623 commit 265e5a3

File tree

21 files changed

+492
-164
lines changed

21 files changed

+492
-164
lines changed

‎babel.config.js

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,19 @@ const camelToSnake = (string) => {
88

99
module.exports = {
1010
presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
11-
plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-syntax-dynamic-import", "lodash", "@babel/plugin-proposal-class-properties" ],
12-
env: {
13-
cjs: {
14-
plugins: [
15-
[
16-
'transform-imports',
17-
{
18-
'@data-driven-forms/react-form-renderer': {
19-
transform: (importName) => `@data-driven-forms/react-form-renderer/dist/cjs/${camelToSnake(importName)}`,
20-
preventFullImport: true
21-
}
22-
},
23-
'@data-driven-forms/react-form-renderer-CJS'
24-
],
25-
]
11+
plugins: [
12+
"@babel/plugin-transform-runtime",
13+
"@babel/plugin-syntax-dynamic-import",
14+
"lodash",
15+
"@babel/plugin-proposal-class-properties",
16+
[
17+
'transform-imports',
18+
{
19+
'@data-driven-forms/react-form-renderer': {
20+
transform: (importName) => `@data-driven-forms/react-form-renderer/${camelToSnake(importName)}`,
21+
preventFullImport: true
22+
}
2623
},
27-
esm: {
28-
plugins: [
29-
[
30-
'transform-imports',
31-
{
32-
'@data-driven-forms/react-form-renderer': {
33-
transform: (importName) => `@data-driven-forms/react-form-renderer/dist/esm/${camelToSnake(importName)}`,
34-
preventFullImport: true
35-
}
36-
},
37-
'@data-driven-forms/react-form-renderer-ESM'
38-
],
39-
]
40-
}
41-
}
24+
'@data-driven-forms/react-form-renderer'
25+
]]
4226
}

‎packages/common/.gitignore

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,20 @@ yarn.lock
6666
dist
6767
public
6868
vendor
69+
70+
/*
71+
72+
!src
73+
!src/
74+
!demo/
75+
!src/*
76+
!demo/*
77+
!config
78+
!.npmignore
79+
!babel.config.js
80+
!generate-packages.js
81+
!LICENSE
82+
!package.json
83+
!README.md
84+
!tsconfig.json
85+
!generate-typings.js

‎packages/common/babel.config.js

Lines changed: 43 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ const createSuirCJSTransform = (env = 'commonjs') => [
5656
} else {
5757
throw new Error(`File with importName ${importName} does not exist`);
5858
}
59+
5960
res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
6061
res = res.replace(/^\//, '');
6162
return res;
@@ -76,7 +77,7 @@ const createMuiTransform = (env) => [
7677
skipDefaultConversion: false
7778
},
7879
'@material-ui/core': {
79-
transform: (importName) => env ? `@material-ui/core/${env}/${importName}` : `@material-ui/core/${importName}`,
80+
transform: (importName) => (env ? `@material-ui/core/${env}/${importName}` : `@material-ui/core/${importName}`),
8081
preventFullImport: false,
8182
skipDefaultConversion: false
8283
}
@@ -133,7 +134,7 @@ const createPfReactTransform = (env) => [
133134
}
134135
},
135136
`pf-react-${env}`
136-
]
137+
];
137138

138139
const createBluePrintTransform = (env) => [
139140
'transform-imports',
@@ -147,18 +148,22 @@ const createBluePrintTransform = (env) => [
147148
}
148149
},
149150
`BLUEPRINT-${env}`
150-
]
151+
];
151152

152153
const createAntTransform = (env) => [
153154
'transform-imports',
154155
{
155-
'antd': {
156+
antd: {
156157
transform: (importName) => {
157158
let res;
158159
const files = glob.sync(
159-
path.resolve(__dirname, `../../node_modules/antd/${env === 'cjs' ? 'lib' : 'es' }/${importName.split(/(?=[A-Z])/)
160-
.join('-')
161-
.toLowerCase()}/index.js`)
160+
path.resolve(
161+
__dirname,
162+
`../../node_modules/antd/${env === 'cjs' ? 'lib' : 'es'}/${importName
163+
.split(/(?=[A-Z])/)
164+
.join('-')
165+
.toLowerCase()}/index.js`
166+
)
162167
);
163168
if (files.length > 0) {
164169
res = files[0];
@@ -169,32 +174,36 @@ const createAntTransform = (env) => [
169174
res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
170175
res = res.replace(/^\//, '');
171176
return res;
172-
},
173-
},
177+
}
178+
}
174179
},
175180
`ant-${env}`
176-
]
181+
];
177182

178-
const carbonMapper = (importName) => ({
179-
StructuredListWrapper: 'StructuredList',
180-
StructuredListBody: 'StructuredList',
181-
StructuredListRow: 'StructuredList',
182-
StructuredListCell: 'StructuredList',
183-
ProgressStep: 'ProgressIndicator'
184-
}[importName] || importName)
183+
const carbonMapper = (importName) =>
184+
({
185+
StructuredListWrapper: 'StructuredList',
186+
StructuredListBody: 'StructuredList',
187+
StructuredListRow: 'StructuredList',
188+
StructuredListCell: 'StructuredList',
189+
ProgressStep: 'ProgressIndicator'
190+
}[importName] || importName);
185191

186192
const createCarbonCJSTransform = (env) => [
187193
'transform-imports',
188194
{
189195
'carbon-components-react': {
190196
transform: (importName) => {
191197
let res;
192-
const files = glob.sync(path.resolve(__dirname, `../../node_modules/carbon-components-react/${env === 'cjs' ? 'lib' : 'es' }/**/${carbonMapper(importName)}.js`));
198+
const files = glob.sync(
199+
path.resolve(__dirname, `../../node_modules/carbon-components-react/${env === 'cjs' ? 'lib' : 'es'}/**/${carbonMapper(importName)}.js`)
200+
);
193201
if (files.length > 0) {
194202
res = files[0];
195203
} else {
196204
throw new Error(`File with importName ${importName} does not exist`);
197205
}
206+
198207
res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
199208
res = res.replace(/^\//, '');
200209
return res;
@@ -205,12 +214,15 @@ const createCarbonCJSTransform = (env) => [
205214
'carbon-components-react/lib/components/StructuredList/StructuredList': {
206215
transform: (importName) => {
207216
let res;
208-
const files = glob.sync(path.resolve(__dirname, `../../node_modules/carbon-components-react/${env === 'cjs' ? 'lib' : 'es' }/**/${carbonMapper(importName)}.js`));
217+
const files = glob.sync(
218+
path.resolve(__dirname, `../../node_modules/carbon-components-react/${env === 'cjs' ? 'lib' : 'es'}/**/${carbonMapper(importName)}.js`)
219+
);
209220
if (files.length > 0) {
210221
res = files[0];
211222
} else {
212223
throw new Error(`File with importName ${importName} does not exist`);
213224
}
225+
214226
res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
215227
res = res.replace(/^\//, '');
216228
return res;
@@ -221,12 +233,15 @@ const createCarbonCJSTransform = (env) => [
221233
'carbon-components-react/lib/components/ProgressIndicator/ProgressIndicator': {
222234
transform: (importName) => {
223235
let res;
224-
const files = glob.sync(path.resolve(__dirname, `../../node_modules/carbon-components-react/${env === 'cjs' ? 'lib' : 'es' }/**/${carbonMapper(importName)}.js`));
236+
const files = glob.sync(
237+
path.resolve(__dirname, `../../node_modules/carbon-components-react/${env === 'cjs' ? 'lib' : 'es'}/**/${carbonMapper(importName)}.js`)
238+
);
225239
if (files.length > 0) {
226240
res = files[0];
227241
} else {
228242
throw new Error(`File with importName ${importName} does not exist`);
229243
}
244+
230245
res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
231246
res = res.replace(/^\//, '');
232247
return res;
@@ -240,12 +255,15 @@ const createCarbonCJSTransform = (env) => [
240255
let iconName = pascalToKebabCaseCarbonIcons(importName.replace(/\d+/, ''));
241256

242257
let res;
243-
const files = glob.sync(path.resolve(__dirname, `../../node_modules/@carbon/icons-react/${env === 'cjs' ? 'lib' : 'es' }/${iconName}/${size}.js`));
258+
const files = glob.sync(
259+
path.resolve(__dirname, `../../node_modules/@carbon/icons-react/${env === 'cjs' ? 'lib' : 'es'}/${iconName}/${size}.js`)
260+
);
244261
if (files.length > 0) {
245262
res = files[0];
246263
} else {
247264
throw new Error(`File with importName ${importName} does not exist`);
248265
}
266+
249267
res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
250268
res = res.replace(/^\//, '');
251269
return res;
@@ -261,23 +279,25 @@ module.exports = {
261279
extends: '../../babel.config.js',
262280
env: {
263281
cjs: {
282+
presets: [['@babel/preset-env', { modules: 'commonjs' }]],
264283
plugins: [
265284
createSuirCJSTransform('commonjs'),
266285
createMuiTransform(),
267286
createPfReactTransform('js'),
268287
createBluePrintTransform('cjs'),
269288
createAntTransform('cjs'),
270-
createCarbonCJSTransform('cjs'),
289+
createCarbonCJSTransform('cjs')
271290
]
272291
},
273292
esm: {
293+
presets: [['@babel/preset-env', { modules: false }]],
274294
plugins: [
275295
createSuirCJSTransform('es'),
276296
createMuiTransform('esm'),
277297
createPfReactTransform('esm'),
278298
createBluePrintTransform('esm'),
279299
createAntTransform('esm'),
280-
createCarbonCJSTransform('esm'),
300+
createCarbonCJSTransform('esm')
281301
]
282302
}
283303
}

‎packages/react-form-renderer/.npmignore

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
*
2-
3-
!dist
1+
config
2+
demo
3+
src
4+
babel.config.js
5+
generate-index.js
6+
.gitignore
7+
tsconfig.js

‎packages/react-form-renderer/demo/form-fields-mapper.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/* eslint-disable no-unused-vars */
22
import React from 'react';
33
import { componentTypes } from '../src';
4-
import FieldProvider from '../src/files/field-provider';
5-
import useFieldApi from '../src/files/use-field-api';
4+
import FieldProvider from '../src/field-provider';
5+
import useFieldApi from '../src/use-field-api';
66

77
const TextField = (props) => (
88
<FieldProvider

‎packages/react-form-renderer/generate-index.js

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎packages/react-form-renderer/generate-packages.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const glob = require('glob');
2+
const path = require('path');
3+
const fse = require('fs-extra');
4+
5+
const src = path.resolve(__dirname, './src');
6+
7+
async function generatePackages() {
8+
const directories = glob
9+
.sync(`${src}/*/`)
10+
.filter((name) => !name.includes('/tests/') && !name.includes('/common/'))
11+
.map((path) =>
12+
path
13+
.replace(/\/$/, '')
14+
.split('/')
15+
.pop()
16+
);
17+
const cmds = directories.map((dir) => {
18+
const pckg = {
19+
main: 'index.js',
20+
module: `../esm/${dir}`,
21+
typings: 'index.d.ts'
22+
};
23+
return fse.writeJSON(path.resolve(__dirname, dir, 'package.json'), pckg);
24+
});
25+
26+
return Promise.all(cmds);
27+
// return fse.writeFileSync(`${src}/index.js`, content);
28+
}
29+
30+
async function run() {
31+
try {
32+
await generatePackages();
33+
} catch (err) {
34+
console.error(err);
35+
process.exit(1);
36+
}
37+
}
38+
39+
run();

0 commit comments

Comments
 (0)