vbuild - VueをPythonでコンパイル
かつてはHTML/JavaScript/CSSは別々なファイルで作成していましたが、Web Componentの流れは違います。機能毎にすべて一つのファイルにまとまり、独立性と再利用性を高めています。 そんなWeb Componentの流れを汲んでいるVueのファイルをPythonで解析して出力するライブラリがvbuildです。
vbuildの使い方
例えば以下のようなファイルがあります。これはVueです。
<template>
<span>
{{cpt}}
<button @click="inc()">++</button>
</span>
</template>
<script>
{
data() {
return {cpt:0};
},
methods: {
inc() { this.cpt+=1; }
}
}
</script>
<style scoped>
:scope {padding:10px;background:yellow; border:1px solid black}
</style>
<style>
body {padding:10px}
</style>
これをvbuildに読ませます。
>>> import vbuild
>>> sfc=vbuild.VBuild("comp.vue")
そうするとHTMLだけを取り出せます。
>>> print( sfc.html )
<script type="text/x-template" id="tpl-comp"><span data-comp>
{{cpt}}
<button @click="inc()">++</button>
</span></script>
さらにJavaScriptも。
>>> print( sfc.script )
var comp = Vue.component('comp', {template:'#tpl-comp',
data() {
return {cpt:0};
},
methods: {
inc() { this.cpt+=1; }
}
});
もちろんCSSも取り出せます。
>>> print( sfc.style )
*[data-comp] {padding:10px;background:yellow; border:1px solid black}
body {padding:10px}
vbuildの何が嬉しいかと言うと、Pythonだけで使えると言うことです。vbuildを使うことでPythonで開発しているWebシステムでビューにVueを使えるようになります。さらに将来的にはPythonのコードとして出力するようにもなるとのことです。
vbuildはPython製のオープンソース・ソフトウェア（MIT License）です。