docs: fix IE11 issues in docs (#4009)

Author: layershifter

docs/src/components/CodeSnippet/CodeSnippet.js

@@ -1,8 +1,5 @@
 import _ from 'lodash'
 import * as Prism from 'prismjs/components/prism-core'
-import prettier from 'prettier/standalone'
-import babel from 'prettier/parser-babel'
-import html from 'prettier/parser-html'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -16,19 +13,6 @@ import 'prismjs/components/prism-jsx'
 
 import CodeSnippetLabel from './CodeSnippetLabel'
 
-const prettierConfig = {
-  htmlWhitespaceSensitivity: 'ignore',
-  printWidth: 100,
-  tabWidth: 2,
-  semi: false,
-  singleQuote: true,
-  trailingComma: 'all',
-  plugins: {
-    babel,
-    html,
-  },
-}
-
 const normalizeToString = (value) => {
   if (Array.isArray(value)) {
     return value.join('\n')
@@ -37,22 +21,12 @@ const normalizeToString = (value) => {
   return _.isObject(value) ? JSON.stringify(value, null, 2) : value
 }
 
-export const prettifyCode = (code, parser) => {
-  const formatted = prettier.format(code, {
-    ...prettierConfig,
-    // a narrower print width is more friendly to doc examples
-    parser,
-  })
-
-  return formatted.replace(/^;</m, '<') // remove beginning semi in JSX/HTML
-}
-
 const formatters = {
   bash: (val = '') => val.replace(/^[\w]/gm, '$$  $&'),
-  json: (val) => prettifyCode(val, 'json'),
-  js: (val = '') => prettifyCode(val, 'babel'),
-  jsx: (val = '') => prettifyCode(val, 'babel'),
-  html: (val = '') => prettifyCode(val, 'html'),
+  json: (val) => val,
+  js: (val = '') => val,
+  jsx: (val = '') => val,
+  html: (val = '') => val,
 }
 
 export const formatCode = (code, mode) => {

docs/src/components/Document.js

@@ -21,6 +21,7 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
       />
 
       <script src='https://cdn.jsdelivr.net/npm/core-js-bundle/minified.js' />
+      <script src='https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver' />
       <script
         src={`https://cdnjs.cloudflare.com/ajax/libs/anchor-js/${versions.anchor}/anchor.min.js`}
       />
@@ -29,14 +30,6 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
       />
       <script src={`https://cdn.jsdelivr.net/faker.js/${versions.faker}/faker.min.js`} />
 
-      <script
-        crossOrigin='true'
-        src={`https://cdn.jsdelivr.net/npm/prettier@${versions.prettier}/standalone.min.js`}
-      />
-      <script
-        crossOrigin='true'
-        src={`https://cdn.jsdelivr.net/combine/npm/prettier@${versions.prettier}/parser-babel.min.js,npm/prettier@${versions.prettier}/parser-html.min.js`}
-      />
       <script
         src={`https://cdnjs.cloudflare.com/ajax/libs/prop-types/${versions.propTypes}/prop-types${
           siteData.dev ? '' : '.min'

docs/src/utils/formatCode.js

@@ -1,4 +1,6 @@
 import prettier from 'prettier/standalone'
+import babel from 'prettier/parser-babel'
+
 import prettierConfig from '../../../.prettierrc.json'
 import isBrowser from '../../../src/lib/isBrowser'
 
@@ -21,7 +23,7 @@ const formatCode = isBrowser()
         ...prettierConfig,
         printWidth,
         parser,
-        plugins: window.prettierPlugins,
+        plugins: { babel },
       })
 
       return formatted.replace(/^;</, '<') // remove beginning semi in JSX/HTML

static.config.js

@@ -21,7 +21,6 @@ export default {
         standalone: require('@babel/standalone/package.json').version,
       },
       faker: require('faker/package.json').version,
-      prettier: require('prettier/package.json').version,
       propTypes: require('prop-types/package.json').version,
       prismjs: require('prismjs/package.json').version,
       react: require('react/package.json').version,

static.webpack.js

@@ -21,11 +21,6 @@ export default (webpackConfig, { stage }) => ({
           'anchor-js': 'AnchorJS',
           '@babel/standalone': 'Babel',
           faker: 'faker',
-          'prettier/standalone': 'prettier',
-          // These Prettier plugins are available under window.prettierPlugins
-          'prettier/parser-babel': 'prettierPlugins.babel',
-          'prettier/parser-html': 'prettierPlugins.html',
-
           'prop-types': 'PropTypes',
           react: 'React',
           'react-dom': 'ReactDOM',
@@ -43,6 +38,7 @@ export default (webpackConfig, { stage }) => ({
           path.resolve(__dirname, 'node_modules/chalk'),
           path.resolve(__dirname, 'node_modules/debug'),
           path.resolve(__dirname, 'node_modules/leven'),
+          path.resolve(__dirname, 'node_modules/prettier'),
 
           path.resolve(__dirname, 'docs'),
           path.resolve(__dirname, 'src'),