Merge pull request #6544 from marmelab/simple-example-ie11

Ensure simple demo runs on ie11
marmelab · Aug 31, 2021 · e77755d · e77755d
2 parents d33a4ee + c92489e
commit e77755d
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 67 deletions.
diff --git a/examples/simple/index-webpack.html b/examples/simple/index-webpack.html
@@ -1,30 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Admin</title>
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <!-- This script adds the Roboto font to our project. For more detail go to this site:  http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
-    <script>
-        var WebFontConfig = {
-            google: { families: ['Roboto:300,400,500,700:latin'] }
-        };
-        (function () {
-            var wf = document.createElement('script');
-            wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
-            wf.type = 'text/javascript';
-            wf.async = 'true';
-            var s = document.getElementsByTagName('script')[0];
-            s.parentNode.insertBefore(wf, s);
-        })();
-    </script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>React Admin</title>
+        <style>
+            body {
+                margin: 0;
+            }
+        </style>
+        <script>
+            const modernBrowser = 'fetch' in window && 'assign' in Object;
+            if (!modernBrowser) {
+                const scriptElement = document.createElement('script');
+                scriptElement.async = false;
+                scriptElement.src = '/polyfills.bundle.js';
+                document.head.appendChild(scriptElement);
+            }
+        </script>
+    </head>
+    <body>
+        <div id="root"></div>
+        <!-- This script adds the Roboto font to our project. For more detail go to this site:  http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
+        <script>
+            var WebFontConfig = {
+                google: { families: ['Roboto:300,400,500,700:latin'] },
+            };
+            (function () {
+                var wf = document.createElement('script');
+                wf.src =
+                    'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+                wf.type = 'text/javascript';
+                wf.async = 'true';
+                var s = document.getElementsByTagName('script')[0];
+                s.parentNode.insertBefore(wf, s);
+            })();
+        </script>
+        <script src="/index.bundle.js"></script>
+    </body>
 </html>
diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -1,36 +1,37 @@
 {
-  "name": "simple",
-  "version": "3.0.0",
-  "scripts": {
-    "dev": "./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development",
-    "start": "vite",
-    "build": "vite build",
-    "serve": "vite preview"
-  },
-  "dependencies": {
-    "@material-ui/core": "^4.11.2",
-    "@material-ui/icons": "^4.11.2",
-    "ra-data-fakerest": "^3.9.3",
-    "ra-i18n-polyglot": "^3.12.4",
-    "ra-input-rich-text": "^3.12.0",
-    "ra-language-english": "^3.12.4",
-    "ra-language-french": "^3.12.4",
-    "react": "^17.0.0",
-    "react-admin": "^3.12.4",
-    "react-dom": "^17.0.0"
-  },
-  "devDependencies": {
-    "@babel/preset-react": "^7.12.10",
-    "@vitejs/plugin-react-refresh": "^1.3.3",
-    "ts-loader": "^8.0.14",
-    "html-loader": "~1.3.0",
-    "html-webpack-plugin": "~4.3.0",	
-    "ignore-not-found-export-plugin": "^1.0.1",
-    "style-loader": "~1.2.1",
-    "typescript": "^4.1.3",
-    "vite": "^2.2.3",
-    "webpack": "~4.5.0",
-    "webpack-cli": "~2.0.13",
-    "webpack-dev-server": "~3.1.11"
-  }
+    "name": "simple",
+    "version": "3.0.0",
+    "scripts": {
+        "dev": "./node_modules/.bin/webpack-dev-server --progress --color --hot --watch --mode development",
+        "start": "vite",
+        "build": "vite build",
+        "serve": "vite preview"
+    },
+    "dependencies": {
+        "@material-ui/core": "^4.11.2",
+        "@material-ui/icons": "^4.11.2",
+        "ra-data-fakerest": "^3.9.3",
+        "ra-i18n-polyglot": "^3.12.4",
+        "ra-input-rich-text": "^3.12.0",
+        "ra-language-english": "^3.12.4",
+        "ra-language-french": "^3.12.4",
+        "react": "^17.0.0",
+        "react-admin": "^3.12.4",
+        "react-dom": "^17.0.0"
+    },
+    "devDependencies": {
+        "@babel/preset-react": "^7.12.10",
+        "@vitejs/plugin-react-refresh": "^1.3.3",
+        "ts-loader": "^8.0.14",
+        "html-loader": "~1.3.0",
+        "html-webpack-plugin": "~4.3.0",
+        "ignore-not-found-export-plugin": "^1.0.1",
+        "react-app-polyfill": "^1.0.4",
+        "style-loader": "~1.2.1",
+        "typescript": "^4.1.3",
+        "vite": "^2.2.3",
+        "webpack": "~4.5.0",
+        "webpack-cli": "~2.0.13",
+        "webpack-dev-server": "~3.1.11"
+    }
 }
diff --git a/examples/simple/src/polyfills.ts b/examples/simple/src/polyfills.ts
@@ -0,0 +1,3 @@
+import 'react-app-polyfill/ie11';
+import 'react-app-polyfill/stable';
+import 'proxy-polyfill/proxy.min.js';
diff --git a/examples/simple/tsconfig.json b/examples/simple/tsconfig.json
@@ -6,10 +6,8 @@
         "declaration": true,
         "allowJs": false,
         "jsx": "react",
-        "lib": [
-            "es2017",
-            "dom"
-        ],
+        "lib": ["es2017", "dom"],
+        "target": "es5",
         "moduleResolution": "node",
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,

diff --git a/examples/simple/webpack.config.js b/examples/simple/webpack.config.js
@@ -2,10 +2,13 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-    entry: './src/index.tsx',
+    entry: {
+        polyfills: './src/polyfills.ts',
+        index: './src/index.tsx',
+    },
     output: {
         path: path.resolve(__dirname, 'dist'),
-        filename: 'bundle.js',
+        filename: '[name].bundle.js',
     },
     devtool: 'cheap-module-source-map',
     resolve: {
@@ -33,6 +36,7 @@ module.exports = {
     plugins: [
         new HtmlWebpackPlugin({
             template: './index-webpack.html',
+            inject: false,
         }),
     ],
     devServer: {