@onereach/ssml-editor

ssml-app

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run watcher

npm run watch

Customize configuration

See Configuration Reference.

To see the project in Action Desk

1. run the local server on any port (in this example it's 5500)
2. Create an empty View in Action Desk and paste the next code to the its 'Details' section:

Template:

<ssml :vm="vm"></ssml>

Code:

function getScript(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();

    xhr.open("get", url);

    xhr.onload = function() {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status     : this.status,
          statusText : xhr.statusText,
        });
      }
    };

    xhr.onerror = function() {
      reject({
        status     : this.status,
        statusText : xhr.statusText,
      });
    };

    xhr.send();
  });
};

function loadScript(url) {
  return new Promise((resolve, reject) => {
    let script     = document.createElement('script');

    script.src     = url;
    script.async   = true;
    script.onload  = resolve;
    script.onerror = reject;

    document.body.appendChild(script);
  });
}

function loadComponent(url, name, dev) {
  return async () => {
    try {
      if (!dev) {
        let scope  = {};
        let data   = await getScript(url);
        
        window.Vue = Vue;
        (new Function("Vue", `let vue = Vue;let self = this;${data}`)).bind(scope, Vue)();
        delete window.Vue;
        
        return (name) ? scope[name] : scope;
      } else {
        window.Vue = Vue;
        await loadScript(url);
        delete window.Vue;
        
        return window[name];
      }
    } catch(e) {
      console.error(e);
    }
  }
}
return {
  data() {
    return {
      vm : Vue
    }
  },

  components: {
    ssml : loadComponent('http://127.0.0.1:5500/dist/ssml.umd.js',"ssml", true)
  }
};