Skip to content

Commit

Permalink
[refactor] Improved build process
Browse files Browse the repository at this point in the history
BREAKING CHANGE: You have to include `popper-utils.js` before `popper.js` if you want to access `Popper.Utils` methods.
This is needed to reduce the size of the `popper.js` bundle from 6.2kb to 5.83kb!

This commit also changes the way Popper is built, making it easier to maintain and use.

prettier-eslint has been fixed as well
  • Loading branch information
Federico Zivolo committed Apr 17, 2017
1 parent 6fc4cf2 commit f6c7e75
Show file tree
Hide file tree
Showing 21 changed files with 265 additions and 150 deletions.
9 changes: 8 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,13 @@
"no-const-assign": "error",
"prefer-const": "error",
"no-var": "error",
"comma-dangle": ["error", "only-multiline"]
"comma-dangle": ["error", {
"arrays": "always-multiline",
"objects": "always-multiline",
"imports": "always-multiline",
"exports": "always-multiline",
"functions": "ignore"
}],
"object-curly-spacing": ["error", "always"]
}
}
32 changes: 12 additions & 20 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,36 +1,26 @@
{
"name": "popper.js",
"version": "1.6.0",
"version": "1.7.0",
"description": "A kickass library to manage your poppers",
"main": "dist/popper.es5.js",
"jsnext:main": "dist/popper.js",
"module": "dist/popper.js",
"scripts": {
"prepublish": "in-publish && npm run build || exit 0 ",
"precommit": "lint-staged && opt --in pre-commit --exec \"npm start validate\"",
"prebuild": "npm run lint",
"pretest": "npm run lint",
"build": "npm run build:popper && npm run build:tooltip",
"build:dev": "npm run build:popper:dev & npm run build:tooltip:dev",
"build:popper": "npm run build:popper:next && npm run build:popper:es5 && npm run build:popper:next:min && npm run build:popper:es5:min",
"build:popper:dev": "npm run build:popper:next -- --watch",
"build:popper:next": "rollup -c ./scripts/rollup.config.popper.js",
"build:popper:next:min": "node ./scripts/minify -i ./dist/popper.js -o ./dist/popper.min.js && gzipped ./dist/popper.min.js",
"build:popper:es5": "rollup -c ./scripts/rollup.config.popper.es5.js",
"build:popper:es5:min": "node ./scripts/minify -i ./dist/popper.es5.js -o ./dist/popper.es5.min.js --es5=true && gzipped ./dist/popper.es5.min.js",
"build:tooltip": "npm run build:tooltip:next && npm run build:tooltip:es5 && npm run build:tooltip:next:min && npm run build:tooltip:es5:min",
"build:tooltip:dev": "npm run build:tooltip:next -- --watch",
"build:tooltip:next": "rollup -c ./scripts/rollup.config.tooltip.js",
"build:tooltip:next:min": "node ./scripts/minify -i ./dist/tooltip.js -o ./dist/tooltip.min.js && gzipped ./dist/tooltip.min.js",
"build:tooltip:es5": "rollup -c ./scripts/rollup.config.tooltip.es5.js",
"build:tooltip:es5:min": "node ./scripts/minify -i ./dist/tooltip.es5.js -o ./dist/tooltip.es5.min.js --es5=true && gzipped ./dist/tooltip.es5.min.js",
"build": "npm run build:popper && npm run build:tooltip && npm run build:popper-utils",
"build:popper": "node ./scripts/bundle.js --build=popper",
"build:popper-utils": "node ./scripts/bundle.js --build=popper-utils",
"build:tooltip": "node ./scripts/bundle.js --build=tooltip",
"lint": "eslint .",
"test": "karma start ./scripts/karma.conf.js",
"test:dev": "NODE_ENV=development karma start ./scripts/karma.conf.js",
"coverage": "NODE_ENV=coverage npm run test",
"docs": "npm run docs:popper && npm run docs:tooltip",
"docs:serve": "cd docs && jekyll serve & open http://localhost:4000",
"docs:popper": "rollup -c ./scripts/rollup.config.popper.js -o ./.tmp/popper.js && jsdoc2md ./.tmp/popper.js > ./docs/_includes/popper-documentation.md",
"docs:tooltip": "rollup -c ./scripts/rollup.config.tooltip.js -o ./.tmp/tooltip.js && jsdoc2md ./.tmp/tooltip.js > ./docs/_includes/tooltip-documentation.md"
"docs:popper": "npm run build:popper && jsdoc2md ./dist/popper.js > ./docs/_includes/popper-documentation.md",
"docs:tooltip": "npm run build:tooltip && jsdoc2md ./dist/tooltip.js > ./docs/_includes/tooltip-documentation.md"
},
"repository": {
"type": "git",
Expand All @@ -55,6 +45,7 @@
],
"homepage": "https://popper.js.org",
"devDependencies": {
"async": "^2.3.0",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.2",
"babel-plugin-external-helpers": "^6.8.0",
Expand All @@ -64,6 +55,7 @@
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"chai": "^3.5.0",
"colors": "^1.1.2",
"eslint": "^3.17.1",
"eslint-plugin-jasmine": "^2.1.0",
"gzipped": "^0.0.5",
Expand All @@ -83,7 +75,7 @@
"lint-staged": "^3.4.0",
"pre-commit": "^1.2.2",
"prettier": "^1.1.0",
"prettier-eslint": "^5.1.0",
"prettier-eslint-cli": "^3.3.0",
"rollup": "^0.41.5",
"rollup-plugin-babel": "^2.6.1",
"rollup-watch": "^3.1.0",
Expand All @@ -92,7 +84,7 @@
},
"lint-staged": {
"*.js": [
"prettier-eslint --single-quote --trailing-comma es5 --write \"{src,scripts,tests}/**/*.js\"",
"prettier-eslint --write \"{src,scripts,tests}/**/*.js\"",
"git add"
]
}
Expand Down
61 changes: 61 additions & 0 deletions scripts/bundle.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
const { exec, execSync } = require('child_process');
const { waterfall } = require('async');
const { argv } = require('yargs');
const colors = require('colors');
const { build } = argv;

const rollup = 'rollup -c ./scripts/rollup.config.js';
const minify = 'node ./scripts/minify.js';
const gzipped = '$(npm bin)/gzipped';

console.log(colors.green(`⚙️ Compiling target '${build}'...`));
const next = done =>
exec(`${rollup} --environment BUILD:${build}`, error => {
if (error) {
console.error(`${build}: ${error}`);
}
exec(`${minify} -i ./dist/${build}.js -o ./dist/${build}.min.js`, error => {
if (error) {
console.error(`${build}.minify: ${error}`);
}
console.info(
colors.yellow(`${build}`),
`\n${execSync(`${gzipped} ./dist/${build}.js`).toString()}`
);
console.info(
colors.yellow(`${build}.min`),
`\n${execSync(`${gzipped} ./dist/${build}.min.js`).toString()}`
);
done();
});
});

const es5 = done =>
exec(`${rollup} --environment BUILD:${build},ES5`, error => {
if (error) {
console.error(`${build}.es5: ${error}`);
}
exec(
`${minify} -i ./dist/${build}.es5.js -o ./dist/${build}.es5.min.js`,
error => {
if (error) {
console.error(`${build}.es5.minify: ${error}`);
}
console.info(
colors.yellow(`${build}.es5`),
`\n${execSync(`${gzipped} ./dist/${build}.es5.js`).toString()}`
);
console.info(
colors.yellow(`${build}.es5.min`),
`\n${execSync(`${gzipped} ./dist/${build}.es5.min.js`).toString()}`
);
done();
}
);
});

waterfall([next, es5], error => {
if (error) {
console.error(`${build}: ${error}`);
}
});
7 changes: 0 additions & 7 deletions scripts/rollup.config.base.js

This file was deleted.

10 changes: 0 additions & 10 deletions scripts/rollup.config.es5.js

This file was deleted.

44 changes: 44 additions & 0 deletions scripts/rollup.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import babel from 'rollup-plugin-babel';

const ROOT = `${__dirname}/..`;
const ES5 = process.env.ES5;
const BUILD = process.env.BUILD;

const babelConfig = ES5
? {
presets: [['es2015', { modules: false }], 'stage-2'],
}
: {};
const es5Ext = ES5 ? '.es5' : '';

let entry, dest, moduleName, sourceMapFile;
switch (BUILD) {
case 'popper':
moduleName = 'Popper';
entry = `${ROOT}/src/popper/index.js`;
dest = `${ROOT}/dist/popper${es5Ext}.js`;
sourceMapFile = `${ROOT}/dist/popper${es5Ext}.js.map`;
break;
case 'popper-utils':
moduleName = 'PopperUtils';
entry = `${ROOT}/src/popper/utils/index.js`;
dest = `${ROOT}/dist/popper-utils${es5Ext}.js`;
sourceMapFile = `${ROOT}/dist/popper-utils${es5Ext}.js.map`;
break;
case 'tooltip':
moduleName = 'Popper';
entry = `${ROOT}/src/tooltip/index.js`;
dest = `${ROOT}/dist/tooltip${es5Ext}.js`;
sourceMapFile = `${ROOT}/dist/tooltip${es5Ext}.js.map`;
break;
}

export default {
entry,
dest,
moduleName,
format: 'umd',
sourceMap: true,
sourceMapFile,
plugins: [babel(babelConfig)],
};
11 changes: 0 additions & 11 deletions scripts/rollup.config.popper.es5.js

This file was deleted.

11 changes: 0 additions & 11 deletions scripts/rollup.config.popper.js

This file was deleted.

9 changes: 0 additions & 9 deletions scripts/rollup.config.tooltip.es5.js

This file was deleted.

15 changes: 0 additions & 15 deletions scripts/rollup.config.tooltip.js

This file was deleted.

8 changes: 4 additions & 4 deletions src/popper/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// Utils
import Utils from './utils/index';
import debounce from './utils/debounce';
import setStyles from './utils/setStyles';
import getSupportedPropertyName from './utils/getSupportedPropertyName';
Expand Down Expand Up @@ -337,10 +336,12 @@ export default class Popper {
}

/**
* Collection of utilities useful when writing custom modifiers
* Collection of utilities useful when writing custom modifiers.
* Starting from version 1.7, this method is available only if you
* include `popper-utils.js` before `popper.js`.
* @memberof Popper
*/
static Utils = Utils;
static Utils = window.PopperUtils;

/**
* List of accepted placements to use as values of the `placement` option
Expand Down Expand Up @@ -371,7 +372,6 @@ export default class Popper {
static Defaults = DEFAULTS;
}


/**
* The `referenceObject` is an object that provides an interface compatible with Popper.js
* and lets you use it as replacement of a real DOM node.
Expand Down
4 changes: 2 additions & 2 deletions src/popper/utils/computeAutoPlacement.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function computeAutoPlacement(
placement,
refRect,
popper,
reference,
reference
) {
if (placement.indexOf('auto') === -1) {
return placement;
Expand All @@ -29,7 +29,7 @@ export default function computeAutoPlacement(
};

const computedPlacement = Object.keys(sides).sort(
(a, b) => sides[b] - sides[a],
(a, b) => sides[b] - sides[a]
)[0];
const variation = placement.split('-')[1];

Expand Down
4 changes: 3 additions & 1 deletion src/popper/utils/findCommonOffsetParent.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ export default function findCommonOffsetParent(element1, element2) {
}

// Here we make sure to give as "start" the element that comes first in the DOM
const order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
const order =
element1.compareDocumentPosition(element2) &
Node.DOCUMENT_POSITION_FOLLOWING;
const start = order ? element1 : element2;
const end = order ? element2 : element1;

Expand Down
4 changes: 2 additions & 2 deletions src/popper/utils/getBordersSize.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function getBordersSize(styles, axis) {
const sideB = sideA === 'Left' ? 'Right' : 'Bottom';

return (
Number(styles[`border${sideA}Width`].split('px')[0]) +
Number(styles[`border${sideB}Width`].split('px')[0])
+styles[`border${sideA}Width`].split('px')[0] +
+styles[`border${sideB}Width`].split('px')[0]
);
}
15 changes: 6 additions & 9 deletions src/popper/utils/getBoundingClientRect.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,12 @@ export default function getBoundingClientRect(element) {
};

// subtract scrollbar size from sizes
let width, height;
if (element.nodeName === 'HTML') {
const sizes = getWindowSizes();
width = sizes.width;
height = sizes.height;
} else {
width = element.clientWidth || result.right - result.left;
height = element.clientHeight || result.bottom - result.top;
}
const sizes = element.nodeName === 'HTML' ? getWindowSizes() : {};
const width =
sizes.width || element.clientWidth || result.right - result.left;
const height =
sizes.height || element.clientHeight || result.bottom - result.top;

let horizScrollbar = element.offsetWidth - width;
let vertScrollbar = element.offsetHeight - height;

Expand Down
12 changes: 6 additions & 6 deletions src/popper/utils/getClientRect.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
/**
* Given the popper offsets, generate an output similar to getBoundingClientRect
* Given element offsets, generate an output similar to getBoundingClientRect
* @method
* @memberof Popper.Utils
* @argument {Object} popperOffsets
* @argument {Object} offsets
* @returns {Object} ClientRect like output
*/
export default function getClientRect(popperOffsets) {
export default function getClientRect(offsets) {
return {
...popperOffsets,
right: popperOffsets.left + popperOffsets.width,
bottom: popperOffsets.top + popperOffsets.height,
...offsets,
right: offsets.left + offsets.width,
bottom: offsets.top + offsets.height,
};
}
Loading

0 comments on commit f6c7e75

Please sign in to comment.