Can I Mithril for server-side components? #2908

EverettMcKay · 2023-06-05T15:44:57Z

EverettMcKay
Jun 5, 2023

I am using Mithril to build a website for what I hope to turn into a simple Saas. Currently I have a client component (in the format <Foo attr="some attr" />) whose code I would ultimately like to reside on a server and called by any client.

Can I do this with Mithril? Seems like all I need is to somehow serve a js script, which is what a Mithril ultimately boils down to.
Most of my experience has been client side, so apologies if this is a dumb question. My research so far hasn't panned out. Not knowing the right lingo doesn't help.

Possible alternatives I have found so far: Use mithril and Fusion.js, use Next.js, or perhaps just use Node+Express. Do any of these sound right?

But client side at least, Mithril has been perfect for my component and I love that it doesn't require (or even benefit from) all the complexity of React-based solutions.

laoshaw · 2023-08-03T15:30:26Z

laoshaw
Aug 3, 2023

I am leaving react.js for mithril as all the SPA frameworks nowadays are focusing on SSR and server component. In fact there are many use cases for client-side only(do not care about SEO at all), I hope mithril stays the way it is, be the best lightweight CSR SPA forward.

0 replies

EverettMcKay · 2023-08-30T17:22:54Z

EverettMcKay
Aug 30, 2023
Author

I wanted to follow up on this, as I need to make the decision soon (The decision: to use React or Next instead...gasp!)

To summarize my situation: my component code must live on the server. Pushing these components to clients is the product, so this is a hard requirement (I not doing some weird SEO thing) I don't own the client., but can only provide a code snippet to the client dev. Using Mithril would be ideal because it is so lightweight.

To nail down what I'm hoping for, the client code should look something like this:

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Mithril Server Component Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://unpkg.com/mithril/mithril.js"></script>
</head>
<body>
  <div>
    <div id="divID"></div>
  </div>
  <!-- client's SPA goes here -->
  <script>
    const loadComponent = (divID, apiKey, componentID, otherParams) => {
      const url = `myComponentServer?component=${componentID}&otherParams=${otherParams}`;
      const h = new Headers();
      h.append("Content-Type", "application/json");
      h.append(ApiKeyHeader, apiKey);
      const req = new Request(url, {
        method: "get",
        headers: h,
      });
      fetch(req)
        .then(async (res) => {
          if (res.status !== 200) {
            throw new Error(`Bad request: (${res.status}): ${res.statusText}`);
          }
          const body = await res.json();
          return body;
        })
        .then((content) => {
          const { component } = content;
          m.mount(document.getElementById(divID), component)
        })
        .catch((e) => {
          logEventConsole(`Error: loadSurvey: ${apiKey}, ${customerID}, ${surveyID}, ${userID}`, e);
        });
    };
    document.addEventListener('DOMContentLoaded', (event) => {
      loadComponent("divID", apiKey, componentID, otherParams);
    })
  </script>
</body>
</html>

Looks pretty normal so far. The trick is the server endpoint, which might look like:

const myComponent = () => ({
  tag: "myComponent",
  oninit: () => {},
  attrs: () => {},
  state: () => {},
  view: (v) => m("main", [
    m("h1", {class: "title"}, "My first app"),
    m("button", {onclick: () => {alert('clicked!')}}, "A button"),
    ]);
});

app.get("myComponentServer", validateKey, (req: Request, res: Response) => {
  const component = getSurvey(req, res, account);  // returns myComponent based on componentID
  if (!component) return;

  const comp = magicallyRenderedComponent(component); // returns component js
  const compJSON = JSON.stringify(comp);

  res.status(200).send(compJSON);
});

The server needs to return something the client's mithril can mount. Is this possible? From what I can tell, magicallyRenderedComponent doesn't exist.

(When I first started, I discovered mithril-node-render, but it appears to only return the html tagging and strips out all the js code so that won't do. )

0 replies

EverettMcKay · 2023-10-03T13:25:22Z

EverettMcKay
Oct 3, 2023
Author

GIving up.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can I Mithril for server-side components? #2908

{{title}}

Replies: 3 comments

{{title}}

{{title}}

{{title}}

Select a reply

Can I Mithril for server-side components? #2908

EverettMcKay Jun 5, 2023

Replies: 3 comments

laoshaw Aug 3, 2023

EverettMcKay Aug 30, 2023 Author

EverettMcKay Oct 3, 2023 Author

EverettMcKay
Jun 5, 2023

laoshaw
Aug 3, 2023

EverettMcKay
Aug 30, 2023
Author

EverettMcKay
Oct 3, 2023
Author