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
- run the local server on any port (in this example it's 5500)
- 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)
}
};