diff --git a/package.json b/package.json index 3a485a08..ae65ea83 100644 --- a/package.json +++ b/package.json @@ -3,14 +3,14 @@ "version": "1.1.0", "description": "Extendable file viewer for web", "main": "dist/index.js", - "module": "dist/index.js", + "module": "dist-es/index.js", "repository": { "type": "git", "url": "git+https://github.com/plangrid/react-file-viewer.git" }, "scripts": { "dev": "webpack -d --watch", - "build": "webpack -p --progress", + "build": "webpack -p --progress --profile --json > stats.json", "start": "node ./scripts/start.js", "lint": "node_modules/.bin/eslint ./src/**/*.jsx", "test": "node_modules/.bin/jest --env=jsdom --watch", @@ -41,6 +41,7 @@ "devDependencies": { "autoprefixer": "^7.1.0", "babel-core": "^6.24.1", + "babel-eslint": "^10.0.3", "babel-jest": "^20.0.3", "babel-loader": "^7.0.0", "babel-plugin-transform-class-properties": "^6.19.0", @@ -75,9 +76,11 @@ "style-loader": "^0.17.0", "url-loader": "^0.5.8", "webpack": "^2.5.1", + "webpack-bundle-analyzer": "^3.6.0", "webpack-dev-server": "^2.4.5" }, "dependencies": { + "@loadable/component": "^5.10.3", "comma-separated-values": "^3.6.4", "mammoth": "1.3.6", "pdfjs-dist": "1.8.357", @@ -112,6 +115,7 @@ }, "eslintConfig": { "extends": "airbnb", + "parser": "babel-eslint", "plugins": [ "import" ], diff --git a/src/components/drivers/index.js b/src/components/drivers/index.js deleted file mode 100644 index 328cfe0c..00000000 --- a/src/components/drivers/index.js +++ /dev/null @@ -1,13 +0,0 @@ -// Copyright (c) 2017 PlanGrid, Inc. - -export { default as CsvViewer } from './csv-viewer'; -export { default as Photo360Viewer } from './photo360-viewer'; -export { default as PDFViewer } from './pdf-viewer'; -export { default as DocxViewer } from './docx-viewer'; -export { default as VideoViewer } from './video-viewer'; -export { default as XlsxViewer } from './xlsx-viewer'; -export { default as XBimViewer } from './xbim-viewer'; -export { default as UnsupportedViewer } from './unsupported-viewer'; -export { default as PhotoViewer } from './photo-viewer'; -export { default as PhotoViewerWrapper } from './photo-viewer-wrapper'; -export { default as AudioViewer } from './audio-viewer'; diff --git a/src/components/file-viewer.jsx b/src/components/file-viewer.jsx index f1a524e8..7dc40ac8 100644 --- a/src/components/file-viewer.jsx +++ b/src/components/file-viewer.jsx @@ -5,17 +5,23 @@ import PropTypes from 'prop-types'; import 'styles/main.scss'; import withFetching from './fetch-wrapper'; -import { - CsvViewer, - DocxViewer, - VideoViewer, - XlsxViewer, - XBimViewer, - PDFViewer, - UnsupportedViewer, - PhotoViewerWrapper, - AudioViewer, -} from './drivers'; +import loadable from '@loadable/component'; + +const CsvViewer = loadable(() => import('./drivers/csv-viewer')); +const Photo360Viewer = loadable(() => import('./drivers/photo360-viewer')); +const PDFViewer = loadable(() => import('./drivers/pdf-viewer')); +const DocxViewer = loadable(() => import('./drivers/docx-viewer')); +const VideoViewer = loadable(() => import('./drivers/video-viewer')); +const XlsxViewer = loadable(() => import('./drivers/xlsx-viewer')); +const XBimViewer = loadable(() => import('./drivers/xbim-viewer')); +const UnsupportedViewer = loadable(() => + import('./drivers/unsupported-viewer'), +); +const PhotoViewer = loadable(() => import('./drivers/photo-viewer')); +const PhotoViewerWrapper = loadable(() => + import('./drivers/photo-viewer-wrapper'), +); +const AudioViewer = loadable(() => import('./drivers/audio-viewer')); class FileViewer extends Component { constructor(props) { @@ -38,7 +44,9 @@ class FileViewer extends Component { return withFetching(CsvViewer, this.props); } case 'xlsx': { - const newProps = Object.assign({}, this.props, { responseType: 'arraybuffer' }); + const newProps = Object.assign({}, this.props, { + responseType: 'arraybuffer', + }); return withFetching(XlsxViewer, newProps); } case 'jpg': @@ -75,7 +83,11 @@ class FileViewer extends Component { return (