Support code injection in webpack 5

[Marc-Andre-Rivet]

The webpack-dash-dynamic-import plugin was written with Webpack 4.x in mind. With Webpack 5.x the API for plugins changed in a way that makes the existing code injection produce invalid JS bundles. This PR makes the injection work with both 4.x and 5.x.

Related to plotly/dash-table#875
Sanity check against Webpack 4.x project: https://app.circleci.com/pipelines/github/plotly/dash-core-components?branch=sanity-webpack-4and5

[alexcjohnson]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

[alexcjohnson]

FYI, as I wrote in https://github.com/plotly/dash-core/issues/324

I've seen some major packages like React drop the copyright year - that simplifies managing these and apparently doesn't have a strong downside, so I'd propose we do the same.

[Marc-Andre-Rivet]

Will bump to 2021 for now and until the discussion on this happens

[Marc-Andre-Rivet]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

@alexcjohnson I can't find a reference to this in the plugins documentation and the fix is mostly through figuring out what it calls and what the expected behavior seems to be. It seems to boil down to major change in the internal implementation with Template.asString(<array>) being resolved in 4.x with https://github.com/webpack/webpack/blob/444e59f8a427f94f0064cae6765e5a3c4b78596d/lib/Template.js#L164 and being resolved with ${array} in 5.x with a third-party of their own making https://github.com/webpack/tapable/blob/master/lib/SyncWaterfallHook.js#L17

Their own usage changed accordingly between the versions, moving from arrays of values to string buffers.

---

Yes, the proposed code change should work fine with both Webpack 4 and 5 and allow individual projects to transition to the new version at their own pace.

[alexcjohnson]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

[Marc-Andre-Rivet]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

Yes 😁

[alexcjohnson]

Beautiful 💃
Just one little 🔪 comment

[Marc-Andre-Rivet]

The webpack-dash-dynamic-import plugin was written with Webpack 4.x in mind. With Webpack 5.x the API for plugins changed in a way that makes the existing code injection produce invalid JS bundles. This PR makes the injection work with both 4.x and 5.x.

Related to plotly/dash-table#875
Sanity check against Webpack 4.x project: https://app.circleci.com/pipelines/github/plotly/dash-core-components?branch=sanity-webpack-4and5

[alexcjohnson]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

[alexcjohnson]

FYI, as I wrote in https://github.com/plotly/dash-core/issues/324

I've seen some major packages like React drop the copyright year - that simplifies managing these and apparently doesn't have a strong downside, so I'd propose we do the same.

[Marc-Andre-Rivet]

Will bump to 2021 for now and until the discussion on this happens

[Marc-Andre-Rivet]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

@alexcjohnson I can't find a reference to this in the plugins documentation and the fix is mostly through figuring out what it calls and what the expected behavior seems to be. It seems to boil down to major change in the internal implementation with Template.asString(<array>) being resolved in 4.x with https://github.com/webpack/webpack/blob/444e59f8a427f94f0064cae6765e5a3c4b78596d/lib/Template.js#L164 and being resolved with ${array} in 5.x with a third-party of their own making https://github.com/webpack/tapable/blob/master/lib/SyncWaterfallHook.js#L17

Their own usage changed accordingly between the versions, moving from arrays of values to string buffers.

---

Yes, the proposed code change should work fine with both Webpack 4 and 5 and allow individual projects to transition to the new version at their own pace.

[alexcjohnson]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

[Marc-Andre-Rivet]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

Yes 😁

[alexcjohnson]

Beautiful 💃
Just one little 🔪 comment

[Marc-Andre-Rivet]

The webpack-dash-dynamic-import plugin was written with Webpack 4.x in mind. With Webpack 5.x the API for plugins changed in a way that makes the existing code injection produce invalid JS bundles. This PR makes the injection work with both 4.x and 5.x.

Related to plotly/dash-table#875
Sanity check against Webpack 4.x project: https://app.circleci.com/pipelines/github/plotly/dash-core-components?branch=sanity-webpack-4and5

[alexcjohnson]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

[alexcjohnson]

FYI, as I wrote in https://github.com/plotly/dash-core/issues/324

I've seen some major packages like React drop the copyright year - that simplifies managing these and apparently doesn't have a strong downside, so I'd propose we do the same.

[Marc-Andre-Rivet]

Will bump to 2021 for now and until the discussion on this happens

[Marc-Andre-Rivet]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

@alexcjohnson I can't find a reference to this in the plugins documentation and the fix is mostly through figuring out what it calls and what the expected behavior seems to be. It seems to boil down to major change in the internal implementation with Template.asString(<array>) being resolved in 4.x with https://github.com/webpack/webpack/blob/444e59f8a427f94f0064cae6765e5a3c4b78596d/lib/Template.js#L164 and being resolved with ${array} in 5.x with a third-party of their own making https://github.com/webpack/tapable/blob/master/lib/SyncWaterfallHook.js#L17

