Jhtrans 実装所感

Template を用意し、それを参照する構造を表すデータ trMap を処理すると HTML を吐き出すようなものを試しに実装している。

所感

• "0x0-" は捨てた方がよい
• trMap の要素に、trMap を指定し、そこから新しく Translate をはじめられるようにしたい。 PH-Key がすぐ長くなるので、新しく Translate を開始して、Depth を浅くし、PH-Key が短くなるようにすることを目論む。
• 特定のPL-Keyを表す別名を用意したい。例 "0x1" --> ":root-first-child" など。
• PL-Key は深さと並び位置の組み合わせ。フルに PL-Key を並べなくても、1つ上の PL-Key とその下のPL-Key だけでユニークになる気がする。誰か証明して。

Template

    jht.putTemplateAll({

    //
    // row
    //
    "div": ["div", null, "@"],

    //
    // row
    //
    "row": ["div", {
      "class": "row"
    }, "@"],

    //
    // c-1 to c-12
    //
    "c-1": ["div", {
      "class": "c-1"
    }, "@"],
    "c-2": ["div", {
      "class": "c-2"
    }, "@"],
    "c-3": ["div", {
      "class": "c-3"
    }, "@"],
    "c-4": ["div", {
      "class": "c-4"
    }, "@"],
    "c-5": ["div", {
      "class": "c-5"
    }, "@"],
    "c-6": ["div", {
      "class": "c-6"
    }, "@"],
    "c-7": ["div", {
      "class": "c-7"
    }, "@"],
    "c-8": ["div", {
      "class": "c-8"
    }, "@"],
    "c-9": ["div", {
      "class": "c-9"
    }, "@"],
    "c-10": ["div", {
      "class": "c-10"
    }, "@"],
    "c-11": ["div", {
      "class": "c-11"
    }, "@"],
    "c-12": ["div", {
      "class": "c-12"
    }, "@"],

    "row--c-12--pad6": ["div", {
      "class": "row"
    }, [
        ["div", {
          "class": "c-12"
        }, [
            ["div", {
              "class": "pad6"
            }, "@"]
          ]]
      ]
    ],

    //
    // lablel
    //
    "label": ["label", null, "@"],

    //
    // inputs
    //
    "i-text": ["input", {
      "type": "text"
    }, ""],
    "i-password": ["input", {
      "type": "password"
    }, ""],

    //
    // buttons
    //
    "b-button": ["button", {
      "type": "button"
    }, "@"],
  });

trMap

  const trMap = {
    "0x0-1x0": [
      "#row",
      "#row",
      "#row--c-12",
    ],
    "0x0-1x0-2x0": [
      "#c-3",
      "#c-6",
      "#c-3",
    ],
    "0x0-1x0-2x1-3x0": [
      "#row--c-12--pad6",
      "#row--c-12--pad6",
      "#row--c-12--pad6",
    ],
    "0x0-1x0-2x1-3x0-4x0-5x0-6x0": [
      "#label",
      "#i-text",
    ],
    "0x0-1x0-2x1-3x0-4x0-5x0-6x0-7x0": "Username",
    "0x0-1x0-2x1-3x1-4x0-5x0-6x0": [
      "#label",
      "#i-password",
    ],
    "0x0-1x0-2x1-3x1-4x0-5x0-6x0-7x0": "Password",
    "0x0-1x0-2x1-3x2-4x0-5x0-6x0": [
      "#c-6",
      "#c-6",
    ],
    "0x0-1x0-2x1-3x2-4x0-5x0-6x0-7x0": "#b-button",
    "0x0-1x0-2x1-3x2-4x0-5x0-6x0-7x0-8x0": "Login",
    "0x0-1x0-2x1-3x2-4x0-5x0-6x1-7x0": "#b-button",
    "0x0-1x0-2x1-3x2-4x0-5x0-6x1-7x0-8x0": "Cancel",

  };

HTML

<div class="jh-0x0">
    <div class="row jh-0x0-1x0">
        <div class="c-3 jh-0x0-1x0-2x0">0x0-1x0-2x0-3x0</div>
        <div class="c-6 jh-0x0-1x0-2x1">
            <div class="row jh-0x0-1x0-2x1-3x0">
                <div class="c-12 jh-0x0-1x0-2x1-3x0-4x0">
                    <div class="pad6 jh-0x0-1x0-2x1-3x0-4x0-5x0"><label
                            class="jh-0x0-1x0-2x1-3x0-4x0-5x0-6x0">Username</label><input type="text"
                            class="jh-0x0-1x0-2x1-3x0-4x0-5x0-6x1"></div>
                </div>
            </div>
            <div class="row jh-0x0-1x0-2x1-3x1">
                <div class="c-12 jh-0x0-1x0-2x1-3x1-4x0">
                    <div class="pad6 jh-0x0-1x0-2x1-3x1-4x0-5x0"><label
                            class="jh-0x0-1x0-2x1-3x1-4x0-5x0-6x0">Password</label><input type="password"
                            class="jh-0x0-1x0-2x1-3x1-4x0-5x0-6x1"></div>
                </div>
            </div>
            <div class="row jh-0x0-1x0-2x1-3x2">
                <div class="c-12 jh-0x0-1x0-2x1-3x2-4x0">
                    <div class="pad6 jh-0x0-1x0-2x1-3x2-4x0-5x0">
                        <div class="c-6 jh-0x0-1x0-2x1-3x2-4x0-5x0-6x0"><button type="button"
                                class="jh-0x0-1x0-2x1-3x2-4x0-5x0-6x0-7x0">Login</button></div>
                        <div class="c-6 jh-0x0-1x0-2x1-3x2-4x0-5x0-6x1"><button type="button"
                                class="jh-0x0-1x0-2x1-3x2-4x0-5x0-6x1-7x0">Cancel</button></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-3 jh-0x0-1x0-2x2">0x0-1x0-2x2-3x0</div>
    </div>
    <div class="row jh-0x0-1x1">0x0-1x1-2x0</div>#row--c-12
</div>