make component async

.babelrc

@@ -2,14 +2,14 @@
     "presets": ["@babel/preset-env", "@babel/preset-react"],
     "env": {
         "production": {
-            "plugins": ["@babel/plugin-proposal-object-rest-spread", "styled-jsx/babel"]
+            "plugins": ["@babel/plugin-proposal-object-rest-spread", "styled-jsx/babel", "@babel/plugin-syntax-dynamic-import"]
         },
         "development": {
-            "plugins": ["@babel/plugin-proposal-object-rest-spread", "styled-jsx/babel"]
+            "plugins": ["@babel/plugin-proposal-object-rest-spread", "styled-jsx/babel", "@babel/plugin-syntax-dynamic-import"]
         },
         "test": {
-            "plugins": ["@babel/plugin-proposal-object-rest-spread", "styled-jsx/babel-test"]
+            "plugins": ["@babel/plugin-proposal-object-rest-spread", "styled-jsx/babel-test", "@babel/plugin-syntax-dynamic-import"]
         }
     }
   }
-  
+

MANIFEST.in

@@ -1,5 +1,7 @@
 include dash_player/dash_player.min.js
 include dash_player/dash_player.dev.js
+include dash_player/async-dashplayer.js
+include dash_player/async-dashplayer.js.map
 include dash_player/metadata.json
 include dash_player/package.json
 include README.md

R/internal.R

@@ -10,6 +10,18 @@ version = "1.0.6", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'dash_player.min.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashPlayer",
+all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
+`dash_player` = structure(list(name = "dash_player",
+version = "1.0.6", src = list(href = NULL,
+file = "deps"), meta = NULL,
+script = 'async-dashplayer.js',
+stylesheet = NULL, head = NULL, attachment = NULL, package = "dashPlayer",
+all_files = FALSE, async = TRUE), class = "html_dependency"),
+`dash_player` = structure(list(name = "dash_player",
+version = "1.0.6", src = list(href = NULL,
+file = "deps"), meta = NULL,
+script = 'async-dashplayer.js.map',
+stylesheet = NULL, head = NULL, attachment = NULL, package = "dashPlayer",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"))
 return(deps_metadata)
 }

dash_player/__init__.py

@@ -48,6 +48,24 @@ _js_dist = [
         ).format(__version__),
         "dynamic": True,
     },
+    {
+        "relative_package_path": "async-dashplayer.js",
+        "namespace": "dash_player",
+        "external_url": (
+            "https://unpkg.com/@plotly/dash-player@{}"
+            "/dash_player/async-dashplayer.js"
+        ).format(__version__),
+        'async': True
+    },
+    {
+        "relative_package_path": "async-dashplayer.js.map",
+        "namespace": "dash_player",
+        "external_url": (
+            "https://unpkg.com/@plotly/dash-player@{}"
+            "/dash_player/async-dashplayer.js.map"
+        ).format(__version__),
+        'dynamic': True
+    },
 ]
 
 _css_dist = []

dash_player/package.json

