fix(frontend): update next config to support IE10 - IE11

* fix(ie11): add P3P header * fix(ie11): fix some CSS issues * fix(ie11): force non ES6 module transpilation * fix(frontend): add IE10 support :hell: fix #229 fix #88
SocialGouv · Jan 16, 2019 · 12fbaa5 · 12fbaa5
1 parent 0c1583e
commit 12fbaa5
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 120 deletions.
diff --git a/packages/code-du-travail-api/src/server/index.js b/packages/code-du-travail-api/src/server/index.js
@@ -8,12 +8,14 @@ require("elastic-apm-node").start({
 
 require("dotenv").config();
 const path = require("path");
+const Koa = require("koa");
 const bodyParser = require("koa-bodyparser");
 const mount = require("koa-mount");
 const send = require("koa-send");
 const cors = require("@koa/cors");
+
 const DOCS_DIR = "../../../code-du-travail-data/dataset/courrier-type/docx";
-const Koa = require("koa");
+
 // const corsConf = require('./conf/cors')
 const apiRoutes = require("./routes/api");
 const API_BASE_URL = require("./routes/api").BASE_URL;
@@ -37,6 +39,16 @@ app.use(async (ctx, next) => {
     ctx.app.emit("error", err, ctx);
   }
 });
+
+/**
+ * use a middleware for IE 10+ http xmlhttp requests
+ * https://blogs.msdn.microsoft.com/ieinternals/2013/09/17/a-quick-look-at-p3p/
+ */
+app.use(async (ctx, next) => {
+  ctx.set("P3P", "NOI ADM DEV PSAi OUR OTRo STP IND COM NAV DEM");
+  await next();
+});
+
 app.use(cors());
 app.use(bodyParser());
 app.use(apiRoutes.routes());

diff --git a/packages/code-du-travail-css/docs/css/components/_categories.css b/packages/code-du-travail-css/docs/css/components/_categories.css
@@ -1,101 +1,100 @@
 .categories {
-    /* Gutters between items. */
-    /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items */
-    --flex-gutter-size: 10px;
+  /* Gutters between items. */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items */
+  --flex-gutter-size: 10px;
 }
 
 .categories header {
-    margin-bottom: var(--spacing-large);
+  margin-bottom: var(--spacing-large);
 }
 
 .categories__list {
-    display: flex; /* Flex layout so items have equal height. */
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: flex-start;
-    list-style-type: none;
-    padding: 0;
-    /* Use negative margins on sides to create gutters that do not also
+  display: flex; /* Flex layout so items have equal height. */
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: flex-start;
+  list-style-type: none;
+  padding: 0;
+  /* Use negative margins on sides to create gutters that do not also
     create a gutter at the edges of the container. */
-    margin: calc(var(--flex-gutter-size) * -1);
+  margin: calc(var(--flex-gutter-size) * -1);
 }
 
 .categories__list-item {
-
-    /*width:calc(100%/4 - 2 * var(--flex-gutter-size)) ;*/
-    /*flex: 0 0 250px;*/
-    /*margin: var(--flex-gutter-size);*/ /* Gutters between items. */
-    width: media(
-        calc(100%/4 - 2 * var(--flex-gutter-size)),
-        (--bp-tablet) calc(100%/3 - 2 * var(--flex-gutter-size)),
-        (--bp-mobile) calc(100% - 2 * var(--flex-gutter-size)),
-    );
-
-    margin: var(--flex-gutter-size);
-    text-align: center;
-
-    & a,
-    & a:link,
-    & a:visited {
-        display: block;
-        height: 100%;
-        padding: var(--spacing-small) var(--spacing-base);
-        border: 1px solid var(--color-element-border);
-        border-radius: var(--border-radius-base);
-        background: var(--color-white);
-        color: var(--color-light-text);
-        text-decoration: none;
-        transition: all .2s ease;
-    }
-
-    & a:focus,
-    & a:hover,
-    & a:active {
-        transform: scale(1.1);
-        border: 1px solid var(--color-focus);
-        box-shadow: 0 0 2px 2px var(--color-focus-shadow);
-    }
-
-    & a:focus h3,
-    & a:hover h3,
-    & a:active h3 {
-        /*text-decoration: underline;*/
-
-    }
-
-    & h3, & p {
-        font-size: 0.9375rem;
-    }
-
-    & a img {
-        display: inline-block;
-        width: 2.5rem;
-        margin: var(--spacing-small) 0;
-    }
+  /*width:calc(100%/4 - 2 * var(--flex-gutter-size)) ;*/
+  /*flex: 0 0 250px;*/
+  /*margin: var(--flex-gutter-size);*/ /* Gutters between items. */
+  width: media(
+    calc(100% / 4 - 2 * var(--flex-gutter-size)),
+    (--bp-tablet) calc(100% / 3 - 2 * var(--flex-gutter-size)),
+    (--bp-mobile) calc(100% - 2 * var(--flex-gutter-size))
+  );
+
+  margin: var(--flex-gutter-size);
+  text-align: center;
+
+  & a,
+  & a:link,
+  & a:visited {
+    display: block;
+    height: 100%;
+    padding: var(--spacing-small) var(--spacing-base);
+    border: 1px solid var(--color-element-border);
+    border-radius: var(--border-radius-base);
+    background: var(--color-white);
+    color: var(--color-light-text);
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+
+  & a:focus,
+  & a:hover,
+  & a:active {
+    transform: scale(1.1);
+    border: 1px solid var(--color-focus);
+    box-shadow: 0 0 2px 2px var(--color-focus-shadow);
+  }
+
+  & a:focus h3,
+  & a:hover h3,
+  & a:active h3 {
+    /*text-decoration: underline;*/
+  }
+
+  & h3,
+  & p {
+    font-size: 0.9375rem;
+  }
+
+  & a img {
+    display: inline-block;
+    width: 2.5rem;
+    margin: var(--spacing-small) 0;
+  }
 }
 
 .categories__list-item--small {
-
-    & a,
-    & a:link,
-    & a:visited {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        text-align: left;
-    }
-
-    & figure {
-        margin: .5rem;
-    }
-
-    & img {
-        width: 2.5rem;
-        margin: .2rem auto;
-    }
-
-    & h3, & p {
-        font-size: .8125rem;
-        margin: .5rem
-    }
+  & a,
+  & a:link,
+  & a:visited {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    text-align: left;
+  }
+
+  & figure {
+    margin: 0.5rem;
+  }
+
+  & img {
+    width: 2.5rem;
+    margin: 0.2rem auto;
+  }
+
+  & h3,
+  & p {
+    font-size: 0.8125rem;
+    margin: 0.5rem;
+  }
 }
diff --git a/packages/code-du-travail-css/docs/css/components/_search.css b/packages/code-du-travail-css/docs/css/components/_search.css
@@ -29,6 +29,7 @@
   align-items: center;
   margin: 0.8rem;
   border: none;
+  max-width: 200px;
   border-radius: var(--border-radius-base);
   background-color: var(--color-lighter-grey);
 }
@@ -76,6 +77,7 @@ input[type="search"].search__input {
 
   background: var(--color-white);
 
+  height: 100%;
   margin: 0;
   max-width: 100%;
   width: 100%;

diff --git a/packages/code-du-travail-frontend/.babelrc.js b/packages/code-du-travail-frontend/.babelrc.js
@@ -1,8 +1,14 @@
 module.exports = {
-  presets: ["next/babel"],
-  env: {
-    test: {
-      presets: [["next/babel", { "preset-env": { modules: "commonjs" } }]]
-    }
-  }
+  presets: [
+    [
+      "next/babel",
+      {
+        "preset-env": {
+          targets: {
+            browsers: ["last 5 version", "IE>=10"]
+          }
+        }
+      }
+    ]
+  ]
 };
diff --git a/packages/code-du-travail-frontend/next.config.js b/packages/code-du-travail-frontend/next.config.js
@@ -1,27 +1,31 @@
 const withCSS = require("@zeit/next-css");
+const withTM = require("next-plugin-transpile-modules");
 
-module.exports = withCSS({
-  // https://github.com/zeit/next.js/#disabling-file-system-routing
-  useFileSystemPublicRoutes: false,
-  webpack(config, options) {
-    config.module.rules.push({
-      test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)$/,
-      loader: "file-loader",
-      options: {
-        publicPath: "/_next/static/",
-        outputPath: "static/"
-      }
-    });
-    return config;
-  },
-  publicRuntimeConfig: {
-    API_URL: process.env.API_URL || "http://127.0.0.1:1337/api/v1",
-    API_ADDRESS: "https://api-adresse.data.gouv.fr/search",
-    PACKAGE_VERSION: require('./package.json').version,
-    SENTRY_PUBLIC_DSN: process.env.SENTRY_PUBLIC_DSN,
-    PIWIK_URL: process.env.PIWIK_URL,
-    PIWIK_SITE_ID: process.env.PIWIK_SITE_ID,
-    FRONTEND_PORT: process.env.FRONTEND_PORT,
-    NODE_ENV: process.env.NODE_ENV
-  }
-});
+module.exports = withTM(
+  withCSS({
+    // https://github.com/zeit/next.js/#disabling-file-system-routing
+    useFileSystemPublicRoutes: false,
+    transpileModules: ["p-debounce"],
+    webpack(config, options) {
+      config.module.rules.push({
+        test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)$/,
+        loader: "file-loader",
+        options: {
+          publicPath: "/_next/static/",
+          outputPath: "static/"
+        }
+      });
+      return config;
+    },
+    publicRuntimeConfig: {
+      API_URL: process.env.API_URL || "http://127.0.0.1:1337/api/v1",
+      API_ADDRESS: "https://api-adresse.data.gouv.fr/search",
+      PACKAGE_VERSION: require("./package.json").version,
+      SENTRY_PUBLIC_DSN: process.env.SENTRY_PUBLIC_DSN,
+      PIWIK_URL: process.env.PIWIK_URL,
+      PIWIK_SITE_ID: process.env.PIWIK_SITE_ID,
+      FRONTEND_PORT: process.env.FRONTEND_PORT,
+      NODE_ENV: process.env.NODE_ENV
+    }
+  })
+);
diff --git a/packages/code-du-travail-frontend/package.json b/packages/code-du-travail-frontend/package.json
@@ -47,6 +47,7 @@
     "css-loader": "^1.0.0",
     "eslint": "^5.7.0",
     "jest": "^23.6.0",
