IJK Tutorial

main.ts

const isString = x => typeof x === "string";
const isArray = x => Array.isArray(x);
const isObject = x => typeof x === "object" && !isArray(x);

const clean = (arr, n) => (
  n && Array.prototype.push.apply(arr, isString(n[0]) ? [n] : n), arr
);

const child = (n, cb) =>
  n != null ? (isArray(n) ? n.reduce(clean, []).map(cb) : [n + ""]) : [];

const h = (x, y, z) => node =>
  isString(node)
    ? node
    : isObject(node[1])
      ? {
          [x]: node[0],
          [y]: node[1],
          [z]: child(node[2], h(x, y, z))
        }
      : h(x, y, z)([node[0], {}, node[1]]);

const Item = data => ["li", data];
const Article = ({ title, story, related }) => [
  "article",
  [["h2", title], ["hr"], ["p", story], related.map(Item)]
];

const Main = [
  "main",
  [
    ["h1", "Hello World"],
    ["input", { type: "range" }],
    ["ul", [["li", 1], ["li", 2], ["li", 3]]],
    ["button", { onclick: console.log }, "Log Event"],
    false && ["span", "Hidden"],
    Article({
      title: "Some News",
      story: "lorem ipsum dolor sit amet",
      related: [4, 5]
    })
  ]
];

const tree = h("nodeName", "attributes", "children")(Main);

console.log("TREE: ", tree);

window["tree"] = tree;
window["h"] = h;