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.

Sign up for GitHub

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

Revamped build setup - provide module build #49

Closed
wants to merge 1 commit into from
Closed

Revamped build setup - provide module build #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 0 additions & 18 deletions .babelrc
View file
Open in desktop

This file was deleted.

23 changes: 23 additions & 0 deletions .babelrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
const loose = true;
Copy link
Owner

Choose a reason for hiding this comment

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

I'm not really a fan of loose mode given possible divergence from spec behavior. Can you explain why you want to do this?

FWIW, your size wins are pretty much all coming from this.


module.exports = {
presets: [
[
'@babel/preset-env',
{
modules: false,
loose,
targets: {
browsers: ['>0.25%']
Copy link
Owner

Choose a reason for hiding this comment

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

Can you include "not dead" here?

},
}
],
'@babel/preset-react',
'@babel/preset-flow',
],
plugins: [
['@babel/plugin-proposal-class-properties', { loose }],
['@babel/plugin-proposal-object-rest-spread', { loose }],
Copy link
Owner

Choose a reason for hiding this comment

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

This can go away after you rebase.

['transform-react-remove-prop-types', { mode: 'unsafe-wrap' }],
Copy link
Owner

Choose a reason for hiding this comment

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

This is actually going to break things in production. I currently iterate over propTypes in shouldComponentUpdate. You could switch to wrap mode but then sCU won't do anything. I'm not sure why I wrote it like I did though, that should really just be a shallowEqual check…

qrcode.react/src/index.js

Lines 91 to 95 in c391441

shouldComponentUpdate(nextProps: QRProps) {
return Object.keys(QRCodeCanvas.propTypes).some(
(k) => this.props[k] !== nextProps[k]
);
}

]
};
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.DS_Store
node_modules/
lib/
es/
examples/bundle.js
.vscode/
6 changes: 3 additions & 3 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ all: examples/bundle.js
lib:
mkdir -p lib

lib/index.js: lib src/index.js yarn.lock .babelrc
./node_modules/.bin/babel src -d lib
lib/index.js: lib src/index.js yarn.lock .babelrc.js
./node_modules/.bin/rollup -c

examples/bundle.js: lib/index.js examples/demo.js
./node_modules/.bin/webpack

clean:
rm -rf lib examples/bundle.js
rm -rf lib es examples/bundle.js
8 changes: 6 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
],
"homepage": "http://zpao.github.io/qrcode.react",
"main": "lib/index.js",
"module": "es/index.js",
Copy link
Contributor

Choose a reason for hiding this comment

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

Default exports in ES modules are a dangerous with Webpack. I'd omit this.

Copy link
Author

Choose a reason for hiding this comment

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

Why are they dangerous? ESM modules help webpack to make your bundles smaller.

Copy link
Contributor

Choose a reason for hiding this comment

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

If you use CommonJS modules and Webpacks default config, any module that exposes both a CJS version as main and an ESM version as module will

  • work in NodeJS
  • fail when bundled through Webpack

The reason is that Webpack transforms the default export to module.exports.default = QRCode; while rollup turns it into module.exports = QRCode;, making the whole thing a pain for CJS users writing isomorphic code.

See for example this issue: civiccc/react-waypoint#246

Copy link
Owner

Choose a reason for hiding this comment

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

The demo that gets built doesn't work, for this very reason. Please ensure it does. That could be done just by tweaking our webpack config to not look at the module field but that means anybody using this package would need to do the same, so I agree with @realityking on just removing it for now.

"scripts": {
"flow": "flow",
"lint": "eslint src/ examples/demo.js",
Expand All @@ -25,7 +26,8 @@
},
"license": "ISC",
"files": [
"lib"
"lib",
"es"
],
"dependencies": {
"prop-types": "^15.6.0",
Expand All @@ -35,7 +37,6 @@
"react": "^15.5.3 || ^16.0.0"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.39",
"@babel/core": "^7.0.0-beta.39",
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.39",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.39",
Expand All @@ -44,6 +45,7 @@
"@babel/preset-react": "^7.0.0-beta.39",
"babel-eslint": "^8.2.1",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.13",
"eslint": "^4.17.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-react": "^7.6.1",
Expand All @@ -52,6 +54,8 @@
"prettier": "^1.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"rollup": "^0.58.2",
"rollup-plugin-babel": "^4.0.0-beta.4",
"webpack": "^3.11.0"
}
}
23 changes: 23 additions & 0 deletions rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import pkg from './package.json';
import babel from 'rollup-plugin-babel';

