jqpug v0.0.3

JQpug

これは何？

pug形式でstringを渡すと、その通りにjQueryオブジェクトにして返します。

※完全サポートじゃないです！

使うための準備

HTMLに普通に読み込む場合。 当然ですが、jQueryが必要です。

<script src="./jquery.min.js"></script>
<script src="../dist/jqpug.min.js"></script>

npmでもはいります。

npm install --save-dev jquery @type/jquery jqpug

簡単なサンプル

一行のpugにだけ対応しています。

// jQueryのみで書いた場合
jQuery("#target").append(
    jQuery("<span>").addClass("some_class").attr("title", "サンプル").text("こんいちわ")
);

// pugっぽいので書いたとき
jQuery("#target").append(
    jqpug("span.some_class(title=サンプル) こんにちわ")
);

短く書けますね！

他のサンプル

連続で作成する例

jqpug("section", [
    jqpug("h4 Hello World!", jqpug("span.badge 4")),
    jqpug("p 吾輩はねこである"),
]);

上記のように書くと下記のようなものができます。

<section>
    <h4>Hello World!
        <span class="badge">4</span>
    </h4>
    <p>吾輩はねこである</p>
</section>

イベントなどをつける例

jqpug("section", [
    jqpug("h4 Click Smple"),
    jqpug("a", {
        attr: {
            href: "http://google.co.jqpug",
            target: "_blank",
        },
        text: "jump to google site!",
    }),
    jqpug("button", {
        attr: {
            type: "button",
        },
        text: "click then console.log('hoge')",
        click: () => {
            console.log("hoge");
        },
    }),
]);

上記のように書くと下記のようなものができます。 button要素にはイベントがつきます。

<section>
    <h4>Click Smple</h4>
    <a href="http://google.co.jqpug" target="_blank">jump to google site!</a>
    <button type="button">click then console.log('hoge')</button>
</section>

仕様

const $obj = jqpug(pugString: string, options: string | number | JQuery | Array<JQuery> | JQpugOptions);

pugString: string

現在のバージョンではワンライナーのPugの書き方のみに対応しています。 （いつかはヒアドキュメントに対応するかもしれません）

options: string | number | JQuery | Array\<JQuery> | JQpugOptions

string | number

第二要素にstring、もしくはnumberを設定した場合は生成したjQuery要素に対してテキストとして設定されます。pugのストリングに含めることでも同じことができます。

var hoge1 = jqpug("p", "こんにちは"); // <p>こんにちは</p>
var hoge2 = jqpug("p こんにちは"); // <p>こんにちは</p>

var moge1 = jqpug("p", 100); // <p>100</p>
var moge2 = jqpug("p 100"); // <p>100</p>

JQuery | Array\<JQuery>

第二要素にjQueryオブジェクト、もしくはjQueryオブジェクト配列を設定した場合は生成したjQuery要素に対して小要素として追加します。

JQpugOptions（オブジェクト型）

作成したjQueryオブジェクトに対して色々設定します。

sample

var $obj = jqpug("div", {
    class: "panel panel-default",
    attr: {
        title: "panelです",
    },
    css: {
        border: "1px",
    },
    text: "こんにちわ",
    content: [
        jqpug("div.panel-title パネルのタイトルです"),
        jqpug("div.panel-body パネルのボディです"),
    ],
    click: ($self) => {
        console.log($self);
    },
});

説明

以上です 🍺