Their own usage changed accordingly between the versions, moving from arrays of values to string buffers.

---

Yes, the proposed code change should work fine with both Webpack 4 and 5 and allow individual projects to transition to the new version at their own pace.

[alexcjohnson]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

[Marc-Andre-Rivet]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

Yes 😁

[alexcjohnson]

Beautiful 💃
Just one little 🔪 comment

[Marc-Andre-Rivet]

The webpack-dash-dynamic-import plugin was written with Webpack 4.x in mind. With Webpack 5.x the API for plugins changed in a way that makes the existing code injection produce invalid JS bundles. This PR makes the injection work with both 4.x and 5.x.

Related to plotly/dash-table#875
Sanity check against Webpack 4.x project: https://app.circleci.com/pipelines/github/plotly/dash-core-components?branch=sanity-webpack-4and5

[alexcjohnson]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

[alexcjohnson]

FYI, as I wrote in https://github.com/plotly/dash-core/issues/324

I've seen some major packages like React drop the copyright year - that simplifies managing these and apparently doesn't have a strong downside, so I'd propose we do the same.

[Marc-Andre-Rivet]

Will bump to 2021 for now and until the discussion on this happens

[Marc-Andre-Rivet]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

@alexcjohnson I can't find a reference to this in the plugins documentation and the fix is mostly through figuring out what it calls and what the expected behavior seems to be. It seems to boil down to major change in the internal implementation with Template.asString(<array>) being resolved in 4.x with https://github.com/webpack/webpack/blob/444e59f8a427f94f0064cae6765e5a3c4b78596d/lib/Template.js#L164 and being resolved with ${array} in 5.x with a third-party of their own making https://github.com/webpack/tapable/blob/master/lib/SyncWaterfallHook.js#L17

Their own usage changed accordingly between the versions, moving from arrays of values to string buffers.

---

Yes, the proposed code change should work fine with both Webpack 4 and 5 and allow individual projects to transition to the new version at their own pace.

[alexcjohnson]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

[Marc-Andre-Rivet]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

Yes 😁

[alexcjohnson]

Beautiful 💃
Just one little 🔪 comment

[Marc-Andre-Rivet]

The webpack-dash-dynamic-import plugin was written with Webpack 4.x in mind. With Webpack 5.x the API for plugins changed in a way that makes the existing code injection produce invalid JS bundles. This PR makes the injection work with both 4.x and 5.x.

Related to plotly/dash-table#875
Sanity check against Webpack 4.x project: https://app.circleci.com/pipelines/github/plotly/dash-core-components?branch=sanity-webpack-4and5

[alexcjohnson]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

[alexcjohnson]

FYI, as I wrote in https://github.com/plotly/dash-core/issues/324

I've seen some major packages like React drop the copyright year - that simplifies managing these and apparently doesn't have a strong downside, so I'd propose we do the same.

[Marc-Andre-Rivet]

Will bump to 2021 for now and until the discussion on this happens

[Marc-Andre-Rivet]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

@alexcjohnson I can't find a reference to this in the plugins documentation and the fix is mostly through figuring out what it calls and what the expected behavior seems to be. It seems to boil down to major change in the internal implementation with Template.asString(<array>) being resolved in 4.x with https://github.com/webpack/webpack/blob/444e59f8a427f94f0064cae6765e5a3c4b78596d/lib/Template.js#L164 and being resolved with ${array} in 5.x with a third-party of their own making https://github.com/webpack/tapable/blob/master/lib/SyncWaterfallHook.js#L17

Their own usage changed accordingly between the versions, moving from arrays of values to string buffers.

---

Yes, the proposed code change should work fine with both Webpack 4 and 5 and allow individual projects to transition to the new version at their own pace.

[alexcjohnson]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

[Marc-Andre-Rivet]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

Yes 😁

[alexcjohnson]

Beautiful 💃
Just one little 🔪 comment

[Marc-Andre-Rivet]

The webpack-dash-dynamic-import plugin was written with Webpack 4.x in mind. With Webpack 5.x the API for plugins changed in a way that makes the existing code injection produce invalid JS bundles. This PR makes the injection work with both 4.x and 5.x.

Related to plotly/dash-table#875
Sanity check against Webpack 4.x project: https://app.circleci.com/pipelines/github/plotly/dash-core-components?branch=sanity-webpack-4and5

[alexcjohnson]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

[alexcjohnson]

FYI, as I wrote in https://github.com/plotly/dash-core/issues/324

I've seen some major packages like React drop the copyright year - that simplifies managing these and apparently doesn't have a strong downside, so I'd propose we do the same.

[Marc-Andre-Rivet]

Will bump to 2021 for now and until the discussion on this happens