const makeExternalPredicate = externalArr => {
if (externalArr.length === 0) {
return () => false;
}
const pattern = new RegExp(`^(${externalArr.join('|')})($|/)`);
return id => pattern.test(id);
};

export default {
input: 'src/index.js',
output: [
{ file: pkg.main, format: 'cjs' },
{ file: pkg.module, format: 'es' },
],
external: makeExternalPredicate([
...Object.keys(pkg.dependencies || {}),
...Object.keys(pkg.peerDependencies || {}),
]),
plugins: [babel()],
};
14 changes: 5 additions & 9 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
// @flow

'use strict';

const React = require('react');
const PropTypes = require('prop-types');
import * as React from 'react';
import * as PropTypes from 'prop-types';
// qr.js doesn't handle error level of zero (M) so we need to do it right,
// thus the deep require.
const QRCodeImpl = require('qr.js/lib/QRCode');
const ErrorCorrectLevel = require('qr.js/lib/ErrorCorrectLevel');
import QRCodeImpl from 'qr.js/lib/QRCode';
import ErrorCorrectLevel from 'qr.js/lib/ErrorCorrectLevel';

function getBackingStorePixelRatio(ctx: CanvasRenderingContext2D): number {
return (
Expand Down Expand Up @@ -201,7 +198,6 @@ class QRCodeSVG extends React.Component<QRProps> {
// For level 40, 31329 -> 2
const ops = [];
cells.forEach(function(row, y) {
let lastIsDark = false;
Copy link
Owner

Choose a reason for hiding this comment

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

This is unrelated. I'll remove that separately.

let start = null;
row.forEach(function(cell, x) {
if (!cell && start !== null) {
Expand Down Expand Up @@ -258,4 +254,4 @@ const QRCode = (props: RootProps): React.Node => {

QRCode.defaultProps = {renderAs: 'canvas', ...DEFAULT_PROPS};

module.exports = QRCode;
export default QRCode;
110 changes: 54 additions & 56 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,6 @@
# yarn lockfile v1


"@babel/cli@^7.0.0-beta.39":
version "7.0.0-beta.39"
resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.0.0-beta.39.tgz#0764d7ed63880ab322762f1401cc32bb9b4ec006"
dependencies:
commander "^2.8.1"
convert-source-map "^1.1.0"
fs-readdir-recursive "^1.0.0"
glob "^7.0.0"
lodash "^4.2.0"
output-file-sync "^2.0.0"
slash "^1.0.0"
source-map "^0.5.0"
optionalDependencies:
chokidar "^1.6.1"

"@babel/[email protected]":
version "7.0.0-beta.36"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.36.tgz#2349d7ec04b3a06945ae173280ef8579b63728e4"
Expand Down Expand Up @@ -146,6 +131,13 @@
"@babel/types" "7.0.0-beta.39"
lodash "^4.2.0"

"@babel/[email protected]":
version "7.0.0-beta.44"
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.44.tgz#60edc68cdf17e13eaca5be813c96127303085133"
dependencies:
"@babel/types" "7.0.0-beta.44"
lodash "^4.2.0"

"@babel/[email protected]":
version "7.0.0-beta.39"
resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.0.0-beta.39.tgz#3ebf72bc2cb6453e9c5930a667496bdfa64bcf5e"
Expand Down Expand Up @@ -567,6 +559,22 @@
lodash "^4.2.0"
to-fast-properties "^2.0.0"

"@babel/[email protected]":
version "7.0.0-beta.44"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
dependencies:
esutils "^2.0.2"
lodash "^4.2.0"
to-fast-properties "^2.0.0"

"@types/[email protected]":
version "0.0.38"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.38.tgz#c1be40aa933723c608820a99a373a16d215a1ca2"

"@types/node@*":
version "10.0.8"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.0.8.tgz#37b4d91d4e958e4c2ba0be2b86e7ed4ff19b0858"

abbrev@1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
Expand Down Expand Up @@ -801,6 +809,10 @@ babel-loader@^8.0.0-beta.0:
loader-utils "^1.0.2"
mkdirp "^0.5.1"

babel-plugin-transform-react-remove-prop-types@^0.4.13:
version "0.4.13"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.13.tgz#331cfc05099a808238311d78319c27460d481189"

[email protected]:
version "7.0.0-beta.36"
resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.36.tgz#3a3683ba6a9a1e02b0aa507c8e63435e39305b9e"
Expand Down Expand Up @@ -1003,21 +1015,6 @@ chardet@^0.4.0:
version "0.4.2"
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"

chokidar@^1.6.1:
version "1.6.1"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
dependencies:
anymatch "^1.3.0"
async-each "^1.0.0"
glob-parent "^2.0.0"
inherits "^2.0.1"
is-binary-path "^1.0.0"
is-glob "^2.0.0"
path-is-absolute "^1.0.0"
readdirp "^2.0.0"
optionalDependencies:
fsevents "^1.0.0"

chokidar@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
Expand Down Expand Up @@ -1099,7 +1096,7 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
dependencies:
delayed-stream "~1.0.0"

[email protected], commander@^2.8.1:
[email protected]:
version "2.9.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
dependencies:
Expand Down Expand Up @@ -1528,6 +1525,10 @@ estraverse@~4.1.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.1.1.tgz#f6caca728933a850ef90661d0e17982ba47111a2"

estree-walker@^0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.2.tgz#d3850be7529c9580d815600b53126515e146dd39"

esutils@^2.0.0, esutils@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
Expand Down Expand Up @@ -1699,10 +1700,6 @@ form-data@~2.1.1:
combined-stream "^1.0.5"
mime-types "^2.1.12"

fs-readdir-recursive@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"

fs.realpath@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
Expand Down Expand Up @@ -1795,7 +1792,7 @@ glob-parent@^2.0.0:
dependencies:
is-glob "^2.0.0"

glob@^7.0.0, glob@^7.0.3, glob@^7.0.5:
glob@^7.0.3, glob@^7.0.5:
version "7.1.1"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
dependencies:
Expand Down Expand Up @@ -1846,10 +1843,6 @@ [email protected], graceful-fs@^4.1.2:
version "4.1.10"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"

graceful-fs@^4.1.11:
version "4.1.11"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"

"graceful-readlink@>= 1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
Expand Down Expand Up @@ -2092,10 +2085,6 @@ is-path-inside@^1.0.0:
dependencies:
path-is-inside "^1.0.1"

is-plain-obj@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"

is-posix-bracket@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
Expand Down Expand Up @@ -2590,14 +2579,6 @@ osenv@^0.1.4:
os-homedir "^1.0.0"
os-tmpdir "^1.0.0"

output-file-sync@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-2.0.0.tgz#5d348a1a1eaed1ad168648a01a2d6d13078ce987"
dependencies:
graceful-fs "^4.1.11"
is-plain-obj "^1.1.0"
mkdirp "^0.5.1"

p-finally@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
Expand Down Expand Up @@ -3052,6 +3033,27 @@ ripemd160@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"

rollup-plugin-babel@^4.0.0-beta.4:
version "4.0.0-beta.4"
resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-4.0.0-beta.4.tgz#d869646885d6ad73dd10791a261fb92674a80410"
dependencies:
"@babel/helper-module-imports" "7.0.0-beta.44"
rollup-pluginutils "^2.0.1"

rollup-pluginutils@^2.0.1:
version "2.2.0"
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.2.0.tgz#64ba3f29988b84322bafa188a9f99ca731c95354"
dependencies:
estree-walker "^0.5.2"
micromatch "^2.3.11"

rollup@^0.58.2:
version "0.58.2"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.58.2.tgz#2feddea8c0c022f3e74b35c48e3c21b3433803ce"
dependencies:
"@types/estree" "0.0.38"
"@types/node" "*"

run-async@^2.2.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
Expand Down Expand Up @@ -3116,10 +3118,6 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"

slash@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"

[email protected]:
version "1.0.0"
resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
Expand Down