JSX ve Şablonlar

  override view() {
    return (
      <div class="placeholder">
        <p>{() => (this.notes.count(this.folder) ? "Bir not seçin ya da yenisini yazın." : FOLDERS[this.folder].empty)}</p>
        <button type="button" class="accent" onclick={() => this.create()}>
          Yeni not
        </button>
      </div>
    );
  }

  view() {
    return (
      <div class="placeholder">
        <p>{() => (this.notes.count(this.folder) ? "Bir not seçin ya da yenisini yazın." : FOLDERS[this.folder].empty)}</p>
        <button type="button" class="accent" onclick={() => this.create()}>
          Yeni not
        </button>
      </div>
    );
  }

return (
  <div class="placeholder">
    <p>{() => (notes.count(folder()) ? "Bir not seçin ya da yenisini yazın." : FOLDERS[folder()].empty)}</p>
    <button type="button" class="accent" onclick={() => create()}>
      Yeni not
    </button>
  </div>
);

  override view() {
    return motifComponent("div", (box: ComponentBase) => {
      box.class.add("placeholder");
      const message = motifComponent("p", (p: ComponentBase) => {
        p.bindings.ternary(
          () => this.notes.count(this.folder),
          (frame) => frame.navigate(motifComponent("text", (node: ComponentBase) => node.setText("Bir not seçin ya da yenisini yazın."))),
          (frame) => frame.navigate(motifComponent("text", (node: ComponentBase) => node.bindings.add("textContent", FOLDERS[this.folder], "empty"))),
        );
      });
      const create = motifComponent("button", (button: ComponentBase) => {
        button.attr.add({ type: "button" });
        button.class.add("accent");
        button.motif.on("click", () => this.create());
        button.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Yeni not")));
      });
      box.controls.add(message, create);
    });
  }

  view() {
    return motifComponent("div", (box: ComponentBase) => {
      box.class.add("placeholder");
      const message = motifComponent("p", (p: ComponentBase) => {
        p.bindings.ternary(
          () => this.notes.count(this.folder),
          (frame) => frame.navigate(motifComponent("text", (node: ComponentBase) => node.setText("Bir not seçin ya da yenisini yazın."))),
          (frame) => frame.navigate(motifComponent("text", (node: ComponentBase) => node.bindings.add("textContent", FOLDERS[this.folder], "empty"))),
        );
      });
      const create = motifComponent("button", (button: ComponentBase) => {
        button.attr.add({ type: "button" });
        button.class.add("accent");
        button.motif.on("click", () => this.create());
        button.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Yeni not")));
      });
      box.controls.add(message, create);
    });
  }

return motifComponent("div", (box: ComponentBase) => {
  box.class.add("placeholder");
  const message = motifComponent("p", (p: ComponentBase) => {
    p.bindings.ternary(
      () => notes.count(folder()),
      (frame) => frame.navigate(motifComponent("text", (node: ComponentBase) => node.setText("Bir not seçin ya da yenisini yazın."))),
      (frame) => frame.navigate(motifComponent("text", (node: ComponentBase) => node.bindings.add("textContent", FOLDERS[folder()], "empty"))),
    );
  });
  const createButton = motifComponent("button", (button: ComponentBase) => {
    button.attr.add({ type: "button" });
    button.class.add("accent");
    button.motif.on("click", () => create());
    button.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Yeni not")));
  });
  box.controls.add(message, createButton);
});

  view() {
    return (
      <div class="placeholder">
        <p>{() => (this.notes.count(this.folder) ? "Bir not seçin ya da yenisini yazın." : FOLDERS[this.folder].empty)}</p>
        <button type="button" class="accent" onclick={() => this.create()}>
          Yeni not
        </button>
      </div>
    );
  }

return (
  <div class="placeholder">
    <p>{() => (notes.count(folder()) ? "Bir not seçin ya da yenisini yazın." : FOLDERS[folder()].empty)}</p>
    <button type="button" class="accent" onclick={() => create()}>
      Yeni not
    </button>
  </div>
);

  view() {
    return motifComponent("div", (box) => {
      box.class.add("placeholder");
      const message = motifComponent("p", (p) => {
        p.bindings.ternary(
          () => this.notes.count(this.folder),
          (frame) => frame.navigate(motifComponent("text", (node) => node.setText("Bir not seçin ya da yenisini yazın."))),
          (frame) => frame.navigate(motifComponent("text", (node) => node.bindings.add("textContent", FOLDERS[this.folder], "empty"))),
        );
      });
      const create = motifComponent("button", (button) => {
        button.attr.add({ type: "button" });
        button.class.add("accent");
        button.motif.on("click", () => this.create());
        button.controls.add(motifComponent("text", (node) => node.setText("Yeni not")));
      });
      box.controls.add(message, create);
    });
  }

return motifComponent("div", (box) => {
  box.class.add("placeholder");
  const message = motifComponent("p", (p) => {
    p.bindings.ternary(
      () => notes.count(folder()),
      (frame) => frame.navigate(motifComponent("text", (node) => node.setText("Bir not seçin ya da yenisini yazın."))),
      (frame) => frame.navigate(motifComponent("text", (node) => node.bindings.add("textContent", FOLDERS[folder()], "empty"))),
    );
  });
  const createButton = motifComponent("button", (button) => {
    button.attr.add({ type: "button" });
    button.class.add("accent");
    button.motif.on("click", () => create());
    button.controls.add(motifComponent("text", (node) => node.setText("Yeni not")));
  });
  box.controls.add(message, createButton);
});

view() {
  return _mc("div", {
    initializeComponent: sender => {
      sender.class.add("placeholder");
      const _comp2 = _mc("p", {
        initializeComponent: sender => {
          sender.bindings.ternary(() => this.notes.count(this.folder), frame => {
            frame.navigate(_mc("text", {
              initializeComponent: sender => {
                sender.setText("Bir not seçin ya da yenisini yazın.");
              }
            }, 1));
          }, frame => {
            frame.navigate(_mc("text", {
              initializeComponent: sender => {
                sender.bindings.add("textContent", FOLDERS[this.folder], "empty");
              },
              __childExpr: () => FOLDERS[this.folder].empty
            }));
          });
        }
      }, 1);
      sender.controls.add(_comp2);
      const _comp3 = _mc("button", {
        initializeComponent: sender => {
          sender.attr.add({
            "type": "button"
          });
          sender.class.add("accent");
          sender.motif.on("click", () => this.create());
          const _comp = _mc("text", {
            initializeComponent: sender => {
              sender.setText("Yeni not");
            }
          }, 1);
          sender.controls.add(_comp);
        }
      }, 1);
      sender.controls.add(_comp3);
    }
  }, 1);
}

return _mc("div", {
  initializeComponent: sender => {
    sender.class.add("placeholder");
    const _comp2 = _mc("p", {
      initializeComponent: sender => {
        sender.bindings.ternary(() => notes.count(folder()), frame => {
          frame.navigate(_mc("text", {
            initializeComponent: sender => {
              sender.setText("Bir not seçin ya da yenisini yazın.");
            }
          }, 1));
        }, frame => {
          frame.navigate(_mc("text", {
            initializeComponent: sender => {
              sender.bindings.add("textContent", FOLDERS[folder()], "empty");
            },
            __childExpr: () => FOLDERS[folder()].empty
          }));
        });
      }
    }, 1);
    sender.controls.add(_comp2);
    const _comp3 = _mc("button", {
      initializeComponent: sender => {
        sender.attr.add({
          "type": "button"
        });
        sender.class.add("accent");
        sender.motif.on("click", () => create());
        const _comp = _mc("text", {
          initializeComponent: sender => {
            sender.setText("Yeni not");
          }
        }, 1);
        sender.controls.add(_comp);
      }
    }, 1);
    sender.controls.add(_comp3);
  }
}, 1);

<div class="side__group">
  <h2 class="side__label">Klasörler</h2>
  <nav class="nav" aria-label="Klasörler">
    <RouterLink to="/notes" activeClass="active">Tüm notlar</RouterLink>
    <RouterLink to="/archive" activeClass="active">Arşiv</RouterLink>
  </nav>
</div>

motifComponent("div", (group: ComponentBase) => {
  group.class.add("side__group");
  const heading = motifComponent("h2", (h2: ComponentBase) => {
    h2.class.add("side__label");
    h2.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Klasörler")));
  });
  const nav = motifComponent("nav", (nav: ComponentBase) => {
    nav.class.add("nav");
    nav.attr.add({ "aria-label": "Klasörler" });
    nav.controls.add(
      motifComponent(RouterLink, { to: "/notes", activeClass: "active", childs: [motifComponent("text", (node: ComponentBase) => node.setText("Tüm notlar"))] }),
      motifComponent(RouterLink, { to: "/archive", activeClass: "active", childs: [motifComponent("text", (node: ComponentBase) => node.setText("Arşiv"))] }),
    );
  });
  group.controls.add(heading, nav);
});

<div class="side__group">
  <h2 class="side__label">Klasörler</h2>
  <nav class="nav" aria-label="Klasörler">
    <RouterLink to="/notes" activeClass="active">Tüm notlar</RouterLink>
    <RouterLink to="/archive" activeClass="active">Arşiv</RouterLink>
  </nav>
</div>

motifComponent("div", (group) => {
  group.class.add("side__group");
  const heading = motifComponent("h2", (h2) => {
    h2.class.add("side__label");
    h2.controls.add(motifComponent("text", (node) => node.setText("Klasörler")));
  });
  const nav = motifComponent("nav", (nav) => {
    nav.class.add("nav");
    nav.attr.add({ "aria-label": "Klasörler" });
    nav.controls.add(
      motifComponent(RouterLink, { to: "/notes", activeClass: "active", childs: [motifComponent("text", (node) => node.setText("Tüm notlar"))] }),
      motifComponent(RouterLink, { to: "/archive", activeClass: "active", childs: [motifComponent("text", (node) => node.setText("Arşiv"))] }),
    );
  });
  group.controls.add(heading, nav);
});

  private actions(note: Note) {
    return (
      <>
        <button type="button" class="button--sm ghost" aria-pressed={() => note.pinned} onclick={() => this.notes.togglePin(note)}>
          {() => (note.pinned ? "Sabitlendi" : "Sabitle")}
        </button>
        <button type="button" class="button--sm ghost" onclick={() => this.archive(note)}>
          {() => (note.archived ? "Geri al" : "Arşivle")}
        </button>
        <button type="button" class="button--sm danger" onclick={() => (this.state.confirming = true)}>
          Sil
        </button>
      </>
    );
  }

  private actions(note: Note) {
    return (
      <>
        <button type="button" class="button--sm ghost" aria-pressed={() => note.pinned} onclick={() => notes.togglePin(note)}>
          {() => (note.pinned ? "Sabitlendi" : "Sabitle")}
        </button>
        <button type="button" class="button--sm ghost" onclick={() => archive(note)}>
          {() => (note.archived ? "Geri al" : "Arşivle")}
        </button>
        <button type="button" class="button--sm danger" onclick={() => (state.confirming = true)}>
          Sil
        </button>
      </>
    );
  }

  private actions(note: Note) {
    const pin = motifComponent("button", (button: ComponentBase) => {
      button.attr.add({ type: "button", "aria-pressed": () => note.pinned });
      button.class.add("button--sm ghost");
      button.motif.on("click", () => this.notes.togglePin(note));
      button.bindings.text(() => (note.pinned ? "Sabitlendi" : "Sabitle"));
    });
    const archive = motifComponent("button", (button: ComponentBase) => {
      button.attr.add({ type: "button" });
      button.class.add("button--sm ghost");
      button.motif.on("click", () => this.archive(note));
      button.bindings.text(() => (note.archived ? "Geri al" : "Arşivle"));
    });
    const remove = motifComponent("button", (button: ComponentBase) => {
      button.attr.add({ type: "button" });
      button.class.add("button--sm danger");
      button.motif.on("click", () => (this.state.confirming = true));
      button.setText("Sil");
    });
    return motifFragment({ childs: [pin, archive, remove] });
  }

  private actions(note: Note) {
    const pin = motifComponent("button", (button: ComponentBase) => {
      button.attr.add({ type: "button", "aria-pressed": () => note.pinned });
      button.class.add("button--sm ghost");
      button.motif.on("click", () => notes.togglePin(note));
      button.bindings.text(() => (note.pinned ? "Sabitlendi" : "Sabitle"));
    });
    const archiveButton = motifComponent("button", (button: ComponentBase) => {
      button.attr.add({ type: "button" });
      button.class.add("button--sm ghost");
      button.motif.on("click", () => archive(note));
      button.bindings.text(() => (note.archived ? "Geri al" : "Arşivle"));
    });
    const remove = motifComponent("button", (button: ComponentBase) => {
      button.attr.add({ type: "button" });
      button.class.add("button--sm danger");
      button.motif.on("click", () => (state.confirming = true));
      button.setText("Sil");
    });
    return motifFragment({ childs: [pin, archiveButton, remove] });
  }

  actions(note) {
    return (
      <>
        <button type="button" class="button--sm ghost" aria-pressed={() => note.pinned} onclick={() => this.notes.togglePin(note)}>
          {() => (note.pinned ? "Sabitlendi" : "Sabitle")}
        </button>
        <button type="button" class="button--sm ghost" onclick={() => this.archive(note)}>
          {() => (note.archived ? "Geri al" : "Arşivle")}
        </button>
        <button type="button" class="button--sm danger" onclick={() => (this.state.confirming = true)}>
          Sil
        </button>
      </>
    );
  }

  actions(note) {
    return (
      <>
        <button type="button" class="button--sm ghost" aria-pressed={() => note.pinned} onclick={() => notes.togglePin(note)}>
          {() => (note.pinned ? "Sabitlendi" : "Sabitle")}
        </button>
        <button type="button" class="button--sm ghost" onclick={() => archive(note)}>
          {() => (note.archived ? "Geri al" : "Arşivle")}
        </button>
        <button type="button" class="button--sm danger" onclick={() => (state.confirming = true)}>
          Sil
        </button>
      </>
    );
  }

  actions(note) {
    const pin = motifComponent("button", (button) => {
      button.attr.add({ type: "button", "aria-pressed": () => note.pinned });
      button.class.add("button--sm ghost");
      button.motif.on("click", () => this.notes.togglePin(note));
      button.bindings.text(() => (note.pinned ? "Sabitlendi" : "Sabitle"));
    });
    const archive = motifComponent("button", (button) => {
      button.attr.add({ type: "button" });
      button.class.add("button--sm ghost");
      button.motif.on("click", () => this.archive(note));
      button.bindings.text(() => (note.archived ? "Geri al" : "Arşivle"));
    });
    const remove = motifComponent("button", (button) => {
      button.attr.add({ type: "button" });
      button.class.add("button--sm danger");
      button.motif.on("click", () => (this.state.confirming = true));
      button.setText("Sil");
    });
    return motifFragment({ childs: [pin, archive, remove] });
  }

  actions(note) {
    const pin = motifComponent("button", (button) => {
      button.attr.add({ type: "button", "aria-pressed": () => note.pinned });
      button.class.add("button--sm ghost");
      button.motif.on("click", () => notes.togglePin(note));
      button.bindings.text(() => (note.pinned ? "Sabitlendi" : "Sabitle"));
    });
    const archiveButton = motifComponent("button", (button) => {
      button.attr.add({ type: "button" });
      button.class.add("button--sm ghost");
      button.motif.on("click", () => archive(note));
      button.bindings.text(() => (note.archived ? "Geri al" : "Arşivle"));
    });
    const remove = motifComponent("button", (button) => {
      button.attr.add({ type: "button" });
      button.class.add("button--sm danger");
      button.motif.on("click", () => (state.confirming = true));
      button.setText("Sil");
    });
    return motifFragment({ childs: [pin, archiveButton, remove] });
  }

