-
Notifications
You must be signed in to change notification settings - Fork 216
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a01e903
commit 9e4f008
Showing
39 changed files
with
1,880 additions
and
1,105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import nodePath from "node:path"; | ||
|
||
export default function createMithrilREPL() { | ||
const BASE_URL = "https://flems.io/"; | ||
|
||
function utoa(data) { | ||
return btoa(unescape(encodeURIComponent(data))); | ||
} | ||
|
||
function generateURLFromData(data) { | ||
return `${BASE_URL}${utoa(JSON.stringify(data))}`; | ||
} | ||
|
||
function fromContentByFilename(contentByFilename) { | ||
console.log("contentByFilename", contentByFilename); | ||
const data = Object.keys(contentByFilename).map((filename) => { | ||
const content = contentByFilename[filename]; | ||
const parsedFilename = nodePath.parse(filename); | ||
return { | ||
name: parsedFilename.name, | ||
type: parsedFilename.ext.split(".").pop(), | ||
source: content, | ||
}; | ||
}); | ||
|
||
const url = generateURLFromData(data); | ||
return url; | ||
} | ||
|
||
return { | ||
fromContentByFilename, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import m from "mithril"; | ||
|
||
export default function Name() { | ||
let name = "John"; | ||
|
||
return { | ||
view: () => m("h1", name), | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import m from "mithril"; | ||
|
||
export default function Name() { | ||
let name = "John"; | ||
setTimeout(() => { | ||
name = "Jane"; | ||
m.redraw(); | ||
}, 1000); | ||
return { | ||
view: () => m("h1", name), | ||
}; | ||
} |
12 changes: 12 additions & 0 deletions
12
content/1-reactivity/3-computed-state/mithril/DoubleCount.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import m from "mithril"; | ||
|
||
export default function DoubleCount() { | ||
let count = 10; | ||
setTimeout(() => { | ||
count = count * 2; | ||
m.redraw(); | ||
}); | ||
return { | ||
view: () => m("div", count), | ||
}; | ||
} |
7 changes: 7 additions & 0 deletions
7
content/2-templating/1-minimal-template/mithril/HelloWorld.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import m from "mithril"; | ||
|
||
export default function HelloWorld() { | ||
return { | ||
view: () => m("h1", "Hello World"), | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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") | ||
), | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.title { | ||
color: red; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import m from "mithril"; | ||
|
||
export default function Colors() { | ||
const colors = ["red", "green", "blue"]; | ||
return { | ||
view: () => | ||
m( | ||
"ul", | ||
colors.map((color) => m("li", { key: color }, color)) | ||
), | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import m from "mithril"; | ||
|
||
export default function Counter() { | ||
let count = 0; | ||
const incrementCount = () => (count = count + 1); | ||
return { | ||
view: () => | ||
m( | ||
"", | ||
m("p", `Counter: ${count}`), | ||
m("button", { onclick: incrementCount }, "+1") | ||
), | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import m from "mithril"; | ||
|
||
export default function InputFocused() { | ||
let value = ""; | ||
return { | ||
view: () => | ||
m("input", { | ||
type: "text", | ||
value, | ||
oninput: (e) => (value = e.target.value), | ||
}), | ||
}; | ||
} |
33 changes: 33 additions & 0 deletions
33
content/2-templating/6-conditional/mithril/TrafficLight.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import m from "mithril"; | ||
const TRAFFIC_LIGHTS = ["red", "orange", "green"]; | ||
|
||
export default function TrafficLight() { | ||
let lightIndex = 0; | ||
let light = () => TRAFFIC_LIGHTS[lightIndex]; | ||
|
||
const nextLight = () => | ||
lightIndex + 1 > TRAFFIC_LIGHTS.length - 1 | ||
? (lightIndex = 0) | ||
: (lightIndex = lightIndex + 1); | ||
|
||
const instructions = () => { | ||
switch (light()) { | ||
case "red": | ||
return "STOP"; | ||
case "orange": | ||
return "SLOW DOWN"; | ||
case "green": | ||
return "GO"; | ||
} | ||
}; | ||
|
||
return { | ||
view: () => | ||
m( | ||
"", | ||
m("button", { onclick: nextLight }, "Next light"), | ||
m("p", `Light is: ${light()}`), | ||
m("p", "You must ", m("span", instructions())) | ||
), | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import m from "mithril"; | ||
|
||
export default function PageTitle() { | ||
let pageTitle = document.title; | ||
|
||
return { | ||
view: () => m("p", `Page title: ${pageTitle}`), | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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), | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}), | ||
}; | ||
} |
12 changes: 12 additions & 0 deletions
12
content/4-component-composition/1-props/mithril/UserProfile.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"}`) | ||
), | ||
}); |
9 changes: 9 additions & 0 deletions
9
content/4-component-composition/2-emit-to-parent/mithril/AnswerButton.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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") | ||
), | ||
}); |
18 changes: 18 additions & 0 deletions
18
content/4-component-composition/2-emit-to-parent/mithril/App.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 }) | ||
), | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import m from "mithril"; | ||
import { FunnyButton } from "./FunnyButton.jsx"; | ||
|
||
export default function App() { | ||
return { | ||
view: () => m(FunnyButton, "Click me!"), | ||
}; | ||
} |
23 changes: 23 additions & 0 deletions
23
content/4-component-composition/3-slot/mithril/FunnyButton.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
), | ||
}); |
8 changes: 8 additions & 0 deletions
8
content/4-component-composition/4-slot-fallback/mithril/App.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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")), | ||
}; | ||
} |
22 changes: 22 additions & 0 deletions
22
content/4-component-composition/4-slot-fallback/mithril/FunnyButton.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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") | ||
), | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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: "[email protected]", | ||
}; | ||
|
||
const updateUsername = (username) => (user.username = username); | ||
|
||
return { | ||
view: () => | ||
m( | ||
"", | ||
m("h1", `Welcome Back, ${user.username}`), | ||
m(UserProfile, { user, updateUsername }) | ||
), | ||
}; | ||
} |
22 changes: 22 additions & 0 deletions
22
content/4-component-composition/5-context/mithril/UserProfile.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
) | ||
), | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 })), | ||
}; | ||
} |
Oops, something went wrong.