Convert branches.ts to a mithril template

d64ea681085176bef0ee3e9eb52e29cf2dcc7f9b

Tucker McKnight | Sun Jan 25 2026

Convert branches.ts to a mithril template
js_templates/branches.ts:1
Before 
1
After 
1
import m from 'mithril'
import render from 'mithril-node-render'
js_templates/branches.ts:7
Before 
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  return `
    <div class="d-flex flex-wrap">
      ${data.branches.map((branch) => {
        return `
          ${branch.repoName === data.branchInfo.repoName
            ? `
              <div class="card bezel-gray m-2 flex-grow-1" style="flex-basis: 20rem; max-width: 20rem;">
                <div class="card-header">
                  &lt;a class="card-title" href="${data.reposPath}/${slugify(branch.repoName)}/branches/${slugify(branch.branchName)}/branches">${branch.branchName}</a>
                  ${branch.branchName === data.branchInfo.branchName ? '&lt;div class="badge rounded-pill bg-secondary mx-1"&gt;current&lt;/div>&#39; : ''}
                  ${branch.branchName === data.reposConfig.repos[branch.repoName].defaultBranch ? '&lt;div class="badge rounded-pill bg-info text-dark mx-1"&gt;default&lt;/div>&#39; : ''}
                </div>
                <div class="card-body">
                  &lt;p&gt;${branch.description || ''}</p>
                  &lt;p&gt;${branch.ahead} commits ahead, ${branch.behind} commits behind &lt;span class="font-monospace">${branch.compareTo}</span></p>
                &lt;/div&gt;
                <div class="card-footer">
                  &lt;a class="m-1 btn btn-outline-primary shadow-none" href="${data.reposPath}/${slugify(branch.repoName)}/branches/${slugify(branch.branchName)}/branches&quot;>Switch to branch&lt;/a>
                </div>
              </div>
            `
            : &#39;'
          }
        `
      }).join('')}
    </div>
  `
After 
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  return render(
    m(&#39;div', {class: "d-flex flex-wrap"}, data.branches.map((branch) => {
      return branch.repoName === data.branchInfo.repoName
        ? m(&#39;div', {class: "card bezel-gray m-2 flex-grow-1", style: "flex-basis: 20rem; max-width: 20rem;"}, [
            m(&#39;div', {class: "card-header"}, [
              m(&#39;a', {
                class: "card-title",
                href: `${data.reposPath}/${slugify(branch.repoName)}/branches/${slugify(branch.branchName)}/branches`
              }, branch.branchName),
              branch.branchName === data.branchInfo.branchName
                ? m('div&#39;, {class: "badge rounded-pill bg-secondary mx-1"}, &#39;current') : null,
              branch.branchName === data.reposConfig.repos[branch.repoName].defaultBranch
                ? m('div&#39;, {class: "badge rounded-pill bg-info text-dark mx-1"}, &#39;default') : null,
            ]),
            m('div', {class: "card-body"}, [
              m(&#39;p&#39;, branch.description || ''),
              m(&#39;p&#39;, [
                `${branch.ahead} commits ahead, ${branch.behind} commits behind `,
                m(&#39;span', {class: "font-monospace"}, branch.compareTo)
              ])
            ]),
            m(&#39;div&#39;, {class: "card-footer"},
              m(&#39;a', {
                class: "m-1 btn btn-outline-primary shadow-none",
                href: `${data.reposPath}/${slugify(branch.repoName)}/branches/${slugify(branch.branchName)}/branches`
              }, &#39;Switch to branch')
            )
          ])
        : null
      })
    )
  )