adding-mithril

build/lib/playground/createMithrilPlayground.js

@@ -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,
+  };
+}

build/lib/playground/index.js

@@ -1,9 +1,11 @@
+import createMithrilPlayground from "./createMithrilPlayground.js";
 import createAlpinePlayground from "./createAlpinePlayground.js";
 import createSveltePlayground from "./createSveltePlayground.js";
 import createVue3Playground from "./createVue3Playground.js";
 import createSolidPlayground from "./createSolidPlayground.js";
 
 export default {
+  mithril: createMithrilPlayground(),
   vue3: createVue3Playground(),
   svelte: createSveltePlayground(),
   alpine: createAlpinePlayground(),

content/6-form-input/3-radio/mithril/PickPill.js

@@ -16,7 +16,7 @@ export default function PickPill() {
             m("input", {
               id: pill,
               checked: picked == pill,
-              type: RadioNodeList,
+              type: "radio",
               value: pill,
               onchange: handleChange,
             }),

content/7-webapp-features/1-render-app/lit/app.js

@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-@customElement("x-app")
+// @customElement("x-app")
 export class XApp extends LitElement {
   render() {
     return html`<h1>Hello world</h1>`;