Hi,
I was trying to include resize-observer-polyfill, but it seems to not work. I think this plugin or rollup is adding $1 at the name of the polyfill.
Example: ResizeObserver turns to ResizeObserver$1
I used rollup-plugin-inject or an Import import ResizeObserver from 'resize-observer-polyfill' but I think it would be more legible if I use rollup-plugin-polyfill. ;)
Below some code of my tests:
Thanks.
Code of ResizeObserver Polyfill
/**
* ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
* exposing only those methods and properties that are defined in the spec.
*/
var ResizeObserver = /** @class */ (function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {ResizeObserverCallback} callback - Callback that is invoked when
* dimensions of the observed elements change.
*/
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}());Using rollup-plugin-polyfill
Rollup config:
{
input,
plugins: [
polyfill(['resize-observer-polyfill', './platform/platform.dom.js']),
json(),
resolve(),
babel(),
cleanup({
sourcemap: true
})
],
output: {
name: 'Chart',
file: 'dist/Chart.js',
banner,
format: 'umd',
indent: false,
},
},Generated file after rollup - Polyfill:
var ResizeObserver$1 =
function () {
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}();
var index = function () {
if (typeof global$1.ResizeObserver !== 'undefined') {
return global$1.ResizeObserver;
}
return ResizeObserver$1;
}();Generated file after rollup - Usage:
var observer = new ResizeObserver(function (entries) {
var entry = entries[0];
resize(entry.contentRect.width, entry.contentRect.height);
});It results at ResizeObserver is not defined because rollup generated a polyfill named ResizeObserver$1 insted of ResizeObserver
Importing directly the polyfill
Rollup config:
{
input,
plugins: [
polyfill(['./platform/platform.dom.js']),
json(),
resolve(),
babel(),
cleanup({
sourcemap: true
})
],
output: {
name: 'Chart',
file: 'dist/Chart.js',
banner,
format: 'umd',
indent: false,
},
},Importing ResizeObserver Polyfill directly in the code:
import ResizeObserver from 'resize-observer-polyfill';
const observer = new ResizeObserver(entries => {
const entry = entries[0];
resize(entry.contentRect.width, entry.contentRect.height);
});Using rollup-plugin-inject
Rollup config:
const inject = require('@rollup/plugin-inject');
{
input,
plugins: [
// set default because is the default export.
inject({
ResizeObserver: ['resize-observer-polyfill', 'default']
}),
polyfill(['./platform/platform.dom.js']),
json(),
resolve(),
babel(),
cleanup({
sourcemap: true
})
],
output: {
name: 'Chart',
file: 'dist/Chart.js',
banner,
format: 'umd',
indent: false,
},
},Importing directly and rollup-plugin-inject generate the same code that works
Generated file after rollup - Polyfill:
var ResizeObserver =
function () {
function ResizeObserver(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
var controller = ResizeObserverController.getInstance();
var observer = new ResizeObserverSPI(callback, controller, this);
observers.set(this, observer);
}
return ResizeObserver;
}();
var index = function () {
if (typeof global$1.ResizeObserver !== 'undefined') {
return global$1.ResizeObserver;
}
return ResizeObserver;
}();Generated file after rollup - Usage:
var observer = new index(function (entries) {
var entry = entries[0];
resize(entry.contentRect.width, entry.contentRect.height);
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent