ITエンジニア/デザイナ向けにオープンソースを毎日紹介

かつては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)です。

manatlan/vbuild: "Compile" your VUE component (*.vue) to standalone html/js/css ... python only (no need of nodejs)

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2