Add IE11 support (#601)

SAP · Jul 2, 2019 · 4ed788d · 4ed788d
1 parent a8c4fad
commit 4ed788d
Show file tree

Hide file tree

Showing 21 changed files with 2,039 additions and 553 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1 @@
+last 1 version, not dead, > 0.2%
diff --git a/README.md b/README.md
@@ -25,6 +25,35 @@ View the [application examples](core/examples) to explore Luigi's features.
 
 For details, see [Luigi documentation](docs/README.md).
 
+## Browser support
+
+If you want to support Internet Explorer 11 in your application, update your Luigi imports as follows:
+### Luigi Core
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel='stylesheet' href='/luigi-core/luigi-ie11.css'>
+    <!-- <link rel='stylesheet' href='/luigi-core/luigi.css'> -->
+  </head>
+  <body>
+    <script type="module" src="/luigi-core/luigi.js"></script>
+    <script nomodule src="/luigi-core/luigi-ie11.js"></script>
+    <!-- <script src="/luigi-core/luigi.js"></script> -->
+  </body>
+</html>
+``` 
+
+### Luigi Client
+```javascript
+import {
+  linkManager,
+  uxManager
+} from '@kyma-project/luigi-client/luigi-client-ie11';
+<!-- } from '@kyma-project/luigi-client'; -->
+``` 
+
+>**NOTE**: The angular example application is not fully compatible with IE11.
 
 ## Development
 

diff --git a/client/.babelrc-ie11 b/client/.babelrc-ie11
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": 3
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-optional-chaining"
+  ]
+}
diff --git a/client/.gitignore b/client/.gitignore
@@ -1 +1 @@
-/luigi-client.js
+/luigi-client*.js
diff --git a/client/package.json b/client/package.json
@@ -16,8 +16,12 @@
   ],
   "main": "luigi-client.js",
   "scripts": {
-    "bundle": "webpack --mode production",
-    "bundle-develop": "webpack --mode development --watch",
+    "bundle": "npm run bundle-evergreen && npm run bundle-ie11",
+    "bundle-evergreen": "webpack --mode=production --display-error-details",
+    "bundle-ie11": "webpack --mode=production --display-error-details --config webpack-ie11.config.js",
+    "bundle-develop": "npm run bundle-develop-evergreen",
+    "bundle-develop-evergreen": "npm run bundle-evergreen -- -d --watch",
+    "bundle-develop-ie11": "npm run bundle-ie11 -- -d --watch",
     "test": "echo \"Error: no test specified\" && exit 1",
     "docu": "npm run docu:validate && npm run docu:generate:section",
     "docu:generate:section": "documentation readme src/luigi-client.js -f md --readme-file=../docs/luigi-client-api.md --section='Luigi Client API' --markdown-toc=false --quiet --github false",
@@ -29,6 +33,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.2.0",
     "@babel/preset-env": "^7.2.3",
     "babel-loader": "^8.0.5",
+    "core-js": "^3.0.1",
     "documentation": "^11.0.0",
     "webpack": "^4.28.4",
     "webpack-cli": "^3.2.1",

diff --git a/client/webpack-ie11.config.js b/client/webpack-ie11.config.js
@@ -0,0 +1,31 @@
+const path = require('path');
+const { readFileSync } = require('fs');
+
+const babelSettings = JSON.parse(readFileSync('.babelrc-ie11'));
+
+module.exports = {
+  entry: {
+    luigiClient: './src/luigi-client.js'
+  },
+
+  output: {
+    filename: 'luigi-client-ie11.js',
+    libraryExport: 'default',
+    library: 'LuigiClientIe11',
+    libraryTarget: 'umd',
+    path: path.resolve(__dirname)
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: babelSettings
+        }
+      }
+    ]
+  }
+};
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -1,4 +1,8 @@
 const path = require('path');
+const { readFileSync } = require('fs');
+
+const babelSettings = JSON.parse(readFileSync('.babelrc'));
+
 module.exports = {
   entry: {
     luigiClient: './src/luigi-client.js'
@@ -19,9 +23,7 @@ module.exports = {
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
-          options: {
-            rootMode: 'root'
-          }
+          options: babelSettings
         }
       }
     ]

diff --git a/core/.gitignore b/core/.gitignore
@@ -24,8 +24,8 @@ yarn-debug.log*
 yarn-error.log*
 
 .vscode/
-/public/luigi.css
-/public/luigi.js
+/public/luigi*.css
+/public/luigi*.js
 /public/*.woff
 /public/*.woff2
 /public/*.ttf

diff --git a/core/examples/luigi-sample-angular/angular.json b/core/examples/luigi-sample-angular/angular.json
@@ -44,7 +44,7 @@
                 "output": "/luigi-core"
               },
               {
-                "glob": "luigi-client.js",
+                "glob": "luigi-client*.js",
                 "input": "node_modules/@kyma-project/luigi-client",
                 "output": "/luigi-client"
               }

diff --git a/core/examples/luigi-sample-angular/src/app/project/project.component.ts b/core/examples/luigi-sample-angular/src/app/project/project.component.ts
@@ -7,7 +7,6 @@ import {
 } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Subscription } from 'rxjs';
-
 import {
   linkManager,
   uxManager,