Mithril.js完全ガイド(2.0.4時点)

const App = () => {
  const [count, setCount] = useState(0)
  return <button onClick={() => {setCount(count + 1)}}>{count}</button>
}

let count = 0;
const UselessApp:React.FC<{}> = () => {
  return (<button onClick={() => {count++}}>{count}</button>);
};

let count = 0;
const countApp = {
  view: () => {
    return m("button", { onclick: () => {count++}}, count);
  },
};

m("div"); // <div></div>
m("div.className#id");  // <div class="className" id="id"></div>
m(".className#id");  // <div class="className" id="id"></div>
m("div","divタグの中身"); // <div>divタグの中身</div>

m("div",{
  // イベントはon＋イベント名
  onclick: (e) =>{..},
  ondblclick: (e) =>{..},
  onmouseenter: (e) => {..},
},"txt");

// プロパティで設定できる値
m("input",{
  readOnly:true
}); // <input readonly>
m("button",{
  autofocus:true
}); // <button autofocus>
m("div",{
  className: "wonder"
}); // <div class="wonder">

// setAttributeで設定できる値
m("div",{
  id:"divman",
  class: "wonder",
  mithrilis: "ultimate"
}); // <div id="divman" class="wonder" mithrilis="ultimate">

m("div",{
  oninit: (vnode) => {console.log("init")},
  oncreate: (vnode) => {console.log("create")},
  onupdate: (vnode) => {console.log("update")},
  onremove: (vnode) => {console.log("remove")},
});

m("div",{
  onbeforeupdate: (newVnode, oldVnode) => { return newVnode.state.update ? true:false }, // 新旧のvnodeを引数にとることができる
  onbeforeremove: (vnode) => {new Promise((resolve) => {setTimeout(resolve, 1000)})
});

m("ul",[
  m("li", "ワニ"),
  m("li", "クジラ"),
  m("li", "サンショウウオ")
]);

const component = {
  view: (vnode) => {
    return m(
      "button",
      {style: {color: "#f00"}},
      "Submit"
    );
  },
};

m(component);

// attributeを利用時に注入するコンポーネント
// attribute名は既存のプロパティと被らないようにする
const attrComponent = {
  view: (vnode) => {
    return m(
      "button",
      {
        style: {color: vnode.attrs.color},
        onclick: vnode.attrs.handleClick,
      },
      "Submit"
    );
  },
};

// attributeを指定してコンポーネントを使う
m(attrComponent, {color: "#f00",handleClick: () => {console.log("click")}});

// 子ノードを持つコンポーネント
const modal = {
  view: (vnode: any) => {
    return m("div.modal", vnode.children);
  },
};

// 子ノードの指定　
m(modal, [m("div", "Hello"), m("div", "everyone")]);

const component: m.Component = {
  view: () => {
    return m("div");
  },
  oninit: (vnode) => {...},
  oncreate: (vnode) => {...},
  onupdate: (vnode) => {...},
  onremove: (vnode) => {...},
  onbeforeupdate: (newVnode, oldVnode) => {...},
  onbeforeremove: (vnode) => {...},
};

const countAppState = {
  // oninitでstateを定義
  oninit: (vnode) => {vnode.state.count = 0;},
  view: (vnode) => {
    return m(
      "button",
      {
        onclick: () => {
          vnode.state.count += 1;
        },
      },
      vnode.state.count
    );
  },
};

const component = {
  view: () => {
    return m("button", "submit");
  }
}

m.mount(document.body, component);

const list = {
  view: () => {
    return m("ul", [m("li", "a"), m("li", "b"), m("li", "c")]);
  },
};

const home = {
  view: () => {
    return m("span", "home");
  },
};

// /listが初期状態となる
m.route(root, "/list", { "/": home, "/list": list });

m.route.prefix = '#!' // デフォルト
m.route.prefix = ''   // 何もつかない https://domain/page
m.route.prefix = '?'  // https://domain/?/page のようになる

const home = {
  view: () => {
    return m(m.route.Link, { href: "/list" }, "home");
  },
};

const gohome = {
  view: () => {
    return m("button",
      {onclick: () => {m.route.set("/")}},
      "go home")
  },
};

const numberPage = {
  view: (vnode: any) => {
    const number = vnode.attrs.num;
    return m("span", `great number ${number}`);
  },
};

m.route(root, "/number/10", {
  "/number/:num": numberPage,
});

const queryPage = {
  view:(vnode) => {
    const random = vnode.attrs.random;
    return m("span", `random = ${random}`);
  }
};
const goToRandomQuery = {
  view:() => {
    return m(m.route.Link, {href:`/query?random=${Math.random()}`},"go to adventure");
  }
};

m.route(root, "/gotoquery", {
  "/query": queryPage,
  "/gotoquery": goToRandomQuery
});

const queryPage = {
  view:(vnode) => {
    const random = m.route.param("random"); // vnode.attrs.randomと同じ。
    console.log(m.route.param());           // {random:0.992121} 全てのパラメータが入ったオブジェクト 
    return m("span", `random = ${random}`);
  }
};

const A = {
  view: (vnode) => {
    const attachment =  m.route.param("attachment");
    return m("button",{onclick: () => {
      m.route.set("/");
    }},`A ${attachment}`);
  }
}

const B = {
  view: (vnode) => {
    const attachment =  m.route.param("attachment");
    return m("button",{onclick: () => {
      m.route.set("/");
    }},`B ${attachment}`)
  }
}

const routeResolver = {
  onmatch: () => {
    return Math.random() < 0.5 ? A:B;
  },
  render: (vnode) => {
    vnode.attrs.attachment = "attached by resolver";
    return vnode;
  }
}

const routeResolver = {
  onmatch: () => {
    return Math.random() < 0.5 ? A: m.route.SKIP;
  }
}

m.request({
    url: "https://sample.com",  // URL 必須はこれだけ
    method: "PUT",             // リクエストメソッド名。デフォルトはGET
    params: {id: 1},           // URLの:{変数名}となっているパラメータの実値
    body: {name: "user"}       // リクエストボディ
})
.then((result) =>  {
    console.log(result);
})

let random = Math.random();

setInterval(() => {
  random = Math.random();
  m.redraw();
},200);

const dispRandom = {
  view: () => {
    return m("div", random);
  }
}

m.mount(root, dispRandom);

const fragmentComponent = {
  view:() => {
    return m.fragment({oninit: () => {
      console.log("init fragment");
    }}, [
      m("div","A"),
      m("div","B")
    ])
  }
}

m.mount(root, fragmentComponent);

const querystring = m.buildQueryString({a: 1, b: 2}); // a=1&b=2
const parse = m.parseQueryString(querystring); // {a:"1",b:"2"}

const path = m.buildPathname("/page/:pageNumber",{pageNumber:2,order:"asc"}); // /page/2?order=asc
const pathObject = m.parsePathname(path); // {path:"/page/2",params:{order: "asc"}}

m.trust("<button>Button</button>");

const functionalComponent: m.Component<{ label: string }, {}> = {
  view: (vnode) => {
    return m("h3", vnode.attrs.label);
  },
};

export default functionalComponent;

import mq from "mithril-query";
import fc from "../component";

describe("sample", () => {
  it("component test", () => {
    const result = mq(fc, { label: "test" });
  });
});

it("component test", () => {
  const result = mq(component, { label: "test", title: "test title" });
  result.should.have(1, "h2"); // コンポーネントはh2要素を1つ持つ
  result.should.contain("test title"); // コンポーネントは"test title"文字列を含んだエレメントを持つ
  result.should.not.have("h1"); // コンポーネントはh1要素を含まない

  result.should.have(1, "h3");
  result.should.contain("test");
});

const switchComponent: m.Component<
  {
    onMessage: string;
    offMessage: string;
  },
  {
    on: boolean;
  }
> = {
  oninit: (vnode) => {vnode.state.on = false;},
  view: (vnode) => {
    return m(
      "button",
      {onclick: () => {vnode.state.on = !vnode.state.on;}},
      vnode.state.on ? vnode.attrs.onMessage : vnode.attrs.offMessage
    );
  },
};

export default switchComponent;

it("switch test", () => {
    const result = mq(switchComponent, {
      onMessage: "Switch ON",
      offMessage: "Switch OFF",
    });

    result.should.contain("Switch OFF"); // 最初はオフ
    result.should.not.contain("Switch ON");

    result.click("button"); // セレクタで指定された箇所をクリックする

    result.should.contain("Switch ON"); // オンになっている
  });

result.trigger("button", "onclick", new Event("onclick"));

import stream from "mithril/stream";

const value = stream(1);
console.log(value()); // 1
value(7);
console.log(value()); // 7

// かけられる数
const multiplicand = stream(3);

// かける数
const multiplier = stream(2);

// 積
const product = stream.lift((a, b => {return a * b;},multiplicand,multiplier);

console.log(product()); // 6 (3*2 = 6)
multiplicand(4);
console.log(product()); // 8 (4*2 = 8)
multiplier(5);
console.log(product()); // 20 (4*5 = 20)

const formula = stream
  .merge([multiplicand, multiplier, product])
  .map((values) => {
    // 配列のmapとは感覚が違い、任意個のstreamから一つの値を生成
    return values[0] + "*" + values[1] + "=" + values[2];
  });

npm install -D @types/mithril

const switchComponent: m.Component<
  {
    onMessage: string;
    offMessage: string;
  },
  {
    on: boolean;
  }
> = {
  oninit: (vnode) => {vnode.state.on = false;},
  view: (vnode) => {
    return m(
      "button",
      {onclick: () => {vnode.state.on = !vnode.state.on;}},
      vnode.state.on ? vnode.attrs.onMessage : vnode.attrs.offMessage
    );
  },
};

class ClassComponent implements m.Component<{}, {}> {
  private count;
  constructor() {
    this.count = 1;
  }

  public view() {
    return m(
      "div",
      {
        onclick: () => {
          console.log("click class", this.count);
          this.count += 1;
        },
      },
      this.count
    );
  }
}

m(ClassComponent); // OK

const componentFromClass = new ClassComponent();
m(componentFromClass) // OK

m(new ClassComponent()) // NG 描画のたびに毎回新しいコンポーネントが作成されてしまう

const multiplier: stream<number> = stream(2);