@@ -30,8 +30,10 @@
   "devDependencies": {
     "@babel/core": "^7.19.1",
     "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.19.1",
     "@babel/preset-react": "^7.18.6",
+    "@plotly/webpack-dash-dynamic-import": "^1.3.0",
     "@types/node": "^18.7.18",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.2.5",

package.json

@@ -30,8 +30,10 @@
   "devDependencies": {
     "@babel/core": "^7.19.1",
     "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.19.1",
     "@babel/preset-react": "^7.18.6",
+    "@plotly/webpack-dash-dynamic-import": "^1.3.0",
     "@types/node": "^18.7.18",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.2.5",

src/lib/components/DashPlayer.react.js

@@ -1,155 +1,20 @@
-import React, {Component} from 'react';
+import React, {Component, lazy, Suspense} from 'react';
-import ReactPlayer from 'react-player';
 import PropTypes from 'prop-types';
 
+const RealDashPlayer = lazy(() => import(/* webpackChunkName: "dashplayer" */ '../fragments/DashPlayer.react'));
+
 /**
  * A Dash component for playing a variety of URLs, including file paths,
  * YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud,
  * and DailyMotion.
  */
+
 export default class DashPlayer extends Component {
-    constructor(props) {
-        super(props);
-
-        this.updateCurrentTime = this.updateCurrentTime.bind(this);
-        this.updateSecondsLoaded = this.updateSecondsLoaded.bind(this);
-        this.updateDuration = this.updateDuration.bind(this);
-        this.updateIntervals = this.updateIntervals.bind(this);
-        this.setSeekTo = this.setSeekTo.bind(this);
-    }
-
-    updateCurrentTime(){
-        const {setProps} = this.props;
-        if (this.refs.player !== null){
-            const currentTime = this.refs.player.getCurrentTime();
-
-            if (typeof setProps  === 'function') {
-                setProps({currentTime: currentTime});
-            }
-        }
-    }
-
-    updateSecondsLoaded(){
-        const {setProps} = this.props;
-        if (this.refs.player !== null){
-            const secondsLoaded = this.refs.player.getSecondsLoaded();
-
-            if (typeof setProps  === 'function') {
-                setProps({secondsLoaded: secondsLoaded});
-            }
-        }
-    }
-
-    updateDuration(){
-        const {setProps} = this.props;
-        if (this.refs.player !== null){
-            const duration = this.refs.player.getDuration();
-
-            if (typeof setProps  === 'function'){
-                setProps({duration: duration});
-            }
-        }
-    }
-
-    /**
-     * When one of the interval props are changed, this clears the currently
-     * assigned handle and set it to the new interval value. It works for
-     * currentTime, duration and secondsLoaded.
-     */
-    updateIntervals(prevProps){
-        const {
-            intervalCurrentTime,
-            intervalDuration,
-            intervalSecondsLoaded
-        } = this.props;
-
-        // Update interval of current time
-        if (typeof this.handleCurrentTime === 'undefined' ||
-            prevProps.intervalCurrentTime !== intervalCurrentTime){
-            clearInterval(this.handleCurrentTime);
-            this.handleCurrentTime = setInterval(
-                this.updateCurrentTime,
-                intervalCurrentTime
-            );
-        }
-        if (typeof this.handleDuration === 'undefined' ||
-            prevProps.intervalDuration !== intervalDuration){
-            clearInterval(this.handleDuration);
-            this.handleDuration = setInterval(
-                this.updateDuration,
-                intervalDuration
-            );
-        }
-        if (typeof this.handleSecondsLoaded === 'undefined' ||
-            prevProps.intervalSecondsLoaded !== intervalSecondsLoaded){
-            clearInterval(this.handleSecondsLoaded);
-            this.handleSecondsLoaded = setInterval(
-                this.updateSecondsLoaded,
-                intervalSecondsLoaded
-            );
-        }
-    }
-
-    /**
-     * Applies the seekTo() method to the player if the seekTo prop
-     * contains any value, then set seekTo to null. If seekTo was already
-     * null, it doesn't do anything.
-     */
-    setSeekTo(){
-        const {
-            seekTo,
-            setProps
-        } = this.props;
-
-        if (seekTo !== null && typeof setProps  === 'function'){
-            this.refs.player.seekTo(seekTo);
-            setProps({seekTo: null});
-        }
-    }
-
-    componentDidUpdate(prevProps){
-        this.updateIntervals(prevProps);
-        this.setSeekTo();
-    }
-
-    componentDidMount() {
-        this.updateDuration()
-    }
-
     render() {
-        const {
-            id,
-            url,
-            playing,
-            loop,
-            controls,
-            volume,
-            muted,
-            playbackRate,
-            width,
-            height,
-            style,
-            playsinline,
-            className
-        } = this.props;
-
         return (
-            <ReactPlayer
+            <Suspense fallback={null}>
-                ref="player"
+                <RealDashPlayer {...this.props} />
-                id={id}
+            </Suspense>
-                url={url}
-                playing={playing}
-                loop={loop}
-                controls={controls}
-                volume={volume}
-                muted={muted}
-                playbackRate={playbackRate}
-                width={width}
-                height={height}
-                style={style}
-                playsinline={playsinline}
-                class={className}
-            />
         );
     }
 }
@@ -289,3 +154,6 @@ DashPlayer.propTypes = {
      */
     seekTo: PropTypes.number
 };
+
+export const propTypes = DashPlayer.propTypes;
+export const defaultProps = DashPlayer.defaultProps;

src/lib/fragments/DashPlayer.react.js

@@ -0,0 +1,153 @@
+import React, {Component} from 'react';
+import ReactPlayer from 'react-player';
+import {propTypes, defaultProps} from '../components/DashPlayer.react';
+
+export default class DashPlayer extends Component {
+    constructor(props) {
+        super(props);
+
+        this.updateCurrentTime = this.updateCurrentTime.bind(this);
+        this.updateSecondsLoaded = this.updateSecondsLoaded.bind(this);
+        this.updateDuration = this.updateDuration.bind(this);
+        this.updateIntervals = this.updateIntervals.bind(this);
+        this.setSeekTo = this.setSeekTo.bind(this);
+    }
+
+    updateCurrentTime(){
+        const {setProps} = this.props;
+        if (this.refs.player !== null){
+            const currentTime = this.refs.player.getCurrentTime();
+
+            if (typeof setProps  === 'function') {
+                setProps({currentTime: currentTime});
+            }
+        }
+    }
+
+    updateSecondsLoaded(){
+        const {setProps} = this.props;
+        if (this.refs.player !== null){
+            const secondsLoaded = this.refs.player.getSecondsLoaded();
+
+            if (typeof setProps  === 'function') {
+                setProps({secondsLoaded: secondsLoaded});
+            }
+        }
+    }
+
+    updateDuration(){
+        const {setProps} = this.props;
+        if (this.refs.player !== null){
+            const duration = this.refs.player.getDuration();
+
+            if (typeof setProps  === 'function'){
+                setProps({duration: duration});
+            }
+        }
+    }
+
+    /**
+     * When one of the interval props are changed, this clears the currently
+     * assigned handle and set it to the new interval value. It works for
+     * currentTime, duration and secondsLoaded.
+     */
+    updateIntervals(prevProps){
+        const {
+            intervalCurrentTime,
+            intervalDuration,
+            intervalSecondsLoaded
+        } = this.props;
+
+        // Update interval of current time
+        if (typeof this.handleCurrentTime === 'undefined' ||
+            prevProps.intervalCurrentTime !== intervalCurrentTime){
+            clearInterval(this.handleCurrentTime);
+            this.handleCurrentTime = setInterval(
+                this.updateCurrentTime,
+                intervalCurrentTime
+            );
+        }
+        if (typeof this.handleDuration === 'undefined' ||
+            prevProps.intervalDuration !== intervalDuration){
+            clearInterval(this.handleDuration);
+            this.handleDuration = setInterval(
+                this.updateDuration,
+                intervalDuration
+            );
+        }
+        if (typeof this.handleSecondsLoaded === 'undefined' ||
+            prevProps.intervalSecondsLoaded !== intervalSecondsLoaded){
+            clearInterval(this.handleSecondsLoaded);
+            this.handleSecondsLoaded = setInterval(
+                this.updateSecondsLoaded,
+                intervalSecondsLoaded
+            );
+        }
+    }
+
+    /**
+     * Applies the seekTo() method to the player if the seekTo prop
+     * contains any value, then set seekTo to null. If seekTo was already
+     * null, it doesn't do anything.
+     */
+    setSeekTo(){
+        const {
+            seekTo,
+            setProps
+        } = this.props;
+
+        if (seekTo !== null && typeof setProps  === 'function'){
+            this.refs.player.seekTo(seekTo);
+            setProps({seekTo: null});
+        }
+    }
+
+    componentDidUpdate(prevProps){
+        this.updateIntervals(prevProps);
+        this.setSeekTo();
+    }
+
+    componentDidMount() {
+        this.updateDuration()
+    }
+
+    render() {
+        const {
+            id,
+            url,
+            playing,
+            loop,
+            controls,
+            volume,
+            muted,
+            playbackRate,
+            width,
+            height,
+            style,
+            playsinline,
+            className
+        } = this.props;
+
+        return (
+            <ReactPlayer
+                ref="player"
+                id={id}
+                url={url}
+                playing={playing}
+                loop={loop}
+                controls={controls}
+                volume={volume}
+                muted={muted}
+                playbackRate={playbackRate}
+                width={width}
+                height={height}
+                style={style}
+                playsinline={playsinline}
+                class={className}
+            />
+        );
+    }
+}
+
+DashPlayer.defaultProps = defaultProps;
+DashPlayer.propTypes = propTypes;

webpack.config.js

@@ -3,6 +3,8 @@ const packagejson = require('./package.json');
 
 const dashLibraryName = packagejson.name.replace('@plotly/','').replace(/-/g, '_');
 
+const WebpackDashDynamicImport = require('@plotly/webpack-dash-dynamic-import');
+
 module.exports = (env, argv) => {
 
     let mode;
@@ -45,6 +47,7 @@ module.exports = (env, argv) => {
         entry,
         output: {
             path: path.resolve(__dirname, dashLibraryName),
+            chunkFilename: '[name].js',
             filename,
             library: dashLibraryName,
             libraryTarget: 'window',
@@ -72,6 +75,23 @@ module.exports = (env, argv) => {
                 },
             ],
         },
-        devtool
+        devtool,
+        optimization: {
+            splitChunks: {
+                name: '[name].js',
+                cacheGroups: {
+                    async: {
+                        chunks: 'async',
+                        minSize: 0,
+                        name(module, chunks, cacheGroupKey) {
+                            return `${cacheGroupKey}-${chunks[0].name}`;
+                        }
+                    }
+                }
+            }
+        },
+        plugins: [
+            new WebpackDashDynamicImport()
+        ]
     }
 };