Skip to content

Commit 0ad9610

Browse files
justincorrigiblejustincorrigible
committed
revert ESM for Components
TL;DR: `import ‘whatever.css’` fails when using SSR, requiring an improvement on our build pipeline before we fully update the released package. Bonus: cleanup for ESM prep-work, had missed some imports’ extensions
1 parent d430dd4 commit 0ad9610

File tree

29 files changed

+112
-109
lines changed

29 files changed

+112
-109
lines changed

‎integration-tests/import/jest.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const jestConfig: JestConfigWithTsJest = {
44
extensionsToTreatAsEsm: ['.jsx', '.ts', '.tsx'],
55
moduleNameMapper: {
66
'\\.(css|less)$': '<rootDir>/__mocks__/styleMock.cjs',
7-
'^lodash$': 'lodash-es',
7+
'^lodash-es$': 'lodash', // TODO flip this around when we're on ESM
88
},
99
transform: {
1010
'^.+.[jt]sx?$': [

‎modules/components/.npmignore‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ stories/
66

77
.env*
88
.gitignore
9-
*config.js*
10-
*config.ts*
9+
tsconfig.*
10+
11+
/*config.js*
12+
/*config.ts*
1113

12-
tsconfig.*

‎modules/components/babel.config.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ const babelConfigs = (api) => {
1111
[
1212
'@babel/preset-env',
1313
{
14-
modules: false,
14+
// modules: false,
1515
targets: {
16-
esmodules: true,
16+
// esmodules: true,
1717
node: 'current',
1818
// browsers: '> 0.25%, not dead',
1919
},
@@ -41,6 +41,7 @@ const babelConfigs = (api) => {
4141
alias: {
4242
'^#public': './public',
4343
'^#(.+)': './src/\\1', // keep this as last alias, to allow others first
44+
'^lodash-es$': 'lodash', // TODO flip this around when we're on ESM
4445
},
4546
cwd: 'packagejson',
4647
extensions: ['.js', '.jsx', '.d.ts', '.ts', '.tsx'],
@@ -57,9 +58,9 @@ const babelConfigs = (api) => {
5758
// '@babel/plugin-proposal-class-properties',
5859
],
5960
sourceMaps: 'inline',
60-
targets: {
61-
esmodules: true,
62-
}
61+
// targets: {
62+
// esmodules: true,
63+
// }
6364
};
6465
};
6566

‎modules/components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"filesize": "^10.0.6",
4141
"formik": "^0.11.11",
4242
"jsonpath-plus": "^10.3.0",
43+
"lodash": "^4.17.21",
4344
"lodash-es": "^4.17.21",
4445
"pluralize": "^8.0.0",
4546
"ramda": "^0.28.0",
@@ -109,6 +110,5 @@
109110
"overrides": {
110111
"minimist": "^1.2.6"
111112
},
112-
"type": "module",
113113
"version": "0.0.0-dev"
114114
}

‎modules/components/src/AdvancedSqonBuilder/SqonEntry.js‎

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import React from 'react';
21
import Component from '@reach/component-component';
32
import { FaRegClone, FaTrashAlt } from 'react-icons/fa';
43

54
import defaultApiFetcher from '../utils/api.js';
65

7-
import BooleanOp from './sqonPieces/BooleanOp';
8-
import { isBooleanOp, removeSqonPath, setSqonAtPath, isEmptySqon } from './utils';
6+
import BooleanOp from './sqonPieces/BooleanOp.js';
7+
import { isBooleanOp, removeSqonPath, setSqonAtPath, isEmptySqon } from './utils.js';
98

109
export default (props) => {
1110
const {
@@ -24,13 +23,13 @@ export default (props) => {
2423
isIndexReferenced = (index) => false,
2524
isDeleting = false,
2625
dependentIndices = [],
27-
onSqonCheckedChange = () => {},
28-
onSqonDuplicate = () => {},
29-
onSqonRemove = () => {},
30-
onSqonChange = (sqon) => {},
31-
onActivate = () => {},
32-
onDeleteConfirmed = () => {},
33-
onDeleteCanceled = () => {},
26+
onSqonCheckedChange = () => { },
27+
onSqonDuplicate = () => { },
28+
onSqonRemove = () => { },
29+
onSqonChange = (sqon) => { },
30+
onActivate = () => { },
31+
onDeleteConfirmed = () => { },
32+
onDeleteCanceled = () => { },
3433
emptyEntryMessage = null,
3534
} = props;
3635

@@ -65,8 +64,8 @@ export default (props) => {
6564
!isReferenced
6665
? {}
6766
: {
68-
background: referenceColor,
69-
}
67+
background: referenceColor,
68+
}
7069
}
7170
/>
7271
<div className={`selectionContainer`} onClick={onSqonCheckedChange}>
@@ -78,20 +77,20 @@ export default (props) => {
7877
{isEmptySqon(syntheticSqon)
7978
? emptyEntryMessage
8079
: isBooleanOp(syntheticSqon) && (
81-
<BooleanOp
82-
arrangerIndex={arrangerIndex}
83-
index={0}
84-
onFieldOpRemove={onFieldOpRemove}
85-
onChange={onLogicalOpChanged}
86-
sqon={syntheticSqon}
87-
FieldOpModifierContainer={FieldOpModifierContainer}
88-
apiFetcher={apiFetcher}
89-
getActiveExecutableSqon={getActiveExecutableSqon}
90-
getColorForReference={getColorForReference}
91-
isIndexReferenced={isIndexReferenced}
92-
referencesShouldHighlight={isActiveSqon}
93-
/>
94-
)}
80+
<BooleanOp
81+
arrangerIndex={arrangerIndex}
82+
index={0}
83+
onFieldOpRemove={onFieldOpRemove}
84+
onChange={onLogicalOpChanged}
85+
sqon={syntheticSqon}
86+
FieldOpModifierContainer={FieldOpModifierContainer}
87+
apiFetcher={apiFetcher}
88+
getActiveExecutableSqon={getActiveExecutableSqon}
89+
getColorForReference={getColorForReference}
90+
isIndexReferenced={isIndexReferenced}
91+
referencesShouldHighlight={isActiveSqon}
92+
/>
93+
)}
9594
</div>
9695
</div>
9796
</div>

‎modules/components/src/AdvancedSqonBuilder/sqonPieces/BooleanOp.js‎ renamed to ‎modules/components/src/AdvancedSqonBuilder/sqonPieces/BooleanOp.jsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import React from 'react';
21
import Component from '@reach/component-component';
32
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
43

5-
import { isReference, isBooleanOp, isFieldOp, isEmptySqon } from '../utils';
6-
import defaultApiFetcher from '../../utils/api.js';
7-
import ClickAwayListener from '../../utils/ClickAwayListener.js';
4+
import defaultApiFetcher from '#utils/api.js';
5+
import ClickAwayListener from '#utils/ClickAwayListener.js';
86

9-
import { PillRemoveButton } from './common';
10-
import FieldOp from './FieldOp';
7+
import { isReference, isBooleanOp, isFieldOp, isEmptySqon } from '../utils.js';
8+
9+
import { PillRemoveButton } from './common.js';
10+
import FieldOp from './FieldOp.js';
1111

1212
const SqonReference = (props) => {
13-
const { refIndex, onRemoveClick = () => {}, highlightColor, isHighlighted } = props;
13+
const { refIndex, onRemoveClick = () => { }, highlightColor, isHighlighted } = props;
1414
return (
1515
<span className={`sqonReference pill`}>
1616
<span
@@ -19,8 +19,8 @@ const SqonReference = (props) => {
1919
!isHighlighted
2020
? {}
2121
: {
22-
background: highlightColor,
23-
}
22+
background: highlightColor,
23+
}
2424
}
2525
>
2626
#{refIndex + 1}
@@ -31,7 +31,7 @@ const SqonReference = (props) => {
3131
};
3232

3333
const LogicalOpSelector = (props) => {
34-
const { opName, onChange = (newOpName) => {} } = props;
34+
const { opName, onChange = (newOpName) => { } } = props;
3535
const initialState = { isOpen: false };
3636
const selectionOptions = ['and', 'or'];
3737
const onClickAway = (s) => () => {
@@ -77,8 +77,8 @@ const BooleanOp = (props) => {
7777
const {
7878
arrangerIndex,
7979
contentPath = [],
80-
onFieldOpRemove = (path) => {},
81-
onChange = (changedPath, newOp) => {},
80+
onFieldOpRemove = (path) => { },
81+
onChange = (changedPath, newOp) => { },
8282
sqon,
8383
fullSyntheticSqon = sqon,
8484
FieldOpModifierContainer = undefined,
@@ -138,4 +138,5 @@ const BooleanOp = (props) => {
138138
</span>
139139
);
140140
};
141+
141142
export default BooleanOp;

‎modules/components/src/AdvancedSqonBuilder/sqonPieces/FieldOp.js‎ renamed to ‎modules/components/src/AdvancedSqonBuilder/sqonPieces/FieldOp.jsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import React from 'react';
21
import Component from '@reach/component-component';
32
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
43
import { Tooltip } from 'react-tippy';
54
import 'react-tippy/dist/tippy.css';
65

7-
import ClickAwayListener from '../../utils/ClickAwayListener.js';
8-
import { DisplayNameMapContext, getOperationAtPath, FIELD_OP_DISPLAY_NAME, RANGE_OPS } from '../utils';
9-
import FieldOpModifier from '../filterComponents/index';
10-
import defaultApiFetcher from '../../utils/api.js';
6+
import defaultApiFetcher from '#utils/api.js';
7+
import ClickAwayListener from '#utils/ClickAwayListener.js';
118

12-
import { PillRemoveButton } from './common';
9+
import FieldOpModifier from '../filterComponents/index.js';
10+
import { DisplayNameMapContext, getOperationAtPath, FIELD_OP_DISPLAY_NAME, RANGE_OPS } from '../utils.js';
1311

14-
export default (props) => {
12+
import { PillRemoveButton } from './common.js';
13+
14+
const FieldOp = (props) => {
1515
const {
16-
onSqonChange = (fullSqon) => {},
17-
onContentRemove = () => {},
16+
onSqonChange = (fullSqon) => { },
17+
onContentRemove = () => { },
1818
fullSyntheticSqon,
1919
sqonPath = [],
2020
opDisplayNameMap = FIELD_OP_DISPLAY_NAME,
@@ -49,9 +49,8 @@ export default (props) => {
4949
<span className={`fieldOp pill`}>
5050
<span className={'opContainer'}>
5151
<span className={`fieldName`}>{fieldDisplayNameMap[field] || field} </span>
52-
<span className={`opName`}>{` is ${
53-
(Array.isArray(value) && value.length > 1) || RANGE_OPS.includes(op) ? opDisplayNameMap[op] : ''
54-
} `}</span>
52+
<span className={`opName`}>{` is ${(Array.isArray(value) && value.length > 1) || RANGE_OPS.includes(op) ? opDisplayNameMap[op] : ''
53+
} `}</span>
5554
</span>
5655
<ClickAwayListener className={'selectionContainer'} handler={onClickAway(s)}>
5756
<span className={'valueDisplay'} onClick={toggleDropdown(s)}>
@@ -88,3 +87,5 @@ export default (props) => {
8887
</Component>
8988
);
9089
};
90+
91+
export default FieldOp;

‎modules/components/src/AdvancedSqonBuilder/sqonPieces/common.js‎ renamed to ‎modules/components/src/AdvancedSqonBuilder/sqonPieces/common.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import React from 'react';
2-
31
export const PillRemoveButton = ({ onClick }) => (
42
<span className={`pillRemoveButton`} onClick={onClick}>
53
✕

‎modules/components/src/DropDown/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export { default } from './DropDown';
2-
export { default as MultiSelectDropDown } from './MultiSelectDropDown';
1+
export { default } from './DropDown.js';
2+
export { default as MultiSelectDropDown } from './MultiSelectDropDown.js';

‎modules/components/src/Flex/Column.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33
import { Children, cloneElement } from 'react';
44

55
// Custom
6-
import Row from './Row';
6+
import Row from './Row.js';
77

88
/*----------------------------------------------------------------------------*/
99

0 commit comments

Comments
 (0)