Add mithril (matschik#165)

Co-authored-by: bblake <bblake@goempyrean.com>
11reed · Jul 20, 2023 · 0e0bee7 · 0e0bee7
1 parent b6803a0
commit 0e0bee7
Show file tree

Hide file tree

Showing 35 changed files with 495 additions and 0 deletions.
diff --git a/content/1-reactivity/1-declare-state/mithril/Name.js b/content/1-reactivity/1-declare-state/mithril/Name.js
@@ -0,0 +1,9 @@
+import m from "mithril";
+
+export default function Name() {
+  let name = "John";
+
+  return {
+    view: () => m("h1", `Hello ${name}`),
+  };
+}
diff --git a/content/1-reactivity/2-update-state/mithril/Name.js b/content/1-reactivity/2-update-state/mithril/Name.js
@@ -0,0 +1,9 @@
+import m from "mithril";
+
+export default function Name() {
+  let name = "John";
+  name = "Jane";
+  return {
+    view: () => m("h1", `Hello ${name}`),
+  };
+}
diff --git a/content/1-reactivity/3-computed-state/mithril/DoubleCount.js b/content/1-reactivity/3-computed-state/mithril/DoubleCount.js
@@ -0,0 +1,9 @@
+import m from "mithril";
+
+export default function DoubleCount() {
+  let count = 10;
+  let doubleCount = count * 2;
+  return {
+    view: () => m("div", doubleCount),
+  };
+}
diff --git a/content/2-templating/1-minimal-template/mithril/HelloWorld.js b/content/2-templating/1-minimal-template/mithril/HelloWorld.js
@@ -0,0 +1,7 @@
+import m from "mithril";
+
+export default function HelloWorld() {
+  return {
+    view: () => m("h1", "Hello World"),
+  };
+}
diff --git a/content/2-templating/2-styling/mithril/CssStyle.js b/content/2-templating/2-styling/mithril/CssStyle.js
@@ -0,0 +1,13 @@
+import "./style.css";
+import m from "mithril";
+
+export default function CssStyle() {
+  return {
+    view: () =>
+      m(
+        "div",
+        m("h1.title", "I am red"),
+        m("button", { style: { fontSize: "10rem" } }, "I am a button")
+      ),
+  };
+}
diff --git a/content/2-templating/2-styling/mithril/style.css b/content/2-templating/2-styling/mithril/style.css
@@ -0,0 +1,3 @@
+.title {
+  color: red;
+}
diff --git a/content/2-templating/3-loop/mithril/Colors.js b/content/2-templating/3-loop/mithril/Colors.js
@@ -0,0 +1,12 @@
+import m from "mithril";
+
+export default function Colors() {
+  const colors = ["red", "green", "blue"];
+  return {
+    view: () =>
+      m(
+        "ul",
+        colors.map((color, idx) => m("li", { key: idx }, color))
+      ),
+  };
+}
diff --git a/content/2-templating/4-event-click/mithril/Counter.js b/content/2-templating/4-event-click/mithril/Counter.js
@@ -0,0 +1,14 @@
+import m from "mithril";
+
+export default function Counter() {
+  let count = 0;
+  const incrementCount = () => (count = count + 1);
+  return {
+    view: () =>
+      m(
+        "div",
+        m("p", `Counter: ${count}`),
+        m("button", { onclick: incrementCount }, "+1")
+      ),
+  };
+}
diff --git a/content/2-templating/5-dom-ref/mithril/InputFocused.js b/content/2-templating/5-dom-ref/mithril/InputFocused.js
@@ -0,0 +1,14 @@
+import m from "mithril";
+
+export default function InputFocused() {
+  let value = "";
+  return {
+    view: () =>
+      m("input", {
+        oncreate: ({ dom }) => dom.focus(),
+        type: "text",
+        value,
+        oninput: (e) => (value = e.target.value),
+      }),
+  };
+}
diff --git a/content/2-templating/6-conditional/mithril/TrafficLight.js b/content/2-templating/6-conditional/mithril/TrafficLight.js
@@ -0,0 +1,33 @@
+import m from "mithril";
+const TRAFFIC_LIGHTS = ["red", "orange", "green"];
+
+export default function TrafficLight() {
+  let lightIndex = 0;
+  let currentLight = () => TRAFFIC_LIGHTS[lightIndex];
+
+  const nextLight = () =>
+    lightIndex + 1 > TRAFFIC_LIGHTS.length - 1
+      ? (lightIndex = 0)
+      : (lightIndex = lightIndex + 1);
+
+  const instructions = () => {
+    switch (currentLight()) {
+      case "red":
+        return "STOP";
+      case "orange":
+        return "SLOW DOWN";
+      case "green":
+        return "GO";
+    }
+  };
+
+  return {
+    view: () =>
+      m(
+        "div",
+        m("button", { onclick: nextLight }, "Next light"),
+        m("p", `Light is: ${currentLight()}`),
+        m("p", "You must ", m("span", instructions()))
+      ),
+  };
+}
diff --git a/content/3-lifecycle/1-on-mount/mithril/PageTitle.js b/content/3-lifecycle/1-on-mount/mithril/PageTitle.js
@@ -0,0 +1,7 @@
+import m from "mithril";
+
+export default function PageTitle() {
+  return {
+    view: () => m("p", `Page title: ${document.title}`),
+  };
+}
diff --git a/content/3-lifecycle/2-on-unmount/mithril/Time.js b/content/3-lifecycle/2-on-unmount/mithril/Time.js
@@ -0,0 +1,15 @@
+import m from "mithril";
+
+export default function Time() {
+  let time = new Date().toLocaleTimeString();
+
+  const timer = setInterval(() => {
+    time = new Date().toLocaleTimeString();
+    m.redraw();
+  }, 1000);
+
+  return {
+    view: () => m("p", `Current time: ${time}`),
+    onremove: () => clearInterval(timer),
+  };
+}
diff --git a/content/4-component-composition/1-props/mithril/App.js b/content/4-component-composition/1-props/mithril/App.js
@@ -0,0 +1,14 @@
+import m from "mithril";
+import UserProfile from "./UserProfile.js";
+
+export default function App() {
+  return {
+    view: () =>
+      m(UserProfile, {
+        name: "john",
+        age: 20,
+        favouriteColors: ["green", "blue", "red"],
+        isAvailable: true,
+      }),
+  };
+}
diff --git a/content/4-component-composition/1-props/mithril/UserProfile.js b/content/4-component-composition/1-props/mithril/UserProfile.js
@@ -0,0 +1,12 @@
+import m from "mithril";
+
+export const UserProfile = () => ({
+  view: ({ attrs: { name, age, favouriteColors, isAvailable } }) =>
+    m(
+      "div",
+      m("p", `My name is ${name}!`),
+      m("p", `My age is ${age}!`),
+      m("p", `My favourite colors are ${favouriteColors.join(", ")}!`),
+      m("p", `I am ${isAvailable ? "available" : "not available"}`)
+    ),
+});
diff --git a/content/4-component-composition/2-emit-to-parent/mithril/AnswerButton.js b/content/4-component-composition/2-emit-to-parent/mithril/AnswerButton.js
@@ -0,0 +1,9 @@
+import m from "mithril";
+export const AnswerButton = ({ attrs: { onYes, onNo } }) => ({
+  view: () =>
+    m(
+      "div",
+      m("button", { onclick: onYes }, "YES"),
+      m("button", { onclick: onNo }, "NO")
+    ),
+});
diff --git a/content/4-component-composition/2-emit-to-parent/mithril/App.js b/content/4-component-composition/2-emit-to-parent/mithril/App.js
@@ -0,0 +1,18 @@
+import m from "mithril";
+import AnswerButton from "./AnswerButton.js";
+
+export default function App() {
+  let canCome = true;
+  const onAnswerNo = () => (canCome = false);
+  const onAnswerYes = () => (canCome = true);
+
+  return {
+    view: () =>
+      m(
+        "",
+        m("p", "Are you happy?"),
+        m("p", { style: { fontSize: 50 } }, canCome ? "😀" : "😥"),
+        m(AnswerButton, { onYes: onAnswerYes, onNo: onAnswerNo })
+      ),
+  };
+}
diff --git a/content/4-component-composition/3-slot/mithril/App.js b/content/4-component-composition/3-slot/mithril/App.js
@@ -0,0 +1,8 @@
+import m from "mithril";
+import { FunnyButton } from "./FunnyButton.jsx";
+
+export default function App() {
+  return {
+    view: () => m(FunnyButton, "Click me!"),
+  };
+}
diff --git a/content/4-component-composition/3-slot/mithril/FunnyButton.js b/content/4-component-composition/3-slot/mithril/FunnyButton.js
@@ -0,0 +1,23 @@
+import m from "mithril";
+
+export const FunnyButton = () => ({
+  view: ({ children }) =>
+    m(
+      "button",
+      {
+        style: {
+          background: "rgba(0, 0, 0, 0.4)",
+          color: "#fff",
+          padding: "10px 20px",
+          fontSize: "30px",
+          border: "2px solid #fff",
+          margin: "8px",
+          transform: "scale(0.9)",
+          boxShadow: "4px 4px rgba(0, 0, 0, 0.4)",
+          transition: "transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s",
+          outline: "0",
+        },
+      },
+      m(children)
+    ),
+});
diff --git a/content/4-component-composition/4-slot-fallback/mithril/App.js b/content/4-component-composition/4-slot-fallback/mithril/App.js
@@ -0,0 +1,8 @@
+import m from "mithril";
+import FunnyButton from "./FunnyButton.jsx";
+
+export default function App() {
+  return {
+    view: () => m("", m(FunnyButton), m(FunnyButton, "I got Content")),
+  };
+}
diff --git a/content/4-component-composition/4-slot-fallback/mithril/FunnyButton.js b/content/4-component-composition/4-slot-fallback/mithril/FunnyButton.js
@@ -0,0 +1,22 @@
+import m from "mithril";
+export const FunnyButton = ({ children }) => ({
+  view: () =>
+    m(
+      "button",
+      {
+        style: {
+          background: "rgba(0, 0, 0, 0.4)",
+          color: "#fff",
+          padding: "10px 20px",
+          fontSize: "30px",
+          border: "2px solid #fff",
+          margin: "8px",
+          transform: "scale(0.9)",
+          boxShadow: "4px 4px rgba(0, 0, 0, 0.4)",
+          transition: "transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s",
+          outline: "0",
+        },
+      },
+      children || m("span", "No content found")
+    ),
+});
diff --git a/content/4-component-composition/5-context/mithril/App.js b/content/4-component-composition/5-context/mithril/App.js
@@ -0,0 +1,22 @@
+import m from "mithril";
+import UserProfile from "./UserProfile.jsx";
+
+export default function App() {
+  // In a real app, you would fetch the user data from an API
+  const user = {
+    id: 1,
+    username: "unicorn42",
+    email: "unicorn42@example.com",
+  };
+
+  const updateUsername = (username) => (user.username = username);
+
+  return {
+    view: () =>
+      m(
+        "",
+        m("h1", `Welcome Back, ${user.username}`),
+        m(UserProfile, { user, updateUsername })
+      ),
+  };
+}
diff --git a/content/4-component-composition/5-context/mithril/UserProfile.js b/content/4-component-composition/5-context/mithril/UserProfile.js
@@ -0,0 +1,22 @@
+import m from "mithril";
+export default function UserProfile() {
+  return {
+    view: ({
+      attrs: {
+        user: { username, email },
+        updateUsername,
+      },
+    }) =>
+      m(
+        "div",
+        m("h2", "My Profile"),
+        m("p", `Username: ${username}`),
+        m("p", `Email : ${email}`),
+        m(
+          "button",
+          { onclick: () => updateUsername("Jane") },
+          "Update username to Jane"
+        )
+      ),
+  };
+}
diff --git a/content/6-form-input/1-input-text/mithril/InputHello.js b/content/6-form-input/1-input-text/mithril/InputHello.js
@@ -0,0 +1,11 @@
+import m from "mithril";
+
+export default function InputHello() {
+  let text = "Hello world";
+  const handleChange = ({ target: { value } }) => (text = value);
+
+  return {
+    view: () =>
+      m("", m("p", text), m("input", { value: text, onchange: handleChange })),
+  };
+}
diff --git a/content/6-form-input/2-checkbox/mithril/IsAvailable.js b/content/6-form-input/2-checkbox/mithril/IsAvailable.js
@@ -0,0 +1,21 @@
+import m from "mithril";
+
+export default function IsAvailable() {
+  let isAvailable = false;
+  const onUpdate = (isAvailable = !isAvailable);
+
+  return {
+    view: () =>
+      m(
+        "",
+
+        m("input", {
+          id: "is-available",
+          type: "checkbox",
+          checked: isAvailable,
+          onChange: onUpdate,
+        }),
+        m("label", { for: "is-available" }, "Is available")
+      ),
+  };
+}
diff --git a/content/6-form-input/3-radio/mithril/PickPill.js b/content/6-form-input/3-radio/mithril/PickPill.js
@@ -0,0 +1,28 @@
+import m from "mithril";
+
+export default function PickPill() {
+  let picked = "red";
+  let pills = ["red", "green", "blue"];
+  const handleChange = ({ target: { value } }) => (picked = value);
+
+  return {
+    view: () =>
+      m(
+        "",
+        m("", `Picked: ${picked}`),
+        pills.map((pill) =>
+          m(
+            ".",
+            m("input", {
+              id: pill,
+              checked: picked == pill,
+              type: "radio",
+              value: pill,
+              onchange: handleChange,
+            }),
+            m("label", { for: pill }, pill)
+          )
+        )
+      ),
+  };
+}