+    "next-plugin-transpile-modules": "^1.0.0",
     "prettier": "^1.14.3",
     "react-testing-library": "^5.2.3"
   },

diff --git a/packages/code-du-travail-frontend/pages/_app.js b/packages/code-du-travail-frontend/pages/_app.js
@@ -1,5 +1,6 @@
-import App, { Container } from "next/app";
 import React from "react";
+import PropTypes from "prop-types";
+import App, { Container } from "next/app";
 import GitHubForkRibbon from "react-github-fork-ribbon";
 import "@cdt/css";
 import "@reach/dialog/styles.css";
@@ -9,6 +10,14 @@ import Header from "../src/layout/Header.js";
 import Footer from "../src/layout/Footer.js";
 
 export default class MyApp extends App {
+  // HACK @lionelb from https://github.com/zeit/next.js/issues/4687#issuecomment-432608667
+  // This is to fix withRouter() from next/router
+  // IE10 static props hoisting doesn't work
+  static childContextTypes = {
+    headManager: PropTypes.object,
+    router: PropTypes.object
+  };
+
   static async getInitialProps({ Component, ctx }) {
     let pageProps = {};
 

diff --git a/packages/code-du-travail-frontend/pages/_document.js b/packages/code-du-travail-frontend/pages/_document.js
@@ -32,7 +32,10 @@ export default class MyDocument extends Document {
             href="/static/print.css"
             media="print"
           />
-          <script src="//cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch" />
+          <script
+            crossOrigin="anonymous"
+            src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CArray.prototype.find%2CArray.prototype.findIndex%2CObject.setPrototypeOf%2CNumber.isFinite%2Cfetch%2CWeakMap%2CSymbol%2CSymbol.hasInstance%2CSymbol.isConcatSpreadable%2CSymbol.iterator%2CSymbol.unscopables%2CSymbol.toStringTag%2CSymbol.toPrimitive%2CSymbol.split%2CSymbol.search%2CSymbol.species%2CSymbol.replace%2CSymbol.match%2CSet%2CMap"
+          />
         </Head>
         <body>
           <noscript>

diff --git a/yarn.lock b/yarn.lock
@@ -12357,6 +12357,11 @@ next-line@^1.1.0:
   resolved "https://registry.npmjs.org/next-line/-/next-line-1.1.0.tgz#fcae57853052b6a9bae8208e40dd7d3c2d304603"
   integrity sha1-/K5XhTBStqm66CCOQN19PC0wRgM=
 
+next-plugin-transpile-modules@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/next-plugin-transpile-modules/-/next-plugin-transpile-modules-1.0.0.tgz#435436ded5316cef76ed333af01bacc0806de414"
+  integrity sha512-fRIjGPmPPeU6itJITqS8FPNQGwxqHhfh1K+dVaKKMDOa6Yf4EN+1QktG9FALje10zUUrHCc6Om3rwHGCdn3hjA==
+
 next-tick@1:
   version "1.0.0"
   resolved "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"