vue-playを触ってみた

vue-playとはVue.jsのコンポーネントを単体で実行できる環境を提供してくれるツールみたいです。
githubのREADMEを見ながら触って見ました。

※サンプルコードのなかにはES2015の文法を使用している部分があります。

環境構築

getplayをグローバルにインストールします。

yarn global add getplay

任意のディレクトリを作成し、getplayを実行し初期化します。

mkdir vue-play-test && cd vue-play-test
getplay

playディレクトリとplay.config.jsが生成されます。
port番号などを変更したい場合はplay.config.jsから設定できます。

実行してみる

yarn play

変更を検知してhot-reloadしてくれるので毎回実行する必要はありません。

コンポーネントの追加

コンポーネント作成

簡単なコンポーネントを作成します。

src/components/TestButton.vue

<template>
    <button @click="onClick">
        <slot></slot>
    </button>
</template>

<script>

export default {
    name: 'TestButton',
    methods: {
        onClick() {
            this.$log('hoge')
        }
    }
}
</script>

$log関数を利用すると画面のコンソール欄に出力されます。

play/index.jsの編集

play関数を利用して追加します。
play関数の引数にコンポーネントを指定することでadd関数の中でコンポーネントとして利用できるようになるみたいです。
add関数を複数つなげて,それぞれでpropsの値を変えたりなど様々なパターンで実行できるみたいです。

play/index.js

import { play } from 'vue-play'
import TestButton from '../src/components/TestButton.vue'

play(TestButton)
  .add('with text', '<test-button>hoge</test-button>')

他にもrender関数を利用する方法やtemplateで指定することができます。
第二引数に関数を指定するとrender関数として実行してくれます。

play(TestButton)
  .add('with text', '<test-button>test</test-button>')
  .add('with template', {
    template: '<test-button>template</test-button>'
  })
  .add('with render', h => h(TestButton, ['render']))

*.play.jsで追加

コンポーネントが増えてくるとplay/index.jsのコード量が多くなり可読性が下がってしまうと思います。
.play.jsという拡張子のファイルを作成することでファイルを分割することができます。

play/index.jsに以下のコードを追加

play/index.js

const load = requireContext => requireContext.keys().map(requireContext)

// require.contextの第一引数にどのディレクトからloadするかを記述します
load(require.context('../src/components', true, /.play.js$/))

指定したディレクトリに.play.jsファイルを作成します。
play/index.jsと同じように書いていきます

src/components/TestButton.play.js

import TestButton from './TestButton.vue'
import { play } from 'vue-play'

play(TestButton)
  .add('with text', '<test-button>test</test-button>')
  .add('with template', {
    template: '<test-button>template</test-button>'
  })
  .add('with render', h => h(TestButton, ['render']))

コンポーネントにpropsを渡す

コンポーネントへのpropsの渡し方は以下の様にdataを用意しtemplate内で指定してします。

.add('with template', {      
        data() {
            return {
                text: 'props text'
            }
        },
        template: '<test-button :text="text">template</test-button>'
    })

コンポーネントの説明を追加する

説明文やサンプルコードを載せることができます。

READMEの追加

add関数の中でreadmeにHTML文字列を入れてあげます。

play(TestButton) 
    .add('with template', {
    	readme: '<h1>TestButtonの使い方</h1>'
    })

markdownファイルを読み込んでreadmeに指定する

readmeにmdファイルを使いたいと思い少し試してみました。

まず初めにhtml-loaderとmarkdown-loaderをnpmでインストールします。

npm i html-loader markdown-loader --save-dev

次にmdファイルを読み込めるようにwebpackの設定を編集します。
play.config.jsにwebpack関数を追加することでconfigをいじることができます。

play.config.js

const webpack = require('webpack')

module.exports = {
	//...
    webpack(config) {
    config.module.rules.push({
      test: /\.md$/,
      use: [
        {
          loader: "html-loader"
        },
        {
          loader: "markdown-loader",          
        }
      ]
    })        
    return config
  }
}

.play.jsファイルでmdファイルを読み込みreadmeに入れてあげます。

src/components/TestButton.play.js

import TestButton from './TestButton.vue'
import { play } from 'vue-play'
import readme from './TestButton.md'

play(TestButton)           
    .add('with template', {      
        template: '<test-button>template</test-button>',
        readme    
    })

Exampleの追加

add関数の中でexampleにサンプルコードを入れてあげます。

play(TestButton) 
    .add('with template', {
    	example: '<test-button :text="text">template</test-button>'
    })

最後に

いつもVue.jsでコンポーネントを作っている時にどこでデバッグしようかと悩んでいたのでvue-playのようなツールが出て来てくれて嬉しいです。
またどんなコンポーネントなのかを触りながら確かめられるのはすごくいいですね。
vue-styleguide-generatorというコンポーネントのドキュメントを自動生成してくれるツールを使ってREADME欄を自動で作れないかな〜とか思っています。

最後まで読んでいただき、ありがとうございました。

試して見たソースコードはこちらにあげています。