Skip to content
Permalink
Browse files

fix(docs): handle undocumented breaking changes in babel-standalone f…

…or IE11 (#4484)

* 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
  • Loading branch information
tmorehouse authored and jackmu95 committed Dec 13, 2019
1 parent b246682 commit 56f8bb5af7fb7188da035210e8be28d7ae1c7bc1
Showing with 64 additions and 13 deletions.
  1. +5 −6 docs/pages/play.vue
  2. +52 −2 docs/utils/compile-js.js
  3. +7 −5 docs/utils/needs-transpiler.js
@@ -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)
@@ -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 ''
@@ -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 */
]

0 comments on commit 56f8bb5

Please sign in to comment.
You can’t perform that action at this time.