dotnetCarpenter
commented
5 years ago Looking a bit close to the terminal output, I seems that laravel-mix-polyfill does not find the correct transforms.
[/home/dotnet/napp/newPDFViewer/resources/assets/js/save-warning/index.js] Added following core-js polyfills:
es.function.name { "ie":"11" }
web.dom-collections.for-each { "ie":"11" }And the original file is:
export const template =
`<style>
.save-warning {
position: absolute;
z-index: 100;
top: 0;
left: 50%;
max-height: 50%;
transform: translateX(-50%);
opacity: 1;
transition: 500ms opacity;
}
.save-warning__icon {
height: 20vh;
width: 100%;
margin: 0 auto;
}
.save-warning__text {
padding: 1em;
margin: 0.2em;
background: #0d1b2a;
border-radius: 5px;
color: #f57900;
font-size: 2.5em;
text-align: center;
}
.save-warning__emphasis {
display: block;
}
.save-warning--hide {
opacity: 0;
pointer-events: none;
}
</style>
<section class="save-warning">
<img class="save-warning__icon" src="/images/svg/warning.svg">
<p class="save-warning__text">
<strong>The PDF will not work if you save this page locally.</strong>
<em class="save-warning__emphasis">use the download button</em>
</p>
</section>`
class Invoker {
constructor (name, seq, action) {
this.name = name
this.seq = seq
this.execute = action
this.seqNumber = 0
}
check (event) {
const code = this.seq[this.seqNumber].code
const ctrl = this.seq[this.seqNumber].ctrl || false
if (
event.code === code &&
(event.ctrlKey || event.metaKey) === ctrl
) {
return true
} else {
return false
}
}
sequenceMatching (event) {
if (this.check(event)) {
if (this.seqNumber === this.seq.length - 1) {
this.execute(event)
this.seqNumber = 0
} else {
this.seqNumber += 1
}
} else {
this.seqNumber = 0
}
}
matching (event) {
if (this.check(event)) {
this.execute(event)
}
}
}
export class Commander {
constructor () {
this.commands = []
}
addCommand (name, seq, action) {
this.commands.push(new Invoker(name, seq, action))
}
keyHandler (event) {
this.commands.forEach(c => {
if (c.seq.length > 1) {
c.sequenceMatching(event)
} else {
c.matching(event)
}
})
}
}
@scottcharlesworth Thank you for creating this.
I have a question though because I can not get it to work properly.
I'm using template literals and classes and with the debug flag, I seems that laravel-mix-polyfill also detects that but the transforms are never applied. However transforms like proposal-async-generator-functions and proposal-object-rest-spread are.
In my
webpack.mix.jsI have:Output:
I have
node_modules/@babel/plugin-transform-template-literalsetc, so I don't think I'm missing babel modules.@scottcharlesworth Do you have an idea to what I'm missing or how to debug this?
Any help is greatly appreciated!