I am using Mithril to build a website for what I hope to turn into a simple Saas. Curr

Can I Mithril for server-side components? about mithril.js HOT 3 OPEN

EverettMcKay commented on July 17, 2024

Can I Mithril for server-side components?

from mithril.js.

Comments (3)

laoshaw commented on July 17, 2024 1

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.

from mithril.js.

EverettMcKay commented on July 17, 2024

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. )

from mithril.js.

EverettMcKay commented on July 17, 2024

GIving up.

from mithril.js.

Can I Mithril for server-side components? about mithril.js HOT 3 OPEN

Comments (3)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent