defer-script.html

<link rel="import" href="../polymer/polymer.html">

<!--
`defer-script`
 Load deferred scripts that survive vulcanisation/bundling

@demo demo/index.html
-->

<dom-module id="defer-script">
  <template></template>

  <script>
    Polymer({

      is: 'defer-script',

      properties: {
        src: {
          type: String
        },

        sources: {
          type: Array,
          computed: '_splitSrcString(src)',
          observer: '_loadSources'
        },

        loaded: {
          type: Boolean,
          value: false,
          reflectToAttribute: true,
          readOnly: true
        },

        loadedSourcesCount: {
          type: Number,
          value: 0,
          readOnly: true
        }
      },

      attached: function() {
        window.deferScript = this

        this.async(() => {
          if (!this.src) this._notifyLoad()
        }, 10)
      },

      _loadSources: function(sources) {
        sources.forEach(this._loadScript.bind(this))
      },

      _loadScript: function(src) {
        this.async(() => {
          const script = document.createElement('script')
          const root = this.dataHost ? this.dataHost : this

          script.addEventListener('error', this._notifyError.bind(this))
          script.addEventListener('load', () => {
            this._setLoadedSourcesCount(++this.loadedSourcesCount)
            if (this.loadedSourcesCount >= this.sources.length) this._notifyLoad()
          })

          script.setAttribute('src', src.includes('http') ? src : root.resolveUrl(src))
          window.document.body.appendChild(script)
        }, 10)
      },

      _notifyLoad: function() {
        this._setLoaded(true)
        this.fire('load')
      },

      _notifyError: function(err) {
        this.fire('error', err)
      },

      _splitSrcString: function(src) {
        return src.split(',').map(src => decodeURI(src)).map(src => src.trim())
      }
    });
  </script>
</dom-module>