Hype loader component

hype-loader.vue

<script>
  let $ = require('jquery')

  module.exports= {
    props: {
      src: {
        required: true,
      },
      hypeDocument: {
        twoWay: true
      }
    },
    methods: {
      onLoad(hypeDocument) {
        this.hypeDocument = hypeDocument
      }
    },
    directives: {
      hype: {
        params: ['loaded'],
        update(value) {
          let pattern = /.+\/(.+)_hype_generated_script\.js/gi
          let exec = pattern.exec(value)
          let id =  exec && exec[1]
          if(!id) {
            console.warn('hype directive: id invalid')
            return
          }
          $('<div/>').attr('id', `${id}_hype_container`).appendTo(this.el)
          this.vm.$on('hook:attached', () =>  {
            this._interval = setTimeout(() => { //HACK unexpected crashing from hype runtime
              this._hype_script = $(`<script type='text/javascript', charset='utf-8', src='${value}'/>`).appendTo('body')
              if (typeof this.params['loaded'] == 'function') this.params['loaded'].call(this.vm, HYPE.documents[id])
            }, 100)
          })
        },
        unbind() {
          clearTimeout(this._interval)
          if(this._hype_script) this._hype_script.remove()
        }
      }
    }
  };
</script>

<template lang="jade">

div.hypedocument(style='margin:auto;position:relative;width:100%;height:100%;overflow:hidden;', v-hype="src", :loaded="onLoad", aria-live='polite')
  //- script(type='text/javascript', charset='utf-8', src='/images/screenshot1/default_hype_generated_script.js?48280')

</template>

<style lang="scss">

  .hypedocument {
    box-sizing: content-box!important;
    * {
      box-sizing: content-box!important;
    }
  }
</style>