fix(docs): handle undocumented breaking changes in babel-standalone for IE11 (#4484)

tmorehouse · jacobmllr95 · commit 56f8bb5af7fb · 2019-12-13T09:02:59.000+01:00
* chore(docs): add gated flag to polyfill.io request

* Update nuxt.config.js

* Update nuxt.config.js

* Update needs-transpiler.js

* Update play.vue

* Update play.vue

* Update play.vue

* Update play.vue

* Update play.vue

* Update play.vue

* Update compile-js.js

* Update play.vue

* Update play.vue

* Update compile-js.js

* Update play.vue

* Update compile-js.js

* Update nuxt.config.js

* Update compile-js.js

* Update compile-js.js

* Update compile-js.js

* Update nuxt.config.js

* Update play.vue

* Update compile-js.js

* Update compile-js.js

* Update needs-transpiler.js

* Update play.vue

* Update play.vue

* Update compile-js.js
diff --git a/docs/pages/play.vue b/docs/pages/play.vue
@@ -685,7 +685,6 @@ export default {
       } else {
         delete options.template
       }
-
       // Vue's `errorCapture` doesn't always handle errors in methods (although it
       // does if the method is used as a `v-on`/`@` handler), so we wrap any methods
       // with a try/catch handler so we can show the error in our GUI log console.
@@ -709,15 +708,15 @@ export default {
         })
       }
 
-      // Try and buld the user app
+      // Try and build the user app
       try {
         const holder = document.createElement('div')
         this.$refs.result.appendChild(holder)
         this.playVM = new Vue({
           ...options,
           el: holder,
-          // Router needed for tooltips/popovers so they hide when
-          // docs route changes
+          // Router needed for tooltips/popovers/toasts so
+          // that they hide when docs route changes
           router: this.$router,
           // We set a fake parent so we can capture most runtime and
           // render errors (this is an error boundary component)
@@ -751,15 +750,15 @@ export default {
         this.compiledJs = null
         return
       }
-      const js = this.js.trim() || '{}'
+      const js = (this.js || '').trim() || '{}'
       this.compiling = true
       let compiled = null
       this.$nextTick(() => {
         this.requestAF(() => {
           try {
             // The app build process expects the app options to
             // be assigned to the `options` variable
-            compiled = this.compiler(`;options = ${js};`)
+            compiled = this.compiler(';options = ' + js + ';')
           } catch (err) {
             this.errHandler(err, 'javascript')
             window.console.error('Error in javascript', err)
diff --git a/docs/utils/compile-js.js b/docs/utils/compile-js.js
@@ -1,12 +1,61 @@
-// Utility for tranpiling ES6 code into ES5 for playground and v-play
+// Utility for transpiling ES6 code into ES5 for playground and `v-play`
+// Imported only on demand when needed
 import { transform, disableScriptTags } from '@babel/standalone'
 
+// Babel broke the standalone version via PR https://github.com/babel/babel/pull/10420
+// Which assumes the browser supports String.prototype.trimLeft/Right
+// IE 11 does not support either, and polyfill.io does not polyfill them
+// So we do it here (as this file is only loaded if we need transpilation):
+if (typeof window !== 'undefined') {
+  const Proto = window.String.prototype
+
+  // Ensure we have a `trimStart` method
+  ;((obj, prop) => {
+    if (!(prop in obj && obj[prop])) {
+      const rx = /^\s+/
+      obj[prop] =
+        obj.trimLeft ||
+        function() {
+          return this.replace(rx, '')
+        }
+    }
+  })(Proto, 'trimStart')
+
+  // Ensure we have a `trimLeft` method
+  ;((obj, prop) => {
+    if (!(prop in obj && obj[prop])) {
+      obj[prop] = obj.trimStart
+    }
+  })(Proto, 'trimLeft')
+
+  // Ensure we have a `trimEnd` method
+  ;((obj, prop) => {
+    if (!(prop in obj && obj[prop])) {
+      const rx = /\s+$/
+      obj[prop] =
+        obj.trimRight ||
+        function() {
+          return this.replace(rx, '')
+        }
+    }
+  })(Proto, 'trimEnd')
+
+  // Ensure we have a `trimRight` method
+  ;((obj, prop) => {
+    if (!(prop in obj && obj[prop])) {
+      obj[prop] = obj.trimEnd
+    }
+  })(Proto, 'trimRight')
+}
+
+// Prevent Babel/Standalone from processing <script> tag insertions
 if (typeof window !== 'undefined' && window && window.removeEventListener) {
-  // Prevent Babel/Standalone from processing <script> tag insertions
   disableScriptTags()
 }
 
+// Our babel transform options
 const transformOptions = {
+  sourceType: 'script',
   presets: ['es2015', 'es2016', 'es2017'],
   plugins: [
     // Not used as we need to import the helpers into the transpiled code
@@ -15,6 +64,7 @@ const transformOptions = {
   ]
 }
 
+// Our transpilation compiler method
 export default function compileJs(code) {
   if (!code) {
     return ''
diff --git a/docs/utils/needs-transpiler.js b/docs/utils/needs-transpiler.js
@@ -8,14 +8,16 @@ const tests = [
   // Arrow functions
   'const test1 = (a) => a',
   // Object function shortcut
-  'const test2 = { a: 1, b () { return 0 } }',
+  'const test2 = { a: 1, b() { return 0 } }',
   // Object shortcut
-  'const test3a = { a: 1}; const test3b = { test3a, b: 2 }',
-  // Object rest spread
-  'const test4a = { a: 1, b: 2}; const test4b = { c: 3, ...test4a }',
+  'const test3a = { a: 1 }; const test3b = { test3a, b: 2 }',
+  // Object spread
+  'const test4a = { a: 1, b: 2 }; const test4b = { c: 3, ...test4a }',
+  // Array spread
+  'const test5a = [1, 2]; const test5b = [...test5a, 3, 4]',
   // String interpolation
   /* eslint-disable no-template-curly-in-string */
-  'const test5a = "bar"; const test5b = `foo${test5a}`'
+  'const test6a = "bar"; const test6b = `foo${test6a}`'
   /* eslint-enable no-template-curly-in-string */
 ]
 
