Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bundle UMD with rollup #159

Merged
merged 4 commits into from
May 1, 2018
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 7 additions & 0 deletions .size-snapshot.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"dist/index.umd.js": {
"bundled": 140771,
"minified": 38655,
"gzipped": 12382
}
}
9 changes: 8 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@
"/typings/react-popper.d.ts"
],
"scripts": {
"build": "npm run build:clean && npm run build:es && npm run build:cjs && npm run build:flow",
"build": "npm run build:clean && npm run build:es && npm run build:cjs && npm run build:umd && npm run build:flow",
"build:clean": "rimraf dist/ && rimraf lib/",
"build:umd": "rollup -c",
"build:es": "cross-env BABEL_ENV=es babel src --ignore '*.test.js,__mocks__' --out-dir lib/es",
"build:cjs": "cross-env BABEL_ENV=cjs babel src --ignore '*.test.js,__mocks__' --out-dir lib/cjs",
"build:flow": "flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib/cjs",
Expand Down Expand Up @@ -103,6 +104,12 @@
"react-spring": "^4.0.1",
"recompose": "^0.26.0",
"rimraf": "^2.6.2",
"rollup": "^0.58.2",
"rollup-plugin-babel": "^3.0.4",
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-size-snapshot": "^0.4.0",
"rollup-plugin-uglify": "^3.0.0",
"typescript": "^2.8.1"
}
}
55 changes: 55 additions & 0 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May we use rollup-plugin-babel-minify instead? I got better outputs with it in Popper.js

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

uglify 37.75 kb
babel-minify 38.15 kb

Copy link
Member

@FezVrasta FezVrasta May 1, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did it. Nothing is changed.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool thanks!

import { sizeSnapshot } from 'rollup-plugin-size-snapshot';

const input = './src/index.js';

const umdGlobals = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Popper.js should be marked as external as well.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it matter? Do you think somebody will use popper.js and react-popper in one script? For react-popper consumer there will be another action to add popper dependency.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't want to get every week a new issue with someone that asks me to release a new UMD bundle with the new Popper.js version.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay.

react: 'React',
'react-dom': 'ReactDOM',
};

const getBabelOptions = () => ({
babelrc: false,
exclude: '**/node_modules/**',
presets: [['env', { modules: false }], 'stage-1', 'react'],
plugins: ['external-helpers'],
});

export default [
{
input,
output: {
file: 'dist/index.umd.js',
format: 'umd',
name: 'ReactPopper',
globals: umdGlobals,
},
external: Object.keys(umdGlobals),
plugins: [
nodeResolve(),
commonjs({ include: '**/node_modules/**' }),
babel(getBabelOptions()),
sizeSnapshot(),
],
},

{
input,
output: {
file: 'dist/index.min.js',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should probably be index.umd.min.js to keep consistency

format: 'umd',
name: 'ReactPopper',
globals: umdGlobals,
},
external: Object.keys(umdGlobals),
plugins: [
nodeResolve(),
commonjs({ include: '**/node_modules/**' }),
babel(getBabelOptions()),
uglify(),
],
},
];
6 changes: 3 additions & 3 deletions src/Manager.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// @flow
import React, { Component, type Node } from "react";
import * as React from "react";
import createContext, { type Context } from "create-react-context";

export const ManagerContext: Context<{
Expand All @@ -8,7 +8,7 @@ export const ManagerContext: Context<{
}> = createContext({ getReferenceRef: undefined, referenceNode: undefined });

export type ManagerProps = {
children: Node,
children: React.Node,
};
type ManagerState = {
context: {
Expand All @@ -17,7 +17,7 @@ type ManagerState = {
},
};

export default class Manager extends Component<ManagerProps, ManagerState> {
export default class Manager extends React.Component<ManagerProps, ManagerState> {
constructor() {
super();
this.state = {
Expand Down
6 changes: 3 additions & 3 deletions src/Popper.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// @flow
import React, { Component, type Node } from 'react';
import * as React from 'react';
import PopperJS, {
type Placement,
type Instance as PopperJS$Instance,
Expand Down Expand Up @@ -28,7 +28,7 @@ export type PopperChildrenProps = {|
scheduleUpdate: () => void,
arrowProps: PopperArrowProps,
|};
export type PopperChildren = PopperChildrenProps => Node;
export type PopperChildren = PopperChildrenProps => React.Node;

export type PopperProps = {
modifiers?: Modifiers,
Expand Down Expand Up @@ -56,7 +56,7 @@ const initialStyle = {

const initialArrowStyle = {};

export class InnerPopper extends Component<PopperProps, PopperState> {
export class InnerPopper extends React.Component<PopperProps, PopperState> {
static defaultProps = {
placement: 'bottom',
eventsEnabled: true,
Expand Down
4 changes: 2 additions & 2 deletions src/Reference.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
// @flow
import React, { type Node } from 'react';
import * as React from 'react';
import warning from 'warning';
import { ManagerContext } from './Manager';
import { unwrapArray } from './utils';

export type ReferenceChildrenProps = { ref: (?HTMLElement) => void };
export type ReferenceProps = {
children: ReferenceChildrenProps => Node,
children: ReferenceChildrenProps => React.Node,
};

export default function Reference({ children }: ReferenceProps) {
Expand Down