IE11 compatibility by Marc-Andre-Rivet · Pull Request #1006 · plotly/dash

Marc-Andre-Rivet · 2019-11-07T23:00:12Z

Related to #1003 and actually solves the issue with additional PRs (will be linked)

Also fixes #1011.

repo	pr
dash-table	plotly/dash-table#637
dash-core-components	plotly/dash-core-components#696
dash-html-components	plotly/dash-html-components#143
dash-bio	plotly/dash-bio#437
dash-canvas	plotly/dash-canvas#29
dash-cytoscape	plotly/dash-cytoscape#75
dash-daq	plotly/dash-daq#73

The latest async changes and following tests uncovered that Dash is broken for IE11 / Edge < 15. This comes from many things:

@plotly/dash-component-plugins was not transpiled when used in projects
@plolty/webpack-dash-dynamic-import was not ES5 (can't be transpiled, because added directly to the webpack artifact)
Multiple projects were not using core-js or @babel/polyfill. Even with correctly transpiled code they would not have worked
Multiple projects depend on npm dependencies that either (1) have source code as the main in package.json -- combined with standard webpack settings excluding node_modules this caused this code not to be transpiled, or (2) transpiled npm resources not transpiled in ES5, or (3) npm resources with dist but with main still pointing to the source

Handling source code from 3rd parties as part of your build process is complicated.. maybe your configuration is not compatible, or maybe the code uses another scheme (e.g. import/export vs. required vs. module.exports). The module.exports case turned out to be problematic for certain 3rd parties because of core-js+useBuiltIns: usage side-effects, namely,the code evals everything to commonjs, wrapping module.exports in a particular way that is almost but not quite normal module.exports usage in Node.

This PR and the attached PRs solves all of the above in 3 ways.

The artifacts are now ES5-validated with es-check, making it impossible to get a successful build with hanging ES6+ syntax
The polyfills have been moved into the renderer -- they are now shared like react, react-dom, and prop-types -- this removes the responsibility from the component developer's hands.. making for less chances of mistakes.. a component developer can still continue using their own polyfills if some additional specifics are needed
npm resources that are not ES5 compatible are now transpiled either from source code or from the dist (or whatever) artifact -- this is time consuming as the webpack exclude needs to be tweaked manually (this is mostly not an issue) -- or a alias is provided to use a dist instead of the source if the project was not setup correctly..

Not covered here is whether the code actually runs in IE11 / Edge < 15, but it establishes a good baseline with rapid (build-time) feedback. Further steps would involve setting up a test environment on (say) the docs with IE11 or the oldest version of Edge available.

Also, this version of Dash will become the minimal version required for all components that are dropping @babel/polyfill or core-js from their build -- effectively, will make this version of Dash the minimal version for all core repos, bio, canvas, cytoscape, daq.

Interesting side-effect, externalizing polyfills will reduce the JS size for core (renderer, html, dcc, table) by about 70kB and the externalized polyfill can be cached / will probably be stable through multiple releases or 7% of the current minimal JS load.

Other PRs will need to update @plotly/webpack-dash-dynamic-import to 1.1.3 when approved / published and some will require a version bump.

- make webpack-dash-dynamic-import es5

- no polyfills in build

Marc-Andre-Rivet · 2019-11-07T23:32:27Z

@plotly/webpack-dash-dynamic-import/package.json

 {
  "name": "@plotly/webpack-dash-dynamic-import",
-  "version": "1.1.2",
+  "version": "1.1.3",


Need a new version. The other PRs are using a rc release 1.1.3-rc1

Marc-Andre-Rivet · 2019-11-07T23:32:52Z

@plotly/webpack-dash-dynamic-import/src/index.js

-    const srcFragments = src.split('/');
-    const fileFragments = srcFragments.slice(-1)[0].split('.');
+    var srcFragments = src.split('/');
+    var fileFragments = srcFragments.slice(-1)[0].split('.');


Use only ES5 syntax. This will be validated in the end by es-check

Marc-Andre-Rivet · 2019-11-07T23:33:30Z

dash-renderer/babel.config.js

-        corejs: 3
-    }], '@babel/preset-react'],
+    presets: [
+        '@babel/preset-env',


The polyfills are externalized. We only use preset-env to know what the transpilation target is.

Marc-Andre-Rivet · 2019-11-07T23:33:51Z

dash-renderer/init.template

                "prop-types@$proptypes.min.js",
            ],
            "dev": [
+                "polyfill@$polyfill.min.js",


Externalized polyfills, to be used by all components

Marc-Andre-Rivet · 2019-11-07T23:34:08Z

dash-renderer/package.json

    "build:dev": "webpack --build local",
    "build:local": "renderer build local",
    "build": "renderer build",
+    "postbuild": "es-check es5 dash_renderer/*.js",


postbuild check, automagically runs after build

Marc-Andre-Rivet · 2019-11-07T23:35:27Z

dash-renderer/webpack.config.js

            {
                test: /\.js$/,
-                exclude: /node_modules/,
+                exclude: /node_modules\/(?!@plotly\/dash-component-plugins\/|uniqid\/|check-prop-types\/)/,


Exclude all that can be excluded. In this case it means that @plotly/dash-component-plugins, uniqid and check-propstypes` need to be transpiled to the correct target b/c we're using the source or a dist with a less stringent target.

Marc-Andre-Rivet · 2019-11-07T23:35:52Z

dash/development/build_process.py

        }
-        for name, subfolder, filename, target in self.deps_info:
-            version = self.deps[name]["version"]
+        for scope, name, subfolder, filename, target in self.deps_info:


Handle scoped packages with @SCOPE/NAME format

Marc-Andre-Rivet · 2019-11-07T23:36:08Z

dash/development/build_process.py

-                ("react-dom", "umd", "react-dom.development.js", None),
-                ("prop-types", None, "prop-types.min.js", None),
-                ("prop-types", None, "prop-types.js", None),
+                ("@babel", "polyfill", "dist", "polyfill.min.js", None),


Add polyfill, add None scope for all other deps

Marc-Andre-Rivet · 2019-11-07T23:56:49Z

dash-renderer/jest.init.js

@@ -0,0 +1 @@
+import '@babel/polyfill';


jest now needs the polyfills..

seems fine, but I'm surprised jest is running in an environment that needs polyfills.

rephrasing: jest needs the polyfills to handle our code!

…h-ie11

alexcjohnson

💃 This all looks good. Now to the ⛰ of other PRs...

- bump usage / remove from webpack exclusion override

alexcjohnson · 2019-11-08T14:01:52Z

dash-renderer/webpack.config.js

            {
                test: /\.js$/,
-                exclude: /node_modules\/(?!@plotly\/dash-component-plugins\/|uniqid\/|check-prop-types\/)/,
+                exclude: /node_modules\/(?!uniqid\/|check-prop-types\/)/,


…h-ie11

…e check and override only if present

Marc-Andre-Rivet · 2019-11-08T18:52:59Z

@plotly/webpack-dash-dynamic-import/src/index.js

-jsonpScriptSrc = function(chunkId) {
-    let script = getCurrentScript();
-    let isLocal = isLocalScript(script);
+if (typeof jsonpScriptSrc !== 'undefined') {


jsonpScriptSrc is not defined if there are no async resources, the typeof ... === 'undefined' check is the only way in JS to test for the existence/non-existence of a variable in a safe way.

…h-ie11

Marc-Andre-Rivet · 2019-11-12T19:48:31Z

dash-renderer/src/TreeContainer.js

+        this.setProps = this.setProps.bind(this);
+    }
+
+    setProps(newProps) {


We were creating new setProps on each TreeContainer render. Everything in here is dependent on the injected props, it can be reused if the instance is reused. Should reduce the number of re-renders, if nothing else.

.circleci/config.yml

alexcjohnson · 2019-11-13T17:53:38Z

@plotly/webpack-dash-dynamic-import/src/index.js


+/**
+ * This code is injected as-is in the webpack artifact and must be ES5 compatible to work in all scenarios.
+ * This will not get transpiled.


Just to note, because I was curious: it doesn't get transpiled, but it does get minified in the pipeline you've got set up - as we would hope 🎉

Marc-André Rivet added 3 commits November 7, 2019 09:48

- transpile dash-component-plugin

93c4a19

- make webpack-dash-dynamic-import es5

post-build es5 check

4add1c1

- share polyfills

81efbfc

- no polyfills in build

Marc-Andre-Rivet commented Nov 7, 2019

View reviewed changes

fix jest tests

846c637

Marc-Andre-Rivet changed the title ~~1003 dash ie11~~ IE11 compatibility Nov 7, 2019

Marc-Andre-Rivet commented Nov 7, 2019

View reviewed changes

Marc-Andre-Rivet and others added 3 commits November 7, 2019 18:59

Merge branch 'dev' into 1003-dash-ie11

d5a4ada

changelog

173492d

Merge branch '1003-dash-ie11' of github.com:plotly/dash into 1003-das…

4dc3e9e

…h-ie11

Marc-Andre-Rivet marked this pull request as ready for review November 8, 2019 00:21

Marc-Andre-Rivet requested review from alexcjohnson and byronz as code owners November 8, 2019 00:21

alexcjohnson approved these changes Nov 8, 2019

View reviewed changes

- transpile / bundle dash-component-plugins

8980b0a

- bump usage / remove from webpack exclusion override

alexcjohnson reviewed Nov 8, 2019

View reviewed changes

bump dash-component-plugins

d47820c

Marc-Andre-Rivet requested a review from nicolaskruchten November 8, 2019 15:35

Marc-Andre-Rivet and others added 4 commits November 8, 2019 11:34

Merge branch 'dev' into 1003-dash-ie11

50e1fea

bump @plotly/webpack-dash-dynamic-import

6edd5eb

Merge branch '1003-dash-ie11' of github.com:plotly/dash into 1003-das…

7f55e6b

…h-ie11

jsonpScriptSrc is not present if there is no async resource, do a saf…

2f11b8a

…e check and override only if present

Marc-Andre-Rivet commented Nov 8, 2019

View reviewed changes

Marc-Andre-Rivet and others added 3 commits November 8, 2019 14:13

Merge branch 'dev' into 1003-dash-ie11

47416b2

create setProps only once per TreeContainer instance

992164d

Merge branch '1003-dash-ie11' of github.com:plotly/dash into 1003-das…

5d8c3ce

…h-ie11

Marc-Andre-Rivet commented Nov 12, 2019

View reviewed changes

Marc-André Rivet added 6 commits November 12, 2019 17:28

update changelog

476bd41

use npm ci instead of npm install

5e81b8e

do not delete package-lock.json (now using npm ci)

026caeb

undo

9fff1be

changelog

75edbe8

use component repos branches

df73412

alexcjohnson reviewed Nov 13, 2019

View reviewed changes

.circleci/config.yml Show resolved Hide resolved

alexcjohnson reviewed Nov 13, 2019

View reviewed changes

undo -b

a3d4d67

Marc-Andre-Rivet merged commit 771152a into dev Nov 14, 2019

Marc-Andre-Rivet deleted the 1003-dash-ie11 branch November 14, 2019 14:54

Marc-Andre-Rivet added this to the Dash v1.7 milestone Nov 15, 2019

rpkyle restored the 1003-dash-ie11 branch December 25, 2019 04:29

mkcor mentioned this pull request Feb 26, 2020

Update eslint to version 6 (major). plotly/dash-bio#480

Merged

alexcjohnson deleted the 1003-dash-ie11 branch July 28, 2021 17:22

		@@ -0,0 +1 @@
		import '@babel/polyfill'; No newline at end of file

Uh oh!

Conversation

Marc-Andre-Rivet commented Nov 7, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Marc-Andre-Rivet Nov 8, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexcjohnson left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Marc-Andre-Rivet Nov 8, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Marc-Andre-Rivet commented Nov 7, 2019 •

edited

Loading

Marc-Andre-Rivet Nov 8, 2019 •

edited

Loading

Marc-Andre-Rivet Nov 8, 2019 •

edited

Loading