README
libcellml.js
Run libCellML in the browser.
Installation
npm install libcellml.js
Usage
In the browser
Create a file index.js with content:
const http = require('http');
const libCellMLModule = require('libcellml.js/libcellml.common');
http.createServer(function (req, res) {
libCellMLModule().then(libcellml => {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('Version of libCellML: ');
res.write(libcellml.versionString());
res.end();
})
}).listen(8080);
Serve the file
node index.js
Open localhost:8080 in a browser. You should see:
Version of libCellML: 0.2.0
Written on the page.
In Vue application
Start a vue project with:
vue create vue-libcellml
Choose the default option in the setup. Change into the newly created project:
cd vue-libcellml
Install libcellml.js:
yarn add libcellml.js
Modify src/main.js to be:
import Vue from 'vue'
import App from './App.vue'
import libCellMLModule from 'libcellml.js'
import libCellMLWasm from 'libcellml.js/libcellml.wasm'
Vue.config.productionTip = false
Vue.prototype.$libcellml = null
const init = async () => {
Vue.prototype.$libcellml = await new libCellMLModule({locateFile(path, prefix) {
if(path.endsWith('.wasm')) {
return libCellMLWasm
}
return prefix + path
}});
/* eslint-disable no-new */
new Vue({
render: h => h(App),
}).$mount('#app');
};
init();
Create a vue.config.js file and set the contents to:
module.exports = {
chainWebpack: config => {
config.module
.rule('wasm')
.type('javascript/auto')
.test(/\.wasm$/)
.use('file-loader')
.loader('file-loader')
.end()
}
}
Modify the contents of src/components/HelloWorld.vue to be:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
libCellML version: {{ versionMsg }}
</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data: function() {
return {
versionMsg: this.$libcellml.versionString()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Serve the application:
yarn serve
Open localhost:8000 in a browser. You should see: