Extract forceDetectWrappedElements() to support IE

Author: tkrotoff

examples/.browserslistrc

@@ -0,0 +1,2 @@
+>= 1%
+IE >= 11

examples/Bootstrap.tsx

@@ -1,7 +1,12 @@
 import 'core-js';
 
 import React, { useEffect, useRef, useState } from 'react';
-import { DevTools, useDevTools, wrapChildrenClassName } from 'flex-wrap-layout';
+import {
+  DevTools,
+  forceDetectWrappedElements,
+  useDevTools,
+  wrapChildrenClassName
+} from 'flex-wrap-layout';
 import ReactDOM from 'react-dom';
 
 import './Bootstrap.html';
@@ -59,11 +64,6 @@ interface Person {
   nationality: SomeCountries;
 }
 
-function forceDetectWrappedElements() {
-  // https://stackoverflow.com/q/1818474
-  window.dispatchEvent(new Event('resize'));
-}
-
 function People({ people }: { people: Person[] }) {
   const ref = useRef(null);
 

examples/package.json

@@ -7,6 +7,7 @@
     "clean": "rm -rf build",
     "clean:all": "npm run clean && rm -rf node_modules package-lock.json",
     "build": "npm run clean && webpack --mode development",
+    "build:prod": "npm run clean && webpack --mode production",
     "build:watch": "npm run clean && webpack --mode development --watch",
     "test:e2e": "NODE_ENV=test jest --config jest-e2e.config.js --verbose",
     "chromium:linux": "~/.cache/ms-playwright/chromium-857950/chrome-linux/chrome",

examples/webpack.config.js

@@ -37,7 +37,9 @@ module.exports = (_webpackEnv, _argv) => {
     module: {
       rules: [
         {
-          test: /\.tsx?$/,
+          test: /\.(js|tsx?)$/,
+          // [Babel should not transpile core-js](https://github.com/zloirock/core-js/issues/514#issuecomment-476533317)
+          exclude: /\/core-js/,
           loader: 'babel-loader'
         },
         {

src/forceDetectWrappedElements.ts

@@ -0,0 +1,18 @@
+export function forceDetectWrappedElements() {
+  try {
+    // https://stackoverflow.com/q/1818474
+    window.dispatchEvent(new Event('resize'));
+  } catch {
+    // FIXME Event constructor is not supported by IE
+    // https://github.com/zloirock/core-js/issues/354
+    // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#polyfill
+    // https://github.com/lifaon74/events-polyfill/blob/bc989dc00fb90a42ae9c012c309d48710dec2589/event-constructor-polyfill.js#L11-L28
+    // https://github.com/kumarharsh/custom-event-polyfill/blob/v1.0.7/polyfill.js
+    // http://youmightnotneedjquery.com/#trigger_native
+    const event = document.createEvent('Event');
+    const bubbles = false; // Default is false for new Event()
+    const cancelable = false; // Default is false for new Event()
+    event.initEvent('resize', bubbles, cancelable);
+    window.dispatchEvent(event);
+  }
+}

src/index.ts

@@ -1,3 +1,4 @@
 export * from './detectWrappedElements';
 export * from './DevTools';
+export * from './forceDetectWrappedElements';
 export * from './useDetectWrappedElements';