Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 6eff029

Browse files
layershifterlayershifter
authored
chore(mixed): fix imports and introduce bundler test (#570)
* chore(mixed): fix imports and introduce bundler test * revert import change * do not build dll on build:dist * rewrite bundler task * restore imports, introduce transformer * fix CI command * restore command * add entry * remove transformer * add typings, fix import * fix typo * review improvements * update directory structure
1 parent 12d4472 commit 6eff029

File tree

28 files changed

+228
-58
lines changed

28 files changed

+228
-58
lines changed

‎.circleci/config.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@ jobs:
5555
- run:
5656
name: Visual Tests
5757
command: yarn test:visual
58-
# - run:
59-
# name: Project Tests
60-
# command: yarn test:projects:cra-ts
58+
- run:
59+
name: Project Tests
60+
command: yarn test:projects
6161
- run:
6262
name: Danger JS
6363
command: |

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
3030
- Fix support for fallback values in styles (`color: ['#ccc', 'rgba(0, 0, 0, 0.5)']`) @miroslavstastny ([#573](https://github.com/stardust-ui/react/pull/573))
3131
- Fix styles for RTL mode of doc site component examples @kuzhelov ([#579](https://github.com/stardust-ui/react/pull/579))
3232
- Prevent blind props forwarding for `createShorthand` calls if the value is a React element and remove manual check for `Input` `wrapper` @Bugaa92 ([#496](https://github.com/stardust-ui/react/pull/496))
33+
- Fix issue with bundling package with Rollup and Parcel @layershifter ([#570](https://github.com/stardust-ui/react/pull/570))
3334

3435
### Features
3536
- `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))

‎build/gulp/tasks/test-projects.tsx

+57-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import * as debug from 'debug'
12
import * as fs from 'fs'
2-
import { task } from 'gulp'
3+
import { series, task } from 'gulp'
4+
import * as path from 'path'
35
import sh from '../sh'
46
import * as rimraf from 'rimraf'
57

@@ -15,12 +17,13 @@ const log = msg => {
1517
console.log('='.repeat(80))
1618
}
1719

18-
const runIn = path => cmd => sh(`cd ${path} && ${cmd}`)
20+
export const createPackageFilename = () => tmp.tmpNameSync({ prefix: 'stardust-', postfix: '.tgz' })
1921

20-
const buildAndPackStardust = async (): Promise<string> => {
21-
await sh('yarn build:dist')
22+
export const runIn = path => cmd => sh(`cd ${path} && ${cmd}`)
2223

23-
return (await sh(`npm pack`, true)).trim()
24+
export const buildAndPackStardust = async (packageFilename: string) => {
25+
await sh('yarn build:dist')
26+
await sh(`yarn pack --filename ${packageFilename}`)
2427
}
2528

2629
const createReactApp = async (atTempDirectory: string, appName: string): Promise<string> => {
@@ -90,8 +93,10 @@ export default App;
9093
//////// PREPARE STARDUST PACKAGE ///////
9194
log('STEP 0. Preparing Stardust package..')
9295

93-
const stardustPackageFilename = await buildAndPackStardust()
94-
log(`Stardust package is published: ${paths.base(stardustPackageFilename)}`)
96+
const packageFilename = createPackageFilename()
97+
98+
await buildAndPackStardust(packageFilename)
99+
log(`Stardust package is published: ${packageFilename}`)
95100

96101
try {
97102
//////// CREATE TEST REACT APP ///////
@@ -107,7 +112,7 @@ export default App;
107112
//////// ADD STARDUST AS A DEPENDENCY ///////
108113
log('STEP 2. Add Stardust dependency to test project..')
109114

110-
await runInTestApp(`yarn add ${paths.base(stardustPackageFilename)}`)
115+
await runInTestApp(`yarn add ${packageFilename}`)
111116
log("Stardust is successfully added as test project's dependency.")
112117

113118
//////// REFERENCE STARDUST COMPONENTS IN TEST APP's MAIN FILE ///////
@@ -120,6 +125,49 @@ export default App;
120125

121126
log('Test project is built successfully!')
122127
} finally {
123-
fs.unlinkSync(stardustPackageFilename)
128+
fs.unlinkSync(packageFilename)
124129
}
125130
})
131+
132+
task('test:projects:rollup', async () => {
133+
const logger = debug('bundle:rollup')
134+
logger.enabled = true
135+
136+
const packageFilename = createPackageFilename()
137+
const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/rollup')
138+
139+
await buildAndPackStardust(packageFilename)
140+
logger(`✔️Stardust UI package was prepared: ${packageFilename}`)
141+
142+
const tmpDirectory = tmp.dirSync({ prefix: 'stardust-' }).name
143+
logger(`✔️Temporary directory was created: ${tmpDirectory}`)
144+
145+
const dependencies = [
146+
'rollup',
147+
'rollup-plugin-replace',
148+
'rollup-plugin-commonjs',
149+
'rollup-plugin-node-resolve',
150+
'react',
151+
'react-dom',
152+
].join(' ')
153+
await runIn(tmpDirectory)(`yarn add ${dependencies}`)
154+
logger(`✔️Dependencies were installed`)
155+
156+
await runIn(tmpDirectory)(`yarn add ${packageFilename}`)
157+
logger(`✔️Stardust UI was added to dependencies`)
158+
159+
fs.copyFileSync(scaffoldPath('app.js'), path.resolve(tmpDirectory, 'app.js'))
160+
fs.copyFileSync(scaffoldPath('rollup.config.js'), path.resolve(tmpDirectory, 'rollup.config.js'))
161+
logger(`✔️Source and bundler's config were created`)
162+
163+
await runIn(tmpDirectory)(`yarn rollup -c`)
164+
logger(`✔️Example project was successfully built: ${tmpDirectory}`)
165+
})
166+
167+
task(
168+
'test:projects',
169+
series(
170+
// 'test:projects:cra-ts', Temporary disabled
171+
'test:projects:rollup',
172+
),
173+
)

‎build/gulp/tasks/test-projects/rollup/app.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import { Button, Provider, themes } from '@stardust-ui/react'
4+
5+
ReactDOM.render(
6+
React.createElement(
7+
Provider,
8+
{ theme: themes.teams },
9+
React.createElement(Button, { content: 'Theming' }),
10+
),
11+
document.getElementById('root'),
12+
)

‎build/gulp/tasks/test-projects/rollup/rollup.config.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import replace from 'rollup-plugin-replace'
2+
import resolve from 'rollup-plugin-node-resolve'
3+
import commonjs from 'rollup-plugin-commonjs'
4+
5+
const warningWhitelist = [
6+
'THIS_IS_UNDEFINED', // comes from TS transforms
7+
'CIRCULAR_DEPENDENCY', // we should fix all other circular imports
8+
'UNUSED_EXTERNAL_IMPORT', // to avoid throw on unused externals
9+
]
10+
11+
export default {
12+
external: [
13+
'lodash',
14+
'lodash/fp',
15+
'prop-types',
16+
'react',
17+
'react-dom',
18+
'react-is',
19+
],
20+
input: 'app.js',
21+
onwarn: (warning, warn) => {
22+
if (warningWhitelist.includes(warning.code)) {
23+
warn(warning)
24+
return
25+
}
26+
27+
throw warning
28+
},
29+
output: {
30+
file: 'bundle.js',
31+
format: 'iife',
32+
globals: {
33+
lodash: '_',
34+
'lodash/fp': 'fp',
35+
'prop-types': 'PropTypes',
36+
react: 'React',
37+
'react-dom': 'ReactDOM',
38+
'react-is': 'ReactIs',
39+
},
40+
sourcemap: true,
41+
},
42+
plugins: [
43+
replace({
44+
'process.env.NODE_ENV': JSON.stringify('development'),
45+
}),
46+
resolve(),
47+
commonjs({
48+
include: 'node_modules/**',
49+
namedExports: {
50+
'node_modules/keyboard-key/src/keyboardKey.js': [
51+
'ArrowDown',
52+
'ArrowUp',
53+
'ArrowLeft',
54+
'ArrowRight',
55+
'End',
56+
'Enter',
57+
'Escape',
58+
'Home',
59+
'getCode',
60+
'Spacebar',
61+
'Tab',
62+
],
63+
'node_modules/what-input/dist/what-input.js': ['ask'],
64+
},
65+
}),
66+
],
67+
}

‎docs/src/prototypes/chatMessageWithPopover/ChatMessageWithPopover.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ChatMessage } from '@stardust-ui/react'
22

33
import * as React from 'react'
4-
import * as cx from 'classnames'
4+
import cx from 'classnames'
55
import Popover from './Popover'
66

77
const janeAvatar = {

‎docs/src/prototypes/chatMessageWithPopover/Popover.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from '@stardust-ui/react'
1111
import { ReactChildren } from 'types/utils'
1212
import * as React from 'react'
13-
import * as cx from 'classnames'
13+
import cx from 'classnames'
1414

1515
export interface PopoverProps {
1616
className?: string

‎docs/src/views/IntegrateCustomComponents.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import * as cx from 'classnames'
2+
import cx from 'classnames'
33
import { NavLink } from 'react-router-dom'
44
import { Header } from 'semantic-ui-react'
55
import {

‎package.json

+3-4
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"scripts": {
1414
"build": "gulp build",
1515
"build:docs": "gulp --series dll build:docs",
16-
"build:dist": "gulp --series dll build:dist",
16+
"build:dist": "gulp --series build:dist",
1717
"ci": "yarn lint && yarn prettier && yarn test --strict",
1818
"predeploy:docs": "cross-env NODE_ENV=production yarn build:docs",
1919
"deploy:docs": "gulp deploy:docs",
@@ -37,7 +37,7 @@
3737
"test:watch": "gulp test:watch",
3838
"test:vulns": "snyk test",
3939
"test:visual": "gulp screener",
40-
"test:projects:cra-ts": "gulp test:projects:cra-ts",
40+
"test:projects": "gulp test:projects",
4141
"generate:component": "gulp generate:component"
4242
},
4343
"lint-staged": {
@@ -75,7 +75,6 @@
7575
},
7676
"devDependencies": {
7777
"@babel/standalone": "^7.1.0",
78-
"@types/classnames": "^2.2.4",
7978
"@types/color": "^3.0.0",
8079
"@types/enzyme": "^3.1.14",
8180
"@types/faker": "^4.1.3",
@@ -114,7 +113,7 @@
114113
"gulp-rename": "^1.3.0",
115114
"gulp-replace": "^1.0.0",
116115
"gulp-transform": "^3.0.5",
117-
"gulp-typescript": "^5.0.0-alpha.1",
116+
"gulp-typescript": "^5.0.0",
118117
"gulp-util": "^3.0.8",
119118
"html-webpack-plugin": "^3.2.0",
120119
"husky": "^0.14.3",

‎src/components/Avatar/Avatar.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as PropTypes from 'prop-types'
22
import * as React from 'react'
3-
import { Image, Label, Status } from '../../'
3+
import Image from '../Image/Image'
4+
import Label from '../Label/Label'
5+
import Status from '../Status/Status'
46
import { Extendable, ShorthandValue } from '../../../types/utils'
57
import {
68
createShorthandFactory,

‎src/components/Chat/ChatMessage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import * as PropTypes from 'prop-types'
3-
import * as cx from 'classnames'
3+
import cx from 'classnames'
44

55
import {
66
childrenExist,

‎src/components/Input/Input.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import * as PropTypes from 'prop-types'
3-
import * as cx from 'classnames'
3+
import cx from 'classnames'
44
import * as _ from 'lodash'
55

66
import {

‎src/components/ItemLayout/ItemLayout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import * as PropTypes from 'prop-types'
3-
import * as cx from 'classnames'
3+
import cx from 'classnames'
44

55
import {
66
createShorthandFactory,

‎src/components/Label/Label.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ import {
1313
commonPropTypes,
1414
} from '../../lib'
1515

16-
import { Icon, Image, Layout } from '../..'
16+
import Icon from '../Icon/Icon'
17+
import Image from '../Image/Image'
18+
import Layout from '../Layout/Layout'
1719
import { Accessibility } from '../../lib/accessibility/types'
1820
import { Extendable, ShorthandValue } from '../../../types/utils'
1921

‎src/components/Layout/Layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import * as PropTypes from 'prop-types'
3-
import * as cx from 'classnames'
3+
import cx from 'classnames'
44

55
import { UIComponent, UIComponentProps, commonPropTypes } from '../../lib'
66
import { Extendable } from '../../../types/utils'

‎src/components/Menu/MenuItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as _ from 'lodash'
2-
import * as cx from 'classnames'
2+
import cx from 'classnames'
33
import * as PropTypes from 'prop-types'
44
import * as React from 'react'
55

‎src/components/Popup/Popup.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { createPortal } from 'react-dom'
2+
import * as ReactDOM from 'react-dom'
33
import * as PropTypes from 'prop-types'
44
import * as _ from 'lodash'
55
import { Popper, PopperChildrenProps } from 'react-popper'
@@ -196,7 +196,7 @@ export default class Popup extends AutoControlledComponent<Extendable<PopupProps
196196
{this.state.open &&
197197
Popup.isBrowserContext &&
198198
popupContent &&
199-
createPortal(popupContent, document.body)}
199+
ReactDOM.createPortal(popupContent, document.body)}
200200
</>
201201
)
202202
}

‎src/components/Portal/PortalInner.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as PropTypes from 'prop-types'
22
import * as _ from 'lodash'
3-
import { Component } from 'react'
4-
import { createPortal } from 'react-dom'
3+
import * as React from 'react'
4+
import * as ReactDOM from 'react-dom'
55
import { isBrowser, ChildrenComponentProps, commonPropTypes } from '../../lib'
66

77
export interface PortalInnerProps extends ChildrenComponentProps {
@@ -26,7 +26,7 @@ export interface PortalInnerProps extends ChildrenComponentProps {
2626
/**
2727
* An inner component that allows you to render children outside their parent.
2828
*/
29-
class PortalInner extends Component<PortalInnerProps> {
29+
class PortalInner extends React.Component<PortalInnerProps> {
3030
public static propTypes = {
3131
...commonPropTypes.createCommon({
3232
animated: false,
@@ -55,7 +55,7 @@ class PortalInner extends Component<PortalInnerProps> {
5555
public render() {
5656
const { children, context } = this.props
5757

58-
return context && createPortal(children, context)
58+
return context && ReactDOM.createPortal(children, context)
5959
}
6060
}
6161

‎src/components/Ref/RefFindNode.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as PropTypes from 'prop-types'
22
import * as React from 'react'
3-
import { findDOMNode } from 'react-dom'
3+
import * as ReactDOM from 'react-dom'
44

55
import { ChildrenComponentProps, handleRef } from '../../lib'
66

@@ -20,7 +20,7 @@ export default class RefFindNode extends React.Component<RefFindNodeProps> {
2020
}
2121

2222
componentDidMount() {
23-
handleRef(this.props.innerRef, findDOMNode(this))
23+
handleRef(this.props.innerRef, ReactDOM.findDOMNode(this))
2424
}
2525

2626
componentWillUnmount() {

‎src/components/Status/Status.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as PropTypes from 'prop-types'
22
import * as React from 'react'
3-
import { Icon } from '../../'
3+
import Icon from '../Icon/Icon'
44

55
import {
66
customPropTypes,

‎src/components/Tree/TreeItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
UIComponentProps,
1616
ChildrenComponentProps,
1717
} from '../../lib'
18-
import { ShorthandRenderFunction, ShorthandValue } from 'utils'
18+
import { ShorthandRenderFunction, ShorthandValue } from '../../../types/utils'
1919

2020
export interface TreeItemProps extends UIComponentProps, ChildrenComponentProps {
2121
/**

0 commit comments

Comments
 (0)