[Marc-Andre-Rivet]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

@alexcjohnson I can't find a reference to this in the plugins documentation and the fix is mostly through figuring out what it calls and what the expected behavior seems to be. It seems to boil down to major change in the internal implementation with Template.asString(<array>) being resolved in 4.x with https://github.com/webpack/webpack/blob/444e59f8a427f94f0064cae6765e5a3c4b78596d/lib/Template.js#L164 and being resolved with ${array} in 5.x with a third-party of their own making https://github.com/webpack/tapable/blob/master/lib/SyncWaterfallHook.js#L17

Their own usage changed accordingly between the versions, moving from arrays of values to string buffers.

---

Yes, the proposed code change should work fine with both Webpack 4 and 5 and allow individual projects to transition to the new version at their own pace.

[alexcjohnson]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

[Marc-Andre-Rivet]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

Yes 😁

[alexcjohnson]

Beautiful 💃
Just one little 🔪 comment

[Marc-Andre-Rivet]

The webpack-dash-dynamic-import plugin was written with Webpack 4.x in mind. With Webpack 5.x the API for plugins changed in a way that makes the existing code injection produce invalid JS bundles. This PR makes the injection work with both 4.x and 5.x.

Related to plotly/dash-table#875
Sanity check against Webpack 4.x project: https://app.circleci.com/pipelines/github/plotly/dash-core-components?branch=sanity-webpack-4and5

[alexcjohnson]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

[alexcjohnson]

FYI, as I wrote in https://github.com/plotly/dash-core/issues/324

I've seen some major packages like React drop the copyright year - that simplifies managing these and apparently doesn't have a strong downside, so I'd propose we do the same.

[Marc-Andre-Rivet]

Will bump to 2021 for now and until the discussion on this happens

[Marc-Andre-Rivet]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

@alexcjohnson I can't find a reference to this in the plugins documentation and the fix is mostly through figuring out what it calls and what the expected behavior seems to be. It seems to boil down to major change in the internal implementation with Template.asString(<array>) being resolved in 4.x with https://github.com/webpack/webpack/blob/444e59f8a427f94f0064cae6765e5a3c4b78596d/lib/Template.js#L164 and being resolved with ${array} in 5.x with a third-party of their own making https://github.com/webpack/tapable/blob/master/lib/SyncWaterfallHook.js#L17

Their own usage changed accordingly between the versions, moving from arrays of values to string buffers.

---

Yes, the proposed code change should work fine with both Webpack 4 and 5 and allow individual projects to transition to the new version at their own pace.

[alexcjohnson]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

[Marc-Andre-Rivet]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

Yes 😁

[alexcjohnson]

Beautiful 💃
Just one little 🔪 comment

[Marc-Andre-Rivet]

The webpack-dash-dynamic-import plugin was written with Webpack 4.x in mind. With Webpack 5.x the API for plugins changed in a way that makes the existing code injection produce invalid JS bundles. This PR makes the injection work with both 4.x and 5.x.

Related to plotly/dash-table#875
Sanity check against Webpack 4.x project: https://app.circleci.com/pipelines/github/plotly/dash-core-components?branch=sanity-webpack-4and5

[alexcjohnson]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

[alexcjohnson]

FYI, as I wrote in https://github.com/plotly/dash-core/issues/324

I've seen some major packages like React drop the copyright year - that simplifies managing these and apparently doesn't have a strong downside, so I'd propose we do the same.

[Marc-Andre-Rivet]

Will bump to 2021 for now and until the discussion on this happens

[Marc-Andre-Rivet]

Nice find! Can you point to where this change is documented by Webpack? And I presume with this change we will support independently upgrading the renderer and individual component packages from 4 to 5?

@alexcjohnson I can't find a reference to this in the plugins documentation and the fix is mostly through figuring out what it calls and what the expected behavior seems to be. It seems to boil down to major change in the internal implementation with Template.asString(<array>) being resolved in 4.x with https://github.com/webpack/webpack/blob/444e59f8a427f94f0064cae6765e5a3c4b78596d/lib/Template.js#L164 and being resolved with ${array} in 5.x with a third-party of their own making https://github.com/webpack/tapable/blob/master/lib/SyncWaterfallHook.js#L17

Their own usage changed accordingly between the versions, moving from arrays of values to string buffers.

---

Yes, the proposed code change should work fine with both Webpack 4 and 5 and allow individual projects to transition to the new version at their own pace.

[alexcjohnson]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

[Marc-Andre-Rivet]

OK so if in 4.x the array was eventually evaluated as source + '\n' + resolveImportSource(), and now in 5.x we can't do that but source + resolveImportSource() works, is there one of those two flavors that works in both 4 and 5, so we don't need to branch?

Yes 😁

[alexcjohnson]

Beautiful 💃
Just one little 🔪 comment