From b3f7709c5ac585ea425530f09338158b7f04a051 Mon Sep 17 00:00:00 2001
From: Dayle Salmon <dayle.salmon@wmca.org.uk>
Date: Mon, 7 Dec 2020 13:49:24 +0000
Subject: [PATCH] fix: JS examples now work correctly.

---
 gulp-tasks/build-nunjucks.js                  |  9 ++++--
 .../_component-example-script.js              | 31 -------------------
 .../component-example/component-example.njk   |  4 ---
 src/www/_partials/component-example/index.js  |  3 +-
 src/www/wmnds-website.js                      |  7 +----
 5 files changed, 8 insertions(+), 46 deletions(-)
 delete mode 100644 src/www/_partials/component-example/_component-example-script.js

diff --git a/gulp-tasks/build-nunjucks.js b/gulp-tasks/build-nunjucks.js
index 8480600da..926829ff5 100644
--- a/gulp-tasks/build-nunjucks.js
+++ b/gulp-tasks/build-nunjucks.js
@@ -23,7 +23,8 @@ const mergingJSONFiles = () => {
 };
 
 const manageEnv = env => {
-  // Custom Filters
+  // Custom Filters for nunjucks
+
   // This filter beautify's our html, useful for the pre/code blocks in component-example.njk
   env.addFilter('formatHTML', html => {
     const beautifulHTML = beautify(html.trim(), {
@@ -39,6 +40,7 @@ const manageEnv = env => {
     return beautifulHTML;
   });
 
+  // Beautify function shared by the two JS filters below
   const beautifyJavascript = js =>
     beautifyJS(js.trim(), {
       indent_size: 2,
@@ -47,13 +49,14 @@ const manageEnv = env => {
       max_preserve_newlines: 0
     });
 
+  // Filter to format JS
   env.addFilter('formatJS', js => {
     return beautifyJavascript(js);
   });
 
+  // Filter to convert content to ES5
   env.addFilter('convertToES5', js => {
-    const compileJs = input =>
-      babel.transform(input, { presets: ['env', { modules: false }] }).code;
+    const compileJs = input => babel.transform(input, { presets: ['env'] }).code; // BABEL COMPILER ES6 => ES5
     const compiledJS = compileJs(js);
 
     return beautifyJavascript(compiledJS);
diff --git a/src/www/_partials/component-example/_component-example-script.js b/src/www/_partials/component-example/_component-example-script.js
deleted file mode 100644
index 128af59f9..000000000
--- a/src/www/_partials/component-example/_component-example-script.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// The commented out code below is for compiling ES6 to ES5 in the browser. Commented out for now as it doesn't work great in IE11
-// import * as babel from '@babel/standalone';
-
-const componentExampleScript = () => {
-  // const exampleScripts = document.querySelectorAll('.wmnds-website-code-example__js'); // Get all code examples that have the js tab enabled
-  // exampleScripts.forEach(exampleScript => {
-  //   const parentEle = exampleScript; // get parent element for easier querying
-  //   const scriptTag = parentEle.querySelector('script').innerHTML; // Grab our javascript from the hidden script tag
-  //   // Func to replace special chars with nice html chars
-  //   const escapeCharacters = str => {
-  //     return str
-  //       .replace(/&/g, '&amp;')
-  //       .replace(/</g, '&lt;')
-  //       .replace(/>/g, '&gt;')
-  //       .replace(/"/g, '&quot;')
-  //       .replace(/'/g, '&#039;')
-  //       .replace('<br>', '<br />')
-  //       .trim();
-  //   };
-  //   const escapeCharScriptES6 = escapeCharacters(scriptTag); // Run our code through the escaper func
-  //   // *** BABEL COMPILER ES6 => ES5 (TURNED OFF DUE TO IE11 ISSUE) ***
-  //   // compile fn
-  //   // const compileJs = input => babel.transform(input, { presets: ['env'] }).code;
-  //   // const escapedCharScriptES5 = escapeCharacters(compileJs(scriptTag));
-  //   // parentEle.querySelector('.wmnds-details--js .js').innerHTML = escapedCharScriptES5;
-  //   // *** END BABEL ES6 => ES5 ***
-  //   parentEle.querySelector('.wmnds-details--es6 .js').innerHTML = escapeCharScriptES6; // The find the es6 pre/code block and drop our formatted code in there
-  // });
-};
-
-export default componentExampleScript;
diff --git a/src/www/_partials/component-example/component-example.njk b/src/www/_partials/component-example/component-example.njk
index 4d69b6db4..d83a0c294 100644
--- a/src/www/_partials/component-example/component-example.njk
+++ b/src/www/_partials/component-example/component-example.njk
@@ -127,10 +127,6 @@
           {% endfilter -%}
         </code></pre>
       </details>
-
-      {# <script type="text/plain" class="wmnds-website-code-example__script">
-        {%- include componentPath + "_example.js" -%}
-      </script> #}
     </div>
   {% endif %}
 </div>
diff --git a/src/www/_partials/component-example/index.js b/src/www/_partials/component-example/index.js
index 023da346e..c24d0e4fb 100644
--- a/src/www/_partials/component-example/index.js
+++ b/src/www/_partials/component-example/index.js
@@ -1,5 +1,4 @@
 import componentExample from './_component-example';
-import componentExampleScript from './_component-example-script';
 import componentExampleIframe from './_component-example-iframe';
 
-export { componentExample, componentExampleScript, componentExampleIframe };
+export { componentExample, componentExampleIframe };
diff --git a/src/www/wmnds-website.js b/src/www/wmnds-website.js
index f24da7c8f..f431710cf 100644
--- a/src/www/wmnds-website.js
+++ b/src/www/wmnds-website.js
@@ -8,11 +8,7 @@ import footerJs from '../wmnds/patterns/footer/_example';
 import accordionsJS from '../wmnds/components/accordion/_example';
 import searchFilterJs from '../wmnds/patterns/search/search-filter/_example';
 
-import {
-  componentExample,
-  componentExampleScript,
-  componentExampleIframe
-} from './_partials/component-example';
+import { componentExample, componentExampleIframe } from './_partials/component-example';
 
 const isInIframe = window.frameElement && window.frameElement.nodeName === 'IFRAME'; // check if we are in an iframe
 // If not in iframe and we are in prod, then run sentry
@@ -46,6 +42,5 @@ window.addEventListener(
   cookies(),
   searchFilterJs(),
   componentExampleIframe(),
-  componentExampleScript(),
   componentExample)
 );