<h2>Notlar</h2>
<p class="list__empty">{"Henüz not yok."}</p>

const heading = motifComponent("h2", (h2: ComponentBase) => h2.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Notlar"))));
const empty = motifComponent("p", (p: ComponentBase) => {
  p.class.add("list__empty");
  p.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Henüz not yok.")));
});

<h2>Notlar</h2>
<p class="list__empty">{"Henüz not yok."}</p>

const heading = motifComponent("h2", (h2) => h2.controls.add(motifComponent("text", (node) => node.setText("Notlar"))));
const empty = motifComponent("p", (p) => {
  p.class.add("list__empty");
  p.controls.add(motifComponent("text", (node) => node.setText("Henüz not yok.")));
});

<span>{note.title}</span>

const title = motifComponent("span", (span: ComponentBase) => span.controls.add(motifComponent("text", (node: ComponentBase) => node.bindings.add("textContent", note, "title"))));

<span>{note.title}</span>

const title = motifComponent("span", (span) => span.controls.add(motifComponent("text", (node) => node.bindings.add("textContent", note, "title"))));

<span>{() => note.title.trim() || "Adsız"}</span>
<p>{() => note.body.split("\n")[0] || "Metin yok"}</p>

const title = motifComponent("span", (span: ComponentBase) => span.bindings.text(() => note.title.trim() || "Adsız"));
const preview = motifComponent("p", (p: ComponentBase) => p.bindings.text(() => note.body.split("\n")[0] || "Metin yok"));

<span>{() => note.title.trim() || "Adsız"}</span>
<p>{() => note.body.split("\n")[0] || "Metin yok"}</p>

const title = motifComponent("span", (span) => span.bindings.text(() => note.title.trim() || "Adsız"));
const preview = motifComponent("p", (p) => p.bindings.text(() => note.body.split("\n")[0] || "Metin yok"));

<input class="editor__title" placeholder="Adsız" value={() => note.title} />
<a rel="router" href={() => `/${this.folder}`}>Geri</a>
<button type="button" disabled={() => this.state.confirming}>Arşivle</button>
<span aria-pressed={note.pinned} data-id={note.id}>…</span>

<input class="editor__title" placeholder="Adsız" value={() => note.title} />
<a rel="router" href={() => `/${folder()}`}>Geri</a>
<button type="button" disabled={() => state.confirming}>Arşivle</button>
<span aria-pressed={note.pinned} data-id={note.id}>…</span>

const title = motifComponent("input", (input: ComponentBase) => {
  input.class.add("editor__title");
  input.attr.add({ placeholder: "Adsız" });
  input.bindings.add("value", () => note.title);
});
const back = motifComponent("a", (a: ComponentBase) => {
  a.attr.add({ rel: "router", href: () => `/${this.folder}` });
  a.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Geri")));
});
const archive = motifComponent("button", (button: ComponentBase) => {
  button.attr.add({ type: "button", disabled: () => this.state.confirming });
  button.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Arşivle")));
});
const flag = motifComponent("span", (span: ComponentBase) => span.attr.add({ "aria-pressed": () => note.pinned, "data-id": note.id }));

const title = motifComponent("input", (input: ComponentBase) => {
  input.class.add("editor__title");
  input.attr.add({ placeholder: "Adsız" });
  input.bindings.add("value", () => note.title);
});
const back = motifComponent("a", (a: ComponentBase) => {
  a.attr.add({ rel: "router", href: () => `/${folder()}` });
  a.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Geri")));
});
const archive = motifComponent("button", (button: ComponentBase) => {
  button.attr.add({ type: "button", disabled: () => state.confirming });
  button.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Arşivle")));
});
const flag = motifComponent("span", (span: ComponentBase) => span.attr.add({ "aria-pressed": () => note.pinned, "data-id": note.id }));

<input class="editor__title" placeholder="Adsız" value={() => note.title} />
<a rel="router" href={() => `/${this.folder}`}>Geri</a>
<button type="button" disabled={() => this.state.confirming}>Arşivle</button>
<span aria-pressed={note.pinned} data-id={note.id}>…</span>

<input class="editor__title" placeholder="Adsız" value={() => note.title} />
<a rel="router" href={() => `/${folder()}`}>Geri</a>
<button type="button" disabled={() => state.confirming}>Arşivle</button>
<span aria-pressed={note.pinned} data-id={note.id}>…</span>

const title = motifComponent("input", (input) => {
  input.class.add("editor__title");
  input.attr.add({ placeholder: "Adsız" });
  input.bindings.add("value", () => note.title);
});
const back = motifComponent("a", (a) => {
  a.attr.add({ rel: "router", href: () => `/${this.folder}` });
  a.controls.add(motifComponent("text", (node) => node.setText("Geri")));
});
const archive = motifComponent("button", (button) => {
  button.attr.add({ type: "button", disabled: () => this.state.confirming });
  button.controls.add(motifComponent("text", (node) => node.setText("Arşivle")));
});
const flag = motifComponent("span", (span) => span.attr.add({ "aria-pressed": () => note.pinned, "data-id": note.id }));

const title = motifComponent("input", (input) => {
  input.class.add("editor__title");
  input.attr.add({ placeholder: "Adsız" });
  input.bindings.add("value", () => note.title);
});
const back = motifComponent("a", (a) => {
  a.attr.add({ rel: "router", href: () => `/${folder()}` });
  a.controls.add(motifComponent("text", (node) => node.setText("Geri")));
});
const archive = motifComponent("button", (button) => {
  button.attr.add({ type: "button", disabled: () => state.confirming });
  button.controls.add(motifComponent("text", (node) => node.setText("Arşivle")));
});
const flag = motifComponent("span", (span) => span.attr.add({ "aria-pressed": () => note.pinned, "data-id": note.id }));

<dialog class="confirm" showModal={() => this.state.confirming}>
  <button type="button" class="danger" focus={() => this.state.confirming} onclick={() => this.remove(note)}>Sil</button>
</dialog>

<dialog class="confirm" showModal={() => state.confirming}>
  <button type="button" class="danger" focus={() => state.confirming} onclick={() => remove(note)}>Sil</button>
</dialog>

motifComponent("dialog", (dialog: ComponentBase) => {
  dialog.class.add("confirm");
  dialog.attr.add({ showModal: () => this.state.confirming });
  dialog.controls.add(motifComponent("button", (button: ComponentBase) => {
    button.attr.add({ type: "button", focus: () => this.state.confirming });
    button.class.add("danger");
    button.motif.on("click", () => this.remove(note));
    button.setText("Sil");
  }));
});

motifComponent("dialog", (dialog: ComponentBase) => {
  dialog.class.add("confirm");
  dialog.attr.add({ showModal: () => state.confirming });
  dialog.controls.add(motifComponent("button", (button: ComponentBase) => {
    button.attr.add({ type: "button", focus: () => state.confirming });
    button.class.add("danger");
    button.motif.on("click", () => remove(note));
    button.setText("Sil");
  }));
});

<dialog class="confirm" showModal={() => this.state.confirming}>
  <button type="button" class="danger" focus={() => this.state.confirming} onclick={() => this.remove(note)}>Sil</button>
</dialog>

<dialog class="confirm" showModal={() => state.confirming}>
  <button type="button" class="danger" focus={() => state.confirming} onclick={() => remove(note)}>Sil</button>
</dialog>

motifComponent("dialog", (dialog) => {
  dialog.class.add("confirm");
  dialog.attr.add({ showModal: () => this.state.confirming });
  dialog.controls.add(motifComponent("button", (button) => {
    button.attr.add({ type: "button", focus: () => this.state.confirming });
    button.class.add("danger");
    button.motif.on("click", () => this.remove(note));
    button.setText("Sil");
  }));
});

motifComponent("dialog", (dialog) => {
  dialog.class.add("confirm");
  dialog.attr.add({ showModal: () => state.confirming });
  dialog.controls.add(motifComponent("button", (button) => {
    button.attr.add({ type: "button", focus: () => state.confirming });
    button.class.add("danger");
    button.motif.on("click", () => remove(note));
    button.setText("Sil");
  }));
});

type TextFieldProps = JSX.IntrinsicElements["input"];

export function TextField(props: TextFieldProps) {
  return <input {...props} />;
}

import { motifComponent } from "@motifx/core";

type TextFieldProps = JSX.IntrinsicElements["input"];

export function TextField(props: TextFieldProps) {
  return motifComponent("input", { ...props });
}

export function TextField(props) {
  return <input {...props} />;
}

import { motifComponent } from "@motifx/core";

export function TextField(props) {
  return motifComponent("input", { ...props });
}

<TextField class="editor__title" aria-label="Başlık" value={() => note.title} oninput={(e) => (note.title = (e.target as HTMLInputElement).value)} />

motifComponent(TextField, { class: "editor__title", "aria-label": "Başlık", value: () => note.title, oninput: (e: Event) => (note.title = (e.target as HTMLInputElement).value) });

<TextField class="editor__title" aria-label="Başlık" value={() => note.title} oninput={(e) => (note.title = e.target.value)} />

motifComponent(TextField, { class: "editor__title", "aria-label": "Başlık", value: () => note.title, oninput: (e) => (note.title = e.target.value) });

import { Component, read, type Bind } from "@motifx/core";

export class CountBadge extends Component<HTMLSpanElement, { count: Bind<number> }> {
  override onConfigured() {
    this.class.add("badge");
  }

  override view() {
    return <>{() => String(read(this.props.count))}</>;
  }
}

import { Component, ComponentBase, motifComponent, read, type Bind } from "@motifx/core";

export class CountBadge extends Component<HTMLSpanElement, { count: Bind<number> }> {
  static override elementTag = "span";

  override onConfigured() {
    this.class.add("badge");
  }

  override view() {
    return motifComponent("text", (node: ComponentBase) => node.bindings.text(() => String(read(this.props.count))));
  }
}

import { read, type Bind } from "@motifx/core";

export function CountBadge(props: { count: Bind<number> }) {
  return <span class="badge">{() => String(read(props.count))}</span>;
}

import { ComponentBase, motifComponent, read, type Bind } from "@motifx/core";

export function CountBadge(props: { count: Bind<number> }) {
  return motifComponent("span", (span: ComponentBase) => {
    span.class.add("badge");
    span.bindings.text(() => String(read(props.count)));
  });
}

import { motifOptions, read, type Bind } from "@motifx/core";

export const CountBadge = (props: { count: Bind<number> }) => motifOptions({
  el: "span",

  onConfigured() {
    this.class.add("badge");
  },

  view() {
    return <>{() => String(read(props.count))}</>;
  },
});

import { ComponentBase, motifComponent, motifOptions, read, type Bind } from "@motifx/core";

export const CountBadge = (props: { count: Bind<number> }) => motifOptions({
  el: "span",

  onConfigured() {
    this.class.add("badge");
  },

  view() {
    return motifComponent("text", (node: ComponentBase) => node.bindings.text(() => String(read(props.count))));
  },
});

import { Component, read } from "@motifx/core";

export class CountBadge extends Component {
  static elementTag = "span";

  onConfigured() {
    this.class.add("badge");
  }

  view() {
    return <>{() => String(read(this.props.count))}</>;
  }
}

import { Component, motifComponent, read } from "@motifx/core";

export class CountBadge extends Component {
  static elementTag = "span";

  onConfigured() {
    this.class.add("badge");
  }

  view() {
    return motifComponent("text", (node) => node.bindings.text(() => String(read(this.props.count))));
  }
}

import { read } from "@motifx/core";

export function CountBadge(props) {
  return <span class="badge">{() => String(read(props.count))}</span>;
}

import { motifComponent, read } from "@motifx/core";

export function CountBadge(props) {
  return motifComponent("span", (span) => {
    span.class.add("badge");
    span.bindings.text(() => String(read(props.count)));
  });
}

import { motifOptions, read } from "@motifx/core";

export const CountBadge = (props) => motifOptions({
  el: "span",

  onConfigured() {
    this.class.add("badge");
  },

  view() {
    return <>{() => String(read(props.count))}</>;
  },
});

import { motifComponent, motifOptions, read } from "@motifx/core";

export const CountBadge = (props) => motifOptions({
  el: "span",

  onConfigured() {
    this.class.add("badge");
  },

  view() {
    return motifComponent("text", (node) => node.bindings.text(() => String(read(props.count))));
  },
});

<CountBadge class="nav__count" id="count-notes" count={() => this.notes.count("notes")} />

<CountBadge class="nav__count" id="count-notes" count={() => notes.count("notes")} />

motifComponent(CountBadge, { class: "nav__count", id: "count-notes", count: () => this.notes.count("notes") });

motifComponent(CountBadge, { class: "nav__count", id: "count-notes", count: () => notes.count("notes") });

<CountBadge class="nav__count" id="count-notes" count={() => this.notes.count("notes")} />

<CountBadge class="nav__count" id="count-notes" count={() => notes.count("notes")} />

motifComponent(CountBadge, { class: "nav__count", id: "count-notes", count: () => this.notes.count("notes") });

motifComponent(CountBadge, { class: "nav__count", id: "count-notes", count: () => notes.count("notes") });

<a class="row" />
<a class={() => `row${open() ? " active" : ""}`} />
<a class={`row ${note.title.trim() ? "" : "untitled"}`} />

const fixed = motifComponent("a", (row: ComponentBase) => row.class.add("row"));
const active = motifComponent("a", (row: ComponentBase) => row.class.add(() => `row${open() ? " active" : ""}`));
const untitled = motifComponent("a", (row: ComponentBase) => row.class.add(() => `row ${note.title.trim() ? "" : "untitled"}`));

<a class="row" />
<a class={() => `row${open() ? " active" : ""}`} />
<a class={`row ${note.title.trim() ? "" : "untitled"}`} />

const fixed = motifComponent("a", (row) => row.class.add("row"));
const active = motifComponent("a", (row) => row.class.add(() => `row${open() ? " active" : ""}`));
const untitled = motifComponent("a", (row) => row.class.add(() => `row ${note.title.trim() ? "" : "untitled"}`));

<a class={{ row: true, active: open(), untitled: !note.title.trim() }} />
<a class={["row", { active: () => open() }]} />

const flags = motifComponent("a", (row: ComponentBase) => row.class.add({ row: true, active: () => open(), untitled: () => !note.title.trim() }));
const mixed = motifComponent("a", (row: ComponentBase) => row.class.add(["row", { active: () => open() }]));

<a class={{ row: true, active: open(), untitled: !note.title.trim() }} />
<a class={["row", { active: () => open() }]} />

const flags = motifComponent("a", (row) => row.class.add({ row: true, active: () => open(), untitled: () => !note.title.trim() }));
const mixed = motifComponent("a", (row) => row.class.add(["row", { active: () => open() }]));

<a style="opacity: 0.6;" />
<a style={{ borderLeft: "3px solid var(--accent)" }} />
<a style={() => ({ opacity: note.archived ? 0.6 : 1 })} />

const dimmed = motifComponent("a", (row: ComponentBase) => row.style("opacity: 0.6;"));
const marked = motifComponent("a", (row: ComponentBase) => row.style({ borderLeft: "3px solid var(--accent)" }));
const live = motifComponent("a", (row: ComponentBase) => row.style(() => ({ opacity: note.archived ? 0.6 : 1 })));

<a style="opacity: 0.6;" />
<a style={{ borderLeft: "3px solid var(--accent)" }} />
<a style={() => ({ opacity: note.archived ? 0.6 : 1 })} />

const dimmed = motifComponent("a", (row) => row.style("opacity: 0.6;"));
const marked = motifComponent("a", (row) => row.style({ borderLeft: "3px solid var(--accent)" }));
const live = motifComponent("a", (row) => row.style(() => ({ opacity: note.archived ? 0.6 : 1 })));

import { Component, type ComponentBase } from "@motifx/core";

export class Pane extends Component<HTMLDivElement, { toolbar?: ComponentBase; title: string }> {
  override onConfigured() {
    this.class.add("pane");
  }

  override view() {
    return (
      <>
        {this.props.toolbar}
        <h2>{this.props.title}</h2>
      </>
    );
  }
}

import { Component, ComponentBase, motifComponent, motifFragment } from "@motifx/core";

export class Pane extends Component<HTMLDivElement, { toolbar?: ComponentBase; title: string }> {
  static override elementTag = "div";

  override onConfigured() {
    this.class.add("pane");
  }

  override view() {
    const heading = motifComponent("h2", (h2: ComponentBase) => h2.controls.add(motifComponent("text", (node: ComponentBase) => node.bindings.add("textContent", this.props, "title"))));
    return motifFragment({ childs: this.props.toolbar ? [this.props.toolbar, heading] : [heading] });
  }
}

import type { ComponentBase } from "@motifx/core";

export function Pane(props: { toolbar?: ComponentBase; title: string }) {
  return (
    <div class="pane">
      {props.toolbar}
      <h2>{props.title}</h2>
    </div>
  );
}

import { ComponentBase, motifComponent } from "@motifx/core";

export function Pane(props: { toolbar?: ComponentBase; title: string }) {
  return motifComponent("div", (pane: ComponentBase) => {
    pane.class.add("pane");
    if (props.toolbar) pane.controls.add(props.toolbar);
    pane.controls.add(motifComponent("h2", (h2: ComponentBase) => h2.controls.add(motifComponent("text", (node: ComponentBase) => node.bindings.add("textContent", props, "title")))));
  });
}

import { motifOptions, type ComponentBase } from "@motifx/core";

export const Pane = (props: { toolbar?: ComponentBase; title: string }) => motifOptions({
  el: "div",

  onConfigured() {
    this.class.add("pane");
  },

  view() {
    return (
      <>
        {props.toolbar}
        <h2>{props.title}</h2>
      </>
    );
  },
});

import { ComponentBase, motifComponent, motifFragment, motifOptions } from "@motifx/core";

export const Pane = (props: { toolbar?: ComponentBase; title: string }) => motifOptions({
  el: "div",

  onConfigured() {
    this.class.add("pane");
  },

  view() {
    const heading = motifComponent("h2", (h2: ComponentBase) => h2.controls.add(motifComponent("text", (node: ComponentBase) => node.bindings.add("textContent", props, "title"))));
    return motifFragment({ childs: props.toolbar ? [props.toolbar, heading] : [heading] });
  },
});

import { Component } from "@motifx/core";

export class Pane extends Component {
  static elementTag = "div";

  onConfigured() {
    this.class.add("pane");
  }

  view() {
    return (
      <>
        {this.props.toolbar}
        <h2>{this.props.title}</h2>
      </>
    );
  }
}

import { Component, motifComponent, motifFragment } from "@motifx/core";

export class Pane extends Component {
  static elementTag = "div";

  onConfigured() {
    this.class.add("pane");
  }

  view() {
    const heading = motifComponent("h2", (h2) => h2.controls.add(motifComponent("text", (node) => node.bindings.add("textContent", this.props, "title"))));
    return motifFragment({ childs: this.props.toolbar ? [this.props.toolbar, heading] : [heading] });
  }
}

export function Pane(props) {
  return (
    <div class="pane">
      {props.toolbar}
      <h2>{props.title}</h2>
    </div>
  );
}

import { motifComponent } from "@motifx/core";

export function Pane(props) {
  return motifComponent("div", (pane) => {
    pane.class.add("pane");
    if (props.toolbar) pane.controls.add(props.toolbar);
    pane.controls.add(motifComponent("h2", (h2) => h2.controls.add(motifComponent("text", (node) => node.bindings.add("textContent", props, "title")))));
  });
}

import { motifOptions } from "@motifx/core";

export const Pane = (props) => motifOptions({
  el: "div",

  onConfigured() {
    this.class.add("pane");
  },

  view() {
    return (
      <>
        {props.toolbar}
        <h2>{props.title}</h2>
      </>
    );
  },
});

import { motifComponent, motifFragment, motifOptions } from "@motifx/core";

export const Pane = (props) => motifOptions({
  el: "div",

  onConfigured() {
    this.class.add("pane");
  },

  view() {
    const heading = motifComponent("h2", (h2) => h2.controls.add(motifComponent("text", (node) => node.bindings.add("textContent", props, "title"))));
    return motifFragment({ childs: props.toolbar ? [props.toolbar, heading] : [heading] });
  },
});

<Pane toolbar={<div class="toolbar"><span class="toolbar__spacer"></span></div>} title="Ayarlar" />

const toolbar = motifComponent("div", (bar: ComponentBase) => {
  bar.class.add("toolbar");
  bar.controls.add(motifComponent("span", (span: ComponentBase) => span.class.add("toolbar__spacer")));
});
motifComponent(Pane, { toolbar, title: "Ayarlar" });

<Pane toolbar={<div class="toolbar"><span class="toolbar__spacer"></span></div>} title="Ayarlar" />

const toolbar = motifComponent("div", (bar) => {
  bar.class.add("toolbar");
  bar.controls.add(motifComponent("span", (span) => span.class.add("toolbar__spacer")));
});
motifComponent(Pane, { toolbar, title: "Ayarlar" });

<div class="pane">{() => read(props.toolbar)}</div>

const pane = motifComponent("div", (pane: ComponentBase) => {
  pane.class.add("pane");
  pane.bindings.method(() => read(props.toolbar));
});

<div class="pane">{() => read(props.toolbar)}</div>

const pane = motifComponent("div", (pane) => {
  pane.class.add("pane");
  pane.bindings.method(() => read(props.toolbar));
});

<article class="preview" x-html={() => renderMarkdown(note.body)}></article>

const preview = motifComponent("article", (article: ComponentBase) => {
  article.class.add("preview");
  article.bindings.html(() => renderMarkdown(note.body));
});

<article class="preview" x-html={() => renderMarkdown(note.body)}></article>

const preview = motifComponent("article", (article) => {
  article.class.add("preview");
  article.bindings.html(() => renderMarkdown(note.body));
});

<button type="button" onclick={() => this.notes.togglePin(note)}>Sabitle</button>
<input class="editor__title" oninput={(e) => (note.title = (e.target as HTMLInputElement).value)} />
<a rel="router" href={`/${this.folder}`} onclick={(sender, e) => sender.class.add("visited")}>Geri</a>
<form class="confirm" onsubmit:prevent={() => this.remove(note)}>…</form>

<button type="button" onclick={() => notes.togglePin(note)}>Sabitle</button>
<input class="editor__title" oninput={(e) => (note.title = (e.target as HTMLInputElement).value)} />
<a rel="router" href={`/${folder()}`} onclick={(sender, e) => sender.class.add("visited")}>Geri</a>
<form class="confirm" onsubmit:prevent={() => remove(note)}>…</form>

const pin = motifComponent("button", (button: ComponentBase) => {
  button.attr.add({ type: "button" });
  button.motif.on("click", () => this.notes.togglePin(note));
  button.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Sabitle")));
});
const title = motifComponent("input", (input: ComponentBase) => {
  input.class.add("editor__title");
  input.motif.on("input", (_sender: ComponentBase, e: Event) => (note.title = (e.target as HTMLInputElement).value));
});
const back = motifComponent("a", (a: ComponentBase) => {
  a.attr.add({ rel: "router", href: () => `/${this.folder}` });
  a.motif.on("click", (sender: ComponentBase, _e: Event) => sender.class.add("visited"));
  a.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Geri")));
});
const confirm = motifComponent("form", (form: ComponentBase) => {
  form.class.add("confirm");
  form.motif.on("submit:prevent", () => this.remove(note));
});

const pin = motifComponent("button", (button: ComponentBase) => {
  button.attr.add({ type: "button" });
  button.motif.on("click", () => notes.togglePin(note));
  button.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Sabitle")));
});
const title = motifComponent("input", (input: ComponentBase) => {
  input.class.add("editor__title");
  input.motif.on("input", (_sender: ComponentBase, e: Event) => (note.title = (e.target as HTMLInputElement).value));
});
const back = motifComponent("a", (a: ComponentBase) => {
  a.attr.add({ rel: "router", href: () => `/${folder()}` });
  a.motif.on("click", (sender: ComponentBase, _e: Event) => sender.class.add("visited"));
  a.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Geri")));
});
const confirm = motifComponent("form", (form: ComponentBase) => {
  form.class.add("confirm");
  form.motif.on("submit:prevent", () => remove(note));
});

<button type="button" onclick={() => this.notes.togglePin(note)}>Sabitle</button>
<input class="editor__title" oninput={(e) => (note.title = e.target.value)} />
<a rel="router" href={`/${this.folder}`} onclick={(sender, e) => sender.class.add("visited")}>Geri</a>
<form class="confirm" onsubmit:prevent={() => this.remove(note)}>…</form>

<button type="button" onclick={() => notes.togglePin(note)}>Sabitle</button>
<input class="editor__title" oninput={(e) => (note.title = e.target.value)} />
<a rel="router" href={`/${folder()}`} onclick={(sender, e) => sender.class.add("visited")}>Geri</a>
<form class="confirm" onsubmit:prevent={() => remove(note)}>…</form>

const pin = motifComponent("button", (button) => {
  button.attr.add({ type: "button" });
  button.motif.on("click", () => this.notes.togglePin(note));
  button.controls.add(motifComponent("text", (node) => node.setText("Sabitle")));
});
const title = motifComponent("input", (input) => {
  input.class.add("editor__title");
  input.motif.on("input", (_sender, e) => (note.title = e.target.value));
});
const back = motifComponent("a", (a) => {
  a.attr.add({ rel: "router", href: () => `/${this.folder}` });
  a.motif.on("click", (sender, _e) => sender.class.add("visited"));
  a.controls.add(motifComponent("text", (node) => node.setText("Geri")));
});
const confirm = motifComponent("form", (form) => {
  form.class.add("confirm");
  form.motif.on("submit:prevent", () => this.remove(note));
});

const pin = motifComponent("button", (button) => {
  button.attr.add({ type: "button" });
  button.motif.on("click", () => notes.togglePin(note));
  button.controls.add(motifComponent("text", (node) => node.setText("Sabitle")));
});
const title = motifComponent("input", (input) => {
  input.class.add("editor__title");
  input.motif.on("input", (_sender, e) => (note.title = e.target.value));
});
const back = motifComponent("a", (a) => {
  a.attr.add({ rel: "router", href: () => `/${folder()}` });
  a.motif.on("click", (sender, _e) => sender.class.add("visited"));
  a.controls.add(motifComponent("text", (node) => node.setText("Geri")));
});
const confirm = motifComponent("form", (form) => {
  form.class.add("confirm");
  form.motif.on("submit:prevent", () => remove(note));
});

<NoteRow note={note} folder={this.folder} on:mouseenter={() => (this.state.hovered = note.id)} />
<button type="button" on:click={(sender, e) => sender.motif.hide()}>Kapat</button>

<NoteRow note={note} folder={folder()} on:mouseenter={() => (state.hovered = note.id)} />
<button type="button" on:click={(sender, e) => sender.motif.hide()}>Kapat</button>

const row = motifComponent(NoteRow, {
  note,
  folder: this.folder,
  initializeComponent: (row: ComponentBase) => row.motif.on("mouseenter", () => (this.state.hovered = note.id)),
});
const close = motifComponent("button", (button: ComponentBase) => {
  button.attr.add({ type: "button" });
  button.motif.on("click", (sender: ComponentBase, _e: Event) => sender.motif.hide());
  button.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Kapat")));
});

const row = motifComponent(NoteRow, {
  note,
  folder: folder(),
  initializeComponent: (row: ComponentBase) => row.motif.on("mouseenter", () => (state.hovered = note.id)),
});
const close = motifComponent("button", (button: ComponentBase) => {
  button.attr.add({ type: "button" });
  button.motif.on("click", (sender: ComponentBase, _e: Event) => sender.motif.hide());
  button.controls.add(motifComponent("text", (node: ComponentBase) => node.setText("Kapat")));
});

<NoteRow note={note} folder={this.folder} on:mouseenter={() => (this.state.hovered = note.id)} />
<button type="button" on:click={(sender, e) => sender.motif.hide()}>Kapat</button>

<NoteRow note={note} folder={folder()} on:mouseenter={() => (state.hovered = note.id)} />
<button type="button" on:click={(sender, e) => sender.motif.hide()}>Kapat</button>

const row = motifComponent(NoteRow, {
  note,
  folder: this.folder,
  initializeComponent: (row) => row.motif.on("mouseenter", () => (this.state.hovered = note.id)),
});
const close = motifComponent("button", (button) => {
  button.attr.add({ type: "button" });
  button.motif.on("click", (sender, _e) => sender.motif.hide());
  button.controls.add(motifComponent("text", (node) => node.setText("Kapat")));
});

const row = motifComponent(NoteRow, {
  note,
  folder: folder(),
  initializeComponent: (row) => row.motif.on("mouseenter", () => (state.hovered = note.id)),
});
const close = motifComponent("button", (button) => {
  button.attr.add({ type: "button" });
  button.motif.on("click", (sender, _e) => sender.motif.hide());
  button.controls.add(motifComponent("text", (node) => node.setText("Kapat")));
});

<div class="rows" x-wait={() => this.notes.state.items.length === 0}>…</div>
<p class="list__empty" x-display={() => this.visible.length === 0}>…</p>

<div class="rows" x-wait={() => notes.state.items.length === 0}>…</div>
<p class="list__empty" x-display={() => visible().length === 0}>…</p>

motifComponent("div", {
  preconfig: (rows: ComponentBase) => rows.bindings.wait(() => this.notes.state.items.length === 0),
  initializeComponent: (rows: ComponentBase) => rows.class.add("rows"),
});
motifComponent("p", {
  preconfig: (p: ComponentBase) => p.bindings.display(() => this.visible.length === 0),
  initializeComponent: (p: ComponentBase) => p.class.add("list__empty"),
});

motifComponent("div", {
  preconfig: (rows: ComponentBase) => rows.bindings.wait(() => notes.state.items.length === 0),
  initializeComponent: (rows: ComponentBase) => rows.class.add("rows"),
});
motifComponent("p", {
  preconfig: (p: ComponentBase) => p.bindings.display(() => visible().length === 0),
  initializeComponent: (p: ComponentBase) => p.class.add("list__empty"),
});

<div class="rows" x-wait={() => this.notes.state.items.length === 0}>…</div>
<p class="list__empty" x-display={() => this.visible.length === 0}>…</p>

<div class="rows" x-wait={() => notes.state.items.length === 0}>…</div>
<p class="list__empty" x-display={() => visible().length === 0}>…</p>

motifComponent("div", {
  preconfig: (rows) => rows.bindings.wait(() => this.notes.state.items.length === 0),
  initializeComponent: (rows) => rows.class.add("rows"),
});
motifComponent("p", {
  preconfig: (p) => p.bindings.display(() => this.visible.length === 0),
  initializeComponent: (p) => p.class.add("list__empty"),
});

motifComponent("div", {
  preconfig: (rows) => rows.bindings.wait(() => notes.state.items.length === 0),
  initializeComponent: (rows) => rows.class.add("rows"),
});
motifComponent("p", {
  preconfig: (p) => p.bindings.display(() => visible().length === 0),
  initializeComponent: (p) => p.class.add("list__empty"),
});

compiler({ diagnostics: false })

compiler({ diagnostics: false })

npx motif-lint                      # ./tsconfig.json
npx motif-lint -p tsconfig.app.json src/pages/NotePage.tsx   # tek proje / tek dosya
npx motif-lint --json --no-fail     # CI için makine çıktısı, çıkış kodu 0

npx motif-explain src/pages/SettingsPage.tsx               # okunur döküm
npx motif-explain src/pages/SettingsPage.tsx --site prop   # yalnızca bileşen prop'ları
npx motif-explain src/pages/SettingsPage.tsx --json --code # makine çıktısı + üretilen kod

import { Component } from "@motifx/core";
import { NotesService } from "../services/notes";
import { SettingsService } from "../services/settings";
import { Setting } from "../parts/Setting";

const archived = (count: number) => `${count} arşivlenmiş not`;

export default class SettingsPage extends Component {
  notes = this.getService(NotesService)!;
  settings = this.getService(SettingsService)!;

  override view() {
    return (
      <section class="page" title={archived(this.notes.count("archive"))}>
        <p>{this.settings.state.theme}</p>
        <small>{() => archived(this.notes.count("archive"))}</small>
        <Setting name="Tema" hint={this.settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."} />
      </section>
    );
  }
}

import { Component } from "@motifx/core";
import { NotesService } from "../services/notes";
import { SettingsService } from "../services/settings";
import { Setting } from "../parts/Setting";

const archived = (count) => `${count} arşivlenmiş not`;

export default class SettingsPage extends Component {
  notes = this.getService(NotesService);
  settings = this.getService(SettingsService);

  view() {
    return (
      <section class="page" title={archived(this.notes.count("archive"))}>
        <p>{this.settings.state.theme}</p>
        <small>{() => archived(this.notes.count("archive"))}</small>
        <Setting name="Tema" hint={this.settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."} />
      </section>
    );
  }
}

import { FromService } from "@motifx/core";
import { NotesService } from "../services/notes";
import { SettingsService } from "../services/settings";
import { Setting } from "../parts/Setting";

const archived = (count: number) => `${count} arşivlenmiş not`;

export default function SettingsPage() {
  const notes = FromService(NotesService)!;
  const settings = FromService(SettingsService)!;

  return (
    <section class="page" title={archived(notes.count("archive"))}>
      <p>{settings.state.theme}</p>
      <small>{() => archived(notes.count("archive"))}</small>
      <Setting name="Tema" hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."} />
    </section>
  );
}

import { FromService } from "@motifx/core";
import { NotesService } from "../services/notes";
import { SettingsService } from "../services/settings";
import { Setting } from "../parts/Setting";

const archived = (count) => `${count} arşivlenmiş not`;

export default function SettingsPage() {
  const notes = FromService(NotesService);
  const settings = FromService(SettingsService);

  return (
    <section class="page" title={archived(notes.count("archive"))}>
      <p>{settings.state.theme}</p>
      <small>{() => archived(notes.count("archive"))}</small>
      <Setting name="Tema" hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."} />
    </section>
  );
}

import { motifOptions } from "@motifx/core";
import { NotesService } from "../services/notes";
import { SettingsService } from "../services/settings";
import { Setting } from "../parts/Setting";

const archived = (count: number) => `${count} arşivlenmiş not`;

export default () => motifOptions({
  el: null,

  view() {
    const notes = this.getService(NotesService)!;
    const settings = this.getService(SettingsService)!;
    return (
      <section class="page" title={archived(notes.count("archive"))}>
        <p>{settings.state.theme}</p>
        <small>{() => archived(notes.count("archive"))}</small>
        <Setting name="Tema" hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."} />
      </section>
    );
  },
});

import { motifOptions } from "@motifx/core";
import { NotesService } from "../services/notes";
import { SettingsService } from "../services/settings";
import { Setting } from "../parts/Setting";

const archived = (count) => `${count} arşivlenmiş not`;

export default () => motifOptions({
  el: null,

  view() {
    const notes = this.getService(NotesService);
    const settings = this.getService(SettingsService);
    return (
      <section class="page" title={archived(notes.count("archive"))}>
        <p>{settings.state.theme}</p>
        <small>{() => archived(notes.count("archive"))}</small>
        <Setting name="Tema" hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."} />
      </section>
    );
  },
});

[motifjs explain] src/pages/SettingsPage.tsx — 9 expressions
  14:16    attr/attr.literal        class="page"
           => sender.class.add("page")
           STATIC · deps: none — no binding is created
  14:29    attr/attr.call           title={archived(this.notes.count("archive"))}
           => sender.attr.add({ "title": archived(this.notes.count("archive")) })
           ONCE · deps: none — evaluated once during setup, then frozen
           note: a plain function call is passed as a VALUE; write `() => f(x)` to keep it live
  15:9     element/element.dom      <p>
           => sender.controls.add(_mc(<p>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  15:12    child/text.field         {this.settings.state.theme}
           => sender.bindings.add("textContent", this.settings.state, "theme")
           LIVE · deps: this.settings.state.theme — this field only (exact)
  16:9     element/element.dom      <small>
           => sender.controls.add(_mc(<small>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  16:16    child/method             {() => archived(this.notes.count("archive"))}
           => sender.bindings.method(() => archived(this.notes.count("archive")))
           LIVE · deps: ALL reactive fields read inside the getter; collected again on every run
           note: reactive text if the result is text, a Frame if it is a component (the instance is rebuilt on every change)
  17:9     element/element.component <Setting name="Tema" hint={this.settings.state.theme === "system" ? "Sisteme uyar." : "El…
           => sender.controls.add(_mc(<Setting>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  17:18    prop/prop.literal        name="Tema"
           => name: "Tema"
           STATIC · deps: none — no binding is created
  17:30    prop/prop.ternary        hint={this.settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."}
           => hint: () => this.settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."
           RECEIVER · deps: wherever the receiving component reads the getter; nowhere if it does not
           note: ternary wrapped lazily (by design): the receiving component should declare the prop as Bind<T> and read it with read()/toGetter()

[motifjs explain] src/pages/SettingsPage.jsx — 9 expressions
  14:16    attr/attr.literal        class="page"
           => sender.class.add("page")
           STATIC · deps: none — no binding is created
  14:29    attr/attr.call           title={archived(this.notes.count("archive"))}
           => sender.attr.add({ "title": archived(this.notes.count("archive")) })
           ONCE · deps: none — evaluated once during setup, then frozen
           note: a plain function call is passed as a VALUE; write `() => f(x)` to keep it live
  15:9     element/element.dom      <p>
           => sender.controls.add(_mc(<p>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  15:12    child/text.field         {this.settings.state.theme}
           => sender.bindings.add("textContent", this.settings.state, "theme")
           LIVE · deps: this.settings.state.theme — this field only (exact)
  16:9     element/element.dom      <small>
           => sender.controls.add(_mc(<small>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  16:16    child/method             {() => archived(this.notes.count("archive"))}
           => sender.bindings.method(() => archived(this.notes.count("archive")))
           LIVE · deps: ALL reactive fields read inside the getter; collected again on every run
           note: reactive text if the result is text, a Frame if it is a component (the instance is rebuilt on every change)
  17:9     element/element.component <Setting name="Tema" hint={this.settings.state.theme === "system" ? "Sisteme uyar." : "El…
           => sender.controls.add(_mc(<Setting>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  17:18    prop/prop.literal        name="Tema"
           => name: "Tema"
           STATIC · deps: none — no binding is created
  17:30    prop/prop.ternary        hint={this.settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."}
           => hint: () => this.settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."
           RECEIVER · deps: wherever the receiving component reads the getter; nowhere if it does not
           note: ternary wrapped lazily (by design): the receiving component should declare the prop as Bind<T> and read it with read()/toGetter()

[motifjs explain] src/pages/SettingsPage.tsx — 9 expressions
  13:14    attr/attr.literal        class="page"
           => sender.class.add("page")
           STATIC · deps: none — no binding is created
  13:27    attr/attr.call           title={archived(notes.count("archive"))}
           => sender.attr.add({ "title": archived(notes.count("archive")) })
           ONCE · deps: none — evaluated once during setup, then frozen
           note: a plain function call is passed as a VALUE; write `() => f(x)` to keep it live
  14:7     element/element.dom      <p>
           => sender.controls.add(_mc(<p>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  14:10    child/text.field         {settings.state.theme}
           => sender.bindings.add("textContent", settings.state, "theme")
           LIVE · deps: settings.state.theme — this field only (exact)
  15:7     element/element.dom      <small>
           => sender.controls.add(_mc(<small>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  15:14    child/method             {() => archived(notes.count("archive"))}
           => sender.bindings.method(() => archived(notes.count("archive")))
           LIVE · deps: ALL reactive fields read inside the getter; collected again on every run
           note: reactive text if the result is text, a Frame if it is a component (the instance is rebuilt on every change)
  16:7     element/element.component <Setting name="Tema" hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle se…
           => sender.controls.add(_mc(<Setting>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  16:16    prop/prop.literal        name="Tema"
           => name: "Tema"
           STATIC · deps: none — no binding is created
  16:28    prop/prop.ternary        hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."}
           => hint: () => settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."
           RECEIVER · deps: wherever the receiving component reads the getter; nowhere if it does not
           note: ternary wrapped lazily (by design): the receiving component should declare the prop as Bind<T> and read it with read()/toGetter()

[motifjs explain] src/pages/SettingsPage.jsx — 9 expressions
  13:14    attr/attr.literal        class="page"
           => sender.class.add("page")
           STATIC · deps: none — no binding is created
  13:27    attr/attr.call           title={archived(notes.count("archive"))}
           => sender.attr.add({ "title": archived(notes.count("archive")) })
           ONCE · deps: none — evaluated once during setup, then frozen
           note: a plain function call is passed as a VALUE; write `() => f(x)` to keep it live
  14:7     element/element.dom      <p>
           => sender.controls.add(_mc(<p>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  14:10    child/text.field         {settings.state.theme}
           => sender.bindings.add("textContent", settings.state, "theme")
           LIVE · deps: settings.state.theme — this field only (exact)
  15:7     element/element.dom      <small>
           => sender.controls.add(_mc(<small>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  15:14    child/method             {() => archived(notes.count("archive"))}
           => sender.bindings.method(() => archived(notes.count("archive")))
           LIVE · deps: ALL reactive fields read inside the getter; collected again on every run
           note: reactive text if the result is text, a Frame if it is a component (the instance is rebuilt on every change)
  16:7     element/element.component <Setting name="Tema" hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle se…
           => sender.controls.add(_mc(<Setting>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  16:16    prop/prop.literal        name="Tema"
           => name: "Tema"
           STATIC · deps: none — no binding is created
  16:28    prop/prop.ternary        hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."}
           => hint: () => settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."
           RECEIVER · deps: wherever the receiving component reads the getter; nowhere if it does not
           note: ternary wrapped lazily (by design): the receiving component should declare the prop as Bind<T> and read it with read()/toGetter()

[motifjs explain] src/pages/SettingsPage.tsx — 9 expressions
  15:16    attr/attr.literal        class="page"
           => sender.class.add("page")
           STATIC · deps: none — no binding is created
  15:29    attr/attr.call           title={archived(notes.count("archive"))}
           => sender.attr.add({ "title": archived(notes.count("archive")) })
           ONCE · deps: none — evaluated once during setup, then frozen
           note: a plain function call is passed as a VALUE; write `() => f(x)` to keep it live
  16:9     element/element.dom      <p>
           => sender.controls.add(_mc(<p>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  16:12    child/text.field         {settings.state.theme}
           => sender.bindings.add("textContent", settings.state, "theme")
           LIVE · deps: settings.state.theme — this field only (exact)
  17:9     element/element.dom      <small>
           => sender.controls.add(_mc(<small>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  17:16    child/method             {() => archived(notes.count("archive"))}
           => sender.bindings.method(() => archived(notes.count("archive")))
           LIVE · deps: ALL reactive fields read inside the getter; collected again on every run
           note: reactive text if the result is text, a Frame if it is a component (the instance is rebuilt on every change)
  18:9     element/element.component <Setting name="Tema" hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle se…
           => sender.controls.add(_mc(<Setting>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  18:18    prop/prop.literal        name="Tema"
           => name: "Tema"
           STATIC · deps: none — no binding is created
  18:30    prop/prop.ternary        hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."}
           => hint: () => settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."
           RECEIVER · deps: wherever the receiving component reads the getter; nowhere if it does not
           note: ternary wrapped lazily (by design): the receiving component should declare the prop as Bind<T> and read it with read()/toGetter()

[motifjs explain] src/pages/SettingsPage.jsx — 9 expressions
  15:16    attr/attr.literal        class="page"
           => sender.class.add("page")
           STATIC · deps: none — no binding is created
  15:29    attr/attr.call           title={archived(notes.count("archive"))}
           => sender.attr.add({ "title": archived(notes.count("archive")) })
           ONCE · deps: none — evaluated once during setup, then frozen
           note: a plain function call is passed as a VALUE; write `() => f(x)` to keep it live
  16:9     element/element.dom      <p>
           => sender.controls.add(_mc(<p>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  16:12    child/text.field         {settings.state.theme}
           => sender.bindings.add("textContent", settings.state, "theme")
           LIVE · deps: settings.state.theme — this field only (exact)
  17:9     element/element.dom      <small>
           => sender.controls.add(_mc(<small>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  17:16    child/method             {() => archived(notes.count("archive"))}
           => sender.bindings.method(() => archived(notes.count("archive")))
           LIVE · deps: ALL reactive fields read inside the getter; collected again on every run
           note: reactive text if the result is text, a Frame if it is a component (the instance is rebuilt on every change)
  18:9     element/element.component <Setting name="Tema" hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle se…
           => sender.controls.add(_mc(<Setting>, …))
           STATIC · deps: none — the element itself is built once; bindings inside it are their own effects
  18:18    prop/prop.literal        name="Tema"
           => name: "Tema"
           STATIC · deps: none — no binding is created
  18:30    prop/prop.ternary        hint={settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."}
           => hint: () => settings.state.theme === "system" ? "Sisteme uyar." : "Elle seçildi."
           RECEIVER · deps: wherever the receiving component reads the getter; nowhere if it does not
           note: ternary wrapped lazily (by design): the receiving component should declare the prop as Bind<T> and read it with read()/toGetter()

compiler({ explain: "pages/SettingsPage" })

compiler({ explain: "pages/SettingsPage" })

{this.visible.map((note) => <NoteRow key={note.id} note={note} folder={this.folder} />)}

{visible().map((note) => <NoteRow key={note.id} note={note} folder={folder()} />)}

const list = motifComponent({
  initializeComponent: (holder: ComponentBase) => holder.bindings.list(() => this.visible, (note: Note) => motifComponent(NoteRow, { indexkey: () => note.id, note, folder: this.folder })),
});

const list = motifComponent({
  initializeComponent: (holder: ComponentBase) => holder.bindings.list(() => visible(), (note: Note) => motifComponent(NoteRow, { indexkey: () => note.id, note, folder: folder() })),
});

{this.visible.map((note) => <NoteRow key={note.id} note={note} folder={this.folder} />)}

{visible().map((note) => <NoteRow key={note.id} note={note} folder={folder()} />)}

const list = motifComponent({
  initializeComponent: (holder) => holder.bindings.list(() => this.visible, (note) => motifComponent(NoteRow, { indexkey: () => note.id, note, folder: this.folder })),
});

const list = motifComponent({
  initializeComponent: (holder) => holder.bindings.list(() => visible(), (note) => motifComponent(NoteRow, { indexkey: () => note.id, note, folder: folder() })),
});

<a class="row" transition="fade">…</a>

motifComponent("a", { transition: "fade", initializeComponent: (a: ComponentBase) => a.class.add("row") });

<a class="row" transition="fade">…</a>

motifComponent("a", { transition: "fade", initializeComponent: (a) => a.class.add("row") });