# 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](https://cli.vuejs.org/config/).


## 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:

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

### Code: 

``` javascript
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)
  }
};
```