From 8e4ee5fb7a32bbd2250871b6b699bf39207f80d2 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Fri, 9 Jul 2021 09:35:50 -0400 Subject: [PATCH 1/3] feat(build): support dynamic import add the babel plugin for dynamic import syntax and fixup the path references in webpack and template so the chunks can be loaded dynamically --- .babelrc | 3 ++- package-lock.json | 6 ++++++ package.json | 1 + src/template.ejs | 4 ++-- webpack.config.js | 3 ++- 5 files changed, 13 insertions(+), 4 deletions(-) diff --git a/.babelrc b/.babelrc index b687cb485..43e3ed2f5 100644 --- a/.babelrc +++ b/.babelrc @@ -1,7 +1,8 @@ { "plugins": [ "transform-object-rest-spread", - "transform-require-context" + "transform-require-context", + "syntax-dynamic-import" ], "presets": ["es2015", "react"], } diff --git a/package-lock.json b/package-lock.json index 4bf74b320..09a4b0fae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3370,6 +3370,12 @@ } } }, + "babel-plugin-syntax-dynamic-import": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz", + "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=", + "dev": true + }, "babel-plugin-syntax-flow": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", diff --git a/package.json b/package.json index 54f6ca27e..56c65e53a 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "babel-core": "6.23.1", "babel-eslint": "10.0.3", "babel-loader": "7.1.0", + "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-require-context": "0.1.1", "babel-preset-es2015": "6.22.0", diff --git a/src/template.ejs b/src/template.ejs index afa720981..89afd7f66 100644 --- a/src/template.ejs +++ b/src/template.ejs @@ -59,11 +59,11 @@
- + - + <% if (!htmlWebpackPlugin.options.dynamicMetaTags) { %> diff --git a/webpack.config.js b/webpack.config.js index b1880bc1b..0748d8601 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -72,7 +72,8 @@ module.exports = { mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', output: { path: path.resolve(__dirname, 'build'), - filename: 'js/[name].bundle.js' + filename: 'js/[name].bundle.js', + publicPath: '/' }, resolve: { symlinks: false // Fix local development with `npm link` packages From bc43ad7e29ffa67177d0663bd7c4e15262f38b08 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Mon, 12 Jul 2021 14:32:54 -0400 Subject: [PATCH 2/3] feat(annual-report): dynamically load the world map when it is scrolled to --- src/components/world-map/world-map.jsx | 16 ++--- src/views/annual-report/annual-report.jsx | 86 +++++++++++++---------- 2 files changed, 54 insertions(+), 48 deletions(-) diff --git a/src/components/world-map/world-map.jsx b/src/components/world-map/world-map.jsx index d99d9cb5f..9f179bfa3 100644 --- a/src/components/world-map/world-map.jsx +++ b/src/components/world-map/world-map.jsx @@ -1,17 +1,15 @@ -const Plotly = require('plotly.js/lib/core'); +import React from 'react'; +import PropTypes from 'prop-types'; +import Plotly from 'plotly.js/lib/core'; +import choropleth from 'plotly.js/lib/choropleth'; +import createPlotlyComponent from 'react-plotly.js/factory'; // Load in the trace type for choropleth -Plotly.register([ - require('plotly.js/lib/choropleth') -]); +Plotly.register([choropleth]); // create plotly bundle that only has choropleth plots -import createPlotlyComponent from 'react-plotly.js/factory'; const Plot = createPlotlyComponent(Plotly); -const React = require('react'); -const PropTypes = require('prop-types'); - const WorldMap = props => ( import( + /* webpackChunkName: "world-map" */ + '../../components/world-map/world-map.jsx' +)); + require('./annual-report.scss'); // Some constants used for the page subnav and section refs @@ -831,44 +835,48 @@ class AnnualReport extends React.Component {
- - - - - - - - - - - - + {this.state.currentlyVisible === SECTIONS.reach && + + + + + + + + + + + + + + + }
From 81ff3d6216d6a6dcffb103d84d323509c1ee722f Mon Sep 17 00:00:00 2001 From: rschamp Date: Thu, 5 Aug 2021 11:09:04 -0400 Subject: [PATCH 3/3] Revert "feat(annual-report): dynamically load the world map when it is scrolled to" This reverts commit bc43ad7e29ffa67177d0663bd7c4e15262f38b08. --- src/components/world-map/world-map.jsx | 16 +++-- src/views/annual-report/annual-report.jsx | 86 ++++++++++------------- 2 files changed, 48 insertions(+), 54 deletions(-) diff --git a/src/components/world-map/world-map.jsx b/src/components/world-map/world-map.jsx index 9f179bfa3..d99d9cb5f 100644 --- a/src/components/world-map/world-map.jsx +++ b/src/components/world-map/world-map.jsx @@ -1,15 +1,17 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import Plotly from 'plotly.js/lib/core'; -import choropleth from 'plotly.js/lib/choropleth'; -import createPlotlyComponent from 'react-plotly.js/factory'; +const Plotly = require('plotly.js/lib/core'); // Load in the trace type for choropleth -Plotly.register([choropleth]); +Plotly.register([ + require('plotly.js/lib/choropleth') +]); // create plotly bundle that only has choropleth plots +import createPlotlyComponent from 'react-plotly.js/factory'; const Plot = createPlotlyComponent(Plotly); +const React = require('react'); +const PropTypes = require('prop-types'); + const WorldMap = props => ( import( - /* webpackChunkName: "world-map" */ - '../../components/world-map/world-map.jsx' -)); - require('./annual-report.scss'); // Some constants used for the page subnav and section refs @@ -835,48 +831,44 @@ class AnnualReport extends React.Component {
- {this.state.currentlyVisible === SECTIONS.reach && - - - - - - - - - - - - - - - } + + + + + + + + + + + +