Flyps

function simple() {
    return h("div", [
        h("p", "I am a simple view!"),
        h("p.special", [
            "I render text ",
            h("strong", "bold"),
            " and ",
            h("span", { style: { color: "red" } }, "red"),
            "."
        ])
    ]);
} 

mount(mountPoint, simple);

function simple() {
    return h("div", [
        h("p", "I am a simple view!"),
        h("p.special", [
            "I render text ",
            h("strong", "bold"),
            " and ",
            h("span", { style: { color: "red" } }, "red"),
            "."
        ])
    ]);
} 

function parent() {
    return h("div", [
        h("p", "I'm the parent of the simple view"),
        simple()
    ]);
}

mount(mountPoint, parent);

function list(items) {
    return h("ul", items.map(
        item => h("li", `Item ${item}`)
    ));
} 

function numberList() {
    return h("div", [
        "Here is a list of numbers:",
        list([1,2,3])
    ]);
}

mount(mountPoint, numberList);

let count = signal(0);

function counter() {
  return h("div.counter", [
    "Number of clicks: ",
    count.value(),
    h(
      "button",
      {
        style: { margin: "10px" },
        on: { click: () => count.update(count => count + 1) }
      },
      "Click!"
    )
  ]);
}

mount(mountPoint, counter);

let color = signal("#000");
let now = signal(new Date());

setInterval(() => now.reset(new Date()), 1000);

function display() {
    let time = now.value().toTimeString().split(" ")[0];
    return h("h1", { style: { color: color.value() } }, time);
} 

function colorInput() {
    return h("input", {
        attrs: { type: "color", value: color.value() },
        on: { input: e => color.reset(e.target.value) },
    });
}

function clock() {
    return h("div.clock", [display(), colorInput()]);
}

mount(mountPoint, clock);

let data = signal({ height: 1.8, weight: 78 });

let bmi = signalFn(
  withInputSignals(
    () => data,
    ({ height, weight }) => weight / (height * height)
  )
);

let diagnose = signalFn(
  withInputSignals(
    () => bmi,
    bmi => {
      if (bmi < 18.5) return "underweight";
      if (bmi < 25) return "healthy";
      if (bmi < 30) return "overweight";
      return "obese";
    }
  )
);

let color = signalFn(
  withInputSignals(
    () => diagnose,
    diagnose => {
      switch (diagnose) {
        case "underweight":
        case "overweight":
          return "orange";
        case "healthy":
          return "green";
        default:
          return "red";
      }
    }
  )
);

function slider(key, value, min, max, step = 1) {
  return h("input", {
    attrs: {
      type: "range",
      value,
      min,
      max,
      step
    },
    style: { width: "100%" },
    on: {
      input: function(e) {
        data.update(data => ({
          ...data,
          [key]: e.target.value
        }));
      }
    }
  });
}

function calculator([data, bmi, diagnose, color]) {
  let { height, weight } = data;

  return h("div.bmi", [
    h("h3", "BMI calculator"),
    h("div", [`Height: ${height}m`, slider("height", height, 1.0, 2.2, 0.01)]),
    h("div", [`Weight: ${weight}kg`, slider("weight", weight, 30, 200)]),
    h("p", [
      `BMI: ${Math.round(bmi)}`,
      " - ",
      h("strong", { style: { color: color } }, diagnose)
    ])
  ]);
}

mount(
  mountPoint,
  withInputSignals(() => [data, bmi, diagnose, color], calculator)
);